/* ==========================================================================
   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 {
    /* Podklad ilustrácií scén (bezšvové štúdiové pozadie obrázkov) — svetlý ostrov
       chybovej stránky a prihlásenia v každom vzhľade aj v tmavej téme. */
    --scena-podklad: #f5f2ec;
    /* --- Vrstvy (z-index) — jedna škála pre celý portál (audit E11, 24. 10. 2026).
       Predtým 34 rôznych čísel (15 … 1200) bez vzťahu. Diel nad obsahom berie
       úroveň odtiaľto; blízky sused o kúsok vyššie/nižšie = calc(var(--z-…) ± n).
       0–5 natvrdo smie len poradie VNÚTRI dielu (bunka, ikona, lepkavý stĺpec). --- */
    --z-obsah: 20;       /* lepkavá lišta akcií, bublina v obsahu */
    --z-hlavicka: 30;    /* lepkavá horná lišta a kontextová lišta */
    --z-menu: 40;        /* bočné menu, padací panel, našepkávač */
    --z-plavajuce: 60;   /* plávajúce tlačidlá (Paviel, prepnutie), hlavička vzhľadov */
    --z-vrstva: 800;     /* zásuvka, rýchly skok, okná nad obsahom (Nexus.vrstva) */
    --z-hlasky: 950;     /* toasty, potvrdenie, tip */
    --z-max: 1000;       /* odkaz Preskočiť na obsah, pás priebehu */

    /* --- Značková červená (600 = #ef3e3d z manuálu) --- */
    --red-50:  #fff0f0;
    --red-200: #fcc1c0;
    --red-400: #f47371;
    --red-600: #ef3e3d;
    --red-700: #ce2322;
    --red-800: #9c1e1c;

    /* --- Značková uhlíková (700 = #2e2828 z manuálu) --- */
    --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-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:     #7f7373;   /* 4,56 : 1 na karte — aj zástupný text poľa (WCAG AA) */
    --ink-inv:   #ffffff;

    /* --- Linky --- */
    --line:        #e4e0d8;
    --line-soft:   #efece5;
    --line-strong: #d3cec2;
    /* Okraj ovládacieho prvku (pole, rozbaľovačka, hľadanie) — NIE linka.
       WCAG 1.4.11: hranica poľa >= 3 : 1 voči ploche, podkladu, zapustenej
       aj zdvihnutej ploche (kontrola vzhľadov). Linky tabuliek a kariet
       ostávajú jemné; každá šablóna si ho nastaví v SVETLEJ aj TMAVEJ. */
    --pole-okraj:  #8a867b;
    /* Silnejší okraj (hover, vybraný filter, rozpísané pole) — odvodený,
       šablóny ho nenastavujú. */
    --pole-okraj-hover: color-mix(in srgb, var(--pole-okraj), var(--ink) 40%);

    /* --- 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, .49);   /* nadpis sekcie: 4,6 : 1 */
    --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;   /* daň */
    --c5: #6f7d24;   /* sociálna poisťovňa */
    --c6: #5b6b8a;   /* zdravotná poisťovňa */
    --c7: #a15c3a;   /* voľná siedma séria */
    /* Pásma ukazovateľa — PEVNÉ hranice, nie relatívna mierka.
       Relatívna mierka („najtmavšia je najväčšia v mape") ukáže drift, ale
       nepovie, či je 44 % veľa; pri labor coste to vie každý prevádzkar
       spamäti a graf to má povedať tiež. Rampa ide zámerne cez žltú do
       červenej: prvý skok (do 30 % → nad 30 %) musí trhnúť okom.
       Ladené na VÝPLŇ pod tmavým textom; posledné pásmo má svetlý text. */
    --pas-0: #ded9d1;   /* nula alebo záporné — nie je to výsledok */
    --pas-1: #cbe5df;   /* v poriadku */
    --pas-2: #f7e3b2;   /* sledovať */
    --pas-3: #edb04a;   /* pozor */
    --pas-4: #dd7a58;   /* riešiť */
    --pas-5: #b4342c;   /* kritické */
    --pas-ink:   #33302c;          /* text v pásmach 1–4 */
    --pas-ink-5: #ffffff;          /* text v pásme 5 */
    --pas-bez:   #efebe4;          /* bunka bez dát — nie je to nula */

    /* --- 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);

    /* --- Pole formulára: výška, bočné odsadenie, písmo (sekcia „Formulárové
       prvky"). Modul ich nemení — kompaktná mriežka nosí .nx-pole--maly,
       dotykový formulár .nx-pole--velky. --- */
    --pole-h: 36px;
    --pole-px: 11px;
    --pole-pismo: .9rem;

    /* --- 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. Jediná definícia: `[data-theme="dark"]` na <html>;
   „podľa systému" ho nastaví skript v hlavičke base.html (žiadna kópia
   v @media — tá bola mŕtva, len sa musela udržiavať zhodná). */
: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;
    --pole-okraj:  #756d6b;

    --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;
    --c6: #7d8fb3; --c7: #c07a52;
    --pas-0: #3a3733;
    --pas-1: #1d4f47; --pas-2: #6b5320; --pas-3: #9a6c17; --pas-4: #a9502f; --pas-5: #8e2a24;
    --pas-ink: #f4efe8; --pas-ink-5: #ffffff; --pas-bez: #2a2725;

    --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; }

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); }

/* Fokus z klávesnice — jeden pre celý portál (WCAG 2.4.7, kontrast prstenca
   stráži core.vzhlady_kontrola). `html ` = váha (0,1,1): prebije tieň
   jednotriedneho komponentu z neskoršieho súboru (.pav-fab, .stat-card), ale
   nie zámerný `.x:focus-visible` modulu. Priehľadný obrys nič nekreslí, no
   v režime vysokého kontrastu Windows (forced-colors) ho systém zafarbí —
   tieň tam zmizne a bez obrysu by fokus nebolo vidno vôbec. Cieľ fokusu
   zo skriptu (`tabindex="-1"`: panel zásuvky, <main> po „Preskočiť na
   obsah") sa neorámuje — `:where` nepridáva váhu. */
html :focus-visible:not(:where([tabindex="-1"])) { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus); border-radius: var(--r-xs); }

/* Číselné hodnoty zarovnané pod sebou (mzdy) */
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: var(--z-menu);
}

/* 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: 1.125rem; 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 calc(var(--r-xs) / 2) calc(var(--r-xs) / 2) 0;
    background: var(--accent);
}
/* Počítadlo úloh pri module */
.side-nav a .nav-cnt {
    margin-left: auto; background: var(--accent-fill, var(--accent)); color: var(--accent-ink);
    font-size: .68rem; font-weight: 700; border-radius: var(--r-pill);
    padding: 0 6px; line-height: 17px; min-width: 18px; text-align: center;
}

/* Sekcia menu (nadpis + moduly) — v bočnom menu neviditeľný obal; vzhľady
   s menu hore alebo v doku z neho robia rozbaľovaciu ponuku (vzhlady/*.css). */
.side-grp { display: contents; }
.side-sys { display: flex; flex-direction: column; gap: 1px; }
.sidebar-podpis, .side-plus, .side-pomoc { display: none; }

/* 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; }
/* Vzhľad portálu (paleta) vedľa odhlásenia — rovnaké tlačidlo, iný cieľ. */
.foot-btn, .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: 1rem;
    transition: background .12s, color .12s, border-color .12s;
}
.logout-form button:hover { background: rgba(239, 62, 61, .18); color: #fff; border-color: transparent; }
.foot-btn { text-decoration: none; }
.foot-btn:hover, .foot-btn.is-on { background: var(--sb-hover); color: var(--sb-ink-strong); 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: var(--z-hlavicka);
}
.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: 1.0625rem; 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-fill, var(--accent)); color: var(--accent-ink); 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, mesiac, filter
   zoznamu). Keď je volieb veľa (12 mesiacov), zalomí sa. */
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; }
.seg[hidden] { display: none; }
.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(--pole-okraj); 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: 1rem; 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 { height: auto; 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: var(--z-hlavicka);
}
.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: 1.25rem; 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; }

/* Preskočiť na obsah (base.html) — mimo obrazovky, kým nedostane fokus. */
.nx-preskoc {
    position: fixed; top: 10px; left: 10px; z-index: var(--z-max);
    padding: 10px 16px; border-radius: var(--r-sm);
    background: var(--brand); color: var(--brand-ink-on); font-weight: 600; text-decoration: none;
    transform: translateY(-160%);
}
.nx-preskoc:focus { transform: 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: none; margin: 26px auto; padding: 0 28px; }
/* Na širokom monitore má obsah vpravo pás pod plávajúcim tlačidlom Paviela
   (.pav-fab: 56 px, 22 px od okraja) — inak pri skrolovaní zakrýval posledný
   stĺpec tabuliek (audit 31. 10. 2026). Pod 1600 px by pás bral miesto tabuľkám. */
@media (min-width: 1600px) {
    /* :root[data-design] — vzhľady (vzhlady.css, terrace.css) menia odsadenie silnejším selektorom. */
    body:has(.pav-fab) .content, :root[data-design] body:has(.pav-fab) .content { padding-right: 64px; }
}

/* Text, ktorý sa číta zľava doprava, drží rozumnú dĺžku riadka aj na 2K. */
.page-head p, .panel > p, .empty-state 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; }
.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 {
    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 {
    display: flex; align-items: center; gap: 7px;
    color: var(--faint); font-size: .735rem; font-weight: 640; letter-spacing: .02em;
}
.stat-card .stat-top .ti { font-size: .9375rem; }
/* Číslo a jednotka sa smú zalomiť: v úzkej dlaždici (tablet, 3–4 v rade)
   a s väčším písmom vzhľadu (Bordeaux 1.85rem) „1 819 578,72 € čerpaných“
   pretieklo kartu o 5–22 px. Jednotka radšej spadne pod číslo, než aby
   vytlačila stránku do boku (D-007, meria `tools/kontrola_mobil.py`). */
.stat-value, .kpi-v {
    font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px;
}
/* Jednotka pri čísle — vždy prítomná, nikdy holé číslo. */
/* Jednotka pri čísle („€", „%") — rovnaká v KPI dlaždici aj mimo nej
   (Reporting miezd, Finančný reporting). */
.unit, .stat-value .unit, .kpi-v .unit { font-size: .86rem; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.stat-card .stat-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); }
/* Záporné / chybné číslo (napr. strata vo Finančnom reportingu). */
.stat-card.danger  { background: var(--danger-bg); border-color: var(--danger-line); }
.stat-card.danger .stat-value { color: var(--danger); }
.stat-card.danger .stat-top { color: var(--danger); }
/* Druhá kategória vedľa accent (hotovosť vedľa pásky v Reportingu miezd). */
.stat-card.info    { background: var(--info-bg); border-color: var(--info-line); }
.stat-card.info .stat-value { color: var(--info); }
.stat-card.info .stat-top { color: var(--info); }

/* --- Nástenka: šírka dlaždice a chybový stav ----------------------------
   Dlaždica si šírku nenesie sama — dáva ju rozloženie používateľa
   (`core.dlazdice`), šablóna ju len vypíše ako triedu. Mriežka je `auto-fit`,
   takže širšia dlaždica sa na úzkej obrazovke sama vráti na jeden stĺpec
   (reset je v `mobil.css`).

   Chybová dlaždica je vedome šedá a prerušovaná: nula by vyzerala ako údaj
   a človek by jej veril. */
.stat-grid .nas-w2 { grid-column: span 2; }
.stat-grid .nas-w4 { grid-column: span 4; }

/* Kostra — to, čo je na obrazovke, kým sa dlaždica doťahuje. Má rovnakú výšku
   ako hotová dlaždica, aby pri doplnení obsahu nič neposkočilo pod rukou. */
.stat-card--kostra { min-height: 92px; }
.stat-card--kostra .skeleton--val { height: 24px; width: 46%; margin: 3px 0 4px; }
.stat-card--kostra .skeleton--sub { height: 9px; width: 72%; }
/* Bez JavaScriptu (noscript) sa dlaždice nedoplnia — veta nad modulmi. */
.nas-bez-js { margin: -8px 0 20px; }

/* --- Nástenka: režim úprav ----------------------------------------------
   Editor nie je vlastná obrazovka, len druhý stav tej istej. Dôvod je
   praktický: človek vidí svoje skutočné čísla, keď si dlaždice preskladáva,
   nie prázdne obdĺžniky s názvami.

   Plocha sa v úpravách rozdelí na mriežku a katalóg. Na úzkej obrazovke sa
   needituje (viď mobil.css) — preskladávanie ťahaním na telefóne je boj. */
.nas-plocha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
body.nas-upravy .nas-plocha { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
body.nas-upravy .nas-bez-uprav { display: none; }

body.nas-upravy .stat-card {
    border-style: dashed; border-color: var(--line-strong);
    padding-left: 30px;            /* miesto pre úchyt, nech text nepodlieza */
}
/* Názov dlaždice sa musí nástrojom vyhnúť, nie podliezať ich. Na úzkej
   dlaždici (štvrtina mriežky) sa inak prekryjú a z „Zálohy na schválenie"
   ostane „Zálohy na…" pod tlačidlami. */
body.nas-upravy .stat-card .stat-top { padding-right: 76px; min-height: 26px; }
body.nas-upravy a.stat-card { cursor: default; }
body.nas-upravy a.stat-card--link::after { display: none; }

.nas-uchyt {
    position: absolute; left: 8px; top: 11px; color: var(--char-300);
    font-size: 1.0625rem; cursor: grab; line-height: 1; display: none;
}
body.nas-upravy .nas-uchyt { display: block; }
.nas-uchyt:active { cursor: grabbing; }

.nas-nastroje { position: absolute; right: 9px; top: 8px; display: flex; gap: 5px; align-items: center; }
.nas-sirky { display: flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.nas-sirky button {
    border: 0; border-right: 1px solid var(--line); background: transparent;
    color: var(--faint); font: inherit; font-size: .72rem; font-weight: 650;
    padding: 3px 7px; cursor: pointer; min-width: 22px;
}
.nas-sirky button:last-child { border-right: 0; }
.nas-sirky button:hover { background: var(--tonal); color: var(--ink); }
.nas-sirky button.je { background: var(--char-700); color: var(--ink-inv); }
.nas-odobrat {
    border: 1px solid var(--line); background: var(--surface); color: var(--muted);
    border-radius: var(--r-sm); width: 24px; height: 24px; cursor: pointer;
    display: grid; place-items: center; padding: 0;
}
.nas-odobrat:hover { border-color: var(--danger-line); color: var(--danger); background: var(--danger-bg); }

/* Katalóg dlaždíc. Lepí sa hore, aby bol po ruke aj po odscrollovaní —
   rozhodovanie „čo si pridám" trvá dlhšie než jednu obrazovku. */
.nas-katalog {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    position: sticky; top: 14px; max-height: calc(100dvh - 40px);
    display: flex; flex-direction: column;
}
.nas-katalog[hidden] { display: none; }
.nas-katalog h3 { margin: 0; padding: 14px 16px 11px; font-size: .95rem; font-weight: 650; border-bottom: 1px solid var(--line-soft); }
.nas-hladanie { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.nas-hladanie input { width: 100%; }
.nas-katalog-telo { overflow-y: auto; }
.nas-grp-h {
    font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--faint); padding: 12px 16px 5px; font-weight: 650;
}
.nas-ci { display: flex; gap: 10px; align-items: flex-start; padding: 9px 14px; border-top: 1px solid var(--line-soft); }
.nas-ci:hover { background: var(--tonal); }
.nas-ci-ic {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--r-sm);
    background: var(--brand-50); color: var(--brand-ink); display: grid; place-items: center; font-size: .9375rem;
}
.nas-ci-tx { flex: 1; min-width: 0; }
.nas-ci-tx b { display: block; font-size: .85rem; font-weight: 600; }
.nas-ci-tx span { display: block; font-size: .76rem; color: var(--faint); line-height: 1.45; }
.nas-ci-add {
    flex: 0 0 26px; width: 26px; height: 26px; border: 1px solid var(--line-strong);
    background: var(--surface); border-radius: var(--r-sm); color: var(--ink-soft);
    cursor: pointer; display: grid; place-items: center; padding: 0;
}
.nas-ci-add:hover { background: var(--char-700); border-color: var(--char-700); color: var(--ink-inv); }
.nas-ci.je-tam { opacity: .45; }
.nas-ci.je-tam .nas-ci-add { visibility: hidden; }
.nas-ci.je-tam .nas-ci-tx b::after { content: " · už na nástenke"; font-weight: 400; font-size: .72rem; color: var(--faint); }
.nas-katalog-pat {
    margin: 0; padding: 11px 16px; border-top: 1px solid var(--line-soft);
    font-size: .74rem; color: var(--faint); line-height: 1.5; background: var(--tonal);
    border-radius: 0 0 var(--r) var(--r);
}

/* Spodná lišta úprav — drží sa na očiach, aby sa needitovalo naslepo. */
.nas-lista {
    position: sticky; bottom: 12px; z-index: calc(var(--z-obsah) - 5); margin-top: 16px;
    background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r);
    padding: 10px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.nas-lista[hidden] { display: none; }
.nas-lista-t { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.nas-lista-sp { flex: 1; }

/* Zástupka dlaždice, ktorá práve nemá čo ukázať. Vidno ju LEN v režime úprav:
   človek ju vedome pridal z katalógu, takže musí vidieť, že tam je a že sa
   uloží — inak to vyzerá, že pridanie nefunguje. */
.stat-card.nas-prazdna { background: var(--tonal); border-style: dashed; }
.stat-card.nas-prazdna .stat-value { color: var(--muted); }

/* Chybová dlaždica. Vedome šedá a prerušovaná — nula by vyzerala ako údaj
   a človek by jej veril. */
.stat-card--chyba { background: var(--sunken); border-style: dashed; }
.stat-card--chyba .stat-chyba-t { font-size: 1.02rem; font-weight: 650; color: var(--muted); }
.stat-card--chyba .stat-sub { margin-top: 2px; }

/* Zmena oproti minulému obdobiu */
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: .755rem; }
.delta .ti { font-size: .875rem; }

/* 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: .8125rem; }
.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); }
/* Audit E6 (24. 10. 2026): stavové pilulky modulov (dz-, zl-, sv-, pr-, pl-,
   zm-pill, z-/zl-/zm-tag, vp-chip …) sú tento štítok. `--brand` = plný
   („čaká na teba“, „na rade“), `--akcent` = jemný značkový, `--obrys` = len
   obrys (číslo +/−, sedí v riadku), `--sm` = v texte vedľa mena; `.dot` =
   bodka stavu pred textom. Ako tlačidlo / odkaz (`button.tag`, `a.tag`). */
.tag--brand  { background: var(--brand);    color: var(--brand-ink-on); border-color: transparent; }
.tag--akcent { background: var(--brand-50); color: var(--brand-ink); border-color: var(--brand-200); }
.tag--obrys  { background: var(--surface); }
.tag--sm { font-size: .68rem; padding: 1px 7px; }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
a.tag, button.tag { font-family: inherit; cursor: pointer; text-decoration: none; }
a.tag:hover, button.tag:hover { border-color: currentColor; }

/* Čip ako voľba / filter (audit E6 — namiesto tk-, mzf-, zu-, cap-, tz-,
   fa-chip v moduloch). Zapnutý = `.is-on`; s checkboxom vnútri sa zapne sám
   (`:has`, v Edge 83 ostane len začiarknutie). `--pridaj` = čip, ktorý niečo
   pridá („+ ZYL“), `--carkovane` = voľba mimo radu (drobné, bez prevádzky,
   zrušiť všetko), `--zrus` = aktívny filter, klik ho zruší, `--ok` = hotová
   vec, `--sm` = menší v riadku či lište. */
.chip--volba, .chip--pridaj, .chip--zrus {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: inherit; line-height: 1.25; cursor: pointer; text-decoration: none;
    transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.chip--volba { background: var(--surface); border-color: var(--line); color: var(--ink-soft); font-weight: 600; }
.chip--volba .ti, .chip--pridaj .ti { font-size: .875rem; }
.chip--volba input { margin: 0; }
.chip--volba:hover { border-color: var(--brand-200); color: var(--brand-ink); }
.chip--volba.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink-on); }
@supports selector(:has(a)) {
    .chip--volba:has(input:checked) { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-ink); }
}
.chip--pridaj { background: var(--surface); border-color: var(--brand); color: var(--brand-ink); font-weight: 700; }
.chip--pridaj::before { content: "+ "; font-weight: 800; }
.chip--pridaj:hover, .chip--pridaj:focus-visible { background: var(--brand); color: var(--brand-ink-on); }
.chip--zrus { background: var(--tonal); border-color: var(--line); color: var(--ink-soft); font-weight: 520; }
.chip--zrus:hover { border-color: var(--danger-line); color: var(--danger); }
.chip--zrus .ti { font-size: .8125rem; opacity: .7; }
.chip--carkovane { border-style: dashed; border-color: var(--line); background: transparent; color: var(--muted); }
.chip--carkovane:hover, .chip--carkovane:focus-visible { background: var(--sunken); border-color: var(--brand); color: var(--brand-ink); }
.chip--ok { background: var(--success-bg); border-color: var(--success-line); color: var(--success-dark); }
.chip--sm { padding: 3px 10px; font-size: .77rem; }

.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: .875rem; }
.badge--ready   { background: var(--success-bg); color: var(--success); }
.badge--planned { background: var(--sunken); color: var(--muted); }

/* Počítadlo pri nadpise karty / panelu („Dodatky 3"). `.on` = počet, ktorý
   čaká na človeka. V hlavičke sa odsadí doprava. */
.count {
    margin-left: auto; min-width: 24px; height: 22px; padding: 0 8px;
    border-radius: var(--r-pill); background: var(--line-soft); color: var(--muted);
    font-weight: 700; font-size: .78rem; font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; justify-content: center;
}
.count.on { background: var(--brand); color: var(--brand-ink-on); }

/* Nález = veta, ktorú si má človek prečítať, nie ikonka. Tučný text je
   zistenie, drobný pod ním dôsledok alebo rada — bez dôsledku sa nález
   ignoruje. Farba nesie závažnosť (kontroly Financií a Zmlúv, monitoring).
     <div class="nalezy">                       … zoznam (môže byť aj <ul>)
       <span class="nalezy-label">…</span>      … voliteľný nadpis skupiny
       <div class="nalez nalez--chyba">          … chyba | pozor | info
         <i class="ti …"></i>                    … voliteľná ikona vľavo
         <div><b>Zistenie</b><span>Dôsledok</span></div>
       </div>
   Bez ikony stačí <b>/<strong> a <span class="nalez-rada">. Monitoring
   posiela úrovne `varovanie` / `kriticky` — tie sú aliasy pozor / chyba. */
.nalezy { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.nalezy .nalezy { margin: 0; }
.nalezy-label {
    display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.nalez {
    border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2);
    padding: 11px 15px; font-size: .87rem; line-height: 1.5; color: var(--ink);
}
.nalez + .nalez { margin-top: 8px; }
.nalezy > .nalez + .nalez { margin-top: 0; }
.nalez > .ti { float: left; font-size: 1.125rem; margin: 1px 9px 0 0; color: var(--muted); }
.nalez > .ti + div { overflow: hidden; }
.nalez b, .nalez strong, .nalez-t { display: block; font-weight: 650; }
.nalez > div > span, .nalez-rada { display: block; color: var(--ink-soft); margin-top: 2px; }
.nalez p { margin: 6px 0 0; }
.nalez--chyba, .nalez--kriticky  { background: var(--danger-bg); border-color: var(--danger-line); }
.nalez--chyba > .ti, .nalez--chyba b, .nalez--chyba strong,
.nalez--kriticky .nalez-t { color: var(--danger); }
.nalez--pozor, .nalez--varovanie { background: var(--warning-bg); border-color: var(--warning-line); }
.nalez--pozor > .ti { color: var(--warning); }
.nalez--pozor b, .nalez--pozor strong, .nalez--varovanie .nalez-t { color: var(--warning-ink); }
/* Zistenie Kontrol (financie/_zistenie.html, _rozpis.html) — karta s detailom
   a stavom. `.je-posudene` = vyriešené / ignorované (pohľad „Vyriešené /
   Ignorované“); `.nalezy[data-rezim]` je prepínač ui.js 12 nad zoznamom:
   vsetky | chyby (len na preverenie) | skryte (len posúdené). */
.nalezy:not([data-rezim="skryte"]) > .nalez.je-posudene,
.nalezy[data-rezim="skryte"] > .nalez:not(.je-posudene),
.nalezy[data-rezim="chyby"] > .nalez:not(.nalez--chyba) { display: none; }
.nalez.je-posudene { opacity: .8; }
.nalezy--polozky { margin: 8px 0 0; }
.nalez--polozka { background: var(--surface); padding: 8px 12px; }
.nalez--polozka b { color: var(--ink); font-weight: 600; }
.nalez-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .74rem; color: var(--muted); }
.nalez-detail { margin-top: 6px; }
.nalez-detail > summary, .nalez-ignoruj > summary { cursor: pointer; list-style: none; }
.nalez-detail > summary { font-size: .78rem; font-weight: 650; color: var(--c1); display: inline-flex; gap: 4px; align-items: center; }
.nalez-detail > summary::-webkit-details-marker, .nalez-ignoruj > summary::-webkit-details-marker { display: none; }
.nalez-detail > summary::before { content: "\ea61"; font-family: "tabler-icons"; transition: transform .2s ease; }
.nalez-detail[open] > summary::before { transform: rotate(90deg); }
.nalez-rozpis { margin-top: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: var(--r-sm); display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.nalez-rozpis caption { caption-side: top; text-align: left; font-weight: 650; font-size: .8rem; padding: 0 0 4px; }
.nalez-overenie { display: flex; gap: 6px; align-items: flex-start; font-weight: 600; font-size: .8rem; }
.nalez-overenie.je-zhoda { color: var(--success); }
.nalez-overenie.je-nezhoda { color: var(--danger); }
.nalez-co { font-size: .82rem; }
.nalez-co b { display: inline; margin-right: 6px; }
.nalez-vypocet { margin: 0; display: grid; gap: 2px; max-width: 640px; font-size: .82rem; }
.nalez-vypocet > div { display: flex; justify-content: space-between; gap: 16px; }
.nalez-vypocet dt { color: var(--ink-soft); white-space: pre; }
.nalez-vypocet dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nalez-vypocet .je-vysledok { border-top: 1px solid var(--line); padding-top: 2px; font-weight: 650; }
.nalez-vypocet .je-vysledok dt { color: var(--ink); }
.nalez-pozn { font-size: .76rem; color: var(--muted); white-space: pre-line; }
.nalez-akcie { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 8px; }
.nalez-akcie form { display: inline-flex; align-items: center; margin: 0; }
.nalez-akcie form > * + * { margin-left: 6px; }
.nalez-ignoruj[open] > summary { display: none; }
.nalez-ignoruj input[type="text"] { min-width: 280px; }
.nalezy-nastroje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.nalezy-nastroje .nx-hladaj { flex: 1 1 260px; }
/* Hlavička skupiny v zozname (tabulka.js, `data-hladaj-zoskup`). */
.nx-zoznam-skupina { display: flex; gap: 6px; align-items: baseline; margin: 8px 0 0; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.nx-zoznam-skupina b { font-weight: 700; color: var(--ink-soft); }
/* Odkaz „ďalšie nálezy nájdeš v …" pod dlaždicami. */

/* 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: var(--r);
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-100); color: var(--brand-ink); font-size: 1.25rem;
    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(--fill-ok); color: var(--fill-ink); }
.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],
.btn-ghost[disabled], .btn-danger[disabled] { opacity: .5; cursor: not-allowed; }
/* Odchýlky tlačidla (audit E6, 24. 10. 2026 — namiesto zl-, dz-, sv-, rep-,
   cmt-, tk-ikona-, tr-pridaj-btn v moduloch). Variant je samostatná trieda
   (`btn-ghost btn-sm`, nie `btn btn-ghost`); holé `.btn` = tiché tlačidlo bez
   plochy. `btn-ikona` = len ikona (komentár, zatvoriť; meno nesie
   `aria-label`), `btn-carkovane` = „pridať ďalší“ s čiarkovaným okrajom,
   `btn-plne` = na celú šírku (formulár na telefóne, dialóg). */
.btn-ikona { padding: 4px; color: var(--faint); background: transparent; border-color: transparent; }
.btn-ikona .ti { font-size: 1rem; }
.btn-ikona:hover { background: var(--sunken); color: var(--ink-soft); }
.btn-carkovane { border-style: dashed; }
.btn-carkovane:hover { border-style: solid; }
.btn-plne { width: 100%; }

/* --- Formulárové prvky ------------------------------------------------------
   JEDNO pole pre celý portál (audit 8. 10. 2026, „polia z jadra"): výška
   --pole-h, odsadenie --pole-px, písmo --pole-pismo, okraj --pole-okraj,
   radius --r-sm, fokus --ring. Kedysi 62 modulových kópií (Tržby 11×) — raz
   34 px, raz 30, raz --r, raz okraj --line bez kontrastu, fokus každý iný.
   Modul píše len skutočnú odchýlku (šírku, zarovnanie čísla, stav).
   Veľkosť: .nx-pole--maly (kompaktná mriežka, lišta filtrov — 32 px) a
   .nx-pole--velky (dotykový formulár prevádzky — 42 px) na poli ALEBO na
   obale; nastavujú len tokeny, takže ich zdedia všetky polia vnútri.
   Pole bez rámu v orámovanom obale (.nx-hladaj, .mcell) má výšku od obalu.
   Farbu poľa mení vzhľad tokenom --pole-pozadie, nie vlastným `background`:
   pravidlo vzhľadu má vyššiu špecificitu a v rámčeku .mcell by namaľovalo
   druhý, vyšší obdĺžnik cez rám obalu (Terrace/Aurora, Príprava kompaktne).
   Stráži brána jednoty `pole-modulu`. */
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], input[type=tel], input[type=url], input[type=datetime-local],
input[type=file], select, textarea {
    color: var(--ink);
    background: var(--pole-pozadie, var(--surface));
    border: 1px solid var(--pole-okraj);
    border-radius: var(--r-sm);
    padding: 8px var(--pole-px);
    font-size: var(--pole-pismo);
    transition: border-color .12s, box-shadow .12s;
}
/* Jednoriadkové pole má pevnú výšku — pole, rozbaľovačka aj dátum v jednom
   riadku sedia na pixel (kontrola_zarovnania.py). Na dotyku zdvihne spodnú
   hranicu mobil.css (min-height 40 px). */
input[type=text], input[type=search], input[type=number], input[type=password],
input[type=date], input[type=email], input[type=tel], input[type=url], input[type=datetime-local],
select {
    height: var(--pole-h);
    padding-top: 0; padding-bottom: 0;
}
/* Zoznam (multiple/size) výšku nedostane. Kedysi `select:where(:not(…))` v jednom
   zozname s poľami — Chromium 83 (Edge na prevádzke) :where() nepozná a zhodil
   celé pravidlo: žiadne pole nemalo výšku (audit E1). */
select[multiple], select[size] { height: auto; }
.nx-pole--maly, .nx-hladaj--maly, .filterbar { --pole-h: 32px; --pole-px: 9px; --pole-pismo: .82rem; }
.nx-pole--velky { --pole-h: 42px; }
/* Chyba v poli — na poli alebo na jeho menovke (`label.je-chyba`); zo servera
   `aria-invalid="true"` (`{% pole_chyba %}`, audit E8) a veta pod poľom
   `.nx-chyba-pola` (`{% chyba_pola %}`, ARCHITEKTURA §3g). */
input.je-chyba, select.je-chyba, textarea.je-chyba,
.je-chyba > input, .je-chyba > select, .je-chyba > textarea,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg);
}
.nx-chyba-pola { margin: 5px 0 0; color: var(--danger); font-size: .8rem; font-weight: 600; line-height: 1.35; }
.nx-chyba-pola .ti { margin-right: 3px; vertical-align: -1px; }
.nx-chyba-pola[hidden] { display: none; }
/* Výber súboru bol jediné pole, ktoré si portál nechával v natívnej podobe —
   vedľa rozbaľovačky v tom istom riadku stálo o polovicu nižšie a vyzeralo,
   akoby tam ani nepatrilo. Tlačidlo „Vybrať súbor" vnútri dostáva tvar
   sekundárneho tlačidla, aby bolo vidieť, kam sa klikne. */
/* Odsadenie si NEURČUJE samo — berie ho z toho istého pravidla ako susedné
   polia, takže sa v každom module zarovná s nimi. Tlačidlo vnútri preto nesmie
   byť vyššie než riadok textu, inak by pole prerástlo svojich susedov. */
input[type=file] { color: var(--ink-soft); }
input[type=file]::file-selector-button {
    font: inherit; font-weight: 620; cursor: pointer;
    height: 1.3em; line-height: 1; padding: 0 10px; margin: 0 9px 0 0;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--sunken); color: var(--ink-soft);
}
input[type=file]::file-selector-button:hover { border-color: var(--pole-okraj); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
/* Pole v bunke mriežky ako v Exceli (`input.nx-bunka-pole` v `td`; Tím Mojej
   prevádzky): rám kreslí bunka tabuľky, pole je priehľadné na výšku --pole-h
   (na tabuľke .nx-pole--maly = 32 px), šírka 2.6rem (modul ju prepíše `width`); fokus je prsteň `td input`. Klávesnicu
   dáva polia.js. Ďalšia mriežka si nepíše vlastné „input bez rámu“. */
td > input.nx-bunka-pole {
    width: 2.6rem; border: 0; border-radius: 0; background: transparent;
    padding: 0 4px; text-align: center; font-weight: 650;
}
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); }
/* Hľadanie v lište = .nx-hladaj.nx-hladaj--maly (sekcia 19). */
.filterbar select, .filterbar .fb-sel { font-weight: 550; color: var(--ink-soft); }
/* is-on = vybraté zo servera, je-aktivny = vybraté v prehliadači (tabulka.js) */
.filterbar .fb-sel.is-on, .filterbar .fb-sel.je-aktivny { border-color: var(--pole-okraj-hover); 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; }

/* --- Automatická lišta tabuliek (static/js/tabulka.js) — vzhľad v2 --------
   Pridáva si ju skript nad každú tabuľku, ktorá má aspoň päť riadkov. Preto sa
   štýluje samostatne: nesmie závisieť od obalu tabuľky v konkrétnom module.
   v2 (9/2026): hľadanie ako pilulka so skratkou „/", filtre ako čipy (aktívny
   filter svieti), počet nájdených ako odznak, prázdny výsledok s vetou. */
.nx-tools {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 10px;
}
.nx-tools .nx-hladaj {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--pole-okraj);
    border-radius: var(--r-pill); padding: 0 6px 0 13px; height: 36px;
    min-width: 220px; max-width: 340px; flex: 1 1 220px; color: var(--faint);
    box-shadow: var(--shadow-xs);
    transition: border-color .2s ease, box-shadow .2s ease, max-width .3s cubic-bezier(.2, .7, .2, 1);
}
.nx-tools .nx-hladaj:hover { border-color: var(--pole-okraj-hover); }
.nx-tools .nx-hladaj:focus-within {
    border-color: var(--c1); max-width: 440px;
    box-shadow: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1) 18%, transparent);
    color: var(--c1);
}
.nx-tools .nx-hladaj input {
    border: 0; background: transparent; padding: 0; font-size: .86rem; width: 100%;
    color: var(--ink); outline: none;
}
.nx-tools .nx-hladaj input:focus { box-shadow: none; outline: none; }
.nx-tools .nx-hladaj input::-webkit-search-cancel-button { cursor: pointer; }
.nx-kbd {
    font: 600 .7rem/1 inherit; color: var(--faint); background: var(--sunken);
    border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-xs);
    padding: 3px 7px; flex: 0 0 auto; transition: opacity .2s ease;
}
.nx-hladaj:focus-within .nx-kbd { opacity: 0; }
.nx-tools .nx-filter {
    height: 36px; padding: 0 30px 0 13px; font-size: .8rem; font-weight: 600;
    border-radius: var(--r-pill); border: 1px solid transparent;
    background-color: var(--sunken); color: var(--ink-soft); max-width: 260px; cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.nx-tools .nx-filter:hover { border-color: var(--pole-okraj); color: var(--ink); }
.nx-tools .nx-filter.je-aktivny {
    background-color: var(--brand-50); border-color: var(--c1);
    background-color: color-mix(in srgb, var(--c1) 13%, var(--surface));
    border-color: color-mix(in srgb, var(--c1) 45%, transparent); color: var(--ink);
}
.nx-tools .nx-count {
    font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--c1); background: color-mix(in srgb, var(--c1) 11%, transparent);
    padding: 4px 10px; border-radius: var(--r-pill);
    animation: nx-vyskoc .25s cubic-bezier(.2, .7, .2, 1);
}
.nx-tools .nx-count[hidden] { display: none; }
.nx-tools .nx-zrus {
    border: 0; background: transparent; color: var(--muted);
    font: inherit; font-size: .78rem; font-weight: 620; cursor: pointer;
    height: 30px; padding: 0 10px; border-radius: var(--r-pill);
    display: inline-flex; align-items: center; gap: 5px;
}
.nx-tools .nx-zrus::before { content: "×"; font-size: 1.05rem; line-height: 1; }
.nx-tools .nx-zrus:hover { background: var(--sunken); color: var(--ink); }
.nx-tools .nx-zrus[hidden] { display: none; }
@keyframes nx-vyskoc { from { opacity: 0; transform: scale(.85); } }
tr[hidden] { display: none !important; }
/* Zoznam s hľadaním (tabulka.js, `data-hladaj-v`): skrytá karta ostane skrytá
   aj keď má vlastné `display: flex/grid`. */
.nx-hladany > [hidden] { display: none; }

/* Hlavička na zoradenie — šípka sa otáča podľa smeru, nie mení znak. */
th.nx-sortable { cursor: pointer; user-select: none; position: relative; transition: color .15s ease, background-color .15s ease; }
th.nx-sortable:hover { color: var(--ink); background-color: var(--sunken); background-color: color-mix(in srgb, var(--ink) 4%, transparent); }
/* Šípka sedí v pravom okraji bunky — hlavička sa v moduloch smie zalomiť
   a šípka nesmie odpadnúť na samostatný riadok. */
th.nx-sortable { padding-right: calc(var(--cell-x) + 14px) !important; }
.nx-sipka {
    position: absolute; right: 10px; top: 50%; margin-top: -5px;
    display: block; width: 7px; height: 7px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px); opacity: 0;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), opacity .2s ease;
}
th.nx-sortable:hover .nx-sipka { opacity: .35; }
th.nx-sortable.nx-sorted { color: var(--ink); }
th.nx-sortable.nx-sorted .nx-sipka { opacity: 1; color: var(--c1); }
th.nx-sortable.nx-sorted[data-smer="hore"] .nx-sipka { transform: rotate(-135deg) translate(-2px, -2px); }
th.nx-sortable:focus-visible { outline: 2px solid var(--c1); outline-offset: -2px; }
/* Zoradenie na serveri (stránkovaný zoznam) — core/_zorad.html + {% aria_sort %}
   (audit E10): ten istý vzhľad pre Faktúry, Zmluvy aj archív Dochádzky. */
.nx-th-zorad { color: inherit; text-decoration: none; display: inline-flex; align-items: center; }
.nx-th-zorad .ti { font-size: .75rem; opacity: .45; margin-left: 4px; }
.nx-th-zorad:hover { color: var(--brand); }
.nx-th-zorad:hover .ti, .nx-th-zorad .ti-chevron-up, .nx-th-zorad .ti-chevron-down { opacity: 1; }

/* Tabuľka, ktorú prevzal engine: zoradený stĺpec, riadok pod myšou, tieň
   pod hlavičkou po odrolovaní, podfarbený nájdený text. */
table.nx-tab tbody td.nx-zoradeny { background-color: var(--tonal); background-color: color-mix(in srgb, var(--c1) 5%, transparent); }
table.nx-tab tbody tr { transition: background-color .15s ease; }
table.nx-tab tbody tr:not([class*="st-"]):hover > td:first-child { box-shadow: inset 3px 0 0 var(--c1); }
table.nx-tab thead th { transition: box-shadow .2s ease; }
table.nx-tab.nx-posunute thead th { box-shadow: inset 0 -1px 0 var(--line), 0 8px 14px -10px rgba(0, 0, 0, .28); }
mark.nx-najdene {
    background: color-mix(in srgb, var(--warn-400) 42%, transparent); color: inherit;
    border-radius: calc(var(--r-xs) / 2); padding: 0 1px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn-400) 30%, transparent);
}
.nx-prazdno td { text-align: center; padding: 34px 10px !important; height: auto !important; }
.nx-prazdno-in { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-size: .86rem; white-space: normal; }
.nx-prazdno-in .ti { font-size: 1.875rem; color: var(--faint); margin-bottom: 2px; }
.nx-prazdno-in b { color: var(--ink); font-size: .95rem; }
.nx-prazdno-zrus {
    margin-top: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
    font: inherit; font-size: .8rem; font-weight: 620; padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer;
}
.nx-prazdno-zrus:hover { border-color: var(--c1); color: var(--ink); }

/* --- Správy / toasty --- */
.messages { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 9px; }
/* ui.js presunie správy do notifikácie a pás skryje — `display:flex` vyššie
   by atribút hidden prebil a správa by bola na obrazovke dvakrát. */
.messages[hidden] { display: none; }
/* Bez JS (alebo kým sa načíta) pás aspoň jemne nabehne. */
.messages li { animation: nx-toast-dnu .45s cubic-bezier(.2, .8, .2, 1) both; }
.messages li:nth-child(2) { animation-delay: .08s; }
.messages li:nth-child(3) { animation-delay: .16s; }
.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: 1.125rem; 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; }

/* Jediná tabuľka portálu. Modulové triedy (`.zl-table`, `.rep-table` …) nesie
   tabuľka popri `tbl` už len pre odchýlky svojho modulu (krok 0b, ARCHITEKTURA §5). */
/* Riadok ako odkaz (`<tr data-href>`, ui.js 6b): klik kamkoľvek, klávesnica
   cez odkaz v prvej bunke — ten vyzerá ako text riadku, nie ako modrý odkaz. */
tr[data-href] { cursor: pointer; }
.nx-riadok-odkaz { color: inherit; text-decoration: none; }
button.nx-riadok-odkaz { background: none; border: 0; padding: 0; font: inherit; text-align: inherit; cursor: pointer; }
.nx-riadok-odkaz:hover { text-decoration: underline; }
table.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--cell-fs);
    background: var(--surface); color: var(--ink); }
.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);
}
/* Na menších monitoroch (HD notebook až 1920 px) sa dlhý nadpis stĺpca smie
   zalomiť do dvoch riadkov — „Výnosy YTD (účt.)" tak z 148 px spadne pod 100.
   Hlavička sa číta raz, šírka tabuľky trápi pri každom riadku. Dáta v bunkách
   sa nezalamujú. `table.tbl` = váha nad modulovými `.xx-table thead th`. */
@media (min-width: 861px) and (max-width: 1920px) {
    table.tbl thead th { white-space: normal; }
}
/* Čísla vpravo a pod sebou — `.n`; `.num` a `.ta-right` sú staršie mená z modulov. */
.tbl .n, .tbl .num, .tbl .ta-right { text-align: right; font-variant-numeric: tabular-nums; }
/* Farbu písma dáva tabuľka (dedí sa), nie bunka — trieda bunky alebo riadka
   (tlmené, plus/mínus, vybavené) má tak vždy prednosť. */
.tbl tbody td {
    padding: 0 var(--cell-x); height: var(--row-h);
    border-bottom: 1px solid var(--line-soft);
}
/* Číselná tabuľka: údaje na jednom riadku. Textová tabuľka (poznámky, názvy,
   popisy) nesie `tbl tbl--zalom` — jej bunky sa zalamujú a o výnimkách
   (`.money`, `.n` …) rozhodujú triedy buniek (krok 0b, 2. 10. 2026). */
.tbl:not(.tbl--zalom) tbody td, .tbl:not(.tbl--zalom) tfoot td { white-space: nowrap; }
.tbl tbody td.wrap { white-space: normal; }
/* Hlavička skupiny riadkov tabuľky (tabulka.js, `data-hladaj-zoskup` na tabuľku). */
.tbl tr.nx-tabulka-skupina th { text-align: left; padding-top: 14px; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); }
.tbl tr.nx-tabulka-skupina b { color: var(--ink-soft); }
.tbl tbody tr:hover td { background: var(--tonal); }

/* 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;
}
.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-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); }

/* Peniaze v tabuľke — `.money` je peňažný ÚDAJ (len zarovnanie a tabulárne
   číslice), nie pole na písanie. Moduly (Zmluvy, Zálohy, Úlohy) ho tak
   používajú — rámček pod týmto menom by orámoval každú sumu vrátane pomlčky. */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; color: var(--ink); }

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

/* Prepínač — checkbox ako posuvník, JEDEN diel pre celý portál (D-002;
   predtým päť kópií: `.dz-switch`, `.z-paska`, `.mz-vyp-toggle`, prepínač
   vo `.vp-table`, `.mod-switch`, a nepoužitý `.switch`).

       <label class="nx-prepinac"><input type="checkbox" role="switch" name="…"> Text</label>

   Je to skutočný checkbox: medzerník, odoslanie formulára, `change`,
   `data-tabulka-filter` aj `disabled` fungujú bez skriptu a `role="switch"`
   povie čítačke „zapnuté / vypnuté“. Bez textu (bunka tabuľky) nesie
   `<label>` alebo `<input>` `title` — to je meno prepínača.
   Varianty: `--velky` (riadok s modulom), `--ok` (zapnutý = zelená namiesto
   akčnej farby — „pridať ako výpomoc“). Modul píše len odchýlku (písmo,
   okraj, zalomenie textu); tvar posuvníka nie — stráži brána jednoty
   `vlastny-prepinac`. Farby sú tokeny, takže tmavá téma aj vzhľady idú samy;
   vypnutý má obrys `--pole-okraj` (kontrast 3:1 ako rám poľa). */
.nx-prepinac {
    --prep-w: 32px; --prep-h: 18px; --prep-k: 14px; --prep-zap: var(--brand);
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .82rem; color: var(--muted); white-space: nowrap; cursor: pointer;
}
.nx-prepinac--velky { --prep-w: 44px; --prep-h: 24px; --prep-k: 18px; }
.nx-prepinac--ok { --prep-zap: var(--success); }
.nx-prepinac input[type=checkbox] {
    appearance: none; -webkit-appearance: none; flex: 0 0 auto; margin: 0;
    width: var(--prep-w); height: var(--prep-h); border-radius: var(--r-pill);
    background: var(--line-strong); box-shadow: inset 0 0 0 1px var(--pole-okraj);
    position: relative; cursor: pointer; vertical-align: middle;
    transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.nx-prepinac input[type=checkbox]::after {
    content: ""; position: absolute;
    top: calc((var(--prep-h) - var(--prep-k)) / 2); left: calc((var(--prep-h) - var(--prep-k)) / 2);
    width: var(--prep-k); height: var(--prep-k); border-radius: 50%;
    background: var(--surface); box-shadow: var(--shadow-xs);
    transition: transform .15s var(--ease);
}
.nx-prepinac input[type=checkbox]:hover:not(:checked):not(:disabled) { background: var(--brand-200); }
.nx-prepinac input[type=checkbox]:checked { background: var(--prep-zap); box-shadow: none; }
.nx-prepinac input[type=checkbox]:checked::after { transform: translateX(calc(var(--prep-w) - var(--prep-h))); }
.nx-prepinac input[type=checkbox]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nx-prepinac input[type=checkbox]:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) {
    .nx-prepinac input[type=checkbox], .nx-prepinac input[type=checkbox]::after { transition: none; }
}

/* Stránkovanie — jeden diel core/_strankovanie.html ({% strankovanie stranka %}):
   Archív dochádzky, Faktúry, Pohyby trezora (predtým tri kópie, tri vzhľady). */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 2px; font-size: .84rem; color: var(--muted); }
.pager a, .pager span.cur {
    min-width: 32px; padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid var(--line);
    text-align: center; 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; }
.pager-bodky { color: var(--faint); padding: 0 2px; }
.pager-info { margin-left: 6px; font-size: .78rem; color: var(--faint); }

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

/* Vzhľad spoločného engine-u `static/js/graf.js`. Modul dodá dáta, tvar
   grafu vzniká tu — takže sa vzhľad grafov mení na jednom mieste pre celý
   portál. Farba série chodí z modelu (token `var(--c1)`…), preto sa tu
   nastavuje len to, čo je pre všetky grafy rovnaké.

   ANIMÁCIA je súčasť významu, nie ozdoba:
     stĺpec vyrastie z osi   → vidno, odkiaľ sa meria,
     krivka sa nakreslí      → vidno smer čítania (zľava doprava),
     výsek koláča sa zatočí  → vidno, že ide o podiel na celku.
   Kto má v systéme vypnuté animácie, dostane graf hotový (koniec súboru). */

.graf-box { position: relative; }
.graf-hlava { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.graf-hlava[hidden] { display: none; }
.graf-titulok { font-weight: 650; font-size: .95rem; }
.graf-titulok[hidden] { display: none; }

/* Prepínač typu — rovnaká pilulka ako ostatné prepínače režimov v portáli. */
.graf-typy { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; background: var(--sunken); border-radius: var(--r-pill); padding: 3px; margin-left: auto; }
.graf-typ {
    border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
    font-weight: 600; font-size: .8rem; font-family: inherit;
    padding: 6px 12px; border-radius: var(--r-pill);
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .14s, color .14s;
}
.graf-typ .ti { font-size: .9375rem; }
.graf-typ:hover { color: var(--ink); }
.graf-typ.is-on { background: var(--brand); color: var(--brand-ink-on); box-shadow: var(--shadow-xs); }

.graf-plocha { position: relative; min-height: 40px; }

/* Koláč je kruh — na širokej ploche by po jeho stranách ostali dve prázdne
   tretiny panelu. Legenda si ich vezme a zároveň sa číta vedľa výsekov. */
.graf-box.je-donut {
    display: grid; align-items: center; column-gap: 26px;
    /* Pružné minimum: v úzkej karte (Financie, 5/12 šírky) pevných 260 + 200 px
       vytlačilo stránku do boku o 10 px; pomer stĺpcov ostáva. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas: "hlava hlava" "plocha legenda";
}
.graf-box.je-donut .graf-hlava { grid-area: hlava; }
.graf-box.je-donut .graf-plocha { grid-area: plocha; }
.graf-box.je-donut .graf-legenda { grid-area: legenda; flex-direction: column; gap: 4px; margin: 0; }
.graf-box.je-donut .graf-legenda .graf-lg { width: 100%; }
.graf-box.je-donut .graf-legenda em { margin-left: auto; }
@media (max-width: 860px) {
    .graf-box.je-donut { display: block; }
    .graf-box.je-donut .graf-legenda { flex-direction: row; margin-top: 12px; }
    .graf-box.je-donut .graf-legenda em { margin-left: 0; }
}
.graf-prazdno { color: var(--faint); font-size: .88rem; padding: 26px 4px; margin: 0; }


/* Pásmo v legende sa neklikká — nie je to séria, ktorá sa dá vypnúť. */
.graf-lg.je-pasmo { cursor: default; background: none; }
.graf-lgd--bez { background: var(--pas-bez); border: 1px dashed var(--line); }
.graf-tip .gt-bez { color: var(--muted); max-width: 30ch; white-space: normal;
    line-height: 1.45; }

/* --- legenda (klikacia: séria sa dá vypnúť) --- */
.graf-legenda { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.graf-legenda[hidden] { display: none; }
.graf-lg {
    border: 0; background: transparent; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .8rem; color: var(--ink-soft); padding: 4px 2px; border-radius: var(--r-xs);
}
.graf-lg:hover { color: var(--ink); }
.graf-lgd { width: 11px; height: 11px; border-radius: calc(var(--r-xs) / 2); flex: 0 0 auto; transition: opacity .14s; }
.graf-lg em { font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; }
.graf-lg small {
    font-size: .68rem; color: var(--faint); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 1px 7px; white-space: nowrap;
}
.graf-lg.je-vyp { color: var(--faint); text-decoration: line-through; }
.graf-lg.je-vyp .graf-lgd { opacity: .28; }

/* --- tooltip --- */
.graf-tip {
    position: absolute; pointer-events: none; z-index: var(--z-obsah); max-width: 280px;
    background: var(--raised); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    box-shadow: var(--shadow); padding: 9px 11px; font-size: .79rem;
    opacity: 0; transform: translateY(4px); transition: opacity .1s, transform .1s;
}
.graf-tip.is-on { opacity: 1; transform: translateY(0); }
/* Engine v2 (ECharts): tooltip kreslí ECharts do vlastného kontajnera,
   vnútro má tie isté triedy ako doteraz — len nie je absolútne umiestnené. */
.graf-tip.graf-tip--e { position: static; max-width: 300px; transition: none; }
.graf-ec { width: 100%; }
.graf-nacitava { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--sunken), var(--tonal), var(--sunken));
    background-size: 200% 100%; animation: graf-shimmer 1.2s linear infinite; opacity: .6; }
@keyframes graf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.graf-tip b { display: block; font-size: .82rem; margin-bottom: 5px; }
.graf-tip .gt-r { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-top: 3px; }
.graf-tip .gt-l { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.graf-tip .gt-l i { width: 9px; height: 9px; border-radius: calc(var(--r-xs) / 2); flex: 0 0 auto; }
.graf-tip .gt-v { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.graf-tip .gt-sub .gt-l { padding-left: 16px; font-size: .94em; color: var(--faint); }
.graf-tip .gt-tot { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 5px; }

/* ==========================================================================
   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: 1.5625rem;
}
.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; }
/* Prázdny stav vnútri karty, stĺpca či panela (`{% prazdno maly=True %}`) —
   menší, bez spodného okraja. Kedysi 9 modulových kópií (`dz-empty`,
   `zm-empty`, `tz-empty` …, audit 8. 10. 2026). */
.empty-state--maly { padding: 22px 16px; }
.empty-state--maly .es-ic { width: 40px; height: 40px; margin-bottom: 10px; font-size: 1.25rem; border-radius: var(--r); }
.empty-state--maly h3 { font-size: .92rem; }
.empty-state--maly p { margin-bottom: 0; }
.empty-state p a { color: var(--brand-dark); font-weight: 600; }
/* Celá stránka — 404, 403, vypršaný formulár, 500 (templates/core/_chyba.html). */
.empty-state--stranka { padding: clamp(48px, 12vh, 120px) 20px; }
.empty-state--stranka .es-kod { margin-bottom: 6px; font-size: .74rem; font-weight: 650; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); }
.empty-state--stranka h1 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 560; letter-spacing: -.03em; }
.empty-state--stranka p { font-size: .95rem; }
.empty-state .es-akcie { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.empty-state--stranka .es-akcie { margin-top: 22px; }
/* Tlačidlá v akciách nie sú odkaz v texte — `.empty-state p a` by im dal farbu odkazu
   (na 500 bez CSS šablóny tmavý text na tmavom tlačidle). */
.empty-state .es-akcie .btn-primary { color: var(--brand-ink-on); }
.empty-state .es-akcie .btn-ghost { color: var(--ink-soft); }
/* Ilustrácia chybovej stránky a prihlásenia — svetlý ostrov s pozadím obrázka
   (#f5f2ec), v každom vzhľade aj v tmavej téme bez prefarbenia. Objekt je
   v pravej polovici obrázka, výrez preto berie pravú časť. */
.es-obr, .lh-ostrov { display: block; overflow: hidden; border-radius: var(--r-lg); background: var(--scena-podklad); }
.es-obr { width: min(100%, 340px); height: 160px; margin: 0 auto 22px; }
.es-obr img, .lh-ostrov img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 88% 55%; }

.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; } }
/* Tvary kostry: zásuvka (ui.js `otvorZasuvku`) a doklady účtu (financie/_detail). */
.skeleton--kicker { width: 40%; }
.skeleton--nadpis { width: 60%; height: 22px; margin-top: 10px; }
.skeleton--suma { width: 35%; height: 30px; margin-top: 12px; }
.skeleton--blok { height: 150px; }
.skeleton--riadok { margin-top: 10px; }
.skeleton--kratsi { width: 80%; }
.skeleton--dalsi { width: 70%; margin-top: 8px; }

/* 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;
}
.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; top: 0; right: 0; bottom: 0; left: 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: 1.1875rem; color: var(--accent-soft); }
.login-hero .lh-ostrov { width: min(100%, 420px); height: 190px; margin-top: 32px; }

.login-panel {
    display: flex; align-items: center; justify-content: center;
    padding: clamp(28px, 3vw, 56px);
    background: var(--surface);
}
/* min-width: 0 — položka mriežky by sa inak na telefóne roztiahla na šírku obsahu
   (rýchle prihlásenie s menom a PINom) a stránka by sa posúvala do boku. */
.login-panel { min-width: 0; }
.login-card { width: 100%; max-width: 400px; min-width: 0; }
.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); }
/* Logo Microsoftu je obrázok (static/img/microsoft.svg) — farby značky nie sú tokeny portálu. */
.ms-glyph { display: block; width: 20px; height: 20px; }
/* Rýchle prihlásenie (accounts.rychle) — nad tlačidlom Microsoftu */
.rp-box { margin-bottom: 6px; }
/* min-width: 0 — fieldset má v prehliadači predvolene min-content a na telefóne by pretiekol */
.rp-ludia { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; min-width: 0; }
/* Vlastná trieda, nie `.avatar` — tú prefarbujú šablóny vzhľadu pre bočné menu. */
.rp-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: .75rem; font-weight: 700; background: var(--surface-2);
    color: var(--brand-ink); border: 1px solid var(--line-soft); }
.rp-ludia legend { font-size: .82rem; color: var(--muted); margin-bottom: 8px; padding: 0; }
.rp-clovek { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
    border-radius: var(--r); cursor: pointer; background: var(--surface); font-size: .95rem; min-height: 52px; }
/* Zvýraznenie vybraného — vylepšenie (výber funguje aj bez neho, Edge 83). */
@supports selector(:has(a)) {
    .rp-clovek:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50, transparent); }
}
.rp-clovek input { position: absolute; opacity: 0; pointer-events: none; }
.rp-clovek.is-off { opacity: .6; cursor: default; }
.rp-meno { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rp-meno small { color: var(--muted); font-size: .78rem; }
.rp-odtlacok { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--brand-ink); font-size: 1.35rem; cursor: pointer; }
.rp-odtlacok:hover { border-color: var(--brand); }
.rp-pin { display: flex; gap: 8px; }
.rp-pin input { flex: 1; min-width: 0; letter-spacing: .3em; text-align: center; }
.rp-chyba { color: var(--danger); font-size: .86rem; margin: 10px 0 0; }
.rp-nie-ja { margin-top: 8px; text-align: center; }
.rp-nie-ja button { background: none; border: 0; color: var(--muted); font-size: .8rem; cursor: pointer;
    text-decoration: underline; padding: 6px; }
.rp-alebo { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: .8rem; margin: 18px 0; }
.rp-alebo::before, .rp-alebo::after { content: ""; flex: 1; border-top: 1px solid var(--line-soft); }

.login-note { margin-top: 22px; font-size: .82rem; color: var(--faint); text-align: center; }

/* ==========================================================================
   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. */
}

@media (max-width: 1024px) {
    .ctxbar { padding: 8px 16px; gap: 9px; }
    /* Len priame popisky rozsahu — potomkový selektor by schoval aj počet
       úloh na zvončeku (.bell-badge) a prepínač hustoty (.seg). */
    .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; top: 0; right: 0; bottom: 0; left: 0; z-index: calc(var(--z-menu) - 5);
        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 { 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: .9375rem; }

.nz-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: calc(var(--z-plavajuce) + 10); 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: 1.25rem; }
.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: 1.125rem; color: var(--char-500); }
.nz-obnova span { flex: 1 1 320px; }
.nz-obnova strong { color: var(--ink); }
.nz-obnova button { flex: 0 0 auto; }


/* ==========================================================================
   GALÉRIA PRÍLOH (`static/js/nahlad.js`)
   ==========================================================================
   Je to spoločný komponent, nie vec jedného modulu: prílohy majú Technické
   oddelenie, skeny majú Zmluvy a doklady Faktúry — všetky tri chcú to isté
   okno. Preto je tu v `styles.css` medzi ostatnými primitívami, nie
   v `modules.css` pri konkrétnom module. */

/* Dlaždice príloh pod komentárom. Fotka sa ukazuje ako fotka — filmový pás
   názvov súborov nikomu nepovie, čo na nich je. */
.gal { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; }
.gal-i {
    position: relative; display: block; width: 92px; height: 92px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--sunken); overflow: hidden; text-decoration: none;
    color: var(--ink-soft); transition: border-color .12s, transform .12s;
}
.gal-i:hover { border-color: var(--brand); transform: translateY(-1px); }
.gal-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Súbor bez obrázka (video, PDF, dokument) — ikona a názov pod ňou. */
.gal-ikona {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: 100%; height: 100%; padding: 6px; text-align: center;
}
.gal-ikona .ti { font-size: 1.625rem; color: var(--muted); }
.gal-meno {
    font-size: .64rem; line-height: 1.25; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Značka prehrávania cez miniatúru videa — bez nej sa video nedá odlíšiť
   od fotky, kým naň človek neklikne. */
.gal-hraj {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.28); color: #fff; font-size: 1.625rem;
}

/* Okno cez celú obrazovku. */
.nah {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: calc(var(--z-max) + 200); display: flex; align-items: center;
    justify-content: center; background: rgba(15,14,12,.93);
}
.nah[hidden] { display: none; }
body.nah-otvorene { overflow: hidden; }
.nah-bar {
    position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center;
    gap: 12px; padding: 10px 14px; color: #f3f1ed; font-size: .84rem;
    background: linear-gradient(rgba(0,0,0,.55), transparent);
}
.nah-nazov { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nah-pocet { color: #b9b4ab; flex: 0 0 auto; }
.nah-bar .nah-stiahnut { margin-left: auto; }
.nah-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
    border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-pill);
    background: rgba(255,255,255,.08); color: #f3f1ed; font: inherit;
    font-size: .8rem; cursor: pointer; text-decoration: none;
}
.nah-btn:hover { background: rgba(255,255,255,.18); }
.nah-telo {
    display: flex; align-items: center; justify-content: center;
    max-width: min(1400px, 92vw); max-height: 82vh; width: 100%;
}
.nah-telo img, .nah-telo video { max-width: 100%; max-height: 82vh; border-radius: var(--r-sm); }
.nah-pdf { width: min(1100px, 92vw); height: 82vh; border: 0; border-radius: var(--r-sm); background: #fff; }
.nah-caka { color: #b9b4ab; font-size: .86rem; }
.nah-chyba {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 30px; max-width: 420px; text-align: center;
    color: #f3f1ed; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14); border-radius: var(--r);
}
.nah-chyba .ti { font-size: 2.125rem; color: #e7c98a; }
.nah-chyba p { margin: 0; font-size: .88rem; line-height: 1.5; }

.nah-sip {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.4);
    color: #f3f1ed; font-size: 1.375rem;
}
.nah-sip:hover { background: rgba(255,255,255,.2); }
.nah-vlavo { left: 14px; }
.nah-vpravo { right: 14px; }
/* Jediná príloha — šípky nemajú kam viesť. */
.nah--sam .nah-sip { display: none; }

@media (max-width: 760px) {
    .gal-i { width: 78px; height: 78px; }
    .nah-sip { width: 38px; height: 38px; font-size: 1.125rem; }
    .nah-vlavo { left: 6px; }
    .nah-vpravo { right: 6px; }
    .nah-telo { max-width: 100vw; }
    /* Na mobile sa listuje prstom; text tlačidla by bral miesto názvu. */
    .nah-stiahnut span { display: none; }
}

/* ==========================================================================
   VYBERANIE PRÍLOH (`static/js/prilohy.js`)
   ==========================================================================
   Spoločný komponent ako galéria vyššie: prílohy pripína Technické oddelenie,
   skeny Zmluvy a doklady Faktúry. Bez JavaScriptu ostane pôvodné pole — preto
   je `.up-skryte` len trieda, nie `display:none` v HTML. */

/* Text len pre čítačku obrazovky (popis tabuľky, štítok poľa). Šablóny
   `sr-only` používali od začiatku, pravidlo však chýbalo — popisy tabuliek
   svietili nad nimi ako nadpis navyše (Po splatnosti, 30. 10. 2026). */
.sr-only {
    position: absolute; left: 0; top: 0; width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
}

/* Pole, ktoré nesmie zaberať miesto ani ovplyvniť rozloženie. `!important`
   je tu vedomé: `.zl-form input[type=file]` v `modules.css` dáva poliam
   `width:100%` a má vyššiu špecifickosť aj neskoršie poradie, takže skryté
   pole ostalo široké ako formulár a vytŕčalo zaň — na telefóne sa tým celá
   stránka hýbala do boku (`tools/kontrola_mobil.py`, 25. 9. 2026).
   Toto je pomocná trieda s jedinou úlohou „nezasahuj do rozloženia";
   výnimka patrí presne sem a nikam inam. */
.up-skryte {
    /* Ukotvené: bez left/top stálo 1px pole na svojom prirodzenom mieste — na
       tablete až 291 px za pravým okrajom, a absolútny prvok natiahne stránku
       aj orezaný (Technické, nová požiadavka, 2. 10. 2026). */
    position: absolute !important; left: 0 !important; top: 0 !important;
    width: 1px !important; height: 1px !important;
    min-width: 0 !important; padding: 0 !important; margin: -1px !important;
    border: 0 !important; overflow: hidden; clip-path: inset(50%);
    opacity: 0; pointer-events: none;
}

.up-zona {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 14px 16px; cursor: pointer;
    border: 1.5px dashed var(--line); border-radius: var(--r);
    background: var(--sunken); transition: border-color .12s, background .12s;
}
.up-zona:hover { border-color: var(--brand); }
/* Súbor sa práve ťahá nad zónou — musí byť vidieť, že tu sa pustí. */
.up-zona--nad { border-color: var(--brand); background: var(--brand-50); border-style: solid; }
/* Keď už je niečo vybraté, zóna ustúpi do pozadia — hlavná je teraz ukážka. */
.up-zona--ma { padding: 10px 14px; background: transparent; }

.up-vyzva { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .86rem; }
.up-vyzva .ti { font-size: 1.3125rem; color: var(--brand); }
.up-tlacidla { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.up-btn { flex: 0 0 auto; }

.up-zoznam { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.up-polozka {
    display: flex; align-items: center; gap: 11px; padding: 7px 10px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.up-nahlad {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; overflow: hidden;
    border-radius: var(--r-sm); background: var(--sunken);
}
.up-nahlad img { width: 100%; height: 100%; object-fit: cover; }
.up-nahlad .ti { font-size: 1.3125rem; color: var(--muted); }
.up-popis { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.up-meno { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-velkost { font-size: .72rem; color: var(--faint); }
.up-zmaz {
    margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; cursor: pointer; font-size: 1rem;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--surface); color: var(--muted);
}
.up-zmaz:hover { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger); }
.up-hlaska {
    margin: 8px 0 0; padding: 9px 12px; font-size: .82rem; line-height: 1.5;
    border: 1px solid var(--warning-line); border-radius: var(--r-sm);
    background: var(--warning-bg); color: var(--warning);
}

/* Na dotykovom zariadení sú tlačidlá to hlavné a dostanú celú šírku — prst
   nie je kurzor. Výzva sa skrýva: „Odfoť poruchu alebo vyber z galérie" je
   presne to, čo píšu tlačidlá vedľa, a riadok navyše na telefóne stojí miesto.
   Ťahanie myšou sa neponúka, lebo sa nedá spraviť. */
@media (pointer: coarse) {
    .up-zona { flex-direction: column; align-items: stretch; gap: 8px; }
    .up-vyzva { display: none; }
    .up-tlacidla { margin-left: 0; }
    .up-tlacidla .up-btn { flex: 1 1 40%; justify-content: center; padding-top: 11px; padding-bottom: 11px; }
}

/* Nadpis poľa s prílohami. Obal je `<div class="zl-fld">`, nie `<label>` —
   klik do zóny nesmie navyše otvárať skryté pôvodné pole. Vzhľad písma teda
   dedí z `.zl-fld > span` ako všade inde, tu sa dopĺňa len odsadenie. */
.up-nadpis { display: block; margin-bottom: 5px; }
.up-nadpis em { font-weight: 500; font-style: italic; color: var(--faint); }

/* ==========================================================================
   9) Pohyb — prechody medzi stránkami, pás priebehu, odozva na dotyk
   Nový frontend (9/2026). Pravidlo: pohyb potvrdzuje, že klik zabral, a
   ukazuje, čo sa zmenilo — nikdy nezdržiava. Nič tu netrvá dlhšie než
   ~0,35 s a `prefers-reduced-motion` vypne všetko (koniec sekcie).
   ========================================================================== */

/* --- Prechod medzi stránkami (View Transitions, rovnaký pôvod) ------------
   Menu a kontextová lišta sa pri prechode nehýbu, prelieva sa len obsah.
   Platí pre klasické načítanie aj pre výmenu obsahu cez htmx. */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: nx-menu; }
.ctxbar { view-transition-name: nx-lista; }
.content { view-transition-name: nx-obsah; }
::view-transition-group(nx-menu),
::view-transition-group(nx-lista),
::view-transition-old(nx-menu), ::view-transition-new(nx-menu),
::view-transition-old(nx-lista), ::view-transition-new(nx-lista) { animation: none; }
/* Obsah má pri odchode a príchode inú výšku — obraz sa nesmie naťahovať,
   drží sa horného okraja a prelieva sa. */
::view-transition-group(nx-obsah) { animation-duration: .3s; }
::view-transition-old(nx-obsah), ::view-transition-new(nx-obsah) {
    height: 100%; width: 100%; object-fit: none; object-position: 50% 0;
}
::view-transition-old(nx-obsah) { animation: nx-von .16s ease-in both; }
::view-transition-new(nx-obsah) { animation: nx-dnu .3s cubic-bezier(.2, .7, .2, 1) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@keyframes nx-von { to { opacity: 0; } }
@keyframes nx-dnu { from { opacity: 0; transform: translateY(6px); } }

/* --- Pás priebehu hore ----------------------------------------------------- */
.nx-pas {
    position: fixed; top: 0; right: 0; bottom: auto; left: 0; height: 3px; z-index: var(--z-max); pointer-events: none;
    background: linear-gradient(90deg, var(--c1), var(--c3), var(--accent));
    transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
    transition: opacity .35s ease .05s;
}
html.nx-odchadza .nx-pas, html.nx-nacitava .nx-pas {
    opacity: 1; animation: nx-beh 2.2s cubic-bezier(.1, .7, .2, 1) forwards;
}
html.nx-chyba .nx-pas { opacity: 1; transform: scaleX(1); background: var(--danger); animation: none; }
@keyframes nx-beh { 0% { transform: scaleX(0); } 40% { transform: scaleX(.6); } 100% { transform: scaleX(.92); } }
/* Kým htmx čaká na odpoveď, obsah jemne ustúpi — vidno, že sa mení. */
html.nx-nacitava main.content { opacity: .6; transition: opacity .2s ease .08s; }

/* --- Odozva kariet a riadkov ----------------------------------------------- */
.stat-card, .kpi { transition: box-shadow .22s ease, border-color .22s ease, transform .22s cubic-bezier(.2, .7, .2, 1); }
.stat-card:hover, .kpi:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.panel { transition: box-shadow .25s ease, border-color .25s ease; }
.stat-value, .kpi-v { font-variant-numeric: tabular-nums; }
table.tbl tbody tr { transition: background-color .15s ease; }
.btn, .btn-primary, .btn-ghost, .btn-submit, .btn-danger, .seg button, .graf-typ {
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.seg button:active, .graf-typ:active { transform: scale(.97); }

/* --- Tabuľky s políčkami (Príprava, Výpočet, Trezor…) — ui.js, časť 3 -----
   Riadok, v ktorom sa práve píše, sa podfarbí a dostane pruh: v 35 riadkoch
   rovnakých políčok sa oko nestratí. Nula vybledne, prepísané pole svieti,
   kým sa neuloží. Pozadia sú nepriehľadné — zmrazené stĺpce (.stick) by inak
   pri vodorovnom posune presvitali. */
table tbody tr:focus-within > td {
    background-color: var(--tonal);
    background-color: color-mix(in srgb, var(--c1) 6%, var(--surface));
}
table tbody tr:focus-within > td:first-child { box-shadow: inset 3px 0 0 var(--c1); }
td input[type="text"], td input:not([type]), td input[type="number"] {
    transition: border-color .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease;
}
td input[type="text"]:focus, td input:not([type]):focus, td input[type="number"]:focus {
    border-color: var(--c1);
    box-shadow: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1) 20%, transparent);
    outline: none;
}
td input.je-nula:not(:focus) { color: var(--faint); }
td input.je-nula:not(:focus) + .eur { opacity: .45; }
td input.je-zmenene {
    background-color: var(--warn-100);
    background-color: color-mix(in srgb, var(--warn-400) 16%, var(--surface));
    border-color: var(--warning);
    color: var(--ink);
    font-weight: 650;
}
/* Moduly, kde rámček kreslí obal a pole je priehľadné (Príprava: `.mcell`).
   Zdvojená trieda v :has() len zdvíha špecificitu nad modulové `.mcell:has(.num)`.
   Vylepšenie (Edge 83 ho nepozná, pole samo je zvýraznené `td input.je-zmenene`). */
@supports selector(:has(a)) {
    td :is(div, span, label):has(> input.je-zmenene.je-zmenene) {
        background-color: var(--warning-bg);
        background-color: color-mix(in srgb, var(--warn-400) 16%, var(--surface));
        border-color: var(--warning);
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    html.nx-odchadza .nx-pas, html.nx-nacitava .nx-pas { animation: none; transform: scaleX(.6); }
    .stat-card, .kpi, .panel, table.tbl tbody tr { transition: none; }
}

/* ==========================================================================
   10) Rýchly skok (Ctrl+K) — static/js/prikazy.js
   Okno uprostred hore, sklo za ním. Ponuka sa skladá z menu, ktoré človek
   vidí — nová firma alebo nový modul sa v nej objaví bez jediného riadku.
   ========================================================================== */
.nx-prikazy { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: calc(var(--z-vrstva) + 100); }
.nx-prikazy[hidden] { display: none; }
.nx-prikazy-clona {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 16, 15, .38);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .16s ease;
}
.nx-prikazy-box {
    position: relative; width: min(640px, calc(100vw - 32px)); margin: 12vh auto 0;
    background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg); overflow: hidden;
    opacity: 0; transform: translateY(-8px) scale(.985);
    transition: opacity .16s ease, transform .2s cubic-bezier(.2, .7, .2, 1);
}
.nx-prikazy.je-otvorene .nx-prikazy-clona { opacity: 1; }
.nx-prikazy.je-otvorene .nx-prikazy-box { opacity: 1; transform: none; }
.nx-prikazy-hlad {
    display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 58px;
    border-bottom: 1px solid var(--line-soft); color: var(--faint);
}
.nx-prikazy-hlad .ti { font-size: 1.25rem; }
.nx-prikazy-hlad input {
    flex: 1; height: auto; border: 0; outline: none; background: transparent; font: inherit;
    font-size: 1.02rem; color: var(--ink); padding: 0; box-shadow: none !important;
}
.nx-prikazy kbd {
    font: 600 .68rem/1 inherit; color: var(--muted); background: var(--sunken);
    border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-xs); padding: 3px 6px;
}
.nx-prikazy-zoznam { list-style: none; margin: 0; padding: 6px; max-height: min(52vh, 440px); overflow: auto; }
.nx-prikazy-sek {
    font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--faint); padding: 10px 12px 5px;
}
.nx-prikazy-zoznam li[data-i] {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r);
    cursor: pointer; color: var(--ink-soft);
}
.nx-prikazy-zoznam li.je-vybrana { background: color-mix(in srgb, var(--c1) 10%, var(--surface)); color: var(--ink); }
.nx-pr-ik {
    width: 32px; height: 32px; border-radius: var(--r); display: grid; place-items: center; flex: 0 0 auto;
    background: var(--sunken); color: var(--ink-soft); transition: background-color .15s ease, color .15s ease;
}
.nx-prikazy-zoznam li.je-vybrana .nx-pr-ik { background: var(--c1); color: #fff; }
.nx-pr-ik .ti { font-size: 1.0625rem; }
.nx-pr-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nx-pr-t b { font-weight: 620; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-pr-t small { font-size: .75rem; color: var(--faint); }
.nx-pr-enter { opacity: 0; color: var(--c1); transition: opacity .15s ease; }
.nx-prikazy-zoznam li.je-vybrana .nx-pr-enter { opacity: 1; }
.nx-prikazy-nic { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px; color: var(--muted); }
.nx-prikazy-nic .ti { font-size: 1.75rem; color: var(--faint); }
.nx-prikazy-hlada { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: var(--muted); font-size: .84rem; }
.nx-prikazy-hlada .nx-tl-krug { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--c1);
    border-right-color: transparent; border-radius: 50%; animation: nx-toc .7s linear infinite; }
.nx-prikazy-pata {
    display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--line-soft);
    font-size: .74rem; color: var(--faint); background: var(--surface-2);
}
.nx-prikazy-pata kbd { margin-right: 3px; }
/* Spúšťač v kontextovej lište — pre toho, kto skratku nepozná. */
.ctx-prikazy {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 11px;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
    color: var(--faint); font: inherit; font-size: .8rem; cursor: pointer; min-width: 190px;
    transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ctx-prikazy:hover { border-color: var(--line-strong); color: var(--ink-soft); box-shadow: var(--shadow-xs); }
.ctx-prikazy span { flex: 1; text-align: left; }
.ctx-prikazy kbd {
    font: 600 .66rem/1 inherit; color: var(--muted); background: var(--sunken);
    border: 1px solid var(--line); border-radius: var(--r-xs); padding: 3px 5px;
}
@media (max-width: 860px) { .ctx-prikazy { min-width: 0; } .ctx-prikazy span, .ctx-prikazy kbd { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .nx-prikazy-box, .nx-prikazy-clona { transition: none; }
}

/* ==========================================================================
   11) Odozva na akciu — tlačidlo pri odosielaní, notifikácie (ui.js 4–5)
   ========================================================================== */
.je-odosiela { pointer-events: none; cursor: progress; opacity: .92; }
.je-odosiela .nx-tl-krug {
    display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: nx-toc .7s linear infinite;
}
@keyframes nx-toc { to { transform: rotate(360deg); } }
/* Tlačidlo bez textu (ikona) — krúžok cez ikonu. */
.je-odosiela:not(:has(.nx-tl-text)) .ti { animation: nx-toc .8s linear infinite; }

.nx-toasty {
    position: fixed; top: 64px; right: 18px; z-index: var(--z-hlasky); display: flex; flex-direction: column;
    gap: 10px; width: min(400px, calc(100vw - 32px)); pointer-events: none;
}
.nx-toast {
    pointer-events: auto; position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 11px; padding: 13px 40px 13px 13px;
    background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); font-size: .87rem; line-height: 1.45; color: var(--ink);
    animation: nx-toast-dnu .38s cubic-bezier(.2, .9, .25, 1.15) both;
}
.nx-toast.je-odchod { animation: nx-toast-von .32s cubic-bezier(.4, 0, 1, 1) both; }
/* Nábeh: z rozostrenia sa zaostrí a jemne dosadne — potvrdenie má pôsobiť
   pokojne, nie ako vyskakovacie okno. */
@keyframes nx-toast-dnu {
    0%   { opacity: 0; transform: translateY(-10px) scale(.97); filter: blur(6px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
}
@keyframes nx-toast-von { to { opacity: 0; transform: translateX(18px) scale(.98); filter: blur(4px); } }
/* Úspech: krátke svetlo prebehne po okraji, keď notifikácia dosadne. */
.nx-toast--success::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; pointer-events: none;
    background: none;
    background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--success) 14%, transparent) 50%, transparent 70%);
    background-size: 250% 100%; animation: nx-lesk 1.1s ease .35s both;
}
@keyframes nx-lesk { from { background-position: 120% 0; } to { background-position: -30% 0; } }
.nx-toast-ic {
    width: 30px; height: 30px; border-radius: var(--r); display: grid; place-items: center; flex: 0 0 auto;
    background: var(--sunken); color: var(--ink-soft);
}
.nx-toast-ic .ti { font-size: 1.125rem; }
.nx-toast--success .nx-toast-ic { background: var(--success-bg); color: var(--success); }
.nx-toast--success .nx-toast-ic .ti { animation: nx-fajka .5s cubic-bezier(.2, .9, .25, 1.3) .15s both; }
.nx-toast--error .nx-toast-ic, .nx-toast--danger .nx-toast-ic { background: var(--danger-bg, var(--red-50)); color: var(--danger); }
.nx-toast--warning .nx-toast-ic { background: var(--warning-bg); color: var(--warning); }
.nx-toast--info .nx-toast-ic { background: var(--info-bg, var(--sunken)); color: var(--info, var(--ink-soft)); }
@keyframes nx-fajka { from { transform: scale(.3) rotate(-25deg); opacity: 0; } }
.nx-toast-t { flex: 1; min-width: 0; padding-top: 4px; }
.nx-toast-t a { color: inherit; font-weight: 650; }
.nx-toast-x {
    position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center;
}
.nx-toast-x:hover { background: var(--sunken); color: var(--ink); }
/* Pás, ktorý ukazuje, kedy notifikácia zmizne; pri myši sa zastaví. */
.nx-toast-cas {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: 0 50%;
    background: currentColor; opacity: .18; animation: nx-cas 5.2s linear both;
}
.nx-toast--success .nx-toast-cas { color: var(--success); opacity: .45; }
.nx-toast.je-drzi .nx-toast-cas { animation-play-state: paused; }
.nx-toast.je-trvaly .nx-toast-cas { display: none; }
@keyframes nx-cas { to { transform: scaleX(0); } }

/* ==========================================================================
   12) Nástenka — nábeh dlaždíc, úlohy ako karty
   ========================================================================== */
.nas-prichod { animation: nx-prichod .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes nx-prichod { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.stat-card--kostra .skeleton { position: relative; overflow: hidden; }
a.stat-card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.tasks-panel .task-list { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.tasks-panel .task-item {
    display: flex; align-items: center; gap: 13px; margin: 0; padding: 11px 13px;
    border: 1px solid var(--line-soft); border-left-width: 3px; border-radius: var(--r);
    background: var(--surface); position: relative;
    transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, border-color .2s ease;
    animation: nx-prichod .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms + 120ms);
}
.tasks-panel .task-item:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); border-color: var(--line); }
.tasks-panel .task-ic {
    width: 36px; height: 36px; border-radius: var(--r); display: grid; place-items: center; flex: 0 0 auto;
    background: color-mix(in srgb, var(--c1) 12%, var(--surface)); color: var(--c1);
}
.tasks-panel .task-ic .ti { font-size: 1.125rem; }
.tasks-panel .task--zaloha_schvalit .task-ic { background: var(--warning-bg); color: var(--warning); }
.tasks-panel .task--zaloha_zamietnuta .task-ic { background: var(--danger-bg, var(--red-50)); color: var(--danger); }
.tasks-panel .task-body { flex: 1; }
.tasks-panel .task-title { font-size: .92rem; }
/* Celá karta je klikateľná — odkaz v nadpise sa roztiahne cez ňu. */
.tasks-panel a.task-title::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }
.tasks-panel a.task-title:hover { text-decoration: none; }
.tasks-panel .task-actions { position: relative; z-index: 1; }
.tasks-panel .task-time { font-size: .76rem; }
.tasks-panel .task-item:has(a.task-title)::after {
    content: "\ea61"; font-family: "tabler-icons"; color: var(--faint); font-size: 1rem;
    transition: transform .2s ease, color .2s ease;
}
.tasks-panel .task-item:has(a.task-title):hover::after { transform: translateX(3px); color: var(--c1); }
.tasks-panel .empty-state .es-ic { animation: nx-fajka .6s cubic-bezier(.2, .9, .25, 1.3) .2s both; }

@media (prefers-reduced-motion: reduce) {
    .nas-prichod, .tasks-panel .task-item, .nx-toast, .nx-toast.je-odchod { animation: none; }
    .je-odosiela .nx-tl-krug { animation-duration: 2s; }
}

/* ==========================================================================
   13) Prehľadové komponenty — skladačka pre prehľady modulov (od 9/2026)
   Vznikli z pilotu Finančného reportingu. Sú generické: modul ich poskladá
   v šablóne, nepíše vlastné CSS ani JS. (Dlaždice .nx-kpi zmizli 6. 10. 2026 —
   Financie prešli na rad kariet .nx-cisla zo sekcie 19, iný modul ich nemal.)

     .nx-chip(.je-dobre/-zle)      zmena oproti minulému obdobiu
     .nx-karty > .nx-karta         mriežka 12 stĺpcov; .nx-span-4/5/6/7/8/12
     details.nx-rozbal             rozbaľovací blok (natívny <details>)
     .nx-drobcek                   cesta späť (s data-filtre-nastav / -esc)
     .nx-pasik > i                 pásik v bunke tabuľky (šírka inline %)
     .nx-upozornenie(--warn)       pás s ikonou nad obsahom
   ========================================================================== */
.nx-chip {
    display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 5px; border-radius: var(--r-pill);
    font-weight: 700; background: var(--sunken); color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.nx-chip.je-dobre { background: var(--success-bg); color: var(--success); }
.nx-chip.je-zle { background: var(--warning-bg); color: var(--warning); }

.nx-karty { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.nx-karta {
    grid-column: span 6; min-width: 0; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); padding: 18px 18px 12px; box-shadow: var(--shadow-xs);
    transition: box-shadow .3s ease, border-color .3s ease;
}
.nx-karta:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.nx-karta > header h2 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.nx-karta > header p { margin: 3px 0 12px; font-size: .8rem; color: var(--muted); line-height: 1.45; max-width: 72ch; }
.nx-span-4 { grid-column: span 4; } .nx-span-5 { grid-column: span 5; } .nx-span-6 { grid-column: span 6; }
.nx-span-7 { grid-column: span 7; } .nx-span-12 { grid-column: span 12; }
@media (max-width: 1100px) { .nx-span-4, .nx-span-5, .nx-span-6, .nx-span-7 { grid-column: span 12; } }

details.nx-rozbal {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 18px; overflow: hidden;
    interpolate-size: allow-keywords;
}
details.nx-rozbal > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 16px;
    font-weight: 650; font-size: .9rem; color: var(--ink);
}
details.nx-rozbal > summary::-webkit-details-marker { display: none; }
details.nx-rozbal > summary:hover { background: var(--tonal); }
details.nx-rozbal > summary .nx-rozbal-sum { margin-left: auto; font-weight: 500; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
details.nx-rozbal > summary::after {
    content: "\ea5f"; font-family: "tabler-icons"; color: var(--muted);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
details.nx-rozbal[open] > summary::after { transform: rotate(180deg); }
details.nx-rozbal::details-content { block-size: 0; overflow: hidden; transition: block-size .35s cubic-bezier(.2, .7, .2, 1), content-visibility .35s allow-discrete; }
details.nx-rozbal[open]::details-content { block-size: auto; }

.nx-drobcek { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: .92rem; color: var(--muted); animation: nx-prichod .35s cubic-bezier(.2, .7, .2, 1) both; }
.nx-drobcek button, .nx-drobcek a {
    border: 0; background: var(--sunken); color: var(--ink-soft); font: inherit; font-weight: 600; cursor: pointer;
    padding: 6px 12px; border-radius: var(--r-pill); display: inline-flex; gap: 6px; align-items: center; text-decoration: none;
}
.nx-drobcek button:hover, .nx-drobcek a:hover { background: var(--tonal); color: var(--ink); }
.nx-drobcek .nx-drobcek-pod { font-size: .8rem; color: var(--muted); }
.nx-drobcek strong { color: var(--ink); font-size: 1.05rem; }
.nx-drobcek small { margin-left: auto; color: var(--faint); font-size: .75rem; }

.nx-pasik { display: inline-flex; width: 90px; height: 7px; border-radius: var(--r-xs); background: var(--sunken); overflow: hidden; justify-content: flex-end; vertical-align: middle; margin-right: 10px; }
.nx-pasik > i { display: block; height: 100%; border-radius: var(--r-xs); background: var(--c1); transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.nx-pasik.je-zaporny > i { background: var(--danger); }
tr[data-filtre-nastav] { cursor: pointer; }

.nx-upozornenie { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); margin-bottom: 18px; font-size: .88rem; line-height: 1.5;
    background: var(--danger-bg, var(--red-50)); border: 1px solid var(--red-200); color: var(--ink); }
.nx-upozornenie > .ti { font-size: 1.25rem; color: var(--danger); }
.nx-upozornenie--warn { background: var(--warning-bg); border-color: var(--warning-line); }
.nx-upozornenie--warn > .ti { color: var(--warning); }
/* Kontext, nie poplach (Financie: „Podklady majú N zistení") — teplý piesok,
   akcia vpravo (`.nx-upozornenie-akcia`), na úzkej obrazovke pod textom. */
.nx-upozornenie--info { align-items: center; background: var(--tonal); border-color: var(--line); }
.nx-upozornenie--info > .ti { color: var(--warning); }
.nx-upozornenie--ok { align-items: center; background: var(--success-bg); border-color: var(--success-line, var(--line)); }
.nx-upozornenie--ok > .ti { color: var(--success); }
.nx-upozornenie > div { flex: 1 1 auto; min-width: 0; }
.nx-upozornenie > div > p { margin: 3px 0 0; font-size: .8rem; color: var(--muted); }
.nx-upozornenie-akcia { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
    .nx-upozornenie:has(> .nx-upozornenie-akcia) { flex-wrap: wrap; }
    .nx-upozornenie-akcia { margin-left: 32px; }
}
/* Jeden pás pre všetky moduly (balík 7 auditu 8. 10. 2026 — kedysi 11
   modulových kópií: tz-alert, zl-varovanie, dz-banner, entra-warn, pr-alert,
   tk-upozornenie, pl-warn, ac-warn, rep-odv-warn, vp-chyba, inline panely
   Faktúr). Čo kópie niesli navyše, je tu ako prvok jadra:
     a.nx-upozornenie          celý pás je odkaz (nástenka → Prístupy)
     .nx-upozornenie--maly     jedna veta v karte / zozname
     > div > ul                zoznam nálezov (.nx-upozornenie-zoznam)
     > div > tabuľka / form    nálezy s akciami pod textom (Výpočet, Reporting) */
.nx-upozornenie > .ti { flex: 0 0 auto; }
.nx-upozornenie > div > strong:first-child { color: var(--ink); }
.nx-upozornenie > div > p a, .nx-upozornenie > div > a { color: inherit; font-weight: 650; }
.nx-upozornenie > div > div:not(:first-child), .nx-upozornenie > div > table, .nx-upozornenie > div > form,
.nx-upozornenie > div > ul:not(:first-child), .nx-upozornenie > div > ol:not(:first-child), .nx-upozornenie > div > table:not(:first-child) { margin-top: 10px; }
.nx-upozornenie-zoznam { margin: 0; padding-left: 18px; }
.nx-upozornenie-zoznam li + li { margin-top: 4px; }
.nx-upozornenie-zoznam small { display: block; color: var(--muted); }
a.nx-upozornenie { text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
a.nx-upozornenie:hover { border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
a.nx-upozornenie .nx-upozornenie-akcia { align-self: center; font-size: .82rem; font-weight: 650; }
.nx-upozornenie--maly { gap: 9px; padding: 10px 12px; margin-bottom: 12px; font-size: .84rem; border-radius: var(--r); }
.nx-upozornenie--maly > .ti { font-size: 1.0625rem; }
/* Upozornenie v texte (bunka, popis poľa, riadok karty) — nie pás. */
.nx-text-pozor { color: var(--warning-ink); font-weight: 600; }
/* Text stavu automatického ukladania (siet.js Nexus.stavUlozenia) — jeden
   pre report Tržieb aj Tím: „ukladám…“, „uložené 14:03:22“, „neuložené — …“. */
.nx-ulozenie.je-uklada { color: var(--muted); }
.nx-ulozenie.je-chyba { color: var(--danger); font-weight: 600; }

/* Ponuka aplikácie a upozornení (static/js/aplikacia.js) — pás nad obsahom
   a panel „Upozornenia na tomto zariadení" na Mojich úlohách. */
.app-ponuka, .app-panel {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 18px;
    border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line);
    box-shadow: var(--shadow-xs); font-size: .88rem; line-height: 1.5;
    animation: app-ponuka-in .32s cubic-bezier(.2, .7, .2, 1);
}
.app-ponuka-ic {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r);
    background: var(--brand); color: var(--brand-ink-on); font-size: 1.3125rem;
}
.app-panel > .ti { flex: none; font-size: 1.25rem; color: var(--ink-soft); }
.app-ponuka-t, .app-panel-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-ponuka-t > span, .app-panel-t > span { color: var(--ink-soft); }
.app-ponuka-akcie { flex: none; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.app-ik { font-size: 1.15em; vertical-align: -.18em; color: var(--ink); }
@keyframes app-ponuka-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 640px) {
    .app-ponuka, .app-panel { flex-wrap: wrap; }
    .app-ponuka-akcie { width: 100%; justify-content: stretch; }
    .app-ponuka-akcie > button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .app-ponuka, .app-panel { animation: none; } }

/* ==========================================================================
   14) Zásuvka s detailom — ui.js časť 6, `data-detail="url"`
   Panel sprava; obrazovka pod ním ostane (detail je odbočka, nie odchod).
   ========================================================================== */
.nx-zasuvka { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-vrstva); }
.nx-zasuvka[hidden] { display: none; }
.nx-zasuvka-clona { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 16, 15, .28); opacity: 0; transition: opacity .22s ease; }
.nx-zasuvka-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
    background: var(--raised); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
    overflow: auto; outline: none; transform: translateX(28px); opacity: 0;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
}
.nx-zasuvka.je-otvorena .nx-zasuvka-clona { opacity: 1; }
.nx-zasuvka.je-otvorena .nx-zasuvka-panel { transform: none; opacity: 1; }
html.nx-zasuvka-otvorena { overflow: hidden; }
.nx-zasuvka-x {
    position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 2;
    width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--line);
    background: var(--surface); color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.nx-zasuvka-x:hover { color: var(--ink); border-color: var(--line-strong); }
.nx-zasuvka-telo { padding: 22px 24px 28px; }
.nx-z-hlava { padding-right: 40px; margin-bottom: 18px; }
.nx-z-kicker { font-size: .75rem; font-weight: 650; letter-spacing: .03em; color: var(--muted); }
.nx-z-hlava h2 { margin: 4px 0 6px; font-size: 1.35rem; letter-spacing: -.015em; }
.nx-z-cislo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 2rem; font-weight: 750;
    letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--ink); }
.nx-z-cislo small { font-size: 1rem; color: var(--muted); font-weight: 600; }
.nx-z-cislo .nx-chip { font-size: .78rem; letter-spacing: 0; align-self: center; }
.nx-z-sekcia { margin-top: 20px; }
.nx-z-sekcia h3 { margin: 0 0 10px; font-size: .88rem; font-weight: 700; color: var(--ink); }
.nx-z-sekcia h3 small { font-weight: 500; color: var(--faint); margin-left: 6px; }
/* Rozpis účtov v zásuvke = `table.tbl tbl--zalom` (krok 0b); odchýlka: riadok
   podľa obsahu (účet s pásikom a dokladmi), pätička neprilepená — zásuvka
   scrolluje celá. */
.tbl.nx-z-tab { font-size: .85rem; font-variant-numeric: tabular-nums; background: transparent; }
.tbl.nx-z-tab tbody td { height: auto; padding: 9px 4px; vertical-align: top; }
.nx-z-tab tbody tr { animation: nx-prichod .35s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
.nx-z-tab td.n { white-space: nowrap; }
.nx-z-tab td.n em { display: block; font-style: normal; font-size: .72rem; color: var(--faint); }
.nx-z-ucet { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.nx-z-ucet code { font-size: .78rem; color: var(--ink-soft); background: var(--sunken); padding: 2px 6px; border-radius: var(--r-xs); min-width: 52px; text-align: center; }
.nx-z-ucet > span:not(.nx-pasik) { color: var(--ink); }
.nx-z-ucet small { display: block; font-size: .72rem; color: var(--faint); }
.nx-z-ucet .nx-pasik { grid-column: 2; width: 100%; max-width: 260px; height: 5px; margin: 6px 0 0; justify-content: flex-start; }
.nx-z-korekcia td { background: var(--tonal); background: color-mix(in srgb, var(--c1) 4%, transparent); }
.tbl.nx-z-tab tfoot td { position: static; height: auto; padding: 11px 4px 0; background: transparent; box-shadow: none;
    font-weight: 750; border-top: 1.5px solid var(--line-strong); }
.nx-z-kontrola { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: .8rem; color: var(--success); }
.nx-z-kontrola.je-zle { color: var(--danger); background: var(--danger-bg, var(--red-50)); padding: 10px 12px; border-radius: var(--r); }
.nx-z-pata { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* Čo sa dá rozložiť — bunka / dlaždica s `data-detail`. */
[data-detail] { cursor: zoom-in; }
td[data-detail] { position: relative; }
td[data-detail]:hover { text-decoration: underline dotted var(--c1); text-decoration: underline dotted color-mix(in srgb, var(--c1) 60%, transparent); text-underline-offset: 3px; }
td[data-detail]:hover::after {
    content: "\eb56"; font-family: "tabler-icons"; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    font-size: .8125rem; color: var(--c1); opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
    .nx-zasuvka-panel, .nx-zasuvka-clona { transition: none; }
    .nx-z-tab tbody tr { animation: none; }
}

/* ==========================================================================
   15) Uložené pohľady — static/js/pohlady.js (tlačidlo v každom filtri)
   ========================================================================== */
.nx-pohlady-tl {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border: 1px dashed var(--line-strong); border-radius: var(--r-pill); background: transparent;
    color: var(--ink-soft); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.nx-pohlady-tl:hover, .nx-pohlady-tl[aria-expanded="true"] { border-style: solid; border-color: var(--c1); color: var(--ink); background: var(--surface); }
.nx-pohlady {
    position: absolute; z-index: calc(var(--z-vrstva) - 100); width: 340px; background: var(--raised);
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 8px;
    animation: nx-prichod .22s cubic-bezier(.2, .7, .2, 1) both;
}
.nx-pohlady-h { display: flex; align-items: center; gap: 7px; padding: 8px 8px 6px; font-size: .74rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.nx-pohlady-z { list-style: none; margin: 0; padding: 0; }
.nx-pohlady-z li { display: flex; align-items: center; border-radius: var(--r-sm); transition: background-color .15s ease, opacity .2s ease; }
.nx-pohlady-z li:hover { background: var(--tonal); }
.nx-pohlady-z li.je-aktivny a { color: var(--c1); font-weight: 650; }
.nx-pohlady-z li.je-odchod { opacity: 0; }
.nx-pohlady-z a { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px; color: var(--ink); text-decoration: none; font-size: .86rem; min-width: 0; }
.nx-pohlady-z button { border: 0; background: transparent; color: var(--faint); cursor: pointer; width: 30px; height: 30px; border-radius: var(--r-sm); opacity: 0; }
.nx-pohlady-z li:hover button { opacity: 1; }
.nx-pohlady-z button:hover { color: var(--danger); background: var(--sunken); }
.nx-pohlady-nic { margin: 2px 8px 8px; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.nx-pohlady-novy { display: flex; gap: 6px; padding: 8px; margin-top: 4px; border-top: 1px solid var(--line-soft); }
.nx-pohlady-novy { --pole-h: 32px; --pole-px: 10px; --pole-pismo: .84rem; }
.nx-pohlady-novy input { flex: 1; min-width: 0; }

/* Doklady pod účtom v zásuvke (financie/_detail_doklady.html). */
.nx-z-dok { grid-column: 2; margin-top: 6px; }
.nx-z-dok > summary { cursor: pointer; font-size: .74rem; font-weight: 650; color: var(--c1); list-style: none; display: inline-flex; gap: 4px; align-items: center; }
.nx-z-dok > summary::-webkit-details-marker { display: none; }
.nx-z-dok > summary::before { content: "\ea61"; font-family: "tabler-icons"; transition: transform .2s ease; }
.nx-z-dok[open] > summary::before { transform: rotate(90deg); }
.nx-z-dok-obsah { margin-top: 8px; }
.nx-z-dok-zoznam { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.nx-z-dok-zoznam li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0 6px 10px;
  animation: nx-prichod .3s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 25ms); }
.nx-z-dok-kto { display: flex; flex-direction: column; min-width: 0; }
.nx-z-dok-kto b { font-size: .8rem; font-weight: 650; }
.nx-z-dok-kto small { font-size: .72rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.nx-z-dok-suma { font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-z-dok-zvysok { color: var(--muted); font-size: .76rem; }
.nx-z-dok-info { font-size: .76rem; color: var(--muted); margin: 4px 0; display: flex; gap: 6px; }
.nx-z-dok-kontrola { font-size: .72rem; color: var(--success); margin: 6px 0 0 12px; display: flex; gap: 5px; align-items: center; }
.nx-z-dok-kontrola.je-zle { color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
    .messages li, .nx-toast--success::after, .nx-z-dok-zoznam li { animation: none; }
}

/* ==========================================================================
   16) Potvrdenie akcie — static/js/potvrdenie.js (namiesto confirm())
   ========================================================================== */
.nx-potvrd { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: calc(var(--z-hlasky) + 10); display: grid; place-items: center; padding: 16px; }
.nx-potvrd-clona { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 16, 15, .42);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s ease; }
.nx-potvrd-box {
  position: relative; width: min(460px, 100%); background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 24px 24px 18px; text-align: left;
  opacity: 0; transform: translateY(10px) scale(.97); filter: blur(3px);
  transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .25, 1.1), filter .2s ease;
}
.nx-potvrd.je-otvorene .nx-potvrd-clona { opacity: 1; }
.nx-potvrd.je-otvorene .nx-potvrd-box { opacity: 1; transform: none; filter: none; }
.nx-potvrd-ik { width: 44px; height: 44px; border-radius: var(--r-lg); display: grid; place-items: center; margin-bottom: 14px;
  background: var(--brand-50); background: color-mix(in srgb, var(--c1) 12%, var(--surface)); color: var(--c1); }
.nx-potvrd-ik .ti { font-size: 1.4375rem; }
.nx-potvrd.je-nebezpecne .nx-potvrd-ik { background: var(--danger-bg, var(--red-50)); color: var(--danger); }
.nx-potvrd h3 { margin: 0 0 6px; font-size: 1.08rem; line-height: 1.35; letter-spacing: -.01em; }
.nx-potvrd p { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.55; }
.nx-potvrd-dovod { display: block; margin-top: 14px; }
.nx-potvrd-dovod textarea { width: 100%; resize: vertical; min-height: 76px; }
.nx-potvrd p.nx-potvrd-chyba { margin-top: 6px; color: var(--danger); font-size: .82rem; }
.nx-potvrd-akcie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.nx-potvrd-akcie .btn-danger { background: var(--fill-bad); color: var(--fill-ink); border-color: var(--fill-bad); }
html.nx-potvrd-otvorene { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .nx-potvrd-box, .nx-potvrd-clona { transition: none; filter: none; } }

/* ==========================================================================
   17) Prílohy (prilohy.js) — odozva pri pretiahnutí, nábeh vybraných súborov
   ========================================================================== */
.up-zona { transition: border-color .2s ease, background-color .2s ease, box-shadow .25s ease, transform .2s cubic-bezier(.2, .7, .2, 1); }
.up-zona:hover { background: color-mix(in srgb, var(--c1) 4%, var(--sunken)); }
.up-zona--nad {
    border-color: var(--c1); background: color-mix(in srgb, var(--c1) 9%, var(--surface));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 16%, transparent); transform: scale(1.01);
}
.up-zona--nad .up-vyzva .ti { animation: up-poskoc .6s cubic-bezier(.2, .9, .25, 1.3) infinite alternate; color: var(--c1); }
@keyframes up-poskoc { to { transform: translateY(-4px); } }
.up-polozka { animation: nx-prichod .3s cubic-bezier(.2, .7, .2, 1) both; transition: box-shadow .2s ease, border-color .2s ease; }
.up-polozka:hover { box-shadow: var(--shadow-xs); border-color: var(--line-strong); }
.up-nahlad img { animation: up-nahlad .4s ease both; }
@keyframes up-nahlad { from { opacity: 0; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
    .up-zona, .up-polozka, .up-nahlad img, .up-zona--nad .up-vyzva .ti { animation: none; transition: none; transform: none; }
}

/* Dotyk: klávesové skratky (Ctrl K, ↑↓, Enter, „/") na telefóne nemajú zmysel. */
@media (pointer: coarse) {
    .nx-prikazy-pata, .nx-kbd, .nx-prikazy-hlad kbd, .ctx-prikazy kbd, .nx-drobcek small { display: none; }
}

/* Bublinky nápovedy (ui.js časť 7) — namiesto systémovej bubliny z `title`. */
.nx-bublina {
    position: fixed; z-index: calc(var(--z-hlasky) + 40); max-width: 320px; padding: 7px 10px; pointer-events: none;
    background: var(--char-800, #272121); color: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow);
    font-size: .76rem; line-height: 1.45; white-space: pre-line;
    opacity: 0; transform: translateY(4px) scale(.98); transition: opacity .14s ease, transform .16s cubic-bezier(.2, .8, .2, 1);
}
.nx-bublina.je-dole { transform: translateY(-4px) scale(.98); }
.nx-bublina.je-videt { opacity: 1; transform: none; }
:root[data-theme="dark"] .nx-bublina { background: #f2eeea; color: #191515; }
@media (prefers-reduced-motion: reduce) { .nx-bublina { transition: none; } }

/* ==========================================================================
   18) Tipy a triky — static/js/tipy.js, register core/tipy.py
   Karta „Vieš, že…?" vpravo dole (nad Pavielom), sklo nad obsahom.
   Len tokeny — v každom vzhľade si zoberie jeho farby aj tvar.
   ========================================================================== */
.nx-tip {
    position: fixed; right: 22px; bottom: 22px; z-index: calc(var(--z-vrstva) + 50); width: min(384px, calc(100vw - 24px));
    padding: 13px 15px 11px; border-radius: var(--r-xl); border: 1px solid var(--line);
    background: color-mix(in srgb, var(--raised) 90%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: var(--shadow-lg); color: var(--ink); font-size: .86rem; line-height: 1.5;
    transform-origin: 90% 100%;
    animation: nx-tip-in .55s cubic-bezier(.2, 1.25, .35, 1) both;
    transition: opacity .24s ease, transform .26s var(--ease);
}
body:has(.pav-fab) .nx-tip { bottom: 92px; }
.nx-tip.je-prec { opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none; }
@keyframes nx-tip-in { from { opacity: 0; transform: translateY(26px) scale(.92); } }
.nx-tip-hlava { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.nx-tip-nad {
    display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.nx-tip-nad .ti { font-size: .9375rem; animation: nx-tip-ziarovka 2.4s ease-in-out .6s 2; }
@keyframes nx-tip-ziarovka {
    0%, 100% { filter: none; transform: none; }
    40% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); transform: rotate(-10deg) scale(1.15); }
}
.nx-tip-nove {
    padding: 1px 7px; border-radius: var(--r-pill); font-size: .64rem; font-weight: 700; letter-spacing: .04em;
    background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.nx-tip-x {
    margin-left: auto; display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
}
.nx-tip-x:hover { background: var(--sunken); color: var(--ink); }
.nx-tip-telo { display: flex; gap: 12px; align-items: flex-start; }
.nx-tip-ic {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-lg);
    background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--brand)));
    color: var(--accent-ink, #fff); font-size: 1.4375rem;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
    animation: nx-tip-ikona .6s cubic-bezier(.2, 1.4, .4, 1) .18s both;
}
@keyframes nx-tip-ikona { from { transform: scale(.4) rotate(-18deg); opacity: 0; } }
.nx-tip-t { min-width: 0; }
.nx-tip-t strong { display: block; font-size: .95rem; font-weight: 680; line-height: 1.3; margin-bottom: 3px; }
.nx-tip-t p { margin: 0; color: var(--ink-soft); }
.nx-tip-akcie { display: flex; gap: 8px; margin: 12px 0 0 56px; }
.nx-tip-pata {
    display: flex; align-items: center; gap: 7px; margin: 10px 0 0 56px; padding-top: 8px;
    border-top: 1px solid var(--line); font-size: .74rem; color: var(--muted);
}
.nx-tip-pata a, .nx-tip-vypni { color: var(--muted); text-decoration: none; }
.nx-tip-vypni { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.nx-tip-pata a:hover, .nx-tip-vypni:hover { color: var(--ink); text-decoration: underline; }

/* Prvok, o ktorom tip hovorí — jemne pulzujúci prstenec (3×, potom stojí). */
.nx-tip-ciel {
    outline: 2px solid var(--accent) !important; outline-offset: 3px;
    animation: nx-tip-puls 1.5s ease-out 3;
}
@keyframes nx-tip-puls {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
    100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); }
}

@media (max-width: 640px) {
    .nx-tip { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom)); transform-origin: 50% 100%; }
    body:has(.pav-fab) .nx-tip { bottom: calc(80px + env(safe-area-inset-bottom)); }
    .nx-tip-akcie { margin-left: 0; }
    .nx-tip-akcie > button { flex: 1; }
    .nx-tip-pata { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nx-tip, .nx-tip-ic, .nx-tip-nad .ti, .nx-tip-ciel { animation: none; }
    .nx-tip { transition: opacity .15s linear; }
    .nx-tip.je-prec { transform: none; }
}

/* Stránka Tipy a triky (/tipy/) */
.tp-hlava-prepinac { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .86rem; color: var(--ink-soft); }
.tp-hlava-prepinac input { width: 18px; height: 18px; accent-color: var(--accent); }
.tp-mriezka { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.tp-karta {
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px;
    border-radius: var(--r-lg); background: var(--raised); border: 1px solid var(--line);
    box-shadow: var(--shadow-xs); animation: nx-prichod .4s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 40ms);
    transition: transform .2s var(--ease), box-shadow .2s ease, border-color .2s ease;
}
.tp-karta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.tp-karta .nx-tip-ic { animation: none; }
.tp-karta h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.tp-karta p { margin: 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.55; flex: 1; }
.tp-stitky { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; }
.tp-stitok { padding: 2px 8px; border-radius: var(--r-pill); font-size: .66rem; font-weight: 700; letter-spacing: .03em; }
.tp-stitok--nove { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.tp-stitok--ok { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.tp-karta:not(.je-skusene) .tp-stitok--ok { display: none; }
.tp-pata { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-zariadenie { font-size: .74rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.tp-stat { font-size: .74rem; color: var(--muted); margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .tp-karta { animation: none; transition: none; } .tp-karta:hover { transform: none; } }

/* ==========================================================================
   19) Baseline modulu (v1.219) — jeden vzhľad pre každú hlavnú obrazovku.
   Vzor: Dochádzka „Môj rytmus“, Technické „dispečing“, Príprava miezd.
   Skladačka (poradie zhora): .nx-hlava → .nx-scena → filtre/obdobie +
   .nx-stav → .nx-kroky → KPI → práca (tabuľka s krížom) → .nx-akcie-lista.
   Iba tokeny vzhľadu, takže sedí v 13 vzhľadoch aj v tmavej téme; pravidlá
   a postup sú v docs/postupy/BASELINE-MODULU.md.
   ========================================================================== */

/* --- Hlavička: kicker „Sekcia / Modul“, veľký ľahký nadpis, akcie vpravo --- */
.nx-hlava { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px;
    flex-wrap: wrap; margin: 2px 0 20px; }
.nx-kicker { display: inline-block; font-size: .62rem; font-weight: 650; letter-spacing: .2em;
    text-transform: uppercase; color: var(--muted); }
.nx-hlava h1 { margin: 8px 0 0; font-size: clamp(1.6rem, 2.4vw, 2.15rem); font-weight: 560;
    line-height: 1.1; letter-spacing: -.035em; color: var(--ink); }
.nx-hlava-pod { margin: 9px 0 0; max-width: 80ch; font-size: .88rem; color: var(--muted); }
.nx-hlava-akcie { display: flex; flex-wrap: wrap; gap: 8px; }
/* Značka {% hlava %} (core/templatetags/nx.py): `em` = koniec nadpisu v akcente
   („Zmluvy."), `stitok` = tichý údaj za nadpisom (kód firmy), `maly` = záznam
   s dlhým názvom. Ručný `<header class="nx-hlava">` stráži brána `hlava-rucne`. */
.nx-hlava h1 em { font-style: normal; color: var(--accent); }
.nx-hlava-stitok { font-size: .44em; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.nx-hlava--maly h1 { font-size: clamp(1.35rem, 2vw, 1.85rem); }

/* --- Scéna: obrázok vpravo (prirodzená šírka), nadpis na voľnej ploche ----
   Obrázky majú svetlé pozadie #f5f2ec a objekt vpravo — násobením sa pozadie
   rozpustí v ploche šablóny, maska zjemní ľavý okraj. --nx-scena-orez oreže
   prázdne pásy hore/dole (bezpečný okraj z generovania). */
.nx-scena { --nx-scena-orez: 13%; position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; min-height: clamp(170px, 13vw, 210px); margin: 0 0 20px;
    background: var(--tonal); border: 1px solid var(--line); border-radius: var(--r-lg); }
.nx-scena-art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; }
.nx-scena-obr { position: absolute; top: calc(var(--nx-scena-orez) * -1); right: 0; width: auto;
    height: calc(100% + 2 * var(--nx-scena-orez)); max-width: none; transform-origin: 72% 55%;
    mix-blend-mode: multiply; filter: var(--scena-filter, none);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
    mask-image: linear-gradient(90deg, transparent, #000 22%); }
.nx-scena-art::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, var(--tonal) 0, transparent 56%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--tonal) 78%, transparent), transparent 56%); }
.nx-scena-text { position: relative; padding: 22px 30px; max-width: 500px; }
.nx-scena-kicker { display: flex; align-items: center; gap: 10px; font-size: .58rem; font-weight: 650;
    letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.nx-scena-kicker::before { content: ""; flex: 0 0 22px; height: 1px; background: var(--accent); }
.nx-scena-nadpis { margin: 12px 0 8px; font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 440;
    line-height: 1.06; letter-spacing: -.045em; color: var(--ink); }
.nx-scena-nadpis em { font-style: normal; color: var(--accent); }
.nx-scena-text p { margin: 0; max-width: 40ch; font-size: .78rem; line-height: 1.7; color: var(--muted); }
:root[data-theme="dark"] .nx-scena-obr { mix-blend-mode: screen;
    filter: var(--scena-filter, invert(1) hue-rotate(180deg) brightness(.62) contrast(1.25) saturate(1.3)); }
/* Tón scény — šablóna prefarbí ilustráciu do svojich farieb SVG filtrom
   (templates/core/_scena_ton.html, tokeny --scena-* v vzhlady.css). Pôvodný
   Nexus ich nemá, ilustrácie sú kreslené v jeho farbách. */
.nx-ton-filtre { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.nx-ton-farba { flood-color: var(--scena-ton, var(--brand)); }
:root[data-theme="dark"] .nx-scena-art::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--tonal) 84%, transparent), transparent 60%); }

/* --- Stav obrazovky (odznak vpravo pri období) ------------------------------ */
.nx-stav { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px;
    font-size: .74rem; font-weight: 600; border-radius: var(--r-pill); white-space: nowrap;
    color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); }
.nx-stav .ti { font-size: .9375rem; }
.nx-stav--ok { color: var(--success); background: var(--success-bg); border-color: var(--success-line, var(--line)); }
.nx-stav--caka { color: var(--warning-ink); background: var(--warning-bg); border-color: var(--warning-line); }
.nx-stav--zle { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line, var(--line)); }

/* --- Kroky procesu (1 Príprava → 2 Schválenie → 3 Výpočet) ------------------- */
.nx-kroky { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; list-style: none;
    margin: 0 0 18px; padding: 0; font-size: .8rem; color: var(--muted); }
.nx-kroky li { display: inline-flex; align-items: center; gap: 8px; }
.nx-kroky li + li::before { content: ""; width: 22px; height: 1px; margin-right: 6px; background: var(--line-strong); }
.nx-kroky-c { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: .7rem; font-weight: 650;
    border-radius: 50%; border: 1px solid var(--line-strong); color: var(--muted); font-variant-numeric: tabular-nums; }
.nx-kroky .je-aktivny { color: var(--ink); font-weight: 600; }
.nx-kroky .je-aktivny .nx-kroky-c { background: var(--brand); border-color: var(--brand); color: var(--brand-ink-on); }
.nx-kroky .je-hotovy .nx-kroky-c { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.nx-kroky .je-caka { color: var(--ink); font-weight: 600; }
.nx-kroky .je-caka .nx-kroky-c { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning-ink); }
.nx-kroky .je-zle { color: var(--danger); font-weight: 600; }
.nx-kroky .je-zle .nx-kroky-c { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.nx-kroky-c .ti { font-size: .8125rem; }
/* Pás (Zálohy „Pomoc v správny čas"): každý krok je úsek čiary nad názvom —
   kedysi `.zl-kroky`. Číslo bez krúžku („01"), hotový = fajka. */
.nx-kroky--pas { gap: 0; margin: 20px -4px; font-size: .74rem; color: var(--faint); }
.nx-kroky--pas li { flex: 1 1 120px; margin: 0 4px; padding-top: 9px; gap: 6px; border-top: 3px solid var(--line); }
.nx-kroky--pas li + li::before { content: none; }
.nx-kroky--pas .nx-kroky-c { width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: .66rem; color: inherit; }
.nx-kroky--pas .je-hotovy { border-color: var(--success); color: var(--success-dark); }
.nx-kroky--pas .je-aktivny { border-color: var(--ink); }
.nx-kroky--pas .je-zle { border-color: var(--danger); }
.nx-kroky--pas .je-hotovy .nx-kroky-c, .nx-kroky--pas .je-aktivny .nx-kroky-c,
.nx-kroky--pas .je-zle .nx-kroky-c { background: none; border: 0; color: inherit; }
/* Zásielka (Technické „kde je ticket"): rámik, kroky cez celú šírku, spojnica
   sa po hotovom kroku zazelená; na telefóne len názov aktuálneho kroku. */
.nx-kroky--siroky { flex-wrap: nowrap; gap: 0; padding: 12px 16px; font-size: .84rem; color: var(--faint);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.nx-kroky--siroky li { flex: 1; }
.nx-kroky--siroky li:last-child { flex: 0 0 auto; }
.nx-kroky--siroky li + li::before { content: none; }
.nx-kroky--siroky li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 10px; background: var(--line); }
.nx-kroky--siroky li.je-hotovy:not(:last-child)::after { background: var(--success-line, var(--brand)); }
.nx-kroky--siroky .nx-kroky-c { width: 28px; height: 28px; flex: 0 0 auto; border-width: 2px; border-color: var(--line); background: var(--sunken); }
.nx-kroky--siroky .nx-kroky-c .ti { font-size: .9375rem; }
.nx-kroky--siroky .je-hotovy { color: var(--ink-soft); }
.nx-kroky--siroky .je-hotovy .nx-kroky-c { border-color: var(--success-line); color: var(--success-dark); }
.nx-kroky--siroky .je-aktivny, .nx-kroky--siroky .je-caka { font-weight: 650; }
.nx-kroky-nazov { white-space: nowrap; }
@media (max-width: 760px) {
    .nx-kroky--siroky { padding: 10px; }
    .nx-kroky--siroky li:not(.je-aktivny):not(.je-caka) .nx-kroky-nazov { display: none; }
}

/* --- Rad kariet s číslami: ľahké čísla, zdvih, hlavná karta tmavá ---------
   `.nx-cisla` na obale radu (`.stat-grid` alebo vlastný rad modulu); karta je
   každý priamy potomok. Hlavná = `.accent` (baseline: posledná), tmavá v --brand.
   Karta má poradie 1. popis, 2. číslo, ďalej pod-riadky — na tmavej jadro
   stlmí všetko okrem čísla. Smer zmeny na tmavej karte: tokeny
   --nx-na-tmavej-rast / -pokles (v tmavej téme sa karta otočí na svetlú);
   každý vzhľad má vlastné (vzhlady.css), kontrast k --brand ≥ 4,5 stráži
   core.vzhlady_kontrola.KONTRASTY.
   Kedysi to mali Príprava, Trezor aj Reporting každý vo vlastnej kópii
   (ARCHITEKTURA §3b) — modul si teraz píše len počet stĺpcov. */
:root { --nx-na-tmavej-rast: #f3c98b; --nx-na-tmavej-pokles: #9fd8c9; }
:root[data-theme="dark"] { --nx-na-tmavej-rast: #96430b; --nx-na-tmavej-pokles: #0b5049; }
.nx-cisla { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 12px; gap: 12px;
    margin: 0 0 20px; }
.nx-cisla > * { min-width: 0; padding: 17px 18px 16px; border-radius: var(--r-lg); box-shadow: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease; }
.nx-cisla > :hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.nx-cisla .stat-top { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.nx-cisla .stat-value { font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 500; letter-spacing: -.035em; }
.nx-cisla .stat-value .unit { font-weight: 500; }
/* Dvojitá trieda: váha nad farbami kariet zo sekcie 4 (.stat-card.accent .stat-value). */
.nx-cisla > .accent.accent { background: var(--brand); border-color: var(--brand); color: var(--brand-ink-on); }
.nx-cisla > .accent.accent * { color: inherit; }
.nx-cisla > .accent > :not(:nth-child(2)), .nx-cisla > .accent .unit { opacity: .74; }
.nx-cisla > .accent > :first-child .ti { color: var(--accent-soft, inherit); }

/* --- Tmavá karta „to hlavné" mimo radu kariet ------------------------------
   Reporting miezd (náklad na ľudí), Rozpis hotovosti (pripravovaná dávka),
   Zálohy (karta prípadu) a pás pod EBITDA vo Financiách — kedysi štyri kópie,
   každá s vlastným `rgba(255,255,255,.16)` a vlastným prepisom tmavej témy
   (balík 7 auditu 8. 10. 2026). Pozadie --brand sa v tmavej téme otočí na
   svetlé, čiara a plocha na nej idú z --brand-ink-on cez color-mix, takže
   prepis tmavej témy netreba (Edge 83 bez color-mix dostane rgba nižšie).
     .nx-tmava            karta (aj `.stat-card.accent` v `.nx-cisla` = tá istá plocha)
     .nx-tmava-nad        kicker nad číslom
     .nx-tmava-suma       veľké číslo (+ .unit)
     .nx-tmava-riadok     popis · hodnota s čiarou nad (b = hodnota, .je-zle)
     .nx-tmava-pas        blok oddelený čiarou (doplnkové číslo, dôvod)
     .nx-tmava-akcia      svetlé tlačidlo na tmavej karte */
:root { --nx-na-tmavej-ciara: rgba(255, 255, 255, .16); --nx-na-tmavej-plocha: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] { --nx-na-tmavej-ciara: rgba(0, 0, 0, .14); --nx-na-tmavej-plocha: rgba(0, 0, 0, .06); }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    :root, :root[data-theme="dark"] {
        --nx-na-tmavej-ciara: color-mix(in srgb, var(--brand-ink-on) 16%, transparent);
        --nx-na-tmavej-plocha: color-mix(in srgb, var(--brand-ink-on) 10%, transparent); }
}
.nx-tmava { padding: 24px 22px 20px; color: var(--brand-ink-on); background: var(--brand);
    border: 1px solid var(--brand); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.nx-tmava-nad { display: block; font-size: .6rem; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; opacity: .72; }
.nx-tmava-suma { display: block; margin: 14px 0 6px; font-size: clamp(1.75rem, 2.3vw, 2.2rem); font-weight: 440; line-height: 1.05;
    letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-tmava-suma .unit { font-weight: inherit; opacity: .7; }
.nx-tmava > p { margin: 0; font-size: .76rem; line-height: 1.6; opacity: .74; }
.nx-tmava-riadok { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: .76rem;
    border-top: 1px solid var(--nx-na-tmavej-ciara); }
.nx-tmava-riadok:first-of-type { margin-top: 16px; }
.nx-tmava-riadok b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-tmava-riadok.je-zle b { color: var(--nx-na-tmavej-rast); }
/* Dvojitá trieda: pás prebije všeobecnú čiaru prvku modulu (`.zd-dovod`). */
.nx-tmava .nx-tmava-pas, .accent .nx-tmava-pas { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--nx-na-tmavej-ciara); }
.nx-tmava-akcia { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px; padding: 11px 14px;
    font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--surface); border: 0; border-radius: var(--r);
    cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.nx-tmava-akcia:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.nx-tmava-akcia .ti { transition: transform .2s var(--ease); }
.nx-tmava-akcia:hover .ti { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .nx-tmava-akcia, .nx-tmava-akcia .ti { transition: none; }
    .nx-tmava-akcia:hover, .nx-tmava-akcia:hover .ti { transform: none; }
}

/* --- Hľadanie s lupou — JEDNO pole pre celý portál ----------------------------
   <label class="nx-hladaj"><i class="ti ti-search" aria-hidden="true"></i>
   <input type="search" …></label>. Rám (--pole-okraj) a fokus (--ring) nesie
   obal, pole vnútri je bez rámu. Kedysi 13 kópií (dz-, tk-, mzf-, vp-, hr-,
   zm-, nv-, zl-, rh-, fb- …) — každá s inou lupou a `#vp-q` s okrajom --line,
   ktorý nemal kontrast (balík 7 auditu 8. 10. 2026). Šírku v lište určí modul
   na rodičovi, nie novou kópiou poľa; `--maly` = 32 px do husto lišty filtrov.
   V lište tabuľky (`.nx-tools`, tabulka.js) je z neho pilulka so skratkou „/". */
.nx-hladaj { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; height: var(--pole-h); padding: 0 var(--pole-px);
    color: var(--faint); background: var(--surface); border: 1px solid var(--pole-okraj); border-radius: var(--r-sm);
    transition: border-color .12s, box-shadow .12s; }
.nx-hladaj:hover { border-color: var(--pole-okraj-hover); }
.nx-hladaj:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.nx-hladaj > .ti { flex: 0 0 auto; font-size: 1rem; pointer-events: none; }
.nx-hladaj input { flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; padding: 0; color: var(--ink); background: transparent;
    border: 0; border-radius: 0; box-shadow: none; }
.nx-hladaj input:focus { box-shadow: none; outline: none; }
.nx-hladaj--siroky { flex-basis: 100%; max-width: none; }

/* --- Čo si žiada pozornosť — karta s číslom alebo ikonou -----------------
   Reporting miezd (prehľad) aj Zmluvy (pás nad registrom) — kedysi rep-pozor
   a zm-prio. Jantárová = nález, `.is-ok` = pokoj (zelená, povie to), `.is-info`
   = len otázka. Karta-odkaz (`<a>`) sa pri prejdení zdvihne. `--riadok` =
   zoznam na preverenie (Denné tržby), farba okraja podľa `.je-zle`/`.je-caka`.
     <a class="nx-pozornost"><b class="nx-pozornost-c">03</b>
        <span class="nx-pozornost-text"><strong>…</strong><small>…</small></span></a>
     <div class="nx-pozornost"><i class="ti …"></i>
        <div class="nx-pozornost-text"><strong>…</strong><p>…</p><button>…</button></div></div> */
.nx-pozornost { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 15px 16px; color: var(--ink);
    text-decoration: none; background: var(--warning-bg); border: 1px solid var(--warning-line); border-radius: var(--r-lg); }
a.nx-pozornost { align-items: center; transition: transform .2s var(--ease), border-color .2s ease, box-shadow .2s ease; }
a.nx-pozornost:hover { transform: translateY(-1px); border-color: var(--warning); box-shadow: var(--shadow-xs); }
a.nx-pozornost:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nx-pozornost > .ti { flex: 0 0 auto; font-size: 1.1875rem; line-height: 1.2; color: var(--warning); }
.nx-pozornost-c { flex: 0 0 auto; font-size: 1.65rem; font-weight: 450; line-height: 1; letter-spacing: -.03em;
    color: var(--warning-ink); font-variant-numeric: tabular-nums; }
.nx-pozornost-text { flex: 1 1 auto; min-width: 0; }
.nx-pozornost-text strong { display: block; font-size: .84rem; font-weight: 640; line-height: 1.35; }
.nx-pozornost-text small { display: block; margin-top: 3px; overflow: hidden; font-size: .74rem; color: var(--muted);
    white-space: nowrap; text-overflow: ellipsis; }
.nx-pozornost-text p { margin: 5px 0 0; font-size: .76rem; line-height: 1.55; color: var(--ink-soft); }
.nx-pozornost-text .btn-ghost { margin-top: 10px; }
.nx-pozornost.is-ok { background: var(--success-bg); border-color: var(--success-line, var(--line)); }
.nx-pozornost.is-ok > .ti, .nx-pozornost.is-ok .nx-pozornost-c { color: var(--success); }
a.nx-pozornost.is-ok:hover { border-color: var(--success); }
.nx-pozornost.is-info { background: var(--surface); border-color: var(--line); }
.nx-pozornost.is-info > .ti { color: var(--muted); }
.nx-pozornost--riadok { align-items: center; gap: 10px; margin-bottom: 6px; padding: 11px 14px; font-size: .86rem;
    background: var(--surface); border-color: var(--line); border-left: 3px solid var(--line-strong); }
.nx-pozornost--riadok > span { flex: 1 1 auto; min-width: 0; }
a.nx-pozornost--riadok:hover { transform: none; background: var(--sunken); border-color: var(--line); }
.nx-pozornost--riadok > .ti:last-child { color: var(--faint); }
.nx-pozornost--riadok.je-zle { border-left-color: var(--danger); }
.nx-pozornost--riadok.je-zle > .ti:first-child { color: var(--danger); }
.nx-pozornost--riadok.je-caka { border-left-color: var(--warning); }
@media (prefers-reduced-motion: reduce) { a.nx-pozornost { transition: none; } a.nx-pozornost:hover { transform: none; } }

/* --- Výber obdobia / strediska s ikonou (filter v hlavičke modulu) ---------
   <label class="nx-vyber"><i class="ti ti-calendar"></i><select …></label> —
   Financie, Reporting miezd aj Denné tržby (kedysi fin-month, rep-month,
   tr-vyber). Firma vedľa neho = `.seg` (styles.css sekcia 2); celý pás firma +
   obdobie skladá `templates/core/_filtre_firma_obdobie.html`. `.is-on` =
   vybraté (skupina stredísk). */
.nx-vyber { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; color: var(--muted);
    background: var(--surface); border: 1px solid var(--pole-okraj); border-radius: var(--r-sm); }
.nx-vyber:hover, .nx-vyber.is-on { border-color: var(--pole-okraj-hover); }
.nx-vyber.is-on { color: var(--ink); }
.nx-vyber:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.nx-vyber select { height: auto; max-width: 260px; padding: 0; font: inherit; font-size: .86rem; font-weight: 600; color: var(--ink);
    background-color: transparent; border: 0; box-shadow: none; }
.nx-vyber select:focus { box-shadow: none; }

/* --- Rebríček: poradie ako pásy, riadok = tlačidlo -------------------------
   Reporting miezd (najdrahšie strediská) aj Financie (prevádzky podľa EBITDA)
   — kedysi `rep-rank` v Reportingu. <div class="nx-rank-zoznam"> a v ňom
   <button class="nx-rank"> s .nx-rank-kod (b + small), .nx-rank-pas (i so šírkou
   v %), .nx-rank-suma a voliteľne .nx-rank-d (štvrtý stĺpec — obal potom
   `nx-rank-zoznam--d`). Záporná hodnota = `.je-zaporny` (červený pás aj suma). */
.nx-rank-zoznam { border-top: 1px solid var(--line); }
.nx-rank { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) 128px; grid-gap: 14px; gap: 14px;
    align-items: center; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line);
    background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
    transition: background-color .15s ease; }
.nx-rank-zoznam--d .nx-rank { grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) 128px 120px; }
.nx-rank:hover { background: var(--tonal, var(--sunken)); }
.nx-rank:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.nx-rank-kod { min-width: 0; }
.nx-rank-kod b { display: block; font-size: .82rem; font-weight: 650; }
.nx-rank-kod small { display: block; overflow: hidden; font-size: .72rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.nx-rank-pas { display: block; height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--sunken); }
.nx-rank-pas i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c1); transform-origin: left center; }
.nx-rank:hover .nx-rank-pas i { background: var(--accent); }
.nx-rank-suma { font-size: .86rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-rank-d { text-align: right; font-size: .76rem; white-space: nowrap; }
.nx-rank.je-zaporny .nx-rank-pas i { background: var(--danger); }
.nx-rank.je-zaporny .nx-rank-suma { color: var(--danger); }
/* Variant --dvoj: pás z dvoch častí (i.zle = riešiť, i.ok = v poriadku) a štvrtý
   stĺpec v dvoch riadkoch („31 414 € po splatnosti" / „najstaršia 77 dní") —
   farba podľa stavu (small = po splatnosti, small.ok = v lehote; ARCHITEKTURA §3j,
   Faktúry › Prehľad). Text sa ZALAMUJE, nikdy nevyteká: v1.328.0 mal stĺpec 120 px
   a jeden riadok `nowrap` široký ~185 px — text vytiekol cez okraj karty (Aleš
   31. 10. 2026). Stĺpce sa zmenšujú až po minimum 388 px — karta vedľa karty má
   pri okne 1201–1440 px len 409–448 px a pevné stĺpce (452 px) vytlačili text
   von a pás na 0 px (nezávislý audit 31. 10.). Stráž: `presahy`
   v tools/meranie_prekrytia.py. Legenda: .nx-leg.nx-leg--zle / --ok. */
.nx-rank-zoznam--dvoj .nx-rank { grid-template-columns: minmax(100px, 200px) minmax(48px, 1fr) minmax(76px, 112px) minmax(118px, 168px);
    grid-gap: 10px; gap: 10px; }
.nx-rank-zoznam--dvoj .nx-rank-pas { display: flex; }
.nx-rank-zoznam--dvoj .nx-rank-pas i { flex: none; border-radius: 0; }
.nx-rank-zoznam--dvoj .nx-rank-pas i.zle, .nx-rank-zoznam--dvoj .nx-rank:hover .nx-rank-pas i.zle { background: var(--danger); }
.nx-rank-zoznam--dvoj .nx-rank-pas i.ok, .nx-rank-zoznam--dvoj .nx-rank:hover .nx-rank-pas i.ok { background: var(--success); }
.nx-rank-zoznam--dvoj .nx-rank-d { min-width: 0; white-space: normal; }
.nx-rank-zoznam--dvoj .nx-rank-d small { display: block; font-size: .8rem; font-weight: 600; line-height: 1.35; color: var(--danger); overflow-wrap: anywhere; }
.nx-rank-zoznam--dvoj .nx-rank-d small.ok { color: var(--success); }
.nx-rank-zoznam--dvoj .nx-rank-d small.nx-rank-dni { font-size: .74rem; font-weight: 400; color: var(--muted); }
.nx-leg { white-space: nowrap; }
.nx-leg::before { content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 2px; border-radius: var(--r-xs); vertical-align: -1px; }
.nx-leg--zle::before { background: var(--danger); }
.nx-leg--ok::before { background: var(--success); }
@media (prefers-reduced-motion: no-preference) {
    .nx-rank-pas i { animation: nx-pas-nabeh .7s cubic-bezier(.2, .65, .3, 1) both; }
}
@keyframes nx-pas-nabeh { from { transform: scaleX(0); } }
@media (max-width: 1200px) {
    .nx-rank-zoznam--d .nx-rank { grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) 120px; }
    .nx-rank-d { display: none; }
    .nx-rank-zoznam--dvoj .nx-rank { grid-template-columns: minmax(100px, 160px) minmax(48px, 1fr) minmax(76px, 104px) minmax(118px, 156px); }
    .nx-rank-zoznam--dvoj .nx-rank-d { display: block; }
}
@media (max-width: 560px) {
    .nx-rank, .nx-rank-zoznam--d .nx-rank { grid-template-columns: minmax(0, 1fr) auto; grid-gap: 6px 12px; gap: 6px 12px; }
    .nx-rank-pas { grid-column: 1 / -1; grid-row: 2; }
    .nx-rank-zoznam--dvoj .nx-rank-d { grid-column: 1 / -1; text-align: left; }
    .nx-rank-zoznam--dvoj .nx-rank-d small, .nx-rank-zoznam--dvoj .nx-rank-d small.nx-rank-dni { display: inline; margin-right: 12px; }
}

/* --- Záložky modulu: JEDNA trieda `.nx-zalozky` -----------------------------
   Každá lišta záložiek (`<nav>` s odkazmi alebo `role="tablist"` s tlačidlami)
   nesie `nx-zalozky`; aktívna položka `.is-on` (+ `aria-current="page"` /
   `aria-selected`). Vzhľady (vzhlady.css, vzhlady/*.css), mobil (mobil.css)
   aj posuvný indikátor (vzhlady.js) poznajú len túto triedu — nový modul
   nemusí nikam nič dopisovať. Modulová trieda (`rep-tabs`, `vp-tabs` …) je
   už len háčik pre skript, nie štýl. Predtým zoznam `.tabs, .fin-tabs, …`
   skopírovaný 56× v 17 súboroch a záložky Tržieb (`.tr-tabs`) vo vzhľadoch
   a na mobile chýbali (audit 8. 10. 2026, balík 4). Stráži
   `core.tests_baseline.JednaTriedaZaloziekTest` a brána `zoznam-zaloziek`. */
.nx-zalozky { display: flex; gap: 3px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 0 0 18px; }
.nx-zalozky > a, .nx-zalozky > button {
    /* Cieľ pre prst min. 42 px vo všetkých vzhľadoch. */
    display: inline-flex; align-items: center; gap: 7px; min-height: 42px;
    border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent;
    padding: 9px 13px; border-radius: var(--r-sm) var(--r-sm) 0 0;
    font-family: inherit; font-size: .855rem; font-weight: 620; color: var(--faint);
    white-space: nowrap; text-decoration: none; cursor: pointer;
}
.nx-zalozky .ti { font-size: 1rem; opacity: .75; }
.nx-zalozky > a:hover, .nx-zalozky > button:hover { color: var(--ink); background: var(--sunken); }
.nx-zalozky > a.is-on, .nx-zalozky > button.is-on { color: var(--ink); border-bottom-color: var(--accent); background: transparent; }
.nx-zalozky > .is-on .ti { opacity: 1; color: var(--accent); }

/* --- Počet pri záložke (zistenia, nálezy) --------------------------------- */
.nx-pocet { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    margin-left: 6px; padding: 0 5px; border-radius: var(--r-pill); background: var(--fill-warn); color: var(--fill-ink);
    font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Tichý počet — údaj, nie práca na vybavenie (Zmluvy: Subjekty, Preskočené). */
.nx-pocet--tichy { background: var(--sunken); color: var(--muted); font-weight: 700; }
/* Hotovo (podklady nahraté) a po termíne (Technické). */
.nx-pocet--ok { background: var(--success-bg); color: var(--success-dark); }
.nx-pocet--zle { background: var(--fill-bad); color: var(--fill-ink); }

/* --- Dialóg: nový záznam alebo detail nad obrazovkou -------------------------
   Jeden diel pre všetky moduly (ARCHITEKTURA §3b): Dochádzka (nová žiadosť,
   detail v tímovom kalendári) aj Zálohy (nová žiadosť s kontrolou) ho mali
   každý vo vlastnej kópii. Modul si píše len obsah (formulár, údaje).
   <dialog class="nx-dlg"> + .nx-dlg-zavri, nadpis h2, .nx-dlg-kto, .nx-dlg-akcie. */
.nx-dlg { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow: auto; padding: 28px 30px 26px; color: var(--ink); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.nx-dlg--maly { width: min(400px, calc(100vw - 32px)); }
.nx-dlg::backdrop { background: rgba(20, 16, 15, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nx-dlg h2 { margin: 10px 0 0; font-size: 1.45rem; font-weight: 500; letter-spacing: -.03em; }
.nx-dlg > .nx-kicker, .nx-dlg > h2 { padding-right: 36px; }
.nx-dlg--maly h2 { margin-bottom: 6px; }
.nx-dlg-kto { margin: 8px 0 18px; font-size: .8rem; color: var(--muted); }
.nx-dlg-zavri { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center;
    padding: 0; font-size: 1.125rem; color: var(--muted); background: transparent; border: 1px solid transparent;
    border-radius: 50%; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.nx-dlg-zavri:hover { color: var(--ink); border-color: var(--line); background: var(--surface-2); }
.nx-dlg-akcie { display: flex; flex-wrap: wrap; justify-content: flex-end; grid-gap: 8px; gap: 8px; margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
    .nx-dlg[open] { animation: nx-dlg .32s cubic-bezier(.2, .8, .2, 1) both; }
    .nx-dlg[open]::backdrop { animation: nx-clona .25s ease both; }
}
@keyframes nx-dlg { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes nx-clona { from { opacity: 0; } }
@media (max-width: 560px) { .nx-dlg { padding: 24px 18px 20px; } }

/* --- Padací panel pod tlačidlom (filtre) -------------------------------
   Jeden diel pre Financie (skupina stredísk) aj Faktúry (filter). Otvára sa
   od ľavého okraja tlačidla; keď by trčal za pravý okraj obsahu (<main>),
   ui.js (časť 10) ho posunie doľava presne o toľko — stránka sa do boku nepohne (tablet na
   šírku v kompozíciách, tlačidlo vpravo, 2. 10. 2026). CSS polohu tlačidla
   v lište nepozná, preto ten kúsok JS. Šírku a vnútro si určí modul.
   <details class="nx-padaci"><summary>…</summary><div class="nx-padaci-panel">
   alebo <div class="nx-padaci"> s <button aria-controls="<id panela>"> a panelom [hidden].
   Otvorenie, Esc a klik mimo rieši ui.js časť 10 pre oba tvary. */
.nx-padaci { position: relative; }
.nx-padaci-panel { position: absolute; z-index: var(--z-menu); top: calc(100% + 6px); left: 0;
    max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
details.nx-padaci:not([open]) > .nx-padaci-panel, .nx-padaci-panel[hidden] { display: none; }

/* --- Našepkávač (combobox) — static/js/nasepkavac.js -----------------------
   Jeden vzhľad pre Tržby (firma na faktúru), Trezor, Ľudí, Prípravu, Faktúry,
   Zmluvy aj Admin centrum (8 kópií do 8. 10. 2026). Zoznam si motor vyrobí
   sám za poľom; obal dostane .nx-nasepkavac (poloha). Aktívna položka
   (šípky, Enter, myš) = .je-aktivny. */
.nx-nasepkavac { position: relative; }
.nx-navrhy { position: absolute; z-index: calc(var(--z-menu) + 5); top: calc(100% + 4px); left: 0; right: 0; min-width: 14rem;
    max-height: 320px; overflow-y: auto; padding: 4px; background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); text-align: left; }
.nx-navrhy[hidden] { display: none; }
.nx-navrh { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm);
    border-left: 3px solid transparent; cursor: pointer; }
.nx-navrh.je-aktivny { background: var(--tonal); border-left-color: var(--brand); }
.nx-navrh-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.nx-navrh-nazov { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nx-navrh b { font-weight: 620; font-size: .88rem; overflow-wrap: anywhere; }
.nx-navrh small { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.nx-navrh-vpravo { margin-left: auto; font-size: .72rem; color: var(--faint); white-space: nowrap; }
.nx-navrh-stitok { font-size: .66rem; padding: 1px 7px; border-radius: var(--r-pill); background: var(--sunken);
    color: var(--muted); white-space: nowrap; }
.nx-navrh-ava { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    background: var(--sunken); color: var(--muted); font-size: .7rem; font-weight: 650; }
.nx-navrh--akcia { border-top: 1px solid var(--line-soft); color: var(--brand-dark); }
.nx-navrh-info { padding: 8px 10px; font-size: .8rem; color: var(--muted); }

/* --- Lišta akcií prilepená dole, sklo nad obsahom --------------------------
   Tlačidlá (Uložiť / Odoslať) sú VĽAVO — tam ich oko hľadá (Aleš ich vpravo
   hľadal, 30. 9. 2026). Za nimi súčet, pomocný text na konci. V šablóne môže
   byť súčet kdekoľvek, poradie drží `order`. */
.nx-akcie-lista { position: sticky; bottom: 0; z-index: var(--z-obsah); display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px 12px; margin: 18px 0 0; padding: 12px 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: 0 -8px 24px rgba(20, 16, 15, .08); }
/* color-mix s var() je v Chromiu < 111 (Edge 83 na LCTTC) neplatný až pri výpočte →
   priehľadná lišta; preto aj podmienka na color-mix, inak ostane plné var(--surface). */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red 50%, transparent)) {
    .nx-akcie-lista { background: color-mix(in srgb, var(--surface) 86%, transparent);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
/* Vpravo dole pláva bublina Paviela (56 px) — tlačidlá lišty pod ňu nesmú. */
@media (min-width: 561px) { .nx-akcie-lista { padding-right: 84px; } }
.nx-akcie-suma { order: 1; display: flex; flex-direction: column; margin-left: 6px; padding-left: 16px;
    border-left: 1px solid var(--line); font-size: .7rem; color: var(--muted); }
.nx-akcie-pomoc { order: 2; flex: 1 1 220px; margin: 0 0 0 10px; font-size: .78rem; color: var(--muted); }
.nx-akcie-suma b { font-size: 1.15rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Kým je na stránke prilepená lišta akcií, bunka, na ktorú skočí kurzor
   (polia.js → scrollIntoView), nesmie skončiť pod ňou ani pod kontextovou
   lištou hore — scroll-padding posunie cieľ do voľnej plochy. */
html:has(.nx-akcie-lista) { scroll-padding: 72px 0 104px; }

/* --- Mriežka: kríž aktívnej bunky (polia.js) a legenda kláves --------------- */
tr.nx-riadok-aktivny > td { background-color: var(--tonal); }
tr.nx-riadok-aktivny > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
th.nx-stlpec-aktivny { color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--accent); }
.nx-klavesy { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 2px 0; font-size: .72rem; color: var(--muted); }
.nx-klavesy kbd { display: inline-block; min-width: 20px; margin-right: 3px; padding: 1px 6px; font: inherit;
    font-size: .68rem; font-weight: 600; text-align: center; color: var(--ink-soft);
    background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-xs); }

/* --- Režim sústredenia: skryje dekor a pomocné panely, práca ostane ------- */
html.nx-sustredenie [data-sustredenie="skry"] { display: none !important; }
/* Tlačidlo v hlavičke (ui.js, data-sustredenie-prepni) — zapnuté nesie linku akcentu. */
[data-sustredenie-prepni][aria-pressed="true"] { color: var(--ink); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .nx-cisla > * { transition: none; }
    .nx-cisla > :hover { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .nx-scena { animation: nx-scena-nabeh .5s cubic-bezier(.2, .65, .3, 1) both; }
    .nx-scena-obr { animation: nx-scena-dych 18s ease-in-out infinite alternate; }
}
@keyframes nx-scena-nabeh { from { opacity: 0; transform: translateY(8px); } }
@keyframes nx-scena-dych { to { transform: scale(1.025) translateX(-5px); } }

@media (max-width: 560px) {
    .nx-hlava-akcie { width: 100%; }
    .nx-scena { min-height: 190px; }
    .nx-scena-text { padding: 20px 18px; }
    .nx-scena-obr { top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% center; opacity: .42;
        -webkit-mask-image: none; mask-image: none; }
    .nx-akcie-lista { padding: 10px 12px; }
    .nx-klavesy { display: none; }
}


/* --- Pás „Nexus pracuje — počkaj" (templates/core/_priebeh.html, js/priebeh.js) --- */
/* Bez viditeľného priebehu človek zadá IČO, nič sa (zdanlivo) nedeje a začne
   klikať inde. Pás preto hovorí tri veci: že sa hľadá, odkiaľ, a čo z toho
   vyšlo — vrátane toho, čo si má ešte doplniť sám. */
.nx-priebeh { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px;
    padding: 11px 14px; border-radius: var(--r); font-size: .85rem; line-height: 1.45;
    border: 1px solid var(--line); background: var(--sunken); color: var(--ink-soft); }
.nx-priebeh b { display: block; color: var(--ink); font-weight: 660; }
.nx-priebeh-ind { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; border-radius: 50%;
    border: 2px solid var(--line-strong); border-top-color: var(--brand); }
.nx-priebeh.is-hlada .nx-priebeh-ind { animation: nx-priebeh-toci .7s linear infinite; }
.nx-priebeh.is-ok { background: var(--success-bg); border-color: var(--success-line); }
.nx-priebeh.is-ok .nx-priebeh-ind { border: 0; background: var(--success);
    -webkit-mask: var(--nx-fajka) center / contain no-repeat; mask: var(--nx-fajka) center / contain no-repeat; }
.nx-priebeh.is-pozor { background: var(--warning-bg); border-color: var(--warning-line); }
.nx-priebeh.is-pozor .nx-priebeh-ind { border-color: var(--warning); border-top-color: var(--warning); }
@keyframes nx-priebeh-toci { to { transform: rotate(360deg); } }
.nx-priebeh[hidden] { display: none; }
/* V riadku s tlačidlom (flex) ide pás na celý riadok pod neho, nie do úzkeho stĺpca. */
.nx-priebeh { flex: 1 1 100%; }
:root { --nx-fajka: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }

/* ==========================================================================
   Funkčné minimum Chromium 83 (Edge 83 na prevádzke) — audit E1, 24. 10. 2026
   Kritické diely (dialóg a potvrdenie, polia, tlačidlá, tabuľky, menu,
   záložky, stránkovanie, hlášky) musia v ňom fungovať; stráži
   core.tests_minimalny_prehliadac. `:is()`/`:where()` sú v nich rozpísané,
   `color-mix()` má pred sebou plnú farbu, `dvh` hodnotu vo `vh`.
   ========================================================================== */
/* Token cez color-mix je v starom prehliadači neplatný až pri výpočte —
   okraj by spadol na `currentColor`. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    :root { --pole-okraj-hover: var(--ink-soft); }
}
/* `gap` vo flexe vie Chromium až od 84 a cez @supports sa zistiť nedá (grid
   gap 83 pozná). `aspect-ratio` prišlo v 88 — prehliadač bez neho dostane
   náhradné okraje (84–87 má aj gap; dvojitá medzera je len kozmetika). */
@supports not (aspect-ratio: 1 / 1) {
    .btn > .ti:not(:last-child), .btn-primary > .ti:not(:last-child), .btn-ghost > .ti:not(:last-child),
    .btn-submit > .ti:not(:last-child), .btn-danger > .ti:not(:last-child) { margin-right: 7px; }
    .nx-potvrd-akcie > * + *, .nx-dlg-akcie > * + * { margin-left: 8px; }
    .nx-toasty > * + * { margin-top: 10px; }
    .nx-toast > .nx-toast-t { margin-left: 11px; }
    .messages > li + li { margin-top: 9px; }
    .messages li > * + * { margin-left: 10px; }
    .pager > * { margin: 3px; }
    .nx-zalozky > * + * { margin-left: 3px; }
    .nx-zalozky > a > .ti, .nx-zalozky > button > .ti { margin-right: 7px; }
    .side-nav a > .ti { margin-right: 11px; }
    .side-nav > * + *, .side-mods > * + *, .side-sys > * + * { margin-top: 1px; }
    .ctxbar > * + * { margin-left: 12px; }
    .ctx-scope > * + * { margin-left: 10px; }
    .nx-drobcek button > .ti, .nx-drobcek a > .ti { margin-right: 6px; }
    .sidebar-brand > * + * { margin-left: 10px; }
    .sidebar-foot > * + * { margin-left: 9px; }
    .topbar > * + * { margin-left: 12px; }
    .nx-hladaj > * + *, .nx-tools .nx-hladaj > * + * { margin-left: 8px; }
    .nx-prepinac > * + * { margin-left: 7px; }
    .nx-vyber > * + * { margin-left: 7px; }
    .btn-ms > * + * { margin-left: 11px; }
    .nx-navrh > * + * { margin-left: 10px; }
    .nx-navrh-text > * + * { margin-top: 1px; }
    .nx-navrh-nazov > * + * { margin-left: 6px; }
}

/* ==========================================================================
   20) Drobné odchýlky namiesto `style=""` (dlh D-018, 25. 10. 2026)
   CSP má `style-src 'self'` bez `'unsafe-inline'`: atribút `style=""`
   prehliadač neaplikuje. Čo bolo v šablónach ako jednorazový štýl, je tu
   ako trieda; hodnota zo servera ide do `data-styl` (static/js/styl.js).
   Nová obrazovka si odsadenie rieši vo svojom komponente — tento zoznam
   nerastie (brána `style-atribut` v kontrola_jednoty, core.tests_csp).
   ========================================================================== */
.nx-velke-pismeno { text-transform: capitalize; }
.nx-m0 { margin: 0; }
.nx-podriadok { margin-top: 3px; }
.nx-veta-pod { margin: -4px 0 12px; max-width: 78ch; }
.nx-max-veta { max-width: 78ch; }
.nx-ml-auto { margin-left: auto; }
.nx-vpravo, input.nx-vpravo { text-align: right; }
.nx-mt-4 { margin-top: 4px; }
.nx-mt-6 { margin-top: 6px; }
.nx-mt-8 { margin-top: 8px; }
.nx-mt-10 { margin-top: 10px; }
.nx-mt-12 { margin-top: 12px; }
.nx-mt-18 { margin-top: 18px; }
.nx-mt-20 { margin-top: 20px; }
/* Text namiesto čísla v KPI dlaždici („Nevieme“, „Bez kalendára“) a stredné číslo
   (dátum, sadzba). Inline štýl prebíjal aj veľké číslo vzhľadov (`#nastenka
   .stat-value`, atelier/bordeaux `:is(.stat-value)`) — preto `:root` a ID. */
:root .stat-card .stat-value.stat-value--text, :root #nastenka .stat-card .stat-value.stat-value--text { font-size: 1.02rem; font-weight: 600; }
:root .stat-card .stat-value.stat-value--stredna, :root #nastenka .stat-card .stat-value.stat-value--stredna { font-size: 1.28rem; }
:root .stat-card .stat-value.stat-value--text-105, :root #nastenka .stat-card .stat-value.stat-value--text-105 { font-size: 1.05rem; font-weight: 600; }
:root .stat-card .stat-value.stat-value--text-112, :root #nastenka .stat-card .stat-value.stat-value--text-112 { font-size: 1.12rem; font-weight: 600; }
:root .stat-card .stat-value.stat-value--text-095, :root #nastenka .stat-card .stat-value.stat-value--text-095 { font-size: .95rem; font-weight: 600; }
.stat-card .stat-sub.nx-mt-4 { margin-top: 4px; }
.stat-card .stat-sub.nx-mt-6 { margin-top: 6px; }

/* Zostatok účtu pri výbere platieb (faktury/_zostatok_vyberu.html, ui.js 14):
   na účte − pripravené − vybrané = ostane; pás ukazuje, koľko z účtu výber
   zoberie. Farba = význam (§3j): ostane ≥ 0 zelené, < 0 bordové. */
.nx-zostatok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .8rem;
               padding: 10px 16px; border-bottom: 1px solid var(--line); }
.nx-zostatok-ucet { display: inline-flex; align-items: center; gap: 6px; }
.nx-zostatok-riadok { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.nx-zostatok-ostane { font-size: .95rem; }
.nx-zostatok-ostane b { color: var(--success-dark); font-weight: 700; }
.nx-zostatok.is-malo .nx-zostatok-ostane b { color: var(--danger); }
.nx-zostatok-pas { flex: 1 0 100%; height: 4px; border-radius: var(--r-pill); background: var(--success-bg); overflow: hidden; }
.nx-zostatok-pas i { display: block; height: 100%; width: 0; background: var(--success); transition: width .15s; }
.nx-zostatok.is-malo .nx-zostatok-pas i { background: var(--danger); }
.nx-zostatok small { flex: 1 0 100%; }