/* sections/scorecard/scorecard.css — Team-Scorecard (Tab „Scorecard")
 *
 * Executive-Summary-Kopf (#sc-summary): „Stand"-Zeile · 3 Hero-KPI-Karten
 * (große neutrale Zahl + Prognose-Chip + Bullet + Burn-up) · Team-Verteilungs-Bar
 * (= Status-Filter) + Konzentration · Health-Strip (Risiko-Zähler). Darunter die
 * Mitarbeiter-Matrix (sc-matrix): Score-Donut (Ring-Farbe = Ampel-Ton aus KpiTone),
 * Ist/Soll-Bullets, Pünktlichkeitsrate, Überfällig-Zähler, Verlauf-Sparkline.
 *
 * FARBDISZIPLIN (durchgängig): große Zahlen NEUTRAL — Farbe lebt nur in
 * Ton-Akzent, Bullet, Burn-up, Verteilungs-Bar und den echten Alarm-Zählern.
 *
 * Breakpoints (repo-Standard): Desktop ≥1400 · Notebook 1000–1399 ·
 * Tablet 600–999 · Mobile <600. Die Matrix scrollt ab Tablet horizontal in
 * ihrer eigenen Karte (kein Body-Scroll).
 */

/* ── Summary-Kopf (Stand · Hero · Verteilung · Health-Strip) ───────────── */

/* Vertikaler Rhythmus des Kopfs: eine konsistente Lücke zwischen den Bändern. */
.sc-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 20px 0;
}

/* Ton-Akzent-Variablen (ein Ort): setzen --sc-accent für Hero-Kante, Strip-Kante
 * und Burn-up. Farbe kommt aus den Status-Tokens; neutral/muted bleiben dezent. */
.sc-tone-accent-success { --sc-accent: var(--status-success-fg); }
.sc-tone-accent-warning { --sc-accent: var(--status-warning-fg); }
.sc-tone-accent-danger  { --sc-accent: var(--status-danger-fg); }
.sc-tone-accent-neutral { --sc-accent: var(--color-border-strong, var(--color-border)); }
.sc-tone-accent-muted   { --sc-accent: var(--color-border); }

/* „Stand"-Info: dezent in der Toolbar rechts (Aktualität + Abdeckung). */
.sc-stand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sc-stand-dot { opacity: 0.45; }

/* ── Ansicht-Modus: View-Container + Switch-Gruppe ────────────────────────── */

/* Zwei Modi (Mitarbeiter | Kontingente) teilen sich den Scroll-Bereich; der
 * inaktive ist via [hidden] ausgeblendet (defensiv, falls ein Reset display setzt). */
.sc-view[hidden] { display: none; }

/* Switch-Gruppe im Section-Header: Ansicht-Switch + Stichtag-Switch nebeneinander,
 * auf schmalen Slots (Mobile-Toolbar) umbrechend. */
.sc-switch-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Kontingente-Modus: Bereich-Filter + Gruppierung betreffen nur die Mitarbeiter-
 * Matrix → hier ausblenden (die Suche bleibt, Placeholder wechselt in JS). Auf die
 * Scorecard-Section gescopt (nur diese .lod-section trägt data-sc-view). */
.lod-section[data-sc-view="kontingente"] [data-toolbar-action="open-filter"],
.lod-section[data-sc-view="kontingente"] [data-toolbar-action="open-grouping"] {
  display: none;
}

/* Hero-Reihe: 3 große KPI-Karten. */
.sc-hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.sc-hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 16px 18px;
  overflow: hidden;
}
/* Feiner Ton-Akzent als Oberkante (Farbe trägt der Akzent + Bullet/Burn-up, NICHT
 * die Zahl). */
.sc-hero-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--sc-accent, var(--color-border));
}
.sc-hero-head { display: flex; align-items: center; gap: 8px; }
.sc-hero-ico { flex: 0 0 auto; }
.sc-hero-ico img { display: block; width: 18px; height: 18px; opacity: 0.7; }
.sc-hero-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-hero-proj {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-muted);
}
.sc-hero-proj-lbl { font-weight: 500; opacity: 0.75; }
.sc-hero-value { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.sc-hero-num {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.sc-hero-num--leer { color: var(--color-text-muted); }
.sc-hero-unit { font-size: 15px; font-weight: 600; color: var(--color-text-muted); }
.sc-hero-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.sc-hero-card .sc-bullet { max-width: none; margin-top: 2px; }
.sc-hero-trend { margin-top: auto; padding-top: 4px; }

/* Pünktlichkeits-Gauge (Trend-Ersatz der Rate-Karte): Ist-Fill + Ziel-Tick + Skala. */
.sc-gauge { display: flex; flex-direction: column; gap: 6px; }
.sc-gauge-track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill-sm);
  background: var(--color-bg-muted);
}
.sc-gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: 3px; border-radius: inherit; }
.sc-gauge-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--color-text); opacity: 0.5; border-radius: 1px; }
.sc-gauge-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Laufzeit-Mini-Bar (Kontingente-Hero „Laufzeit"): gestapelte Restlaufzeit-
 * Segmente (im Zeitplan / < 90 T / überfällig) in vollen Statusfarben. */
.sc-runway { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-bg-muted); }
.sc-runway-seg { height: 100%; min-width: 2px; }
.sc-runway .sc-tone-bg-success { background: var(--status-success-fg); }
.sc-runway .sc-tone-bg-warning { background: var(--status-warning-fg); }
.sc-runway .sc-tone-bg-danger  { background: var(--status-danger-fg); }

/* Burn-up (kumulierte Ist- vs. Soll-Pace-Kurve im Monat). non-scaling-stroke
 * hält die Linienstärke trotz preserveAspectRatio="none". */
.sc-burn { display: block; width: 100%; height: 46px; }
.sc-burn-area { fill: var(--sc-accent, var(--color-border)); opacity: 0.10; }
.sc-burn-soll { stroke: var(--color-text-muted); stroke-width: 1.25; stroke-dasharray: 3 3; opacity: 0.55; }
.sc-burn-ist { stroke: var(--sc-accent, var(--color-text)); stroke-width: 2; }
.sc-burn-dot { fill: var(--sc-accent, var(--color-text)); }
.sc-burn--success { --sc-accent: var(--status-success-fg); }
.sc-burn--warning { --sc-accent: var(--status-warning-fg); }
.sc-burn--danger  { --sc-accent: var(--status-danger-fg); }
.sc-burn--neutral { --sc-accent: var(--color-text-muted); }
.sc-burn--muted   { --sc-accent: var(--color-border-strong, var(--color-border)); }

/* Team-Verteilung: Status-Bar (= das Status-Filter-Control) + Konzentration. */
.sc-verteilung {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 14px 16px;
}
.sc-vert-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.sc-vert-titel {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sc-vert-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sc-vert-leg {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--font-size-xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.sc-vert-dot { width: 9px; height: 9px; border-radius: var(--radius-circular); flex: 0 0 auto; }
.app-scope .sc-vert-reset {
  margin-left: auto;
  font: inherit; font-size: var(--font-size-xs); font-weight: 600;
  color: var(--color-brand);
  background: none; border: none; cursor: pointer;
  padding: 2px 6px; border-radius: var(--radius-sm);
  /* Der Chip erscheint erst bei aktivem Filter. Sein Vertikal-Padding darf die
     Kopfzeile NICHT höher machen — sonst schiebt der Toggle die gesamte Matrix
     darunter um 4px auf und ab (das „Wackeln"). Die negativen Vertikal-Margins
     heben das Padding in der Flex-Höhenberechnung auf; die klickbare Hover-
     Fläche bleibt erhalten. */
  margin-top: -2px; margin-bottom: -2px;
}
.app-scope .sc-vert-reset:hover, .app-scope .sc-vert-reset:focus-visible { background: var(--color-bg-muted); outline: none; }
.sc-vert-bar {
  display: flex;
  height: 22px;
  gap: 2px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-muted);
}
/* Verteilungs-Segmente nutzen die VOLLEN Status-Farben (klare Ampel), nicht die
 * entsättigten Bullet-Fills — hier ist Farbe die Kernaussage. */
.sc-verteilung .sc-tone-bg-success { background: var(--status-success-fg); }
.sc-verteilung .sc-tone-bg-warning { background: var(--status-warning-fg); }
.sc-verteilung .sc-tone-bg-danger  { background: var(--status-danger-fg); }
.sc-verteilung .sc-tone-bg-muted   { background: var(--color-text-muted); }
.sc-vert-seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 3px;
  border: none;
  font-size: 11px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  transition: filter var(--duration-quick) var(--ease-default);
}
.app-scope button.sc-vert-seg { cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; color: #fff; padding: 0; }
.app-scope button.sc-vert-seg:hover { filter: brightness(0.93); }
.app-scope button.sc-vert-seg:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.sc-vert-seg.is-aktiv { box-shadow: inset 0 0 0 2px var(--color-text); }
.sc-vert-konz {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-light);
  font-size: var(--font-size-xs); color: var(--color-text-muted);
}
.sc-konz-fact { font-variant-numeric: tabular-nums; }
.sc-konz-fact b { color: var(--color-text); font-weight: 700; }

/* Health-Strip: kompakte Risiko-Zähler (sekundär). Zahl tongefärbt (Alarm),
 * Ton-Akzent an der linken Kante. auto-fit: leere Tracks kollabieren, die
 * belegten Zähler dehnen sich (robust bei 2 Kacheln wie bei 3). */
.sc-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.app-scope .sc-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-left: 3px solid var(--sc-accent, var(--color-border));
  border-radius: var(--radius-md);
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  font: inherit;
}
.app-scope .sc-strip-item:hover { box-shadow: var(--shadow-4); }
.app-scope .sc-strip-item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sc-strip-ico { flex: 0 0 auto; }
.sc-strip-ico img { display: block; width: 18px; height: 18px; opacity: 0.7; }
.sc-strip-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sc-strip-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-strip-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-strip-val { margin-left: auto; flex: 0 0 auto; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Matrix-Karte ─────────────────────────────────────────────────────── */

.sc-matrix-host {
  min-height: 120px;
}

.sc-matrix-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  /* Desktop/Notebook: kein eigener Scroll-Kontext → der Sticky-Header klebt am
     Section-Scroll. Quer-Scroll kommt erst im Tablet-Breakpoint dazu. */
  overflow: visible;
}

.sc-matrix {
  width: 100%;
  min-width: 860px; /* unter dieser Breite scrollt die Karte horizontal */
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.sc-matrix th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  /* Sticky-Header: dockt beim Scrollen BÜNDIG unter die Toolbar (Desktop/Notebook —
     dort ist die Karte overflow:visible; im Tablet-Quer-Scroll entfällt der Effekt).
     `.lod-section-scroll` hat 16px padding-top → mit top:0 klebte der Header 16px
     darunter und im Padding-Band blitzte gescrollter Inhalt durch (wirkte billig).
     top:-16px kompensiert das Padding → der Header sitzt flush an der Toolbar; die
     surface-Box-Shadow nach oben maskiert jeden Rest-Streifen (vom Scroll-Overflow
     ohnehin geklippt), die weiche Schatten-Kante nach unten trennt vom Inhalt. */
  position: sticky;
  top: -16px;
  background: var(--color-surface);
  z-index: 3;
  box-shadow: 0 -20px 0 0 var(--color-surface), 0 6px 8px -7px rgba(0, 0, 0, 0.22);
}

.sc-matrix td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

/* Sortierbare Spaltenköpfe (Klick-Zyklus: sortieren → Richtung → Default). */
.sc-matrix th[data-sc-sort] { cursor: pointer; user-select: none; outline: none; }
.sc-matrix th[data-sc-sort]:hover,
.sc-matrix th[data-sc-sort]:focus-visible { color: var(--color-text); }
.sc-matrix th.is-sortiert { color: var(--color-text); }
.sc-sort-ind { font-size: 9px; color: var(--color-brand); }

.sc-row:last-child td { border-bottom: none; }
/* Hintergrund-Schema (Fix „Hover geht nur auf grauen Zeilen"): die Token sind
 * kontraintuitiv benannt — bg-muted = #fafafa (fast weiß), bg-subtle = #e8e8e8
 * (sichtbares Grau). Daher: Zebra SUBTIL (#fafafa), Hover/Offen DEUTLICH
 * (#e8e8e8) — damit ist der Hover auf weißen UND Zebra-Zeilen sichtbar.
 * Konsequent auf td-Ebene (Sticky-Zellen erben sonst nicht). */
.sc-row--alt > td { background: var(--color-bg-muted); }
.sc-row--self > td { background: var(--color-bg-muted); }
/* Akzent zur Du-Markierung NUR an der ersten Zelle (pro-td-Schatten malte an
 * jeder Spaltenkante eine grüne Linie). */
.sc-row--self > td:first-child { box-shadow: inset 3px 0 0 var(--status-success-fg); }
.sc-row--self .sc-person-name { font-weight: 600; }
.sc-row--klickbar { cursor: pointer; outline: none; }
.sc-row--klickbar:hover > td,
.sc-row--klickbar:focus-visible > td,
.sc-row.is-offen > td { background: var(--color-bg-subtle); }
.sc-row--leer td { padding: 18px 14px; }

/* Namens-Zeile: Avatar/Name (UserChip-Trigger) + Du-Chip + Consent-Lock auf
 * EINER Flex-Linie — vorher standen Chip/Lock versetzt neben dem Person-Span. */
.sc-name-zeile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Gruppen-Kopfzeile (Gruppierung nach Bereich) mit Zwischensummen. */
.sc-group-row td {
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  padding: 7px 14px;
  font-size: var(--font-size-xs);
}
.sc-group-name { font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.03em; }
.sc-group-count {
  margin-left: 8px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0 6px;
}
.sc-group-sum { float: right; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Trenner „Ohne Zeiterfassung (N)" — klickbar auf/zu (Muster kt „Nicht geplant"). */
.sc-sep-row td {
  padding: 9px 14px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  cursor: pointer;
}
.sc-sep-row:hover td, .sc-sep-row:focus-visible td { background: var(--color-bg-muted); outline: none; }
.sc-sep-chev {
  display: inline-block;
  width: 0; height: 0;
  border-left: 5px solid var(--color-text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: 8px;
  transition: transform 0.15s ease;
}
.sc-sep-chev.is-offen { transform: rotate(90deg); }

/* Detail-Aufklapper unter der Zeile: festes Sektions-Grid — jede Sektion ist
 * eine einheitliche Mini-Karte (sc-exp-sec) mit Kopf + Body, gleiche Reihenfolge
 * in jeder Zeile (Kontingente → Vormonat → Überfällig → Verlauf). */
.sc-expand-row td {
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  /* Padding liegt INNEN am .sc-expand — der Anim-Wrapper muss auf 0 klemmen können. */
  padding: 0;
}
/* Weiches Auf-/Zugleiten (grid-template-rows 0fr↔1fr ist höhen-animierbar ohne
 * feste Pixelwerte): Enter automatisch beim Einfügen, Exit via Motion-SSOT
 * animateOut (.is-closing) — der Inhalt darunter gleitet statt zu springen.
 * prefers-reduced-motion ist global in base.css abgefangen. */
.sc-expand-anim {
  display: grid;
  grid-template-rows: 1fr;
  animation: sc-expand-in var(--duration-flow) var(--ease-enter-strong);
}
.sc-expand-anim.is-closing {
  animation: sc-expand-out var(--duration-balanced) var(--ease-exit) forwards;
}
@keyframes sc-expand-in {
  from { grid-template-rows: 0fr; opacity: 0.3; }
  to   { grid-template-rows: 1fr; opacity: 1; }
}
@keyframes sc-expand-out {
  from { grid-template-rows: 1fr; opacity: 1; }
  to   { grid-template-rows: 0fr; opacity: 0; }
}
.sc-expand-clip { overflow: hidden; min-height: 0; }
.sc-expand {
  display: grid;
  /* Spaltenzahl = tatsächliche Karten-Anzahl (JS setzt --sc-exp-cols). So füllen
   * die vorhandenen Karten die Breite gleichmäßig, statt bei fehlender Karte ein
   * leeres Spalten-Loch zu lassen (F4). auto-fit scheidet aus: der volle-Breite-
   * Akte-Button (grid-column 1/-1) besetzt jede Spalte → auto-fit kollabiert nie. */
  grid-template-columns: repeat(var(--sc-exp-cols, 4), minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  padding: 14px 16px;
  /* Layout-Isolierung: ohne sie fließt die max-content-Breite des Aufklappers
     in die Auto-Tabellenlayout-Berechnung ein — die Spalten „wackeln" dann bei
     jedem Auf-/Zuklappen, weil der Browser sie neu verteilt. */
  contain: inline-size;
}
.sc-exp-sec {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-width: 0;
}
.sc-exp-sec--breit { grid-column: 1 / -1; }
/* Breite Karte (Mitarbeiter-Planung): kompakte Spalten-Tracks statt einer
 * Zeile über die volle Kartenbreite — sonst kleben die Werte am rechten Rand. */
.sc-exp-sec--breit .sc-exp-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 440px));
  justify-content: start;
  column-gap: 40px;
}
.sc-exp-head {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.sc-exp-body { min-width: 0; }
.sc-exp-body svg { max-width: 100%; }
.sc-exp-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--font-size-sm);
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
}
.sc-exp-label { color: var(--color-text-muted); }
.sc-exp-leer { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Überfällig-Sektion: lange Vorgangslisten scrollen IN der Karte, statt den
 * ganzen Aufklapper (und die drei Nachbar-Karten) in die Höhe zu sprengen. */
.sc-exp-drill .sc-exp-body {
  max-height: 232px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Verlauf-Sektion: Kurve füllt die Kartenbreite (MiniSpark-viewBox skaliert),
 * sitzt vertikal zentriert und trägt Datums-Spanne + aktuellen Stand. */
.sc-exp-sec--verlauf { display: flex; flex-direction: column; }
.sc-exp-sec--verlauf .sc-exp-body { flex: 1 1 auto; display: flex; }
.sc-verlauf-gross {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.sc-verlauf-gross svg { width: 100%; height: 72px; display: block; }
.sc-verlauf-legende {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}
.sc-verlauf-aktuell b { color: var(--color-text); font-weight: 600; }
/* Akte-Aktion unter den Sektionen (volle Grid-Breite). Selektoren mit
 * .app-scope-Präfix: der globale Button-Reset (.app-scope button, Spezifität
 * 0,1,1) schlägt sonst die Klasse und entkernt Border/Padding. */
.sc-expand-actions { grid-column: 1 / -1; }
.app-scope .sc-akte-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-2);
}
.app-scope .sc-akte-btn:hover { background: var(--color-bg-subtle); }
.app-scope .sc-akte-btn .ui-ico img { display: block; }

/* Verlauf-Zelle (nur Sparkline — die Status-Punkte flogen nach Kyle-Feedback raus). */
.sc-verlauf-wrap { display: inline-flex; flex-direction: column; gap: 3px; }

/* ── Personen-Zelle ───────────────────────────────────────────────────── */

.sc-person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Der user-chip-Hover (globaler Brand-Hintergrund) braucht Luft um den Text —
 * Padding mit Negativ-Margin-Ausgleich, damit das Zeilen-Layout unverändert bleibt. */
.sc-person.user-chip {
  padding: 4px 10px 4px 4px;
  margin: -4px 0 -4px -4px;
  border-radius: var(--radius-md);
}

.sc-person-name {
  color: var(--color-text);
}

/* Avatar-Slot (avatar-cache tauscht Initialen async gegen das Graph-Foto). */
.sc-avatar {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Score-Donut (führender Verdikt der Zeile): Ring-Bogen = Score-Anteil, Ring-
 * Farbe = Status-Ampel, Zahl neutral (Farbdisziplin — Farbe lebt im Ring, nicht
 * in der Zahl). Ersetzt die frühere Status-Pille-Spalte. */
.sc-score {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  margin-right: 2px;
}
.sc-score svg { position: absolute; inset: 0; }
.sc-score-track { stroke: var(--color-bg-subtle); }
.sc-score-arc {
  stroke: var(--color-text-muted);
  transition: stroke-dasharray var(--duration-gentle, 0.4s) var(--ease-soft);
}
.sc-score--implan     .sc-score-arc { stroke: var(--status-success-fg); }
.sc-score--gefaehrdet .sc-score-arc { stroke: var(--status-warning-fg); }
.sc-score--problem    .sc-score-arc { stroke: var(--status-danger-fg); }
.sc-score--muted      .sc-score-arc { stroke: var(--color-border-strong, var(--color-border)); }
.sc-score-num {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sc-score--muted .sc-score-num { color: var(--color-text-muted); }


.sc-du-chip {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--status-success-fg);
  background: var(--status-success-bg);
  border: 1px solid var(--status-success-border);
  border-radius: var(--radius-pill);
  padding: 0 6px;
  line-height: 16px;
}

/* ── Ist/Soll-Zellen mit Mini-Balken ──────────────────────────────────── */

.sc-zelle {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
}

/* Wert-Zeile: Ist + „/ Soll h" nebeneinander auf EINER Zeile, Balken darunter. */
.sc-zelle-wert {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.sc-num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sc-num-ziel {
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

.sc-num-ohne-ziel { color: var(--color-text-muted); font-weight: 500; }
.sc-num-ziel-leer { font-size: var(--font-size-xs); margin-left: 6px; }

/* Bullet-Chart der Kennzahl-Zellen (Ist vs. Ziel/Pace): heller Track, getönter
 * Measure-Balken, dünner Ziel-Tick. Aussagekräftiger als der frühere 4px-Balken;
 * die Farbe (Ton) lebt hier, die Zahl bleibt neutral. */
.sc-bullet {
  position: relative;
  display: block;
  height: 7px;
  border-radius: var(--radius-pill-sm);
  background: var(--color-bg-muted);
  overflow: visible;
  max-width: 160px;
  margin-top: 6px;
}
.sc-bullet-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  min-width: 2px;
  transition: width var(--duration-gentle, 0.4s) var(--ease-soft);
}
.sc-bullet-mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--color-text);
  opacity: 0.5;
}
/* Übererfüllt: der Fill läuft „aus dem Kästchen" → rechte Kante gerade lassen. */
.sc-bullet.is-over .sc-bullet-fill { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Ton-Farben: Text + Balken (Werte aus den Status-Tokens, wie KpiTiles). */
.sc-tone-success { color: var(--status-success-fg); }
.sc-tone-neutral { color: var(--color-text); }
.sc-tone-warning { color: var(--status-warning-fg); }
.sc-tone-danger  { color: var(--status-danger-fg); }
.sc-tone-muted   { color: var(--color-text-muted); }

/* Balken-Töne bewusst LEISE für den Gutfall: „Im Plan"/neutral bekommen einen
 * ruhigen, entsättigten Fill — die tongefärbte ZAHL trägt das Per-KPI-Urteil,
 * die Status-Pille das Gesamturteil. Nur Warnung/Problem bleiben farbig, damit
 * das Auge bei 18 Zeilen auf die echten Problemfälle springt statt auf einen
 * Wald aus grünen Strichen. */
.sc-tone-bg-success { background: color-mix(in srgb, var(--status-success-border) 45%, var(--color-bg-subtle)); }
.sc-tone-bg-neutral { background: var(--color-border-strong, var(--color-border)); }
.sc-tone-bg-warning { background: var(--status-warning-border); }
.sc-tone-bg-danger  { background: var(--status-danger-border); }
.sc-tone-bg-muted   { background: var(--color-border); }

.sc-rate {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Überfällig-Zähler (Button = Drilldown im Aufklapper; --static = reine
   Anzeige ohne Drill-Recht bzw. Team-Zeile, als <span> gerendert) ─────── */

.app-scope .sc-ovd {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin-right: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font: inherit; /* Button-Element erbt die Tabellen-Typo nicht von selbst */
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.app-scope .sc-ovd:hover,
.app-scope .sc-ovd:focus-visible {
  background: color-mix(in srgb, var(--brand-default) 8%, transparent);
  outline: none;
}

.app-scope .sc-ovd small {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.app-scope .sc-ovd--danger { color: var(--status-danger-fg); font-weight: 600; }

.app-scope .sc-ovd--static { cursor: default; }
.app-scope .sc-ovd--static:hover { background: transparent; }

/* ── Verlauf-Sparkline (MiniSpark, Tages-Snapshots des Monats) ────────── */

.sc-spark {
  display: inline-flex;
  align-items: center;
}

.sc-spark--leer { color: var(--color-text-muted); }

/* Rang-Chips (Firmen-Ranking, Top 3 fakturierbares Ist). */
.sc-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: var(--radius-circular);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
}
.sc-rank--1 { background: #b8860b; }
.sc-rank--2 { background: #8c8c8c; }
.sc-rank--3 { background: #a05a2c; }

/* Team-Gesamt-Zeile (Scope-Summen, nicht klickbar). */
.sc-team-row td {
  background: var(--color-bg-subtle);
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
}
.sc-team-row .sc-person-name { font-weight: 700; }
.sc-team-row .sc-group-count { margin-left: 8px; font-weight: 400; }
.sc-team-ico { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; }

/* Info-Popover (Legende) — Toolbar-Button + Karte (.app-scope-Präfix wegen
 * Button-Reset, siehe Akte-Button). */
.app-scope .sc-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}
.app-scope .sc-info-btn:hover { background: var(--color-bg-muted); }
/* Die Legende selbst rendert das KpiLegend-SSOT (domain/dashboard/kpi-legend.css). */

/* ── Kontingent-Tabelle (Kontingente-Modus, Kontingent-Rollen) ─────────── */

.sc-kont-host:empty { display: none; }
/* Spalten: Kontingent · Fakturierbar (Fakt/Soll + Bullet) · Erfüllung · Verlauf · Fällig. */
.sc-kont-tabelle { min-width: 720px; }

/* Fällig-Badge mit Risiko-Ton (überfällig / < 90 Tage / neutral). */
.sc-fael { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Trenner zwischen mehreren Fällig-Chips (Kontingent-Team-Zeile). */
.sc-fael-sep { color: var(--color-text-muted); opacity: 0.6; }
.sc-fael-suffix {
  margin-left: 6px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Kontingent-/MA-Mini-Karte (geteilt: MA-Aufklapper „Kontingente" + Kontingent-
 * Tabelle „Mitarbeiter-Planung") — Name + Erfüllungs-% oben, Soll→Fakt darunter,
 * Bullet über volle Breite. Löst das frühere Einzeiler-Umbrechen langer Namen. */
.sc-kz { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; min-width: 0; }
.sc-exp-body > .sc-kz:not(:last-child) { border-bottom: 1px solid var(--color-border-light); }
.sc-kz-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sc-kz-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sc-kz-pct { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-kz-werte {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.sc-kz-arrow { opacity: 0.55; }
.sc-kz .sc-bullet { max-width: none; margin-top: 2px; }

/* Kontingent-/MA-Wertezeile im Aufklapper: Soll → Fakturierbar · % */
.sc-exp-kont-werte {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Kontingent-Name als Drawer-Link (Zeilen-Klick bleibt Auf-/Zuklappen) —
 * Hover-Fläche mit Luft, gleiche Affordanz wie der user-chip. */
.app-scope .sc-kont-link {
  border: none;
  background: none;
  padding: 4px 10px;
  margin: -4px 0 -4px -10px;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}
.app-scope .sc-kont-link:hover,
.app-scope .sc-kont-link:focus-visible {
  background: color-mix(in srgb, var(--brand-default) 8%, transparent);
  outline: none;
}

/* Vormonats-Vergleich im Aufklapper (Δ = Erfüllungsgrad in Prozentpunkten). */
.sc-vm-delta {
  font-weight: 600;
  font-size: var(--font-size-xs);
  white-space: nowrap;
}
/* KPI-Vergleichsblöcke: Label + Δ oben, Bullet (jetzt vs. Vormonats-Tick),
 * Legende „Vormonat … · jetzt …" — füllt die Karte statt drei magerer Zeilen. */
.sc-exp-vm .sc-exp-body { display: flex; flex-direction: column; gap: 13px; }
.sc-vm-kpi { display: flex; flex-direction: column; gap: 5px; }
.sc-vm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sc-vm-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.sc-vm-kpi .sc-bullet { max-width: none; margin: 1px 0; }
.sc-vm-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.sc-vm-legend b { color: var(--color-text); font-weight: 700; }

/* Überfällig-Drilldown: klickbare Vorgangsliste (Aufgaben/Anfragen) —
 * Hover als Fläche mit Innenabstand statt nackter Unterstreichung. */
.sc-drill-grp-titel {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--status-danger-fg);
  margin: 8px 0 4px 0;
}
.sc-drill-grp-titel:first-child { margin-top: 0; }
.app-scope .sc-drill-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: calc(100% + 16px);
  border: none;
  background: none;
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}
.app-scope .sc-drill-item:hover,
.app-scope .sc-drill-item:focus-visible {
  background: color-mix(in srgb, var(--brand-default) 8%, transparent);
  outline: none;
}
/* Titel und Meta teilen sich die Zeile: Titel behält mindestens ~45 % Breite,
 * lange Metas (Fälligkeit · Projekt) ellipsieren statt den Titel zu verdrängen. */
.sc-drill-titel {
  flex: 1 1 auto;
  min-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-drill-meta {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

/* ── Fußnoten ─────────────────────────────────────────────────────────── */

.sc-consent-hint {
  margin: 12px 2px 0 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sc-hint {
  margin: 12px 2px 0 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

/* Desktop ≥1400px & Notebook: Hero-Reihe + Health-Strip je 3-spaltig
 * (Grundlayout aus dem Basis-Block, keine Overrides nötig). */

/* Notebook 1000–1399px: Matrix-Mindestbreite bleibt (Karte scrollt ab Tablet). */
@media (max-width: 1399px) {
  .sc-matrix { min-width: 860px; }
  /* .sc-expand regelt die Spaltenzahl selbst (F4). */
}

/* Tablet 600–999px: Hero/Strip bleiben 3-spaltig (kompaktere Zahl); Matrix scrollt
 * horizontal in der Karte — die Namensspalte klebt links (Zebra-/Self-Hintergründe). */
@media (max-width: 999px) {
  .sc-hero-card { padding: 14px 14px; }
  .sc-hero-num { font-size: 26px; }
  .sc-stand { display: none; } /* Stand-Info nur auf breiten Screens in der Toolbar */
  .app-scope .sc-info-btn { width: 36px; height: 36px; } /* Touch-Target ≥36px auf Tablet */
  .sc-matrix-card { overflow-x: auto; }
  .sc-matrix { min-width: 780px; }
  /* Aufklapper hier nur ~780px breit → höchstens 2 Karten je Reihe (F4). */
  .sc-expand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-matrix th, .sc-matrix td { padding: 8px 10px; }
  .sc-matrix th.sc-cell-name,
  .sc-matrix td.sc-cell-name {
    position: sticky;
    left: 0;
    background: var(--color-surface);
    z-index: 2;
  }
  /* Sticky-Zellen folgen dem Hintergrund-Schema (Zebra subtil, Hover deutlich). */
  .sc-row--alt td.sc-cell-name,
  .sc-row--self td.sc-cell-name { background: var(--color-bg-muted); }
  .sc-row--klickbar:hover td.sc-cell-name,
  .sc-row.is-offen td.sc-cell-name,
  .sc-team-row td.sc-cell-name { background: var(--color-bg-subtle); }
}

/* Mobile <600px: Kacheln 1-spaltig; die Matrix wird zum Karten-Layout —
 * thead verschwindet, jede Zeile ist eine Karte, Zellen tragen ihre Spalten-
 * Beschriftung aus data-mob-label (kein Quer-Scroll mehr). */
@media (max-width: 599px) {
  /* Hero-Karten + Health-Strip stapeln (1-spaltig); die Verteilungs-Bar bleibt
   * volle Breite. Kompakte Kopfzone vor der Detail-Matrix. */
  .sc-hero, .sc-strip { grid-template-columns: minmax(0, 1fr); }

  .sc-matrix { min-width: 0; }
  .sc-matrix thead { display: none; }
  .sc-matrix, .sc-matrix tbody, .sc-matrix tr, .sc-matrix td { display: block; }
  .sc-matrix td { border-bottom: none; padding: 3px 14px; }
  .sc-row, .sc-team-row { padding: 10px 0; border-bottom: 1px solid var(--color-border-light); }
  /* Die „Fällig"-Zelle der Kontingent-Tabelle fließt als normale beschriftete
   * Karten-Zeile (data-mob-label, wie Soll/Fakturierbar/Erfüllung). Es gibt keine
   * absolut positionierte Status-Pille mehr — die MA-Matrix trägt den Verdikt im
   * Score-Donut, kein Platzhalter-Padding nötig. */
  /* Beschriftete Wert-Zeilen (Label links, Wert rechts) */
  .sc-matrix td[data-mob-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .sc-matrix td[data-mob-label]::before {
    content: attr(data-mob-label);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    flex: 0 0 auto;
  }
  .sc-zelle { min-width: 0; align-items: flex-end; }
  .sc-zelle-wert { justify-content: flex-end; }
  .sc-bullet { width: 110px; max-width: 110px; align-self: flex-end; }
  .sc-verlauf-wrap { align-items: flex-end; }
  /* Aufklapper: Sektions-Karten untereinander */
  .sc-expand { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sc-expand-actions { margin-left: 0; }
  .sc-group-sum { float: none; display: block; margin-top: 2px; }
}