/* Aura Supply OS -- belépő képernyő (Péter grafikája, 2026-10-02/04).
 *
 * MIÉRT KÜLÖN PALETTA: a Supply OS márka-tokenje narancs (tokens.css --color-primary #E8390E),
 * a belépő grafikája viszont KÉK. A kék ezért KIZÁRÓLAG a #login-overlay alá van szűkítve --
 * az app többi része a tokeneit tartja. Egy globális token-átírás a teljes felületet
 * átfestette volna egy képernyő kedvéért.
 *
 * TÉMA: a <html data-theme> (theme.js) és a prefers-color-scheme dönt, pontosan úgy, ahogy a
 * tokens.css-ben. A sötét ág kétszer szerepel (attribútum ÉS media-query), mert az üres
 * data-theme = "rendszer" állapotban a media-query az egyetlen jel.
 */
#login-overlay.lgn {
  --lgn-bg-a: #f5f8fe;
  --lgn-bg-b: #ffffff;
  --lgn-title: #0f172a;
  --lgn-brand-a: #1d4ed8;
  --lgn-brand-b: #3b82f6;
  --lgn-sub: #475569;
  --lgn-card: rgba(255,255,255,.92);
  --lgn-card-border: #e2e8f0;
  --lgn-card-shadow: 0 18px 50px rgba(30,64,175,.10);
  --lgn-label: #1e293b;
  --lgn-input-bg: #f8fafc;
  --lgn-input-border: #cbd5e1;
  --lgn-input-text: #0f172a;
  --lgn-input-ph: #94a3b8;
  --lgn-focus: rgba(59,130,246,.35);
  --lgn-btn-a: #1e40af;
  --lgn-btn-b: #3b82f6;
  --lgn-btn-shadow: 0 10px 28px rgba(37,99,235,.28);
  --lgn-seg-bg: rgba(255,255,255,.85);
  --lgn-seg-border: #e2e8f0;
  --lgn-seg-active: #e0ebff;
  --lgn-seg-text: #334155;
  --lgn-w1: rgba(147,197,253,.55);
  --lgn-w2: rgba(191,219,254,.75);
  --lgn-w3: rgba(37,99,235,.9);
  --lgn-bar: rgba(191,219,254,.9);
  --lgn-err: #b91c1c;
  --lgn-eye: #64748b;
  --lgn-glow: 0;

  display: none; position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center;
  padding: 1rem; box-sizing: border-box; overflow: hidden;
  background: linear-gradient(180deg, var(--lgn-bg-a) 0%, var(--lgn-bg-b) 100%);
  color: var(--lgn-title);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* A sötét értékek egyetlen helyen, KÉT kiváltóval: az explicit data-theme="dark", VAGY az
 * is-dark-media osztály, amit a supply-os.js a supplyTheme.effective()-ből állít. Az utóbbi
 * kell, mert a theme.js "rendszer" állapotban ÜRES data-theme-et ír, amire az attribútum-
 * szelektor nem illeszkedik -- ott csak a prefers-color-scheme tudja, hogy sötét. */
:root[data-theme="dark"] #login-overlay.lgn,
#login-overlay.lgn.is-dark-media {
  --lgn-bg-a: #050d20;
  --lgn-bg-b: #0a1a3a;
  --lgn-title: #f8fafc;
  --lgn-brand-a: #3b82f6;
  --lgn-brand-b: #7dd3fc;
  --lgn-sub: #a5b4cf;
  --lgn-card: rgba(10,25,55,.62);
  --lgn-card-border: rgba(59,130,246,.35);
  --lgn-card-shadow: 0 18px 50px rgba(0,0,0,.45);
  --lgn-label: #e2e8f0;
  --lgn-input-bg: rgba(5,16,40,.85);
  --lgn-input-border: rgba(59,130,246,.45);
  --lgn-input-text: #f8fafc;
  --lgn-input-ph: #7c8aa5;
  --lgn-focus: rgba(96,165,250,.45);
  --lgn-btn-a: #1d4ed8;
  --lgn-btn-b: #38bdf8;
  --lgn-btn-shadow: 0 0 34px rgba(56,189,248,.45), 0 10px 28px rgba(0,0,0,.4);
  --lgn-seg-bg: rgba(10,25,55,.7);
  --lgn-seg-border: rgba(59,130,246,.35);
  --lgn-seg-active: rgba(59,130,246,.35);
  --lgn-seg-text: #e2e8f0;
  --lgn-w1: rgba(37,99,235,.35);
  --lgn-w2: rgba(29,78,216,.45);
  --lgn-w3: rgba(56,189,248,.95);
  --lgn-bar: rgba(59,130,246,.28);
  --lgn-err: #fca5a5;
  --lgn-eye: #a5b4cf;
  --lgn-glow: 1;
}

/* Háttér: hullámok + oszlopdiagram (a Supply OS grafikájának két motívuma). */
#login-overlay .lgn-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#login-overlay .lgn-wave { position: absolute; left: -2%; right: -2%; bottom: 0; width: 104%; height: 46vh; min-height: 220px; }
#login-overlay .lgn-w1 { fill: var(--lgn-w1); }
#login-overlay .lgn-w2 { fill: var(--lgn-w2); }
#login-overlay .lgn-w3 { fill: none; stroke: var(--lgn-w3); stroke-width: 3; stroke-linecap: round; }
#login-overlay .lgn-wave-glow { position: absolute; left: -2%; right: -2%; bottom: 0; width: 104%; height: 46vh; min-height: 220px; filter: blur(18px); opacity: calc(var(--lgn-glow) * .9); }
#login-overlay .lgn-bars { position: absolute; right: 7%; bottom: 10vh; display: flex; align-items: flex-end; gap: 14px; height: 32vh; max-height: 300px; }
#login-overlay .lgn-bars i { display: block; width: 46px; background: var(--lgn-bar); border-radius: 10px 10px 0 0; }
#login-overlay .lgn-bars i:nth-child(1) { height: 28%; }
#login-overlay .lgn-bars i:nth-child(2) { height: 48%; }
#login-overlay .lgn-bars i:nth-child(3) { height: 66%; }
#login-overlay .lgn-bars i:nth-child(4) { height: 100%; }

/* Nyelvváltó -- jobb felső sarok, szegmentált pill, zászlóval. */
#login-overlay .lgn-lang { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: inline-flex; padding: 4px; border-radius: 14px; background: var(--lgn-seg-bg); border: 1px solid var(--lgn-seg-border); backdrop-filter: blur(8px); z-index: 2; }
#login-overlay .lgn-lang-btn { appearance: none; border: 0; background: transparent; color: var(--lgn-seg-text); font: 600 15px/1 inherit; padding: 9px 14px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; letter-spacing: .02em; }
#login-overlay .lgn-lang-btn.is-active { background: var(--lgn-seg-active); }
#login-overlay .lgn-lang-btn:focus-visible { outline: 2px solid var(--lgn-brand-b); outline-offset: 2px; }
#login-overlay .lgn-flag { font-size: 16px; line-height: 1; }

/* Tartalom */
#login-overlay .lgn-wrap { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 auto; text-align: center; padding-top: 8vh; }
#login-overlay .lgn-title { margin: 0 0 14px; font-size: clamp(30px, 6vw, 46px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--lgn-title); }
#login-overlay .lgn-brand { background: linear-gradient(90deg, var(--lgn-brand-a), var(--lgn-brand-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#login-overlay .lgn-sub { margin: 0 0 28px; font-size: clamp(16px, 2.6vw, 20px); line-height: 1.45; color: var(--lgn-sub); }
#login-overlay .lgn-card { text-align: left; padding: 26px 24px 24px; border-radius: 20px; background: var(--lgn-card); border: 1px solid var(--lgn-card-border); box-shadow: var(--lgn-card-shadow); backdrop-filter: blur(10px); }
#login-overlay .lgn-label { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--lgn-label); }
#login-overlay .lgn-field { margin-bottom: 16px; }
#login-overlay .lgn-input { display: block; width: 100%; height: 52px; padding: 0 16px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--lgn-input-border); background: var(--lgn-input-bg); color: var(--lgn-input-text); font: 400 16px/1 inherit; outline: none; transition: box-shadow .15s, border-color .15s; }
#login-overlay .lgn-input::placeholder { color: var(--lgn-input-ph); }
#login-overlay .lgn-input:focus { border-color: var(--lgn-brand-b); box-shadow: 0 0 0 4px var(--lgn-focus); }
#login-overlay .lgn-pw { position: relative; }
#login-overlay .lgn-pw .lgn-input { padding-right: 52px; }
#login-overlay .lgn-eye { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--lgn-eye); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#login-overlay .lgn-eye:hover { color: var(--lgn-brand-b); }
#login-overlay .lgn-eye:focus-visible { outline: 2px solid var(--lgn-brand-b); }
#login-overlay .lgn-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; margin-top: 6px; border: 0; border-radius: 14px; cursor: pointer; color: #fff; font: 700 18px/1 inherit; letter-spacing: .01em; background: linear-gradient(90deg, var(--lgn-btn-a), var(--lgn-btn-b)); box-shadow: var(--lgn-btn-shadow); transition: transform .12s, filter .12s; }
#login-overlay .lgn-btn:hover { filter: brightness(1.06); }
#login-overlay .lgn-btn:active { transform: translateY(1px); }
#login-overlay .lgn-btn:focus-visible { outline: 3px solid var(--lgn-focus); outline-offset: 2px; }
#login-overlay .lgn-btn svg { width: 20px; height: 20px; }
#login-overlay .lgn-err { color: var(--lgn-err); margin-top: 12px; font-size: 14px; }

@media (max-width: 480px) {
  #login-overlay .lgn-wrap { padding-top: 12vh; }
  #login-overlay .lgn-card { padding: 22px 18px 20px; border-radius: 18px; }
  #login-overlay .lgn-bars { right: 4%; gap: 10px; }
  #login-overlay .lgn-bars i { width: 34px; }
  #login-overlay .lgn-lang-btn { padding: 8px 11px; font-size: 14px; }
}
@media (max-height: 640px) {
  #login-overlay .lgn-wrap { padding-top: 2vh; }
  #login-overlay .lgn-sub { margin-bottom: 18px; }
}