/* kpi-tiles.css — KPI-Tiles (global, kpi-tiles.js). */

/* ═══════════════════════════════════════════════════════════════════════════
   KPI-Tiles (global, wiederverwendbar) — kpi-tiles.js
   ═══════════════════════════════════════════════════════════════════════════ */
.kpi-tiles-grid {
  display: grid;
  grid-template-columns: repeat(var(--kpi-columns, 4), minmax(0, 1fr));
  gap: var(--space-2-5);
  width: 100%;
}
.kpi-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* WERTE AUF EINER GRUNDLINIE (Kyle 26.07.: „KPI-Werte stehen überall
     unterschiedlich, nicht bündig auf einer Reihe"). Vorher `space-between`:
     der Wert wurde je nach vorhandener Sub-Zeile im Kachelinneren verteilt —
     eine Kachel OHNE Sub schob ihn an den Unterrand, eine MIT Sub nach oben.
     Bei vier Kacheln nebeneinander standen die Werte damit auf drei Höhen.
     `flex-start` + fixe Kopfzeile heißt: der Wert beginnt IMMER an derselben
     Stelle, egal was darunter folgt. Balken/Sparkline bleiben trotzdem am
     Unterrand (margin-top:auto weiter unten) — sonst klebten sie am Wert.
     Dieselbe Korrektur trug die Hero-Variante (--lg) schon; die Standard-
     Variante ist die, die 15 Drawer/Sections benutzen. */
  justify-content: flex-start;
  padding: var(--space-3) var(--space-3) var(--space-2-5);
  border: var(--surface-border);
  border-radius: var(--surface-radius);
  background: var(--surface-bg);
  min-height: 78px;
  box-sizing: border-box;
  gap: var(--space-1-5);
}
/* KONT-D6 Icon + Label im Header-Flow nebeneinander, Wert darunter
 linksbuendig zentriert — Icon-Wert-Ueberlappung (1.9 Tage) ist behoben.
 Fixe Höhe: hält den Wert auch dann auf der Reihe, wenn ein Label umbricht
 oder eine Kachel gar kein Icon mitbringt. */
.kpi-tile-head {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-height: 18px;
  flex: 0 0 auto;
}
.kpi-tile-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  /* 0.6 ließ die feineren Fluent-Umrisse (checkmark_circle, gauge) auf weißer
     Fläche fast verschwinden — 0.8 hält sie dezent, aber sichtbar. */
  opacity: 0.8;
}
.kpi-tile-value {
  font-family: var(--lod-font-display, inherit);
  font-size: var(--kpi-value-md);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--lod-darkblue-700);
  /* Ziffern gleich breit → kein Breiten-Zittern beim Stichtag-/Daten-Wechsel. */
  font-variant-numeric: tabular-nums;
}
/* Langer TEXTwert (Name, Versicherer, Antriebsart) — gesetzt von kpi-tiles.js, wenn der
   Wert Buchstaben traegt und laenger als 12 Zeichen ist. 22px bold ist die Stufe fuer
   eine ZAHL; ein Firmenname bricht darin bei ~130px Kachelbreite dreizeilig um und zieht
   die ganze Reihe hoeher (im Fahrzeug-Drawer gemessen). Deckel bei ZWEI Zeilen mit
   Ellipse: eine dritte Zeile ist keine Kennzahl mehr, und der vollstaendige Wert steht
   ohnehin in den Stammdaten. `title` traegt der Consumer bei Bedarf. */
.kpi-tile-value--text {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Zahl + kleine Einheit-Beistellung (z.B. "9" + "Tage"). Die Zahl erbt Groesse + Tone
   vom .kpi-tile-value, die Einheit bleibt dezent grau. inline-flex (nowrap) haelt Zahl +
   Einheit auf EINER Zeile — vorher brach "−169,07 Tage" am Leerzeichen um und zog die
   Kachel hoeher als die Nachbarn. Bewusst NUR hier (nicht global auf .kpi-tile-value),
   damit reine String-Werte anderer Konsumenten weiter normal umbrechen duerfen. */
.kpi-tile-nv { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.kpi-tile-unit {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--lod-gray-500);
}
.kpi-tile-label {
  font-size: var(--font-size-sm);
  color: var(--lod-gray-600);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
/* Optionale Sekundaerzeile unter dem Wert (z.B. "Ziel 40 h"). Dezent, kleiner. */
/* Ladezustand: echte Kachel mit Platzhalter-Zeilen (`KpiTiles.skeleton`). Sie bringt ihre
   Maße aus derselben Regel mit wie eine gefüllte Kachel — nur unbedienbar. */
.kpi-tile--skeleton { pointer-events: none; }
.kpi-tile-sub {
  font-size: var(--font-size-xs);
  color: var(--lod-gray-500);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tone-Varianten — beeinflussen die Value-Farbe, nicht den Rahmen (dezenter Stil).
   success: turquoise-900 statt turquoise (das helle #70B1B6 ergab nur ~2,4:1 auf Weiss,
   unter WCAG-AA, und liess "Ziel erreicht" blasser wirken als "verfehlt"). turquoise-900
   ist auch in toolbar.css/card.css der Erfolgs-Textton — diese Kachel war der Ausreisser. */
.kpi-tile[data-kpi-tone="success"] .kpi-tile-value { color: var(--lod-turquoise-900); }
.kpi-tile[data-kpi-tone="warning"] .kpi-tile-value { color: var(--lod-amber-600); }
.kpi-tile[data-kpi-tone="danger"]  .kpi-tile-value { color: var(--lod-danger); }
.kpi-tile[data-kpi-tone="muted"]   .kpi-tile-value { color: var(--lod-gray-500); }

/* Optionaler Wert-Chip (z.B. Ziel-Ueberschreitung "117 %") rechts neben dem Wert. */
.kpi-tile-value.has-badge { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
.kpi-tile-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  padding: 1px 6px;
  border-radius: var(--radius-circular);
  background: var(--lod-gray-100);
  color: var(--lod-gray-600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kpi-tile[data-kpi-tone="success"] .kpi-tile-badge {
  background: var(--lod-turquoise-100);
  color: var(--lod-turquoise-900);
}

/* Optionaler Delta-/Trend-Chip — rechtsbuendig im Wert. Pfeil = CSS-Dreieck (kein
   Unicode-Glyph, kein Asset). RICHTUNG kommt aus --up/--down/--flat, die FARBE aus dem
   Tile-Tone (siehe unten) — so faerben Wert und Pfeil nie widerspruechlich. */
.kpi-tile-trend {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--lod-gray-600);
}
.kpi-tile[data-kpi-tone="success"] .kpi-tile-trend { color: var(--lod-turquoise-900); }
.kpi-tile[data-kpi-tone="warning"] .kpi-tile-trend { color: var(--lod-amber-600); }
.kpi-tile[data-kpi-tone="danger"]  .kpi-tile-trend { color: var(--lod-danger); }
.kpi-tile[data-kpi-tone="muted"]   .kpi-tile-trend { color: var(--lod-gray-500); }
.kpi-tile-trend-arrow { display: inline-block; width: 0; height: 0; }
.kpi-tile-trend--up .kpi-tile-trend-arrow {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 4px solid currentColor;
}
.kpi-tile-trend--down .kpi-tile-trend-arrow {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
}
.kpi-tile-trend--flat .kpi-tile-trend-arrow {
  width: 6px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

/* Optionaler Fortschrittsbalken (Ist/Ziel) — duenn, getont via Tone.
   margin-top:auto haelt ihn am Unterrand, seit die Kachel `flex-start` statt
   `space-between` ausrichtet (Werte-Grundlinie). Ohne das kleben Balken und
   Sparkline direkt unter dem Wert und die Kachel wirkt oben schwer. */
.kpi-tile-bar {
  position: relative;
  /* Kein padding-top: die Kachel ist border-box und der Balken nur --space-1 hoch —
     Innenabstand würde ihn plattdrücken. Der Abstand kommt aus dem Flex-`gap`. */
  margin-top: auto;
  height: var(--space-1);
  border-radius: var(--radius-circular);
  background: var(--lod-gray-100);
  overflow: hidden;
}
/* Optionale Markierung auf dem Balken (z.B. "Soll bis heute" beim Monatsende-Stichtag). */
.kpi-tile-bar.has-mark { overflow: visible; }
.kpi-tile-bar-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--lod-darkblue-700);
}
.kpi-tile-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-circular);
  background: var(--lod-darkblue-700);
  transition: width var(--duration-slower) var(--ease-soft);
}
.kpi-tile[data-kpi-tone="success"] .kpi-tile-bar-fill { background: var(--lod-turquoise); }
.kpi-tile[data-kpi-tone="warning"] .kpi-tile-bar-fill { background: var(--lod-amber-600); }
.kpi-tile[data-kpi-tone="danger"]  .kpi-tile-bar-fill { background: var(--lod-danger); }
.kpi-tile[data-kpi-tone="muted"]   .kpi-tile-bar-fill { background: var(--lod-gray-400); }

/* Responsive: auf schmaleren Drawern 2 Spalten. Container-Query am Drawer. */
@container drawer (max-width: 640px) {
  .kpi-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container drawer (max-width: 360px) {
  .kpi-tiles-grid { grid-template-columns: 1fr; }
}

/* Optionale Mini-Sparkline (tile.spark) unter dem Fortschrittsbalken —
   MiniSpark-SVG hat feste Attribut-Maße + preserveAspectRatio:none und
   streckt sich hier auf die Kachelbreite. */
/* Ohne Balken übernimmt die Sparkline die Unterrand-Bindung; MIT Balken sitzt sie
   direkt darunter (nur EIN Element darf den Restplatz schlucken — zwei auto-Margins
   würden ihn zwischen Balken und Kurve aufteilen und eine Lücke reißen). */
.kpi-tile-spark { margin-top: auto; }
.kpi-tile-bar + .kpi-tile-spark { margin-top: 6px; }
.kpi-tile-spark svg { display: block; width: 100%; height: 20px; }

/* ── Hero-Variante (size:'lg') — Cockpit-Vollflaechen (z.B. Lizenz-Cockpit) ──
   Groessere Werte, Label in Kapitaelchen-Optik, Icon als getoenter Chip,
   Ton-Kacheln mit zarter Tint-Flaeche + Akzentkante links. Drawer und andere
   kompakte Flaechen bleiben beim Default unberuehrt (opt-in). */
.kpi-tiles-grid--lg .kpi-tile {
  padding: var(--space-3-5, 14px) var(--space-4, 16px);
  min-height: 104px;
  gap: 0;
  position: relative;
  overflow: hidden;
  /* Werte auf EINER Grundlinie ausrichten: fixe Label-Zeile oben, Wert direkt
     darunter an IMMER gleicher Position (Sub fliesst in den Rest darunter) —
     statt space-between, das den Wert je nach Sub verschob (Kyle: "Werte in
     unterschiedlichen Zeilen"). */
  justify-content: flex-start;
}
.kpi-tiles-grid--lg .kpi-tile-head { min-height: 30px; align-items: flex-start; }
.kpi-tiles-grid--lg .kpi-tile-value { margin-top: var(--space-1); }
.kpi-tiles-grid--lg .kpi-tile-sub { margin-top: 3px; }
.kpi-tiles-grid--lg .kpi-tile::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--lod-gray-200, #d9dde3);
}
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="success"]::before { background: var(--lod-turquoise); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="warning"]::before { background: var(--lod-amber-600, #9a6700); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="danger"]::before  { background: var(--lod-danger, #b3261e); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="success"] { background: color-mix(in srgb, var(--lod-turquoise) 4%, var(--surface-bg, #fff)); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="warning"] { background: color-mix(in srgb, var(--lod-amber-600, #9a6700) 4%, var(--surface-bg, #fff)); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="danger"]  { background: color-mix(in srgb, var(--lod-danger, #b3261e) 4%, var(--surface-bg, #fff)); }
.kpi-tiles-grid--lg .kpi-tile-head { gap: var(--space-2); }
.kpi-tiles-grid--lg .kpi-tile-icon {
  width: 26px; height: 26px;
  padding: 5px;
  border-radius: var(--radius-md, 6px);
  background: color-mix(in srgb, var(--lod-darkblue, #0f6cbd) 8%, transparent);
  box-sizing: border-box;
}
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="success"] .kpi-tile-icon { background: color-mix(in srgb, var(--lod-turquoise) 14%, transparent); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="warning"] .kpi-tile-icon { background: color-mix(in srgb, var(--lod-amber-600, #9a6700) 14%, transparent); }
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="danger"]  .kpi-tile-icon { background: color-mix(in srgb, var(--lod-danger, #b3261e) 14%, transparent); }
.kpi-tiles-grid--lg .kpi-tile-label {
  font-size: 11px;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.kpi-tiles-grid--lg .kpi-tile-value {
  font-size: 26px;
  font-weight: var(--fw-bold, 700);
  font-variant-numeric: tabular-nums;
  color: var(--lod-darkblue-900, #0a3d66);
  line-height: 1.15;
}
.kpi-tiles-grid--lg .kpi-tile[data-kpi-tone="danger"] .kpi-tile-value { color: var(--lod-danger, #b3261e); }
.kpi-tiles-grid--lg .kpi-tile-sub { font-size: var(--font-size-xs); }
@media (max-width: 1399px) {
  .kpi-tiles-grid--lg .kpi-tile-value { font-size: 22px; }
  .kpi-tiles-grid--lg .kpi-tile { min-height: 92px; }
}
/* ── Spalten-Leiter der Hero-Variante ───────────────────────────────────────
   ★★ DIE SPALTENZAHL MUSS DER KACHEL IHRE MINDESTBREITE LASSEN. Wird sie zu schmal,
   ist die einzige Reaktion der Deckel der Beschriftung (`.kpi-tile-label` ist `nowrap`
   + Ellipse) — und der ist STUMM: die Kachel rendert, die Zahl stimmt, nur der Name
   dazu heisst „NICHT FAKTURIER…". Nichts wirft, kein Test wird rot; gemeldet hat es
   ein Mensch (Kyle 2026-08-01, „nicht alles der Auswertungen ist richtig gut responsiv").
   Im Browser gemessen an der Auswertung (sechs Kacheln, `columns: 6`):
     · 1000px Fenster → 145px je Kachel, ALLE SECHS Beschriftungen abgeschnitten
     ·  600px Fenster → 167px je Kachel, drei abgeschnitten UND der Wert zweizeilig
       („302,50" / „h" — `--lg` setzt 20–26px fett, das braucht ~120px)
     ·  760px Fenster → 220px je Kachel, nichts abgeschnitten, Wert einzeilig
   Der Bedarf ist damit gemessen ~200px: Icon-Chip 26 + Luecke 8 + laengste
   Beschriftung 124 + Polsterung 32.

   ★ DIE LEITER HAENGT AN DER DEKLARIERTEN SPALTENZAHL (`data-kpi-columns`, vom Modul
   gesetzt) und nicht an einer festen Zahl. Vier Kacheln vertragen auf einem Notebook
   noch ihre vier Spalten (~330px), sechs nicht — eine gemeinsame Stufe waere fuer die
   einen zu frueh und fuer die anderen zu spaet. Alle Regeln tragen deshalb das Attribut,
   damit die spaeteren Stufen die frueheren wirklich schlagen: ohne es haette
   `[data-kpi-columns="6"]` (0,2,0) gegen `.kpi-tiles-grid--lg` (0,1,0) auch DANN
   gewonnen, wenn es weiter oben steht. */
@media (max-width: 1399px) {
  /* Fuenf oder sechs Hero-Kacheln nebeneinander unterschreiten hier die Label-Breite. */
  .kpi-tiles-grid--lg[data-kpi-columns="5"],
  .kpi-tiles-grid--lg[data-kpi-columns="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .kpi-tiles-grid--lg[data-kpi-columns] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ★★ EINE FUENFTE STUFE, UND SIE IST GEMESSEN STATT GEWAEHLT. Das Tablet-Band 600–999px
   ist für diese Frage zu breit: bei 999px tragen drei Spalten 300px (richtig), bei 620px
   nur 176px (Beschriftung abgeschnitten, Wert zweizeilig) — eine der beiden Antworten ist
   im ganzen Band falsch. Die Grenze folgt aus dem Bedarf: 3 × 200px + 2 × 10px Lücke =
   620px Inhalt, plus Nav-Schiene (56) und Kerbe (2 × 12) sind das ~700px Fenster; 719
   lässt eine Handbreit Luft.
   Die Repo-Regel „vier Breakpoints, nie andere" ist damit bewusst gebrochen — mit demselben
   Grund wie beim `1199px`-Stapelpunkt in mt-zeitauswertung.css: wo BEIDE Seiten eine harte
   Untergrenze haben, liegt der Umbruch dort, wo sie unterschritten wird, und nicht auf der
   nächsten runden Zahl.
   Zwei Spalten sind bei sechs Kacheln die einzige weitere Teilung, die OHNE angerissene
   Reihe aufgeht (3 × 2) — genau die Form, die Kyle verlangt hat. */
@media (max-width: 719px) {
  .kpi-tiles-grid--lg[data-kpi-columns="5"],
  .kpi-tiles-grid--lg[data-kpi-columns="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .kpi-tiles-grid--lg[data-kpi-columns] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-tiles-grid--lg .kpi-tile { min-height: 84px; }
  .kpi-tiles-grid--lg .kpi-tile-value { font-size: 20px; }
  /* ★★ AUF DEM TELEFON BRICHT DIE BESCHRIFTUNG UM, STATT ABGESCHNITTEN ZU WERDEN. Zwei
     Spalten sind hier das Ende der Leiter — darunter gibt es nichts mehr zu teilen, und
     die Kachel ist auf einem 390px-Gerät 182px breit: nach Icon-Chip (26), Lücke (8) und
     Polsterung (32) bleiben 116px für ein Wort wie „Nicht fakturierbar" (124px, im
     Browser gemessen 2026-08-01). Die Ellipse macht daraus „Nicht fakturierb…", also eine
     Zahl mit halbem Namen — und das ist auf der kleinsten Fläche der teuerste Verlust.
     ★ Der Wert bleibt trotzdem auf EINER Grundlinie (die Zusicherung der ganzen Variante):
     die Kopfzeile ist mit `min-height: 30px` bereits höher als zwei Label-Zeilen
     (11px × 1,2 × 2 = 26,4px) UND als der Icon-Chip (26px) — sie wächst also nicht mit.
     Deckel bei zwei Zeilen: eine dritte wäre kein Kachel-Label mehr. */
  .kpi-tiles-grid--lg .kpi-tile-label {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* Drill-Kacheln (drill:true + onTileClick): klickbare Kennzahl mit
   Hover-Lift + sichtbarem Fokus — signalisiert "hier geht's zur Auswahl". */
.kpi-tile--drill {
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.kpi-tile--drill:hover {
  border-color: var(--lod-turquoise);
  box-shadow: var(--shadow-2, 0 2px 8px rgba(0, 0, 0, 0.08));
  transform: translateY(-1px);
}
.kpi-tile--drill:focus-visible {
  outline: 2px solid var(--lod-turquoise);
  outline-offset: 1px;
}