/* ═══════════════════════════════════════════════════════════════════════════════
 * VICore — REITER „ARBEIT" im Vorgang (Namespace `.cw-`, Gegenstück zu case-work.js)
 *
 * EINE Liste für Aufgaben, Wiedervorlagen und Antwort-Wiedervorlagen. Bewusst
 * ZEILEN statt Karten: klare Trennlinien, ruhige Flächen, hohe Informationsdichte.
 * Ein gerahmtes Kästchen je Eintrag wäre genau die „Card-Wüste", die dieser Umbau
 * beseitigt — Rahmen trägt nur der Listenblock als Ganzes.
 *
 * Optik der Filterleiste kommt vollständig aus vi-filters.css (VIFilters),
 * Statusfarben und Leerzustände aus vi-ui.css (VIUI). Hier steht ausschließlich,
 * was diese Liste ausmacht. Nur Tokens aus css/design-system.css.
 *
 * Doku: docs/CASE_WORK.md
 * ═══════════════════════════════════════════════════════════════════════════════ */

.cw {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  font-family: var(--font-body);
}

/* ── Kopfzeile: Titel · Zahlen · EINE Primäraktion ──────────────────────────
   Eine einzige, flache Zeile. Kein Abschnittsrahmen, keine Unterüberschrift —
   der Reiter heißt bereits „Arbeit". */
.cw-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.cw-title {
  margin: 0;
  font-size: var(--ui-text-section);
  font-weight: var(--fw-semibold);
  color: var(--gray-900);
  letter-spacing: -0.01em;
}
.cw-stats {
  font-size: var(--ui-text-meta);
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.cw-stats .cw-sep { color: var(--gray-300); }
/* Zeitliche Dringlichkeit trägt Farbe, sonst nichts (CI-Regel: Akzent sparsam). */
.cw-stat-today { color: var(--color-gold-ink); font-weight: var(--fw-semibold); }
.cw-stat-over  { color: var(--color-danger-ink); font-weight: var(--fw-semibold); }
.cw-head-a { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.cw-caret { margin-left: var(--space-1); font-size: var(--ui-text-label); opacity: 0.75; }

/* Die Filterleiste sitzt direkt unter dem Kopf; ihr eigener Fußabstand entfällt,
   den Rhythmus gibt `.cw` vor. */
.cw > div > .vif { margin-bottom: 0; }

/* ── Die gemeinsame Arbeitsliste ────────────────────────────────────────────
   EIN Rahmen um die ganze Liste, Trennlinien dazwischen — nicht je Eintrag. */
.cw-list {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  overflow: hidden;
  min-width: 0;
}
.cw-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--ui-line-soft);
  cursor: pointer;
  transition: background var(--transition);
  min-width: 0;
}
.cw-row:first-child { border-top: 0; }
.cw-row:hover { background: var(--ui-surface-2); }
.cw-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-sage); }
/* Überfällig: ein schmaler Rand links statt einer roten Fläche. */
.cw-row.is-over { box-shadow: inset 3px 0 0 var(--color-danger); }
.cw-row.is-next { background: var(--color-forest-soft); }
.cw-row.is-next:hover { background: var(--color-sage-soft); }
.cw-row.is-done .cw-t { color: var(--gray-500); text-decoration: line-through; text-decoration-thickness: 1px; }
.cw-row.is-done .cw-ic { opacity: 0.45; }
/* Kurzes Aufleuchten, wenn aus dem Vorgangskopf hierher gesprungen wurde. */
.cw-row.is-flash { animation: cw-flash 1.6s ease-out; }
@keyframes cw-flash {
  0%, 45% { background: var(--color-gold-soft); }
  100%    { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .cw-row.is-flash { animation: none; background: var(--color-gold-soft); } }

/* Typ-Symbol — klein, ruhig, keine drei Signalfarben. */
.cw-ic {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-top: 1px;
  color: var(--gray-500);
  flex: 0 0 auto;
}
.cw-ic svg { width: 16px; height: 16px; }

.cw-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* Ebene 1 — der Inhalt dominiert. */
.cw-t {
  font-size: var(--ui-text-strong);
  font-weight: var(--fw-semibold);
  color: var(--gray-900);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.cw-star {
  display: inline-flex; vertical-align: -2px; margin-right: var(--space-1);
  width: 14px; height: 14px; color: var(--color-gold-ink);
}
.cw-star svg { width: 14px; height: 14px; }

/* Ebene 2 — Typ · Fälligkeit · Verantwortlicher. */
.cw-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-1) 6px;
  font-size: var(--ui-text-meta);
  color: var(--gray-500);
  min-width: 0;
}
.cw-type { font-weight: var(--fw-medium); color: var(--gray-700); }
.cw-sep { color: var(--gray-300); }
.cw-due { font-variant-numeric: tabular-nums; }
.cw-due.is-over  { color: var(--color-danger-ink); font-weight: var(--fw-semibold); }
.cw-due.is-today { color: var(--color-gold-ink); font-weight: var(--fw-semibold); }
.cw-owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }

/* Ebene 3 — optionale Zusatzinformation (Herkunft, Kontext). */
.cw-sub {
  font-size: var(--ui-text-meta);
  color: var(--gray-500);
  overflow-wrap: anywhere;
}

/* Kontextmerkmale — flache Textmarken, keine bunten Plaketten. */
.cw-tag {
  display: inline-flex; align-items: center;
  padding: 0 6px; height: 18px;
  border-radius: var(--radius-sm);
  font-size: var(--ui-text-label);
  font-weight: var(--fw-medium);
  background: var(--gray-100);
  color: var(--gray-700);
  white-space: nowrap;
}

/* Eingegangene Antwort bestätigen — eine ruhige Zeile, keine eigene Karte. */
.cw-confirm {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--ui-text-meta);
  color: var(--gray-700);
}

/* Rechte Spalte: Zustand · Erledigen · Aktionsmenü. */
.cw-end {
  display: flex; align-items: center; gap: var(--space-2);
  flex: 0 0 auto; padding-top: 1px;
}
.cw-act {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--gray-500);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cw-act svg { width: 15px; height: 15px; }
.cw-act:hover { background: var(--ui-surface); border-color: var(--ui-line); color: var(--gray-900); }
.cw-row:hover .cw-act { color: var(--gray-700); }
.cw-act:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Erledigte Einträge: ruhige Fußzeile statt dauerhafter Historie in der Arbeitsliste. */
.cw-donebar {
  appearance: none; cursor: pointer;
  align-self: flex-start;
  border: 0; background: transparent;
  padding: var(--space-1) 0;
  font-size: var(--ui-text-meta);
  color: var(--gray-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cw-donebar:hover { color: var(--gray-900); }
.cw-donebar:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.cw-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cw-empty-plain { font-size: var(--ui-text-meta); color: var(--gray-500); margin: 0; }

/* ── Dialog „Wiedervorlage" (Anlegen und Bearbeiten in EINEM Weg) ────────────
   Rahmen, Breite, Feldoptik, Fehlermeldung und Zweispaltigkeit kommen seit
   21.08.2026 aus dem gemeinsamen Overlay-System (public/vi-dialog.css). Hier
   bleibt nur, was fachlich zu diesem Dialog gehört. */
.cw-rem-hint {
  margin-bottom: var(--space-4);
  font-size: var(--ui-text-meta);
  color: var(--gray-500);
}

/* ── Schmale Breiten: Desktop bleibt die Arbeitsansicht, mobil bleibt es bedienbar ── */
@media (max-width: 720px) {
  .cw-head-a { margin-left: 0; width: 100%; }
  .cw-head-a > .vi-btn-primary { flex: 1 1 auto; justify-content: center; }
  .cw-row { grid-template-columns: 20px minmax(0, 1fr); row-gap: var(--space-2); padding: var(--space-3); }
  /* Zustand und Aktionen rücken unter den Inhalt statt die Zeile zu sprengen. */
  .cw-end { grid-column: 2; justify-content: flex-start; }
  .cw-owner { max-width: none; }
}