/* AIOX – přihlašovací stránka v orbit vzhledu s „liquid glass“.
   Loaded last in login.html, so it wins over the older login rules in style.css / orbit.css without editing them.
   Same tokens as vzhled.css (--gl-*) and the same default „Základní“ background, copied here because vzhled.css
   is only loaded by the app. Theme comes from theme.js (data-theme on <html>), like in the app. */

:root[data-orbit] body.login-page {
  /* orbit dark palette (style.css re-defines --ink/--panel on .login-page, this puts the orbit ones back) */
  --ground:#263a42; --panel:#242c33; --panel-2:#303a41; --line:#48565e; --line-soft:#35474f;
  --ink:#f0f5f6; --ink-2:#d1dce0; --ink-3:#afbec5; --miss:#ff8c95; --in:#62cf97; --in-ink:#62cf97;
  --primary:#e87918; --primary-soft:#e8791826; --focus:#90d8e2;
  /* glass, same values as vzhled.css */
  --gl-k:6%;
  --gl-blur:blur(26px) saturate(170%) brightness(.84);
  --gl-sheen:linear-gradient(180deg,#ffffff21,#ffffff0f);
  --gl-edge:#ffffff12;
  --gl-hi:inset 1px 1px 0 -.25px #ffffffb3,inset -1px -1px 0 -.25px #ffffff4d,inset 0 0 0 1px #ffffff2e;
  --gl-drop:0 0 0 .5px #0000002e,0 24px 48px -30px #000000a6;
  --gl-chip:#ffffff0d; --gl-chip-on:#ffffff1f;
  --gl-field:color-mix(in srgb,#141b20 46%,transparent);
  --u:1vh;
  color-scheme:dark;
  min-height:100vh; min-height:100dvh; margin:0; padding:0;
  display:block; background:var(--ground)!important; color:var(--ink)!important;
  font:400 15px/1.5 var(--body,Inter,system-ui,sans-serif);
  -webkit-font-smoothing:antialiased;
}
:root[data-orbit][data-theme="light"] body.login-page {
  --ground:#edf1f0; --panel:#fff; --panel-2:#e4ecee; --line:#bac9cd; --line-soft:#d7e0e2;
  --ink:#20323a; --ink-2:#344c58; --ink-3:#526a74; --miss:#b33342; --in:#0c7b42; --in-ink:#0c7b42;
  --focus:#17636c;
  --gl-k:22%; --gl-blur:blur(26px) saturate(170%) brightness(1.08);
  --gl-sheen:linear-gradient(180deg,#ffffff59,#ffffff26);
  --gl-edge:#ffffff59;
  --gl-hi:inset 1px 1px 0 -.25px #fff,inset -1px -1px 0 -.25px #ffffffb3,inset 0 0 0 1px #ffffff80;
  --gl-drop:0 0 0 .5px #1d3a4426,0 24px 48px -30px #1d3a4459;
  --gl-chip:#ffffff9e; --gl-chip-on:#ffffffeb;
  --gl-field:#ffffffc7;
  color-scheme:light;
}

/* ---------- background „Tekuté sklo“ (the app default, see vzhled.css): a few big soft colour fields ---------- */
:root[data-orbit] body.login-page::before,
:root[data-orbit] body.login-page::after {
  content:''!important; display:block!important; position:fixed!important; inset:0!important; z-index:-1!important;
  pointer-events:none!important; opacity:1!important; filter:none!important;
}
:root[data-orbit] body.login-page::before {
  background:
    radial-gradient(90% 80% at 0% 0%,#1b7f93 0%,#1b7f9300 62%),
    radial-gradient(90% 85% at 100% 100%,#2a3f9e 0%,#2a3f9e00 62%),
    linear-gradient(155deg,#0f2a36 0%,#122039 50%,#181a3a 100%)!important;
}
:root[data-orbit] body.login-page::after {
  inset:-10%!important;
  background:
    radial-gradient(55% 50% at 88% 6%,#f26a1fb3,#f26a1f40 40%,#f26a1f00 75%),
    radial-gradient(60% 55% at 10% 95%,#5b43c766,#5b43c700 72%)!important;
  animation:lgDrift 30s ease-in-out infinite alternate;
}
:root[data-orbit][data-theme="light"] body.login-page::before {
  background:
    radial-gradient(90% 80% at 0% 0%,#9fdbe4 0%,#9fdbe400 62%),
    radial-gradient(90% 85% at 100% 100%,#b9c3f5 0%,#b9c3f500 62%),
    linear-gradient(155deg,#e9f5f6 0%,#eef1f8 50%,#f1eef8 100%)!important;
}
:root[data-orbit][data-theme="light"] body.login-page::after {
  background:
    radial-gradient(55% 50% at 88% 6%,#ffb27ab3,#ffb27a40 40%,#ffb27a00 75%),
    radial-gradient(60% 55% at 10% 95%,#c7b8f580,#c7b8f500 72%)!important;
}
@keyframes lgDrift {from {transform:translate3d(0,0,0) scale(1);} to {transform:translate3d(-2.5%,2%,0) scale(1.06);}}
@media (prefers-reduced-motion:reduce) {:root[data-orbit] body.login-page::after {animation:none;}}

/* ---------- layout ---------- */
.lg {
  min-height:100vh; min-height:100dvh; box-sizing:border-box;
  display:grid; justify-items:center; align-content:center; gap:18px;
  padding:max(28px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));
}

/* the glass card */
.lg-card {
  position:relative; box-sizing:border-box; width:min(420px,100%);
  padding:74px 32px 24px; border-radius:28px;
  background:var(--gl-sheen),color-mix(in srgb,var(--panel) var(--gl-k),transparent);
  -webkit-backdrop-filter:var(--gl-blur); backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-edge); box-shadow:var(--gl-hi),var(--gl-drop);
}
/* Chromium: the card's rim bends the background like thick glass (the lens comes from theme.js in --lg) */
:root[data-refract] .lg-card[data-lg] {-webkit-backdrop-filter:var(--gl-blur) var(--lg); backdrop-filter:var(--gl-blur) var(--lg);}
/* text on clear glass (dark): a soft shadow, like iOS widgets */
:root[data-orbit]:not([data-theme="light"]) .lg-card {text-shadow:0 1px 2px #00000059;}
/* no backdrop blur (older browsers) or less transparency asked for: the same card, solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root[data-orbit] body.login-page {--gl-k:100%;}
}
@media (prefers-reduced-transparency:reduce) {
  :root[data-orbit] body.login-page {--gl-k:100%;}
  .lg-card {-webkit-backdrop-filter:none; backdrop-filter:none;}
}

/* language: small segmented switch in the corner of the card */
:root[data-orbit] body.login-page .login-lang {
  position:absolute; top:16px; right:16px; margin:0; display:flex; gap:2px; padding:3px;
  border-radius:999px; background:var(--gl-chip); border:1px solid var(--gl-edge);
}
:root[data-orbit] body.login-page .login-lang button {
  min-height:30px; padding:4px 11px; border:0; border-radius:999px; background:transparent!important;
  color:var(--ink-3); font:600 12px/1 var(--body,system-ui); cursor:pointer; transition:background-color .15s ease,color .15s ease;
}
:root[data-orbit] body.login-page .login-lang button:hover {color:var(--ink);}
:root[data-orbit][lang="cs"] body.login-page .login-lang [data-lang-set="cs"],
:root[data-orbit][lang="uk"] body.login-page .login-lang [data-lang-set="uk"] {
  background:var(--gl-chip-on)!important; color:var(--ink); border:0; box-shadow:0 1px 2px #0000001f;
}

/* brand: new logo, name, tagline */
.lg-brand {display:grid; justify-items:center; text-align:center; gap:0; margin:0 0 22px;}
.lg-logo {width:68px; height:68px; display:block; border-radius:15px; box-shadow:0 14px 28px -14px #02090ecc,0 0 0 1px #ffffff14;}
:root[data-theme="light"] .lg-logo {box-shadow:0 14px 26px -14px #1d3a4499,0 0 0 1px #1d3a441f;}
.lg-name {margin:14px 0 0; font:650 22px/1 var(--body,system-ui); letter-spacing:.16em; padding-left:.16em; color:var(--ink);}
:root[data-orbit] body.login-page .login-tag {margin:8px 0 0; font:500 14px/1.4 var(--body,system-ui); color:var(--ink-3);}

/* heading */
:root[data-orbit] body.login-page .lg-card h1 {
  margin:0; padding-top:20px; border-top:1px solid var(--gl-edge);
  font:650 22px/1.2 var(--body,system-ui); letter-spacing:-.02em; color:var(--ink);
}
:root[data-orbit] body.login-page .lg-hint {margin:6px 0 0; font-size:14px; color:var(--ink-3);}

/* forms */
:root[data-orbit] body.login-page .lg-card form {display:grid; gap:14px; margin:18px 0 0;}
:root[data-orbit] body.login-page .lg-card form[hidden],
:root[data-orbit] body.login-page .lg-card [hidden] {display:none!important;}
:root[data-orbit] body.login-page .lg-card .field {display:grid; gap:7px; font:600 13px/1.3 var(--body,system-ui); color:var(--ink-2);}
:root[data-orbit] body.login-page .lg-card .input {
  box-sizing:border-box; width:100%; height:48px; padding:0 14px; margin:0;
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent)!important; border-radius:14px!important;
  background:var(--gl-field)!important; color:var(--ink)!important;
  font:500 16px/1.2 var(--body,system-ui); /* 16px: phones do not zoom into the field */
  box-shadow:none!important; outline:none; transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
:root[data-orbit] body.login-page .lg-card .input::placeholder {color:var(--ink-3); opacity:.75;}
:root[data-orbit] body.login-page .lg-card .input:hover {border-color:var(--ink-3)!important;}
:root[data-orbit] body.login-page .lg-card .input:focus {
  border-color:var(--focus)!important; box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 26%,transparent)!important; outline:none;
}
:root[data-orbit] body.login-page .lg-card .input.mono {font-family:var(--mono,ui-monospace,monospace);}
:root[data-orbit] body.login-page .lg-card .tf-code {height:56px; text-align:center; letter-spacing:.45em; padding-left:.45em; font-size:24px; font-weight:600;}
/* browser autofill keeps the glass look readable */
:root[data-orbit] body.login-page .lg-card .input:-webkit-autofill {-webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 40px var(--panel) inset!important; caret-color:var(--ink);}

/* password + eye */
:root[data-orbit] body.login-page .pw-wrap {position:relative; display:block;}
:root[data-orbit] body.login-page .pw-wrap .input {padding-right:50px;}
:root[data-orbit] body.login-page .pw-eye {
  position:absolute; right:4px; top:50%; transform:translateY(-50%); width:42px; height:40px; padding:0;
  display:grid; place-items:center; border:0; border-radius:11px; background:transparent; color:var(--ink-3);
  opacity:1; cursor:pointer; transition:color .15s ease,background-color .15s ease;
}
:root[data-orbit] body.login-page .pw-eye:hover {color:var(--ink); background:var(--gl-chip);}
:root[data-orbit] body.login-page .pw-eye svg {width:20px; height:20px; display:block;}
:root[data-orbit] body.login-page .pw-eye .eye-off {display:none;}
:root[data-orbit] body.login-page .pw-wrap:has(input[type="text"]) .eye-on {display:none;}
:root[data-orbit] body.login-page .pw-wrap:has(input[type="text"]) .eye-off {display:block;}

/* buttons */
:root[data-orbit] body.login-page .lg-card .btn {
  box-sizing:border-box; width:100%; min-height:50px; margin:4px 0 0; padding:0 18px; border-radius:14px!important;
  font:600 15px/1 var(--body,system-ui); letter-spacing:.005em; cursor:pointer;
  background:var(--gl-chip-on)!important; color:var(--ink)!important; border:1px solid var(--gl-edge)!important;
  transition:background-color .15s ease,transform .1s ease,box-shadow .15s ease,opacity .15s ease;
}
:root[data-orbit] body.login-page .lg-card .btn.btn-primary {
  background:#e87918!important; background-image:linear-gradient(180deg,#ffffff1f,#ffffff00 55%)!important;
  color:#17232b!important; border:1px solid #f2a55f!important;
  box-shadow:0 12px 26px -14px #e87918cc,inset 0 1px 0 #ffffff40!important;
}
:root[data-orbit] body.login-page .lg-card .btn.btn-primary:hover:not(:disabled) {background-color:#f48c31!important;}
:root[data-orbit] body.login-page .lg-card .btn:active:not(:disabled) {transform:translateY(1px);}
:root[data-orbit] body.login-page .lg-card .btn:disabled {opacity:.62; cursor:progress;}

/* focus: one clear ring everywhere (keyboard) */
:root[data-orbit] body.login-page :is(.btn,.pw-eye,.linkish,.login-lang button,a,input[type="checkbox"]):focus-visible {
  outline:2px solid var(--focus)!important; outline-offset:3px;
}

/* messages */
:root[data-orbit] body.login-page .lg-card .err {
  margin:0; min-height:0; padding:10px 12px; border-radius:12px;
  font:600 13.5px/1.4 var(--body,system-ui); color:var(--miss);
  background:color-mix(in srgb,currentColor 12%,transparent); /* follows the text: red error, green „Heslo změněno“ */
}
:root[data-orbit] body.login-page .lg-card .err:empty {display:none;}
:root[data-orbit] body.login-page .tf-msg {
  margin:0; padding:12px 14px; border-radius:14px; font-size:14px; line-height:1.45; color:var(--ink);
  background:color-mix(in srgb,var(--primary) 13%,transparent); border:1px solid color-mix(in srgb,var(--primary) 32%,transparent);
}
:root[data-orbit] body.login-page #rmsg {margin:0; font-size:14px; color:var(--ink-3);}
:root[data-orbit] body.login-page #rstep2 {display:grid; gap:14px;}
:root[data-orbit] body.login-page .check-line {display:flex; align-items:center; gap:10px; min-height:40px; font-size:14px; color:var(--ink-2); cursor:pointer;}
:root[data-orbit] body.login-page .check-line input {width:18px; height:18px; margin:0; accent-color:var(--primary);}

/* links */
:root[data-orbit] body.login-page .login-forgot {margin:8px 0 0; text-align:center; font-size:14px;}
:root[data-orbit] body.login-page .lg-card form .login-forgot {margin:0;}
:root[data-orbit] body.login-page .linkish {
  display:inline-block; min-height:40px; padding:10px 8px; border:0; border-radius:10px; background:none;
  font:500 14px/20px var(--body,system-ui); color:var(--ink-2); text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--ink-2) 45%,transparent);
  text-underline-offset:3px; cursor:pointer;
}
:root[data-orbit] body.login-page .linkish:hover {color:var(--ink); text-decoration-color:currentColor;}
:root[data-orbit] body.login-page .login-foot {
  margin:14px 0 0; padding-top:14px; border-top:1px solid var(--gl-edge);
  text-align:center; font-size:12.5px; line-height:1.5; color:var(--ink-3);
}
:root[data-orbit] body.login-page .login-foot a {color:var(--ink-2); text-underline-offset:3px;}

/* what AIOX does: small glass chips under the card (texts set in Nastavení → Přihlašovací stránka) */
:root[data-orbit] body.login-page .login-points {
  list-style:none; margin:0; padding:0; max-width:980px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px;
}
:root[data-orbit] body.login-page .login-points li {
  display:flex; align-items:center; gap:9px; padding:7px 14px 7px 8px; border-radius:999px;
  font:500 13px/1.3 var(--body,system-ui); color:var(--ink-2);
  background:color-mix(in srgb,var(--panel) 46%,transparent); border:1px solid var(--gl-edge);
  -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
}
:root[data-orbit] body.login-page .login-points i {
  width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%;
  font:800 11px/1 var(--body,system-ui); font-style:normal; color:#17232b; background:#e87918;
}

/* phones */
@media (max-width:520px) {
  .lg {padding-top:max(16px,env(safe-area-inset-top)); padding-bottom:max(16px,env(safe-area-inset-bottom)); gap:14px;}
  .lg-card {padding:66px 20px 18px; border-radius:24px;}
  :root[data-orbit] body.login-page .login-lang {top:12px; right:12px;}
  .lg-logo {width:60px; height:60px; border-radius:13px;}
  .lg-name {font-size:20px; margin-top:12px;}
  .lg-brand {margin-bottom:18px;}
  :root[data-orbit] body.login-page .lg-card h1 {font-size:20px; padding-top:16px;}
  :root[data-orbit] body.login-page .login-points {display:none;}
}
@media (max-height:640px) {:root[data-orbit] body.login-page .login-points {display:none;}}
/* plain clear glass like the app: no rim line, no frame, no gloss gradient */
:root[data-orbit] body.login-page {--gl-sheen:linear-gradient(#ffffff14,#ffffff14); --gl-edge:transparent; --gl-hi:0 0 #0000; --gl-drop:0 24px 48px -30px #000000a6;}
:root[data-orbit][data-theme="light"] body.login-page {--gl-sheen:linear-gradient(#ffffff4d,#ffffff4d); --gl-edge:transparent; --gl-hi:0 0 #0000; --gl-drop:0 24px 48px -30px #1d3a4459;}