/* A bejelentkező kapu.

   Nem párbeszédablak, hanem takaró réteg: egy dialógus mögött ott villanna a
   felület a töltőkkel és a telephelyekkel, mielőtt bárki megmondta volna, ki
   nézi. A régi token-párbeszéd pontosan ezt csinálta - a lista betöltött, majd
   401-re felugrott a kérdés.

   Ketosztasu elrendezes: balra a marka es az, hogy a bajba jutott felhasznalo
   kihez fordulhat, jobbra maga a beleptetes. A kapcsolat szandekosan a
   bejelentkezes ELOTT latszik, mert pontosan annak kell, aki nem tud belepni. */
.auth-gate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:22px;
  background:radial-gradient(1100px 620px at 18% -20%,#17415a 0%,#0d2231 55%,#081722 100%);
  font:14px Inter,system-ui,sans-serif;overflow-y:auto}
.auth-gate[hidden]{display:none}

.auth-shell{width:100%;max-width:880px;display:grid;grid-template-columns:318px 1fr;
  background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px #00000059}

/* --- bal oldal: marka --------------------------------------------------- */
.auth-aside{background:linear-gradient(168deg,#123246 0%,#0c2334 62%,#0a1c29 100%);
  color:#cfe3ea;padding:34px 30px;display:flex;flex-direction:column;gap:20px}
/* A logo sajat sotet hattérrel erkezik a markakeszletbol, ezert lekerekitett
   csempekent ul a panelen - ugyanugy, ahogy a HEMS hasznalja. Igy nem kell
   pixelre egyeztetni a panel szinet a kep hatterevel. */
.auth-aside img{display:block;width:100%;max-width:250px;border-radius:11px}
.auth-aside h1{margin:0;font-size:17px;font-weight:600;color:#fff;line-height:1.35}
.auth-aside p{margin:0;font-size:12.5px;line-height:1.6;color:#b9d3de}
.auth-points{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.auth-points li{display:grid;grid-template-columns:15px 1fr;gap:9px;font-size:12.5px;color:#a9c6d3;line-height:1.45}
.auth-points b{color:#4ec4c8;font-weight:700}
.auth-aside footer{margin-top:auto;padding-top:18px;border-top:1px solid #1e4257;
  font-size:11.5px;color:var(--ink-3);line-height:1.6}
.auth-aside footer a,.auth-aside footer button{color:#61cfd2;text-decoration:none}
.auth-aside footer button{margin-top:6px;padding:0;border:0;background:0;cursor:pointer;
  font:600 11.5px Inter,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px}
.auth-aside footer a:hover,.auth-aside footer button:hover{color:#8fe3e4}

/* --- jobb oldal: az urlap ----------------------------------------------- */
.auth-main{padding:36px 38px 30px;display:grid;align-content:start;gap:17px;min-width:0}
.auth-main h2{margin:0;font-size:22px;letter-spacing:-.2px;color:var(--ink)}
.auth-main .lead{margin:-9px 0 0;color:var(--ink-3);font-size:13px;line-height:1.55}
.auth-main .lead code{background:var(--hairline-2);border-radius:4px;padding:1px 5px;font-size:12px}

/* Az urlap maga is racs: enelkul a `label` elemek blokkokent egymashoz
   tapadnanak, es az e-mail meg a jelszo mezo kozott nulla res maradna. */
.auth-main form{display:grid;gap:15px}
/* A `display` beallitasa erosebb, mint a bongeszo sajat `[hidden]{display:none}`
   szabalya, ezert a rejtes kulon kimondando - enelkul mind a harom urlap
   egyszerre latszik. */
.auth-main form[hidden],.auth-help[hidden]{display:none}
/* A cimke tartalma FELULROL pakolodik, nem nyulik ki.

   Alapbol a racs-sorok kitoltik a cella magassagat, es ha az egyik oldalon van
   magyarazo sor, a masikon meg nincs, akkor a magyarazat nelkuli oldal beviteli
   mezoje magasabbra nyulik - a ket mezo egy sorban all, megis elcsuszva. A
   `start` mindegyiknek meghagyja a sajat magassagat. */
.auth-field{display:grid;gap:6px;align-content:start}
.auth-field span{font-size:12px;font-weight:600;color:var(--ink-2)}
.auth-field input{padding:12px 13px;border:1px solid var(--hairline);border-radius:10px;font:inherit;
  background:var(--surface-2);color:var(--ink);transition:border-color .14s ease,box-shadow .14s ease}
.auth-field input:focus{outline:0;border-color:#0ba8a4;background:var(--surface);box-shadow:0 0 0 3px #0ba8a433}
.auth-field small{color:var(--ink-3);font-size:11.5px;line-height:1.45}

/* A gombsor es a folotte allo mezo koze szandekos sorkoz kerul. Enelkul a
   Belepes odatapad a jelszohoz, es egy elgepelt Enter utan a szem nem talalja
   meg, hol er veget az adatbevitel es hol kezdodik a dontes. */
.auth-actions{display:flex;gap:10px;margin-top:10px}
.auth-actions button{flex:1;padding:12px 14px;border-radius:10px;font:600 14px Inter,system-ui,sans-serif;
  cursor:pointer;border:1px solid transparent;transition:background .14s ease,border-color .14s ease}
.auth-actions .primary{background:#0ba8a4;color:#fff}
.auth-actions .primary:hover{background:var(--live)}
.auth-actions .primary:disabled{background:var(--live);cursor:progress}
.auth-actions .ghost{flex:0 0 auto;min-width:104px;background:var(--surface);border-color:var(--hairline);color:var(--ink-2)}
.auth-actions .ghost:hover{background:var(--surface-3);border-color:var(--ink-3)}

.auth-links{display:flex;flex-wrap:wrap;gap:6px 18px;padding-top:3px}
.auth-links button{padding:0;border:0;background:0;color:var(--live-ink);font:13px Inter,system-ui,sans-serif;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.auth-links button:hover{color:var(--live-ink)}

/* A hiba a mezők alatt, de a gomb fölött áll: ott keresi a szem, és nem tolja
   el a gombot a kurzor alól. */
.auth-error{margin:0;padding:11px 13px;border-radius:10px;background:var(--bad-tint);color:var(--bad-ink);
  font-size:12.5px;line-height:1.5;border:1px solid var(--hairline)}
.auth-error[hidden]{display:none}
.auth-error.info{background:var(--hairline-2);color:var(--live-ink);border-color:var(--hairline)}
/* Melyik fiokhoz tartozik a hivatkozas. Aki a linket megkapta, az a postafiok
   birtokosa - a sajat cimet latja, uj informaciot nem szerez. */
.auth-target{margin:0;padding:10px 13px;border-radius:9px;background:var(--surface-3);color:var(--ink-2);
  font-size:12.5px;line-height:1.5}
.auth-target b{color:var(--ink)}

/* --- segitseg / kapcsolat ----------------------------------------------- */
.auth-help{display:grid;gap:13px}
.auth-help section{padding:14px 15px;border:1px solid var(--hairline);border-radius:11px;background:var(--surface-2)}
.auth-help h3{margin:0 0 5px;font-size:13.5px;color:var(--ink)}
.auth-help p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.auth-help dl{margin:9px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px}
.auth-help dt{color:var(--ink-3)}
.auth-help dd{margin:0;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.auth-help a{color:var(--live-ink)}
.auth-help ol{margin:8px 0 0;padding-left:19px;font-size:12.5px;color:var(--ink-2);line-height:1.65}

.auth-note{margin:0;padding-top:13px;border-top:1px solid var(--hairline-2);font-size:11.5px;color:var(--ink-3);line-height:1.55}

@media(max-width:760px){
  .auth-gate{padding:0;place-items:stretch}
  .auth-shell{grid-template-columns:1fr;max-width:none;border-radius:0;box-shadow:none;align-content:start}
  .auth-aside{padding:22px 24px;gap:14px}
  /* Telefonon a marka nem foglalhat el egy fel kepernyot: a logo es egy sor
     marad belole, a tobbi a bejelentkezes utan is elolvashato. */
  .auth-aside .auth-points,.auth-aside p{display:none}
  .auth-aside footer{margin-top:0;padding-top:12px}
  .auth-main{padding:26px 24px 30px}
}

/* A bejelentkezett felhasználó a menü alján. Nem díszítés: enélkül egy közös
   gépen senki nem tudja, kinek a nevében kattint. */
/* A menu also savja. Ezek a szabalyok a REGI, sotet oldalmenuhoz keszultek:
   majdnem feher nev (#eaf4f7), sotet kek keret (#2f5468) es sotet hover
   (#1a3b4d). A menu azota vilagos lett, tehat a nev lathatatlan volt a sajat
   hatteren, a keret pedig egy sotet vonal a vilagos savban. Tokenekre atirva
   mindket temaban mukodik.

   A jelszocsere itt mar nem gomb, hanem szoveg-hivatkozas (`.link-like`) - a
   kijelentkezes atkerult a fejlec jobb szelere. A gomb-szabaly maradt viszont
   megorzendo, mert a `legacy` (megosztott token) agon meg lehet gomb. */
.session-badge{display:grid;gap:2px;padding:11px 12px;margin-top:auto;border-top:1px solid var(--hairline)}
.session-badge b{color:var(--ink);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.session-badge span{color:var(--ink-3);font-size:11px}
.session-badge button:not(.link-like){margin-top:7px;padding:7px 9px;border:1px solid var(--hairline);border-radius:7px;
  background:var(--surface);color:var(--ink-2);font:600 12px Inter,system-ui,sans-serif;cursor:pointer}
.session-badge button:not(.link-like):hover{background:var(--surface-2);color:var(--ink)}
.session-badge .legacy{margin-top:6px;color:var(--warn-ink);font-size:11px;line-height:1.4}

/* --- Jelentkezes ----------------------------------------------------------
   Hosszabb urlap, mint a bejelentkezes, ezert blokkokra bontva: kapcsolattarto,
   ceg, telephely, modulok. Egy huszmezos, tagolatlan urlapot senki nem tolt ki. */
.auth-shell.wide{max-width:1000px}
.register-block{display:grid;gap:9px}
.register-block h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-3)}
.register-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.register-grid .auth-field.wide{grid-column:1/-1}
.register-modules{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.register-modules label{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid var(--hairline);
  border-radius:9px;background:var(--surface-2);cursor:pointer}
.register-modules label:hover{border-color:var(--hairline)}
/* Csúszka, nem jelölőnégyzet.

   A jelölőnégyzet egy adatlap eleme; ezek viszont azt mondják meg, MIT KÉR az
   ügyfél - állapotot állítanak, nem adatot vesznek fel. A csúszka ránézésre
   megmondja, mi van bekapcsolva, és ugyanazt a nyelvet beszéli, mint a
   Modulok lap. */
.register-modules input[type="checkbox"]{appearance:none;-webkit-appearance:none;position:relative;
  flex:none;width:38px;height:22px;margin:1px 2px 0 0;border-radius:999px;
  border:1px solid var(--hairline,#d8dde5);background:#d8dde5;cursor:pointer;
  transition:background .15s ease,border-color .15s ease}
.register-modules 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}
.register-modules input[type="checkbox"]:checked{background:#0ba8a4;border-color:#0ba8a4}
.register-modules input[type="checkbox"]:checked::after{transform:translateX(16px)}
.register-modules input[type="checkbox"]:focus-visible{outline:2px solid #0ba8a4;outline-offset:2px}
.register-modules b{display:block;font-size:12.5px;color:var(--ink)}
.register-modules small{display:block;margin-top:2px;font-size:11px;color:var(--ink-3);line-height:1.45}
/* Ceg / maganszemely valto.

   Ket allapotu csuszka, ami MINDKET allast kiirja: egy be-ki kapcsolonal
   talalgatni kellene, melyik a bekapcsolt oldal. A gomb alatti mezok
   valtoznak tole, ezert az urlap elejen all - eloszor az derul ki, KI
   jelentkezik, utana kerjuk be, amit tole egyaltalan lehet.

   A csuszka a radiogombokbol all: billentyuzettel nyilakkal jarhato, es
   kikapcsolt CSS mellett is ket valaszthato lehetoseg marad. */
.entity-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  padding:3px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface-2);
  justify-self:start;min-width:260px}
.entity-switch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.entity-switch label{position:relative;z-index:1;padding:8px 18px;border-radius:999px;text-align:center;
  font:600 12.5px Inter,system-ui,sans-serif;color:var(--ink-2);cursor:pointer;
  transition:color .15s ease;user-select:none}
.entity-switch-thumb{position:absolute;z-index:0;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);
  border-radius:999px;background:#0ba8a4;box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform .18s ease}
#entity-individual:checked ~ .entity-switch-thumb{transform:translateX(100%)}
#entity-company:checked ~ label[for="entity-company"],
#entity-individual:checked ~ label[for="entity-individual"]{color:#fff}
#entity-company:focus-visible ~ label[for="entity-company"],
#entity-individual:focus-visible ~ label[for="entity-individual"]{outline:2px solid #0ba8a4;outline-offset:3px}
/* A rejtett mezo tenyleg tunjon el: az .auth-field grid-je kulonben
   felulirna a [hidden] display:none-jat. */
.auth-field[hidden]{display:none}
#gate-register{max-height:min(62vh,620px);overflow-y:auto;padding-right:4px}
@media(max-width:760px){.register-grid,.register-modules{grid-template-columns:1fr}}


/* A kijelentkezés piros.

   Ez az egyetlen gomb a fejlécben, ami kilép a munkamenetből - és a szomszédja
   egy sötét-mód kapcsoló. Egyforma szürkén a kettő ugyanolyan súlyúnak látszott,
   pedig az egyik visszavonhatatlanul kidob. */
#sign-out {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}
#sign-out:hover {
  background: #dc2626 !important;
  color: #fff !important;
}

/* Ki van bent — a fejléc jobb szélén, a kilépés mellett.

   A név és a szerepkör korábban a menü alján állt, a lap túlsó végén: a szem
   oda nem jár, amikor azt kérdezed, ki vagy bejelentkezve. Ami a
   munkamenetről szól, az egy helyen álljon.

   A név hivatkozás - a saját sorodhoz visz a Felhasználók lapon. A kilépés
   csak piktogram: a szöveg ugyanazt mondaná el másodszor, és a névtől vonná
   el a helyet. */
.session-identity {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px; border: 1px solid transparent; border-radius: 9px;
  background: none; cursor: pointer; color: var(--ink-2); font: inherit;
}
.session-identity b { font-size: 13px; font-weight: 600; color: var(--ink); }
.session-identity span { font-size: 15px; line-height: 1; opacity: .65; }
.session-identity:hover { background: var(--surface-2, #eef2f7); border-color: var(--hairline); }
.session-identity:hover b { text-decoration: underline; }

#sign-out.session-signout {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; padding: 0; font-size: 17px; line-height: 1;
}
#sign-out.session-signout span { transform: translateX(1px); }