/* A DOKUMENTUM gorgetosavjanak helye is allando.

   Ez a harmadik - es utolso - forrasa a lapvaltaskor lathato ugrasnak. Az
   elso ketto a menu gorgetosavja es a laponkent kulonbozo szelesseg volt;
   ez a maradek. Amikor a lap hosszabb a kepernyonel, megjelenik a
   dokumentum gorgetosavja (15 px), es a KOZEPRE IGAZITOTT keret hét
   pixellel balra csuszik. Egy rovid lapra valtva visszaugrik.

   Eppen ezt latni az Energiamenedzsment (hosszu) es a Napelem (rovid) kozott
   valtva. A `stable` a helyet akkor is fenntartja, amikor nincs mit gorgetni.
   (Lemerve: az elmozdulas 7 pixelrol 0-ra megy.) */
html { scrollbar-gutter: stable; }

:root{--ink:#152536;--muted:#657587;--line:#dfe7ec;--paper:#fff;--wash:#f5f8fa;--teal:#0ba8a4;--nav:#102533}*{box-sizing:border-box}body{margin:0;background:var(--hairline-2);color:var(--ink);font:14px Inter,system-ui,sans-serif;overflow-x:hidden}
/* A menü és a tartalom egy közös, középre igazított keretben ül. Nagy képernyőn
   így nem szakad szét a két szélére, és marad szabad sáv kétoldalt. */
.app-shell{display:flex;align-items:stretch;width:100%;max-width:1560px;margin:0 auto;min-height:100vh;background:var(--wash);box-shadow:0 0 0 1px #e2e7f0,0 18px 60px #10253312}.sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;width:244px;flex:none;background:var(--nav);color:#dbe8ed;padding:24px 14px;display:flex;flex-direction:column}/* A nevtabla: HelloEnergia Effitiq. A kiemelt resz (`<i>`) a marka zoldje.

   Az ikon lekerult. Ket okbol: a platform mar nem CPO-rendszer, tehat a
   "CPO" felirat sem allhatott ott, es egy villamjel egy energiamenedzsment-
   platformon ugyanazt mondja, amit a nev - ket helyen ugyanaz. */
.brand{font-size:26px;font-weight:700;display:flex;align-items:baseline;gap:7px;padding:0 0 30px;flex-wrap:nowrap;white-space:nowrap}
.brand i{font-style:normal;color:var(--teal)}
.brand-suffix{font-size:20.5px;font-weight:600;color:var(--ink-3,#8b95a8)}.nav-item{display:flex;align-items:center;gap:13px;padding:12px 14px;margin:4px 0;border-radius:8px;color:#bdd0d7;text-decoration:none}.nav-item.active,.nav-item:hover{background:#1a3b4d;color:#fff}.nav-item.muted{opacity:.5}.nav-group{margin:5px 0}.nav-group-toggle{width:100%;border:0;background:transparent;font:inherit;cursor:pointer;text-align:left}.nav-group-toggle b{margin-left:auto;font-size:13px;transition:transform .16s ease}.nav-group-toggle[aria-expanded="false"] b{transform:rotate(-90deg)}.nav-submenu{display:grid;gap:1px;margin:2px 0 7px 10px;padding-left:8px;border-left:1px solid #325064}.nav-submenu[hidden]{display:none}.nav-submenu .nav-item{padding:9px 11px;font-size:13px}.sidebar-bottom{margin-top:auto;padding:12px;color:var(--ink-3);font-size:12px}main{flex:1;min-width:0;padding:38px 48px}header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}h1,h2{margin:0;font-family:Georgia,serif;font-weight:500}h1{font-size:34px}.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--teal);font-weight:700;margin:0 0 8px}.primary,.secondary,.address-row button{border:0;border-radius:7px;padding:11px 17px;font-weight:700;cursor:pointer}.primary{background:var(--teal);color:#fff}.secondary{background:var(--hairline-2);color:var(--ink-2)}.notice{background:var(--live-tint);border-left:3px solid var(--teal);padding:15px 18px;margin-bottom:22px;color:var(--ink-2)}.notice span{color:var(--teal);padding-right:8px}.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:20px;min-width:0}.search{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:9px 12px;min-width:310px}.search input{border:0;outline:0;width:260px;max-width:calc(100% - 20px);font:inherit}.toolbar select{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:10px;color:var(--ink-2)}.toolbar span{margin-left:auto;color:var(--muted)}.station-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}.station-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:19px;min-height:170px}.station-card h3{margin:0 0 6px;font-size:17px}.station-card .type{display:inline-block;background:var(--hairline-2);color:var(--live-ink);padding:4px 7px;border-radius:4px;font-size:11px;font-weight:700}.station-card p{color:var(--muted);margin:12px 0;line-height:1.5}.station-card footer{border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--ink-3);font-size:12px}.empty{background:var(--surface);border:1px dashed var(--hairline);padding:45px;text-align:center;color:var(--muted);grid-column:1/-1}dialog{border:0;border-radius:12px;box-shadow:0 20px 70px #10253355;width:min(920px,94vw);padding:0;background:var(--surface)}dialog::backdrop{background:#132a37aa}.modal-header{display:flex;justify-content:space-between;padding:24px 28px 18px;border-bottom:1px solid var(--line)}.icon{border:0;background:transparent;font-size:28px;color:var(--ink-3);cursor:pointer}.form-grid{padding:24px 28px 8px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid label,.coordinates label{display:grid;gap:7px;font-size:12px;font-weight:700;color:var(--ink-2)}.wide{grid-column:1/-1}input,select,textarea{border:1px solid var(--hairline);border-radius:6px;padding:10px;font:inherit;color:var(--ink);background:var(--surface);max-width:100%}textarea{min-height:62px;resize:vertical}.address-row{display:flex;min-width:0}.address-row input{border-radius:6px 0 0 6px;flex:1;min-width:0}.address-row button{border-radius:0 6px 6px 0;background:var(--hairline-2);color:var(--live-ink);padding:10px}.map-title{padding:10px 28px;display:flex;gap:10px;align-items:center}.map-title span{font-size:12px;color:var(--muted)}#station-map{height:270px;margin:0 28px}
/* A terkep a varazslo ELSO fulen, a `form-grid`-en BELUL all - a rácsnak mar
   van sajat oldalpaddingja, tehat a terkep sajatja itt duplazna. */
.form-grid .station-map-block{display:grid;gap:8px}
.form-grid .map-title{padding:0}
.form-grid #station-map{margin:0;border-radius:8px}
/* Toltopont torlese: a sor muveletei kozott, piros kerettel - nem primer gomb,
   mert nem ez a szokasos teendo. */
.point-charger-actions button.danger{border-color:var(--bad-ink);color:var(--bad-ink)}
.point-charger-actions button.danger:hover{background:var(--bad-tint,var(--ground));color:var(--bad-ink)}.coordinates{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 28px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 28px 26px;flex-wrap:wrap}.error{min-height:16px;color:var(--bad-ink);margin:0 28px 4px;font-size:12px}#token-dialog{width:min(410px,90vw);padding:26px}#token-dialog h2{margin-bottom:10px}#token-dialog p{color:var(--muted);line-height:1.5}#token-dialog input{width:100%;margin:10px 0 14px}@media(max-width:800px){.sidebar{width:60px;padding:18px 8px}.nav-item:not(.active){font-size:0}.nav-item{justify-content:center;padding:12px}.nav-item span{font-size:18px}.nav-group-toggle{justify-content:center}.nav-group-toggle b{display:none}.nav-submenu{margin-left:0;padding-left:0;border-left:0}.nav-submenu .nav-item{padding:10px 5px}main{padding:24px 18px}.form-grid,.coordinates{grid-template-columns:1fr}.wide{grid-column:auto}.toolbar{flex-wrap:wrap}.toolbar .search{min-width:0;flex:1}.toolbar span{margin-left:0}header{align-items:flex-start;flex-wrap:wrap}h1{font-size:28px}}@media(max-width:460px){main{padding:18px 12px}.sidebar{width:52px;padding:12px 5px}.nav-item{padding:10px 5px}.notice{padding:12px}.modal-header,.form-grid,.coordinates,.modal-actions{padding-left:18px;padding-right:18px}.error{margin-left:18px;margin-right:18px}.primary,.secondary{padding:10px 12px}}

/* A bal sáv fix magasságú, a menü viszont már túlnő egy laptop képernyőjén.
   Görgethető nélkül az utolsó menüpontok a képernyő alá kerülnek és elérhetetlenek.

   Az `overflow-x:hidden` nem díszítés: a függőleges görgetés bekapcsolásával a
   vízszintes tengely magától `auto`-ra vált, tehát bármi, ami egyetlen pixellel
   szélesebb a sávnál, oldalra görgethetővé teszi az egész menüt. Egy jelvény
   vagy egy hosszabb menüpontnév eddig ezt csendben megtette. */
/* A gorgetosav helyet MINDIG lefoglaljuk.

   Ez volt a valodi oka annak, hogy "ugral a menu szelessege". Amikor a
   menu tartalma magasabb lett a savnal - peldaul kinyilt a Toltes csoport -,
   megjelent a gorgetosav, es a hasznalhato szelesseg 219-rol 209 pixelre
   esett. Tiz pixel: eppen annyi, hogy a hosszabb menupontok ujratordeljenek,
   es az egesz menu megugorjon. Becsukaskor visszaugrott.

   A `stable` a helyet akkor is fenntartja, amikor nincs mit gorgetni, tehat
   a szelesseg allando. (Lemerve: 209 px mindket allapotban.) */
.sidebar nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#325064 transparent}
.sidebar nav::-webkit-scrollbar{width:6px}
.sidebar nav::-webkit-scrollbar-thumb{background:#325064;border-radius:3px}
.sidebar nav::-webkit-scrollbar-track{background:transparent}

/* Telefonon a csak ikonokat mutató keskeny sáv nem használható: a címkék
   eltűnnek, a tartalom pedig a maradék keskeny oszlopba szorul. A navigáció
   ilyenkor teljes nevű, kihúzható fiók, a fő tartalom pedig teljes szélességű. */
.mobile-menu-button,.mobile-menu-backdrop{display:none}
@media(max-width:800px){
  .app-shell{display:block;max-width:none}
  .mobile-menu-button{position:fixed;z-index:31;top:12px;left:12px;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:8px;background:var(--nav);color:#fff;padding:10px 12px;font:700 14px Inter,system-ui,sans-serif;box-shadow:0 4px 16px #10253340;cursor:pointer}
  .mobile-menu-button span{font-size:18px;line-height:1}
  .mobile-menu-backdrop{position:fixed;z-index:29;inset:0;border:0;background:#06121bb3;cursor:pointer}
  .mobile-menu-backdrop:not([hidden]){display:block}
  .sidebar{position:fixed;z-index:30;inset:0 auto 0 0;width:min(320px,calc(100vw - 36px));height:100dvh;padding:20px 14px;transform:translateX(-105%);transition:transform .18s ease;box-shadow:10px 0 30px #06121b55}
  .sidebar.is-open{transform:translateX(0)}
  .sidebar .brand{padding-bottom:20px}
  .nav-item:not(.active){font-size:inherit}
  .nav-item,.nav-group-toggle{justify-content:flex-start;padding:12px 14px}
  .nav-item span{font-size:18px}
  .nav-group-toggle b{display:block}
  .nav-submenu{margin-left:10px;padding-left:8px;border-left:1px solid #325064}
  .nav-submenu .nav-item{padding:9px 11px}
  main{width:100%;padding:76px 18px 24px}
  body.menu-open{overflow:hidden}
}
@media(max-width:460px){main{padding:68px 12px 18px}}

/* A mező alatti súgó.

   A példák és a formátumok korábban `placeholder`-ként a mezőben ültek. Az
   üres űrlap így teleírtnak látszott: szürke szöveg egy mezőben nem "mit írj
   ide", hanem "ez már ki van töltve" - és aki gyorsan végigfut az űrlapon,
   az kitöltöttnek hiszi. Ezért ami csak példa volt, az eltűnt (a címke úgyis
   megmondja); ami formátumot vagy szabályt mondott, az IDE került, a mező alá.

   Nem `placeholder`-szerű: a mező tényleg üres, a súgó pedig akkor is látszik,
   amikor a felhasználó már gépel bele - épp akkor, amikor a formátum számít. */
.field-hint{display:block;margin-top:5px;font-weight:400;font-size:11px;line-height:1.45;color:var(--ink-3)}

/* Ami el van rejtve, az ne látszódjon. Bárhol.

   A böngésző beépített `[hidden]{display:none}` szabálya a FELHASZNÁLÓI ÜGYNÖK
   rétegében él, és ott a leggyengébb: bármelyik saját szabályunk legyőzi, ami
   `display`-t állít - a specificitástól függetlenül. A `.nav-item{display:flex}`
   és a `header{display:flex}` tehát csendben hatástalanította a `hidden`
   attribútumot: az elem el volt rejtve az adatszerkezetben, és ott állt a
   képernyőn.

   Ez nem most keletkezett - a modul-alapú menürejtés is ezen bukott el, csak
   nem tűnt fel, mert a pilot minden ügyfele minden modult megkapott. Egy
   szabály, ami eldönti az egészet, jobb, mint elemenként utánamenni. */
[hidden]{display:none!important}

/* Az üres lap ajánlhat egy következő lépést. A `.empty` eddig csak szöveg volt;
   ahol van értelmes teendő, ott a gomb ugyanabban a dobozban áll, nem külön
   kártyában - így az üres állapot minden lapon ugyanúgy néz ki. */
.empty button{display:block;margin:18px auto 0}

/* Jelölőnégyzet helyett csúszka.

   A jelölőnégyzet egy ADATLAP eleme: bejelölöm, mentem. Ezek a kapcsolók
   viszont állapotot állítanak - „aktív", „alapértelmezett", „felszámítás" -,
   és a csúszka ezt mondja el ránézésre: BE vagy KI. A `.feature` a nagy,
   magyarázattal ellátott kapcsolók osztálya; a szűk, listás jelölőnégyzeteket
   szándékosan nem érinti, mert ott a tömörség a fontos. */
.feature > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  margin: 1px 2px 0 0;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface-3, #d8dde5);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.feature > input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.feature > input[type="checkbox"]:checked {
  background: var(--accent, #4f46e5);
  border-color: var(--accent, #4f46e5);
}
.feature > input[type="checkbox"]:checked::after { transform: translateX(16px); }
.feature > input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent, #4f46e5); outline-offset: 2px; }
.feature > input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }