/*
 * Fallwerk – Aufgaben einer Akte und zentrale Wiedervorlagen (ruhige Listen, offene Aufgaben zuerst).
 * Verwendet ausschließlich Tokens aus tokens.css und vorhandene Komponenten (Kennzeichen, Hinweise, Schaltflächen).
 * Überfällig: Symbol, Text und Warnstil (badge--warning), nie nur Farbe und nicht alarmistisch.
 */
.task-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* Die Karte richtet ihre Inhalte links aus; die Listen füllen dennoch die volle Breite, damit alle Einträge gleich breit sind. */
.task-list,
.task-done {
  justify-self: stretch;
}

.task-entry {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-surface);
}

/* Überfällige Aufgaben erhalten zusätzlich einen kräftigeren Rand links; die Kennzeichnung bleibt der Text. */
.task-entry--overdue {
  border-left: calc(var(--border-width) * 4) solid var(--color-warning);
}

.task-entry--done,
.task-entry--unreadable {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.task-entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}

.task-title {
  margin: 0;
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-strong);
  overflow-wrap: anywhere;
}

.task-entry--done .task-title {
  font-weight: var(--font-weight-normal);
}

.task-due {
  display: inline-flex;
  align-items: center;
}

.task-entry > p {
  margin: 0;
}

.task-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Erledigen und Bearbeiten stehen links; Entfernen steht abgesetzt rechts in der Gefahrenfarbe. */
.task-entry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  margin-top: var(--space-1);
}

.task-entry__main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.task-entry__remove {
  color: var(--color-danger);
}

.task-actions {
  margin-top: var(--space-3);
}

.task-group-label {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-strong);
}

.task-form {
  gap: var(--space-4);
}