/* ======================================================================
   PDVS prisijungimo / autentifikacijos „langas“ — VIENINTELĖ šių puslapių CSS apibrėžtis.
   Apvalkalas: dashboard/templates/dashboard/auth/_auth_base.html. Jį naudoja prisijungimas, slaptažodžio
   atkūrimas / keitimas, 2FA žingsniai, užrakinta paskyra, užblokuotas IP ir kiosko prisijungimas —
   puslapiuose lieka tik jų turinys, be inline CSS.

   Tai savarankiški puslapiai (be šoninio meniu / base.html), todėl čia yra ir tokenai, ir komponentai.
   Prekės ženklo spalvos — --primary-color / --primary-hover (įterpiami <style> bloke iš site_settings).
   Paviršių tokenų vardai sutampa su base.html / pdvs-ui.css (--card-bg, --content-bg, --border-color …);
   tamsi tema įjungiama <html data-theme="dark"> (iš gvs_theme slapuko, žr. context_processors.user_theme).

   Skyriai: 0 tokenai · 1 puslapis · 2 kortelė (antraštė, logotipas, turinys, apačia) · 3 laukai ·
            4 mygtukai · 5 pranešimai · 6 nuorodos · 7 2FA (kodas, žingsniai, QR) · 8 slaptažodžio stiprumas ·
            9 būsenų puslapiai ir žymos · 10 prisitaikymas
   ====================================================================== */


/* ==== 0. Tokenai ==== */
:root {
    --auth-width: 440px;         /* kortelės plotis (visuose languose vienodas) */
    --auth-radius: 16px;         /* kortelė — kaip hero (--ui-radius-xl) */
    --auth-radius-ctl: 10px;     /* laukai, mygtukai, pranešimai — kaip --ui-radius */
    --auth-h: 44px;              /* laukų ir mygtukų aukštis (patogu lietimui, ir kioske) */
    --auth-fs: 14px;             /* laukai, mygtukai, pagrindinis tekstas */
    --auth-fs-sm: 13px;          /* etiketės, pranešimai, nuorodos, apačia */

    /* paviršiai ir tekstas (šviesi tema; tie patys vardai kaip base.html) */
    --card-bg: #ffffff;
    --content-bg: #f8f9fa;
    --border-color: #e9ecef;
    --text-primary: #202124;
    --text-muted: #6c757d;
    --mix-base: #ffffff;
    --auth-field-bg: #fafafa;
    --auth-field-border: #dee2e6;

    /* semantinės spalvos — kaip pdvs-ui.css §0 (--ui-danger / --ui-amber / --ui-green ir jų tekstas) */
    --auth-danger: #dc2626;      --auth-danger-text: #991b1b;
    --auth-warn: #b45309;        --auth-warn-text: #92400e;
    --auth-success: #15803d;     --auth-success-text: #14532d;

    --auth-accent: var(--primary-color);   /* nuorodos, ikonos (tamsioje pašviesinama) */
    --auth-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
[data-theme="dark"] {
    --card-bg: #1e2233;
    --content-bg: #161a27;
    --border-color: #2b3145;
    --text-primary: #e5e7eb;
    --text-muted: #9ca3af;
    --mix-base: #232838;
    --auth-field-bg: #161a27;
    --auth-field-border: #2b3145;
    --auth-danger-text: #fecaca;
    --auth-warn-text: #fde68a;
    --auth-success-text: #bbf7d0;
    --auth-accent: color-mix(in srgb, var(--primary-color) 55%, #fff);
    --auth-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    color-scheme: dark;
}


/* ==== 1. Puslapis ==== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.auth-page {
    margin: 0; min-height: 100vh; min-height: 100dvh;
    display: flex; justify-content: center; align-items: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--auth-fs); line-height: 1.5; color: var(--text-primary);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
}
[data-theme="dark"] .auth-page {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-color) 55%, var(--content-bg)) 0%,
        color-mix(in srgb, var(--primary-hover) 55%, var(--content-bg)) 100%);
}
.auth-page :where(h1, p, form) { margin: 0; }
.auth-page [hidden] { display: none; }


/* ==== 2. Kortelė ====
   <div class="auth-wrap"><div class="auth-card">
     <div class="auth-header"> logotipas · h1 · p </div>
     <div class="auth-body"> … </div>
     <div class="auth-footer"> … </div>
   </div></div> */
.auth-wrap { width: 100%; max-width: calc(var(--auth-width) + 40px); padding: 20px; }
.auth-card { overflow: hidden; border-radius: var(--auth-radius); background: var(--card-bg); box-shadow: var(--auth-shadow); }

.auth-header {
    padding: 36px 32px 32px; text-align: center; color: #fff;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
}
.auth-header h1 { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.auth-header p { margin-top: 8px; font-size: var(--auth-fs-sm); line-height: 1.6; opacity: .95; }
.auth-header p:empty { display: none; }

/* Logotipas (arba sistemos pavadinimas) baltame apskritime; būsenų puslapiuose — būsenos ikona (.is-status) */
.auth-logo {
    width: 80px; height: 80px; margin: 0 auto 16px; overflow: hidden; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25), 0 4px 12px rgba(0, 0, 0, .15);
}
.auth-logo img { width: 85%; height: 85%; object-fit: contain; }
.auth-logo-text { padding: 0 6px; font-size: 24px; font-weight: 700; line-height: 1.1; text-align: center; color: var(--primary-color); }
.auth-logo-text.is-long { max-width: 68px; font-size: 13px; line-height: 1.15; overflow-wrap: anywhere; }
.auth-logo.is-status { color: var(--auth-danger); }
.auth-logo.is-status > i { font-size: 34px; }
.auth-logo.is-status > svg { width: 34px; height: 34px; fill: currentColor; }

.auth-body { padding: 32px; }
.auth-footer {
    padding: 18px 32px; text-align: center; font-size: var(--auth-fs-sm); color: var(--text-muted);
    background: var(--content-bg); border-top: 1px solid var(--border-color);
}
.auth-footer.is-split { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.auth-footer.is-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
.auth-inline { display: inline; }


/* ==== 3. Laukai ====
   <div class="auth-field"><label for="x">Etiketė</label>
     <div class="auth-input"><i class="fas fa-user"></i><input id="x" …></div></div> */
.auth-field { margin-bottom: 18px; }
.auth-field > label { display: block; margin-bottom: 8px; font-size: var(--auth-fs-sm); font-weight: 600; color: var(--text-primary); }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > i:first-child { position: absolute; left: 14px; font-size: 15px; color: var(--auth-accent); pointer-events: none; }
.auth-input input {
    width: 100%; height: var(--auth-h); padding: 0 14px 0 42px; border: 1px solid var(--auth-field-border);
    border-radius: var(--auth-radius-ctl); background: var(--auth-field-bg); color: var(--text-primary);
    font: inherit; font-size: var(--auth-fs); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.auth-input.has-toggle input { padding-right: 44px; }
.auth-input.has-toggle input::-ms-reveal { display: none; }   /* Edge: nedubliuoti savo rodymo mygtuko */
.auth-input input::placeholder, .auth-otp::placeholder { color: var(--text-muted); opacity: .7; }
.auth-input input:focus, .auth-otp:focus {
    outline: none; border-color: var(--primary-color); background: var(--card-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 14%, transparent);
}
/* Slaptažodžio rodymo / slėpimo mygtukas lauko dešinėje */
.auth-toggle {
    position: absolute; right: 6px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; background: none; color: var(--text-muted);
    font-size: 15px; cursor: pointer;
}
.auth-toggle:hover { color: var(--text-primary); background: var(--content-bg); }
.auth-toggle:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 1px; }
.auth-hint { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.auth-hint.is-center { text-align: center; }

/* „Pamiršote slaptažodį?“ eilutė po slaptažodžio lauku ir varnelė */
.auth-row-end { display: flex; justify-content: flex-end; margin: -6px 0 18px; }
.auth-check { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.auth-check input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; cursor: pointer; accent-color: var(--primary-color); }
.auth-check label { margin: 0; font-size: var(--auth-fs-sm); font-weight: 500; color: var(--text-muted); cursor: pointer; }


/* ==== 4. Mygtukai ====
   <button class="auth-btn auth-btn-primary"><i class="fas fa-check"></i> Tekstas</button>
   Variantai: -primary (vienas pagrindinis), -danger, -outline, -ghost. Visi vienodo aukščio kaip laukai. */
.auth-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: var(--auth-h); padding: 0 18px;
    border: 1px solid transparent; border-radius: var(--auth-radius-ctl); font: inherit; font-size: var(--auth-fs); font-weight: 600;
    line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.auth-btn:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 2px; }
.auth-btn:disabled { opacity: .6; cursor: not-allowed; }
.auth-btn i { font-size: .95em; }
.auth-btn-primary {
    color: #fff; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 28%, transparent);
}
.auth-btn-primary:hover:not(:disabled) {
    background: var(--primary-hover); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-color) 34%, transparent);
}
.auth-btn-danger { color: #fff; background: var(--auth-danger); box-shadow: 0 4px 12px color-mix(in srgb, var(--auth-danger) 28%, transparent); }
.auth-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--auth-danger) 82%, #000); }
.auth-btn-outline { display: inline-flex; width: auto; color: var(--auth-accent); background: transparent; border-color: var(--auth-accent); }
.auth-btn-outline:hover:not(:disabled) { background: color-mix(in srgb, var(--primary-color) 9%, var(--card-bg)); }
.auth-btn-ghost { margin-top: 10px; color: var(--text-primary); background: transparent; border-color: var(--auth-field-border); }
.auth-btn-ghost:hover:not(:disabled) { background: var(--content-bg); }


/* ==== 5. Pranešimai ====
   <div class="auth-alert [is-warn|is-success]"><i class="fas fa-…"></i><span>Tekstas</span></div>
   Numatytas — klaida (raudona). .is-first — pranešimas formos viršuje (be viršutinio tarpo). */
.auth-alert {
    --c: var(--auth-danger); --t: var(--auth-danger-text);
    display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); border-radius: var(--auth-radius-ctl);
    background: color-mix(in srgb, var(--c) 9%, var(--mix-base)); color: var(--t); font-size: var(--auth-fs-sm); line-height: 1.5; text-align: left;
}
.auth-alert > i { flex-shrink: 0; margin-top: 2px; font-size: 15px; color: var(--c); }
.auth-alert > span { min-width: 0; overflow-wrap: anywhere; }
.auth-alert.is-warn { --c: var(--auth-warn); --t: var(--auth-warn-text); }
.auth-alert.is-success { --c: var(--auth-success); --t: var(--auth-success-text); }
.auth-alert.is-first { margin-top: 0; margin-bottom: 22px; }
.auth-alert.is-only { margin: 0; }


/* ==== 6. Nuorodos ====
   <a class="auth-link"> arba <button class="auth-link"> (pvz. „Atsijungti“ formoje) */
.auth-link {
    display: inline; padding: 0; border: 0; background: none; font: inherit; font-size: var(--auth-fs-sm); font-weight: 600;
    color: var(--auth-accent); text-decoration: none; cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }
.auth-link:focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 2px; border-radius: 4px; }
.auth-link > i:first-child { margin-right: 6px; }


/* ==== 7. 2FA: kodo laukas, žingsniai, QR ====
   Kodas: <input class="auth-otp" maxlength="6" inputmode="numeric">  ·  Žingsniai: .auth-step > .auth-step-num + .auth-step-text */
.auth-otp {
    width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--auth-field-border); border-radius: var(--auth-radius-ctl);
    background: var(--auth-field-bg); color: var(--text-primary); font: inherit; font-size: 24px; font-weight: 700;
    letter-spacing: .4em; text-indent: .4em; text-align: center; font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.auth-alt { margin-top: 22px; padding-top: 18px; text-align: center; border-top: 1px solid var(--border-color); }
.auth-alt > span { display: block; margin-bottom: 10px; font-size: var(--auth-fs-sm); color: var(--text-muted); }

.auth-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.auth-step-num {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--primary-color); color: #fff; font-size: var(--auth-fs-sm); font-weight: 700;
}
.auth-step-text { min-width: 0; font-size: var(--auth-fs-sm); line-height: 1.5; color: var(--text-primary); }
.auth-step-text strong { display: block; margin-bottom: 2px; font-size: var(--auth-fs); color: var(--text-primary); }
.auth-qr { display: flex; justify-content: center; margin: 2px 0 14px; }
.auth-qr img { display: block; padding: 8px; border: 1px solid var(--border-color); border-radius: var(--auth-radius-ctl); background: #fff; }
.auth-secret {
    margin: 8px 0 22px; padding: 10px 14px; border: 1px dashed var(--auth-field-border); border-radius: var(--auth-radius-ctl);
    background: var(--content-bg); color: var(--text-primary); font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: var(--auth-fs); letter-spacing: 2px; text-align: center; word-break: break-all;
}


/* ==== 8. Slaptažodžio stiprumas ====
   <div class="auth-meter"><div class="auth-meter-track"><span class="auth-meter-bar" id="strength-bar"></span></div>
   <div class="auth-hint" id="strength-hint"></div></div>  — JS nustato data-level="0…5" juostai ir užuominai. */
.auth-meter-track { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 2px; background: var(--border-color); }
.auth-meter-bar { display: block; height: 100%; width: var(--w, 0); border-radius: 2px; background: var(--lvl, transparent); transition: width .3s ease, background-color .3s ease; }
.auth-meter .auth-hint[data-level] { color: color-mix(in srgb, var(--lvl) 65%, var(--text-primary)); }
.auth-meter [data-level="0"] { --lvl: var(--text-muted); --w: 0%; }
.auth-meter [data-level="1"] { --lvl: var(--auth-danger); --w: 25%; }
.auth-meter [data-level="2"] { --lvl: color-mix(in srgb, var(--auth-danger) 50%, var(--auth-warn)); --w: 50%; }
.auth-meter [data-level="3"] { --lvl: var(--auth-warn); --w: 70%; }
.auth-meter [data-level="4"] { --lvl: color-mix(in srgb, var(--auth-success) 60%, var(--auth-warn)); --w: 85%; }
.auth-meter [data-level="5"] { --lvl: var(--auth-success); --w: 100%; }


/* ==== 9. Būsenų puslapiai ir žymos ==== */
.auth-text { margin-bottom: 10px; font-size: var(--auth-fs); line-height: 1.6; text-align: center; color: var(--text-muted); }
.auth-text:last-child { margin-bottom: 0; }
.auth-text.is-mono { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-weight: 600; color: var(--text-primary); }
/* Mažas lustas apačioje (pvz. kiosko IP) */
.auth-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--auth-field-border); border-radius: 999px;
    background: var(--card-bg); color: var(--text-muted); font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 12px;
}
.auth-tag > i { color: var(--auth-accent); }
.auth-note { display: inline-flex; align-items: center; gap: 6px; }
.auth-note > i { color: var(--auth-accent); }


/* ==== 10. Prisitaikymas ==== */
@media (max-width: 480px) {
    .auth-wrap { padding: 16px; }
    .auth-header { padding: 28px 20px 24px; }
    .auth-header h1 { font-size: 22px; }
    .auth-logo { width: 70px; height: 70px; margin-bottom: 14px; }
    .auth-body { padding: 26px 20px; }
    .auth-footer { padding: 16px 20px; }
    .auth-footer.is-split, .auth-footer.is-links { flex-direction: column; gap: 8px; }
    .auth-otp { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-btn, .auth-input input, .auth-otp, .auth-meter-bar { transition: none; }
}