/* ═══════════════════════════════════════════════════════════════════════════════
 * ViCore — ENERGIE 2.0 · Kernstile (public/energie/energie.css) — Neubau 07.09.2026
 * ───────────────────────────────────────────────────────────────────────────────
 * Namensraum `.en-`. NUR Tokens aus css/design-system.css — keine Hexwerte, keine
 * rohen Pixel außer 0/1px-Linien. Keine eigene Designwelt: Listen sind VITable,
 * Filter sind VIFilters, Zustände · Karten · Aktenkopf sind VIComponents, Dialoge
 * sind VIDialog, Objektetiketten sind VIObjectLabel.
 *
 * Diese Datei trägt nur, was KEIN Baustein anbietet:
 *   Fachsicht-Selector · Ebene-1-Zeile · Zeitraumsteuerung · Medienplakette ·
 *   Mengenzelle mit Einheit · Abweichungszelle · Datenqualitätsbalken · Diagramme.
 *
 * Die abgelöste `public/energy.css` (1.483 Zeilen, 236 Hexwerte, 1.071 rohe Pixel)
 * war die letzte große Modul-Stilwelt ohne Bausteinschicht. Ihre Klassenfamilien
 * `.vp-*`, `.vpd-*`, `.vpg-*`, `.abl-*`, `.eco-*`, `.ec-*`, `.mc-*`, `.gasp-*`,
 * `.tour-*` sind ENTFALLEN und werden nicht wieder angelegt.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Ebene 1: Fachsicht · Statuschips · gespeicherte Sichten ───────────────── */
/* Dasselbe Muster wie im Gebäudebetrieb (.gb-l1) — bewusst zeichengleich, damit
   ein Nutzer, der den einen Bereich kennt, den anderen sofort bedienen kann. */
.en-sicht { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.en-sicht-l { font-size: var(--text-xs); color: var(--gray-500); white-space: nowrap; }
.en-sicht-sel {
  height: var(--control-h-sm); border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--gray-900); font-size: var(--text-md);
  padding: 0 var(--space-2); max-width: 320px;
}
.en-sicht-sel:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }

.en-l1 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; padding: var(--space-2) 0; }
.en-l1-right { margin-left: auto; display: inline-flex; gap: var(--space-2); align-items: center; }
.en-l1 > .vif-l1 { flex: 1 1 0; min-width: 0; }
.en-l1 > .vif-l1[hidden] { display: none; }
.en-l1-sicht { flex: 0 1 auto; min-width: 0; }
.en-l1-sicht .en-sicht-sel { max-width: 100%; }
@media (max-width: 1440px) { .en-l1 .vif-l1-l { display: none; } }
@media (max-width: 1180px) { .en-l1 > .vif-l1 { flex: 1 1 100%; order: 3; } }

/* ── Zeitraumsteuerung (Auswertungen, Verbrauchsreiter der Akte) ───────────── */
/* Kompakt und EINZEILIG: Zeitraum · Granularität · Vergleich. Sie ist KEINE
   Filterleiste — sie wählt den Ausschnitt, nicht die Menge. */
.en-zeit { display: inline-flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.en-zeit-f { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.en-zeit-f > span { font-size: var(--text-xs); color: var(--gray-500); white-space: nowrap; }
.en-zeit-f > select {
  height: var(--control-h-sm); border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--gray-900); font-size: var(--text-md); padding: 0 var(--space-2);
}
.en-zeit-f > select:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }

/* ── Medienplakette ───────────────────────────────────────────────────────────
   Die Farbe trägt das MEDIUM, nicht einen Zustand. Sie ist deshalb bewusst leise
   (getönte Fläche + eigene Schrift) und kollidiert nicht mit der Statusfarbwelt:
   Rot heißt in ViCore „Handlungsbedarf", nicht „Wärme". */
.en-med {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 1px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
  background: var(--gray-100); color: var(--gray-700);
}
.en-med::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; opacity: .75; }
.en-med--strom    { color: var(--color-electricity); }
.en-med--gas      { color: var(--color-gas); }
.en-med--wasser,
.en-med--abwasser { color: var(--color-water); }
.en-med--waerme,
.en-med--kaelte   { color: var(--color-heat); }
.en-med--heizoel,
.en-med--pellets  { color: var(--color-gas); }

/* ── Menge mit Einheit ────────────────────────────────────────────────────────
   Eine Zahl ohne Einheit gibt es im Energiemodul nicht. Die Einheit steht
   gedämpft direkt an der Zahl, damit die Spalte nicht doppelt beschriftet wird. */
.en-menge { font-variant-numeric: tabular-nums; white-space: nowrap; }
.en-menge-e { color: var(--gray-500); font-size: var(--text-xs); margin-left: 2px; }
.en-datum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.en-code { font-size: var(--text-xs); color: var(--gray-500); font-variant-numeric: tabular-nums; }
.en-muted { color: var(--gray-500); }
.en-link { color: var(--color-forest); text-decoration: none; cursor: pointer; }
.en-link:hover { text-decoration: underline; }
.en-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }

/* ── Abweichung ───────────────────────────────────────────────────────────────
   MEHR Verbrauch ist nicht automatisch „schlecht" — deshalb kein Rot, sondern die
   Warnfarbe der Aufmerksamkeitsachse und ein sachlicher Ton nach unten. */
.en-abw { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.en-abw--hoch { color: var(--color-amber-600); }
.en-abw--tief { color: var(--color-forest); }

/* ── Datenqualität als Balken ─────────────────────────────────────────────────
   „146.820 kWh · 92 % gemessen · 8 % interpoliert" wird zusätzlich SICHTBAR:
   ein flacher Balken, der die Anteile zeigt. Er ersetzt den Text nicht. */
.en-dq { display: flex; height: 4px; border-radius: var(--radius-full); overflow: hidden; background: var(--gray-200); min-width: 60px; }
.en-dq-seg { height: 100%; }
.en-dq-seg--gemessen     { background: var(--color-forest); }
.en-dq-seg--rechnung     { background: var(--color-sage); }
.en-dq-seg--geschaetzt   { background: var(--color-amber-500); }
.en-dq-seg--interpoliert { background: var(--color-gold); }
.en-dq-seg--fehlend      { background: var(--gray-300); }

/* ── Diagramme ────────────────────────────────────────────────────────────────
   Inline-SVG, keine Diagrammbibliothek (CSP: kein CDN, und eine Bibliothek für
   drei Diagrammformen wäre ein zweites Designsystem). Die Balkenhöhen setzt das
   Modul als CSS-Variable — das ist ein BERECHNETER Wert und deshalb inline erlaubt. */
.en-chart { width: 100%; display: block; }
.en-chart-bar { fill: var(--color-forest); }
.en-chart-bar--vergleich { fill: var(--gray-300); }
.en-chart-bar--unbelastbar { fill: var(--gray-200); }
.en-chart-linie { fill: none; stroke: var(--color-forest); stroke-width: 2; }
.en-chart-achse { stroke: var(--gray-200); stroke-width: 1; }
.en-chart-t { font-size: var(--text-xxs); fill: var(--gray-500); }
.en-chart-leer { color: var(--gray-500); font-size: var(--text-sm); padding: var(--space-4) 0; text-align: center; }

/* Legende — dieselbe Farbzuordnung wie die Balken, nie eine zweite. */
.en-legende { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--gray-600); }
.en-legende-i { display: inline-flex; align-items: center; gap: var(--space-1); }
/* Das Legendenplaettchen ist ein kleiner Marker — die Leiter kennt dafuer
   --radius-sm. Ein freier 2px-Wert waere der Anfang einer zweiten Radiusleiter. */
.en-legende-p { width: 10px; height: 10px; border-radius: var(--radius-sm); background: var(--color-forest); }
.en-legende-p--vergleich { background: var(--gray-300); }

/* ── Seitengerüst ─────────────────────────────────────────────────────────────
   Es gibt KEINEN eigenen Seitenkopf — Titel und Primäraktion trägt der Modulkopf
   (module-chrome). Diese Klasse ordnet nur die Flächen der Seite untereinander. */
.en-page { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.en-warn { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--space-2); }
.en-warn:empty { display: none; }

/* Zwei Spalten für Übersichts- und Auswertungsflächen (2fr/1fr, unter 1280 px
   einspaltig). Ein Raster gleich hoher Zeilen erzeugt bei unterschiedlich langen
   Karten genau die Leerflächen, die dieser Umbau abschaffen soll. */
.en-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; min-width: 0; }
.en-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
@media (max-width: 1279px) { .en-cols { grid-template-columns: minmax(0, 1fr); } }

/* Zwei gleich breite Karten nebeneinander (Preise/Abschläge, Erzeugung/Speicher). */
.en-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--space-3); align-items: start; min-width: 0; }

/* Eine Liste, die randlos in einer Karte sitzt (VIComponents.card mit `flush`). */
.en-cdlist { margin: calc(-1 * var(--space-3)); }
.vic-cd-b--flush .en-cdlist { margin: 0; }

/* Breiter Inhalt (Lastgangtabelle, Monatsmatrix) scrollt in SEINER Fläche —
   die Seite selbst scrollt nie waagerecht. */
.en-scroll { overflow-x: auto; }

/* ── Mobil ────────────────────────────────────────────────────────────────────
   Ebene 1 wird EIN quer scrollender Streifen in Leserichtung; alles Weitere
   erledigen die Bausteine (VITable rendert unter 720 px Karten, VIFilters
   schiebt hintere Filter in den Drawer). */
@media (max-width: 767px), (max-height: 540px) and (pointer: coarse) {
  .en-l1 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .en-l1::-webkit-scrollbar { display: none; }
  .en-l1 > * { flex: 0 0 auto; }
  .en-l1 > .vif-l1 { flex: 0 0 auto; flex-wrap: nowrap; overflow: visible; min-width: max-content; order: 0; }
  .en-l1 .vif-l1-l { display: none; }
  .en-l1-right { padding-right: var(--space-2); }
  .en-sicht-sel { max-width: 220px; }
  /* Die Zeitraumsteuerung bleibt eine Zeile und blättert mit — 32 px sind eine
     Mausgröße, deshalb hier die oberste Stufe DERSELBEN Höhenleiter. */
  .en-zeit { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .en-zeit::-webkit-scrollbar { display: none; }
  .en-zeit-f > select { height: var(--control-h-lg); }
  .en-sicht-sel { height: var(--control-h-lg); }
  .en-warn { grid-template-columns: minmax(0, 1fr); }
}

/* ── Zeilenzustände in Listen (von den Seitenmodulen gemeldet) ───────────────
   Beide sind ZUSTÄNDE einer Zeile, kein Handlungsbedarf — deshalb tragen sie
   keine Warnfarbe. Sie kommen über VITable `rowClass` an die Zeile. */

/* Hervorhebung nach Deep-Link (?fokus=) und nach dem Rücksprung aus der Akte:
   der Nutzer muss die Zeile wiederfinden, aus der er kam. Getönte Fläche plus
   3-px-Balken links — dasselbe Muster wie die Auswahl in VITable, damit beides
   nicht nach zwei verschiedenen Dingen aussieht. Sie klingt NICHT von selbst ab:
   eine Hervorhebung, die verschwindet, während man liest, hilft niemandem; die
   Seite nimmt sie beim nächsten Filterwechsel weg. */
.en-row-fokus > td:first-child { box-shadow: inset 3px 0 0 0 var(--brand-primary); }
.en-row-fokus > td { background: var(--green-50); }

/* Eine stornierte Ablesung bleibt vollständig sichtbar und lesbar — Storno ist
   kein Löschen (§8). Sie tritt nur ruhig zurück; der GRUND steht am Datensatz,
   nicht in der Farbe. Kein Durchstreichen: eine durchgestrichene Zahl ist
   schlechter zu lesen und behauptet „falsch", wo „nicht mehr gültig" gemeint ist. */
.en-row-storniert > td { color: var(--gray-500); background: var(--gray-50); }

/* Die GEWÄHLTE Kategorie in der Datenqualitätsliste des Leitstands. Sie ist eine
   Auswahl, kein Zustand der Sache — deshalb dieselbe ruhige Fläche wie oben und
   ausdrücklich keine der Stufenfarben (crit/need/hint), die daneben etwas
   anderes bedeuten. */
.en-ls-dq-i.is-aktiv { background: var(--green-50); border-color: var(--green-200); }

/* ── Preiszeiträume und Abschläge außerhalb der Akte ─────────────────────────
   Die Kette (Zeitraumkopf · Werte · Zustand) gab es bisher nur in der Akte
   (`.en-ak-preise`, `.en-ak-preis-*` in energie-akte.css). Der Bereich
   „Verträge & Kosten" zeigt dieselbe Kette — deshalb erbt sie hier dieselben
   Regeln, statt ein zweites Aussehen zu bekommen. Wandert die Kette je in einen
   Baustein, verschwinden BEIDE Fundstellen zusammen. */
.en-preise { display: grid; gap: var(--space-2); }
.en-preis-z {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-2);
  padding: var(--space-2) 0; border-top: 1px solid var(--gray-200);
}
.en-preis-z:first-child { border-top: 0; }
.en-preis-k { font-size: var(--text-sm); color: var(--gray-500); }
.en-preis-w { font-variant-numeric: tabular-nums; }
/* Ein storniert-ersetzter Zeitraum bleibt lesbar — er ist die Begründung dafür,
   warum eine alte Rechnung mit einem anderen Preis rechnet. */
.en-preis-z.is-storniert { color: var(--gray-500); }
.en-preis-hint { font-size: var(--text-xs); color: var(--gray-500); }