.modern-dashboard{max-width:1220px}.dashboard-intro{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:20px}.dashboard-intro p{color:var(--ink-3);margin:0}.live-badge{background:var(--ok-tint);color:var(--ok);border-radius:999px;padding:9px 12px;font-size:12px;font-weight:700;white-space:nowrap}.status-board{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;box-shadow:var(--card-shadow,0 9px 25px #34417a0b)}.status-card{background:var(--surface-3);border-radius:12px;padding:14px;min-height:105px;display:grid;align-content:start;gap:6px}.status-card span{font-weight:800;font-size:17px}.status-card strong{font-size:36px;line-height:1;letter-spacing:-.06em;font-weight:650}.status-card small{color:var(--ink-2);font-weight:650}.status-card.available span{color:var(--ok)}.status-card.occupied span{color:var(--accent)}.status-card.unavailable span{color:var(--warn)}.status-card.inoperative span{color:var(--bad)}.availability-strip{grid-column:1/-1;display:flex;min-height:58px;border-radius:10px;overflow:hidden;background:var(--surface-3)}.availability-strip>div{flex:var(--share) 1 0;background:color-mix(in srgb,var(--segment) 18%,var(--surface));border-top:4px solid var(--segment);padding:8px 10px;min-width:94px}.availability-strip strong{display:block;font-size:20px;letter-spacing:-.04em}.availability-strip small{color:var(--ink-2);font-size:11px}.dashboard-layout{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(260px,.7fr);gap:18px;margin-top:20px}.dashboard-panel,.dashboard-side{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:20px;box-shadow:var(--card-shadow,0 9px 25px #34417a0b)}.dashboard-panel header{display:flex;align-items:start;margin:0 0 18px}.dashboard-panel h3,.dashboard-side h3{font-size:15px;margin:0;font-family:Inter,system-ui,sans-serif}.dashboard-panel p{margin:5px 0 0;color:var(--ink-3);font-size:12px}.dashboard-panel header span{margin-left:auto;color:var(--accent-ink);font-weight:750;white-space:nowrap}.energy-chart{height:250px;display:flex;align-items:end;gap:7px;border-bottom:1px solid var(--hairline);padding:24px 7px 0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 61px,var(--surface-3) 62px)}.bar-column{height:100%;flex:1;display:grid;grid-template-rows:18px 1fr 24px;justify-items:center;gap:7px;min-width:0}.bar-value{font-size:10px;color:var(--ink-3);white-space:nowrap}.bar-column small{text-transform:capitalize;color:var(--ink-3);font-size:10px}.dashboard-side{display:grid;align-content:start;gap:10px}.system-status{padding:13px;border-radius:10px;font-weight:750;font-size:12px}.system-status.healthy{color:var(--ok);background:var(--ok-tint)}.system-status.attention{color:var(--warn);background:var(--warn-tint)}.today-stat{background:var(--surface-3);border-radius:10px;padding:11px;display:flex;gap:11px;align-items:center}.today-stat>span{display:grid;place-items:center;color:var(--accent-ink);border:1px solid var(--accent);border-radius:7px;width:28px;height:28px;font-size:17px;font-weight:800}.today-stat strong{display:block;font-size:22px;letter-spacing:-.05em}.today-stat small{color:var(--ink-2)}.dashboard-streams{margin-top:20px}.overview-columns{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}.overview-columns>div{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:18px}.overview-columns h2{font-size:17px;margin:0 0 15px;font-family:Inter,system-ui,sans-serif}.stream{display:grid;gap:9px}.stream-item{border:1px solid var(--hairline);border-left:4px solid var(--accent);border-radius:8px;padding:12px;display:flex;justify-content:space-between;gap:12px}.stream-item.alert{border-left-color:var(--bad)}.stream-item strong{display:block;font-size:13px}.stream-item span{font-size:12px;color:var(--ink-3);display:block;margin-top:4px}.stream-item .energy{font-size:16px;color:var(--accent-ink);white-space:nowrap}.stream-empty{color:var(--ink-3);padding:16px 0}@media(max-width:900px){.dashboard-layout,.overview-columns{grid-template-columns:1fr}.status-board{grid-template-columns:repeat(2,1fr)}.availability-strip{flex-wrap:wrap}.availability-strip>div{flex:1 1 45%}}@media(max-width:600px){.dashboard-intro{align-items:start;flex-direction:column}.status-board{padding:12px;gap:8px}.status-card{min-height:90px;padding:11px}.status-card strong{font-size:29px}.availability-strip>div{min-width:45%;padding:7px}.energy-chart{gap:6px;height:220px}.dashboard-panel,.dashboard-side,.overview-columns>div{padding:14px}}

/* Energiadiagram forrás szerinti bontással. Az oszlop alul napenergia, fölötte
   hálózat, legfelül az, aminek a forrását nem mértük — az utóbbit külön színnel,
   mert nem állíthatjuk róla, hogy napból vagy hálózatból jött. */
.history-controls{display:flex;gap:10px;align-items:center}
/* Az idotav- es lapozogombok a `theme.css`-ben allnak, kozosen az
   energiamenedzsment-lap ugyanilyen gombjaival. */
.history-summary{display:flex;gap:20px;flex-wrap:wrap;margin:2px 0 14px;font-size:12px;color:var(--ink-3)}
.history-summary b{font-size:15px;color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}
/* Padlo-rampa a napi oszlopokon: a sav a nullanal atlatszo, 34 px-en belul
   telitodik. Ugyanaz a szam es ugyanaz a `--bar-fade` token, mint az energia-
   lap diagramjain - a negy hasab-diagramnak egy nyelvet kell beszelnie. */
.history-bar{display:flex;flex-direction:column-reverse;width:min(100%,74px);border-radius:8px 8px 0 0;overflow:hidden;background:var(--surface-3);min-height:2px;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,var(--bar-fade)) 0,#000 34px);
  mask-image:linear-gradient(to top,rgba(0,0,0,var(--bar-fade)) 0,#000 34px)}
.history-part{display:block;width:100%}
.history-part.pv{background:linear-gradient(180deg,var(--flow-pv),var(--flow-pv))}
.history-part.grid{background:linear-gradient(180deg,var(--flow-grid),var(--flow-grid))}
.history-part.unknown{background:color-mix(in srgb,var(--ink-3) 45%,transparent)}
.history-legend{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:11px;color:var(--ink-3)}
.history-key{width:10px;height:10px;border-radius:3px;display:inline-block}
.history-key.pv{background:var(--flow-pv)}
.history-key.grid{background:var(--flow-grid);margin-left:10px}
.history-key.unknown{background:color-mix(in srgb,var(--ink-3) 45%,transparent);margin-left:10px}

/* A még futó töltés csíkozva: látszik, hogy hozzátartozik, de nem kész adat. */
.history-part.live{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink-3) 70%,transparent),color-mix(in srgb,var(--ink-3) 70%,transparent) 4px,color-mix(in srgb,var(--ink-3) 40%,transparent) 4px,color-mix(in srgb,var(--ink-3) 40%,transparent) 8px)}
.history-live b{color:var(--ink-2)}
.history-key.live{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink-3) 70%,transparent),color-mix(in srgb,var(--ink-3) 70%,transparent) 3px,color-mix(in srgb,var(--ink-3) 40%,transparent) 3px,color-mix(in srgb,var(--ink-3) 40%,transparent) 6px);margin-left:10px}

/* Szélesebb oszlopok: a hónapnézet 31 rovatánál a hely szabja meg a szélességet,
   a napnézetnél és az évnézetnél viszont a felső határ tartja arányosan. */
.energy-chart .bar-column{gap:6px}
.energy-chart .bar-value{font-size:11px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.energy-chart .bar-column small{font-size:10.5px;color:var(--ink-3)}
@media(max-width:1100px){
  .energy-chart{gap:4px}
  .energy-chart .bar-column small{font-size:9.5px}
}

/* Markánsabb jel a szám fölé.

   Négy kártya, négy halvány karakter - ránézésre nem lehetett megmondani,
   melyik a jó és melyik a baj hír. A jel most kitöltött korong: a szín
   ugyanaz, csak most hordozza is magát, nem egy 17 pixeles írásjel viseli. */
.status-card > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 16px; line-height: 1; color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
/* Negy allapot, negy szin: zold - kek - sarga - piros. A kek a foglalte, mert
   ott dolgozik a rendszer, es ez nem baj hir; a sarga a nem elerhetoe (valamit
   tenni kell vele), a piros a hibae. Mind token, hogy sotet modban is alljon. */
.status-card.available > span { background: var(--ok); }
.status-card.occupied > span { background: var(--accent); }
.status-card.unavailable > span { background: var(--warn); }
.status-card.inoperative > span { background: var(--bad); }
/* A korongon a rajz all: pipa - villam - athuzott villam - haromszog, a
   kozos keszletbol (`icons.js`, `state-*`). A menu 1,75-os vonala feher
   alapon vekonyabbnak latszik, mint sotet tintaval, ezert itt kicsivel
   vastagabb. */
.status-card > span .ui-icon { width: 18px; height: 18px; stroke-width: 2; }

/* A "Mai összesítés" négy sora ugyanabból a piktogram-készletből dolgozik,
   mint a menü és az állapotkorongok.

   Eddig nyers írásjelek álltak itt - `ϟ`, `◷`, `↯`, `!` -, amiket a betűtípus
   rajzol: gépenként más vastagsággal, más magasságban ülve, a felkiáltójel
   pedig egyáltalán nem mond semmit arról, MIT számolunk. A négy jel most
   villám (energia), óra (mai töltések), töltő (ami épp fut) és kártya
   (elutasított RFID) - egy készlet, egy vonalvastagság. */
.today-stat > span .ui-icon { width: 16px; height: 16px; stroke-width: 1.9; }


/* A negyedik „mai" csempe GOMB: a terheléskezelésre visz.

   Miért gomb, és miért itt: a menücsoportok INDULÁSKOR mind csukva vannak
   (site-nav.js), tehát aki ezen a lapon nyitja meg a platformot, annak a
   „Dinamikus terheléskezelés" menüpont nem is látszik. Ez a csempe az egyetlen
   hely, ahol a lap magától megmutatja, hogy van ilyen - és nem szöveggel,
   hanem azzal, hogy kiírja, mit döntött.

   A kinézetet a `.today-stat`-tól örökli; itt csak a böngésző saját
   gomb-stílusát vesszük le róla, hogy a sorban a másik hárommal egy vonalban
   álljon. Kizárólag tokenek - beírt hex csendben elrontaná a sötét módot. */
/* A rejtés kimondva. A `.today-stat` `display:flex`-et ad, és a böngésző saját
   `[hidden]{display:none}` szabálya ezzel azonos erősségű - a Chromium csak
   azért nyer, mert nála a UA-szabály `:not([hidden="until-found"])`-dal áll,
   ami eggyel erősebb. Máshol a csempe a `hidden` ellenére kilátszana, és
   előfizetés nélkül is ajtót mutatna egy zárt lapra. */
.today-stat-link[hidden]{display:none}
.today-stat-link{width:100%;border:1px solid transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}
.today-stat-link:hover{border-color:var(--hairline)}
.today-stat-go{margin-left:auto;font-style:normal;font-size:17px;color:var(--ink-3)}
.today-stat-link:hover .today-stat-go{color:var(--accent-ink)}
/* A hangnem nem dekoráció: ha a napelem nem termel eleget, a rendszer éppen azt
   csinálja, amire kérték - arra nem jár figyelmeztető szín. Ami kiabál, azt
   előbb-utóbb nem nézik meg. */
.today-stat-link.is-warn{background:var(--warn-tint)}
.today-stat-link.is-warn > span{color:var(--warn);border-color:var(--warn)}
.today-stat-link.is-fault{background:var(--bad-tint)}
.today-stat-link.is-fault > span{color:var(--bad);border-color:var(--bad)}
.today-stat-link small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}