/* ============================================================================
 * statline.css — tc-statline
 * ----------------------------------------------------------------------------
 * SCHICHT 1 (kleiner geteilter Organismus). Eine horizontale Reihe von
 * Label/Wert-Paaren ("Kennzahlen-Leiste"). Abstrahiert aus drei realen
 * Eigenbau-Mustern, die exakt dasselbe taten:
 *   - BB Team-Karte:  TV / Schatzkammer / Kader / Bilanz  (bb-hub-mt-stats)
 *   - BB Teamview:    TV / CTV / Spieler / Rerolls / Bilanz (bb-budget-bar)
 *   - diverse Mini-Stat-Reihen in Karten-Headern
 *
 * Zweck: EIN konsistentes Muster fuer "mehrere kompakte Kennzahlen
 * nebeneinander". KEINE Tabelle (dafuer tc-roster-table), KEIN Podium
 * (dafuer tc-leaderboard) — nur eine schlichte, gut lesbare Wertereihe.
 *
 * THEME-GETRIEBEN: alle Farben aus --tc-* / aktivem .theme-*.
 * Werte sind neutrale starke Text-Tokens; Hervorhebungen via Modifier.
 *
 * Struktur (BEM):
 *   .tc-statline                 Block (flex-Reihe, umbrechend)
 *     .tc-statline__item         ein Label/Wert-Paar
 *       .tc-statline__label      Kennzahl-Name (uppercase, gedaempft)
 *       .tc-statline__value      Wert (Body-Schrift, tabellarische Ziffern)
 *
 * Wert-Modifier (am __value ODER __item):
 *   --highlight   Glanzfarbe (Auszeichnung, z.B. Schatzkammer/Gold)
 *   --success     positiver Wert (z.B. positive Bilanz)
 *   --danger      negativer Wert
 *   --muted       gedaempfter Wert
 *
 * Block-Modifier:
 *   --bordered    gerahmte Leiste mit Surface-Hintergrund (eigenstaendig,
 *                 nicht in einer Karte) — Vorbild bb-budget-bar im Teamview
 *   --compact     enger gesetzt (kleinere Schrift/Abstaende)
 *   --around      Items gleichmaessig verteilt (space-around) statt linksbuendig
 *   --dividers    duenne vertikale Trennlinien zwischen den Items
 * ============================================================================ */

/* === BLOCK ================================================================ */
.tc-statline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--tc-space-5, 24px);
}

.tc-statline--around { justify-content: space-around; }
.tc-statline--compact { gap: var(--tc-space-4, 16px); }

/* Gerahmte, eigenstaendige Leiste (Surface + Border + Radius + Padding) */
.tc-statline--bordered {
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-lg, 12px);
  padding: var(--tc-space-4, 16px) var(--tc-space-5, 24px);
}

/* === ITEM ================================================================= */
.tc-statline__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* === DIVIDERS (optional) ================================================== */
.tc-statline--dividers .tc-statline__item {
  padding-right: var(--tc-space-5, 24px);
  border-right: 1px solid var(--tc-border-subtle, rgba(255, 255, 255, 0.08));
}
.tc-statline--dividers .tc-statline__item:last-child {
  padding-right: 0;
  border-right: none;
}

/* === LABEL ================================================================ */
.tc-statline__label {
  font-family: var(--tc-font-body, sans-serif);
  font-size: var(--tc-text-xs, 0.72rem);
  font-weight: var(--tc-weight-semibold, 600);
  color: var(--tc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1;
}

/* === VALUE ================================================================ */
/* Werte in der BODY-Schrift (nicht Cinzel): reine Kennzahlen lesen sich in
   einer klaren Sans besser; Display-Serife wirkt bei Zahlen zu verspielt
   (Tim 15.06.2026). Gewicht + tabellarische Ziffern geben die noetige Praesenz. */
.tc-statline__value {
  font-family: var(--tc-font-body, sans-serif);
  font-weight: var(--tc-weight-bold, 700);
  font-size: var(--tc-text-xl, 1.3rem);
  color: var(--tc-text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}

/* Wert-Modifier (am __value oder am __item gesetzt — beide greifen) */
.tc-statline__value--highlight,
.tc-statline__item--highlight .tc-statline__value { color: var(--tc-highlight); }
.tc-statline__value--success,
.tc-statline__item--success .tc-statline__value { color: var(--tc-success, #4ade80); }
.tc-statline__value--danger,
.tc-statline__item--danger .tc-statline__value { color: var(--tc-danger, #f87171); }
.tc-statline__value--muted,
.tc-statline__item--muted .tc-statline__value { color: var(--tc-text-muted); }

/* === COMPACT ============================================================== */
.tc-statline--compact .tc-statline__value { font-size: var(--tc-text-lg, 1.1rem); }
.tc-statline--compact .tc-statline__label { font-size: var(--tc-text-2xs, 0.62rem); }
.tc-statline--compact.tc-statline--dividers .tc-statline__item { padding-right: var(--tc-space-4, 16px); }

/* === MOBILE =============================================================== */
@media (max-width: 600px) {
  .tc-statline { gap: var(--tc-space-4, 16px); }
  .tc-statline__value { font-size: var(--tc-text-lg, 1.1rem); }
  .tc-statline--bordered { padding: var(--tc-space-3, 12px) var(--tc-space-4, 16px); }
  /* Dividers auf Mobile entfernen (zu eng) */
  .tc-statline--dividers .tc-statline__item {
    padding-right: var(--tc-space-3, 12px);
    border-right: none;
  }
}