/* ═══════════════════════════════════════════════════════════════════════════════
 * ViCore — ENERGIE 2.0 · Verbrauchsstellenakte (public/energie/energie-akte.css)
 * ───────────────────────────────────────────────────────────────────────────────
 * Namensraum `.en-ak-`. NUR Tokens. Trägt ausschließlich, was vi-components.css
 * und energie.css nicht schon liefern: das Kartenraster der Reiter, die
 * Zählwerksliste, die Messstruktur-Zeile, die Preistafel und den Inline-Edit.
 *
 * Der Aktenkopf ist `VIComponents.entityHeader`, die Reiterleiste
 * `VIComponents.entityTabs`, jeder Fachblock `VIComponents.card` — dieselbe Akte
 * wie im Gebäudebetrieb, nur mit energetischem Inhalt. Wer hier eine eigene
 * Kartenoptik, einen eigenen Kopf oder eine eigene Reiterleiste anlegt, hat die
 * Bausteinschicht verlassen.
 *
 * Entfallen mit dem Umbau (nicht wieder anlegen): `.vpd-*` (Alt-Akte samt eigener
 * Tab-Leiste), `.vp-det-table`, `.vp-reg-table`, `.abl-table`, `.abl-detail-table`.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Reiterfläche ─────────────────────────────────────────────────────────── */
.en-akte { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.en-ak-nav { min-width: 0; }
.en-ak-panel { min-width: 0; }
.en-ak-sec { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* Übersicht: ZWEI Kartenstapel, kein Kartenraster (siehe energie.css .en-cols). */
.en-ak-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; min-width: 0; }
.en-ak-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
@media (max-width: 1279px) { .en-ak-cols { grid-template-columns: minmax(0, 1fr); } }

/* Der Weg in den Reiter, an dem eine Übersichtskarte endet. */
.en-ak-more { font-size: var(--text-sm); }

/* ── Zählwerke eines Zählers ──────────────────────────────────────────────────
   Wenige Zeilen mit fester Struktur — eine VITable wäre hier der Apparat für eine
   MENGE, wo drei bekannte Zählwerke stehen. */
.en-ak-reg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.en-ak-reg-i {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-2); align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--gray-200);
}
.en-ak-reg-i:last-child { border-bottom: 0; }
.en-ak-reg-t { min-width: 0; }
.en-ak-reg-n { font-size: var(--text-md); color: var(--gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-ak-reg-s { font-size: var(--text-xs); color: var(--gray-500); }
.en-ak-reg-w { text-align: right; }
.en-ak-reg-i.is-inaktiv .en-ak-reg-n,
.en-ak-reg-i.is-inaktiv .en-ak-reg-w { color: var(--gray-500); }

/* ── Zählerhistorie ───────────────────────────────────────────────────────────
   Die historisierten Einsätze. Der aktive steht oben und ist hervorgehoben —
   nicht farbig, sondern durch Gewicht: er ist der einzige ohne Ausbaudatum. */
.en-ak-hist { list-style: none; margin: 0; padding: 0; }
.en-ak-hist-i { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--gray-200); font-size: var(--text-sm); }
.en-ak-hist-i:last-child { border-bottom: 0; }
.en-ak-hist-i.is-aktiv { font-weight: 600; }
.en-ak-hist-z { font-variant-numeric: tabular-nums; color: var(--gray-500); white-space: nowrap; }

/* ── Messstruktur ─────────────────────────────────────────────────────────────
   Haupt-/Unterzählung als eingerückte Zeilen. Die Einrückung IST die Aussage
   „ist in der Summe darüber enthalten" — deshalb steht sie hier und nicht als
   zusätzliche Spalte in einer Tabelle. */
.en-ak-struktur { list-style: none; margin: 0; padding: 0; }
.en-ak-struktur-i { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm); min-width: 0; }
.en-ak-struktur-i--kind { padding-left: var(--space-4); }
.en-ak-struktur-i--kind::before { content: "└"; color: var(--gray-300); }
.en-ak-struktur-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.en-ak-struktur-w { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.en-ak-struktur-h { font-size: var(--text-xs); color: var(--gray-500); }

/* ── Preistafel ───────────────────────────────────────────────────────────────
   Historisierte Preiszeiträume untereinander, der geltende zuerst. Ein
   abgelaufener Zeitraum verschwindet NICHT — er ist die Grundlage vergangener
   Kosten und muss lesbar bleiben. */
.en-ak-preise { list-style: none; margin: 0; padding: 0; }
.en-ak-preis-i { padding: var(--space-2) 0; border-bottom: 1px solid var(--gray-200); }
.en-ak-preis-i:last-child { border-bottom: 0; }
.en-ak-preis-k { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.en-ak-preis-z { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.en-ak-preis-w { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--gray-700); margin-top: 2px; }
.en-ak-preis-i.is-abgelaufen { color: var(--gray-500); }
.en-ak-preis-i.is-storniert { text-decoration: line-through; color: var(--gray-500); }

/* ── Inline-Edit (Klick → Feld → Enter/Blur speichert) ─────────────────────── */
.en-inline-edit { cursor: text; border-bottom: 1px dashed transparent; }
.en-inline-edit:hover { border-bottom-color: var(--gray-300); }
.en-inline-edit:focus-within { border-bottom-color: var(--brand-primary); }
.en-inline-input { height: 28px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); padding: 0 var(--space-1); font: inherit; width: 100%; max-width: 320px; }
.en-ak-pen { margin-left: var(--space-1); color: var(--gray-300); font-size: var(--text-xs); }
.en-inline-edit:hover .en-ak-pen { color: var(--gray-500); }
.en-ak-hint { font-size: var(--text-xs); color: var(--gray-500); }

/* ── Mobil ────────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .en-akte .vic-eh-top { flex-wrap: wrap; }
  .en-akte .vic-eh-acts { margin-left: 0; width: 100%; }
}
@media (max-width: 767px), (max-height: 540px) and (pointer: coarse) {
  .en-akte .vic-cd-a { width: 100%; }
  .en-akte .vic-cd-a > .btn-primary { flex: 1 1 auto; min-height: var(--control-h-md); }
  .en-ak-reg-i { grid-template-columns: minmax(0, 1fr) auto; }
  .en-ak-hist-i { grid-template-columns: minmax(0, 1fr); gap: 0; }
}