/* ============================================================
   idf-stat-card - KPI-Kachel-Strip (Shared-Block, H2/#198)
   ============================================================
   Basis: safeguard/safeguard.css (dort byte-identisch mit
   safeguard-ds.css, Prefix-normalisiert), OHNE die Token-Fallbacks
   der netzwerk-Kopie: alle genutzten Tokens sind in idf-tokens.css
   definiert, die Fallbacks griffen nie (und waren teils falsch,
   z. B. radius-lg 10px statt 8px) - Wegfall ist visuell 1:1.

   Netzwerk-Zusaetze sind als dokumentierte Erweiterungen enthalten,
   wo sie fuer sg/sgds neutral sind (Link-Variante, Label-Icon).
   Modul-Hoheit bleibt (siehe README): nur noch grid-template-columns
   bzw. Breakpoint-Abweichung (netzwerk 900px via .nw-kpis). Das
   fruehere netzwerk-Farbset is-ok/is-warn/is-err wurde bei der
   Umstellung bewusst auf das Shared-Trio is-confirm/is-warn/is-danger
   auf dem Value-Span gemappt (sichtbare Token-Abweichung dokumentiert
   in netzwerk/CHANGELOG.md v0.2.3).

   Klassen:
     .idf-stats-head       Kopf-Wrapper: Strip + Button in einer Reihe
     .idf-stats-head-btn   Aktions-Button rechts neben dem Strip
     .idf-stats            Grid-Wrapper (4 Spalten, <=800px: 2)
     .idf-stat             Kachel (div oder a)
     .idf-stat-value       Zahl (+ .is-confirm/.is-warn/.is-danger)
     .idf-stat-label       Beschreibung (Ellipsis-Truncate, opt. Icon)
*/

/* Kopf-Wrapper: KPI-Strip + Aktions-Button in einer Reihe. Stats
   nehmen die Breite, der Button sitzt rechts daneben mittig zur
   flachen Pillen-Hoehe - spart vertikalen Platz gegenueber einer
   separaten Action-Zeile. (Aus .sg-dashboard-head, 2x wortgleich
   in sg/sgds.) */
.idf-stats-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.idf-stats-head .idf-stats {
  flex: 1 1 auto;
  min-width: 0;
}

.idf-stats-head-btn {
  flex-shrink: 0;
}

@media (max-width: 800px) {
  /* Bei schmalen Viewports stackt der Button unter die Stats. */
  .idf-stats-head {
    flex-direction: column;
    align-items: stretch;
  }
  .idf-stats-head-btn {
    align-self: flex-end;
  }
}

.idf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

@media (max-width: 800px) {
  .idf-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Inline-Pille: Zahl + Beschreibung nebeneinander (Markup-Order:
   value, label) - eine Schriftzeile hoch statt eines 2-Zeilen-Stacks.
   text-decoration/color: Kacheln duerfen auch <a href> sein
   (netzwerk-Variante); fuer <div>-Kacheln wirkungslos, daher fuer
   sg/sgds visuell neutral. */
.idf-stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Link-Variante: klickbare Kachel hebt sich beim Hover ab (netzwerk). */
a.idf-stat:hover { background: var(--bg-hover); }

/* color: var(--ink) explizit (sg-Fassung); die netzwerk-Kopie erbte
   nur - Seitentext ist ink, gerendert identisch. */
.idf-stat-value {
  font-size: var(--font-xl);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.idf-stat-label {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--mid);
  letter-spacing: 0;
  line-height: var(--leading-tight);
  flex: 1 1 auto;
  min-width: 0;
  /* Truncate, falls die Beschreibung zu lang fuer die Pille wird -
     der title-Tooltip rettet den Volltext. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optionales FA-Icon im Label (netzwerk; Ist-Wert 4px = --space-1).
   Fuer sg/sgds neutral - deren Labels enthalten keine Icons. */
.idf-stat-label i {
  color: var(--mid);
  margin-right: var(--space-1);
}

/* Status-Farben auf dem Value-Span (sg/sgds-Trio als Shared-Default).
   Dokumentierte Status-Zuordnung: is-confirm = erledigt/freigegeben
   (--confirm), is-warn = faellig (--yellow-text, Kontrast auf Weiss),
   is-danger = ueberfaellig (--primary). */
.idf-stat-value.is-confirm { color: var(--confirm); }
.idf-stat-value.is-warn    { color: var(--yellow-text); }
.idf-stat-value.is-danger  { color: var(--primary); }