/* A Kezdőlap - az energia-lap összegző feje, a PLATFORM egészéről.

   A formák ugyanazok, mint a többi átalakított lapon, mert egy felület egy
   nyelvet beszél: KPI-csempe a mai számoknak, állapotdoboz a darabszámoknak,
   soros lista a teendőnek. Karika sehol - lásd a `site-energy.js`
   mérleg-kommentjét.

   Ami eltűnt innen: a mérő + halmozott sáv (összesített önellátás és
   fogyasztás). Az energia telephelyenként szól egy mérőről, tehát a kártyákon
   a helye - lásd a `kezdolap.js` fejét.

   Minden méret és szín tokenből jön: ez a lap nem hoz új színt a felületre. */

.home-page{display:flex;flex-direction:column;gap:16px}

/* --------------------------------------------------- idoszak-valaszto --- */
/* A fej sora: mirol szol a szamsor (Energia), milyen felbontasban, es melyik
   idoszakra. A ket nyil, a cimke es a naptar ugyanaz a forma, mint a
   telephely-kartyak fejleceben (`site-energy.css` .hero-nav) - a felulet egy
   nyelvet beszel. A szinek viszont a LAP tokenjeibol jonnek, nem a kartya
   szinpad-tokenjeibol: ez a sor a lap hatteren all, nem a kartyan. */
.home-period{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.home-period h3{font:700 15px Inter,system-ui,sans-serif;letter-spacing:-.2px;margin:0;color:var(--ink)}
.home-period-scopes{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:10px;padding:3px}
.home-period-scopes button{border:0;background:transparent;color:var(--ink-2);border-radius:7px;
  padding:4px 11px;font:600 12px Inter,system-ui,sans-serif;cursor:pointer;line-height:1.4}
.home-period-scopes button:hover{color:var(--ink)}
.home-period-scopes button.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--card-shadow)}
.home-period-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.home-period-step{border:1px solid var(--hairline);border-radius:8px;width:26px;height:24px;
  background:var(--surface);color:var(--ink-3);font-family:inherit;font-weight:600;font-size:14px;
  cursor:pointer;line-height:1}
.home-period-step:hover:not(:disabled){color:var(--ink);border-color:var(--ink-3)}
.home-period-step:disabled{opacity:.35;cursor:default}
/* FIX SZELESSEG: a cimke „ma"-rol „szept. 15 – szept. 21"-re valtva kulonben
   arrebb tolna a naptar-gombot, es a szem azt olvassa hibanak. */
.home-period-label{color:var(--ink);font-size:13px;font-weight:650;display:flex;align-items:center;
  gap:6px;min-width:140px;justify-content:center}
.home-period-cal{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:24px;border:1px solid var(--hairline);border-radius:8px;
  background:var(--surface);color:var(--ink-3);cursor:pointer;transition:color .15s,border-color .15s}
.home-period-cal:hover,.home-period-cal:focus-within{color:var(--ink);border-color:var(--ink-3)}
.home-period-cal svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
/* A natív mezo LATHATATLANUL fekszik a gombon - igy a bongeszo (mobilon a
   rendszer) sajat naptara nyilik, styling-harc nelkul. */
.home-period-cal input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;
  opacity:0;cursor:pointer}
.home-period-cal input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;opacity:0;cursor:pointer}
.home-live-dot{width:6px;height:6px;border-radius:50%;background:var(--live);flex:none;
  animation:home-live-pulse 2s cubic-bezier(.4,0,.3,1) infinite}
@keyframes home-live-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.home-live-dot{animation:none}}

/* ------------------------------------------------------------- KPI-sor --- */
.home-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.home-kpi{display:flex;align-items:flex-start;gap:11px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:14px;padding:13px 15px;box-shadow:var(--card-shadow)}
.home-kpi-ic{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--surface-3);color:var(--ink-2)}
.home-kpi-ic .ui-icon{width:17px;height:17px}
.home-kpi small{display:block;font-size:12px;color:var(--ink-2);line-height:1.3}
.home-kpi strong{display:block;font-size:22px;font-weight:700;letter-spacing:-.5px;margin-top:6px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.home-kpi strong u{text-decoration:none;font-size:13px;font-weight:600;color:var(--ink-3)}
.home-kpi em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:4px}
.home-kpi.c1 .home-kpi-ic{background:var(--accent-tint);color:var(--accent-ink)}
.home-kpi.c2 .home-kpi-ic{background:var(--warn-tint);color:var(--warn-ink)}
.home-kpi.c4 .home-kpi-ic,.home-kpi.c5 .home-kpi-ic{background:var(--live-tint);color:var(--live-ink)}
/* Kevesebb csempe (403 az egyik végponton) ne nyúljon negyednyi szélességűre. */
.home-kpis[data-db="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-kpis[data-db="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-kpi.c3 .home-kpi-ic{background:var(--live-tint);color:var(--live-ink)}
.home-kpi.c4 .home-kpi-ic{background:var(--ok-tint);color:var(--ok-ink)}

/* PASZTELL (2026-09-23), ugyanaz a merce, mint a Mukodesi attekintes
   allapotdobozain (`overview.css`, 9 %): a csempe a sajat szinenek halvany
   arnyalatat viseli, a szoveg tinta marad. A teli szin egy napig elt - „nagyon
   eros lett". A szin a csatornae: napelem, fogyasztas, toltes, CO₂. */
.home-kpi.c1{--kpi-tone:var(--flow-pv)}
.home-kpi.c2{--kpi-tone:var(--flow-load)}
.home-kpi.c3{--kpi-tone:var(--flow-ev)}
.home-kpi.c4{--kpi-tone:var(--ok)}
.home-kpis .home-kpi{background:color-mix(in srgb,var(--kpi-tone,transparent) 9%,var(--surface));
  border-color:color-mix(in srgb,var(--kpi-tone,transparent) 22%,var(--hairline))}
.home-kpis .home-kpi .home-kpi-ic{background:color-mix(in srgb,var(--kpi-tone,transparent) 16%,var(--surface));
  color:var(--kpi-tone,var(--ink-2))}

/* --------------------------------------------------- elkerult koltseg --- */
/* Egy szam a csempek alatt, teljes szelessegben: a csempek osszeadhato
   mennyisegek, ez egy ellentenybol szamolt allitas - a sajat parameter-
   listajaval egyutt, ezert nem fer egy csempe meretebe. Csak tokenek: a
   sotet mod a theme.css retege (lasd `cpo-sotet-mod-csapda`). */
.home-avoided{margin-top:12px;padding:13px 15px 6px;
  --kpi-tone:var(--accent);
  background:color-mix(in srgb,var(--kpi-tone) 7%,var(--surface));
  border-color:color-mix(in srgb,var(--kpi-tone) 20%,var(--hairline))}
.home-avoided-main{display:flex;align-items:flex-start;gap:11px}
.home-avoided-main .home-kpi-ic{background:color-mix(in srgb,var(--kpi-tone) 16%,var(--surface));color:var(--kpi-tone)}
.home-avoided-main small{display:block;font-size:12px;color:var(--ink-2);line-height:1.3}
.home-avoided-main strong{display:block;font-size:22px;font-weight:700;letter-spacing:-.5px;margin-top:6px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.home-avoided-main em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:4px}
.home-avoided-reason,.home-avoided-kwh{margin:8px 0 0 43px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.home-avoided-params{margin:8px 0 0 43px}
.home-avoided-params summary{display:flex;align-items:baseline;gap:8px;cursor:pointer;list-style:none;
  font-size:12.5px;font-weight:600;color:var(--ink-2);padding:6px 0}
.home-avoided-params summary::-webkit-details-marker{display:none}
.home-avoided-params summary small{color:var(--ink-3);font-weight:500;margin-left:auto}
.home-avoided-params[open] .home-caret{transform:rotate(90deg)}
.home-avoided-params ul{list-style:none;margin:2px 0 8px;padding:0;display:flex;flex-direction:column;gap:2px}
.home-avoided-params li{display:grid;grid-template-columns:78px 1fr;gap:1px 12px;padding:7px 10px;
  border-radius:8px;border-left:3px solid var(--hairline);font-size:12.5px}
.home-avoided-params li b{font-weight:600;color:var(--ink)}
.home-avoided-params li small,.home-avoided-params li em{grid-column:2;color:var(--ink-3);font-size:11.5px;font-style:normal}
.home-avoided-state{grid-row:span 3;font-size:11px;font-weight:650;color:var(--ink-3);padding-top:1px}
.home-avoided-params li.is-ok{border-left-color:var(--ok)} .home-avoided-params li.is-ok .home-avoided-state{color:var(--ok-ink)}
.home-avoided-params li.is-missing{border-left-color:var(--warn)} .home-avoided-params li.is-missing .home-avoided-state{color:var(--warn-ink)}
.home-avoided-params li.is-planned{border-left-color:var(--ink-3)}
.home-avoided-params li.is-na{opacity:.7}

/* ------------------------------------------------------------- kártyák --- */
.home-page .card{background:var(--surface);border:1px solid var(--hairline);border-radius:16px;
  box-shadow:var(--card-shadow)}
.home-page .card header{display:flex;align-items:baseline;gap:12px;padding:14px 18px 8px}
.home-page .card h3{font-size:15px;font-weight:700;letter-spacing:-.2px;margin:0;
  font-family:Inter,system-ui,sans-serif}
.home-page .card header small{color:var(--ink-3);font-size:12px}

/* ------------------------------------------- a telephely-kártyák feje --- */
/* A tábla helyét a lap alján álló energia-kártyák vették át (lásd a
   `kezdolap.js` fejét); ami maradt belőle, az ez az egy sor. */
.home-sites-head{display:flex;align-items:baseline;gap:12px;margin:2px 0 -6px}
.home-sites-head h3{font-size:15px;font-weight:700;letter-spacing:-.2px;margin:0;color:var(--ink)}
.home-sites-head small{color:var(--ink-3);font-size:12px}
#home-summary{margin-bottom:16px}
/* Otthon: ugyanez a sáv „A töltőm" lapon, a töltő-kártya fölött. */
#home-energy-otthon{margin-bottom:16px}
#home-energy-otthon:empty{margin:0}
/* Egy telephelynel nincs fej - akkor a helye se maradjon ott. */
#home-summary:empty{margin:0}
.home-energy,.home-ops{display:flex;flex-direction:column;gap:16px}
.home-energy{gap:12px}
.home-energy .home-avoided{margin-top:0}
.home-ops:empty{display:none}

/* ------------------------------------------------------- jobb oldali sav --- */
/* SZELES ABLAKON az energia-sav (idoszak, negy csempe, elkerult koltseg) a
   KERETEN KIVULRE kerul, a jobb szelre, ugy, mint a bal oldali menu
   (2026-09-28): „egyre tobb a telephely, eleve gorgetni kell", es a csempesor
   minden kartyat lejjebb tolt. A harom egyutt megy, mert ugyanarra az
   idoszakra szolnak.

   A sav `position:fixed`: all, amikor a kozepso keret gorog. KOZVETLENUL a
   keret mellett all, nem a kepernyo szelen: a keret (`.app-shell`, 1560 px)
   es a sav (332 px) EGYUTT all kozepen, 1892 px-en. Ezert a keret bal margoja
   es a sav jobb tavolsaga ugyanaz a szam: (szelesseg - 1892) / 2, legalabb 0.
   Fix elemnel a `%` a gorgetosav nelkuli ablakszelesseg - pont annyi, mint a
   `body`-e, tehat a ket el pixelre talal (a `100vw` a gorgetosavval szamolna).
   A `body` jobb paddingje foglalja le a sav helyet. Ha a sav magasabb, mint
   az ablak, a sajat tartalma gorog, nem a lap.

   A `:has` a feltetel: csak akkor, ha a Kezdolap latszik ES van energia-sav
   (az ures-allapotban nincs). Mas lapon a keret a regi helyen all. */
@media(min-width:1700px){
  body:has(#energy-dashboard-page:not([hidden]) > #home-summary > .home-energy){padding-right:332px}
  body:has(#energy-dashboard-page:not([hidden]) > #home-summary > .home-energy) .app-shell{
    margin-left:max(0px,calc((100% + 332px - 1892px) / 2));margin-right:auto}
  #home-summary > .home-energy{position:fixed;top:0;right:max(0px,calc((100% - 1892px) / 2));bottom:0;
    width:332px;z-index:20;
    overflow-y:auto;overscroll-behavior:contain;padding:38px 16px 24px}
  .home-energy .home-kpis,.home-energy .home-kpis[data-db]{grid-template-columns:1fr}
  .home-energy .home-period-nav{margin-left:0;width:100%}
  .home-energy .home-period-label{min-width:0;flex:1}
  /* 300 pixelen a darabszam a cim ala kerul, kulonben ket sorra torik mindketto. */
  .home-energy .home-avoided-params{margin-left:0}
  .home-energy .home-avoided-params summary{flex-wrap:wrap}
  .home-energy .home-avoided-params summary small{margin-left:0;flex-basis:100%;padding-left:16px}
}

/* --------------------------------------------------------------- teendő --- */
/* A blokk CSUKHATÓ, és alapból csukva áll (lásd a `kezdolap.js`
   `TEENDO_KULCS` kommentjét): csukva egy sor marad belőle, a darabszámmal
   együtt, tehát a hír nem tűnik el vele.

   A `<summary>` saját nyíl-jelölőjét két helyen kell leszedni: a `list-style`
   a mai böngészőknek szól, a pszeudoelem a régebbi WebKitnek - különben két
   nyíl áll egymás mellett. */
.home-attention-head{display:flex;align-items:baseline;gap:12px;padding:14px 18px 8px;
  cursor:pointer;list-style:none}
.home-attention-head::-webkit-details-marker{display:none}
/* A darabszam a sor VEGEN all, ugyanugy, mint a folotte levo Csatlakozok
   kartya fejleceben - azt az altalanos `header` szabaly tolja jobbra, a
   `summary`-t viszont nem eri el. */
.home-attention-head small{color:var(--ink-3);font-size:12px;margin-left:auto}
.home-attention-head:hover h3{color:var(--accent-ink)}
/* Nyitva a fejsor alatt jön a lista, ezért elég neki 8 pixel alul; csukva
   ugyanaz az alj csonkának látszik, mert a kártya ott ér véget. */
.home-attention:not([open]) .home-attention-head{padding-bottom:14px}
.home-caret{align-self:center;color:var(--ink-3);font-size:15px;line-height:1;
  transition:transform .15s ease}
.home-attention[open] .home-caret{transform:rotate(90deg)}

/* Minden sor EGY elvégzendő dolog: mi az, mit ront el, és hol lehet pótolni.
   A színcsík a sürgősség - a hibás csatlakozóval ma kell kezdeni valamit, a
   hiányzó mérő a következő kiszállás. */
.home-todos{display:flex;flex-direction:column;gap:2px;padding:2px 10px 12px}
.home-todo{display:grid;grid-template-columns:minmax(160px,auto) 1fr auto;align-items:center;gap:14px;
  padding:10px 12px;border-radius:10px;font-size:12.5px;border-left:3px solid var(--hairline)}
.home-todo:hover{background:var(--surface-2)}
.home-todo b{font-weight:650;color:var(--ink)}
.home-todo span{color:var(--ink-2)}
.home-todo.is-bad{border-left-color:var(--bad)} .home-todo.is-bad b{color:var(--bad-ink)}
.home-todo.is-warn{border-left-color:var(--warn)} .home-todo.is-warn b{color:var(--warn-ink)}
.home-todo.is-info{border-left-color:var(--ink-3)}
.home-todo-go{border:1px solid var(--hairline);background:var(--surface-2);color:var(--ink-2);
  border-radius:8px;padding:5px 10px;font:600 11.5px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.home-todo-go:hover{border-color:var(--accent);color:var(--accent-ink)}
.home-ok{padding:2px 18px 16px;color:var(--ok-ink);font-size:13px;font-weight:600}

@media(max-width:1250px){
  .home-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .home-kpis,.home-kpis[data-db="3"]{grid-template-columns:1fr 1fr}
  /* A valaszto sorai egymas ala kerulnek: a nyilak igy sem csusznak ki. */
  .home-period-nav{margin-left:0;width:100%}
  .home-period-label{min-width:0;flex:1}
  .home-todo{grid-template-columns:1fr auto;gap:4px 12px}
  .home-todo span{grid-column:1/-1}
}