/* =============================================================================
   Přihlašovací stránka NEVARA (app/Views/auth/login.php, assets/js/login.js)
   Samostatný stylopis - stránka nenačítá app.css. Dvousloupcové rozložení od ~700 px,
   pod ním jeden sloupec. Animuje se hlavně transform a opacity.
   ============================================================================= */
:root {
    --lg-navy: #101E3B;
    --lg-blue: #4565F5;
    --lg-blue-dark: #3652dc;
    --lg-panel: #F5F7FC;
    --lg-text: #101E3B;
    --lg-muted: #6b7690;
    --lg-border: #e1e6f1;
    --lg-danger: #d6303f;
    --lg-danger-soft: #fdeeee;
    --lg-ok: #1fa971;
    --lg-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.lg-body { margin: 0; font-family: var(--lg-font); color: var(--lg-text); background: var(--lg-panel); -webkit-font-smoothing: antialiased; }
.lg-body :where(h1, h2, p) { margin: 0; }

.lg-page { display: grid; grid-template-columns: 51fr 49fr; min-height: 100vh; min-height: 100dvh; }

/* ---- levá tmavá část ------------------------------------------------------ */
.lg-brand {
    position: relative; overflow: hidden; background: var(--lg-navy); color: #fff;
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    padding: clamp(32px, 4.2vw, 80px) clamp(32px, 5.6vw, 130px);
}
.lg-brand::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 55% at 6% 100%, rgba(69, 101, 245, .42) 0%, rgba(69, 101, 245, 0) 70%),
        radial-gradient(45% 40% at 100% 0%, rgba(69, 101, 245, .16) 0%, rgba(69, 101, 245, 0) 70%);
}
.lg-brand > * { position: relative; }
.lg-logo-link { display: inline-block; align-self: flex-start; }
.lg-logo { display: block; height: clamp(38px, 3.4vw, 52px); width: auto; }
.lg-brand-body { max-width: 640px; }
.lg-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #8d9bf0; margin-bottom: 26px; }
.lg-headline { font-size: clamp(34px, 3.7vw, 66px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; margin-bottom: 26px; }
.lg-lead { font-size: clamp(15px, 1.15vw, 19px); line-height: 1.65; color: #aeb9d6; max-width: 31em; }

.lg-deco {
    width: min(100%, 560px); padding: 22px 26px 24px; border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 50px rgba(3, 8, 24, .35);
    transform: rotate(-3deg); transform-origin: left bottom;
}
.lg-deco-head { display: flex; align-items: center; gap: 14px; }
.lg-deco-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(69, 101, 245, .25); color: #b8c4ff; }
.lg-deco-title { font-size: 16px; font-weight: 500; color: #e6ebfa; }
.lg-bars { display: flex; align-items: flex-end; gap: 12px; height: 84px; margin-top: 20px; }
.lg-bars i { flex: 1; height: var(--h); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #5a73d8, #3f55a6); opacity: .85; transform-origin: bottom; animation: lg-bar 700ms cubic-bezier(.16, 1, .3, 1) both; }
.lg-bars i:nth-child(2) { animation-delay: 60ms; } .lg-bars i:nth-child(3) { animation-delay: 120ms; } .lg-bars i:nth-child(4) { animation-delay: 180ms; }
.lg-bars i:nth-child(5) { animation-delay: 240ms; } .lg-bars i:nth-child(6) { animation-delay: 300ms; } .lg-bars i:nth-child(7) { animation-delay: 360ms; }
.lg-bars i.is-hi { background: linear-gradient(180deg, #7b95ff, #5a78fb); opacity: 1; }
@keyframes lg-bar { from { transform: scaleY(.2); opacity: 0; } to { transform: none; } }

/* ---- pravá světlá část ---------------------------------------------------- */
.lg-panel { display: flex; align-items: center; justify-content: center; padding: clamp(32px, 4vw, 80px) clamp(24px, 4vw, 72px); background: var(--lg-panel); }
.lg-wrap { width: 100%; max-width: 350px; }
.lg-stage { display: grid; }
.lg-stage > * { grid-area: 1 / 1; min-width: 0; }

.lg-title { font-size: clamp(32px, 2.6vw, 42px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 14px; }
.lg-sub { font-size: 16px; line-height: 1.5; color: var(--lg-muted); margin-bottom: 40px; }

.lg-field { margin-bottom: 24px; }
.lg-label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.lg-control { position: relative; }
.lg-control.is-shake { animation: lg-shake 420ms cubic-bezier(.36, .07, .19, .97); }
@keyframes lg-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}
.lg-input {
    display: block; width: 100%; height: 52px; padding: 0 18px; font: inherit; font-size: 16px; color: var(--lg-text);
    background: #fff; border: 1px solid var(--lg-border); border-radius: 11px; outline: none;
    box-shadow: 0 1px 2px rgba(16, 30, 59, .04); -webkit-appearance: none; appearance: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.lg-input::placeholder { color: #8b95ab; }
.lg-input:hover { border-color: #cdd5e6; }
.lg-input:focus { border-color: var(--lg-blue); box-shadow: 0 0 0 4px rgba(69, 101, 245, .16); }
.lg-input-pw { padding-right: 54px; }
.lg-input[aria-invalid="true"] { border-color: var(--lg-danger); background: #fffafa; box-shadow: 0 0 0 4px rgba(214, 48, 63, .10); }
.lg-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(214, 48, 63, .20); }

.lg-eye {
    position: absolute; top: 50%; right: 8px; width: 40px; height: 40px; margin-top: -20px; display: grid; place-items: center;
    background: none; border: 0; border-radius: 9px; color: #5d6985; cursor: pointer; transition: color 140ms ease, background-color 140ms ease;
}
.lg-eye:hover { color: var(--lg-text); background: rgba(16, 30, 59, .05); }
.lg-eye:focus-visible { outline: 2px solid var(--lg-blue); outline-offset: 1px; }
.lg-eye .lg-eye-off { display: none; }
.lg-eye[aria-pressed="true"] .lg-eye-on { display: none; }
.lg-eye[aria-pressed="true"] .lg-eye-off { display: block; }

/* Chybová bublina - součást rozložení (nepřekrývá další prvky), plynule se vysune */
.lg-err { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px); visibility: hidden; transition: grid-template-rows 260ms cubic-bezier(.16, 1, .3, 1), opacity 200ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 260ms; }
.lg-err.is-open { grid-template-rows: 1fr; opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.lg-err-in { overflow: hidden; min-height: 0; padding-top: 10px; }
.lg-err-bubble { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 15px; line-height: 1.4; color: var(--lg-danger); background: var(--lg-danger-soft); border: 1px solid #f6cccf; }
.lg-err-bubble::before { content: ''; position: absolute; top: -6px; left: 26px; width: 10px; height: 10px; background: var(--lg-danger-soft); border-left: 1px solid #f6cccf; border-top: 1px solid #f6cccf; transform: rotate(45deg); border-top-left-radius: 2px; }
.lg-err-ico { flex: none; }

.lg-submit {
    display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; margin-top: 8px;
    font: inherit; font-size: 16px; font-weight: 600; color: #fff; background: var(--lg-blue); border: 0; border-radius: 11px; cursor: pointer;
    box-shadow: 0 12px 26px rgba(69, 101, 245, .32);
    transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms ease, background-color 160ms ease;
}
.lg-submit:hover { transform: translateY(-2px); background: #3d5ef0; box-shadow: 0 16px 32px rgba(69, 101, 245, .4); }
.lg-submit:active { transform: translateY(0); }
.lg-submit:focus-visible, .lg-retry:focus-visible { outline: 3px solid rgba(69, 101, 245, .45); outline-offset: 3px; }
.lg-submit svg { transition: transform 180ms ease; }
.lg-submit:hover svg { transform: translateX(3px); }

/* skrytí formuláře při animaci - výška zůstává (grid), fokus na prvcích je zakázán přes `inert` */
.lg-form-view { transition: opacity 220ms ease; }
.lg-stage.is-anim .lg-form-view { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- animační vrstva: klíč a zámek ---------------------------------------- */
.lg-anim {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    background: var(--lg-panel); opacity: 0; visibility: hidden; pointer-events: none; outline: none;
    transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.lg-stage.is-anim .lg-anim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.lg-lock { position: relative; width: min(100%, 250px); aspect-ratio: 240 / 220; margin-bottom: 8px; }
.lg-lock-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.lg-lock-svg { transform: scale(.88); opacity: 0; transition: transform 380ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease; }
.lg-stage.is-anim .lg-lock-svg { transform: none; opacity: 1; }

.lg-lock-glow { position: absolute; left: 50%; top: 52%; width: 86%; aspect-ratio: 1; margin: 0; transform: translate(-50%, -50%); pointer-events: none; }
.lg-lock-glow i { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transform: scale(.9); transition: opacity 400ms ease, transform 700ms cubic-bezier(.16, 1, .3, 1); }
.lg-lock-glow .g-base { background: radial-gradient(circle, rgba(69, 101, 245, .28) 0%, rgba(69, 101, 245, 0) 68%); }
.lg-lock-glow .g-fail { background: radial-gradient(circle, rgba(214, 48, 63, .30) 0%, rgba(214, 48, 63, 0) 68%); }
.lg-lock-glow .g-ok { background: radial-gradient(circle, rgba(31, 169, 113, .34) 0%, rgba(31, 169, 113, 0) 68%); }
.lg-stage.is-anim .lg-lock-glow .g-base { opacity: 1; transform: none; }

/* tělo zámku - tři vrstvy s prolínáním barev */
.lk-body { transition: opacity 380ms ease; }
.lk-body-fail, .lk-body-ok { opacity: 0; }
.lk-lock-g, .lk-shackle, .lk-key { transform-box: view-box; }

/* třmen: otáčí se kolem levé nohy (84, 112) */
.lk-shackle { transform-origin: 84px 112px; transition: transform 620ms cubic-bezier(.34, 1.3, .5, 1); }
/* klíč: počátek = špička, otáčí se kolem klíčové dírky (hrot je o 12 px za ořezem) */
.lk-key { transform: translateX(190px); opacity: 0; transform-origin: 14px 0; }

/* stavy (data-state na .lg-anim) */
.lg-anim[data-state="idle"] .lk-key { transform: translateX(190px); }
.lg-anim[data-state="enter"] .lk-key { transform: translateX(190px); opacity: 0; transition: none; }
.lg-anim[data-state="insert"] .lk-key,
.lg-anim[data-state="turn"] .lk-key,
.lg-anim[data-state="fail"] .lk-key,
.lg-anim[data-state="ok"] .lk-key { opacity: 1; }
.lg-anim[data-state="insert"] .lk-key { transform: translateX(-12px); transition: transform 700ms cubic-bezier(.22, 1, .36, 1), opacity 160ms ease; }
.lg-anim[data-state="turn"] .lk-key { transform: translateX(-12px) rotate(-40deg) scaleY(.94); transition: transform 500ms cubic-bezier(.45, 0, .2, 1); }
/* chyba: klíč lehce couvne, zámek zčervená a zatřese se, třmen zůstává zavřený */
.lg-anim[data-state="fail"] .lk-key { transform: translateX(-4px) rotate(-12deg); transition: transform 380ms cubic-bezier(.22, 1, .36, 1); }
.lg-anim[data-state="fail"] .lk-body-base { opacity: 0; }
.lg-anim[data-state="fail"] .lk-body-fail { opacity: 1; }
.lg-anim[data-state="fail"] .g-base { opacity: 0; }
.lg-anim[data-state="fail"] .g-fail { opacity: 1; transform: none; }
.lg-anim[data-state="fail"] .lk-lock-g { animation: lk-shake 460ms cubic-bezier(.36, .07, .19, .97); }
@keyframes lk-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}
/* chyba spojení/serveru: neutrální zámek, klíč se vrací pryč */
.lg-anim[data-state="error"] .lk-key { transform: translateX(190px); opacity: 0; transition: transform 460ms cubic-bezier(.4, 0, .2, 1), opacity 360ms ease; }
.lg-anim[data-state="error"] .lk-body-base { opacity: 1; }
/* úspěch: zámek zezelená, třmen se zvedne a pootočí, klíč se vysune a zmizí, světelný kruh expanduje */
.lg-anim[data-state="ok"] .lk-body-base { opacity: 0; }
.lg-anim[data-state="ok"] .lk-body-ok { opacity: 1; }
.lg-anim[data-state="ok"] .lk-shackle { transform: translateY(-17px) rotate(-30deg); }
.lg-anim[data-state="ok"] .lk-key { transform: translateX(200px) rotate(0deg); opacity: 0; transition: transform 520ms cubic-bezier(.5, 0, .75, .4) 520ms, opacity 300ms ease 700ms; }
.lg-anim[data-state="ok"] .g-base { opacity: 0; }
.lg-anim[data-state="ok"] .g-ok { opacity: 1; transform: scale(1.5); transition: opacity 500ms ease, transform 1100ms cubic-bezier(.16, 1, .3, 1); }

.lg-anim-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px; transition: color 200ms ease; }
.lg-anim-msg { font-size: 15.5px; line-height: 1.55; color: var(--lg-muted); max-width: 320px; min-height: 1.55em; }
.lg-anim[data-state="fail"] .lg-anim-title { color: var(--lg-danger); }
.lg-anim[data-state="ok"] .lg-anim-title { color: #12875b; }
.lg-retry {
    margin-top: 24px; min-width: 190px; height: 50px; padding: 0 26px; font: inherit; font-size: 16px; font-weight: 600; color: #fff;
    background: var(--lg-blue); border: 0; border-radius: 11px; cursor: pointer; box-shadow: 0 10px 22px rgba(69, 101, 245, .28);
    transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms ease;
}
.lg-retry:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(69, 101, 245, .38); }
.lg-retry[hidden] { display: none; }

.lg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- úzké obrazovky: jeden sloupec ---------------------------------------- */
@media (max-width: 699.98px) {
    .lg-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .lg-brand { gap: 22px; padding: 26px 24px 30px; justify-content: flex-start; }
    .lg-eyebrow, .lg-lead, .lg-deco, .lg-br { display: none; }
    .lg-headline { font-size: clamp(26px, 8vw, 34px); margin: 0; }
    .lg-logo { height: 34px; }
    .lg-panel { align-items: flex-start; padding: 32px 24px 48px; }
    .lg-title { font-size: 30px; }
    .lg-sub { margin-bottom: 30px; }
    .lg-lock { width: min(100%, 220px); }
}
@media (max-width: 359.98px) {
    .lg-brand, .lg-panel { padding-left: 18px; padding-right: 18px; }
}
/* nízké obrazovky (např. mobil na šířku, otevřená klávesnice): žádné svislé centrování navíc */
@media (max-height: 560px) {
    .lg-panel { align-items: flex-start; }
}

/* ---- omezený pohyb: bez zatřesení a prostorových pohybů, stavy zůstávají rozlišitelné -------- */
@media (prefers-reduced-motion: reduce) {
    .lg-control.is-shake, .lg-anim[data-state="fail"] .lk-lock-g, .lg-bars i { animation: none; }
    .lg-submit, .lg-retry, .lg-submit svg, .lg-lock-svg, .lg-lock-glow i, .lk-shackle, .lk-key, .lg-err, .lg-form-view, .lg-anim { transition-duration: 1ms !important; transition-delay: 0s !important; }
    .lg-submit:hover, .lg-retry:hover { transform: none; }
    .lg-err { transform: none; }
    .lg-lock-svg { transform: none; }
    .lg-anim[data-state="ok"] .g-ok { transform: none; }
    .lg-anim[data-state="ok"] .lk-shackle { transform: translateY(-17px); }
    .lg-anim[data-state="turn"] .lk-key { transform: translateX(-12px); }
}