/* ═══════════════════════════════════════════════════════════════════════════════
 * ViCORE — MANAGEMENT-COCKPIT (Pilot A, 16.08.2026) · Namensraum .ck2-
 *
 * Komposition statt Kachelraster: EIN großer Bereich links (die Arbeit), zwei
 * schmale rechts (heute · Bestand). Die Gewichtung steckt im Grid, nicht in Farbe.
 * Nur Tokens aus css/design-system.css.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.ck2 {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  min-height: 0;
  /* Das Cockpit fuellt die verfuegbare Hoehe, statt oben zu kleben und darunter
     Leerflaeche zu lassen. Gescrollt wird INNERHALB der Arbeitsliste — Kopf und
     Ueberblick bleiben stehen. */
  height: 100%;
}
.ck2-main { display: flex; flex-direction: column; min-height: 0; }
.ck2-main > .ck2-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ck2 > * { min-width: 0; }
.ck2-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* Eine Fläche je Bereich — Rahmen, kein Schatten. */
.ck2-main, .ck2-panel {
  background: var(--color-surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
}

/* ── Bereichskopf ────────────────────────────────────────────────────────────
   Titel in Satzschreibung, daneben die Anzahl als ruhige Zahl. Kein farbiger
   Punkt, keine Versalien — der Titel trägt sich selbst. */
.ck2-head {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.ck2-head__t {
  margin: 0; font-size: var(--text-lg); font-weight: var(--fw-semibold);
  letter-spacing: -0.01em; color: var(--gray-900);
}
.ck2-head__n {
  font-size: var(--text-sm); color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}
.ck2-scope {
  margin-left: auto; font-size: var(--text-xs); color: var(--green-700);
  background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: var(--radius-pill); padding: 2px var(--space-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
}

/* ── Arbeitsliste ────────────────────────────────────────────────────────────
   Zeilen mit Trennlinie, keine Karte je Eintrag. Drei Spalten: Art · Sache · Frist.
   Die Art steht links als schmale, ruhige Beschriftung — sie ordnet ein, ohne zu
   schreien; deshalb kein farbiges Pill je Zeile. */
.ck2-list { display: flex; flex-direction: column; }
/* Die Basisschicht gibt jedem <button> einen Radius. Eine Listenzeile ist aber
   kein Kästchen — sonst entsteht optisch wieder Karte-in-Karte. */
.ck2-row, .ck2-metric, .ck2-more { border-radius: 0; }
.ck2-row {
  appearance: none; width: 100%; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 108px minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-3);
  padding: 10px var(--space-5);
  border: 0; border-top: 1px solid var(--border-subtle);
  background: var(--color-surface); color: inherit; font: inherit;
  transition: background 120ms ease;
}
.ck2-list > .ck2-row:first-child { border-top: 0; }
.ck2-row:hover { background: var(--gray-50); }
.ck2-row:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }

.ck2-row__kind {
  font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ck2-row__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ck2-row__t {
  font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--gray-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck2-row__m {
  font-size: var(--text-sm); color: var(--gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck2-row__ref { font-variant-numeric: tabular-nums; }
.ck2-row__sep { margin: 0 6px; color: var(--gray-400); }

/* Die Frist ist der einzige Ort mit Farbe in der Zeile. */
.ck2-row__due { text-align: right; white-space: nowrap; display: flex; flex-direction: column; gap: 1px; }
.ck2-row__due-v { font-size: var(--text-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.ck2-row__due-d { font-size: var(--text-xs); color: var(--gray-500); font-variant-numeric: tabular-nums; }
.ck2-tone-crit .ck2-row__due-v, .ck2-tone-crit { color: var(--color-danger-ink); }
.ck2-tone-warn .ck2-row__due-v { color: var(--color-gold-ink); }
.ck2-tone-ok   .ck2-row__due-v { color: var(--gray-700); }
.ck2-tone-none .ck2-row__due-v { color: var(--gray-400); }

/* Schmale Panels: die Art wandert unter den Titel. In 380 px Breite frisst eine
   eigene Spalte fuer „Aufgabe"/„Wiedervorlage" ein Drittel der Zeile — der Titel
   wurde dadurch nach drei Woertern abgeschnitten. */
.ck2-list--compact .ck2-row {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 2px; padding-top: 9px; padding-bottom: 9px;
}
.ck2-list--compact .ck2-row__kind { grid-column: 1 / -1; order: 3; }
.ck2-list--compact .ck2-row__due { align-self: start; }

/* ── Kennzahlen als Zeilen ───────────────────────────────────────────────────
   Bewusst KEINE Kacheln: sechs gleich große Kacheln behaupten, sechs Dinge seien
   gleich wichtig. Als Zeilenliste bleibt die Zahl lesbar, die Fläche ruhig und
   der Vergleich untereinander möglich. */
.ck2-metrics { display: flex; flex-direction: column; }
.ck2-metrics > .ck2-metric:first-child { border-top: 0; }

/* ── Zustände ────────────────────────────────────────────────────────────────── */
.ck2-empty {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--space-6) var(--space-5);
}
.ck2-empty__t { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--gray-900); }
.ck2-empty__s { font-size: var(--text-sm); color: var(--gray-500); max-width: 52ch; }
@keyframes ck2Skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── Schmalere Breiten ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .ck2 { grid-template-columns: minmax(0, 1fr); }
  .ck2-side { flex-direction: row; }
  .ck2-side > * { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 820px) {
  .ck2-side { flex-direction: column; }
  .ck2-row { grid-template-columns: minmax(0, 1fr) auto; padding: 10px var(--space-4); row-gap: 2px; }
  /* Die Art wandert unter den Titel — sie ist Einordnung, nicht Navigation. */
  .ck2-row__kind { grid-column: 1 / -1; order: 3; }
  .ck2-head, .ck2-metric, .ck2-empty, /* Schmale Panels: die Art wandert unter den Titel. In 380 px Breite frisst eine
   eigene Spalte fuer „Aufgabe"/„Wiedervorlage" ein Drittel der Zeile — der Titel
   wurde dadurch nach drei Woertern abgeschnitten. */
.ck2-list--compact .ck2-row {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 2px; padding-top: 9px; padding-bottom: 9px;
}
.ck2-list--compact .ck2-row__kind { grid-column: 1 / -1; order: 3; }
.ck2-list--compact .ck2-row__due { align-self: start; }
}


/* ── UX-Phase 7 §9: Management-Cockpit ist Portfolio-Sicht ───────────────────
   Handlungsbedarf teamweit (zentrale Arbeitsliste als Metric-Zeilen) links,
   Überblick und Verteilungen rechts. Persönliche Arbeit steht im Arbeitsplatz;
   `/api/cockpit/mine` wird hier nicht mehr gelesen. Das tote CSS der abgelösten
   Bausteine (.ck2-empty, .ck2-skel, .ck2-metric) räumt Phase 9. */
.ck2-scope {
  flex: 0 0 auto; padding: 0 var(--space-2);
  border-radius: var(--radius-sm); background: var(--gray-100);
  color: var(--gray-600); font-size: var(--text-xxs);
  font-weight: var(--fw-medium); line-height: 1.9; white-space: nowrap;
}
.ck2-wlg + .ck2-wlg { margin-top: var(--space-3); }
.ck2-wlg__l {
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--gray-500); padding: 0 var(--space-2) var(--space-1);
}
#ck2-wl .vic-mtr-i.is-active {
  background: var(--color-sage-soft);
  box-shadow: inset 3px 0 0 var(--color-sage);
}
.ck2-x {
  border: 0; background: none; cursor: pointer; font-size: var(--text-lg);
  color: var(--gray-500); line-height: 1; padding: 0 var(--space-1);
}

/* Verteilungen — aus „Mein Korb" übernommen (§3). */
.ck2-bds { display: flex; flex-direction: column; gap: var(--space-4); }
.ck2-bd__l {
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--gray-500); margin-bottom: var(--space-1);
}
.ck2-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) 84px 34px;
  align-items: center; gap: var(--space-2);
  width: 100%; border: 0; background: none; cursor: pointer;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-xs); color: var(--gray-700); text-align: left;
}
.ck2-bar:hover { background: var(--gray-100); color: var(--gray-900); }
.ck2-bar__l { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ck2-bar__lt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck2-bar__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ck2-bar__track { height: 6px; border-radius: 3px; background: var(--gray-100); overflow: hidden; }
.ck2-bar__fill { display: block; height: 100%; border-radius: 3px; }
.ck2-bar__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-600); }