/* ═══════════════════════════════════════════════════════════════════════════════
 * ViCore — ENERGIE 2.0 · Leitstand (public/energie/energie-leitstand.css)
 * ───────────────────────────────────────────────────────────────────────────────
 * Namensraum `.en-ls-`. NUR Tokens.
 *
 * Der Leitstand ist ein ARBEITSPLATZ, keine Kachelwand: er beantwortet „wo muss
 * ich handeln?". Deshalb gibt es hier KEIN Kennzahl-Kachelgrid — die Zahlen
 * stehen auf den Statuschips der Filterleiste und am Sicht-Selector, und jede
 * Zahl lädt genau die Menge, die sie zählt.
 *
 * Diese Datei trägt nur die Warnbandzeile und die Sektionsgliederung; die Liste
 * selbst ist VITable, die Warnungen sind VIComponents.alert, die Zeilen tragen
 * VIComponents.attentionBadge.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Warnbänder nebeneinander, sobald Platz ist. */
.en-ls-warn { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--space-2); }
.en-ls-warn:empty { display: none; }

/* ── Sektionen ────────────────────────────────────────────────────────────────
   Die Reihenfolge ist fachliche Dringlichkeit, nicht Alphabet. Eine Sektion ohne
   Datengrundlage sagt das (VIComponents.empty), statt „0" zu behaupten — das sind
   zwei verschiedene Aussagen. */
.en-ls-sek { display: flex; flex-direction: column; gap: var(--space-2); }
.en-ls-sek-h { display: flex; align-items: baseline; gap: var(--space-2); }
.en-ls-sek-t { font-size: var(--text-md); font-weight: 600; color: var(--gray-900); }
.en-ls-sek-n { font-size: var(--text-xs); color: var(--gray-500); }
.en-ls-sek-hint { font-size: var(--text-xs); color: var(--gray-500); }

/* Datenqualität: eine Zeile je Kategorie mit GENAU EINER Aktion. */
.en-ls-dq { list-style: none; margin: 0; padding: 0; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.en-ls-dq-i {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto;
  gap: var(--space-2); align-items: center;
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--gray-200);
}
.en-ls-dq-i:last-child { border-bottom: 0; }
.en-ls-dq-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--gray-300); }
.en-ls-dq-i--crit .en-ls-dq-dot { background: var(--color-danger); }
.en-ls-dq-i--need .en-ls-dq-dot { background: var(--color-amber-600); }
.en-ls-dq-i--hint .en-ls-dq-dot { background: var(--color-gold); }
.en-ls-dq-t { min-width: 0; }
.en-ls-dq-n { font-size: var(--text-md); overflow: hidden; text-overflow: ellipsis; }
.en-ls-dq-s { font-size: var(--text-xs); color: var(--gray-500); }
.en-ls-dq-c { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* Der Verbrauchsblock: je Medium eine Zeile mit Wert, Vorjahr und Datenqualität —
   nebeneinander, NIE zu einer Zahl addiert. */
.en-ls-medien { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.en-ls-med { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.en-ls-med-k { display: flex; align-items: center; gap: var(--space-2); }
.en-ls-med-v { font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.en-ls-med-e { font-size: var(--text-sm); color: var(--gray-500); margin-left: 2px; }
.en-ls-med-s { font-size: var(--text-xs); color: var(--gray-500); }

@media (max-width: 767px), (max-height: 540px) and (pointer: coarse) {
  .en-ls-warn { grid-template-columns: minmax(0, 1fr); }
  .en-ls-dq-i { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .en-ls-dq-i > .en-ls-dq-akt { grid-column: 1 / -1; justify-self: stretch; }
}