/* ==========================================================================
   BCG Nexus — dizajnový systém 2.0
   Značka: Benčík Culinary Group (Základný branding manuál).
     červená  #ef3e3d   uhlíková #2e2828
     krémová  #e8e4d1   sivá     #eaeaea

   Stavba súboru:
     1) tokeny (svetlá + tmavá téma)   5) tabuľkový engine
     2) základ a shell                 6) grafy
     3) typografia a plochy            7) stavy (prázdno, skeleton, zásuvka)
     4) komponenty (KPI, štítky…)      8) prihlásenie, pätka, responzívne

   PRAVIDLO: žiadna farba sa nepíše natvrdo. Všetko ide cez token — inak
   prestane fungovať tmavá téma. Modulové štýly patria do modules.css.
   ========================================================================== */

:root {
    /* --- Značková červená (600 = #ef3e3d z manuálu) --- */
    --red-50:  #fff0f0;
    --red-100: #fee2e1;
    --red-200: #fcc1c0;
    --red-300: #f99c9a;
    --red-400: #f47371;
    --red-500: #f15655;
    --red-600: #ef3e3d;
    --red-700: #ce2322;
    --red-800: #9c1e1c;
    --red-900: #6d1a17;

    /* --- Značková uhlíková (700 = #2e2828 z manuálu) --- */
    --char-50:  #f8f7f7;
    --char-100: #efecec;
    --char-200: #ded8d8;
    --char-300: #c4bbbb;
    --char-400: #938585;
    --char-500: #6d5f5f;
    --char-600: #4c4242;
    --char-700: #2e2828;
    --char-800: #272121;
    --char-900: #191515;

    /* --- Krémová: „podklad použitia" z manuálu --- */
    --cream:      #e8e4d1;
    --cream-200:  #ded9c0;
    --cream-soft: #f3f0e8;
    --cream-tint: #faf8f3;

    /* --- Povrchy: štyri úrovne namiesto „biela karta na sivom" ---------------
       --bg      podklad stránky
       --sunken  zapustené plochy: filtračná lišta, hlavička tabuľky
       --surface pracovná plocha: tabuľky, panely
       --tonal   tónovaná plocha: súčtový riadok, hover, medzisúčet
       --raised  nad obsahom: zásuvka, dialóg, tooltip                        */
    --bg:        #f4f2ec;
    --sunken:    #eeebe3;
    --surface:   #ffffff;
    --surface-2: #fbfbf8;
    --tonal:     #faf8f3;
    --raised:    #ffffff;

    /* --- Text --- */
    --ink:       #2e2828;
    --ink-soft:  #5b5050;
    --muted:     #6d5f5f;
    --faint:     #8b7f7f;
    --ink-inv:   #ffffff;

    /* --- Linky --- */
    --line:        #e4e0d8;
    --line-soft:   #efece5;
    --line-strong: #d3cec2;

    /* --- Jantárová rampa (upozornenia; teplo ladí s krémovou) --- */
    --warn-50:  #fdf9f2;
    --warn-100: #fbeed9;
    --warn-200: #f2ddb8;
    --warn-400: #e0a552;
    --warn-500: #d98324;
    --warn-600: #b45309;
    --warn-700: #96430b;
    --warn-800: #7c3a06;

    /* --- Kategoriálna tyrkysová (odlíšenie kategórií, nie akcie) --- */
    --teal-50:  #eaf4f2;
    --teal-100: #cfe7e2;
    --teal-200: #a8d5cd;
    --teal-700: #0f6b60;
    --teal-800: #0b5049;

    /* --- Sémantické ---
       Značková červená je akcent a je rezervovaná pre chyby, preto je „danger"
       posunutý do tmavšej bordovej — plné červené tlačidlo neexistuje. */
    --success:      #166534;
    --success-dark: #14532d;
    --success-bg:   #eef6ef;
    --success-line: #c6e2c9;
    --warning:      var(--warn-600);
    --warning-ink:  var(--warn-800);
    --warning-bg:   var(--warn-50);
    --warning-line: var(--warn-200);
    --danger:       #a4161a;
    --danger-dark:  #7d1113;
    --danger-bg:    #fdf1f0;
    --danger-line:  #f1cac7;
    --info:         #0f5f70;
    --info-bg:      #eef5f6;
    --info-line:    #c9dfe3;

    /* Plné sémantické plochy (tlačidlá „Schváliť", „Zamietnuť", počítadlá).
       Sémantické --success/--danger sú ladené na TEXT a značky; na výplni pod
       bielym textom by v tmavej téme prepadli, preto majú vlastné tokeny. */
    --fill-ok:   #166534;
    --fill-warn: #b45309;
    --fill-bad:  #a4161a;
    --fill-ink:  #ffffff;

    /* --- Akcent značky — červená. Logo, aktívne indikátory. Nie akcie. --- */
    --accent:      var(--red-600);
    --accent-soft: var(--red-400);

    /* --- Primár = akčná farba: uhlíková. Biely text na nej má kontrast 14,5. --- */
    --brand:      var(--char-700);
    --brand-dark: var(--char-800);
    --brand-ink-on: #ffffff;          /* text na ploche --brand */

    /* Značkovo tónované plochy (chipy, ikony modulov, akcentové karty). */
    --brand-50:   var(--cream-tint);
    --brand-100:  var(--cream-soft);
    --brand-200:  var(--cream-200);
    --brand-ink:  var(--char-700);

    /* --- Tmavý rail (bočné menu) --- */
    --sb-bg:        var(--char-700);
    --sb-ink:       rgba(255, 255, 255, .76);
    --sb-ink-strong:#ffffff;
    --sb-faint:     rgba(255, 255, 255, .42);
    --sb-hover:     rgba(255, 255, 255, .07);
    --sb-line:      rgba(255, 255, 255, .10);
    --sb-active-bg: rgba(255, 255, 255, .09);

    /* --- Grafová paleta ------------------------------------------------------
       Overená výpočtom (OKLab ΔE, simulácia CVD Machado 2009) proti svetlej
       aj tmavej ploche: pás svetlosti, minimálna sýtosť, odstup susedných
       sérií pri protanopii/deuteranopii, odstup pri bežnom videní, kontrast.
       Poradie je pevné — séria si drží farbu aj keď filter zmení počet sérií. */
    --c1: #008b79;   /* páska / hlavná séria */
    --c2: #c67a12;   /* hotovosť */
    --c3: #3f6fc4;   /* faktúry */
    --c4: #9c4a80;   /* odvody */
    --c5: #6f7d24;   /* ostatné */
    --c1-soft: #d5ece7;
    --c2-soft: #f6e7cd;
    --c3-soft: #dee6f7;
    --c4-soft: #f0dfea;
    --c5-soft: #e7ead2;
    /* Sekvenčná rampa (jeden odtieň, svetlá → tmavá) pre veľkosť/intenzitu. */
    --seq-1: #dbeeea;
    --seq-2: #a5d5cb;
    --seq-3: #5cb1a3;
    --seq-4: #188b7b;
    --seq-5: #0a5f55;
    --axis:  #d6d1c7;
    --grid:  #eeeae2;
    --data-ink: #3d3535;

    /* --- Tvar a hĺbka (tiene teplo tónované) --- */
    --r-xs:  5px;
    --r-sm:  8px;
    --r:     11px;
    --r-lg:  15px;
    --r-xl:  18px;
    --r-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(46, 40, 40, .05);
    --shadow-sm: 0 1px 3px rgba(46, 40, 40, .07), 0 1px 2px rgba(46, 40, 40, .04);
    --shadow:    0 6px 18px rgba(46, 40, 40, .09), 0 1px 3px rgba(46, 40, 40, .05);
    --shadow-lg: 0 20px 48px rgba(46, 40, 40, .18), 0 4px 12px rgba(46, 40, 40, .08);
    --ring:      0 0 0 3px var(--char-200);
    --focus:     0 0 0 2px var(--surface), 0 0 0 4px var(--char-500);

    /* --- Hustota tabuliek (prepínateľná používateľom) --- */
    --row-h:  42px;
    --cell-x: 14px;
    --cell-fs: .875rem;

    /* Pracovná plocha je tekutá; obmedzuje sa len dĺžka textového riadka. */
    --read-max: 80ch;
    --sidebar-w: 232px;
    --font: "Inter", -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, Menlo, monospace;
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* Jemný šum — láme pásikovanie (banding) v tmavých gradientoch. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");

    /* Značkový watermark — symbol nekonečna ako maska, aby sa dal prefarbiť. */
    --wm: url("../img/bcg-infinity.0e198d931445.svg");
    --wm-ratio: 1.696;
}

/* --- Kompaktná hustota: prepínač v kontextovej lište ------------------------
   Mzdár s 300 riadkami a manažér s 12 potrebujú inú výšku riadka. Je to
   nastavenie, nie názor — mení sa token, nie šablóna. */
:root[data-density="compact"] {
    --row-h:  32px;
    --cell-x: 9px;
    --cell-fs: .82rem;
}

/* --- Tmavá téma ------------------------------------------------------------
   Nie prevrátenie svetlej: vlastné kroky z tých istých rámp, kontrast overený
   proti tmavej ploche. Zapína ju prepínač (data-theme na <html>), predvolene
   sa riadi nastavením systému. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:        #151211;
        --sunken:    #1c1918;
        --surface:   #211d1c;
        --surface-2: #1e1a19;
        --tonal:     #262120;
        --raised:    #282322;

        --ink:      #f2eeea;
        --ink-soft: #c3b9b5;
        --muted:    #a1948f;
        --faint:    #8f8480;
        --ink-inv:  #191515;

        --line:        #3a3432;
        --line-soft:   #2e2927;
        --line-strong: #4a4341;

        --cream-soft: #2a2523;
        --cream-tint: #241f1e;
        --cream-200:  #3d3634;

        --success:      #5fbe7c;
        --success-dark: #86d09c;
        --success-bg:   #17251a;
        --success-line: #2c4630;
        --warning:      #e0a552;
        --warning-ink:  #edc287;
        --warning-bg:   #251d11;
        --warning-line: #4a3a1e;
        --danger:       #f47371;
        --danger-dark:  #f9a3a1;
        --danger-bg:    #2a1817;
        --danger-line:  #4d2827;
        --info:         #63b6c4;
        --info-bg:      #132326;
        --info-line:    #26454a;

        --fill-ok:   #2f7a48;
        --fill-warn: #a1620a;
        --fill-bad:  #b23b3d;
        --fill-ink:  #ffffff;

        --warn-50:  #251d11;
        --warn-100: #2f2415;
        --warn-200: #4a3a1e;
        --warn-600: #e0a552;
        --warn-700: #edc287;
        --warn-800: #f2d3a5;

        --teal-50:  #123833;
        --teal-100: #17453f;
        --teal-200: #1f5c53;
        --teal-700: #4cc0ad;
        --teal-800: #7ad3c4;

        --brand:      var(--char-100);
        --brand-dark: #ffffff;
        --brand-ink-on: var(--char-900);
        --brand-50:   #241f1e;
        --brand-100:  #2a2523;
        --brand-200:  #3d3634;
        --brand-ink:  #f2eeea;

        --sb-bg: #100e0d;

        --c1: #0f9c88; --c2: #c28429; --c3: #5f8ce0; --c4: #b3689f; --c5: #87993a;
        --c1-soft: #123833; --c2-soft: #332711; --c3-soft: #1c2740;
        --c4-soft: #331f2d; --c5-soft: #282c14;
        --seq-1: #123833; --seq-2: #1a5a50; --seq-3: #238073; --seq-4: #35a292; --seq-5: #6cc6b8;
        --axis: #4a4341; --grid: #2c2725; --data-ink: #ded6d2;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
        --shadow:    0 6px 18px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
        --shadow-lg: 0 20px 48px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);
        --ring:      0 0 0 3px var(--char-600);
        --focus:     0 0 0 2px var(--surface), 0 0 0 4px var(--char-300);
    }
}

:root[data-theme="dark"] {
    --bg:        #151211;
    --sunken:    #1c1918;
    --surface:   #211d1c;
    --surface-2: #1e1a19;
    --tonal:     #262120;
    --raised:    #282322;

    --ink:      #f2eeea;
    --ink-soft: #c3b9b5;
    --muted:    #a1948f;
    --faint:    #8f8480;
    --ink-inv:  #191515;

    --line:        #3a3432;
    --line-soft:   #2e2927;
    --line-strong: #4a4341;

    --cream-soft: #2a2523;
    --cream-tint: #241f1e;
    --cream-200:  #3d3634;

    --success:      #5fbe7c;
    --success-dark: #86d09c;
    --success-bg:   #17251a;
    --success-line: #2c4630;
    --warning:      #e0a552;
    --warning-ink:  #edc287;
    --warning-bg:   #251d11;
    --warning-line: #4a3a1e;
    --danger:       #f47371;
    --danger-dark:  #f9a3a1;
    --danger-bg:    #2a1817;
    --danger-line:  #4d2827;
    --info:         #63b6c4;
    --info-bg:      #132326;
    --info-line:    #26454a;

    --fill-ok:   #2f7a48;
    --fill-warn: #a1620a;
    --fill-bad:  #b23b3d;
    --fill-ink:  #ffffff;

    --warn-50:  #251d11;
    --warn-100: #2f2415;
    --warn-200: #4a3a1e;
    --warn-600: #e0a552;
    --warn-700: #edc287;
    --warn-800: #f2d3a5;

    --teal-50:  #123833;
    --teal-100: #17453f;
    --teal-200: #1f5c53;
    --teal-700: #4cc0ad;
    --teal-800: #7ad3c4;

    --brand:      var(--char-100);
    --brand-dark: #ffffff;
    --brand-ink-on: var(--char-900);
    --brand-50:   #241f1e;
    --brand-100:  #2a2523;
    --brand-200:  #3d3634;
    --brand-ink:  #f2eeea;

    --sb-bg: #100e0d;

    --c1: #0f9c88; --c2: #c28429; --c3: #5f8ce0; --c4: #b3689f; --c5: #87993a;
    --c1-soft: #123833; --c2-soft: #332711; --c3-soft: #1c2740;
    --c4-soft: #331f2d; --c5-soft: #282c14;
    --seq-1: #123833; --seq-2: #1a5a50; --seq-3: #238073; --seq-4: #35a292; --seq-5: #6cc6b8;
    --axis: #4a4341; --grid: #2c2725; --data-ink: #ded6d2;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow:    0 6px 18px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4);
    --ring:      0 0 0 3px var(--char-600);
    --focus:     0 0 0 2px var(--surface), 0 0 0 4px var(--char-300);
}

/* ==========================================================================
   2) Základ
   ========================================================================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

body {
    margin: 0;
    font-family: var(--font);
    font-feature-settings: "cv11", "ss01";
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--brand-dark); }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }

/* Číselné hodnoty zarovnané pod sebou (mzdy) */
.tnum, table td.n, table th.n, .vp-v, .stat-value, .kpi-v { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Shell — rail + kontextová lišta + obsah
   ========================================================================== */

.layout { display: flex; min-height: 100vh; }

.sidebar {
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-line);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 40;
}

/* Značkový watermark — v prázdnom páse railu nad pätkou. */
.sidebar::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 78px;
    transform: translateX(-50%);
    width: 160px;
    aspect-ratio: var(--wm-ratio);
    background-color: #fff;
    -webkit-mask: var(--wm) center / contain no-repeat;
            mask: var(--wm) center / contain no-repeat;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
}
.sidebar-top, .side-nav, .sidebar-foot { position: relative; z-index: 1; }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 12px;
    text-decoration: none;
    color: var(--sb-ink-strong);
}
.sidebar-mark { width: 30px; height: 30px; flex: 0 0 30px; display: block; }
.sidebar-brand .name { font-weight: 680; font-size: 1.06rem; letter-spacing: -.01em; }

.side-nav { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; overflow-y: auto; flex: 1; }
.side-sec {
    font-size: .65rem; text-transform: uppercase; letter-spacing: .11em;
    color: var(--sb-faint); font-weight: 700; margin: 14px 10px 5px;
}
.side-nav a {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    padding: 8px 11px;
    border-radius: var(--r-sm);
    color: var(--sb-ink);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 520;
    transition: background .12s var(--ease), color .12s var(--ease);
}
.side-nav a .ti { font-size: 18px; color: var(--sb-faint); transition: color .12s; }
.side-nav a:hover { background: var(--sb-hover); color: var(--sb-ink-strong); }
.side-nav a:hover .ti { color: var(--sb-ink); }
.side-nav a.is-active { background: var(--sb-active-bg); color: var(--sb-ink-strong); font-weight: 640; }
.side-nav a.is-active .ti { color: var(--accent-soft); }
/* Červený indikátor aktívnej položky — značkový akcent */
.side-nav a.is-active::before {
    content: "";
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 3px 3px 0;
    background: var(--accent);
}
/* Počítadlo úloh pri module */
.side-nav a .nav-cnt {
    margin-left: auto; background: var(--accent); color: #fff;
    font-size: .68rem; font-weight: 700; border-radius: var(--r-pill);
    padding: 0 6px; line-height: 17px; min-width: 18px; text-align: center;
}

/* Presúvanie modulov v menu (SortableJS v base.html). */
.side-mods { display: flex; flex-direction: column; gap: 1px; }
.side-mods a { cursor: grab; }
.side-mods a:active { cursor: grabbing; }
.side-mods .drag-ghost { opacity: .35; background: var(--sb-hover); }
.side-mods .drag-chosen { background: var(--sb-hover); color: var(--sb-ink-strong); }
.side-mods .drag-lift {
    background: var(--sb-active-bg); color: var(--sb-ink-strong);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    transform: rotate(1.5deg); opacity: .95;
}
.side-mods .drag-saved { animation: drag-saved .9s ease; }
@keyframes drag-saved {
    0% { background: var(--sb-active-bg); }
    100% { background: transparent; }
}

.sidebar-foot {
    border-top: 1px solid var(--sb-line);
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: var(--sb-ink-strong);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .76rem; flex-shrink: 0;
}
.sidebar-foot .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.sidebar-foot .who .nm { font-size: .82rem; font-weight: 620; color: var(--sb-ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .who .rl { font-size: .7rem; color: var(--sb-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout-form { margin: 0; }
.logout-form button {
    background: transparent; border: 1px solid var(--sb-line);
    color: var(--sb-faint); width: 32px; height: 32px;
    border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    transition: background .12s, color .12s, border-color .12s;
}
.logout-form button:hover { background: rgba(239, 62, 61, .18); color: #fff; border-color: transparent; }

.app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* --- Kontextová lišta: firma · obdobie · rozsah · téma ---------------------
   Firma a obdobie sú globálny stav, nie vec jednotlivého modulu. */
.ctxbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 8px 22px;
    position: sticky; top: 0; z-index: 30;
}
.ctx-scope { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--faint); }
.ctx-sep { width: 1px; height: 20px; background: var(--line); }
.ctx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 32px; height: 32px; border-radius: var(--r-sm);
    border: 1px solid transparent; background: transparent;
    color: var(--muted); cursor: pointer; font-size: 17px; text-decoration: none;
    position: relative;
}
.ctx-btn:hover { background: var(--sunken); color: var(--ink); }
.ctx-btn.has-tasks { color: var(--accent); }
.bell-badge {
    position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--accent); color: #fff; border-radius: var(--r-pill);
    font-size: .66rem; font-weight: 700; line-height: 16px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
}
.ctx-scope-lead { white-space: nowrap; }

/* Segmentovaný prepínač (firma, graf/tabuľka, hustota) */
.seg { display: inline-flex; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; }
.seg button, .seg a {
    border: 0; background: transparent; font: inherit; font-size: .8rem; font-weight: 620;
    color: var(--muted); padding: 5px 13px; border-radius: var(--r-pill); cursor: pointer;
    text-decoration: none; line-height: 1.3;
}
.seg button:hover, .seg a:hover { color: var(--ink); }
.seg button.is-on, .seg a.is-on { background: var(--brand); color: var(--brand-ink-on); box-shadow: var(--shadow-xs); }

/* Krokovač obdobia */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.stepper a, .stepper button {
    border: 0; background: transparent; color: var(--muted); cursor: pointer;
    width: 28px; height: 30px; display: grid; place-items: center; font-size: 16px; text-decoration: none;
}
.stepper a:hover, .stepper button:hover { background: var(--sunken); color: var(--ink); }
.stepper .val { padding: 0 10px; font-size: .83rem; font-weight: 650; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.stepper select { border: 0; background: transparent; font: inherit; font-size: .83rem; font-weight: 650; color: var(--ink); padding: 4px 2px; }

/* Mobilná horná lišta (skrytá na desktope) */
.topbar {
    display: none;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 10px 16px;
    position: sticky; top: 0; z-index: 30;
}
.nav-toggle {
    background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer; color: var(--ink-soft);
}
.topbar .brand { font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.nav-scrim { display: none; }

/* ŠÍRKA PRACOVNEJ PLOCHY — pravidlo portálu, nie vec modulu
   --------------------------------------------------------------------------
   Primárny monitor používateľov je 27" QHD (2560 × 1440). Mzdová tabuľka má
   16+ stĺpcov a 450 riadkov: musí sa na ňu zmestiť CELÁ, bez vodorovného
   scrollu. Pevný strop 1720 px, ktorý tu bol predtým, zahadzoval na QHD vyše
   600 px voľného miesta a tabuľky preto scrollovali do boku.

   Preto: pracovná plocha je TEKUTÁ (žiadny strop) a obmedzuje sa len TEXT,
   kde dlhý riadok naozaj škodí čitateľnosti (`--read-max`). Modul nemusí
   robiť nič — stačí, že nepridá vlastný `max-width` na kontajner.

   Overuje sa skriptom `tools/kontrola_sirky.py` (viď jeho hlavičku). */
.content { width: 100%; max-width: var(--content-max, none); margin: 26px auto; padding: 0 28px; }

/* Text, ktorý sa číta zľava doprava, drží rozumnú dĺžku riadka aj na 2K. */
.lead, .page-head p, .panel > p, .empty-state p, .callout p { max-width: var(--read-max); }

/* ==========================================================================
   3) Typografia a hlavičky stránok
   ========================================================================== */

h1 { margin: 0 0 5px; font-size: 1.45rem; font-weight: 700; letter-spacing: -.022em; }
h2 { font-weight: 660; letter-spacing: -.01em; }
.lead { color: var(--muted); margin: 0 0 22px; font-size: .95rem; max-width: 80ch; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.mono { font-family: var(--mono); }

/* Hlavička stránky: titul + kontext vľavo, akcie vpravo. */
.page-head { margin-bottom: 20px; display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.page-head > div:first-child { min-width: 0; }
.page-head p { margin: 0; color: var(--faint); font-size: .875rem; }
.page-head .page-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Panely / plochy
   ========================================================================== */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: none;
}
.panel h2 { margin: 0 0 14px; font-size: 1.02rem; }
/* Panel s vlastnou hlavičkou (názov + akcie vpravo) a plochým telom. */
.panel--flush { padding: 0; overflow: hidden; }
.panel-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 17px; border-bottom: 1px solid var(--line-soft);
}
.panel-head h2 { margin: 0; font-size: .95rem; font-weight: 660; }
.panel-head .panel-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-body { padding: 16px 17px; }

/* ==========================================================================
   4) Komponenty — KPI, štítky, chipy, tlačidlá, formuláre
   ========================================================================== */

.stat-grid, .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.stat-card, .kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 13px 15px 12px;
    display: flex; flex-direction: column; gap: 5px;
    position: relative;
}
.stat-card .stat-top, .kpi .kpi-lab {
    display: flex; align-items: center; gap: 7px;
    color: var(--faint); font-size: .735rem; font-weight: 640; letter-spacing: .02em;
}
.stat-card .stat-top .ti, .kpi .kpi-lab .ti { font-size: 15px; }
.stat-value, .kpi-v {
    font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
    display: flex; align-items: baseline; gap: 5px;
}
/* Jednotka pri čísle — vždy prítomná, nikdy holé číslo. */
.stat-value .unit, .kpi-v .unit { font-size: .86rem; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.stat-card .stat-sub, .kpi .kpi-sub { font-size: .755rem; color: var(--faint); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stat-card.accent  { background: var(--brand-50); border-color: var(--brand-200); }
.stat-card.accent .stat-value { color: var(--brand-ink); }
.stat-card.warn    { background: var(--warning-bg); border-color: var(--warning-line); }
.stat-card.warn .stat-value { color: var(--warning-ink); }
.stat-card.warn .stat-top { color: var(--warning); }
.stat-card.good    { background: var(--success-bg); border-color: var(--success-line); }
.stat-card.good .stat-value { color: var(--success-dark); }
.stat-card.good .stat-top { color: var(--success-dark); }
.kpi-spark { position: absolute; right: 11px; bottom: 10px; opacity: .9; }

/* Zmena oproti minulému obdobiu */
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: .755rem; }
.delta .ti { font-size: 14px; }
.delta-up { color: var(--warning); }
.delta-down { color: var(--success); }
.delta-flat { color: var(--faint); }

/* Chipy */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    color: var(--brand-ink);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: .83rem;
    font-weight: 520;
}

/* Štítky stavov — jeden komponent pre celý portál.
   Farba nesie význam: zelená hotovo, jantár čaká, bordová chyba,
   tyrkys kategória, neutrál informácia. */
.tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 650; line-height: 1.5;
    padding: 2px 9px; border-radius: var(--r-pill);
    border: 1px solid transparent; white-space: nowrap;
}
.tag .ti { font-size: 13px; }
.tag--ok   { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
.tag--wait { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-line); }
.tag--bad  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-line); }
.tag--cat  { background: var(--info-bg);    color: var(--info);    border-color: var(--info-line); }
.tag--neu  { background: var(--sunken);     color: var(--ink-soft); border-color: var(--line); }

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .72rem; font-weight: 650;
    padding: 3px 10px; border-radius: var(--r-pill);
}
.badge .ti { font-size: 14px; }
.badge--ready   { background: var(--success-bg); color: var(--success); }
.badge--planned { background: var(--sunken); color: var(--muted); }
.badge--open    { background: var(--brand-50); color: var(--brand-ink); }

/* Moduly (nástenka) */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 14px;
}
.module-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s var(--ease);
}
a.module-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.module-card--planned { background: var(--surface-2); }
.module-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-100); color: var(--brand-ink); font-size: 20px;
    margin-bottom: 12px;
}
.module-card--planned .module-icon { background: var(--line-soft); color: var(--faint); }
.module-card h3 { margin: 0 0 5px; font-size: 1rem; font-weight: 620; }
.module-card p { margin: 0 0 12px; color: var(--muted); font-size: .86rem; line-height: 1.5; }

/* --- Tlačidlá --- */
.btn, .btn-primary, .btn-ghost, .btn-submit, .btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: inherit; font-size: .855rem; font-weight: 620;
    padding: 8px 15px; border-radius: var(--r-sm);
    cursor: pointer; text-decoration: none; border: 1px solid transparent;
    transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
    line-height: 1.25;
}
.btn:active, .btn-primary:active, .btn-ghost:active, .btn-submit:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--brand-ink-on); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-submit { background: var(--success); color: #fff; }
.btn-submit:hover { filter: brightness(.92); }
.btn-ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { background: var(--sunken); border-color: var(--line-strong); color: var(--ink); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm { padding: 5px 11px; font-size: .79rem; }
.btn[disabled], .btn-primary[disabled], .btn-submit[disabled] { opacity: .5; cursor: not-allowed; }

/* --- Formulárové prvky --- */
input, select, textarea, button { font-family: inherit; }
input[type=text], input[type=search], input[type=number], input[type=password],
input[type=date], input[type=email], select, textarea {
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 8px 11px;
    font-size: .9rem;
    transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
::placeholder { color: var(--faint); }
label { font-size: .86rem; }

/* --- Filtračná lišta: hľadanie · filtre · zoradenie · počet ---------------- */
.filterbar {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--sunken);
    border: 1px solid var(--line);
    border-radius: var(--r) var(--r) 0 0;
    border-bottom: 0;
}
.filterbar + .table-wrap { border-radius: 0 0 var(--r) var(--r); }
.filterbar .fb-search {
    display: flex; align-items: center; gap: 7px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 0 10px; height: 32px; min-width: 220px; color: var(--faint);
}
.filterbar .fb-search input { border: 0; background: transparent; padding: 0; font-size: .83rem; width: 100%; }
.filterbar .fb-search input:focus { box-shadow: none; }
.filterbar select, .filterbar .fb-sel {
    height: 32px; padding: 0 9px; font-size: .82rem; font-weight: 550;
    border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}
.filterbar .fb-sel.is-on { border-color: var(--char-400); color: var(--ink); }
.filterbar .fb-right { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: .79rem; color: var(--faint); }
.filterbar .fb-count { font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* --- Záložky modulu --- */
.tabs { display: flex; gap: 3px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs button, .tabs a {
    border: 0; background: transparent; cursor: pointer; font-family: inherit;
    font-size: .855rem; font-weight: 620; color: var(--faint);
    padding: 9px 13px; border-bottom: 2px solid transparent; margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: var(--r-sm) var(--r-sm) 0 0; white-space: nowrap; text-decoration: none;
}
.tabs .ti { font-size: 16px; opacity: .75; }
.tabs button:hover, .tabs a:hover { color: var(--ink); background: var(--sunken); }
.tabs button.is-on, .tabs a.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button.is-on .ti, .tabs a.is-on .ti { opacity: 1; color: var(--accent); }
.tabs .tab-cnt {
    background: var(--sunken); border: 1px solid var(--line); color: var(--ink-soft);
    font-size: .68rem; padding: 0 6px; border-radius: var(--r-pill); font-weight: 700;
}

/* --- Hromadná lišta (výber viacerých riadkov) --- */
.bulkbar {
    display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
    background: var(--brand); color: var(--brand-ink-on);
    padding: 8px 14px; border-radius: var(--r-sm); margin-bottom: 10px; font-size: .84rem;
}
.bulkbar .btn-ghost { background: transparent; color: var(--brand-ink-on); border-color: rgba(255,255,255,.25); }
.bulkbar .btn-ghost:hover { background: rgba(255,255,255,.12); color: var(--brand-ink-on); }

/* --- Správy / toasty --- */
.messages { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 9px; }
.messages li {
    padding: 11px 15px; border-radius: var(--r);
    border: 1px solid var(--line); background: var(--surface);
    font-size: .9rem; display: flex; align-items: flex-start; gap: 10px;
}
.messages li::before { font-family: "tabler-icons"; font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.messages .success { background: var(--success-bg); border-color: var(--success-line); color: var(--success); }
.messages .success::before { content: "\ea67"; }
.messages .error, .messages .danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.messages .error::before, .messages .danger::before { content: "\ea6a"; }
.messages .warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning-ink); }
.messages .warning::before { content: "\ea06"; }
.messages .info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.messages .info::before { content: "\eac5"; }

/* ==========================================================================
   5) Tabuľkový engine — jeden pre celý portál
   --------------------------------------------------------------------------
   Vždy vo wrape s ohraničenou výškou: široká tabuľka s holým overflow-x sa
   stane zvislým scroll-containerom a pod kurzorom zožerie koliesko myši.
   ========================================================================== */

.table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: auto;
    max-height: calc(100vh - 190px);
    background: var(--surface);
}
.table-wrap--short { max-height: 460px; }
.table-wrap--auto { max-height: none; }

table.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--cell-fs); }
.tbl thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--sunken); color: var(--ink-soft);
    font-size: .735rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase;
    text-align: left; padding: 0 var(--cell-x); height: 36px; white-space: nowrap;
    border-bottom: 1px solid var(--line);
    box-shadow: inset 0 -1px 0 var(--line);
}
/* Skupinová hlavička nad stĺpcami */
.tbl thead th.grp {
    text-align: center; height: 26px; font-size: .68rem; color: var(--faint);
    background: var(--tonal); border-left: 1px solid var(--line);
}
.tbl thead tr.row2 th { top: 26px; }
.tbl th.n, .tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody td {
    padding: 0 var(--cell-x); height: var(--row-h);
    border-bottom: 1px solid var(--line-soft); white-space: nowrap; color: var(--ink);
}
.tbl tbody td.wrap { white-space: normal; }
.tbl tbody tr:hover td { background: var(--tonal); }
.tbl tbody tr.is-sel td { background: var(--cream-soft); }

/* Zmrazené stĺpce — pri vodorovnom scrolle musí byť vidieť, koho riadok je. */
.tbl .stick { position: sticky; z-index: 2; background: var(--surface); }
.tbl thead .stick { z-index: 4; background: var(--sunken); }
.tbl tbody tr:hover .stick { background: var(--tonal); }
.tbl .stick-1 { left: 0; }
.tbl .stick-2 { left: 104px; box-shadow: 1px 0 0 var(--line); }

/* Súčtový riadok — prilepený dole, aby bol vidieť pri scrollovaní. */
.tbl tfoot td {
    position: sticky; bottom: 0; background: var(--tonal); font-weight: 700;
    height: 40px; padding: 0 var(--cell-x);
    border-top: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 var(--line-strong);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tbl tfoot td.stick { z-index: 3; background: var(--tonal); }

/* Stav riadka — pruh vľavo, nie zafarbený riadok (ten pri 300 riadkoch
   prestane fungovať a zožerie čitateľnosť čísel). */
.tbl tbody tr.st-bad  > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.tbl tbody tr.st-warn > td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.tbl tbody tr.st-ok   > td:first-child { box-shadow: inset 3px 0 0 var(--success); }

/* Bunka so zamestnancom (avatar + meno, meno sa nikdy neláme) */
.emp { display: flex; align-items: center; gap: 9px; }
.emp .emp-av {
    width: 26px; height: 26px; border-radius: 50%; background: var(--cream-soft);
    color: var(--ink-soft); display: grid; place-items: center;
    font-size: .68rem; font-weight: 700; flex: 0 0 auto;
}
.emp b { font-weight: 590; white-space: nowrap; }
.osc { font-family: var(--mono); font-size: .72rem; color: var(--faint); }

/* Peniaze v tabuľke — dva rôzne prípady, dve rôzne triedy:
     .money        = peňažný ÚDAJ (len zarovnanie a tabulárne číslice),
     .money-field  = peňažné POLE, do ktorého sa dá písať (orámované).
   Nemiešať. Moduly (Zmluvy, Zálohy, Úlohy) používali `.money` v prvom
   význame dávno predtým — keď systém pod tým istým názvom zaviedol rámček,
   orámovala sa im každá suma vrátane pomlčky. Komponent systému preto nesmie
   obsadzovať takto všeobecné meno. */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-field, .tbl input.money-field {
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px;
    border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-xs);
    padding: 3px 7px; min-width: 86px; text-align: right;
    font-variant-numeric: tabular-nums; font-size: .83rem;
}
.money-field.is-edit { border-color: var(--line-strong); background: var(--tonal); }
.money-field .cur { color: var(--faint); font-size: .76rem; }

/* Mini pásik (podiel, stav prípravy) */
.bar-mini { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; min-width: 64px; }
.bar-mini > i { display: block; height: 100%; border-radius: 3px; }

/* Prepínač (pásková, aktívne) */
.switch {
    width: 34px; height: 19px; border-radius: var(--r-pill); background: var(--char-300);
    position: relative; display: inline-block; transition: background .15s var(--ease);
    cursor: pointer; border: 0; padding: 0;
}
.switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
    border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs);
    transition: transform .15s var(--ease);
}
.switch.is-on { background: var(--success); }
.switch.is-on::after { transform: translateX(15px); }

/* Stránkovanie */
.pager { display: flex; align-items: center; gap: 6px; padding: 12px 2px; font-size: .84rem; color: var(--muted); }
.pager a, .pager span.cur {
    padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid var(--line);
    text-decoration: none; color: var(--ink-soft); background: var(--surface);
}
.pager a:hover { background: var(--sunken); }
.pager span.cur { background: var(--brand); color: var(--brand-ink-on); border-color: transparent; font-weight: 650; }

/* ==========================================================================
   6) Grafy
   ========================================================================== */

.chart { width: 100%; height: auto; display: block; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .axisline { stroke: var(--axis); stroke-width: 1; }
.chart .axislabel { fill: var(--faint); font-size: 11px; font-family: var(--font); }
.chart .valuelabel { fill: var(--ink-soft); font-size: 11px; font-weight: 700; font-family: var(--font); }
.chart .hit { fill: transparent; cursor: pointer; }
.chart-box { position: relative; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 15px; padding: 2px 2px 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-soft); }
.chart-legend i { width: 11px; height: 11px; border-radius: 3px; display: block; flex: 0 0 auto; }
.chart-tip {
    position: absolute; pointer-events: none; z-index: 20;
    background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    box-shadow: var(--shadow); padding: 9px 11px; font-size: .79rem; min-width: 170px;
    opacity: 0; transform: translateY(4px); transition: opacity .1s, transform .1s;
}
.chart-tip.is-on { opacity: 1; transform: translateY(0); }
.chart-tip b { display: block; font-size: .82rem; margin-bottom: 6px; }
.chart-tip .r { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.chart-tip .r i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.chart-tip .r u { margin-left: auto; text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Rozkladový pásik (podiel kanálov) */
.mixbar { display: flex; height: 24px; border-radius: var(--r-sm); overflow: hidden; gap: 2px; margin-bottom: 12px; }
.mixbar > i { display: block; height: 100%; }

/* ==========================================================================
   7) Stavy — prázdno, načítanie, zásuvka
   ========================================================================== */

.empty-state { text-align: center; padding: 44px 20px; }
.empty-state .es-ic {
    width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--sunken);
    color: var(--faint); display: grid; place-items: center; margin: 0 auto 14px; font-size: 25px;
}
.empty-state h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 650; }
.empty-state p { color: var(--faint); font-size: .88rem; max-width: 48ch; margin: 0 auto 16px; }

.skeleton {
    background: linear-gradient(90deg, var(--sunken) 25%, var(--line-soft) 37%, var(--sunken) 63%);
    background-size: 400% 100%; animation: skl 1.5s linear infinite;
    border-radius: var(--r-xs); height: 11px;
}
@keyframes skl { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Zásuvka s detailom — drží kontext zoznamu. */
.drawer {
    background: var(--raised); border-left: 1px solid var(--line-strong);
    width: 392px; flex: 0 0 392px; display: flex; flex-direction: column;
}
.drawer-head { padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 10px; }
.drawer-head h3 { margin: 0 0 2px; font-size: 1rem; }
.drawer-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 15px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 5px 12px; font-size: .85rem; margin: 0; }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; font-weight: 550; }

/* Časová os (história rozhodnutí) */
.timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.timeline li { display: flex; gap: 11px; position: relative; padding: 0 0 14px; }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline .tl-dot {
    width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--surface);
    background: var(--char-400); flex: 0 0 auto; margin-top: 3px;
}
.timeline .tl-dot.ok { background: var(--success); }
.timeline .tl-dot.wait { background: var(--warning); }
.timeline .tl-dot.bad { background: var(--danger); }
.timeline .tl-txt { font-size: .83rem; line-height: 1.45; }
.timeline .tl-txt b { font-weight: 620; }
.timeline .tl-txt span { display: block; color: var(--faint); font-size: .76rem; }

/* ==========================================================================
   8) Prihlásenie
   ========================================================================== */

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr clamp(400px, 36%, 620px);
}

.login-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: clamp(36px, 3.4vw, 68px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    box-shadow: inset -1px 0 0 rgba(239, 62, 61, .4);
    background:
        radial-gradient(100% 75% at 92% 6%, rgba(239, 62, 61, .20), transparent 58%),
        linear-gradient(155deg, var(--char-600), var(--char-700) 46%, var(--char-900));
}
.login-hero::before {
    content: "";
    position: absolute; right: 4%; top: 50%;
    transform: translateY(-50%);
    width: min(56%, 700px);
    aspect-ratio: var(--wm-ratio);
    background-color: #fff;
    -webkit-mask: var(--wm) center / contain no-repeat;
            mask: var(--wm) center / contain no-repeat;
    opacity: .06;
    pointer-events: none;
}
.login-hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--grain);
    opacity: .03;
    pointer-events: none;
}
.login-hero > * { position: relative; z-index: 1; }

.login-hero .lh-brand { align-self: start; display: flex; align-items: center; gap: 12px; font-size: 1.22rem; font-weight: 700; }
.login-hero .lh-mark { width: 38px; height: 38px; flex: 0 0 38px; display: block; }
.login-hero .lh-body { align-self: center; max-width: 46ch; }
.login-hero h2 { font-size: clamp(1.9rem, 2.5vw, 3rem); font-weight: 700; margin: 0 0 14px; line-height: 1.12; letter-spacing: -.025em; }
.login-hero p { color: rgba(255,255,255,.78); font-size: clamp(1rem, .9vw, 1.1rem); max-width: 42ch; margin: 0; }
.login-hero .lh-foot { align-self: end; font-size: .8rem; color: rgba(255,255,255,.5); }
.login-hero ul { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
.login-hero ul li { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.85); font-size: .95rem; }
.login-hero ul li .ti { font-size: 19px; color: var(--accent-soft); }

.login-panel {
    display: flex; align-items: center; justify-content: center;
    padding: clamp(28px, 3vw, 56px);
    background: var(--surface);
}
.login-card { width: 100%; max-width: 400px; }
.login-card h1 { font-size: clamp(1.5rem, 1.5vw, 1.8rem); margin-bottom: 8px; letter-spacing: -.02em; }
.login-card .sub { color: var(--muted); margin: 0 0 28px; }

.btn-ms {
    display: flex; align-items: center; justify-content: center; gap: 11px;
    width: 100%; padding: 13px; border-radius: var(--r);
    background: var(--brand); color: var(--brand-ink-on); font-weight: 600; font-size: .98rem;
    text-decoration: none; border: none; cursor: pointer; box-shadow: var(--shadow-sm);
    transition: background .12s, transform .05s;
}
.btn-ms:hover { background: var(--brand-dark); }
.btn-ms:active { transform: translateY(1px); }
.ms-glyph { display: grid; grid-template-columns: 9px 9px; grid-gap: 2px; }
.ms-glyph span { width: 9px; height: 9px; display: block; }
.login-note { margin-top: 22px; font-size: .82rem; color: var(--faint); text-align: center; }
.form-error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); padding: 11px 13px; border-radius: var(--r-sm); font-size: .9rem; margin-bottom: 16px; }

/* ==========================================================================
   Pätka
   ========================================================================== */

.footer { text-align: center; color: var(--faint); font-size: .78rem; padding: 24px 0 36px; margin-top: auto; }

/* ==========================================================================
   Responzívne
   ========================================================================== */

/* --- Menšie desktopy: HD notebook a 1600×900 -----------------------------
   Primárny monitor portálu je 27" QHD a plocha je tekutá (viď `.content`).
   Na 1366 px notebooku ale samotné bočné menu zožerie 17 % šírky a široké
   tabuľky (Príprava, Výpočet, Dochádzka HR) sa aj tak nezmestia — každý
   ušetrený pixel je jeden stĺpec navyše, ktorý netreba doscrollovať.

   Zužuje sa LEN chróm — menu a bočné okraje. Písmo, výška riadka ani
   veľkosť čísel sa nemenia: mzdár číta tie isté sumy, len má na ne viac
   miesta. Nad 1600 px ostáva všetko presne tak, ako bolo. */
@media (min-width: 861px) and (max-width: 1600px) {
    :root { --sidebar-w: 206px; }
    .content { margin: 20px auto; padding: 0 18px; }
}

@media (min-width: 861px) and (max-width: 1400px) {
    :root { --sidebar-w: 188px; }
    .content { padding: 0 12px; }
    /* Užšie bunky len v pohodlnom režime — kompaktný má vlastných 9 px a
       tie sa nesmú prepísať na väčšiu hodnotu, inak by „Kompaktne" bolo
       na HD notebooku širšie ako „Pohodlne". */
    :root:not([data-density="compact"]) { --cell-x: 9px; }
    /* Dlhý nadpis stĺpca („Výnosy YTD (účt.)") sa smie zalomiť do dvoch
       riadkov. Hlavička narastie o riadok, tabuľka ušetrí desiatky pixelov
       na šírke — a hlavička sa číta raz, dáta stále. */
    .tbl thead th, .fin-table th, .rep-table thead th, .zm-table thead th,
    .konta-table thead th, .rbac-table thead th { white-space: normal; }
}

@media (max-width: 980px) {
    .ctxbar { padding: 8px 16px; gap: 9px; }
    .ctx-scope span:not(.ctx-sep) { display: none; }
}

@media (max-width: 860px) {
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100vh;
        transform: translateX(-100%); transition: transform .22s var(--ease);
        box-shadow: var(--shadow-lg);
    }
    body.nav-open .sidebar { transform: translateX(0); }
    body.nav-open .nav-scrim {
        display: block; position: fixed; inset: 0; z-index: 35;
        background: rgba(25, 21, 21, .5);
    }
    .topbar { display: flex; }
    .ctxbar { position: static; }
    .content { margin: 18px auto; padding: 0 16px; }
    h1 { font-size: 1.3rem; }
    .login-page { grid-template-columns: 1fr; }
    .login-hero { display: none; }
    .page-head .page-acts { margin-left: 0; width: 100%; }
}

/* Telefón — poistka pracovnej plochy.
   ---------------------------------------------------------------------------
   Chyba z 1.61.3 ukázala, že jediná cudzia položka v shell-flexboxe (vtedy
   pätička, ktorú tam vyhodila nevyvážená značka) vie stlačiť `.app-body`
   na nulu — a celý obsah s ňou. Na širokej obrazovke to nevidno, na telefóne
   sa stránka rozpadne. Tieto pravidlá držia obsah na plnej šírke aj vtedy,
   keď sa do shellu dostane niečo, čo tam nepatrí.
   Breakpoint 860 px vyššie ostáva v platnosti — toto je len prísnejší stupeň. */
@media (max-width: 560px) {
    /* Nikto v shelli si nesmie vypýtať viac, než je na obrazovke. */
    .layout > * { min-width: 0; }
    .app-body { flex: 1 1 100%; width: 100%; min-width: 0; }
    .content { width: 100%; max-width: none; }

    /* Rail je mimo toku (fixed) a odsunutý — nesmie zaberať miesto ani chytať dotyk. */
    .sidebar { position: fixed; }
    body:not(.nav-open) .sidebar { pointer-events: none; }

    /* Aby lepiaca lišta nesedela na tabuľke: tabuľka je vlastná scrollovacia
       plocha, ktorá sa zmestí pod ňu aj s vlastnou hlavičkou. */
    .table-wrap, .mz-tablewrap { max-height: calc(100vh - 150px); }
}

@media print {
    .sidebar, .ctxbar, .topbar, .footer, .page-acts, .filterbar { display: none !important; }
    .content { max-width: none; margin: 0; padding: 0; }
    .table-wrap { max-height: none; overflow: visible; border: 0; }
    .panel { break-inside: avoid; }
}

/* --- Stráž neuložených zmien (static/js/nezabudni.js) --------------------- */
.nz-chip { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px;
    background: var(--warning-bg); border: 1px solid var(--warning-line);
    color: var(--warn-800); border-radius: var(--r-pill); padding: 4px 11px;
    font-size: .78rem; font-weight: 650; }
.nz-chip[hidden] { display: none; }
.nz-chip .ti { font-size: 15px; }

.nz-back { position: fixed; inset: 0; z-index: 70; background: rgba(25, 21, 21, .5);
    display: flex; align-items: center; justify-content: center; padding: 16px; }
.nz-box { width: min(600px, 100%); background: var(--surface); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: 22px 24px; }
.nz-box h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 660;
    display: flex; align-items: center; gap: 8px; color: var(--warn-800); }
.nz-box h3 .ti { font-size: 20px; }
.nz-box p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.nz-akcie { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.nz-akcie button { white-space: nowrap; }
.nz-akcie .btn-primary { margin-left: auto; }

.nz-obnova { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--cream-tint); border: 1px solid var(--cream-200);
    border-left: 4px solid var(--char-500); color: var(--ink-soft);
    border-radius: var(--r); padding: 11px 15px; margin-bottom: 14px; font-size: .9rem; }
.nz-obnova .ti { font-size: 18px; color: var(--char-500); }
.nz-obnova span { flex: 1 1 320px; }
.nz-obnova strong { color: var(--ink); }
.nz-obnova button { flex: 0 0 auto; }