/* 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;
  justify-content: space-between;
  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. */
.kpi-tile-head {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-height: 16px;
}
.kpi-tile-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.6;
}
.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;
}
/* 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. */
.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. */
.kpi-tile-bar {
  position: relative;
  margin-top: var(--space-2);
  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. */
.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; }
}
@media (max-width: 999px) {
  .kpi-tiles-grid--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .kpi-tiles-grid--lg { 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; }
}

/* 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;
}