/* ─────────────────────────────────────────────────────────────────
   CPO-Live-Kachel v3 — Spec v7.57 Kap. 13
   4 Zonen mit festen Höhen für springfreies Grid-Layout.
   ───────────────────────────────────────────────────────────────── */

:root {
  --tile-charging:  #dff5ea;
  --tile-neutral:   #eef4fa;
  --tile-alert:     #fff0d6;
  --tile-error:     #ffe0e4;

  /* Kräftigere Varianten für den Card-Rahmen (Header bleibt pastellig) */
  --tile-charging-border: #2ea866;
  --tile-neutral-border:  #94a9bd;
  --tile-alert-border:    #e6a23c;
  --tile-error-border:    #cc1a2a;

  /* Kompakte Kachel v5 (Δ-40): 80 % von v4.
     Global proportional verkleinert — weniger vertikaler Platzverbrauch,
     mehr Kacheln pro Screen. */
  --zone-head:    34px;
  --zone-power:   52px;
  --zone-info:    88px;   /* Δ-46: 4 KVs untereinander mit 12px-Schrift, etwas Luft */
  --zone-actions: 36px;
  --zone-details: 26px;   /* Δ-46: feste Höhe für S6/Drawer-Slot */
}

.live-tile {
  border: 1px solid var(--tile-neutral-border);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, border-width .2s;
  display: flex;
  flex-direction: column;
  /* Δ-46 (vereinfacht): feste Höhe = Summe der Zonen. tile-info (S3) bekommt
     flex:1 und absorbiert eventuelle Streckung durch Grid (alle Kacheln gleich
     hoch). Drawer (S5) ist position:absolute, überlagert Details — Kachel-Höhe
     bleibt beim Auf-/Zuklappen unverändert. */
  position: relative;
  /* tile-actions reserviert intern einen --zone-details-Slot für den Drawer,
     daher hier den Wert noch einmal addieren. */
  min-height: calc(var(--zone-head) + var(--zone-power) + var(--zone-info) + var(--zone-actions) + var(--zone-details) + var(--zone-details));
}
/* State → Rahmenfarbe + Rahmenstärke (Δ-40: Rahmen von 5px → 4px) */
.live-tile.tile-charging { border: 4px solid var(--tile-charging-border); }
.live-tile.tile-alert    { border: 4px solid var(--tile-alert-border);    }
.live-tile.tile-error    { border: 4px solid var(--tile-error-border);    }
.live-tile.tile-neutral  { border: 1px solid var(--tile-neutral-border);  }

/* ─ Zone 1: Header ───────────────────────────────────────────────── */
.live-tile .tile-head {
  position: relative;
  height: var(--zone-head);
  padding: 3px 22px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--tile-neutral);
  transition: background .2s;
}
.live-tile.tile-charging .tile-head { background: var(--tile-charging); }
.live-tile.tile-alert    .tile-head { background: var(--tile-alert);    }
.live-tile.tile-error    .tile-head { background: var(--tile-error);    }
.live-tile.tile-neutral  .tile-head { background: var(--tile-neutral);  }
.live-tile .tile-head-name {
  font-weight: 600;
  font-size: 10px;
  color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.15;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.live-tile .tile-head-icon {
  flex-shrink: 0;
  opacity: 0.75;
}
.live-tile .tile-head-cid {
  font-family: monospace;
  font-size: 8px;
  color: var(--text-3);
  margin-top: 1px;
  line-height: 1;
}

/* HB-Box rechts-oben */
.live-tile .hb-box {
  position: absolute;
  top: 5px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.live-tile .hb-label {
  font-size: 8px;
  color: var(--tx-red);
  font-weight: 600;
}
.live-tile .hb-dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.live-tile .hb-dot-online  { background: #2ea866; box-shadow: 0 0 3px rgba(46,168,102,0.5); }
.live-tile .hb-dot-offline { background: var(--tx-red); }
.live-tile .hb-dot-unknown { background: var(--border-2); }

/* ─ Zone 2: Power (2×2 Grid — IST/SOLL als Kopfzeile, kW/kWh als linke Spalte) ── */
.live-tile .tile-power {
  height: var(--zone-power);
  padding: 5px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
}
.live-tile .tile-power-grid {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: auto auto auto;
  row-gap: 1px;
  column-gap: 5px;
  align-items: center;
}
.live-tile .tile-power-head {
  font-size: 7px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1;
}
.live-tile .tile-power-head.h-ist  { grid-column: 2; grid-row: 1; }
.live-tile .tile-power-head.h-soll { grid-column: 3; grid-row: 1; }
.live-tile .tile-power-unit {
  font-size: 7px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
  line-height: 1;
  padding-right: 2px;
}
.live-tile .tile-power-unit.u-kw  { grid-column: 1; grid-row: 2; }
.live-tile .tile-power-unit.u-kwh { grid-column: 1; grid-row: 3; }
.live-tile .tile-power-val {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  text-align: center;
}
.live-tile .tile-power-val.tile-power-dim { color: var(--text-3); font-weight: 500; }
.live-tile .tile-power-val.tile-power-val-boost { color: var(--tx-amber); }

/* v1.9: Pending-Push — Box hat neuen Soll-Wert noch nicht bestaetigt.
   Layout-Zeile zeigt "alt → neu"; alt ist abgedimmt, neu hervorgehoben mit Pulse. */
.live-tile .tile-power-val.tile-power-pending-wrap {
  font-weight: 600;
  color: var(--text-2);
}
.live-tile .tile-power-pending {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  letter-spacing: -0.5px;
}
.live-tile .pending-old,
.detail-modal-content .pending-old {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,0.35);
}
.live-tile .pending-arrow,
.detail-modal-content .pending-arrow {
  color: var(--text-3);
  font-weight: 400;
}
.live-tile .pending-new,
.detail-modal-content .pending-new {
  color: var(--tx-amber, #b87c00);
  font-weight: 700;
  animation: tile-pending-pulse 1.4s ease-in-out infinite;
}
@keyframes tile-pending-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
/* Zuweisung pro Zelle */
.live-tile .tile-power-val.v-kw-ist   { grid-column: 2; grid-row: 2; }
.live-tile .tile-power-val.v-kw-soll  { grid-column: 3; grid-row: 2; }
.live-tile .tile-power-val.v-kwh-ist  { grid-column: 2; grid-row: 3; }
.live-tile .tile-power-val.v-kwh-soll { grid-column: 3; grid-row: 3; }

/* ─ Zone 3: Info / Alert ─────────────────────────────────────────── */
.live-tile .tile-info {
  height: var(--zone-info);
  padding: 5px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
}
.live-tile .tile-info-kv { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.live-tile .tile-info-kv .k {
  color: var(--text-3); font-size: 11px; font-weight: 400;
  /* Δ-46: fixe Breite für Label-Spalte → alle Werte rechts davon sind bündig */
  display: inline-block;
  min-width: 60px;
  flex-shrink: 0;
}
.live-tile .tile-info-kv .v { font-weight: 600; color: var(--text-1); }

.live-tile .tile-alert-msg {
  min-height: var(--zone-info);
  padding: 8px 10px;
  background: rgba(255,180,50,0.15);
  border-bottom: 1px solid rgba(255,180,50,0.4);
  font-size: 12px;
  color: var(--tx-amber);
  font-weight: 500;
  display: flex;
  align-items: center;
  line-height: 1.3;
}
.live-tile .tile-alert-msg-error {
  background: rgba(204,26,42,0.12);
  border-color: rgba(204,26,42,0.4);
  color: var(--tx-red);
}

/* ─ Zone 4: Actions — Icon-Buttons für Primary/Terminal, Text für Params ─────── */
.live-tile .tile-actions {
  /* Δ-46: padding-bottom = --zone-details reserviert einen Slot innerhalb
     von S4 für den absolut positionierten Drawer. Bei Drawer zu ist es
     einfach unteres Padding, fällt nicht auf. Bei Drawer offen liegt der
     Drawer in diesem Padding-Bereich. So springt nichts. */
  min-height: calc(var(--zone-actions) + var(--zone-details));
  padding: 4px 6px var(--zone-details) 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
  overflow: hidden;
}
.live-tile .tile-actions-group {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}
/* Δ-46: Buttons direkt am Drawer-Slot kleben — pushed an die Unterkante des
   verfügbaren Bereichs (= Oberkante des padding-bottom-Slots). */
.live-tile .tile-actions > .tile-actions-group:last-child {
  margin-top: auto;
}
/* Beenden (btn-stop) in der Primary-Zeile nach rechts pushen, damit es
   visuell von den positiven Aktionen abgesetzt bleibt. */
.live-tile .tile-actions-group.group-primary .btn-stop {
  margin-left: auto;
}

/* Δ-46 (final): Konfig-Drawer absolut positioniert UNTER S4 (zwischen S4
   und Details). Bei zu: display:none. Bei offen: zwischen Buttons und
   Details, S4 und Details bleiben fest, Kachel-Höhe ändert sich nicht.
   Voraussetzung: S4 ist um die Drawer-Höhe nach oben verschoben — siehe
   tile-actions-margin-bottom unten. */
.live-tile .tile-config-drawer {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--zone-details);
  height: var(--zone-details);
  padding: 2px 6px;
  background: #f7f9fc;
  border-top: 1px solid rgba(0,0,0,0.08);
  z-index: 2;
  align-items: center;
}
.live-tile .tile-config-drawer.open {
  display: flex;
}
.live-tile .tile-config-drawer .tile-actions-group {
  margin: 0 auto;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 4px;
}
/* Δ-46: Drawer-Buttons kompakter — alle drei müssen in die Kachelbreite passen. */
.live-tile .tile-config-drawer .btn-param {
  padding: 2px 6px;
  font-size: 10px;
}
.live-tile .tile-actions .btn { padding: 2px 6px; font-size: 9px; }
/* Icon-only Buttons: quadratisch, kompakt, klickbar */
.live-tile .tile-actions .btn-icon {
  width: 24px;
  min-width: 24px;
  height: 21px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}
/* Parameter-Buttons: zurückhaltender als Primär-Aktionen.
   Δ-46: gilt auch im Drawer (.tile-config-drawer .btn-param). */
.live-tile .tile-actions .btn-param,
.live-tile .tile-config-drawer .btn-param {
  background: #fff;
  border: 1px solid var(--border-1);
  color: var(--text-2);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}
.live-tile .tile-actions .btn-param:hover,
.live-tile .tile-config-drawer .btn-param:hover {
  background: var(--surface-1);
  color: var(--text-1);
}

/* ─ Details-Ausklappung (unterhalb der 4 Zonen, dehnt Kachel nach unten) ─ */
.live-tile .js-details {
  line-height: 1.5;
  font-size: 10px;
}

/* Δ-47: Toggle-Switch im Header für Detail/Kompakt-Modus */
.live-viewmode-toggle {
  display: inline-flex;
  vertical-align: middle;
  border: 1px solid var(--border-1);
  border-radius: 4px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
}
.live-viewmode-toggle button {
  background: #fff;
  border: none;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}
.live-viewmode-toggle button + button {
  border-left: 1px solid var(--border-1);
}
.live-viewmode-toggle button.active {
  background: var(--brand);
  color: #fff;
}
.live-viewmode-toggle button:hover:not(.active) {
  background: var(--surface-1);
}

/* Δ-47: Kompakt-Modus — nur S1+S2, ganze Kachel klickbar (öffnet Detail-Modal). */
.live-tile.tile-compact {
  min-height: calc(var(--zone-head) + var(--zone-power));
  cursor: pointer;
}
.live-tile.tile-compact:hover {
  filter: brightness(0.97);
}

/* Δ-47: Tile-Modal — eine Detail-Kachel zentriert anzeigen */
.tile-modal-wrap {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}
.tile-modal-wrap .live-tile {
  width: 280px;
  max-width: 100%;
}

/* Live-Grid: 6 Spalten Detail, 8 Spalten Compact */
.live-grid-wrap {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.live-grid-wrap.mode-detail {
  grid-template-columns: repeat(6, minmax(200px, 1fr));
}
.live-grid-wrap.mode-compact {
  grid-template-columns: repeat(8, minmax(140px, 1fr));
}
.live-grid-wrap::-webkit-scrollbar {
  display: none;
}

/* Details-Link unterhalb der Kachel (Δ-33: öffnet Modal statt Inline-Ausklappung) */
.live-tile .tile-details-row {
  height: var(--zone-details);     /* Δ-46: feste Höhe = gleicher Slot wie Drawer */
  padding: 4px 12px;
  font-size: 11px;
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
}
.live-tile .tile-details-row a {
  color: var(--brand);
  text-decoration: none;
}
.live-tile .tile-details-row a:hover {
  text-decoration: underline;
}

/* Details-Modal-Inhalt (Δ-33): lesbare Größen, 3 gruppierte Sektionen */
.detail-modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-1);
}
.detail-modal-content .detail-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 0 0 8px 0;
  font-weight: 600;
}
.detail-modal-content .detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}
.detail-modal-content .detail-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-2);
}
.detail-modal-content .detail-kv .k {
  color: var(--text-3);
  font-size: 13px;
}
.detail-modal-content .detail-kv .v {
  color: var(--text-1);
  font-weight: 500;
  text-align: right;
  font-size: 14px;
}
.detail-modal-content .detail-kv .v.mono {
  font-family: monospace;
  font-size: 13px;
}
.detail-modal-content .detail-kv .v.strong {
  font-weight: 700;
  font-size: 15px;
}

/* Heute-Sektion (Δ-34): KPI-Zeile + Tabelle */
.detail-today-kpis {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.detail-kpi {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.detail-kpi .kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.detail-kpi .kpi-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.detail-today-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.detail-today-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--border-2);
}
.detail-today-table th.num,
.detail-today-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.detail-today-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-2);
  color: var(--text-1);
}
.detail-today-empty {
  padding: 16px 10px;
  text-align: center;
  color: var(--text-3);
  font-style: italic;
  font-size: 13px;
}

/* Paginierung (Δ-31): Überzählige Kacheln ausblenden + Pager-UI unter dem Grid */
.live-tile.tile-hidden { display: none; }
.live-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-2);
}
.live-pager button {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border-2);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  color: var(--text-1);
}
.live-pager button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.live-pager button:not(:disabled):hover {
  border-color: var(--border-1);
  background: var(--surface-1);
}
.live-pager .pager-info {
  font-variant-numeric: tabular-nums;
}
/* Δ-48: Reihen-Selector im Pager */
.live-pager .pager-rows-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  font-size: 12px;
  color: var(--text-2);
}
.live-pager .pager-rows-label select {
  padding: 3px 6px;
  font-size: 12px;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  color: var(--text-1);
}

/* ─ Live-Toolbar (Δ-27) — einzeilige Leiste Tenant/Site/Preis ohne Card-Rahmen ─ */
.live-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 4px 2px 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
  color: var(--text-2);
}
.live-toolbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.live-toolbar-icon {
  font-size: 14px;
  opacity: 0.75;
}
.live-toolbar-text {
  font-weight: 600;
  color: var(--text-1);
}
.live-toolbar-sel {
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  background: var(--surface-input);
  max-width: 280px;
}
.live-toolbar-sel:hover {
  border-color: var(--border-1);
}

/* Vorschau-Button im Preis-Inline (Δ-29/30): als echter Button erkennbar */
.live-toolbar .btn-preview {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-amber, #fdf3dc);
  color: var(--tx-amber, #b86a00);
  border: 1px solid var(--bg-amber, #f0d8a6);
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.3;
}
.live-toolbar .btn-preview:hover {
  filter: brightness(0.97);
}

/* Preis-Detail-Drawer: Padding + klarer Leer-Fallback */
#live-price-detail {
  background: #fff;
}
#live-price-detail .price-empty {
  padding: 16px;
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
}