/* ─────────────────────────────────────────────────────────────────────────
   Teema — kogu saidi värvitokenid: hele (vaikimisi) ja tume.
   Iga leht kasutab ainult neid muutujaid; tumeda teema jaoks piisab
   :root[data-theme="dark"] plokist. Heledad väärtused on täpselt samad
   hex-koodid, mis olid varem failides otse kirjas, seega hele vaade ei muutu.
   Vahetus: base.html-i skript paneb <html>-ile data-theme, lüliti animeerib
   ülemineku ringjalt (View Transitions API), vanemates brauserites sujuv
   värviüleminek.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Pinnad */
    --bg: #fafafa;            /* lehe taust */
    --surface: #ffffff;       /* kaardid, nupud, väljad */
    --surface-2: #fafafa;     /* sisemised plokid, rea hover */
    --fill: #f4f4f5;          /* pillid, avatarid, vaiksed nupud */
    --line: #ececee;          /* kaardi ääris */
    --line-2: #e4e4e7;        /* tugevam ääris, väljad */
    --line-soft: #f3f4f6;     /* ridade vahejooned, ribade taust */

    /* Tekst ja tint */
    --ink: #18181b;           /* pealkirjad, primaarne nupp */
    --ink-hover: #27272a;     /* primaarse nupu hover */
    --ink-2: #3f3f46;
    --ink-3: #52525b;
    --muted: #71717a;
    --faint: #a1a1aa;
    --on-ink: #ffffff;        /* tekst tumeda (primaarse) nupu peal */
    --on-accent: #ffffff;     /* tekst värvilise nupu peal — alati valge */

    /* Staatused: taust · joon · tekst · tugev · tugev taust (nupp) */
    --ok-bg: #f1fbf4;   --ok-line: #c5ebd0;   --ok-ink: #15803d;   --ok: #16a34a;
    --ok-solid: #15803d; --ok-solid-hover: #166534;
    --warn-bg: #fcf7ee; --warn-line: #f0e0c0; --warn-ink: #b45309; --warn: #d97706;
    --warn-solid: #b45309; --warn-solid-hover: #92400e;
    --bad-bg: #fcf2f2;  --bad-line: #f1d6d2;  --bad-ink: #b91c1c;  --bad: #dc2626;
    --bad-solid: #b91c1c; --bad-solid-hover: #991b1b;
    --info-bg: #eef2ff; --info-line: #c7d2fe; --info-ink: #3730a3; --info: #2563eb;
    --info-solid: #3730a3;

    /* Varjud, rõngad, katted */
    --ring: rgba(15, 23, 42, 0.08);
    --shadow-a: rgba(24, 24, 27, 0.04);
    --shadow-b: rgba(24, 24, 27, 0.05);
    --shadow-c: rgba(24, 24, 27, 0.10);
    --scrim: rgba(24, 24, 27, 0.42);      /* kate modaalide/dialoogide taga (koos häguga) */
    --overlay: rgba(24, 24, 27, 0.42);
    --panel-shadow: 0 24px 64px -16px rgba(24, 24, 27, 0.35), 0 1px 2px rgba(24, 24, 27, 0.06);
    --surface-elev: #ffffff;              /* modaalid, dialoogid, toastid */
    --panel-edge: #ececee;
    /* Klaasist nav: tint, kerimisel tugevam tint, ülaserva valgusjoon, gradientääris, vari */
    --nav-bg: hsla(0, 0%, 100%, 0.48);
    --nav-bg-m: hsla(0, 0%, 100%, 0.52);
    --nav-bg-strong: hsla(0, 0%, 100%, 0.68);
    --nav-hl: rgba(255, 255, 255, 0.95);
    --nav-edge-top: rgba(255, 255, 255, 0.92);
    --nav-edge-bottom: rgba(24, 24, 27, 0.12);
    --nav-shadow: rgba(24, 24, 27, 0.16);
    --nav-hover: rgba(24, 24, 27, 0.045);

    /* Vanemate lehtede tokenid (base.html) — samad väärtused mis enne */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-focus: #0f172a;
    --bg-page: #fafafa;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f8fafc;
    --accent: #0f172a;
    --accent-subtle: #f1f5f9;
    --success: #059669;
    --error: #dc2626;
    --warning: #d97706;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* ─── Tume teema ─── */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0a0a0c;
    --surface: #141417;
    --surface-2: #1a1a1f;
    --fill: #202026;
    --line: #26262d;
    --line-2: #32323a;
    --line-soft: #1f1f25;

    --ink: #f4f4f5;
    --ink-hover: #e4e4e7;
    --ink-2: #d4d4d8;
    --ink-3: #a1a1aa;
    --muted: #8f8f99;
    --faint: #6c6c76;
    --on-ink: #0a0a0c;
    --on-accent: #ffffff;

    --ok-bg: rgba(34, 197, 94, 0.10);   --ok-line: rgba(34, 197, 94, 0.28);   --ok-ink: #4ade80;   --ok: #22c55e;
    --ok-solid: #16a34a; --ok-solid-hover: #15803d;
    --warn-bg: rgba(245, 158, 11, 0.10); --warn-line: rgba(245, 158, 11, 0.30); --warn-ink: #fbbf24; --warn: #f59e0b;
    --warn-solid: #b45309; --warn-solid-hover: #92400e;
    --bad-bg: rgba(239, 68, 68, 0.10);  --bad-line: rgba(239, 68, 68, 0.30);  --bad-ink: #f87171;  --bad: #ef4444;
    --bad-solid: #dc2626; --bad-solid-hover: #b91c1c;
    --info-bg: rgba(99, 102, 241, 0.12); --info-line: rgba(99, 102, 241, 0.30); --info-ink: #a5b4fc; --info: #60a5fa;
    --info-solid: #4f46e5;

    --ring: rgba(244, 244, 245, 0.14);
    --shadow-a: rgba(0, 0, 0, 0.35);
    --shadow-b: rgba(0, 0, 0, 0.40);
    --shadow-c: rgba(0, 0, 0, 0.55);
    --scrim: rgba(0, 0, 0, 0.58);
    --overlay: rgba(0, 0, 0, 0.58);
    --panel-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --surface-elev: #1c1c22;
    --panel-edge: rgba(255, 255, 255, 0.10);
    --nav-bg: hsla(240, 8%, 12%, 0.52);
    --nav-bg-m: hsla(240, 8%, 12%, 0.58);
    --nav-bg-strong: hsla(240, 8%, 12%, 0.72);
    --nav-hl: rgba(255, 255, 255, 0.10);
    --nav-edge-top: rgba(255, 255, 255, 0.18);
    --nav-edge-bottom: rgba(255, 255, 255, 0.05);
    --nav-shadow: rgba(0, 0, 0, 0.42);
    --nav-hover: rgba(255, 255, 255, 0.07);

    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-muted: #6c6c76;
    --border: #26262d;
    --border-focus: #f4f4f5;
    --bg-page: #0a0a0c;
    --bg-card: #141417;
    --bg-input: #18181d;
    --bg-hover: #1a1a1f;
    --accent: #f4f4f5;
    --accent-subtle: #202026;
    --success: #16a34a;
    --error: #ef4444;
    --warning: #f59e0b;
}

/* Kui kasutaja pole valikut teinud ja skript ei jõudnud joosta, järgi süsteemi */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
        --bg: #0a0a0c; --surface: #141417; --surface-2: #1a1a1f; --fill: #202026;
        --line: #26262d; --line-2: #32323a; --line-soft: #1f1f25;
        --ink: #f4f4f5; --ink-hover: #e4e4e7; --ink-2: #d4d4d8; --ink-3: #a1a1aa; --muted: #8f8f99; --faint: #6c6c76;
        --on-ink: #0a0a0c;
        --ok-bg: rgba(34, 197, 94, 0.10); --ok-line: rgba(34, 197, 94, 0.28); --ok-ink: #4ade80; --ok: #22c55e; --ok-solid: #16a34a; --ok-solid-hover: #15803d;
        --warn-bg: rgba(245, 158, 11, 0.10); --warn-line: rgba(245, 158, 11, 0.30); --warn-ink: #fbbf24; --warn: #f59e0b;
        --bad-bg: rgba(239, 68, 68, 0.10); --bad-line: rgba(239, 68, 68, 0.30); --bad-ink: #f87171; --bad: #ef4444; --bad-solid: #dc2626; --bad-solid-hover: #b91c1c;
        --info-bg: rgba(99, 102, 241, 0.12); --info-line: rgba(99, 102, 241, 0.30); --info-ink: #a5b4fc; --info: #60a5fa; --info-solid: #4f46e5;
        --ring: rgba(244, 244, 245, 0.14); --shadow-a: rgba(0, 0, 0, 0.35); --shadow-b: rgba(0, 0, 0, 0.40); --shadow-c: rgba(0, 0, 0, 0.55); --scrim: rgba(0, 0, 0, 0.58); --overlay: rgba(0, 0, 0, 0.58); --panel-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.04); --surface-elev: #1c1c22; --panel-edge: rgba(255, 255, 255, 0.10);
        --nav-bg: hsla(240, 8%, 12%, 0.52); --nav-bg-m: hsla(240, 8%, 12%, 0.58); --nav-bg-strong: hsla(240, 8%, 12%, 0.72); --nav-hl: rgba(255, 255, 255, 0.10); --nav-edge-top: rgba(255, 255, 255, 0.18); --nav-edge-bottom: rgba(255, 255, 255, 0.05); --nav-shadow: rgba(0, 0, 0, 0.42); --nav-hover: rgba(255, 255, 255, 0.07);
        --text-primary: #f4f4f5; --text-secondary: #a1a1aa; --text-muted: #6c6c76; --border: #26262d; --border-focus: #f4f4f5;
        --bg-page: #0a0a0c; --bg-card: #141417; --bg-input: #18181d; --bg-hover: #1a1a1f; --accent: #f4f4f5; --accent-subtle: #202026;
        --success: #16a34a; --error: #ef4444; --warning: #f59e0b;
    }
}

/* ─── Teemavahetuse animatsioon: hämarus ───
   Uue teema pilt (::view-transition-new) on maskitud pehme servaga gradiendiga,
   mis on kolm ekraanikõrgust pikk; base.html-i skript liigutab maski nii, et
   tume teema laskub ülalt alla ja hele tõuseb alt üles. Vana pilt jääb paigale.
   Brauserites ilma View Transitions'ita teeb .theme-fading lühikese ristsulanduse. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) {
    z-index: 2;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
}
html.theme-to-dark::view-transition-new(root) {
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 60%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 60%);
}
html.theme-to-light::view-transition-new(root) {
    -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 60%);
    mask-image: linear-gradient(to bottom, transparent 40%, #000 60%);
}

html.theme-fading,
html.theme-fading *,
html.theme-fading *::before,
html.theme-fading *::after {
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, fill 0.45s ease, stroke 0.45s ease, box-shadow 0.45s ease !important;
}

/* ─── Lüliti ───
   Sama klaasine keel mis alumisel navil. Ikoon on üks kujund: päike, mille
   kiired tõmbuvad kokku ja mille ette libiseb varjutus — nii saab kuu. */
.theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    top: calc(16px + env(safe-area-inset-top));
    z-index: 9998;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(1.04);
    backdrop-filter: blur(28px) saturate(190%) contrast(1.04);
    border: none;
    box-shadow: inset 0 1px 0 var(--nav-hl), 0 1px 2px var(--shadow-b), 0 14px 36px -10px var(--nav-shadow);
    color: var(--ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, var(--nav-edge-top), var(--nav-edge-bottom));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
.theme-toggle:hover { color: var(--ink); opacity: 1; transform: translateY(-1px); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.tt { width: 22px; height: 22px; display: block; overflow: visible; }
.theme-toggle .tt { width: 22px; height: 22px; }
.nav-btn-theme .ico-wrap { position: relative; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.tt .tt-disc, .tt .tt-hole, .tt .tt-rays {
    transform-box: fill-box;
    transform-origin: center;
}
.tt .tt-disc { transform: scale(1); transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1); }
.tt .tt-hole { transform: translate(11px, -11px); transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1); }
.tt .tt-rays { transform: rotate(0deg); transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1); }
.tt .tt-rays line { stroke-dasharray: 2 2; stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; }
:root[data-theme="dark"] .tt .tt-disc { transform: scale(1.6); }
:root[data-theme="dark"] .tt .tt-hole { transform: translate(4px, -4px); }
:root[data-theme="dark"] .tt .tt-rays { transform: rotate(60deg); }
:root[data-theme="dark"] .tt .tt-rays line { stroke-dashoffset: 2; opacity: 0; }
/* Kiired kaovad üksteise järel (tekivad samuti) */
.tt .tt-rays .r1 { transition-delay: 0.03s; } .tt .tt-rays .r2 { transition-delay: 0.06s; } .tt .tt-rays .r3 { transition-delay: 0.09s; }
.tt .tt-rays .r4 { transition-delay: 0.12s; } .tt .tt-rays .r5 { transition-delay: 0.15s; } .tt .tt-rays .r6 { transition-delay: 0.18s; } .tt .tt-rays .r7 { transition-delay: 0.21s; }

.nav-btn-theme .lbl-light, .nav-btn-theme .lbl-dark { display: none; }
:root[data-theme="dark"] .nav-btn-theme .lbl-light { display: inline; }
:root:not([data-theme="dark"]) .nav-btn-theme .lbl-dark { display: inline; }

@media (prefers-reduced-motion: reduce) {
    .tt .tt-disc, .tt .tt-hole, .tt .tt-rays, .tt .tt-rays line { transition: none; }
    html.theme-fading, html.theme-fading * { transition: none !important; }
}

/* Lüliti alumises navis (sisselogitud kasutaja): sama nupp mis teised */
.nav-btn-theme .ico-wrap { position: relative; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.nav-btn-theme .ico { width: 20px; height: 20px; }
.nav-btn-theme .lbl-light, .nav-btn-theme .lbl-dark { display: none; }
:root[data-theme="dark"] .nav-btn-theme .lbl-light { display: inline; }
:root:not([data-theme="dark"]) .nav-btn-theme .lbl-dark { display: inline; }

@media (prefers-reduced-motion: reduce) {
    .theme-toggle svg, .nav-btn-theme .ico { transition: none; }
    html.theme-fading, html.theme-fading * { transition: none !important; }
}

/* ─── Tumeda teema peenhäälestus ─── */
:root[data-theme="dark"] ::selection { background: rgba(244, 244, 245, 0.18); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--faint); }
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset;
    -webkit-text-fill-color: var(--ink);
}

/* SweetAlert2 (veateated töölaual) */
:root[data-theme="dark"] .swal2-popup { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
:root[data-theme="dark"] .swal2-title { color: var(--ink); }
:root[data-theme="dark"] .swal2-html-container { color: var(--ink-3); }
:root[data-theme="dark"] .swal2-timer-progress-bar { background: rgba(244, 244, 245, 0.3); }
:root[data-theme="dark"] .swal2-close { color: var(--muted); }

/* ApexCharts (töölaua ületundide graafik) */
:root[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
:root[data-theme="dark"] .apexcharts-tooltip-title { background: var(--surface-2) !important; border-color: var(--line) !important; }

/* Lüliti alumises navis: sama vaikne värv mis teistel nuppudel (base.html button-reeglid üle) */
.theme-toggle:active { opacity: 1; }

/* ─── Klaas ja katted (sama keel mis alumisel navil) ───
   .glass — kihiline klaas (tint + hägu + ülaserva valgusjoon + gradientääris + vari).
   Katted modaalide taga: --scrim + hägu, et leht taga vaikselt tuhmuks, mitte ei kaoks. */
.glass {
    position: relative;
    background: var(--nav-bg-strong);
    -webkit-backdrop-filter: blur(24px) saturate(180%) contrast(1.04);
    backdrop-filter: blur(24px) saturate(180%) contrast(1.04);
    border: none;
    box-shadow: inset 0 1px 0 var(--nav-hl), 0 1px 2px var(--shadow-b), 0 14px 36px -10px var(--nav-shadow);
}
.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, var(--nav-edge-top), var(--nav-edge-bottom));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
.scrim-blur {
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
}
/* SweetAlert2 (töölaua veateated): sama kate ja paneel */
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: var(--scrim) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
}
.swal2-popup { background: var(--surface-elev) !important; box-shadow: var(--panel-shadow) !important; border: 1px solid var(--panel-edge) !important; border-radius: 16px !important; }
.swal2-container { z-index: 10001 !important; } /* navi (9999) kohal */
/* Sessioonikontrolli kate (base.html) */
#wakeOverlay {
    background: var(--nav-bg-strong) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .theme-toggle, .glass { background: var(--surface); }
    #wakeOverlay { background: var(--bg-page) !important; }
}