/* A felület közös nyelve: színek, felületek, keretek — egy helyen.

   Ez a fájl utolsóként töltődik be, és a meglévő lapokat hangolja rá egy közös
   tokenkészletre. Szándékosan nem írja át egyik lap markupját sem: minden
   szabály a már meglévő osztályokra épül, tehát ha valami nem tetszik, ez az
   egy fájl visszavehető, és a felület a régi képét kapja vissza.

   Két dolog változik a korábbi képhez képest:

   1. **Az oldalmenü világos lett.** A sötét sáv elválasztotta a menüt a laptól,
      és minden elem egyformán hangsúlyos volt rajta. Világos alapon a nyitott
      csoportot egy bal oldali akcentussáv jelöli, az aktív lapot pedig halvány
      kitöltés - így egy pillantással látszik, hol állsz.

   2. **Van sötét mód.** Nem invertálás: az akcentus és a státuszszínek
      világosodnak, különben a sötét alapon elvesznének. A `theme.js` a
      `data-theme` attribútumot állítja a gyökéren; ha nincs beállítva, a
      rendszer beállítását követjük.

   A betűket szándékosan nem cseréltem le webfontra: a pilot LAN-on fut, egy
   külső fontszerver miatt villogna a szöveg vagy késne a betöltés. */

:root{
  --ground:#f5f6fb;
  --surface:#ffffff;
  --surface-2:#fafbff;
  --surface-3:#f2f3fc;
  --ink:#101f36;
  --ink-2:#4a5670;
  /* A halvany kiserotext szine. #7b869c-rol allitva: az feher alapon 3,66,
     a tablazat-fejen 3,31 kontrasztot adott, a WCAG AA viszont 4,5-ot ker
     normal szoveghez - es ez a szin a felulet MINDEN small-jat, sugojat es
     metaadatat viszi. Ez az elso ertek, ami mindket feluleten atmegy
     (5,06 feheren, 4,58 a #f2f3fc tablazat-fejen). A sotet par (#8791a9)
     mar megfelelt: 4,60-5,91. */
  --ink-3:#656f82;
  --hairline:#e6e9f3;
  --hairline-2:#eef0f7;
  --accent:#4f61f3;
  --accent-ink:#3a4bd8;
  --accent-tint:#eceeff;
  --accent-contrast:#ffffff;
  --live:#0ba8a4;
  --live-tint:#e4f6f5;
  /* Tinten OLVASHATO szovegszinek. A `--live`, `--ok`, `--warn`, `--bad`
     akcentus- es ikonszin: halvany tinten allva a kontraszt 2,6-3,7 kozott
     van, ami kevesebb a WCAG AA 4,5-nel. Ezek a sotetebb parjaik, ahogy az
     `--accent-ink` az `--accent`-nek. Tinten mindig az `-ink` valtozat all. */
  --live-ink:#0a6d6a;
  --ok-ink:#137a3d;
  --warn-ink:#94621b;
  --bad-ink:#a5282d;
  --ok:#0a8f5c;   --ok-tint:#e7f6ef;
  --warn:#a5761f; --warn-tint:#fdf3e4;
  --bad:#b02b28;  --bad-tint:#fceceb;
  /* A hasabok "padlo-atlatszosaga": a diagram-savok a nullanal ennyire
     atlatszoak, es a sav mente telitodnek. Egy helyen all, mert negy kulon
     diagram hasznalja (energiamenedzsment, nyitolap napi es havi, energiamix),
     es azoknak egy nyelvet kell beszelniuk. Sotet haton nagyobb, mert ott a
     7% mar lathatatlan es a sav alja levagottnak tunik. */
  --bar-fade:.07;
  --card-shadow:0 8px 22px rgba(48,61,122,.06);
  --pop-shadow:0 16px 38px rgba(16,37,51,.16);
}

/* A rendszer beállítása dönt, amíg a felhasználó nem választott. A `:not(...)`
   azért kell, hogy egy kifejezett világos választás erősebb legyen a sötét
   rendszerbeállításnál. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0e1220;
    --surface:#161b2c;
    --surface-2:#1b2135;
    --surface-3:#212842;
    --ink:#eef1f9;
    --ink-2:#b3bcd2;
    --ink-3:#8791a9;
    --hairline:#28304a;
    --hairline-2:#222941;
    --accent:#8b97ff;
    --accent-ink:#a6afff;
    --accent-tint:#242c52;
    --accent-contrast:#111631;
    --live:#3fd0cb;  --live-tint:#123330;
    --live-ink:#3fd0cb; --ok-ink:#57d19a; --warn-ink:#e5b464; --bad-ink:#f0817c;
    --ok:#57d19a;    --ok-tint:#12301f;
    --warn:#e5b464;  --warn-tint:#33260f;
    --bad:#f0817c;   --bad-tint:#341a19;
    --bar-fade:.10;
    --card-shadow:0 8px 22px rgba(0,0,0,.35);
    --pop-shadow:0 16px 38px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#0e1220;
  --surface:#161b2c;
  --surface-2:#1b2135;
  --surface-3:#212842;
  --ink:#eef1f9;
  --ink-2:#b3bcd2;
  --ink-3:#8791a9;
  --hairline:#28304a;
  --hairline-2:#222941;
  --accent:#8b97ff;
  --accent-ink:#a6afff;
  --accent-tint:#242c52;
  --accent-contrast:#111631;
  --live:#3fd0cb;  --live-tint:#123330;
  --live-ink:#3fd0cb; --ok-ink:#57d19a; --warn-ink:#e5b464; --bad-ink:#f0817c;
  --ok:#57d19a;    --ok-tint:#12301f;
  --warn:#e5b464;  --warn-tint:#33260f;
  --bad:#f0817c;   --bad-tint:#341a19;
  --bar-fade:.10;
  --card-shadow:0 8px 22px rgba(0,0,0,.35);
  --pop-shadow:0 16px 38px rgba(0,0,0,.5);
}

/* A régi változónevek a tokenekre mutatnak, hogy a meglévő szabályok is
   együtt mozogjanak a témával - így nem kell mind a tizenöt fájlt átírni. */
:root{
  --paper:var(--surface);
  --wash:var(--ground);
  --line:var(--hairline);
  --muted:var(--ink-3);
}

/* ------------------------------------------------------------------ keret --- */
body{background:var(--ground);color:var(--ink)}
.app-shell{background:var(--ground);box-shadow:0 0 0 1px var(--hairline)}
main{background:var(--ground)}

/* ------------------------------------------------------------- oldalmenu --- */
.sidebar{background:var(--surface);color:var(--ink-2);
  border-right:1px solid var(--hairline);padding:18px 12px}
.brand{color:var(--ink);padding:2px 0 22px}
.brand i{color:var(--live);font-style:normal}
.brand-suffix{color:var(--ink-3)}

.nav-item{position:relative;color:var(--ink-2);border-radius:9px;
  font-size:13.5px;font-weight:500;margin:2px 0;padding:7px 9px;gap:11px}

/* A piktogram sajat dobozt kap, mint a Vaylensnel.

   Onmagaban allo iroasjel-ikon a felirat meretere zsugorodik, es a szem nem
   talalja meg: egy karakternyi folt egy sornyi szoveg elott. Egy 30 pixeles,
   halvany keretes doboz viszont fuggoleges oszlopot ad a menunek - osszecsukott
   allapotban pedig epp ez a doboz marad meg kattinthato feluletnek.

   A `> span:first-child` az ikon: a menupontok `<span>▦</span> Felirat` alakuak,
   a csoport-kapcsolokon pedig a zaro `<b>⌄</b>` all utolsokent. */
.sidebar .nav-item > span:first-child{display:inline-grid;place-items:center;flex:none;
  width:30px;height:30px;border:1px solid var(--hairline);border-radius:9px;
  background:var(--surface-2);color:var(--ink-2);font-size:16px;line-height:1}
.sidebar .nav-item:hover > span:first-child{border-color:var(--ink-3);color:var(--ink)}
.sidebar .nav-item.active > span:first-child{background:var(--accent);
  border-color:transparent;color:var(--accent-contrast)}
.sidebar .nav-group-toggle.active > span:first-child{background:var(--accent-tint);
  border-color:transparent;color:var(--accent-ink)}
.nav-item span{color:var(--ink-3)}

/* Almenu-jelzes: pont az ikondoboz sarkaban, nem nyil.

   Ami eddig volt: egy `⌄` karakter a feliratok utan. Ket baja volt. Egy: ez
   szoveg-glif, ami a menu betukeszleteben nem letezik, tehat a bongeszo egy
   fallback fontbol vette - onnan jott a mas vonalvastagsag es a szokatlan,
   szeles forma. Ketto: egy nyil iranyt igér, es a szem kovetni akarja, kozben
   a lenyeget - hogy a csoport nyitva van-e - maga a megjelenő submenu es a bal
   oldali akcentussav mar elmondja.

   A pont nem irany, csak annyit allit: van bent tobb. Nyitott csoportnal
   akcentus-szinu, kulonben halvany. Nem betu, tehat nincs betukeszlet-kerdes,
   es a 30 px-es ikondoboz sajat nyelvet hasznalja. */
.sidebar .nav-group-toggle > span:first-child{position:relative}
.sidebar .nav-group-toggle > span:first-child::after{content:'';position:absolute;
  right:-2px;bottom:-2px;width:7px;height:7px;border-radius:50%;
  background:var(--ink-3);border:1.5px solid var(--surface);
  transition:background .16s ease}
.sidebar .nav-group-toggle:hover > span:first-child::after{background:var(--ink-2)}
.sidebar .nav-group-toggle[aria-expanded="true"] > span:first-child::after{
  background:var(--accent)}
/* Osszecsukott oldalmenuben (<=800px) csak az ikon latszik: a pont ott is a
   doboz sarkaban marad, tehat a jelzes nem veszik el. */
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item:hover span{color:var(--ink-2)}
/* Az aktív lap halvány kitöltést kap; a nyitott csoport csak bal oldali sávot.
   A kettő szándékosan más: az egyik azt mondja, "itt vagy", a másik azt, hogy
   "ezen az ágon belül". */
/* Az aktiv menupont NEM lesz felkoverebb.

   A felkover szoveg szelesebb, mint a normal - es ha a menupont szovege eppen
   kifeszíti a savot, az aktivva valas atrendezi a menut: a felhasznalo azt
   latja, hogy a menu szelessege ugral, valahanyszor lapot valt. A jelolesre
   van harom masik eszkozunk (hatter, akcentus-szin, kitoltott ikon), amik
   egyike sem valtoztat a szoveg meretén. */
.nav-item.active,.nav-submenu .nav-item.active{background:var(--accent-tint);
  color:var(--accent-ink)}
.nav-item.active span{color:var(--accent-ink)}
.nav-group-toggle.active{background:0;color:var(--ink)}
.nav-group-toggle.active span{color:var(--accent)}
.nav-group-toggle.active::before{content:'';position:absolute;left:-12px;top:7px;bottom:7px;
  width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav-group-toggle:hover{background:var(--surface-2)}
/* A `modern-pages.css` azonositoval cimzi meg a csoport-kapcsolokat, az pedig
   erosebb barmelyik osztaly-szabalynal. Ugyanolyan eros valasz kell ra,
   kulonben a sotet kitoltes ott maradna a vilagos menuben. */
#energy-toggle.active,#energy-toggle:hover,#charging-toggle.active,#charging-toggle:hover,#platform-toggle.active,#platform-toggle:hover,
.nav-item.active,.nav-item:hover{background:var(--surface-2)}
#energy-toggle.active,#charging-toggle.active,#platform-toggle.active{background:0;color:var(--ink)}
#energy-toggle.active span,#charging-toggle.active span,#platform-toggle.active span{color:var(--accent)}
.nav-item.active,.nav-submenu .nav-item.active{background:var(--accent-tint)}
.nav-submenu{border-left:1px solid var(--hairline-2);margin-left:12px;padding-left:8px}
.nav-item.muted{opacity:.45}
.sidebar-bottom{color:var(--ink-3);border-top:1px solid var(--hairline-2);margin-top:auto;
  padding:14px 10px 0;font-size:11.5px}

/* --------------------------------------------------------------- fejlec --- */
header h1{color:var(--ink)}
.eyebrow{color:var(--accent)}
#theme-toggle{width:38px;height:38px;border:1px solid var(--hairline);border-radius:10px;
  background:var(--surface);color:var(--ink-2);font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center}
#theme-toggle:hover{background:var(--surface-2);color:var(--ink)}

/* -------------------------------------------------------------- feluletek --- */
.toolbar,.reports-toolbar,.logs-toolbar,.station-card,.log-table,.config-table,
.settings-card,.user-table-wrap,.rfid-table-wrap,.inventory-panel .user-table-wrap,
.charger-inventory-list,.energy-site,.alert-card,.notice{
  background:var(--surface);border-color:var(--hairline);color:var(--ink)}
.toolbar,.station-card,.log-table,.config-table,.user-table-wrap,.rfid-table-wrap{
  box-shadow:var(--card-shadow)}
.empty{background:var(--surface);border-color:var(--hairline);color:var(--ink-3)}
.section-title,h2,h3{color:var(--ink)}
.section-help,.settings-note{color:var(--ink-3)}
.search{background:var(--surface);border-color:var(--hairline)}
.search input,.toolbar input,.toolbar select{background:0;color:var(--ink)}
/* A legordulo NATIV listaja a select szinet orokli, a hatteret viszont nem
   (az atlatszo): sotet modban feher szoveg allt feher lapon, es a lista
   ugy nezett ki, mintha egyetlen erteke lenne - a kijelolt. Az `option`
   sajat hatteret es szint kap, mindket temaban tokenbol. */
.toolbar select option{background:var(--surface);color:var(--ink)}

/* ------------------------------------------------------------- tablazatok --- */
.user-table thead th,.log-table th,.config-table th,.rfid-table th,.inventory-panel th{
  background:var(--surface-3);color:var(--ink-3);border-color:var(--hairline-2)}
.user-table tbody td,.log-table td,.config-table td,.rfid-table td{
  color:var(--ink);border-color:var(--hairline-2)}
.user-table tbody tr:hover td,.rfid-table tbody tr:hover td{background:var(--surface-2)}
.user-table td small,.rfid-table small,.tenant-table td small,td small{color:var(--ink-3)}
.user-table td b,.tenant-table td b{color:var(--ink)}
.empty-row{color:var(--ink-3)}

/* ---------------------------------------------------------------- gombok --- */
.primary{background:var(--accent);color:var(--accent-contrast);
  box-shadow:0 5px 13px rgba(79,97,243,.26)}
.primary:hover{background:var(--accent-ink)}
.secondary{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--hairline)}
.secondary:hover{background:var(--surface-3);color:var(--ink)}
.user-actions button,.section-head button,.inv-more,.more{background:var(--surface);
  border-color:var(--hairline);color:var(--ink-2)}
.user-actions button:hover,.section-head button:hover{background:var(--surface-2);color:var(--ink)}
.user-actions button.primary,.inv-primary{background:var(--accent);border-color:transparent;
  color:var(--accent-contrast)}
.user-actions button.danger,.inventory-panel .user-actions button.danger{
  border-color:var(--bad);color:var(--bad);background:var(--surface)}
.user-actions button.danger:hover{background:var(--bad-tint)}

/* --------------------------------------------------------- allapotjelzesek --- */
.login-state.ok,.user-status.active,.chip.ok{background:var(--ok-tint);color:var(--ok)}
.login-state.none,.login-state.blocked{background:var(--surface-3);color:var(--ink-3)}
.login-state.pending{background:var(--warn-tint);color:var(--warn)}
.login-state.locked{background:var(--bad-tint);color:var(--bad)}
.user-status:not(.active){background:var(--surface-3);color:var(--ink-3);
  border-color:var(--hairline)}
.user-status.active{border-color:transparent}
.sub-badge.trial{background:var(--warn-tint);color:var(--warn)}
.sub-badge.active{background:var(--ok-tint);color:var(--ok)}
.sub-badge.expired{background:var(--bad-tint);color:var(--bad)}
.sub-badge.none{background:var(--surface-3);color:var(--ink-3)}
.name-shared{background:var(--warn-tint);color:var(--warn)}
.user-card{background:var(--surface-3);color:var(--ink-2)}
.user-card.off{background:var(--surface-2);color:var(--ink-3)}
.tenant-live{color:var(--live)}
.tenant-idle{color:var(--ink-3)}
.grant-validity{color:var(--ink-3)}
.grant-validity.expired{color:var(--bad)}

/* ----------------------------------------------------------- parbeszedek --- */
dialog{background:var(--surface);color:var(--ink);box-shadow:var(--pop-shadow)}
dialog::backdrop{background:rgba(9,14,28,.55)}
.modal-header{border-bottom-color:var(--hairline)}
.form-grid label,.coordinates label{color:var(--ink-2)}
.form-grid input,.form-grid select,.form-grid textarea{background:var(--surface-2);
  border-color:var(--hairline);color:var(--ink)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  border-color:var(--accent);outline-color:var(--accent-tint)}
.capture-status,.dialog-subtitle{color:var(--ink-3)}
.icon{color:var(--ink-3)}
.icon:hover{background:var(--surface-2);color:var(--ink)}

/* ------------------------------------------------------------- felugrok --- */
#inv-menu-popup,.combo-list,#action-menu-popup{background:var(--surface);
  border-color:var(--hairline);box-shadow:var(--pop-shadow)}
#inv-menu-popup button,.combo-row{color:var(--ink-2)}
#inv-menu-popup button:hover,.combo-row:hover,.combo-row.active{background:var(--surface-2);
  color:var(--ink)}
.combo-row b{color:var(--ink)}
.combo-row small,.combo-empty{color:var(--ink-3)}
.combo input{background:var(--surface-2);border-color:var(--hairline);color:var(--ink)}
.combo-toggle{color:var(--ink-3)}

/* ------------------------------------------------------- toltoberendezesek --- */
#chargers-page .config-table select,#chargers-page .config-table input,
#config-charger{background:var(--surface-2);border-color:var(--hairline);color:var(--ink)}
#chargers-page .config-table input[type="checkbox"]{background:var(--hairline)}
#chargers-page .config-table input[type="checkbox"]:checked{background:var(--accent)}
#chargers-page .config-table td button{background:var(--surface);border-color:var(--hairline);
  color:var(--ink-2)}
#chargers-page .config-table td button.save-config{background:var(--accent);
  border-color:transparent;color:var(--accent-contrast)}
#chargers-page .phase-verdict.ok{background:var(--ok-tint);color:var(--ok)}
#chargers-page .phase-verdict.bad{background:var(--bad-tint);color:var(--bad)}
#chargers-page .phase-verdict.none{background:var(--surface-3);color:var(--ink-3)}
.site-card .site-kicker{color:var(--ink-3)}
.site-card .site-address{color:var(--ink-2)}
.station-card .type{background:var(--accent-tint);color:var(--accent-ink)}
.site-meter-card{background:var(--surface-2);border-color:var(--hairline)}
.gateway-card .meter-line{border-color:var(--hairline-2);color:var(--ink-2)}
.gateway-card .meter-line b,.gateway-card .gateway-head b{color:var(--ink)}
.gateway-card .gateway-head .online{color:var(--ok)}
.gateway-card .gateway-head .offline{color:var(--ink-3)}

/* Sotet modban a bongeszo sajat vezerloi (legordulok nyila, gorgetosav,
   datumvalaszto) is atallnak - enelkul feher foltok maradnanak. */
:root[data-theme="dark"],:root:not([data-theme="light"]){color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){color-scheme:dark}
}

/* --- Egyszeri beallitas: terelo es kapu ---------------------------------------

   A letiltott menupont halvany es nem kattinthato, de **ott marad**: aki latja,
   hogy mi lesz elerheto, tudja, miert erdemes vegigmenni a listan. Egy eltuntetett
   menu ugyanezt titokban tartana. */
/* A beallitas-zar JELOL, nem tilt.

   Eddig `pointer-events:none` es szurkites allt itt: husz menupont
   kattinthatatlanul, elromlott menunek latszva - a platform legfobb
   szereplojenel. A hierarchia szabalyat ma mar a kiszolgalo ervenyesiti
   (nincs telephely ugyfel nelkul, nincs toltopont telephely nelkul), tehat a
   menuzar ugyanannak a szabalynak egy masodik, durvabb masolata volt.

   Ami marad: halvanyabb szoveg es egy pont a vegen, hogy latszodjon, melyik
   lap var meg a beallitasra. Ami elmegy: a kattintas tiltasa. */
.sidebar .nav-item.setup-locked{opacity:.72}
.sidebar .nav-item.setup-locked::after{content:'•';margin-left:auto;
  color:var(--warn-ink);font-size:15px;line-height:1}

.setup-panel{margin:0 0 24px;padding:22px 24px;border:1px solid var(--hairline);
  border-radius:14px;background:var(--surface);box-shadow:var(--card-shadow)}
.setup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.setup-head h2{margin:2px 0 0;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.setup-count{padding:5px 12px;border-radius:999px;background:var(--accent-tint);
  color:var(--accent-ink);font:700 12px Inter,system-ui,sans-serif;white-space:nowrap}
.setup-lead{margin:10px 0 18px;max-width:62ch;color:var(--ink-3);font-size:13.5px;line-height:1.6}
.setup-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.setup-steps li{display:flex;align-items:flex-start;gap:13px;padding:14px 15px;
  border:1px solid var(--hairline);border-radius:11px;background:var(--surface-2)}
.setup-steps li.done{background:var(--ok-tint);border-color:transparent}
.setup-mark{display:grid;place-items:center;flex:none;width:22px;height:22px;margin-top:1px;
  border:1px solid var(--hairline);border-radius:50%;background:var(--surface);
  color:var(--ok);font:700 12px Inter,system-ui,sans-serif}
.setup-steps li.done .setup-mark{background:var(--ok);border-color:transparent;color:#fff}
.setup-steps li > div{flex:1;min-width:0}
.setup-steps b{display:block;font-size:14px;color:var(--ink)}
.setup-steps small{display:block;margin-top:3px;font-size:12px;color:var(--ink-3);line-height:1.5}
.setup-steps .setup-missing{color:var(--warn);font-weight:600}
.setup-steps button{flex:none;align-self:center;padding:9px 16px;border:0;border-radius:9px;
  font:600 12.5px Inter,system-ui,sans-serif;cursor:pointer}
@media(max-width:620px){.setup-steps li{flex-wrap:wrap}.setup-steps button{width:100%}}

.setup-actions{display:flex;align-self:center;gap:8px;flex:none}
.setup-later{padding:9px 14px;border:1px solid var(--hairline);border-radius:9px;
  background:var(--surface);color:var(--ink-2);font:600 12.5px Inter,system-ui,sans-serif;
  cursor:pointer}
.setup-later:hover{background:var(--surface-2);color:var(--ink)}

/* A menu aljan ket muvelet: sajat jelszo es kilepes. Egymas alatt, mert a
   sidebar keskeny, es egy sorba tordelve mindketto olvashatatlan lenne. */
.session-badge .session-actions{display:grid;gap:6px;margin-top:9px}
.session-badge .session-actions button{width:100%;padding:8px 10px;border:1px solid var(--hairline);
  border-radius:9px;background:var(--surface);color:var(--ink-2);
  font:600 12px Inter,system-ui,sans-serif;cursor:pointer}
.session-badge .session-actions button:hover{background:var(--surface-2);color:var(--ink)}

/* A közös piktogram-készlet megjelenése (lásd icons.js).

   A tervlap nyelve: 24-es rács, 1,75 px vonal, kerekített végek, kitöltés
   nélkül. A szín mindig `currentColor`, tehát az ikon magától követi a helyet,
   ahová kerül - a menü aktív állapotát, az energialap csatornaszínét.

   A `.blade` a hőszivattyú lapátja: az egyetlen kitöltött elem a készletben. */
.ui-icon{display:block;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.ui-icon .blade{fill:currentColor;stroke:none}
/* Az oldalmenü 30 px-es ikondobozában a rajz 18 px. */
.sidebar .nav-item > span:first-child .ui-icon{width:18px;height:18px}

/* ---------------------------------------------- idotav- es lapozogombok ---

   Ket lapon all ugyanaz a dolog: a Nap/Het/Honap valaszto es a hozza tartozo
   elore-hatra nyil - az energiamenedzsmenten es a toltohalozat attekintesen.
   Eddig ket kulon keszlet volt (ott lekerekitett pirula sotet aktiv gombbal,
   itt korvonalas gombok), es a ketto mellett ugyanaz a felirat mast jelentett
   ranezesre. Egy definicio, mindket lapnak.

   Ket allapot-osztalyt is kiszolgal (`.is-on` es `.active`), mert a ket lap
   scriptje mas nevet ir - a nevek egysegesitese kulon menet, a LATVANY viszont
   nem varhat rá. */
.history-scope, .history-scopes { display: flex; gap: 4px; }
.history-scope button, .history-scopes button {
  border: 1px solid var(--hairline); border-radius: 8px; padding: 5px 11px;
  background: var(--surface); color: var(--ink-3);
  font: 700 11.5px Inter, system-ui, sans-serif; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.history-scope button:hover, .history-scopes button:hover { color: var(--ink-2); }
.history-scope button.active, .history-scopes button.is-on {
  background: var(--accent-tint); border-color: transparent; color: var(--accent-ink);
}
.history-nav { display: inline-flex; align-items: center; gap: 6px; }
.history-nav b { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.history-nav button {
  width: 26px; height: 24px; border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--surface); color: var(--ink-3); font-size: 15px; line-height: 1; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.history-nav button:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.history-nav button:disabled { color: color-mix(in srgb, var(--ink-3) 55%, transparent); cursor: not-allowed; }

/* `.link-like`: gomb, ami hivatkozasnak latszik. Eddig egyaltalan nem volt
   stilusa, tehat a bongeszo alap-gombkent rajzolta - a bejelentkezo panel
   "Kapcsolat az uzemeltetovel" sora is igy nezett ki. Ket helyen kell:
   ott, es a menu aljan a jelszocsere. */
.link-like{border:0;padding:0;background:0;font:inherit;color:var(--accent-ink);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.link-like:hover{color:var(--accent)}
.auth-aside .link-like{color:#61cfd2}
.auth-aside .link-like:hover{color:#8fe3e4}
/* A menu aljan a nev alatt all, halvanyabban: allapot, nem hivas cselekvesre.

   Az `auth.css` `.session-badge button` szabalya erosebb az onallo
   `.link-like`-nal, es meg a REGI sotet oldalmenu keretszinet (#2f5468) hordozza -
   abbol az idobol, amikor a menu sotet volt. Ezert kell itt kifejezetten
   visszavenni a keretet es a belso margot, nem csak a szint allitani. */
.session-badge .link-like{border:0;padding:0;background:0;margin-top:9px;
  font-size:11.5px;color:var(--ink-3);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--hairline);cursor:pointer}
.session-badge .link-like:hover{color:var(--ink);text-decoration-color:var(--ink-3)}