/* ==========================================================================
   BCG Nexus — modulové štýly
   --------------------------------------------------------------------------
   Sem patrí to, čo je špecifické pre jeden modul a nedá sa vyjadriť
   komponentom zo styles.css. Do šablón sa inline <style> UŽ NEPÍŠE:
   v auguste 2026 ich bolo 2 148 riadkov v 25 súboroch a portál mal preto
   tri rôzne tabuľky, dvoje záložky a štvoro filtračných líšt.

   Pravidlá:
     · žiadna farba natvrdo — všetko cez token, inak nefunguje tmavá téma,
     · nový modul najprv skúsi komponent zo styles.css a až potom pridá sem,
     · modulové pravidlo je VŽDY zúžené na svoj modul (`.vp-table .tag`, nie
       `.tag`) — všeobecné meno bez zúženia prebije komponent systému na
       všetkých obrazovkách naraz (stalo sa pri `.tag`, `.stick-1`, `.money`),
     · tabuľka = .table-wrap + table.tbl (jeden engine pre celý portál).
   ========================================================================== */


/* ==========================================================================
   templates/asistent/widget.html
   ========================================================================== */

    .pav-fab { position:fixed; right:22px; bottom:22px; z-index:60; width:56px; height:56px;
        border:0; border-radius:50%; background:var(--brand); color:var(--brand-ink-on); cursor:pointer;
        font-size:1.5rem; display:flex; align-items:center; justify-content:center;
        box-shadow:0 6px 20px rgba(46,40,40,.28); transition:transform .12s, background .12s; }
    .pav-fab:hover { background:var(--char-800); transform:translateY(-2px); }
    .pav-fab.is-open { display:none; }

    .pav-panel { position:fixed; right:22px; bottom:22px; z-index:61; width:390px;
        max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 44px);
        background:var(--surface); border:1px solid var(--line); border-radius:14px;
        box-shadow:0 16px 44px rgba(46,40,40,.22); display:none; flex-direction:column;
        overflow:hidden; }
    .pav-panel.is-open { display:flex; }

    .pav-head { display:flex; align-items:center; gap:10px; padding:12px 14px;
        background:var(--brand); color:var(--brand-ink-on); flex:0 0 auto; }
    .pav-head .pav-avatar { width:30px; height:30px; border-radius:50%;
        background:rgba(255,255,255,.14); display:flex; align-items:center;
        justify-content:center; font-size:1rem; }
    .pav-head b { font-size:.95rem; font-weight:600; }
    .pav-head small { display:block; font-size:.72rem; opacity:.72; font-weight:400; }
    .pav-close { margin-left:auto; background:0; border:0; color:var(--brand-ink-on); opacity:.7;
        cursor:pointer; font-size:1.15rem; padding:4px; line-height:1; }
    .pav-close:hover { opacity:1; }

    .pav-telo { flex:1; overflow-y:auto; padding:14px; background:var(--surface-2);
        display:flex; flex-direction:column; gap:10px; }
    .pav-sprava { max-width:86%; padding:9px 12px; border-radius:12px; font-size:.86rem;
        line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
    .pav-sprava.od-cloveka { align-self:flex-end; background:var(--brand); color:var(--brand-ink-on);
        border-bottom-right-radius:4px; }
    .pav-sprava.od-paviela { align-self:flex-start; background:var(--surface);
        border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:4px; }
    .pav-sprava.je-chyba { background:var(--red-50); border-color:var(--red-200);
        color:var(--red-800); }

    .pav-uvod { color:var(--muted); font-size:.82rem; line-height:1.55; padding:6px 2px; }
    .pav-uvod b { color:var(--ink); }

    .pav-caka { align-self:flex-start; display:flex; align-items:center; gap:8px;
        color:var(--muted); font-size:.8rem; padding:4px 2px; }
    .pav-caka i { animation:pav-puls 1.1s ease-in-out infinite; }
    @keyframes pav-puls { 0%,100% { opacity:.35; } 50% { opacity:1; } }

    .pav-spodok { flex:0 0 auto; border-top:1px solid var(--line); background:var(--surface);
        padding:10px; display:flex; gap:8px; align-items:flex-end; }
    .pav-vstup { flex:1; border:1px solid var(--line); border-radius:9px; padding:8px 10px;
        font:inherit; font-size:.86rem; resize:none; max-height:96px; color:var(--ink);
        background:var(--surface); }
    .pav-vstup:focus { outline:0; border-color:var(--char-400); }
    .pav-poslat { flex:0 0 auto; width:38px; height:38px; border:0; border-radius:9px;
        background:var(--brand); color:var(--brand-ink-on); cursor:pointer; font-size:1rem; }
    .pav-poslat:hover:not(:disabled) { background:var(--char-800); }
    .pav-poslat:disabled { background:var(--char-300); cursor:default; }

    .pav-pata { padding:0 12px 9px; font-size:.68rem; color:var(--faint); text-align:center;
        background:var(--surface); }

    @media (max-width:520px) {
        .pav-panel { right:8px; bottom:8px; width:calc(100vw - 16px); height:calc(100vh - 16px); }
        .pav-fab { right:14px; bottom:14px; }
    }

/* ==========================================================================
   templates/core/changelog.html
   ========================================================================== */

    /* Changelog je text na čítanie, nie pracovná plocha — jediné miesto,
       kde je strop šírky správne (dlhý riadok textu sa zle číta). */
    .content:has(.chlog) { max-width: 900px; }
    .chlog h1 { margin:0 0 2px; font-size:1.5rem; }
    .chlog-head { margin-bottom:22px; }

    .chlog-list { list-style:none; margin:0; padding:0; position:relative; }
    /* zvislá os timeline */
    .chlog-list::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line); }

    .chlog-item { position:relative; padding:0 0 18px 34px; }
    .chlog-item:last-child { padding-bottom:0; }
    .chlog-marker { position:absolute; left:0; top:14px; width:16px; height:16px; border-radius:50%;
        background:var(--surface); border:2px solid var(--line); box-shadow:0 0 0 3px var(--surface); }
    .chlog-item.current .chlog-marker { border-color:var(--brand); background:var(--brand); }

    .chlog-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
        padding:14px 18px; box-shadow:var(--shadow-xs); transition:box-shadow .15s; }
    .chlog-card:hover { box-shadow:var(--shadow-sm); }
    .chlog-item.current .chlog-card { border-color:var(--brand-200); background:linear-gradient(180deg,var(--brand-50),var(--surface) 60%); }

    .chlog-verhead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
    .chlog-ver { font-size:1.06rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
    .chlog-item.current .chlog-ver { color:var(--brand-dark); }
    .chlog-badge { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
        background:var(--brand); color:var(--brand-ink-on); padding:2px 8px; border-radius:var(--r-pill); }
    .chlog-date { margin-left:auto; font-size:.8rem; color:var(--faint); font-variant-numeric:tabular-nums; }

    .chlog-changes { margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
    .chlog-changes li { position:relative; padding-left:20px; font-size:.9rem; line-height:1.5; color:var(--ink-soft); }
    .chlog-changes li::before { content:""; position:absolute; left:4px; top:9px; width:6px; height:6px;
        border-radius:50%; background:var(--brand-200); }
    .chlog-changes strong { color:var(--ink); font-weight:600; }
    .chlog-changes code { background:var(--surface-2); border:1px solid var(--line-soft); border-radius:5px;
        padding:1px 5px; font-size:.82em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--brand-dark); }

    .chlog-empty { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
        padding:20px; text-align:center; color:var(--muted); }

/* ==========================================================================
   templates/core/dashboard.html
   ========================================================================== */

    .entra-warn {
        display:flex; align-items:flex-start; gap:12px; text-decoration:none;
        border:1px solid; border-radius:12px; padding:14px 18px; margin-bottom:20px;
    }
    .entra-warn i { font-size:1.2rem; line-height:1.2; }
    .entra-warn strong { display:block; font-size:.95rem; }
    .entra-warn-t { display:block; font-size:.85rem; opacity:.9; margin-top:2px; }
    .entra-warn-cta { margin-left:auto; white-space:nowrap; font-size:.85rem; font-weight:600; align-self:center; }
    .entra-warn.blizi { background:var(--warn-50); border-color:var(--warn-200); color:var(--warn-800); }
    .entra-warn.kriticky, .entra-warn.vyprsany { background:var(--danger-bg); border-color:var(--danger-line); color:var(--danger-dark); }
    .entra-warn:hover { filter:brightness(.98); }
    @media (max-width:640px) { .entra-warn-cta { display:none; } }
    .task-count { background:var(--brand); color:var(--brand-ink-on); font-size:.75rem; border-radius:999px; padding:1px 9px; font-weight:700; }
    /* Fronta úloh = riadky panela. Naliehavosť nesie pruh vľavo, nie pozadie. */
    .task-list { list-style:none; margin:0; padding:0; }
    .task-item { display:flex; justify-content:space-between; align-items:center; gap:12px;
        padding:11px 17px; border-bottom:1px solid var(--line-soft);
        border-left:3px solid transparent; background:var(--surface); }
    .task-item:last-child { border-bottom:0; }
    .task-item:hover { background:var(--tonal); }
    .task--zaloha_schvalit { border-left-color:var(--warning); }
    /* Bezhotovostné zálohy (v1.73.0) prevzali farby po hotovostných typoch:
       akcia pre spracovateľa ostáva petrolejová, uzavretie prípadu zelené.
       Bez týchto dvoch riadkov by živé úlohy vyšli bez pruhu, kým mŕtve typy
       (spracovat/pripravena) farbu držali. */
    .task--zaloha_spracovat, .task--zaloha_vyplatit { border-left-color:var(--info); }
    .task--zaloha_zamietnuta { border-left-color:var(--danger); }
    .task--zaloha_pripravena, .task--zaloha_vyplatena { border-left-color:var(--success); }
    .task-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
    .task-title { font-weight:600; color:var(--ink); text-decoration:none; }
    a.task-title:hover { color:var(--brand-dark); text-decoration:underline; }
    .task-meta { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; }
    .task-note { font-size:.82rem; color:var(--muted); }
    .task-osc { font-family:ui-monospace, "SFMono-Regular", Menlo, monospace; font-size:.7rem; color:var(--muted);
        background:var(--line-soft); padding:1px 6px; border-radius:4px; letter-spacing:.02em; }
    .task-actions { display:flex; align-items:center; gap:10px; white-space:nowrap; }
    .task-time { font-size:.78rem; color:var(--faint); }
    .btn-ack { background:var(--surface); border:1px solid var(--char-300); border-radius:8px; padding:4px 12px;
        cursor:pointer; font-size:.82rem; font-weight:600; color:var(--ink-soft); }
    .btn-ack:hover { background:var(--line-soft); }

/* ==========================================================================
   templates/dochadzka/_style.html
   ========================================================================== */

    /* ---------- Dochádzka — zdieľané štýly modulu (vzor: Zálohy) ---------- */
    .dz-head { display:flex; align-items:center; gap:13px; margin-bottom:18px; }
    .dz-head-ico { width:40px; height:40px; border-radius:var(--r); flex:0 0 auto;
        background:linear-gradient(150deg, var(--brand), var(--brand-dark)); color:var(--brand-ink-on);
        display:flex; align-items:center; justify-content:center; font-size:21px; box-shadow:var(--shadow-xs); }
    .dz-head h1 { margin:0; font-size:1.35rem; letter-spacing:-.01em; }
    .dz-sub { margin:1px 0 0; color:var(--muted); font-size:.88rem; }
    .dz-head-actions { margin-left:auto; display:flex; gap:8px; }

    /* Vnútromodulové taby */
    .dz-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 0 18px; flex-wrap:wrap; }
    .dz-tabs a { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; text-decoration:none;
        color:var(--muted); font-size:.9rem; font-weight:600; border-bottom:2px solid transparent;
        margin-bottom:-1px; border-radius:var(--r-sm) var(--r-sm) 0 0; }
    .dz-tabs a:hover { color:var(--brand); background:var(--surface-2); }
    .dz-tabs a.is-active { color:var(--brand); border-bottom-color:var(--brand); }
    .dz-tabs a .ti { font-size:17px; }

    .dz-card { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
        box-shadow:var(--shadow-xs); padding:15px 18px 16px; margin-bottom:14px; }
    .dz-card.sec-new { background:linear-gradient(180deg, var(--brand-50) 0, var(--surface) 96px); border-color:var(--brand-200); }
    .dz-card.sec-wait { background:linear-gradient(180deg, var(--warn-50) 0, var(--surface) 96px); }
    .dz-card.sec-quiet { background:linear-gradient(180deg, var(--surface-2) 0, var(--surface) 96px); }
    .dz-card-head { display:flex; align-items:center; gap:10px; margin-bottom:13px; flex-wrap:wrap; }
    .dz-card-head h2 { margin:0; font-size:1rem; font-weight:700; display:flex; align-items:baseline; gap:7px; letter-spacing:-.01em; }
    .dz-head-note { font-size:.76rem; font-weight:500; color:var(--faint); }
    .dz-ico { width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:flex; align-items:center;
        justify-content:center; font-size:16px; }
    .dz-ico.ind { background:var(--brand-50); color:var(--brand); }
    .dz-ico.amber { background:var(--warn-100); color:var(--warn-700); }
    .dz-ico.teal { background:var(--teal-100); color:var(--teal-700); }
    .dz-ico.slate { background:var(--line-soft); color:var(--muted); }
    .dz-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;
        display:inline-flex; align-items:center; justify-content:center; }
    .dz-count.on { background:var(--brand); color:var(--brand-ink-on); }

    /* KPI dlaždice zostatkov — vždy s obdobím v labeli a jednotkou pod číslom */
    .dz-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-bottom:14px; }
    .dz-stat { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
        box-shadow:var(--shadow-xs); padding:12px 14px; }
    .dz-stat-label { display:flex; align-items:center; gap:6px; font-size:.75rem; font-weight:600; color:var(--muted); }
    .dz-stat-label .ti { font-size:15px; color:var(--faint); }
    .dz-stat-num { font-size:1.5rem; font-weight:700; color:var(--ink); margin-top:4px; line-height:1.1;
        font-variant-numeric:tabular-nums; }
    .dz-stat-num.neg { color:var(--danger); }
    .dz-stat-unit { font-size:.72rem; color:var(--faint); }
    .dz-stat-sub { margin-top:6px; font-size:.72rem; color:var(--muted); }
    .dz-stat-sub b { color:var(--ink-soft); }

    /* Mesačný kalendár */
    .dz-cal-nav { display:flex; align-items:center; gap:8px; margin-left:auto; }
    .dz-cal-nav a { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
        border:1px solid var(--line); border-radius:var(--r-sm); color:var(--muted); text-decoration:none; }
    .dz-cal-nav a:hover { border-color:var(--brand); color:var(--brand); }
    .dz-cal-nav .obdobie { font-weight:700; font-size:.92rem; color:var(--ink); min-width:130px; text-align:center; }
    .dz-cal { width:100%; border-collapse:collapse; table-layout:fixed; }
    .dz-cal th { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint);
        font-weight:600; padding:0 0 7px; text-align:center; }
    .dz-cal td { border:1px solid var(--line-soft); height:64px; vertical-align:top; padding:5px 6px; }
    .dz-cal td.mimo { border:none; background:transparent; }
    .dz-cal td.vikend, .dz-cal td.sviatok { background:var(--surface-2); }
    .dz-cal td.dnes { box-shadow:inset 0 0 0 2px var(--brand); border-radius:4px; }
    .dz-cal .cislo { font-size:.78rem; font-weight:600; color:var(--ink-soft); }
    .dz-cal td.vikend .cislo, .dz-cal td.sviatok .cislo { color:var(--faint); }
    .dz-cal .sv { display:block; font-size:.62rem; color:var(--warn-700); line-height:1.15; margin-top:2px; }
    .dz-chip { display:block; margin-top:4px; font-size:.66rem; font-weight:600; color:#fff; /* pozadie ide z farby druhu (DB) — biely text je zámer */
        border-radius:5px; padding:2px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dz-chip.caka { opacity:.55; outline:2px dashed rgba(46,40,40,.35); outline-offset:-2px; }
    .dz-legenda { display:flex; flex-wrap:wrap; gap:10px; margin-top:11px; }
    .dz-leg { display:inline-flex; align-items:center; gap:6px; font-size:.73rem; color:var(--muted); }
    .dz-leg .sw { width:11px; height:11px; border-radius:3px; display:inline-block; }

    /* Formuláre */
    .dz-fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; }
    .dz-fld { display:flex; flex-direction:column; gap:5px; }
    .dz-fld > span { font-size:.77rem; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; }
    .dz-fld > span .ti { font-size:14px; color:var(--faint); }
    .dz-full { margin-top:12px; }
    .dz-form select, .dz-form input[type=text], .dz-form input[type=date], .dz-form input[type=number],
    .dz-form input[type=color], .dz-form textarea {
        width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm);
        font-size:.9rem; font-family:inherit; color:var(--ink); background:var(--surface); transition:.15s; }
    .dz-form input[type=color] { padding:3px 5px; height:38px; }
    .dz-form textarea { resize:vertical; }
    .dz-form select:focus, .dz-form input:focus, .dz-form textarea:focus {
        outline:none; border-color:var(--brand); box-shadow:var(--ring); }
    .dz-check { display:inline-flex; align-items:center; gap:7px; font-size:.83rem; color:var(--ink-soft); cursor:pointer; }
    .dz-check input { width:15px; height:15px; accent-color:var(--brand); }
    .dz-checkrow { display:flex; gap:18px; margin-top:10px; flex-wrap:wrap; }
    .dz-hint { font-size:.75rem; color:var(--muted); margin-top:8px; }
    .dz-hint.warn { color:var(--warn-700); }

    /* Tlačidlá */
    .dz-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; cursor:pointer;
        border-radius:var(--r-sm); padding:7px 13px; font-size:.85rem; font-weight:600; font-family:inherit;
        text-decoration:none; transition:.15s; white-space:nowrap; line-height:1.2; }
    .dz-btn .ti { font-size:15px; }
    .dz-btn.sm { padding:6px 11px; font-size:.82rem; }
    .dz-btn-primary { color:var(--brand-ink-on); background:linear-gradient(135deg, var(--brand), var(--brand-dark));
        box-shadow:0 1px 3px rgba(46,40,40,.3); }
    .dz-btn-primary:hover { filter:brightness(1.12); }
    .dz-btn-ok { color:var(--fill-ink); background:var(--fill-ok); }
    .dz-btn-ok:hover { background:var(--success-dark); }
    .dz-btn-reject { color:var(--danger-dark); background:var(--surface); border-color:var(--danger-line); }
    .dz-btn-reject:hover { background:var(--danger-bg); }
    .dz-btn-ghost { color:var(--muted); background:var(--surface); border-color:var(--line); }
    .dz-btn-ghost:hover { color:var(--brand); border-color:var(--brand); }

    /* Tabuľky */
    .dz-tablewrap { overflow-x:auto; margin:0 -4px; }
    .dz-table { width:100%; border-collapse:collapse; font-size:.86rem; }
    /* Pri horizontálnom scrolle (úzke okno, mobil) ostáva prvý stĺpec —
       zamestnanec/kód — prilepený, aby bolo vždy vidieť, koho riadok je. */
    .dz-table th:first-child, .dz-table td:first-child {
        position:sticky; left:0; z-index:1; background:var(--surface); }
    .dz-table tbody tr:hover td:first-child { background:var(--surface-2); }
    .dz-table th { text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
        color:var(--faint); font-weight:600; padding:0 10px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
    .dz-table th.num, .dz-table th.ta-right { text-align:right; }
    .dz-table td { padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; color:var(--ink-soft); }
    .dz-table tbody tr:last-child td { border-bottom:none; }
    .dz-table tbody tr:hover td { background:var(--surface-2); }
    .dz-table .num, .dz-table .ta-right { text-align:right; }
    .dz-table .nowrap { white-space:nowrap; }
    .dz-dni { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); white-space:nowrap; }
    .dz-time { font-size:.73rem; color:var(--faint); }
    .dz-dash { color:var(--line); }
    .dz-dovod { max-width:230px; color:var(--muted); font-size:.83rem; }

    .dz-emp { display:flex; align-items:center; gap:9px; }
    .dz-ava { width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center;
        justify-content:center; font-weight:700; font-size:.7rem; color:var(--brand-ink); background:var(--brand-100);
        letter-spacing:.02em; }
    .dz-emp-info { display:flex; flex-direction:column; gap:1px; line-height:1.25; min-width:0; }
    .dz-emp-name { font-weight:600; color:var(--ink); }
    .dz-emp-sub { font-size:.7rem; color:var(--muted); }

    .dz-druh { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--ink); white-space:nowrap; }
    .dz-druh .sw { width:10px; height:10px; border-radius:3px; display:inline-block; flex:0 0 auto; }

    .dz-pill { display:inline-flex; align-items:center; gap:5px; font-size:.73rem; font-weight:600;
        padding:2px 9px 2px 7px; border-radius:var(--r-pill); white-space:nowrap; }
    .dz-pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
    .dz-pill--caka { background:var(--warn-100); color:var(--warn-800); }
    .dz-pill--schvalena { background:var(--success-bg); color:var(--success-dark); }
    .dz-pill--zamietnuta { background:var(--danger-bg); color:var(--danger-dark); }
    .dz-pill--stornovana { background:var(--line-soft); color:var(--muted); }
    .dz-pill--oznamenie { background:var(--teal-100); color:var(--teal-700); }
    .dz-why { font-size:.7rem; color:var(--muted); margin-left:6px; cursor:help; white-space:nowrap; }
    .dz-onme-badge { margin-left:8px; font-size:.72rem; font-weight:700; color:var(--success-dark);
        background:var(--success-bg); border:1px solid var(--success-line); padding:2px 9px; border-radius:var(--r-pill); }
    .dz-table tr.on-me td { background:var(--success-bg); }
    .dz-table tr.on-me td:first-child { box-shadow:inset 3px 0 0 var(--success); }
    .dz-actions { display:flex; gap:7px; align-items:center; justify-content:flex-end; }
    .inline { margin:0; display:inline-flex; }

    .dz-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 16px; text-align:center; }
    .dz-empty .ti { font-size:26px; color:var(--brand-200); }
    .dz-empty p { margin:0; color:var(--muted); font-size:.88rem; }

    /* Info pruh (napr. schvaľovateľ čaká na žiadosti) */
    .dz-banner { display:flex; align-items:center; gap:10px; border:1px solid var(--brand-200);
        border-radius:var(--r-lg); background:var(--brand-50); padding:11px 15px; margin-bottom:14px;
        color:var(--brand-ink); font-size:.88rem; }
    .dz-banner .ti { font-size:18px; }
    .dz-banner a { color:inherit; font-weight:700; }

    @media (max-width:640px) {
        .dz-actions { flex-wrap:wrap; }
        .dz-dovod { max-width:140px; }
        .dz-cal td { height:52px; padding:3px 4px; }
        .dz-chip { font-size:.58rem; padding:1px 4px; }
    }

/* ==========================================================================
   templates/dochadzka/archiv.html
   ========================================================================== */

    /* Toolbar archívu — server-side filtre (GET), vzor dz-toolbar z HR správy */
    .dz-toolbar { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:12px; }
    .dz-search { position:relative; flex:1 1 200px; max-width:300px; }
    .dz-search .ti { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:15px; }
    .dz-search input { width:100%; padding:8px 11px 8px 32px; border:1px solid var(--line); border-radius:var(--r-sm);
        font-size:.86rem; font-family:inherit; color:var(--ink); background:var(--surface); }
    .dz-search input:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
    .dz-toolbar select, .dz-toolbar input[type=date] { padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
        font-size:.85rem; font-family:inherit; color:var(--ink); background:var(--surface); }
    .dz-toolbar select:focus, .dz-toolbar input[type=date]:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
    .dz-tb-range { display:inline-flex; align-items:center; gap:5px; font-size:.75rem; color:var(--muted);
        border:1px dashed var(--line); border-radius:var(--r-sm); padding:3px 8px 3px 10px; }
    .dz-tb-range input[type=date] { border:none; padding:4px 2px; background:transparent; }
    .dz-tb-range input[type=date]:focus { box-shadow:none; }
    .dz-toolbar-count { margin-left:auto; font-size:.78rem; color:var(--muted); white-space:nowrap; }

    /* Zoraditeľné hlavičky */
    .dz-th-sort { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:3px; }
    .dz-th-sort:hover { color:var(--brand); }
    .dz-th-sort .ti { font-size:12px; }

    /* Časová os v rozkliknutom riadku */
    .dz-arch-toggle { border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer;
        width:26px; height:26px; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; }
    .dz-arch-toggle:hover { color:var(--brand); border-color:var(--brand); }
    .dz-arch-toggle .ti { font-size:14px; transition:transform .15s; }
    tr.open .dz-arch-toggle .ti { transform:rotate(90deg); }
    tr.dz-arch-detail { display:none; }
    tr.dz-arch-detail.open { display:table-row; }
    tr.dz-arch-detail > td { background:var(--surface-2); padding:12px 16px 14px 44px; }
    .dz-tl { list-style:none; margin:0; padding:0; position:relative; }
    .dz-tl::before { content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:var(--line); }
    .dz-tl li { position:relative; padding:3px 0 3px 22px; font-size:.82rem; color:var(--ink-soft); }
    .dz-tl li::before { content:""; position:absolute; left:0; top:9px; width:12px; height:12px; border-radius:50%;
        background:var(--surface); border:3px solid var(--brand-200); }
    .dz-tl li.ok::before { border-color:var(--success); }
    .dz-tl li.bad::before { border-color:var(--danger); }
    .dz-tl li.off::before { border-color:var(--faint); }
    .dz-tl b { color:var(--ink); }
    .dz-tl .dz-time { margin-left:6px; }
    .dz-tl .pozn { display:block; color:var(--muted); font-size:.78rem; }

    /* Stránkovanie */
    .dz-pager { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:14px; flex-wrap:wrap; }
    .dz-pager a, .dz-pager span { min-width:30px; height:30px; padding:0 8px; display:inline-flex; align-items:center;
        justify-content:center; border-radius:var(--r-sm); font-size:.83rem; font-weight:600; text-decoration:none;
        color:var(--muted); border:1px solid transparent; }
    .dz-pager a:hover { border-color:var(--brand); color:var(--brand); }
    .dz-pager .akt { background:var(--brand); color:var(--brand-ink-on); }
    .dz-pager .dots { color:var(--faint); }

/* ==========================================================================
   templates/dochadzka/hr.html
   ========================================================================== */

    .dz-mini { padding:6px 8px !important; font-size:.84rem; }
    .dz-w-70 { width:70px; }
    .dz-w-110 { width:110px; }
    .dz-color-mini { width:42px; height:32px; padding:2px 3px !important; }
    .dz-rok-active { border-color:var(--brand) !important; color:var(--brand) !important; font-weight:700; }

    /* Toolbar tabuľky: vyhľadávanie + filtre + zoradenie (štandard modulu) */
    .dz-toolbar { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:12px; }
    .dz-search { position:relative; flex:1 1 220px; max-width:340px; }
    .dz-search .ti { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:15px; }
    .dz-search input { width:100%; padding:8px 11px 8px 32px; border:1px solid var(--line); border-radius:var(--r-sm);
        font-size:.87rem; font-family:inherit; color:var(--ink); background:var(--surface); }
    .dz-search input:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
    .dz-toolbar select { padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
        font-size:.85rem; font-family:inherit; color:var(--ink-soft); background:var(--surface); }
    .dz-toolbar select:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
    .dz-toolbar-count { margin-left:auto; font-size:.78rem; color:var(--muted); white-space:nowrap; }
    th.dz-sort { cursor:pointer; user-select:none; }
    th.dz-sort:hover { color:var(--brand); }
    th.dz-sort::after { content:"↕"; margin-left:5px; opacity:.4; font-size:.7rem; }
    th.dz-sort.asc::after { content:"↑"; opacity:1; }
    th.dz-sort.desc::after { content:"↓"; opacity:1; }

    /* Prepínač filtra (vzor: „Kompaktne“ v Príprave miezd) */
    .dz-switch { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:var(--muted);
        cursor:pointer; white-space:nowrap; }
    .dz-switch input { appearance:none; -webkit-appearance:none; width:32px; height:18px; border-radius:var(--r-pill);
        background:var(--line); position:relative; cursor:pointer; transition:background .15s; flex-shrink:0; }
    .dz-switch input::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px;
        border-radius:50%; background:var(--surface); box-shadow:var(--shadow-xs); transition:left .15s; }
    .dz-switch input:checked { background:var(--brand); }
    .dz-switch input:checked::after { left:16px; }

    tr.dz-row-click { cursor:pointer; }
    .dz-pill--mimo { background:var(--line-soft); color:var(--muted); }
    .dz-pill--neaktivny { background:var(--danger-bg); color:var(--danger-dark); }
    .dz-pill--v { background:var(--success-bg); color:var(--success-dark); }
    .dz-badge-sam { font-size:.68rem; font-weight:700; color:var(--brand-ink); background:var(--brand-100);
        border-radius:var(--r-pill); padding:1px 7px; margin-left:5px; white-space:nowrap; }

    /* Detail zamestnanca — bočný panel */
    .dz-drawer-overlay { position:fixed; inset:0; background:rgba(24,20,20,.35); z-index:60; display:none; }
    .dz-drawer { position:fixed; top:0; right:-430px; width:min(410px, 94vw); height:100dvh; z-index:61;
        background:var(--surface); border-left:1px solid var(--line); box-shadow:-8px 0 30px rgba(24,20,20,.12);
        display:flex; flex-direction:column; transition:right .22s ease; }
    .dz-drawer.open { right:0; }
    .dz-drawer-overlay.open { display:block; }
    .dz-drawer-head { display:flex; align-items:center; gap:10px; padding:16px 18px 13px; border-bottom:1px solid var(--line-soft); }
    .dz-drawer-head .dz-ava { width:38px; height:38px; font-size:.82rem; }
    .dz-drawer-title { font-weight:700; color:var(--ink); font-size:1rem; line-height:1.25; }
    .dz-drawer-sub { font-size:.74rem; color:var(--muted); }
    .dz-drawer-close { margin-left:auto; border:none; background:none; cursor:pointer; color:var(--muted); font-size:19px; }
    .dz-drawer-close:hover { color:var(--ink); }
    .dz-drawer-body { padding:15px 18px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:13px; }
    .dz-drawer-foot { padding:13px 18px; border-top:1px solid var(--line-soft); display:flex; gap:9px; }
    .dz-readonly { background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--r-sm);
        padding:9px 11px; font-size:.84rem; color:var(--muted); }
    .dz-readonly b { color:var(--ink-soft); }
    .dz-switchrow { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:var(--r-sm);
        padding:10px 12px; }
    .dz-switchrow input { width:16px; height:16px; accent-color:var(--brand); }
    .dz-switchrow .lbl { font-size:.86rem; font-weight:600; color:var(--ink); }
    .dz-switchrow .sub { font-size:.72rem; color:var(--muted); }

/* ==========================================================================
   templates/dochadzka/kalendar.html
   ========================================================================== */

    /* Tímový kalendár — riadok = človek, stĺpec = deň */
    .tk-wrap { overflow-x:auto; }
    /* Mriežka kalendára: `table-layout:fixed` je tu podstatné. Pri automatickom
       rozložení prehliadač IGNORUJE `max-width` na bunke, takže si menný stĺpec
       zobral všetko voľné miesto (na 2K vyše 1200 px) a 31 dní sa tlačilo do
       zvyšku. S fixným rozložením má meno svojich 300 px a dni si rovným dielom
       rozdelia celý zvyšok — čím širší monitor, tým väčšie dni. */
    .tk { border-collapse:separate; border-spacing:0; width:100%; font-size:.78rem; table-layout:fixed; }
    .tk th, .tk td { border-bottom:1px solid var(--line-soft); }
    .tk thead th { position:sticky; top:0; z-index:3; background:var(--surface);
        font-size:.62rem; font-weight:600; color:var(--faint); text-align:center;
        padding:3px 0 6px; line-height:1.25; border-bottom:1px solid var(--line); }
    .tk thead th.tk-emp-col { z-index:4; }
    .tk .tk-emp-col { position:sticky; left:0; background:var(--surface); z-index:2;
        width:300px; text-align:left; padding:6px 12px 6px 4px;
        border-right:1px solid var(--line); }
    .tk tbody tr:hover .tk-emp-col, .tk tbody tr:hover td { background:var(--surface-2); }
    .tk .tk-day { width:auto; height:38px; padding:2px 3px; text-align:center; }
    .tk .tk-day.vikend, .tk .tk-day.sviatok { background:var(--surface-2); }
    .tk thead .den-cislo { font-size:.72rem; font-weight:700; color:var(--ink-soft); display:block; }
    .tk thead th.dnes .den-cislo { color:var(--brand-ink-on); background:var(--brand); border-radius:50%;
        width:20px; height:20px; line-height:20px; margin:0 auto; }
    /* Dnešok = jemne podfarbený stĺpec, nie dve čierne čiary cez celú tabuľku.
       Deň sám je zvýraznený krúžkom v hlavičke, to stačí. */
    .tk td.dnes, .tk th.dnes { background:var(--cream-tint); }
    .tk td.dnes.vikend, .tk td.dnes.sviatok { background:var(--cream-soft); }
    .tk-blk { display:block; height:22px; border-radius:4px; margin:0 1px; }
    .tk-blk.caka { opacity:.5; outline:2px dashed rgba(46,40,40,.4); outline-offset:-2px; }
    /* Meno sa neoreže — pri 300 px sa dlhé meno radšej zalomí na dva riadky. */
    .tk-emp-name { font-weight:600; color:var(--ink); font-size:.8rem; line-height:1.25; display:block;
        overflow-wrap:anywhere; }
    .tk-emp-sub { font-size:.66rem; color:var(--muted); }
    .tk-dni { font-size:.68rem; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap; }
    .tk-badge-ja { font-size:.6rem; font-weight:700; color:var(--brand-ink); background:var(--brand-100);
        border-radius:var(--r-pill); padding:0 6px; margin-left:5px; }
    tr.tk-filtered-out { display:none; }

    /* Toolbar (vzor Príprava miezd) */
    .tk-filterbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface-2);
        border:1px solid var(--line); border-radius:var(--r); padding:9px 12px; margin-bottom:12px; box-shadow:var(--shadow-xs); }
    .tk-search { position:relative; display:flex; align-items:center; flex:1; min-width:200px; max-width:340px; }
    .tk-search > .ti { position:absolute; left:10px; color:var(--faint); font-size:16px; pointer-events:none; }
    .tk-search input { width:100%; padding:8px 30px 8px 32px; border:1px solid var(--line); border-radius:var(--r-sm);
        background:var(--surface); font-size:.88rem; font-family:inherit; }
    .tk-search input:focus { border-color:var(--brand); box-shadow:var(--ring); outline:none; }
    .tk-filterbar select { padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
        font-size:.85rem; font-family:inherit; color:var(--ink-soft); background:var(--surface); }
    .tk-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--surface);
        color:var(--ink-soft); padding:6px 12px; border-radius:var(--r-pill); font-size:.8rem; font-weight:600;
        cursor:pointer; transition:.12s; }
    .tk-chip .ti { font-size:14px; }
    .tk-chip:hover { border-color:var(--brand-200); }
    .tk-chip.active { background:var(--brand); border-color:var(--brand); color:var(--brand-ink-on); }
    .tk-count { margin-left:auto; font-size:.8rem; color:var(--faint); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   templates/financie/index.html
   ========================================================================== */

.fin h1 { font-size:1.55rem; margin:0 0 4px; letter-spacing:-.02em; }
.fin-sub { color:var(--muted); margin:0 0 20px; font-size:.95rem; max-width:80ch; }
.fin-eur { font-size:1rem; font-weight:600; color:var(--faint); }
.fin-vs { color:var(--faint); font-size:.78rem; }
.fin-kpi { margin-bottom:18px; }
.stat-card.fin-warn { background:var(--danger-bg); border-color:var(--danger-line); }
.stat-card.fin-warn .stat-value { color:var(--danger); }

.fin-upload { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 17px; margin-bottom:20px; }
.fin-upload-l { width:100%; font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:7px; }
.fin-upload-l .ti { font-size:17px; color:var(--brand); }
.fin-f { display:flex; flex-direction:column; gap:5px; font-size:.78rem; font-weight:600; color:var(--muted); }
.fin-f select, .fin-f input { border:1px solid var(--line); border-radius:9px; padding:7px 11px;
  font-size:.9rem; font-family:inherit; background:var(--surface); color:var(--ink); }
.fin-files { flex:1 1 320px; }
.fin-upload-hint { width:100%; margin:2px 0 0; font-size:.8rem; color:var(--faint); line-height:1.5; }

.fin-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:18px; }
.fin-firma { display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; box-shadow:var(--shadow-xs); }
.fin-pill { border:0; background:transparent; color:var(--ink-soft); font-weight:600; font-size:.88rem; padding:7px 16px; border-radius:var(--r-pill); cursor:pointer; }
.fin-pill.is-on { background:var(--brand); color:var(--brand-ink-on); box-shadow:var(--shadow-xs); }
.fin-month { display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:6px 12px; color:var(--muted); }
.fin-month select { border:0; background:transparent; font-weight:600; color:var(--ink); font-size:.9rem; padding:0; }

.fin-korekcie { display:flex; flex-wrap:wrap; gap:10px 26px; align-items:baseline;
  background:var(--cream-tint); border:1px solid var(--cream-200); border-left:3px solid var(--brand);
  border-radius:var(--r-lg); padding:13px 17px; margin:-4px 0 18px; }
.fin-korekcie-l { width:100%; font-size:.78rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:7px; }
.fin-korekcie-l .ti { font-size:16px; color:var(--brand); }
.fin-kor { display:flex; align-items:baseline; gap:7px; font-size:.86rem; }
.fin-kor-n { color:var(--ink-soft); font-weight:600; }
.fin-kor b { font-variant-numeric:tabular-nums; color:var(--ink); }
.fin-kor em { font-style:normal; font-size:.76rem; color:var(--faint); }
.fin-kor-th { color:var(--muted) !important; font-weight:600 !important; }
.fin-kor-in { color:var(--teal-700); }
.fin-kor-out { color:var(--warn-700); }
.fin-odhad { background:var(--warn-50); border:1px solid var(--warn-200);
  border-left:3px solid var(--warn-500); border-radius:var(--r-lg); padding:13px 17px; margin:-4px 0 18px; }
.fin-odhad-h { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--warn-700); font-size:.95rem; }
.fin-odhad-h .ti { font-size:18px; }
.fin-odhad p { margin:6px 0 0; font-size:.85rem; line-height:1.55; color:var(--ink-soft); }
.fin-odhad-ciel { color:var(--faint) !important; font-size:.8rem !important; }
.fin-odhad-tag { display:inline-block; font-size:.64rem; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--warn-700); background:var(--warn-100); border:1px solid var(--warn-200);
  border-radius:999px; padding:1px 6px; vertical-align:middle; }
.fin-alok { margin-top:18px; }
.fin-alok-r { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.fin-radio { display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--ink-soft); }
.fin-alok-g { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px; }
.fin-alok-g .fin-f { flex:1 1 280px; }
.fin-alok-g input[type=text] { width:100%; }
.fin-alok-l { font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px; }
.fin-alok-p { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }
.fin-pod { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  border-radius:9px; padding:5px 10px; background:var(--surface); font-size:.84rem; }
.fin-pod input { width:64px; border:0; border-bottom:1px solid var(--line); background:transparent;
  text-align:right; font-family:inherit; font-size:.86rem; color:var(--ink); }
.fin-pod em { font-style:normal; color:var(--faint); }
.fin-note { display:flex; gap:8px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:11px 15px; font-size:.86rem; color:var(--ink-soft); line-height:1.5; margin:-4px 0 18px; }
.fin-note .ti { font-size:17px; color:var(--muted); flex:0 0 auto; margin-top:1px; }

.fin-tablehead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.fin-tablehead h2 { margin:0; }
.fin-searchbox { border:1px solid var(--line); border-radius:9px; padding:7px 12px; font-size:.88rem; min-width:200px; }
.fin-tablewrap { overflow-x:auto; }
.fin-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.fin-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  font-weight:700; padding:8px 12px; border-bottom:2px solid var(--line); cursor:pointer; white-space:nowrap; user-select:none; }
.fin-table th.n, .fin-table td.n { text-align:right; font-variant-numeric:tabular-nums; }
.fin-table td { padding:9px 12px; border-bottom:1px solid var(--line-soft); }
.fin-table tbody tr:hover { background:var(--cream-tint); }
.fin-table td.strong { font-weight:700; }
.fin-kod { font-weight:700; }

.fin-nazov { color:var(--faint); font-size:.82rem; margin-left:4px; }
.fin-pos { color:var(--teal-700); }
.fin-neg { color:var(--danger); }
.fin-foot { display:flex; gap:8px; align-items:flex-start; font-size:.8rem; line-height:1.5; margin:12px 0 0; }
.fin-foot .ti { font-size:16px; color:var(--faint); flex:0 0 auto; margin-top:1px; }

/* ==========================================================================
   templates/mzdy/priprava.html
   ========================================================================== */

    .mzdy-page h1 { margin:0 0 2px; font-size:1.5rem; }

    /* Prehľadové karty strediska (živo sa prepočítavajú pri úpravách) */
    .mz-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0 8px; }
    .mz-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 15px; display:flex; flex-direction:column; gap:3px; box-shadow:var(--shadow-xs); transition:box-shadow .15s; }
    .mz-card:hover { box-shadow:var(--shadow-sm); }
    .mz-card .mzc-k { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; display:flex; align-items:center; gap:6px; }
    .mz-card .mzc-k .ti { font-size:15px; opacity:.85; }
    .mz-card .mzc-v { font-size:1.32rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
    .mz-card .mzc-v b { font-weight:700; }
    .mz-card .mzc-sub { font-size:.74rem; color:var(--faint); }
    /* Akcent nesie pozadie, rámik a ikona — nie samotné číslo.
       Suma k výplate je bežná hodnota; v akčnej červenej by čítala ako chyba. */
    .mz-card.accent { background:linear-gradient(180deg,var(--brand-100),var(--surface) 75%); border-color:var(--brand-200); }
    .mz-card.accent .mzc-k { color:var(--ink-soft); }
    .mz-card.accent .mzc-k .ti { color:var(--accent); opacity:1; }
    .mz-card.accent .mzc-v { color:var(--ink); }
    .mz-card .mzc-v.flash { animation:mzCardFlash .5s ease; }
    @keyframes mzCardFlash { 0%{ color:var(--brand); } 100%{} }

    /* --- Toolbar --- */
    .mz-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:18px 0; }
    .mz-selectors label { font-size:.82rem; color:var(--muted); display:inline-flex; align-items:center; gap:8px; }
    .mz-selectors select { padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:.9rem; font-weight:500; }
    .mz-month { display:flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; box-shadow:var(--shadow-xs); }
    .mz-month .btn-ghost { border:none; padding:6px 12px; border-radius:var(--r-pill); background:transparent; }
    .mz-month .btn-ghost:hover { background:var(--line-soft); }
    .mz-month-label { min-width:120px; text-align:center; font-weight:600; font-size:.92rem; }
    .mz-export { display:flex; align-items:center; gap:8px; margin-left:auto; }

    .mz-lock { display:flex; align-items:center; gap:9px; background:var(--warn-50); border:1px solid var(--warn-200); color:var(--warn-800); padding:11px 15px; border-radius:var(--r); margin-bottom:14px; font-size:.9rem; }
    /* `display:flex` by prebilo UA pravidlo pre [hidden] → pruh o nulových
       mzdách by svietil aj na stredisku, kde nikto taký nie je. */
    .mz-lock[hidden] { display:none; }
    .mz-lock .ti { font-size:18px; }
    .mz-lock.ro { background:var(--danger-bg); border-color:var(--danger-line); color:var(--danger-dark); }
    .mz-lock.ok { background:var(--teal-50); border-color:var(--teal-100); color:var(--teal-800); }
    /* pozeráš sa na mesiac za prvým otvoreným — najsilnejšie jantárové varovanie */
    .mz-lock.ahead { background:var(--warn-100); border-color:var(--warn-400); border-left:4px solid var(--warn-500); color:var(--warn-800); align-items:flex-start; }
    .mz-lock.ahead a { margin-left:6px; white-space:nowrap; }
    .mz-lock a { color:inherit; font-weight:600; text-decoration:underline; }
    .mz-fieldset { border:none; padding:0; margin:0; min-width:0; }

    .mz-addpanel { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:14px; }
    .mz-addform { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
    .mz-addform input, .mz-addform select { padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); }
    .mz-newemp { margin-top:10px; }
    .mz-newemp summary { cursor:pointer; color:var(--brand-dark); font-size:.88rem; font-weight:500; }

    .ac-picker { position:relative; max-width:520px; }
    .ac-search { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); }
    .ac-results { position:absolute; z-index:30; left:0; right:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-top:6px; box-shadow:var(--shadow-lg); max-height:300px; overflow:auto; }
    .ac-result { padding:10px 12px; cursor:pointer; }
    .ac-result:hover, .ac-result.sel { background:var(--brand-50); }
    .ac-result b { font-weight:600; }
    .ac-result .sub { color:var(--muted); font-size:.8rem; }
    .ac-new { padding:10px 12px; cursor:pointer; color:var(--brand-dark); border-top:1px solid var(--line-soft); font-weight:500; }
    .ac-new:hover { background:var(--surface-2); }
    /* Nápoveda pri krátkom dopyte — bez nej vyzerá mlčiace pole ako porucha. */
    .ac-hint { padding:10px 12px; color:var(--muted); font-size:.85rem; }

    /* --- Tabuľka --- */
    .mz-tablewrap { overflow:auto; max-height:calc(100vh - 32px); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-xs); }
    .mz-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.88rem; background:var(--surface); }
    .cg-meno { width:280px; } .cg-m { width:118px; } .cg-v { width:152px; } .cg-x { width:52px; }

    .mz-table thead th { position:sticky; top:0; z-index:3; text-align:left; font-size:.7rem; letter-spacing:.045em; text-transform:uppercase; color:var(--muted); padding:13px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; font-weight:600; }

    /* klikacie hlavičky na zoradenie */
    .mz-sort { display:inline-flex; align-items:center; gap:5px; cursor:pointer; user-select:none; color:inherit; }
    .mz-sort:hover { color:var(--brand); }
    .mz-sort .mz-arrow { font-size:.74rem; color:var(--faint); line-height:1; }
    .mz-sort:hover .mz-arrow { color:var(--brand); }
    .mz-sort.active { color:var(--brand); }
    .mz-sort.active .mz-arrow { color:var(--brand); }

    /* `background` je tu kvôli prilepenému stĺpcu s menom: priehľadná bunka
       by nechala popod seba presvitať čísla, ktoré pri bočnom scrolle
       prechádzajú pod ňou. Riadkové odtiene (paskova, cmt-missing, :hover)
       toto pravidlo prebíjajú nižšie v súbore — poradie je zámerné. */
    .mz-table tbody td { padding:11px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; background:var(--surface); }
    .mz-table tbody tr:last-child td { border-bottom:none; }
    .mz-table tbody tr:hover td { background:var(--brand-50); }
    .col-x { text-align:center; }

    /* --- Menná bunka: avatar + info --- */
    /* Prilepené meno. Tabuľka Prípravy má cez 2 100 px a na 1366 px monitore
       sa scrolluje do boku o vyše 1 000 px; bez toho manažér pri úprave
       sumy nevidí, čí riadok upravuje. To isté už robí Dochádzka
       (`.dz-table td:first-child`) aj Výpočet (`.vp-table .stick`). */
    .mz-table td.col-meno { position:sticky; left:0; z-index:2; padding-right:36px;
        border-right:1px solid var(--line-soft); }
    .mz-table thead th.col-meno { left:0; z-index:4; border-right:1px solid var(--line); }
    .z-person { display:flex; align-items:center; gap:11px; }
    .z-avatar { width:36px; height:36px; border-radius:50%; background:var(--brand-100); color:var(--brand-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.78rem; flex-shrink:0; }
    tr.paskova .z-avatar { background:var(--line); color:var(--muted); }
    .z-info { min-width:0; flex:1; }
    .z-meno { font-weight:600; display:flex; align-items:center; gap:6px; white-space:nowrap; }
    .z-note { position:absolute; top:9px; right:8px; }
    .z-note .cmt { margin:0; }
    .z-tag { font-size:.62rem; background:var(--warn-100); color:var(--warn-800); padding:2px 7px;
        border-radius:var(--r-pill); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
        white-space:nowrap; flex:0 0 auto; }
    .z-tag.kvota { background:var(--teal-100); color:var(--teal-800); cursor:help; }
    .z-tag.muted-tag { background:var(--line); color:var(--muted); }
    .z-tag.prenesene { background:var(--brand-100); color:var(--brand-ink); cursor:help; }
    .z-row2 { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:6px; min-width:0; }
    .z-osobne { width:120px; padding:5px 9px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:.76rem; color:var(--ink-soft); background:var(--surface-2); letter-spacing:.02em; text-overflow:ellipsis; }
    .z-osobne:focus { background:var(--surface); border-color:var(--brand); box-shadow:var(--ring); outline:none; }
    .z-paska { font-size:.76rem; color:var(--muted); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; cursor:pointer; }
    .z-paska input { appearance:none; -webkit-appearance:none; width:32px; height:18px; border-radius:var(--r-pill); background:var(--line); position:relative; cursor:pointer; transition:background .15s; flex-shrink:0; }
    .z-paska input::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-xs); transition:left .15s; }
    .z-paska input:checked { background:var(--brand); }
    .z-paska input:checked::after { left:16px; }

    /* --- Peňažná bunka: elegantné pole s € vnútri --- */
    .mcell { display:flex; align-items:center; gap:5px; }
    .mcell:has(.num) { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); height:36px; padding:0 9px; transition:border-color .12s, box-shadow .12s; }
    .mcell:has(.num):hover { border-color:var(--brand-200); }
    .mcell:has(.num):focus-within { border-color:var(--brand); box-shadow:var(--ring); }
    /* `width` je tu naschvál malé, hoci `flex:1` pole aj tak roztiahne na
       celú bunku. Bez neho si `<input type="number">` pýta svojich
       predvolených ~20 znakov (192 px) a o toľko si tabuľka nafúkne
       KAŽDÝ peňažný stĺpec — na QHD to nebolo vidieť, na 1920 px sa
       tým Príprava rozliezla o 500 px do boku. Na širokom monitore
       vyzerá všetko rovnako (stĺpce sa dopočítajú), na užšom sa
       tabuľka konečne zmestí. */
    .mcell .num { flex:1; min-width:0; width:7ch; border:none !important; background:transparent; box-shadow:none !important; outline:none !important; text-align:right; padding:0; font-size:.9rem; font-variant-numeric:tabular-nums; color:var(--ink); -moz-appearance:textfield; }
    .mcell .num::-webkit-outer-spin-button, .mcell .num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
    .mcell .num.locked { color:var(--faint); cursor:not-allowed; -webkit-text-fill-color:var(--faint); opacity:1; }
    .mcell .eur { color:var(--faint); font-size:.8rem; flex-shrink:0; }
    .mcell .nnum, .mcell .vnum { flex:1; text-align:right; font-variant-numeric:tabular-nums; }

    /* Na HD notebooku chýba Príprave posledných pár desiatok pixelov. Uberá
       sa len vzduch okolo čísla (rámček peňažného poľa, medzera pred €),
       samotné číslo ostáva rovnako veľké. */
    @media (min-width: 861px) and (max-width: 1400px) {
        .mcell:has(.num) { padding:0 6px; }
        .mcell { gap:4px; }
        .mz-table td.col-meno { padding-right:30px; }
    }

    /* výpočtové stĺpce (bez orámovania) */
    td[data-calc="nadcas"] .nnum { color:var(--ink-soft); }
    .mz-table td[data-calc="vyplata"] { background:var(--brand-50); }
    td[data-calc="vyplata"] .vnum { color:var(--brand-ink); font-weight:700; font-size:1rem; }
    td[data-calc="vyplata"] .eur { color:var(--faint); }
    .mz-table tbody tr:hover td[data-calc="vyplata"] { background:var(--brand-100); }

    /* pásková mzda — zošednutý riadok, chip, „na páske" */
    .chip-doplatky { display:none; font-size:.62rem; background:var(--line); color:var(--ink-soft); padding:2px 8px; border-radius:var(--r-pill); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
    tr.paskova .chip-doplatky { display:inline; }
    tr.paskova td { background:var(--surface-2); }
    .na-paske { display:none; flex:1; text-align:right; color:var(--faint); font-style:italic; font-size:.82rem; }
    tr.paskova .mz-mzda .num, tr.paskova .mz-mzda .eur { display:none; }
    tr.paskova .mz-mzda .mcell { border-style:dashed; background:var(--surface-2); }
    tr.paskova .mz-mzda .na-paske { display:inline; }
    tr.paskova td[data-calc="vyplata"] { background:var(--brand-50); }
    .paska-ic { display:none; color:var(--faint); cursor:help; }
    .paska-ic .ti { font-size:15px; }
    tr.paskova .paska-ic { display:inline-flex; align-items:center; }

    /* kvótový u zamestnávateľa — len odmena/nadčas do obálky (mzda zamknutá) */
    .z-tag.odmena { background:var(--warn-100); color:var(--warn-800); cursor:help; }
    .riesi-op { display:none; flex:1; text-align:right; color:var(--warn-700); font-style:italic; font-size:.82rem; white-space:nowrap; }
    tr.odmena-only .mz-mzda .num, tr.odmena-only .mz-mzda .eur, tr.odmena-only .mz-mzda .na-paske { display:none; }
    tr.odmena-only .mz-mzda .mcell { border-style:dashed; background:var(--warn-50); }
    tr.odmena-only .mz-mzda .riesi-op { display:inline; }
    tr.odmena-only .z-paska { opacity:.4; pointer-events:none; }
    tr.odmena-only td.col-meno { box-shadow: inset 3px 0 0 var(--warn-400); }
    .odmena-ic { display:none; color:var(--warn-600); cursor:help; }
    .odmena-ic .ti { font-size:15px; }
    tr.odmena-only .odmena-ic { display:inline-flex; align-items:center; }

    /* výpomoc z inej prevádzky — čisto hotovosť, bez väzieb */
    .z-tag.vypomoc { background:var(--success-line); color:var(--success-dark); cursor:help; }
    tr.vypomoc td.col-meno { box-shadow: inset 3px 0 0 var(--success); }
    tr.vypomoc .z-avatar { background:var(--success-line); color:var(--success-dark); }
    .mz-vyp-toggle { display:flex; align-items:center; gap:9px; margin:10px 0 2px; font-size:.84rem; color:var(--ink-soft); cursor:pointer; max-width:520px; }
    .mz-vyp-toggle .ti { font-size:16px; color:var(--success); }
    .mz-vyp-toggle input { appearance:none; -webkit-appearance:none; width:32px; height:18px; border-radius:var(--r-pill); background:var(--line); position:relative; cursor:pointer; transition:background .15s; flex-shrink:0; }
    .mz-vyp-toggle input::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-xs); transition:left .15s; }
    .mz-vyp-toggle input:checked { background:var(--success); }
    .mz-vyp-toggle input:checked::after { left:16px; }
    .ac-picker.vyp-on .ac-search { border-color:var(--success); box-shadow:0 0 0 3px var(--success-line); }

    @keyframes mzflash { 0% { background:var(--warn-200); } 100% { background:transparent; } }
    .mz-table td.flash { animation: mzflash .7s ease-out; }

    /* --- Ikonkové tlačidlá (dôvod / poznámka) --- */
    .cmt { position:relative; display:inline-flex; }
    .cmt-btn { border:none; background:transparent; cursor:pointer; line-height:1; padding:4px; border-radius:6px; color:var(--faint); display:inline-flex; align-items:center; justify-content:center; transition:color .12s, background .12s; }
    .cmt-btn .ti { font-size:16px; }
    .cmt-btn:hover { background:var(--line-soft); color:var(--ink-soft); }
    .cmt-btn.filled { color:var(--brand); }
    .cmt-btn.required { color:var(--warn-600); position:relative; }
    .cmt-btn.required::after { content:""; position:absolute; top:2px; right:2px; width:6px; height:6px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 2px var(--surface); }

    /* Riadok s chýbajúcim povinným dôvodom */
    tr.cmt-missing td { background:var(--warning-bg) !important; }
    tr.cmt-missing td[data-calc="vyplata"] { background:var(--warn-200) !important; }
    tr.cmt-missing td[data-calc="vyplata"] .vnum { color:var(--warn-800); }
    tr.cmt-missing td.col-meno { box-shadow: inset 3px 0 0 var(--warn-500); }

    .cmt-pop { position:fixed; z-index:50; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:10px; width:236px; text-align:left; }
    .cmt-pop textarea { width:100%; height:62px; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px; font-size:.82rem; resize:vertical; box-sizing:border-box; }
    .cmt-pop .cmt-close { margin-top:8px; }
    .note-pop { width:290px; }
    .note-pop textarea { height:84px; }

    .z-remove { border:none; background:transparent; color:var(--faint); cursor:pointer; padding:6px; border-radius:var(--r-sm); display:inline-flex; transition:color .12s, background .12s; }
    .z-remove .ti { font-size:17px; }
    .z-remove:hover { color:var(--danger-dark); background:var(--danger-bg); }

    /* --- Footer + akcie --- */
    .mz-table tfoot td { background:var(--surface-2); border-top:1px solid var(--line); padding:15px 12px; }
    .sum-label { text-align:right; font-weight:600; color:var(--ink-soft); }
    #sum-vyplata { font-weight:700; }
    .mz-actions { display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }

    /* --- Filter lišta (hľadanie + chipy + kompaktný režim) --- */
    .mz-filterbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:9px 12px; margin:8px 0 12px; box-shadow:var(--shadow-xs); }
    .mzf-search { position:relative; display:flex; align-items:center; flex:1; min-width:220px; max-width:360px; }
    .mzf-search > .ti { position:absolute; left:10px; color:var(--faint); font-size:16px; pointer-events:none; }
    .mzf-search input { width:100%; padding:8px 30px 8px 32px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:.88rem; }
    .mzf-search input:focus { border-color:var(--brand); box-shadow:var(--ring); outline:none; }
    .mzf-clear { position:absolute; right:6px; border:none; background:transparent; color:var(--faint); cursor:pointer; font-size:18px; line-height:1; padding:2px 7px; border-radius:var(--r-sm); }
    .mzf-clear:hover { color:var(--ink-soft); background:var(--line-soft); }
    .mzf-chips { display:flex; gap:6px; }
    .mzf-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); padding:6px 12px; border-radius:var(--r-pill); font-size:.8rem; font-weight:600; cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
    .mzf-chip .ti { font-size:14px; }
    .mzf-chip:hover { border-color:var(--brand-200); }
    .mzf-chip.active { background:var(--brand); border-color:var(--brand); color:var(--brand-ink-on); }
    .mzf-compact { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:var(--muted); cursor:pointer; white-space:nowrap; }
    .mzf-compact input { appearance:none; -webkit-appearance:none; width:32px; height:18px; border-radius:var(--r-pill); background:var(--line); position:relative; cursor:pointer; transition:background .15s; flex-shrink:0; }
    .mzf-compact input::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-xs); transition:left .15s; }
    .mzf-compact input:checked { background:var(--brand); }
    .mzf-compact input:checked::after { left:16px; }
    .mzf-count { margin-left:auto; font-size:.8rem; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap; }

    .mz-table tr.mz-filtered-out { display:none; }

    /* --- Kompaktný režim: nižšie riadky, druhý riadok (os. číslo/páska) až pri hoveri/fokuse --- */
    /* výšku a padding riadi token --row-h/--cell-x; tu ostáva len to,
       čo je špecifické pre Prípravu (druhý riadok informácií). */
    /* Druhý riadok (osobné číslo, štítky) je skrytý VŽDY a vyjde pri hoveri
       alebo fokuse riadka — inak by mal riadok tri riadky textu a na
       obrazovku sa zmestí polovica ľudí. */
    .mz-table .z-row2 { display:none; }
    .mz-table tbody tr:hover .z-row2,
    .mz-table tbody tr:focus-within .z-row2 { display:flex; margin-top:5px; }
    /* Kompaktná hustota uberá už len z avatara a výšky peňažných polí. */
    :root[data-density="compact"] .mz-table .z-person { gap:9px; }
    :root[data-density="compact"] .mz-table .z-avatar { width:26px; height:26px; font-size:.68rem; }
    :root[data-density="compact"] .mz-table .mcell:has(.num) { height:30px; }

/* ==========================================================================
   templates/mzdy/reporting.html
   ========================================================================== */

.rep-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.rep h1 { font-size:1.55rem; margin:0 0 4px; letter-spacing:-.02em; }
.rep-sub { color:var(--muted); margin:0 0 20px; font-size:.95rem; }
.rep-exports { display:flex; gap:8px; }
.rep-exp { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:9px; padding:8px 14px; font-size:.86rem; font-weight:600; text-decoration:none; box-shadow:var(--shadow-xs); }
.rep-exp:hover { border-color:var(--brand); color:var(--brand); }
.rep-exp .ti { font-size:16px; }
.rep-fakt-intro { font-size:.86rem; margin:-4px 0 12px; }
.rep-table tfoot td { border-top:2px solid var(--line); padding:9px 12px; }
.rep-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:18px; }
.rep-firma { display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; box-shadow:var(--shadow-xs); }
.rep-pill { border:0; background:transparent; color:var(--ink-soft); font-weight:600; font-size:.88rem; padding:7px 16px; border-radius:var(--r-pill); cursor:pointer; }
.rep-pill.is-on { background:var(--brand); color:var(--brand-ink-on); box-shadow:var(--shadow-xs); }
.rep-month { display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:6px 12px; color:var(--muted); }
.rep-month select { border:0; background:transparent; font-weight:600; color:var(--ink); font-size:.9rem; padding:0; }
.rep-firstnote { display:flex; gap:9px; align-items:center; background:var(--info-bg); border:1px solid var(--info-line); border-radius:var(--r-lg); padding:11px 15px; font-size:.9rem; color:var(--ink-soft); margin-bottom:18px; }
.rep-firstnote .ti { font-size:18px; color:var(--muted); }

/* Záložky modulu */
.rep-tabs { display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:18px; }
.rep-tab { border:0; background:transparent; cursor:pointer; font-family:inherit; font-size:.89rem; font-weight:600;
  color:var(--muted); padding:11px 15px; border-bottom:2px solid transparent; margin-bottom:-1px;
  display:inline-flex; align-items:center; gap:7px; border-radius:8px 8px 0 0; white-space:nowrap; }
.rep-tab .ti { font-size:17px; color:var(--faint); }
.rep-tab:hover { color:var(--ink); background:var(--surface-2); }
.rep-tab:hover .ti { color:var(--muted); }
.rep-tab.is-on { color:var(--brand-ink); border-bottom-color:var(--brand); background:transparent; }
.rep-tab.is-on .ti { color:var(--brand); }
.rep-tab:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.rep-paneintro { display:flex; gap:9px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--brand); border-radius:var(--r-lg); padding:11px 15px; font-size:.88rem;
  color:var(--ink-soft); line-height:1.55; margin:0 0 20px; }
.rep-paneintro .ti { font-size:18px; color:var(--muted); flex:0 0 auto; margin-top:1px; }
.rep-paneintro em { font-style:normal; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:2px; }
.rep-noconsol { display:flex; gap:8px; align-items:flex-start; font-size:.86rem; margin:0; }
@media (max-width:720px){ .rep-tabs { gap:0; } .rep-tab { padding:10px 11px; font-size:.82rem; } .rep-tab .ti { display:none; } }

.rep-kpi { margin-bottom:22px; }
.rep-eur { font-size:1rem; font-weight:600; color:var(--faint); }
.stat-card.rep-teal { background:var(--teal-50); border-color:var(--teal-200); }
.stat-card.rep-teal .stat-value { color:var(--teal-800); }
.stat-card.rep-teal .stat-top { color:var(--teal-700); }
.stat-card.rep-warn { background:var(--warn-50); border-color:var(--warn-200); }
.stat-card.rep-warn .stat-value { color:var(--warn-700); }
.stat-card.rep-warn .stat-top { color:var(--warn-600); }
.rep-delta { font-weight:700; font-size:.8rem; display:inline-flex; align-items:center; gap:3px; }
.rep-delta .ti { font-size:14px; }
.rep-up { color:var(--warn-600); }
.rep-down { color:var(--teal-700); }
.rep-flat { color:var(--faint); }
.rep-vs { color:var(--faint); font-size:.76rem; margin-left:6px; }

.rep-mixbar { display:flex; height:22px; border-radius:8px; overflow:hidden; margin-bottom:16px; box-shadow:inset 0 0 0 1px var(--line-soft); }
.rep-seg { display:block; height:100%; }
.rep-legend { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rep-legend li { display:flex; align-items:center; gap:9px; font-size:.9rem; }
.rep-dot { width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.rep-lg-l { color:var(--ink-soft); }
.rep-lg-v { margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }
.rep-lg-p { color:var(--faint); width:44px; text-align:right; font-variant-numeric:tabular-nums; }
.rep-legend-row { flex-direction:row; gap:18px; margin-top:12px; }
.rep-legend-row li { font-size:.8rem; color:var(--muted); }

.rep-chart { width:100%; height:250px; }
.rep-bar-total { font-size:11px; font-weight:700; fill:var(--ink-soft); font-family:inherit; }
.rep-bar-lbl { font-size:12px; fill:var(--muted); font-family:inherit; text-transform:uppercase; letter-spacing:.04em; }
.rep-trend-hint { font-size:.82rem; margin:-4px 0 10px; }
.rep-trend, .rep-mix, .rep-fakt, .rep-ctrl { margin-bottom:18px; }

.rep-cp-note { display:flex; gap:8px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:11px 15px; font-size:.86rem; color:var(--ink-soft); line-height:1.5; margin:-6px 0 22px; }
.rep-cp-note .ti { font-size:17px; color:var(--muted); flex:0 0 auto; margin-top:1px; }
.rep-kvbadge { font-size:.66rem; font-weight:700; color:var(--teal-800); background:var(--teal-50); border:1px solid var(--teal-200); border-radius:999px; padding:1px 6px; margin-left:4px; }

.rep-tablehead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.rep-tablehead h2 { margin:0; }
.rep-searchbox { border:1px solid var(--line); border-radius:9px; padding:7px 12px; font-size:.88rem; min-width:200px; }
.rep-tablewrap { overflow-x:auto; }
.rep-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.rep-table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:8px 12px; border-bottom:2px solid var(--line); cursor:pointer; white-space:nowrap; user-select:none; }
.rep-table th.n, .rep-table td.n { text-align:right; font-variant-numeric:tabular-nums; }
.rep-table td { padding:9px 12px; border-bottom:1px solid var(--line-soft); }
.rep-table tbody tr:hover { background:var(--cream-tint); }
.rep-table td.strong { font-weight:700; }
.rep-strkod { font-weight:700; }
.rep-strnazov { color:var(--faint); font-size:.82rem; margin-left:4px; }
/* Korekčné stĺpce labor cost: von = odpočet (jantár), sem = prípočet (tyrkys) */
.rep-th-out { color:var(--warn-600) !important; }
.rep-th-in { color:var(--teal-700) !important; }
.rep-cell-out { color:var(--warn-700); font-weight:600; }
.rep-cell-in { color:var(--teal-800); font-weight:600; }
.rep-th-lc { color:var(--brand-ink) !important; }
/* Meno v Kontrole podkladov = preklik do Výpočtu miezd na toho človeka.
   Šípka je viditeľná až pri nájazde, aby tabuľka pôsobila pokojne. */
.rep-osoba { color:inherit; text-decoration:none; border-bottom:1px dashed var(--line); display:inline-flex; align-items:center; gap:5px; }
.rep-osoba:hover { color:var(--brand); border-bottom-color:var(--brand); }
.rep-osoba .ti { font-size:14px; color:var(--faint); opacity:0; transition:opacity .12s; }
.rep-osoba:hover .ti { opacity:1; color:var(--brand); }
.rep-akcia { text-align:right; white-space:nowrap; width:1%; }
.rep-akcia form { display:inline-flex; gap:5px; }
.rep-btn { border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  border-radius:8px; padding:4px 10px; font-size:.76rem; font-weight:600; font-family:inherit; cursor:pointer; }
.rep-btn:hover { border-color:var(--brand); color:var(--brand); }
.rep-btn-perm { color:var(--faint); }
.rep-btn-done { border-color:var(--success-line); background:var(--success-bg); color:var(--success); }
.rep-hotovy td { opacity:.5; }
.rep-hotovy td.rep-akcia { opacity:1; }
.rep-tabbadge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; border-radius:999px; background:var(--fill-warn); color:var(--fill-ink); font-size:.68rem; font-weight:800; }
.rep-ok { background:var(--success-bg); border-color:var(--success-line); margin-bottom:18px; }
.rep-ok-h { display:flex; align-items:center; gap:9px; font-weight:700; color:var(--success); font-size:1rem; }
.rep-ok-h .ti { font-size:20px; }
.rep-ok p { margin:7px 0 0; font-size:.88rem; color:var(--ink-soft); }
.rep-lc { color:var(--brand-ink); }
.rep-lcbox { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; background:var(--cream-tint);
  border:1px solid var(--brand-200); border-left:3px solid var(--brand); border-radius:var(--r-lg);
  padding:13px 17px; margin:-6px 0 18px; }
.rep-lcbox-l { font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:7px; }
.rep-lcbox-l .ti { font-size:16px; color:var(--brand); }
.rep-lcbox-v { font-size:1.6rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--brand-ink); }
.rep-lcbox-s { font-size:.82rem; color:var(--ink-soft); margin-left:auto; }

.rep-ctrl .chips { margin-bottom:8px; }
.rep-ctrl-note { font-size:.8rem; margin:0; }

/* Odvody a mzdové náklady celej firmy */
.rep-odv { margin-bottom:22px; }
.rep-odv-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.rep-odv-head h2 { margin:0; }
.rep-odv-src { font-size:.78rem; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.rep-odv-src .ti { font-size:15px; color:var(--faint); }
.rep-odv-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:14px; }
.rep-odv-tile { border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; background:var(--surface-2); }
.rep-odv-tile.is-hero { background:var(--cream-tint); border-color:var(--brand-line,var(--line)); }
.rep-odv-l { font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; margin-bottom:6px; }
.rep-odv-hint { text-transform:none; letter-spacing:0; color:var(--faint); font-weight:500; }
.rep-odv-v { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.rep-odv-tile.is-hero .rep-odv-v { color:var(--brand-ink,var(--brand)); }
.rep-odv-split { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:.8rem; color:var(--ink-soft); }
.rep-odv-split b { color:var(--muted); font-weight:600; }
.rep-odv-d { margin-top:8px; font-size:.78rem; }
.rep-odv-note { display:flex; gap:8px; align-items:flex-start; font-size:.82rem; line-height:1.5; margin:0 0 14px; }
.rep-odv-note .ti { font-size:16px; color:var(--faint); flex:0 0 auto; margin-top:1px; }
/* Súčtový riadok v pätičke tabuľky (podklad k faktúre) */
.rep-table tfoot tr.rep-sucet td { border-top:2px solid var(--line); background:var(--surface-2);
  font-variant-numeric:tabular-nums; padding-top:10px; }
.rep-table tfoot tr.rep-sucet td:last-child { color:var(--brand-ink,var(--brand)); }

/* Čo odchádza na úrady (Sociálna / Zdravotná / daň) + kontrolná identita */
.rep-urady { border-top:1px solid var(--line); padding-top:16px; margin-bottom:14px; }
.rep-urady .rep-odv-head h3 { margin:0; font-size:1.02rem; }
.rep-urady-kontrola { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-2); padding:10px 16px; margin-bottom:14px; max-width:560px; }
.rep-urady-kontrola.is-nesedi { border-color:var(--warn-300,var(--warn-200)); background:var(--warn-50); }
.rep-uk-r { display:flex; justify-content:space-between; gap:16px; padding:5px 0; font-size:.88rem; }
.rep-uk-r + .rep-uk-r { border-top:1px dashed var(--line); }
.rep-uk-l { color:var(--ink-soft); }
.rep-uk-v { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.rep-uk-r.is-total { border-top:1px solid var(--line); font-weight:700; }
.rep-uk-r.is-total .rep-uk-l, .rep-uk-r.is-total .rep-uk-v { color:var(--brand-ink,var(--brand)); }
.rep-uk-r.is-diff .rep-uk-l, .rep-uk-r.is-diff .rep-uk-v { color:var(--warn-700); font-weight:700; }
.rep-uk-r.is-diff .ti { font-size:15px; vertical-align:-2px; margin-right:4px; }

/* Anomálie odvodov (koeficient mimo pásma) */
.rep-odv-warn { border:1px solid var(--warn-300,var(--warn-200)); background:var(--warn-50,var(--warn-50)); border-radius:var(--r-lg); padding:14px 16px; margin:4px 0 4px; }
.rep-odv-warn-h { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--warn-700,var(--warn-700)); font-size:.95rem; }
.rep-odv-warn-h .ti { font-size:18px; }
.rep-odv-warn-sub { font-size:.82rem; color:var(--ink-soft); margin:6px 0 10px; }
.rep-warn-tbl th { border-bottom-color:var(--warn-300,var(--warn-200)); }
.rep-koef-low { color:var(--accent,var(--danger)); }
.rep-koef-high { color:var(--warn-700,var(--warn-700)); }

/* Labor cost po strediskách (interaktívny výber + graf) */
.rep-labor { margin-bottom:22px; }
.rep-labor-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.rep-labor-head h2 { margin:0 0 4px; }
.rep-labor-sub { color:var(--muted); font-size:.88rem; margin:0; max-width:62ch; line-height:1.5; }
.rep-labor-modes { display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; box-shadow:var(--shadow-xs); flex:0 0 auto; }
.rep-lmode { border:0; background:transparent; color:var(--ink-soft); font-weight:600; font-size:.84rem; padding:7px 14px; border-radius:var(--r-pill); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.rep-lmode .ti { font-size:15px; }
.rep-lmode.is-on { background:var(--brand); color:var(--brand-ink-on); box-shadow:var(--shadow-xs); }
/* Vysvetlenie prepočtu kvótových */
.rep-kvnote { border:1px solid var(--teal-200); background:var(--teal-50); border-radius:var(--r-lg); padding:12px 15px; margin:14px 0 4px; }
.rep-kvnote-h { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--teal-800); font-size:.9rem; }
.rep-kvnote-h .ti { font-size:17px; }
.rep-kvnote p { font-size:.83rem; color:var(--ink-soft); margin:6px 0 0; line-height:1.55; }
.rep-labor-hint { font-size:.8rem; color:var(--faint); margin:12px 0 10px; }
.rep-labor-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.rep-lchip { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); border-radius:var(--r-pill); padding:5px 12px 5px 9px; cursor:pointer; font-size:.82rem; color:var(--ink-soft); transition:border-color .12s, background .12s; }
.rep-lchip:hover { border-color:var(--char-300); }
.rep-lchip-dot { width:10px; height:10px; border-radius:3px; background:var(--c,var(--faint)); flex:0 0 auto; opacity:.35; transition:opacity .12s; }
.rep-lchip-kod { font-weight:700; }
.rep-lchip-v { color:var(--faint); font-variant-numeric:tabular-nums; }
.rep-lchip.is-on { border-color:var(--c,var(--brand)); background:color-mix(in srgb, var(--c,var(--brand)) 8%, var(--surface)); color:var(--ink); box-shadow:inset 0 0 0 1px var(--c,var(--brand)); }
.rep-lchip.is-on .rep-lchip-dot { opacity:1; }
.rep-labor-kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.rep-labor-kpi:empty { display:none; }
.rep-lk { border:1px solid var(--line); border-radius:var(--r-lg); padding:13px 15px; background:var(--surface-2); }
.rep-lk.is-hero { background:var(--cream-tint); border-color:var(--brand-200); }
.rep-lk-l { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.rep-lk-l .rep-lk-sw { width:9px; height:9px; border-radius:2px; flex:0 0 auto; }
.rep-lk-v { font-size:1.42rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.rep-lk.is-hero .rep-lk-v { color:var(--brand-ink); }
.rep-lk-d { margin-top:6px; font-size:.76rem; }
.rep-lk-korekcia { margin-top:6px; font-size:.74rem; display:flex; flex-direction:column; gap:2px; }
.rep-lk-korekcia .k-out { color:var(--warn-700); font-weight:600; }
.rep-lk-korekcia .k-in { color:var(--teal-800); font-weight:600; }
.rep-labor-chartwrap { position:relative; }
.rep-labor-chart svg { width:100%; height:auto; display:block; }
.rep-lgrid { stroke:var(--line-soft); stroke-width:1; }
.rep-laxis { stroke:var(--line); stroke-width:1; }
.rep-lylbl { font-size:10px; fill:var(--faint); font-family:inherit; }
.rep-lxlbl { font-size:11px; fill:var(--muted); font-family:inherit; text-transform:uppercase; letter-spacing:.04em; }
.rep-lvlbl { font-size:10px; font-weight:700; fill:var(--ink-soft); font-family:inherit; }
.rep-lhit { fill:transparent; cursor:pointer; }
.rep-lhit:hover { fill:color-mix(in srgb, var(--char-900) 4%, transparent); }
.rep-lline { fill:none; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.rep-ldot { stroke:var(--surface); stroke-width:1.5; }
/* Tooltip grafu — rovnaká plocha ako .chart-tip zo systému, aby fungoval
   v oboch témach (tmavá bublina na tmavej stránke sa strácala). */
.rep-labor-tip { position:absolute; z-index:5; pointer-events:none; background:var(--raised); color:var(--ink);
    border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:9px 11px; font-size:.78rem;
    line-height:1.5; box-shadow:var(--shadow); transform:translate(-50%,-112%); white-space:nowrap; min-width:120px; }
.rep-labor-tip .rt-m { font-weight:700; margin-bottom:4px; color:var(--ink); }
.rep-labor-tip .rt-row { display:flex; align-items:center; gap:7px; justify-content:space-between; }
.rep-labor-tip .rt-row .rt-l { display:flex; align-items:center; gap:6px; color:var(--muted); }
.rep-labor-tip .rt-sub .rt-l { padding-left:15px; font-size:.94em; color:var(--faint); }
.rep-labor-tip .rt-sw { width:9px; height:9px; border-radius:2px; flex:0 0 auto; }
.rep-labor-tip .rt-v { font-variant-numeric:tabular-nums; font-weight:700; }
.rep-labor-tip .rt-tot { border-top:1px solid var(--line); margin-top:5px; padding-top:5px; }
.rep-labor-legend { margin:10px 0 4px; flex-wrap:wrap; }
.rep-labor-legend .rep-dot { opacity:1; }
.rep-labor-tblhead { margin-top:20px; }
.rep-labor-tblhead h3 { margin:0; font-size:1rem; }
.rep-labor-tbl-hi { background:color-mix(in srgb, var(--teal-700) 8%, transparent) !important; }
.rep-labor-note { display:flex; gap:8px; align-items:flex-start; font-size:.8rem; line-height:1.5; margin:12px 0 0; }
.rep-labor-note .ti { font-size:16px; color:var(--faint); flex:0 0 auto; margin-top:1px; }
.rep-labor-note .rep-up, .rep-labor-note .rep-down { font-weight:700; }

/* Konsolidovaný reálny náklad na ľudí (naprieč firmami) */
.rep-konsol { margin-bottom:18px; background:var(--cream-tint); border-color:var(--brand-line,var(--line)); }
.rep-konsol-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.rep-konsol-head h2 { margin:0; }
.rep-konsol-tag { font-size:.78rem; color:var(--teal-800); background:var(--teal-50); border:1px solid var(--teal-200); border-radius:999px; padding:3px 10px; display:inline-flex; align-items:center; gap:6px; }
.rep-konsol-tag .ti { font-size:15px; }
.rep-konsol-flow { display:flex; align-items:stretch; flex-wrap:wrap; gap:10px; }
.rep-konsol-op { flex:1 1 190px; border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; background:var(--surface); }
.rep-konsol-op.is-in { border-color:var(--teal-200); background:var(--teal-50); }
.rep-konsol-op.is-out { border-color:var(--warn-200); background:var(--warn-50); }
.rep-konsol-op.is-result { border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 1px var(--brand) inset; }
.rep-konsol-l { font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; margin-bottom:6px; }
.rep-konsol-firm { display:block; text-transform:none; letter-spacing:0; font-weight:600; color:var(--ink-soft); margin-top:2px; }
.rep-konsol-v { font-size:1.55rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.rep-konsol-op.is-result .rep-konsol-v { color:var(--brand-ink,var(--brand)); }
.rep-konsol-op.is-in .rep-konsol-v { color:var(--teal-800); }
.rep-konsol-op.is-out .rep-konsol-v { color:var(--warn-700); }
.rep-konsol-s { font-size:.78rem; color:var(--faint); margin-top:6px; line-height:1.4; }
.rep-konsol-sign { display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:1.6rem; font-weight:800; color:var(--faint); align-self:center; }
.rep-konsol-sign.is-plus { color:var(--teal-700); }
.rep-konsol-sign.is-minus { color:var(--warn-600); }
.rep-konsol-sign.is-eq { color:var(--brand); }
.rep-konsol-note { display:flex; gap:8px; align-items:flex-start; font-size:.82rem; line-height:1.55; color:var(--ink-soft); margin:16px 0 0; }
.rep-konsol-note .ti { font-size:16px; color:var(--faint); flex:0 0 auto; margin-top:1px; }
@media (max-width:760px){ .rep-konsol-flow { flex-direction:column; } .rep-konsol-sign { align-self:flex-start; padding:2px 0; } }

/* ==========================================================================
   templates/mzdy/schvalovanie.html
   ========================================================================== */

    .sv-page h1 { margin:0 0 4px; }
    .sv-head { margin-bottom:14px; }
    .sv-head .muted { max-width:860px; }
    .sv-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
    .mz-month { display:flex; align-items:center; gap:10px; }
    .mz-month-label { min-width:130px; text-align:center; }

    .sv-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin-bottom:16px; }
    .sv-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; display:flex; flex-direction:column; gap:2px; }
    .sv-card.hot { border-color:var(--warn-500); background:var(--warn-50); }
    .svc-k { font-size:.78rem; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
    .svc-v { font-size:1.35rem; font-weight:700; line-height:1.1; }
    .svc-sub { font-size:.72rem; color:var(--faint); }

    .sv-bulkbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
    .sv-selall { display:flex; align-items:center; gap:7px; font-size:.88rem; color:var(--ink-soft); cursor:pointer; }
    .sv-bulkbtn[disabled] { opacity:.5; cursor:not-allowed; }
    .sv-hint { font-size:.82rem; color:var(--ink-soft); }

    .sv-tablewrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); }
    .sv-table { width:100%; border-collapse:collapse; font-size:.88rem; min-width:980px; }
    .sv-table th, .sv-table td { padding:9px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
    .sv-table thead th { font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); background:var(--surface-2); white-space:nowrap; }
    .sv-table tbody tr:last-child td { border-bottom:none; }
    .sv-table .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
    .sv-table .num.warn { color:var(--danger-dark); }
    .sv-table .num.strong { font-weight:700; }
    .sv-table .chk { width:30px; text-align:center; }
    .sv-table td.kod a { font-weight:700; text-decoration:none; color:var(--ink); }
    .sv-table td.kod a:hover { text-decoration:underline; }
    .sv-naz { display:block; font-size:.74rem; color:var(--faint); }
    .sv-table tr.st-schvalena td, .sv-table tr.st-neodoslana td { color:var(--ink-soft); }
    .sv-table tr.st-schvalena .num.strong { color:var(--ink); }

    .sv-pill { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; font-size:.76rem; font-weight:600; white-space:nowrap; }
    .sv-pill .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
    .sv-pill.caka { background:var(--warn-50); color:var(--warn-800); border:1px solid var(--warning-line); }
    .sv-pill.ok { background:var(--teal-50); color:var(--teal-800); border:1px solid var(--teal-100); }
    .sv-pill.rej { background:var(--danger-bg); color:var(--danger-dark); border:1px solid var(--danger-line); }
    .sv-pill.draft { background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); }
    .sv-meta { display:block; font-size:.72rem; color:var(--faint); margin-top:3px; white-space:nowrap; }
    .sv-meta.own { color:var(--warn-800); font-weight:600; }

    .sv-table td.akcie { white-space:nowrap; }
    .sv-btn { display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); padding:5px 10px; font-size:.8rem; font-weight:600; cursor:pointer; text-decoration:none; color:var(--ink); }
    .sv-btn.ok { background:var(--brand); color:var(--brand-ink-on); border-color:var(--brand); }
    .sv-btn.ok:hover { opacity:.9; }
    .sv-btn.rej { color:var(--danger-dark); border-color:var(--danger-line); }
    .sv-btn.rej:hover { background:var(--danger-bg); }
    .sv-btn.ghost { color:var(--ink-soft); }
    .sv-btn.ghost:hover { background:var(--surface-2); }
    .hidden-form { display:none; }
    .sv-empty { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:18px; color:var(--ink-soft); }

/* ==========================================================================
   templates/mzdy/vypocet.html
   ========================================================================== */

    .vp-page h1 { margin:0 0 2px; font-size:1.5rem; }
    .mz-head { margin-bottom:6px; }
    .mz-lock { display:flex; align-items:center; gap:9px; background:var(--warn-50); border:1px solid var(--warn-200); color:var(--warn-800); padding:11px 15px; border-radius:var(--r); margin:6px 0 14px; font-size:.9rem; }
    .mz-lock .ti { font-size:18px; }
    .mz-lock.ro { background:var(--danger-bg); border-color:var(--danger-line); color:var(--danger-dark); }

    /* toolbar */
    .mz-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:18px 0; }
    .mz-selectors label { font-size:.82rem; color:var(--muted); display:inline-flex; align-items:center; gap:8px; }
    .mz-selectors select { padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:.9rem; font-weight:500; }
    .mz-month { display:flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; box-shadow:var(--shadow-xs); }
    .mz-month .btn-ghost { border:none; padding:6px 12px; border-radius:var(--r-pill); background:transparent; }
    .mz-month .btn-ghost:hover { background:var(--line-soft); }
    .mz-month-label { min-width:120px; text-align:center; font-weight:600; font-size:.92rem; }
    .mz-export { margin-left:auto; }
    .small { font-size:.82rem; }

    /* upload / stavy */
    .vp-upload { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:16px; }
    .vp-upform { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    .vp-file { display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--ink-soft); font-weight:500; }
    .vp-file .ti { font-size:18px; color:var(--muted); }
    .vp-file input[type=file] { font-size:.82rem; }

    .vp-empty { background:var(--info-bg); border:1px solid var(--info-line); color:var(--ink-soft); padding:16px 18px; border-radius:var(--r-lg); }

    .vp-uploaded { background:var(--success-bg); border:1px solid var(--success-line); border-radius:var(--r-lg); padding:12px 16px; margin-bottom:16px; }
    .vp-up-status { color:var(--success-dark); font-size:.9rem; display:flex; align-items:center; gap:8px; }
    .vp-up-status .ti { font-size:17px; }
    .vp-reupload { margin-top:8px; }
    .vp-reupload summary { cursor:pointer; color:var(--brand-dark); font-size:.84rem; font-weight:500; }
    .vp-reupload .vp-upform { margin-top:10px; }

    .vp-stav { border-radius:var(--r-lg); padding:14px 18px; margin-bottom:16px; font-size:.9rem; border:1px solid transparent; }
    .vp-stav.pending { background:var(--warning-bg); border-color:var(--warning-line); color:var(--warn-800); }
    .vp-stav.ok { background:var(--success-bg); border-color:var(--success-line); color:var(--success-dark); font-weight:500; display:flex; align-items:center; gap:8px; }
    .vp-stav.none { background:var(--surface-2); border-color:var(--line); color:var(--ink-soft); }
    .vp-stav-h { font-size:1rem; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
    .vp-kontrola { border-radius:var(--r-lg); padding:12px 16px; margin-bottom:16px; border:1px solid var(--line); background:var(--surface-2); font-size:.9rem; }
    .vp-kontrola.warn { background:var(--warning-bg); border-color:var(--warning-line); }
    .vp-kontrola-h { font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    .vp-kontrola-sum { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
    .vp-chip { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.8rem; border:1px solid var(--line); background:var(--surface); }
    .vp-chip.plus { color:var(--success-dark); border-color:var(--success-line); }
    .vp-chip.minus { color:var(--warn-800); border-color:var(--warning-line); }
    .vp-chip.zero { color:var(--ink-soft); }
    .vp-kontrola-bad { margin-top:8px; color:var(--warn-800); }
    .vp-kontrola-bad ul { margin:6px 0 0; padding-left:18px; }
    .vp-kontrola-bad code { background:var(--surface); padding:1px 5px; border-radius:4px; border:1px solid var(--warning-line); }
    .vp-kontrola-ok { margin-top:6px; color:var(--success-dark); display:flex; align-items:center; gap:6px; }
    .vp-pn-note { margin:0 0 8px; font-size:.85rem; color:var(--muted); }
    .vp-np { color:var(--success-dark); font-weight:600; }
    .vp-protokol { border:1px solid var(--line); border-radius:var(--r-lg); padding:8px 14px; margin-bottom:16px; background:var(--surface-2); font-size:.9rem; }
    .vp-protokol > summary { cursor:pointer; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .vp-protokol > summary .muted { font-weight:400; }
    .vp-protokol-list { margin:10px 0 4px; padding-left:2px; list-style:none; display:flex; flex-direction:column; gap:5px; }
    .vp-protokol-list li { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .vp-protokol-list code { background:var(--surface); padding:1px 5px; border-radius:4px; border:1px solid var(--warning-line); }
    .vp-ptag { display:inline-block; padding:1px 8px; border-radius:999px; font-size:.75rem; font-weight:600; border:1px solid var(--line); background:var(--surface); white-space:nowrap; }
    .vp-ptag.merge { color:var(--brand-dark); border-color:var(--brand-200); }
    .vp-ptag.skip { color:var(--ink-soft); }
    .vp-ptag.warn { color:var(--warn-800); border-color:var(--warning-line); }
    .vp-stav p { margin:4px 0 10px; }
    .vp-chips { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
    .vp-chip { display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--warning-line);
               border-radius:var(--r-pill); padding:5px 7px 5px 13px; font-weight:500; font-size:.84rem; }
    .vp-chip .vp-cnt { background:var(--fill-warn); color:var(--fill-ink); border-radius:var(--r-pill); padding:1px 8px; font-size:.74rem; font-weight:700; min-width:20px; text-align:center; }
    a.vp-chip { text-decoration:none; color:inherit; cursor:pointer; transition:box-shadow .15s, transform .15s, border-color .15s; }
    a.vp-chip:hover { border-color:var(--warn-500); box-shadow:var(--shadow-xs); transform:translateY(-1px); }
    .vp-chip-go { font-size:14px; color:var(--warn-700); opacity:.5; margin-left:-3px; transition:opacity .15s, transform .15s; }
    .vp-rej { display:inline-flex; align-items:center; gap:3px; color:var(--danger-dark); font-size:.74rem; font-weight:600; }
    .vp-rej .ti { font-size:13px; }
    a.vp-chip:hover .vp-chip-go { opacity:1; transform:translateX(2px); }

    /* Odoslané prípravy — pekné kartičky s časom uzávierky */
    .vp-odo { background:linear-gradient(180deg,var(--success-bg),var(--surface) 78%); border:1px solid var(--success-line);
              border-radius:var(--r-lg); padding:14px 16px; margin-bottom:16px; box-shadow:var(--shadow-xs); }
    .vp-odo-h { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
                font-size:1rem; font-weight:700; color:var(--success-dark); margin-bottom:12px; }
    .vp-odo-h > span:first-child { display:flex; align-items:center; gap:8px; }
    .vp-odo-h .ti { font-size:19px; }
    .vp-odo-hint { font-size:.76rem; font-weight:600; color:var(--success-dark); background:var(--surface);
                   border:1px solid var(--success-line); border-radius:var(--r-pill); padding:3px 11px; }
    .vp-odo-hint.all { background:var(--fill-ok); color:var(--fill-ink); border-color:var(--success-dark); }
    .vp-odo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:10px; }
    .vp-odo-card { text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--success-line); border-radius:var(--r);
                   padding:10px 12px; display:flex; flex-direction:column; gap:5px; position:relative; overflow:hidden; cursor:pointer;
                   transition:box-shadow .15s, transform .15s, border-color .15s; }
    .vp-odo-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--success-dark); }
    .vp-odo-card:hover { box-shadow:var(--shadow-sm); transform:translateY(-1px); border-color:var(--success-dark); }
    .vp-odo-go { display:flex; align-items:center; gap:5px; margin-top:3px; font-size:.7rem; font-weight:700;
                 color:var(--success-dark); opacity:.5; transition:opacity .15s, transform .15s; }
    .vp-odo-go .ti { font-size:14px; }
    .vp-odo-card:hover .vp-odo-go { opacity:1; transform:translateX(2px); }
    .vp-odo-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .vp-odo-kod { font-weight:800; font-size:.98rem; color:var(--ink); letter-spacing:.01em; }
    .vp-odo-cnt { background:var(--success-bg); color:var(--success-dark); border-radius:var(--r-pill);
                  padding:1px 9px; font-size:.74rem; font-weight:700; min-width:22px; text-align:center; }
    .vp-odo-naz { font-size:.78rem; color:var(--muted); line-height:1.25; margin-top:-1px; }
    .vp-odo-time { display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--success-dark);
                   font-weight:600; font-variant-numeric:tabular-nums; margin-top:1px; }
    .vp-odo-time .ti { font-size:15px; }
    .vp-odo-kto { display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--faint); }
    .vp-odo-kto .ti { font-size:13px; }

    /* prehľadové karty */
    .vp-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; margin:6px 0 18px; }
    .vp-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; display:flex; flex-direction:column; gap:3px; box-shadow:var(--shadow-xs); }
    .vp-card .vp-k { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
    .vp-card .vp-v { font-size:1.4rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
    .vp-card .vp-sub { font-size:.76rem; color:var(--faint); }
    .vp-card .warn { color:var(--warn-700); }
    .vp-card.accent { background:var(--success-bg); border-color:var(--success-line); }
    .vp-card.accent .vp-v { color:var(--success-dark); }
    .vp-card.danger { background:var(--danger-bg); border-color:var(--danger-line); }
    .vp-card.danger .vp-v { color:var(--danger-dark); }
    .vp-card.fakt { background:var(--info-bg); border-color:var(--info-line); }
    .vp-card.fakt .vp-v { color:var(--teal-700); }

    .vp-inline { margin:0; display:inline; }
    .btn-mini { background:var(--brand); color:var(--brand-ink-on); border:none; padding:5px 11px; border-radius:var(--r-sm); cursor:pointer; font-size:.78rem; font-weight:600; white-space:nowrap; }
    .btn-mini:hover { background:var(--brand-dark); }
    .btn-mini.ghost { background:var(--surface); color:var(--ink-soft); border:1px solid var(--line); }
    .btn-mini.ghost:hover { background:var(--surface-2); }

    .vp-fuzzy-save { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--brand-50); border:1px solid var(--brand-200); border-radius:var(--r-lg); padding:12px 16px; margin-bottom:14px; font-size:.88rem; color:var(--brand-ink); }

    .vp-chyba { background:var(--warning-bg); border:1px solid var(--warning-line); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:14px; color:var(--warn-800); }
    .vp-chyba-h { font-size:1rem; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
    .vp-chyba p { margin:4px 0 10px; }
    .vp-chyba-t { width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
    .vp-chyba-t th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--warn-800); padding:8px 11px; border-bottom:1px solid var(--warning-line); background:var(--warn-50); }
    .vp-chyba-t td { padding:8px 11px; border-bottom:1px solid var(--line-soft); font-size:.85rem; color:var(--ink-soft); vertical-align:middle; }
    .vp-chyba-t tr:last-child td { border-bottom:none; }
    .vp-chyba-t td.n, .vp-chyba-t th.n { text-align:right; }
    .vp-chyba-t a { color:var(--brand-dark); }
    .vp-chyba-act { display:flex; gap:6px; white-space:nowrap; }

    .vp-fakt-panel { background:var(--teal-50); border:1px solid var(--teal-200); border-radius:var(--r-lg); padding:12px 16px; margin-bottom:14px; font-size:.88rem; color:var(--teal-800); }
    .vp-fakt-h { font-size:1rem; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
    /* Malé tabuľky Výpočtu si na telefóne odscrollujú samy, nech netrhajú stránku. */
    .vp-tablewrap { overflow-x:auto; }
    .vp-fakt-t { width:100%; border-collapse:separate; border-spacing:0; margin-top:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
    .vp-fakt-t th, .vp-fakt-t td { padding:7px 12px; border-bottom:1px solid var(--line-soft); text-align:left; }
    .vp-fakt-t tr:last-child td { border-bottom:none; }
    .vp-fakt-t th.n, .vp-fakt-t td.n { text-align:right; }
    .vp-fakt-t th { background:var(--teal-100); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--teal-800); }

    .vp-ignor { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:8px 14px; margin-bottom:14px; }
    .vp-ignor summary { cursor:pointer; color:var(--ink-soft); font-size:.86rem; font-weight:600; }
    .vp-ignor ul { list-style:none; margin:8px 0 2px; padding:0; }
    .vp-ignor li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0; font-size:.85rem; }

    /* --- Tabuľka --- */
    .mz-tablewrap { overflow:auto; max-height:calc(100vh - 32px); border:1px solid var(--line); border-radius:var(--r-lg); max-width:100%; background:var(--surface); box-shadow:var(--shadow-xs); }
    .vp-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.82rem; background:var(--surface); white-space:nowrap; }
    .vp-table thead th { position:sticky; top:0; z-index:3; background:var(--surface-2); color:var(--muted); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; padding:8px 6px; text-align:right; border-bottom:1px solid var(--line); white-space:normal; vertical-align:bottom; line-height:1.2; }
    /* číselné hlavičky sa smú zalomiť na 2 riadky → stĺpec je široký len ako číslo, nie ako dlhý nadpis */
    .vp-table thead th .vp-sort { display:inline-flex; flex-wrap:wrap; justify-content:flex-end; text-align:right; }
    .vp-table th.l { text-align:left; }
    .vp-table td { padding:8px 6px; border-bottom:1px solid var(--line-soft); text-align:right; }
    .vp-table tbody tr:last-child td { border-bottom:none; }
    .vp-table td.l { text-align:left; }
    .vp-table td.c { text-align:center; }
    .vp-table td.n { font-variant-numeric:tabular-nums; }
    .vp-table td.mono { font-family:ui-monospace,"Cascadia Code",monospace; font-size:.78rem; color:var(--muted); letter-spacing:.02em; }
    .vp-table tbody tr:hover td { background:var(--brand-50); }
    .vp-table td.ucet { color:var(--info); font-weight:500; }
    .vp-table td.hotovost { background:var(--success-bg); color:var(--success-dark); font-weight:600; }
    .vp-table tbody tr.nespar td { background:var(--warning-bg); }
    .vp-table tbody tr.nespar td.hotovost { background:var(--warn-100); }
    .vp-table tfoot td { position:sticky; bottom:0; z-index:3; border-top:1px solid var(--line); background:var(--surface-2); font-weight:700; padding:11px 9px; }
    .vp-table .strong { font-weight:700; }

    /* zmrazené stĺpce Stredisko + Zamestnanec */
    .vp-table th.stick, .vp-table td.stick { position:sticky; background:var(--surface); }
    .vp-table td.stick { z-index:2; }
    .vp-table thead th.stick { z-index:5; }
    .vp-table .stick-1 { left:0; width:78px; min-width:78px; }
    .vp-table .stick-2 { left:78px; width:200px; min-width:200px; }
    .vp-table td.stick-2, .vp-table th.stick-2 { border-right:1px solid var(--line); white-space:normal; }

    /* tagy */
    .vp-table .tag { display:inline-flex; align-items:center; gap:4px; font-size:.62rem; padding:2px 8px; border-radius:var(--r-pill); margin-left:6px; background:var(--line); color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.03em; vertical-align:middle; white-space:nowrap; }
    .vp-table .tag.warn { background:var(--warn-100); color:var(--warn-800); }
    .vp-table .tag.fuzzy { background:var(--brand-100); color:var(--brand-ink); cursor:help; }
    .vp-table .tag.kvota { background:var(--teal-100); color:var(--teal-800); cursor:help; }
    .vp-table .tag.odmena { background:var(--warn-100); color:var(--warn-800); cursor:help; }
    .vp-table .tag.vypomoc { background:var(--success-line); color:var(--success-dark); cursor:help; }
    .vp-table tbody tr.vypomoc td.hotovost { background:var(--success-line); }
    .vp-note-odmena { display:flex; gap:10px; align-items:flex-start; background:var(--warn-50); border:1px solid var(--warn-200); color:var(--warn-800); padding:11px 14px; border-radius:var(--r); margin:0 0 12px; font-size:.86rem; line-height:1.45; }
    .vp-note-odmena .ti { font-size:18px; flex-shrink:0; margin-top:1px; }
    .vp-note-odmena .tag.odmena { white-space:nowrap; }
    .cena-fakt { color:var(--muted); cursor:help; }
    .cena-fakt em { font-style:normal; font-size:.82em; color:var(--faint); }
    .tag.note { background:transparent; padding:2px; cursor:help; color:var(--muted); }
    .tag.note .ti { font-size:15px; }

    /* na vrátenie + záporná hotovosť */
    .vp-table td.hotovost.negativ { background:var(--danger-bg) !important; color:var(--danger-dark); font-weight:800; }
    .vp-table td.faktura.akt { background:var(--info-bg); color:var(--teal-700); font-weight:700; }
    .vp-table tbody tr.row-vratit td.stick-1 { box-shadow: inset 4px 0 0 var(--danger); }
    .ret { display:inline-flex; align-items:center; gap:3px; font-size:.64rem; background:var(--fill-bad); color:var(--fill-ink); padding:2px 7px; border-radius:var(--r-pill); margin-left:5px; font-weight:700; cursor:help; }
    .ret .ti { font-size:13px; }

    /* filter */
    .vp-filter { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 10px; }
    .vp-search { position:relative; flex:1 1 260px; min-width:200px; }
    .vp-search .ti { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:17px; pointer-events:none; }
    #vp-q { width:100%; padding:9px 12px 9px 34px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:.88rem; }
    #vp-str { padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:.88rem; background:var(--surface); }
    .vp-filter .vp-chk { display:inline-flex; align-items:center; gap:7px; font-size:.84rem; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
    .vp-filter .vp-chk input { width:16px; height:16px; accent-color:var(--brand); cursor:pointer; }
    .vp-count { font-size:.82rem; color:var(--muted); margin-left:auto; }
    .vp-norows td { text-align:center; color:var(--muted); padding:20px; }
    /* preklik z Reportingu: spiatočný odkaz + dočasné zvýraznenie riadku človeka */
    .vp-priklik { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:600;
      color:var(--brand); text-decoration:none; border:1px solid var(--brand-200); background:var(--brand-50);
      border-radius:var(--r-pill); padding:5px 11px; white-space:nowrap; }
    /* `display:inline-flex` by prebilo UA pravidlo pre [hidden] → odkaz by
       svietil aj bez prekliku. */
    .vp-priklik[hidden] { display:none; }
    .vp-priklik:hover { border-color:var(--brand); }
    .vp-priklik .ti { font-size:15px; }
    .vp-table tbody tr.vp-hit td { background:var(--brand-100); }
    .vp-table tbody tr.vp-hit td.stick-1 { box-shadow: inset 4px 0 0 var(--brand); }

    /* zoraďovacie hlavičky */
    .vp-sort { display:inline-flex; align-items:center; gap:4px; cursor:pointer; user-select:none; color:inherit; }
    .vp-sort .vp-arrow { font-size:.72rem; opacity:.55; }
    .vp-sort:hover { color:var(--brand); }
    .vp-sort.active { color:var(--brand); }
    .vp-sort.active .vp-arrow { opacity:1; }

    /* prepínač (fakturant) — rovnaký ako „pásková mzda" v príprave miezd */
    .vp-table input[type=checkbox] { appearance:none; -webkit-appearance:none; width:32px; height:18px; border-radius:var(--r-pill); background:var(--line); position:relative; cursor:pointer; transition:background .15s; vertical-align:middle; margin:0; flex-shrink:0; }
    .vp-table input[type=checkbox]::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-xs); transition:left .15s; }
    .vp-table input[type=checkbox]:hover { background:var(--brand-200); }
    .vp-table input[type=checkbox]:checked { background:var(--brand); }
    .vp-table input[type=checkbox]:checked:hover { background:var(--brand); }
    .vp-table input[type=checkbox]:checked::after { left:16px; }
    .vp-table input[type=checkbox]:disabled { opacity:.45; cursor:default; }

/* ==========================================================================
   templates/planovac/detail.html
   ========================================================================== */

    .pl-pill { display:inline-block; font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
    .pl-pill.on { background:var(--success-bg); color:var(--success-dark); }
    .pl-pill.off { background:var(--line-soft); color:var(--muted); }
    .pl-group { border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
    .pl-group-head { font-weight:600; display:flex; align-items:center; gap:8px; }
    .pl-list { margin:0; padding-left:20px; font-size:.88rem; color:var(--ink-soft); }
    .pl-list li { padding:2px 0; }
    .pl-warn { background:var(--warn-100); color:var(--warn-800); border-radius:8px; padding:9px 12px; font-size:.85rem; }
    .pl-test { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    .pl-test select, .pl-test input { padding:8px 10px; border:1px solid var(--char-300); border-radius:8px; font-size:.9rem; }
    .pl-test input { min-width:260px; }
    .pl-detail { margin:0; font-size:.76rem; color:var(--muted); white-space:pre-wrap; font-family:inherit; max-height:130px; overflow:auto; }

/* ==========================================================================
   templates/planovac/zoznam.html
   ========================================================================== */

    .pl-pill { font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
    .pl-pill.on { background:var(--success-bg); color:var(--success-dark); }
    .pl-pill.off { background:var(--line-soft); color:var(--muted); }

/* ==========================================================================
   templates/rbac/audit.html
   ========================================================================== */

    .audit-lista { display:flex; align-items:center; gap:8px; margin:0 0 12px;
                   font-size:.88rem; color:var(--muted); }
    .audit-lista #a-reset { margin-left:8px; }
    #a-reset[hidden] { display:none; }

    /* Pevné rozloženie — filtre si inak vynútia šírku podľa najdlhšej položky. */
    .audit-table { table-layout:fixed; width:100%; }
    .audit-table td, .audit-table th { overflow-wrap:anywhere; }

    .a-hlavicka th[data-sort] { cursor:pointer; user-select:none; }
    .a-hlavicka th[data-sort]:hover { color:var(--brand-ink); }
    .a-hlavicka th.a-zoradene { color:var(--ink); }
    .a-sip { font-size:.7rem; color:var(--muted); }

    .a-filtre th { padding-top:0 !important; padding-bottom:8px !important; font-weight:400; }
    .a-filtre input, .a-filtre select {
        width:100%; min-width:0; box-sizing:border-box; padding:5px 8px;
        border:1px solid var(--line); border-radius:8px; background:var(--surface);
        font-size:.82rem; font-family:inherit; color:var(--ink);
    }
    .a-filtre input:focus, .a-filtre select:focus {
        outline:none; border-color:var(--brand-200); box-shadow:0 0 0 3px var(--brand-50);
    }
    .a-filtre input::placeholder { color:var(--faint); }

/* ==========================================================================
   templates/rbac/console.html
   ========================================================================== */

    /* Admin centrum môže využiť viac šírky okna než bežné stránky. */

    .rbac { display:flex; gap:24px; align-items:flex-start; }
    .rbac-side {
        flex:0 0 220px; background:var(--surface); border:1px solid var(--line); border-radius:12px;
        padding:14px; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto;
    }
    .rbac-brand { font-weight:700; margin-bottom:10px; }
    .rbac-sec { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin:16px 0 6px; }
    .rbac-nav { list-style:none; margin:0; padding:0; }
    .rbac-nav a, .rbac-newrole { display:block; padding:7px 10px; border-radius:8px; color:var(--ink-soft); text-decoration:none; font-size:.92rem; }
    .rbac-nav a:hover, .rbac-newrole:hover { background:var(--line-soft); }
    .rbac-nav a.active, .rbac-newrole.active { background:var(--brand-50); color:var(--brand-ink); font-weight:600; }
    .rbac-newrole { margin-top:6px; color:var(--brand-ink); font-weight:600; }
    .rbac-dot { color:var(--faint); float:right; }
    .rbac-main {
        flex:1; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:12px;
        padding:22px 26px;
    }

    .rbac-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
    .rbac-main h1 { margin:0 0 2px; font-size:1.3rem; }
    .rbac-main h2 { font-size:1rem; margin:22px 0 10px; padding-top:16px; border-top:1px solid var(--line-soft); }
    .rbac-main code { color:var(--muted); font-size:.8rem; }
    .tag { background:var(--line-soft); color:var(--muted); font-size:.72rem; padding:2px 8px; border-radius:999px; }

    .btn-primary { background:var(--brand); color:var(--brand-ink-on); border:none; padding:9px 16px; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-block; font-size:.9rem; }
    .btn-primary:hover { background:var(--brand-dark); }
    .btn-ghost { background:var(--surface); color:var(--ink-soft); border:1px solid var(--char-300); padding:8px 14px; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-block; font-size:.9rem; }
    .btn-ghost:hover { background:var(--surface-2); }
    .btn-danger { background:var(--surface); color:var(--danger-dark); border:1px solid var(--danger-line); padding:8px 14px; border-radius:8px; cursor:pointer; }
    .btn-danger:hover { background:var(--danger-bg); }
    .btn-sm { padding:5px 10px; font-size:.82rem; }

    /* Firma filter (chips) */
    .firma-filter { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 18px; }
    .firma-chip { padding:6px 14px; border-radius:999px; border:1px solid var(--char-300); color:var(--ink-soft); text-decoration:none; font-size:.85rem; background:var(--surface); }
    .firma-chip:hover { background:var(--surface-2); }
    .firma-chip.active { background:var(--brand-50); border-color:var(--brand-200); color:var(--brand-ink); font-weight:600; }

    /* Badge firiem */
    .fbadge { font-size:.72rem; padding:2px 9px; border-radius:999px; white-space:nowrap; font-weight:600; }
    .fbadge.ALDENTE { background:var(--warn-100); color:var(--warn-800); }
    .fbadge.BENELAN { background:var(--teal-100); color:var(--ink-soft); }
    .fbadge.neutral { background:var(--line-soft); color:var(--muted); }
    .fbadge.warn { background:var(--danger-bg); color:var(--danger-dark); }

    /* Manažér s pozastaveným prístupom do portálu */
    .mgr-stav { display:flex; align-items:center; gap:12px; }
    .mgr-off-note { margin:8px 0 0; font-size:.82rem; color:var(--danger-dark);
                    background:var(--danger-bg); border-radius:8px; padding:8px 12px; }

    .rbac-matica { width:100%; border-collapse:collapse; margin-bottom:14px; }
    .rbac-matica th { text-align:left; font-size:.78rem; color:var(--muted); padding:6px 8px; }
    .rbac-matica td { padding:7px 8px; border-top:1px solid var(--line-soft); }
    .rbac-matica select { padding:6px 8px; border:1px solid var(--char-300); border-radius:8px; min-width:170px; }
    .cap-set { display:flex; flex-wrap:wrap; gap:6px; }
    .cap-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--char-300); border-radius:999px; font-size:.83rem; cursor:pointer; user-select:none; background:var(--surface); }
    .cap-chip:hover { background:var(--surface-2); }
    .cap-chip:has(input:checked) { background:var(--brand-50); border-color:var(--brand-200); color:var(--brand-ink); font-weight:600; }
    .cap-chip input { margin:0; }

    /* --- Editor práv roly ------------------------------------------------
       Namiesto mriežky checkboxov jedna úroveň na modul + rozšírené schopnosti
       pod klapkou. Bežná rola tak vznikne klikaním po moduloch, nie lúštením
       46 políčok. */
    .pe-uvod { margin:2px 0 12px; }
    .pe-sekcia { margin:0 0 18px; }
    .pe-sekcia-nazov { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
                       color:var(--muted); font-weight:700; padding:0 0 6px; }
    .pe-modul { border:1px solid var(--line-soft); border-radius:10px; padding:10px 14px;
                margin-bottom:8px; background:var(--surface); }
    .pe-modul.pe-zmeneny { border-color:var(--brand-200); background:var(--brand-50); }
    .pe-modul-hlava { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
    .pe-modul-nazov { flex:1; min-width:190px; font-weight:600; display:flex;
                      flex-direction:column; gap:2px; }
    .pe-stav { font-weight:400; font-size:.76rem; color:var(--muted); }
    .pe-modul.pe-zmeneny .pe-stav { color:var(--brand-ink); font-weight:600; }

    /* Segmentovaný prepínač úrovne — radiobuttony ostávajú skutočné (klávesnica,
       čítačky, funguje aj bez JS), len sa nezobrazujú. */
    .pe-urovne { display:inline-flex; border:1px solid var(--char-300); border-radius:999px;
                 overflow:hidden; background:var(--surface); flex-shrink:0; }
    .pe-uroven { display:inline-flex; align-items:center; padding:5px 13px; font-size:.82rem;
                 cursor:pointer; user-select:none; border-right:1px solid var(--line-soft); }
    .pe-urovne .pe-uroven:last-child { border-right:none; }
    .pe-uroven input { position:absolute; opacity:0; width:0; height:0; }
    .pe-uroven:hover { background:var(--surface-2); }
    .pe-uroven:has(input:checked) { background:var(--char-900); color:var(--surface); font-weight:600; }
    .pe-uroven:has(input:focus-visible) { outline:2px solid var(--brand-200); outline-offset:-2px; }
    .pe-uroven.pe-neucinna span { text-decoration:underline dotted var(--muted); }

    .pe-rozsirene { margin:8px 0 0; }
    .pe-rozsirene > summary { cursor:pointer; font-size:.8rem; color:var(--muted);
                              padding:3px 0; list-style-position:inside; }
    .pe-rozsirene > summary:hover { color:var(--ink-soft); }
    .pe-caps { display:flex; flex-direction:column; gap:6px; padding:6px 0 2px 4px; }
    .pe-cap { display:grid; grid-template-columns:auto 1fr; gap:2px 9px; align-items:start;
              padding:6px 9px; border-radius:8px; cursor:pointer; }
    .pe-cap:hover { background:var(--surface-2); }
    .pe-cap input { margin:3px 0 0; grid-row:1 / span 4; }
    .pe-cap-label { font-size:.86rem; font-weight:600; }
    .pe-cap:has(input:checked) .pe-cap-label { color:var(--brand-ink); }
    .pe-cap-popis { font-size:.78rem; color:var(--muted); grid-column:2; }
    .pe-varovanie { font-size:.78rem; color:var(--warn-800); grid-column:2; margin:0; }
    .pe-varovanie-modul { margin:8px 0 0; padding:6px 10px; background:var(--warn-100);
                          border-radius:8px; }
    .pe-neucinna-text { font-size:.76rem; color:var(--muted); font-style:italic; grid-column:2; }
    .pe-neucinna-modul { margin:8px 0 0; }

    /* Lišta neuložených zmien — práva sa prejavia niekomu inému, takže sa pred
       uložením ukazuje presný rozdiel, nielen tlačidlo. */
    .pe-lista { position:sticky; bottom:0; z-index:20; margin:14px 0 0;
                background:var(--surface); border:1px solid var(--brand-200);
                border-radius:12px; box-shadow:0 -6px 24px rgba(0,0,0,.10); }
    .pe-lista-obsah { display:flex; gap:16px; align-items:flex-start; padding:12px 16px; }
    .pe-lista-text { flex:1; min-width:0; }
    .pe-lista-dopad { font-size:.8rem; color:var(--muted); margin-left:6px; }
    .pe-diff { list-style:none; margin:6px 0 0; padding:0; font-size:.82rem;
               max-height:150px; overflow:auto; }
    .pe-diff li { padding:2px 0; color:var(--ink-soft); }
    .pe-lista-akcie { display:flex; gap:8px; flex-shrink:0; }
    .pe-lista:not([hidden]) ~ #pe-ulozit-dole { display:none; }

    /* --- Nová rola: vzory a kópia --------------------------------------- */
    .rola-nova { max-width:760px; }
    .rn-zaklad { max-width:460px; }
    .rn-vyber { display:flex; flex-direction:column; gap:8px; }
    .rn-volba { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
                border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px;
                cursor:pointer; background:var(--surface); }
    .rn-volba.rn-aktivna { border-color:var(--brand-200); background:var(--brand-50); }
    .rn-volba input[name=zaklad] { margin:3px 0 0; }
    .rn-volba-telo { display:flex; flex-direction:column; gap:2px; }
    .rn-volba-nazov { font-weight:600; }
    .rn-volba-popis { font-size:.82rem; color:var(--muted); }
    .rn-podvyber { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
    .rn-volba:not(.rn-aktivna) .rn-podvyber { opacity:.45; }
    .rn-vzor { display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:start;
               padding:7px 10px; border-radius:8px; background:var(--surface); cursor:pointer; }
    .rn-vzor:hover { background:var(--surface-2); }
    .rn-vzor-telo { display:flex; flex-direction:column; gap:1px; }
    .rn-vzor-detail { font-style:italic; }

    /* --- Detail konta: prečo má tento človek toto právo ------------------- */
    .kd-zhrnutie { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
                   gap:12px; margin:12px 0 20px; }
    .kd-karta { border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px;
                background:var(--surface); }
    .kd-karta-nazov { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
                      color:var(--muted); font-weight:700; margin-bottom:8px; }
    .kd-karta p { margin:8px 0 0; }
    .kd-zdroj { padding:2px 0; }
    .kd-table td { vertical-align:top; }
    .kd-table .fbadge { display:inline-block; margin:0 2px 3px 0; }
    a.k-odkaz { color:inherit; text-decoration:none; border-bottom:1px dotted var(--char-300); }
    a.k-odkaz:hover { color:var(--brand-ink); border-bottom-color:var(--brand-200); }

    .rbac-cleni { list-style:none; padding:0; margin:0 0 12px; }
    .rbac-cleni li { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
    .ac-badge { font-size:.7rem; padding:2px 8px; border-radius:999px; background:var(--brand-50); color:var(--brand-ink); white-space:nowrap; }
    .ac-badge.group { background:var(--success-bg); color:var(--success-dark); }
    .ac-badge.warn { background:var(--warn-100); color:var(--warn-800); cursor:help; }
    .ac-name { flex:1; min-width:160px; }
    .small { font-size:.78rem; }
    .muted { color:var(--muted); }
    .ac-inline { margin:0; }
    .ac-remove { border:none; background:transparent; color:var(--danger-dark); font-size:1.2rem; cursor:pointer; line-height:1; }

    .ac-picker { position:relative; max-width:460px; margin-top:6px; }
    .ac-search { width:100%; padding:9px 11px; border:1px solid var(--char-300); border-radius:8px; }
    .ac-results { position:absolute; z-index:10; left:0; right:0; background:var(--surface); border:1px solid var(--char-300); border-radius:8px; margin-top:4px; box-shadow:0 8px 24px rgba(0,0,0,.08); max-height:280px; overflow:auto; }
    .ac-result { padding:9px 11px; cursor:pointer; display:flex; gap:8px; align-items:center; }
    .ac-result:hover { background:var(--surface-2); }
    .ac-result .muted { margin-left:auto; font-size:.8rem; }

    /* Stĺpce s pevnou šírkou (Strediská) sa na mobile nezmestia — nech si
       tabuľka odscrolluje vodorovne sama, namiesto trhania celej stránky. */
    .rbac-tablewrap { overflow-x:auto; }
    .rbac-table { width:100%; border-collapse:collapse; font-size:.9rem; }
    .rbac-table th { text-align:left; font-size:.75rem; color:var(--muted); padding:9px 8px; border-bottom:2px solid var(--line-soft); }
    .rbac-table td { padding:10px 8px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
    .rbac-table tr:hover td { background:var(--surface-2); }
    .mgr-list { display:flex; flex-direction:column; gap:4px; }
    .mgr-tag { font-size:.83rem; display:inline-flex; align-items:center; gap:6px; }

    /* Form */
    .rbac-form { max-width:560px; }
    .rbac-form label.fld { display:block; margin:14px 0 4px; font-size:.85rem; color:var(--ink-soft); font-weight:600; }
    .rbac-form input[type=text], .rbac-form textarea, .rbac-form select {
        width:100%; padding:9px 11px; border:1px solid var(--char-300); border-radius:8px; font-size:.92rem;
    }
    .rbac-form .checks { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:6px; }
    .rbac-form .checks label { font-size:.9rem; display:flex; align-items:center; gap:6px; }

    /* Priradenia manažérov */
    .mgr-card { border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:14px; }
    .mgr-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
    .mgr-chips { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
    .mgr-chip { display:inline-flex; align-items:center; gap:8px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 6px 5px 12px; font-size:.85rem; }
    .mgr-chip .code { font-weight:600; }
    .mgr-add { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
    .mgr-add select { padding:7px 9px; border:1px solid var(--char-300); border-radius:8px; font-size:.85rem; }

    @media (max-width: 820px) {
        /* Po prepnutí na stĺpec je vodorovná os priečna — bez `stretch` by si
           `align-items:flex-start` vypýtalo šírku obsahu a .rbac-main by
           pretiekol obrazovku. */
        .rbac { flex-direction:column; align-items:stretch; }
        .rbac-side { position:static; flex-basis:auto; width:100%; max-height:none; }
    }

/* ==========================================================================
   templates/rbac/konta.html
   ========================================================================== */

    .konta-lista { display:flex; align-items:center; gap:8px; margin:0 0 12px;
                   font-size:.88rem; color:var(--muted); }
    .konta-lista .k-sep { color:var(--line); }
    .konta-lista #k-reset { margin-left:8px; }
    #k-reset[hidden] { display:none; }

    /* Pevné rozloženie: bez neho si rozbaľovacie filtre vynútia šírku podľa
       najdlhšej položky a tabuľka pretečie mimo stránku (posledný stĺpec zmizne). */
    .konta-table { table-layout:fixed; width:100%; }
    .konta-table td { vertical-align:middle; }
    .konta-table td, .konta-table th { overflow-wrap:anywhere; }
    /* UPN je najdlhší údaj v riadku — o kúsok menšie písmo ho udrží na jednom riadku. */
    .konta-table td:nth-child(2) code { font-size:.78rem; }
    /* Tlačidlo sa nesmie zalomiť na „Pozast / aviť". */
    .konta-table td:last-child .btn-ghost, .konta-table td:last-child .btn-primary { white-space:nowrap; }
    /* Pozastavené konto má byť na prvý pohľad utlmené, nie však nečitateľné. */
    .row-off td { color:var(--faint); }
    .row-off td code, .row-off td strong { color:var(--faint) !important; }

    /* Hlavička sa dá kliknúť — nech to je vidieť skôr, než to niekto skúsi. */
    .k-hlavicka th[data-sort] { cursor:pointer; user-select:none; }
    .k-hlavicka th[data-sort]:hover { color:var(--brand-ink); }
    .k-hlavicka th.k-zoradene { color:var(--ink); }
    .k-sip { font-size:.7rem; color:var(--muted); }

    .k-filtre th { padding-top:0 !important; padding-bottom:8px !important; font-weight:400; }
    .k-filtre input, .k-filtre select {
        width:100%; min-width:0; box-sizing:border-box; padding:5px 8px;
        border:1px solid var(--line); border-radius:8px; background:var(--surface);
        font-size:.82rem; font-family:inherit; color:var(--ink);
    }
    .k-filtre input:focus, .k-filtre select:focus {
        outline:none; border-color:var(--brand-200); box-shadow:0 0 0 3px var(--brand-50);
    }
    .k-filtre input::placeholder { color:var(--faint); }

/* ==========================================================================
   templates/rbac/moduly.html
   ========================================================================== */

    .mod-list { display:flex; flex-direction:column; gap:11px; margin-top:18px; max-width:760px; }
    .mod-row { display:flex; align-items:center; gap:14px; border:1px solid var(--line);
        border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-xs);
        padding:14px 17px; }
    .mod-row.off { background:var(--surface-2); }
    .mod-row.off .mod-nazov { color:var(--muted); }
    .mod-ico { width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:flex;
        align-items:center; justify-content:center; font-size:19px;
        background:var(--brand-50); color:var(--brand); }
    .mod-row.off .mod-ico { background:var(--line-soft); color:var(--faint); }
    .mod-info { min-width:0; }
    .mod-nazov { font-weight:700; color:var(--ink); }
    .mod-popis { font-size:.8rem; color:var(--muted); margin-top:2px; }
    .mod-stav { margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto; }
    .mod-stav-txt { font-size:.78rem; font-weight:700; color:var(--success-dark); min-width:56px; text-align:right; }
    .mod-row.off .mod-stav-txt { color:var(--faint); font-weight:600; }
    /* Toggle switch — vzor „Kompaktne" z Prípravy miezd, väčší */
    .mod-switch { position:relative; display:inline-block; flex:0 0 auto; cursor:pointer; }
    .mod-switch input { appearance:none; -webkit-appearance:none; width:44px; height:24px; margin:0;
        border-radius:var(--r-pill); background:var(--line); position:relative; cursor:pointer;
        transition:background .15s; display:block; }
    .mod-switch input::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
        border-radius:50%; background:var(--surface); box-shadow:var(--shadow-xs); transition:left .15s; }
    .mod-switch input:checked { background:var(--brand); }
    .mod-switch input:checked::after { left:23px; }
    .mod-switch input:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* ==========================================================================
   templates/rbac/pristupy.html
   ========================================================================== */

    .pr-suhrn { border-radius:12px; padding:14px 18px; margin:18px 0 6px; border:1px solid; }
    .pr-suhrn-t { font-weight:700; margin-bottom:4px; }
    .pr-suhrn p { margin:0; font-size:.88rem; }
    .pr-suhrn.ok { background:var(--success-bg); border-color:var(--success-line); color:var(--success-dark); }
    .pr-suhrn.blizi { background:var(--warn-50); border-color:var(--warn-200); color:var(--warn-800); }
    .pr-suhrn.kriticky, .pr-suhrn.vyprsany { background:var(--danger-bg); border-color:var(--danger-line); color:var(--danger-dark); }

    .pr-alert { border-radius:12px; padding:14px 18px; border:1px solid var(--danger-line); background:var(--danger-bg); color:var(--danger-dark); }
    .pr-alert-t { font-weight:700; margin-bottom:4px; }
    .pr-alert p { margin:0 0 6px; font-size:.88rem; }
    .pr-tech { font-family:ui-monospace,monospace; font-size:.76rem; opacity:.75; }

    .pr-pill { display:inline-block; font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
    .pr-pill.ok { background:var(--success-bg); color:var(--success-dark); }
    .pr-pill.blizi { background:var(--warn-50); color:var(--warn-800); }
    .pr-pill.kriticky, .pr-pill.vyprsany { background:var(--danger-bg); color:var(--danger-dark); }
    .pr-pill.pouziva { background:var(--brand-50); color:var(--brand-ink); margin-left:6px; }

    .pr-dopad { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:.85rem; color:var(--ink-soft); margin-top:10px; max-width:78ch; }
    .pr-navod { font-size:.88rem; color:var(--ink-soft); max-width:78ch; padding-left:20px; margin:0 0 10px; }
    .pr-navod li { padding:3px 0; }

/* ==========================================================================
   templates/rbac/strediska.html
   ========================================================================== */

    /* Strediská — inline správa manažérov */
    .rbac-table td .mgr-list { margin-bottom:6px; }
    .fbadge.warn { background:var(--danger-bg); color:var(--danger-dark); }
    /* deaktivované konto — priradenie platí, ale človek sa do portálu nedostane */
    .mgr-chip.off .code { text-decoration:line-through; color:var(--muted); }
    .row-nomgr td { background:var(--warn-50); }
    .row-nomgr:hover td { background:var(--warn-50); }
    .row-off td { color:var(--faint); }
    .row-off td code { color:var(--faint) !important; }

    .firma-sep { flex:1 1 auto; }
    .warn-chip { background:var(--danger-bg) !important; border-color:var(--danger-line) !important; color:var(--danger-dark) !important; }
    .count-pill { background:var(--fill-bad); color:var(--fill-ink); border-radius:999px; padding:0 7px; font-size:.72rem; margin-left:6px; }
    .count-pill.grey { background:var(--faint); }

    /* Prepínač stavu (Aktívne / Neaktívne / Všetky) */
    .stav-filter { display:flex; align-items:center; gap:8px; margin:-6px 0 18px; }
    .stav-label { font-size:.8rem; color:var(--faint); }
    .mini-chip { padding:4px 11px; border-radius:999px; border:1px solid var(--line); color:var(--muted);
        text-decoration:none; font-size:.8rem; background:var(--surface); }
    .mini-chip:hover { background:var(--surface-2); }
    .mini-chip.active { background:var(--brand); border-color:var(--brand); color:var(--brand-ink-on); font-weight:600; }

    @media (max-width: 820px) { .firma-sep { display:none; } }

/* ==========================================================================
   templates/ulohy/vsetky.html
   ========================================================================== */

    .vt-pagehead { margin-bottom:16px; }
    .back-link { display:inline-flex; align-items:center; gap:5px; color:var(--muted); text-decoration:none;
        font-size:.82rem; margin-bottom:6px; }
    .back-link:hover { color:var(--brand); }
    .vt-pagehead h1 { margin:0; font-size:1.35rem; letter-spacing:-.01em; }
    .vt-sub { margin:2px 0 0; color:var(--muted); font-size:.88rem; }

    .vt-card { border:1px solid var(--line); border-radius:var(--r-lg);
        background:linear-gradient(180deg, var(--surface-2) 0, var(--surface) 96px);
        box-shadow:var(--shadow-xs); padding:15px 18px 16px; }
    .vt-head { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
    .vt-head h2 { margin:0; font-size:1rem; font-weight:700; letter-spacing:-.01em; }
    .zl-ico { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; }
    .zl-ico.slate { background:var(--line-soft); color:var(--muted); }
    .vt-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; display:inline-flex;
        align-items:center; justify-content:center; }
    .vt-count.on { background:var(--brand); color:var(--brand-ink-on); }

    .vt-tablewrap { overflow-x:auto; margin:0 -4px; }
    .vt-table { width:100%; border-collapse:collapse; font-size:.86rem; }
    .vt-table th { text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
        color:var(--faint); font-weight:600; padding:0 10px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
    .vt-table th.num, .vt-table th.ta-right { text-align:right; }
    .vt-table td { padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; color:var(--ink-soft); }
    .vt-table tbody tr:last-child td { border-bottom:none; }
    .vt-table tbody tr:hover td { background:var(--surface-2); }
    .vt-table .num, .vt-table .ta-right { text-align:right; }
    .vt-table .nowrap { white-space:nowrap; }
    .vt-table tr.is-urgent td:first-child { box-shadow:inset 3px 0 0 var(--danger); }
    .vt-table tr.is-warn td:first-child { box-shadow:inset 3px 0 0 var(--warn-500); }

    /* Admin uzavretie úlohy — tichý ghost button, aby neťahal oko k akcii,
       ktorá je poistka, nie bežný krok. */
    .vt-zavri-form { display:inline; }
    .vt-zavri { display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:.74rem; font-weight:600;
        color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
        padding:4px 9px; cursor:pointer; white-space:nowrap; }
    .vt-zavri:hover { color:var(--ink); background:var(--surface-2); border-color:var(--line-strong); }
    .vt-zavri .ti { font-size:14px; }

    .vt-typ { display:inline-block; font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; }
    .vt-typ--approve { background:var(--warn-100); color:var(--warn-800); }
    .vt-typ--process { background:var(--brand-50); color:var(--brand-ink); }
    .vt-typ--info { background:var(--line-soft); color:var(--muted); }
    .vt-title { font-weight:600; color:var(--ink); }
    .vt-meta { display:inline-flex; align-items:center; gap:6px; }

    /* Menná bunka (zdieľané so Zálohami) */
    .zl-emp { display:flex; align-items:center; gap:9px; }
    .zl-ava { width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center;
        justify-content:center; font-weight:700; font-size:.7rem; color:var(--brand-ink); background:var(--brand-100); letter-spacing:.02em; }
    .zl-emp-info { display:flex; flex-direction:column; gap:1px; line-height:1.25; }
    .zl-emp-name { font-weight:600; color:var(--ink); }
    .zl-osc { font-family:ui-monospace, "SFMono-Regular", Menlo, monospace; font-size:.68rem; color:var(--muted);
        background:var(--line-soft); padding:0 5px; border-radius:4px; letter-spacing:.02em; }
    .zl-firma { font-size:.68rem; font-weight:600; color:var(--muted); background:var(--line-soft); padding:1px 6px; border-radius:4px; letter-spacing:.02em; }
    .money { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); white-space:nowrap; }
    .zl-time { font-size:.73rem; color:var(--faint); }
    .zl-dash { color:var(--line); }

    .vt-person { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--ink-soft); }
    .vt-person .ti { font-size:14px; opacity:.6; }
    .vt-people { display:flex; flex-wrap:wrap; gap:4px; }
    .vt-chip { font-size:.76rem; font-weight:600; color:var(--brand-ink); background:var(--brand-50);
        border:1px solid var(--brand-200); padding:2px 8px; border-radius:var(--r-pill); }
    .vt-none { display:inline-flex; align-items:center; gap:5px; font-size:.78rem; color:var(--danger-dark); }

    .vt-age { display:inline-block; font-weight:600; font-size:.78rem; padding:2px 10px; border-radius:var(--r-pill);
        background:var(--line-soft); color:var(--muted); font-variant-numeric:tabular-nums; }
    .vt-age.warn { background:var(--warn-100); color:var(--warn-800); }
    .vt-age.urgent { background:var(--danger-bg); color:var(--danger-dark); }
    .zl-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px; text-align:center; }
    .zl-empty .ti { font-size:26px; color:var(--success); }
    .zl-empty p { margin:0; color:var(--muted); font-size:.88rem; }

    /* Hľadanie a radenie (vzor: rbac/konta.html) */
    .vt-hlavicka th[data-sort] { cursor:pointer; user-select:none; }
    .vt-hlavicka th[data-sort]:hover { color:var(--brand-ink); }
    .vt-hlavicka th.vt-zoradene { color:var(--ink); }
    .vt-sip { font-size:.7rem; color:var(--muted); }
    .vt-filtre th { padding-top:0 !important; padding-bottom:8px !important; font-weight:400; }
    .vt-filtre input, .vt-filtre select {
        width:100%; min-width:0; box-sizing:border-box; padding:5px 8px;
        border:1px solid var(--line); border-radius:8px; background:var(--surface);
        font-size:.82rem; font-family:inherit; color:var(--ink);
    }
    .vt-filtre input:focus, .vt-filtre select:focus {
        outline:none; border-color:var(--brand-200); box-shadow:0 0 0 3px var(--brand-50);
    }
    .vt-filtre input::placeholder { color:var(--faint); }
    .vt-prazdny-text { color:var(--muted); padding:14px 10px; }

/* ==========================================================================
   templates/ulohy/zoznam.html
   ========================================================================== */

    .task-list { list-style:none; margin:0; padding:0; }
    .task-item { display:flex; justify-content:space-between; align-items:center; gap:12px;
        padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px;
        border-left:4px solid var(--brand-200); background:var(--surface-2); }
    .task--zaloha_schvalit { border-left-color:var(--warning); }
    /* Bezhotovostné zálohy (v1.73.0) prevzali farby po hotovostných typoch:
       akcia pre spracovateľa ostáva petrolejová, uzavretie prípadu zelené.
       Bez týchto dvoch riadkov by živé úlohy vyšli bez pruhu, kým mŕtve typy
       (spracovat/pripravena) farbu držali. */
    .task--zaloha_spracovat, .task--zaloha_vyplatit { border-left-color:var(--info); }
    .task--zaloha_zamietnuta { border-left-color:var(--danger); }
    .task--zaloha_pripravena, .task--zaloha_vyplatena { border-left-color:var(--success); }
    .task-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
    .task-title { font-weight:600; color:var(--ink); text-decoration:none; }
    a.task-title:hover { color:var(--brand-dark); text-decoration:underline; }
    .task-meta { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; }
    .task-note { font-size:.82rem; color:var(--muted); }
    .task-osc { font-family:ui-monospace, "SFMono-Regular", Menlo, monospace; font-size:.7rem; color:var(--muted);
        background:var(--line-soft); padding:1px 6px; border-radius:4px; letter-spacing:.02em; }
    .task-actions { display:flex; align-items:center; gap:10px; white-space:nowrap; }
    .task-time { font-size:.78rem; color:var(--faint); }
    .btn-ack { background:var(--surface); border:1px solid var(--char-300); border-radius:8px; padding:4px 12px;
        cursor:pointer; font-size:.82rem; font-weight:600; color:var(--ink-soft); }
    .btn-ack:hover { background:var(--line-soft); }
    .admin-tasks-link { display:flex; align-items:center; gap:12px; padding:13px 16px; margin-bottom:16px;
        border:1px solid var(--brand-200); background:var(--brand-50); border-radius:var(--r);
        color:var(--brand-ink); text-decoration:none; transition:.15s; }
    .admin-tasks-link:hover { box-shadow:var(--shadow-sm); border-color:var(--brand); }
    .admin-tasks-link > span { flex:1; font-size:.92rem; }
    .admin-tasks-link .ti { font-size:19px; }

/* ==========================================================================
   templates/vyplaty/rozpis.html
   ========================================================================== */

    .vp-page h1 { margin:0 0 2px; font-size:1.5rem; }
    .mz-head { margin-bottom:6px; }
    .mz-lock { display:flex; align-items:center; gap:9px; background:var(--danger-bg); border:1px solid var(--danger-line); color:var(--danger-dark); padding:11px 15px; border-radius:var(--r); margin:6px 0 14px; font-size:.9rem; }

    .mz-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:18px 0; }
    .mz-selectors label { font-size:.82rem; color:var(--muted); display:inline-flex; align-items:center; gap:8px; }
    .mz-selectors select { padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:.9rem; font-weight:500; }
    .mz-month { display:flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; box-shadow:var(--shadow-xs); }
    .mz-month .btn-ghost { border:none; padding:6px 12px; border-radius:var(--r-pill); background:transparent; }
    .mz-month .btn-ghost:hover { background:var(--line-soft); }
    .mz-month-label { min-width:120px; text-align:center; font-weight:600; font-size:.92rem; }
    .mz-export { margin-left:auto; display:flex; gap:8px; }

    .vp-empty { background:var(--info-bg); border:1px solid var(--info-line); color:var(--ink-soft); padding:16px 18px; border-radius:var(--r-lg); }
    .vp-empty a { color:var(--brand-dark); }

    /* karty */
    .vp-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:6px 0 18px; }
    .vp-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; display:flex; flex-direction:column; gap:3px; box-shadow:var(--shadow-xs); }
    .vp-card .vp-k { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
    .vp-card .vp-v { font-size:1.4rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
    .vp-card .vp-sub { font-size:.76rem; color:var(--faint); }
    .vp-card .warn { color:var(--warn-700); }
    .vp-card.accent { background:var(--success-bg); border-color:var(--success-line); }
    .vp-card.accent .vp-v { color:var(--success-dark); }
    .vp-card.danger { background:var(--danger-bg); border-color:var(--danger-line); }
    .vp-card.danger .vp-v { color:var(--danger-dark); }

    .vp-stav { border-radius:var(--r-lg); padding:14px 18px; margin-bottom:16px; font-size:.9rem; border:1px solid transparent; }
    .vp-stav.pending { background:var(--warning-bg); border-color:var(--warning-line); color:var(--warn-800); }
    .vp-stav.ok { background:var(--success-bg); border-color:var(--success-line); color:var(--success-dark); }
    .vp-stav-h { font-size:1rem; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
    .vp-stav p { margin:4px 0 0; }

    /* panely */
    .vp-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:16px; box-shadow:var(--shadow-xs); }
    .vp-panel-h { font-size:.95rem; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px; color:var(--ink); }
    .vp-panel-h .ti { color:var(--brand); font-size:18px; }
    .vp-form-panel > .vp-panel-sum { cursor:pointer; }
    .vp-form-panel > .vp-panel-sum .vp-panel-h { display:inline-flex; margin:0; }
    .vp-form-panel:not([open]) > .vp-panel-sum .vp-panel-h { margin-bottom:0; }
    .vp-sub-h { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:16px 0 8px; }

    .vp-zas-t, .vp-str-t { width:auto; min-width:420px; border-collapse:separate; border-spacing:0; font-size:.86rem; }
    .vp-zas-t th, .vp-str-t th { text-align:right; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:8px 12px; border-bottom:1px solid var(--line); }
    .vp-zas-t th.l, .vp-str-t th.l { text-align:left; }
    .vp-zas-t td, .vp-str-t td { padding:6px 12px; border-bottom:1px solid var(--line-soft); text-align:right; }
    .vp-zas-t td.l, .vp-str-t td.l { text-align:left; }
    .vp-zas-t td.n, .vp-str-t td.n { font-variant-numeric:tabular-nums; }
    .vp-zas-t tfoot td, .vp-str-t tfoot td { border-top:1px solid var(--line); border-bottom:none; background:var(--surface-2); }
    .small { font-size:.82rem; }
    .vp-str-scroll { overflow-x:auto; }
    .vp-str-t.wide { min-width:100%; white-space:nowrap; }
    .vp-str-t td.zero { color:var(--faint); }
    .vp-str-t .stick-s { position:sticky; left:0; background:var(--surface); z-index:1; }
    .vp-str-t thead .stick-s { background:var(--surface); z-index:2; }
    .vp-str-t tfoot .stick-s { background:var(--surface-2); }
    .vp-str-t tr.row-caka td { background:var(--warning-bg); }
    .vp-num { width:90px; padding:6px 9px; border:1px solid var(--line); border-radius:var(--r-sm); text-align:right; font-size:.88rem; font-variant-numeric:tabular-nums; }
    .vp-num:focus { border-color:var(--brand); outline:none; }
    .negativ { color:var(--danger-dark); font-weight:700; }
    .strong { font-weight:700; }

    /* chipy stavu */
    .vp-chip { display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:600; padding:2px 9px; border-radius:var(--r-pill); border:1px solid transparent; }
    .vp-chip.done { background:var(--success-bg); border-color:var(--success-line); color:var(--success-dark); }
    .vp-chip.caka { background:var(--warning-bg); border-color:var(--warning-line); color:var(--warn-800); }
    .vp-chip.edit { background:var(--info-bg); border-color:var(--info-line); color:var(--brand-dark); }

    /* zoznam dávok */
    .vp-davky { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
    .vp-davka { border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; display:flex; flex-direction:column; gap:6px; background:var(--surface-2); }
    .vp-davka.aktivna { border-color:var(--brand); background:var(--brand-50); }
    .vp-davka-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .vp-davka-c { font-weight:700; font-size:.95rem; }
    .vp-davka-sumy { display:flex; align-items:baseline; gap:8px; }
    .vp-davka-sumy strong { font-size:1.15rem; font-variant-numeric:tabular-nums; }
    .vp-davka-str { line-height:1.35; }
    .vp-davka-akcie { display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
    .vp-davka-akcie form { display:inline; }
    .btn-ghost.danger { color:var(--danger-dark); border-color:var(--danger-line); }

    /* výber stredísk a jednotlivcov */
    .vp-datum { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
    .vp-datum label { font-size:.82rem; color:var(--muted); display:inline-flex; align-items:center; gap:8px; }
    .vp-datum input[type=date] { padding:7px 10px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:.88rem; }
    .vp-hint { font-size:.82rem; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
    .vp-chks { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:9px; align-items:start; }
    .vp-chk { border:1px solid var(--line); border-radius:var(--r); background:var(--surface); transition:border-color .12s, background .12s; }
    .vp-chk:hover { border-color:var(--brand); }
    .vp-chk:has(input:checked) { border-color:var(--brand); background:var(--brand-50); }
    .vp-chk.done { background:var(--surface-2); }
    .vp-chk.done:has(input:checked) { background:var(--warning-bg); border-color:var(--warning-line); }
    .vp-chk.part { border-color:var(--warning-line); }
    .vp-chk-master { display:flex; align-items:flex-start; gap:9px; padding:10px 12px; cursor:pointer; }
    .vp-chk input { margin-top:3px; }
    .vp-ludia { border-top:1px dashed var(--line); }
    .vp-ludia > summary { cursor:pointer; font-size:.74rem; color:var(--muted); padding:6px 12px; }
    .vp-ludia > summary:hover { color:var(--brand-dark); }
    .vp-osoba { display:flex; align-items:baseline; gap:7px; padding:4px 12px 4px 14px; font-size:.78rem; cursor:pointer; }
    .vp-osoba:hover { background:var(--line-soft); }
    .vp-osoba:last-child { padding-bottom:10px; }
    .vp-osoba input { margin:0; }
    /* Meno sa NIKDY neoreže (pravidlo portálu). Ak sa nezmestí na riadok,
       zalomí sa — tri bodky namiesto priezviska sú horšie ako dva riadky. */
    .vp-osoba-meno { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
    .vp-osoba-suma { font-variant-numeric:tabular-nums; font-weight:600; }
    .vp-osoba.doplatok { background:var(--warning-bg); }
    .vp-chip.mini { font-size:.66rem; padding:1px 6px; }
    .vp-doplatky { margin:8px 0 0; padding-left:20px; }
    .vp-doplatky li { margin-bottom:3px; }
    .vp-chk-body { display:flex; flex-direction:column; gap:1px; min-width:0; }
    .vp-chk-kod { font-weight:700; font-size:.9rem; }
    .vp-chk-suma { font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; }
    .vp-chk-sub { font-size:.74rem; color:var(--muted); }
    .vp-chks-akcie { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
    .vp-bilancia { margin-left:auto; font-size:.85rem; font-weight:600; font-variant-numeric:tabular-nums; }
    .vp-bilancia.ok { color:var(--success-dark); }
    .vp-bilancia.zle { color:var(--danger-dark); }

    .vp-actions { display:flex; gap:10px; margin-top:14px; }

    /* filter */
    .vp-filter { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 10px; }
    .vp-search { position:relative; flex:1 1 260px; min-width:200px; }
    .vp-search .ti { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:17px; pointer-events:none; }
    #vp-q { width:100%; padding:9px 12px 9px 34px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:.88rem; }
    #vp-str { padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:.88rem; background:var(--surface); }
    .vp-count { font-size:.82rem; color:var(--muted); margin-left:auto; }

    /* tabuľka menoslovu */
    .mz-tablewrap { overflow:auto; max-height:calc(100vh - 32px); border:1px solid var(--line); border-radius:var(--r-lg); max-width:100%; background:var(--surface); box-shadow:var(--shadow-xs); }
    .vp-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.82rem; background:var(--surface); white-space:nowrap; }
    .vp-table thead th { position:sticky; top:0; z-index:3; background:var(--surface-2); color:var(--muted); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; padding:11px 9px; text-align:right; border-bottom:1px solid var(--line); }
    .vp-table th.l { text-align:left; }
    .vp-table td { padding:9px 9px; border-bottom:1px solid var(--line-soft); text-align:right; }
    .vp-table tbody tr:last-child td { border-bottom:none; }
    .vp-table td.l { text-align:left; }
    .vp-table td.c { text-align:center; }
    .vp-table td.n { font-variant-numeric:tabular-nums; }
    .vp-table td.zero { color:var(--faint); }
    .vp-table td.mono { font-family:ui-monospace,"Cascadia Code",monospace; font-size:.78rem; color:var(--muted); }
    .vp-table tbody tr:hover td { background:var(--brand-50); }
    .vp-table tfoot td { position:sticky; bottom:0; z-index:3; border-top:1px solid var(--line); background:var(--surface-2); font-weight:700; padding:11px 9px; }
    .vp-table tbody tr.row-vratit td.hotovost, .vp-table td.negativ { color:var(--danger-dark); font-weight:700; }
    .vp-table tbody tr.row-vratit td.stick-1 { box-shadow: inset 4px 0 0 var(--danger); }

    .vp-table th.stick, .vp-table td.stick { position:sticky; background:var(--surface); }
    .vp-table td.stick { z-index:2; }
    .vp-table thead th.stick { z-index:5; }
    .vp-table .stick-1 { left:0; width:78px; min-width:78px; }
    .vp-table .stick-2 { left:78px; width:200px; min-width:200px; border-right:1px solid var(--line); }
    .vp-norows td { text-align:center; color:var(--muted); padding:20px; }

/* ==========================================================================
   templates/zalohy/index.html
   ========================================================================== */

    /* ---------- Zálohy — kompaktný enterprise vzhľad ---------- */
    .zl-head { display:flex; align-items:center; gap:13px; margin-bottom:18px; }
    .zl-head-ico { width:40px; height:40px; border-radius:var(--r); flex:0 0 auto;
        background:linear-gradient(150deg, var(--brand), var(--brand-dark)); color:var(--brand-ink-on);
        display:flex; align-items:center; justify-content:center; font-size:21px; box-shadow:var(--shadow-xs); }
    .zl-head h1 { margin:0; font-size:1.35rem; letter-spacing:-.01em; }
    .zl-sub { margin:1px 0 0; color:var(--muted); font-size:.88rem; }
    /* Vysvetlivka pod poľom formulára (napr. „vypláca sa na účet") */
    .zl-hint { display:block; margin-top:4px; color:var(--muted); font-size:.78rem; line-height:1.35; font-weight:400; }

    /* Karty s jemným farebným prechodom „do stratena" */
    .zl-card { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
        box-shadow:var(--shadow-xs); padding:15px 18px 16px; margin-bottom:14px; }
    .sec-new { background:linear-gradient(180deg, var(--brand-50) 0, var(--surface) 96px); border-color:var(--brand-200); }
    .sec-approve { background:linear-gradient(180deg, var(--warn-50) 0, var(--surface) 96px); }
    .sec-process { background:linear-gradient(180deg, var(--brand-50) 0, var(--surface) 96px); }
    .sec-history { background:linear-gradient(180deg, var(--surface-2) 0, var(--surface) 96px); }

    .zl-card-head { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
    .zl-card-head h2 { margin:0; font-size:1rem; font-weight:700; display:flex; align-items:baseline; gap:7px; letter-spacing:-.01em; }
    .zl-head-note { font-size:.76rem; font-weight:500; color:var(--faint); }
    .zl-ico { width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:flex; align-items:center;
        justify-content:center; font-size:16px; }
    .zl-ico.ind { background:var(--brand-50); color:var(--brand); }
    .zl-ico.amber { background:var(--warn-100); color:var(--warn-700); }
    .zl-ico.slate { background:var(--line-soft); color:var(--muted); }
    .zl-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;
        display:inline-flex; align-items:center; justify-content:center; }
    .zl-count.on { background:var(--brand); color:var(--brand-ink-on); }
    .zl-period { margin-left:auto; font-size:.78rem; color:var(--brand-ink); background:var(--surface);
        border:1px solid var(--brand-200); padding:3px 10px; border-radius:var(--r-pill); font-weight:600; white-space:nowrap; }

    /* Formulár */
    .zl-fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
    .zl-fld { display:flex; flex-direction:column; gap:5px; }
    /* `display:flex` by prebilo UA pravidlo pre [hidden] → pole „meno nového
       zamestnanca" by svietilo stále, aj keď je vybraný existujúci človek. */
    .zl-fld[hidden] { display:none; }
    /* Chýbajúci účet nie je chyba, len iná cesta — preto jantár, nie červená. */
    .zl-hint--cash { color:var(--warn-800); font-weight:600; }

    /* ---------- Zamestnanci a účty (register IBAN-ov) ---------- */
    .zl-head-akcia { margin-left:auto; }

    .zu-kpi { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
        gap:12px; margin-bottom:16px; }
    .zu-dlazdica { display:flex; flex-direction:column; gap:2px; padding:13px 15px;
        border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
    .zu-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
    .zu-dlazdica strong { font-size:1.5rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
    .zu-jednotka { font-size:.75rem; color:var(--muted); }
    .zu-dlazdica--ok { border-color:var(--success-line); background:var(--success-bg); }
    .zu-dlazdica--ok strong { color:var(--success-dark); }
    /* Chýbajúci účet nie je chyba, je to nedorobená práca — jantár, nie červená. */
    .zu-dlazdica--warn { border-color:var(--warn-200); background:var(--warn-50); }
    .zu-dlazdica--warn strong { color:var(--warn-800); }

    .zu-filtre { display:flex; gap:5px; margin-left:14px; }
    .zu-chip { font:inherit; font-size:.78rem; font-weight:600; padding:4px 11px; cursor:pointer;
        color:var(--muted); background:var(--surface); border:1px solid var(--line);
        border-radius:var(--r-pill); transition:.15s; }
    .zu-chip:hover { color:var(--brand-ink); border-color:var(--brand-200); }
    .zu-chip.on { color:var(--brand-ink-on); background:var(--brand); border-color:var(--brand); }

    /* `nowrap` na bunke: tabuľka jej musí prideliť toľko šírky, aby sa celý
       IBAN zmestil — inak ju stlačí dlhý stĺpec s menami a číslo účtu sa oreže. */
    .zu-ucet { display:flex; gap:7px; align-items:center; margin:0; white-space:nowrap; }
    /* `display:inline-flex` na tlačidle prebíja UA pravidlo pre [hidden] —
       bez tohto by „Uložiť" svietilo pri každom riadku, aj keď sa nič nezmenilo. */
    .zu-ucet .zl-btn[hidden] { display:none; }
    /* 30ch = celý IBAN po štvoriciach („SK24 1100 0000 0026 1234 5678") sa zmestí
       aj s okrajmi — inak by bolo číslo účtu orezané a nedalo by sa prečítať. */
    /* 32ch, nie 29: `box-sizing:border-box` počíta do šírky aj polstrovanie
       a rámik, takže na text ostane o dva znaky menej — a IBAN by bol orezaný. */
    .zu-ucet input { width:32ch; padding:6px 10px; border:1px solid var(--line);
        border-radius:var(--r); font-family:ui-monospace, "SFMono-Regular", Menlo, monospace;
        font-size:.82rem; color:var(--ink); background:var(--surface); transition:.15s; }
    .zu-ucet input:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
    .zu-ucet input::placeholder { font-family:inherit; color:var(--faint); }
    .zu-ucet input:placeholder-shown { border-style:dashed; }

    .zu-checkbox { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-soft); }
    .zu-checkbox input { width:16px; height:16px; accent-color:var(--brand); }
    .zu-poznamka { margin:6px 0 0; font-size:.83rem; color:var(--muted);
        display:flex; align-items:center; gap:6px; }
    .zu-problem { margin:6px 0 0; font-size:.83rem; color:var(--danger-dark);
        display:flex; align-items:flex-start; gap:6px; }
    .zu-problem .ti, .zu-poznamka .ti { flex:0 0 auto; }

    /* ---------- Zamestnanci (HR evidencia) ---------- */
    /* KPI dlaždice sú tu zároveň filtre — preto sú to tlačidlá. */
    .zu-dlazdica.js-filter { cursor:pointer; text-align:left; font:inherit; transition:.15s; }
    .zu-dlazdica.js-filter:hover { border-color:var(--brand); box-shadow:var(--shadow-xs); }

    .hr-importy { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
        margin-bottom:14px; font-size:.8rem; color:var(--muted); }
    .hr-import { font-weight:600; color:var(--ink-soft); background:var(--surface);
        border:1px solid var(--line); padding:2px 9px; border-radius:var(--r-pill); }

    .hr-osoba { display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit; }
    .hr-osoba:hover .zl-emp-name { color:var(--brand-ink); text-decoration:underline; }
    .zl-ava--velka { width:44px; height:44px; font-size:.95rem; }
    .hr-meno { font-size:1.15rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); }

    /* Časová os pomerov: aktívny je zvýraznený, ukončené idú do stratena. */
    .hr-pomery .zd-krok:not(.zd-krok--hotovo) { opacity:.72; }
    .hr-pomer-udaje { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:5px;
        font-size:.8rem; color:var(--muted); }
    .hr-pomer-udaje span { display:inline-flex; align-items:center; gap:5px; }
    .hr-pomer-udaje .ti { font-size:14px; color:var(--faint); }

    .hr-vazby { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:18px; }
    .hr-vazba { display:flex; flex-direction:column; gap:5px; min-width:0; }
    .hr-riadok { display:flex; align-items:center; gap:7px; flex-wrap:wrap;
        font-size:.85rem; color:var(--ink-soft); }
    .hr-riadok .ti { color:var(--faint); }

    .hr-zoznam { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
    .hr-zoznam span { font-size:.76rem; background:var(--surface); border:1px solid var(--line);
        padding:2px 9px; border-radius:var(--r-pill); }
    .hr-zoznam--panel { padding:0 13px 13px; }
    .hr-suhrn { margin:14px 0; }
    .hr-hlavicka-akcie { display:flex; gap:8px; align-items:center; }
    .hr-filtre { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
        padding:11px 13px; margin-bottom:12px; border:1px solid var(--line);
        border-radius:var(--r); background:var(--surface-2); }
    .hr-filter { display:flex; flex-direction:column; gap:4px; }
    .hr-filter > span { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
        color:var(--faint); }
    .hr-filter select { padding:6px 10px; border:1px solid var(--line);
        border-radius:var(--r); font-family:inherit; font-size:.85rem;
        color:var(--ink); background:var(--surface); min-width:130px; }
    .hr-filter select:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
    .hr-prepinace { display:flex; gap:5px; flex-wrap:wrap; }
    .hr-filtre .zl-btn { margin-left:auto; }

    /* Človek s dvoma úväzkami má v riadku dva pomery pod sebou. */
    .hr-pomer-riadok { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
    .hr-pomer-riadok + .hr-pomer-riadok { margin-top:5px; padding-top:5px;
        border-top:1px dashed var(--line-soft); }
    .hr-filtre { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
        padding:11px 13px; margin-bottom:12px; border:1px solid var(--line);
        border-radius:var(--r); background:var(--surface-2); }
    .hr-filter { display:flex; flex-direction:column; gap:4px; }
    .hr-filter > span { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
        color:var(--faint); }
    .hr-filter select { padding:6px 10px; border:1px solid var(--line);
        border-radius:var(--r); font-family:inherit; font-size:.85rem;
        color:var(--ink); background:var(--surface); min-width:130px; }
    .hr-filter select:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
    .hr-prepinace { display:flex; gap:5px; flex-wrap:wrap; }
    .hr-filtre .zl-btn { margin-left:auto; }

    /* Človek s dvoma úväzkami má v riadku dva pomery pod sebou. */
    .hr-pomer-riadok { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
    .hr-pomer-riadok + .hr-pomer-riadok { margin-top:5px; padding-top:5px;
        border-top:1px dashed var(--line-soft); }
    .hr-potvrdenie { display:flex; flex-direction:column; gap:7px; align-items:flex-start; }

    /* Návrh na zlúčenie: naľavo starý záznam, napravo ten z Pohody, medzi nimi
       dôvod. Rozhodnutie sa má dať spraviť bez otvárania oboch kariet. */
    .hr-dvojice { display:flex; flex-direction:column; gap:10px; }
    .hr-dvojica { display:grid; grid-template-columns:1fr auto 1fr; gap:14px;
        align-items:center; padding:13px 15px; border:1px solid var(--line);
        border-radius:var(--r-lg); background:var(--surface); }
    .hr-strana { display:flex; flex-direction:column; gap:5px; min-width:0; }
    .hr-strana--stara { opacity:.75; }
    .hr-sipka { display:flex; flex-direction:column; align-items:center; gap:3px;
        color:var(--muted); font-size:.72rem; text-align:center; max-width:170px; }
    .hr-sipka .ti { font-size:19px; color:var(--brand); }
    .hr-akcie { grid-column:1 / -1; display:flex; gap:8px; justify-content:flex-end;
        padding-top:10px; border-top:1px solid var(--line-soft); }

    /* Ceruzka a kôš pri riadku pomeru / mzdovej identity — držia sa vpravo
       a zjavia sa až pri prejdení myšou, aby zoznam ostal čitateľný. */
    .hr-riadok-akcie { display:inline-flex; gap:4px; align-items:center; margin-left:auto; }
    .zd-krok .hr-riadok-akcie { position:absolute; top:10px; right:10px; }
    .hr-ikonbtn { display:inline-flex; align-items:center; justify-content:center;
        width:26px; height:26px; border-radius:var(--r-sm); border:1px solid var(--line);
        background:var(--surface); color:var(--muted); cursor:pointer; transition:.15s;
        text-decoration:none; padding:0; }
    .hr-ikonbtn:hover { color:var(--brand-ink); border-color:var(--brand); background:var(--brand-50); }
    .hr-ikonbtn--zle:hover { color:var(--danger-dark); border-color:var(--danger-line);
        background:var(--danger-bg); }
    .hr-ikonbtn .ti { font-size:14px; }
    .hr-prekazky { list-style:none; margin:0 0 12px; padding:0; display:flex;
        flex-direction:column; gap:6px; font-size:.88rem; color:var(--ink-soft); }
    .hr-prekazky li { display:flex; align-items:flex-start; gap:6px; line-height:1.45; }
    .hr-prekazky .ti { font-size:14px; color:var(--warn-700); flex:0 0 auto; margin-top:2px; }

    @media (max-width:820px) {
        .hr-dvojica { grid-template-columns:1fr; }
        .hr-sipka { flex-direction:row; max-width:none; }
        .hr-akcie { justify-content:flex-start; }
    }
    .zl-fld > span { font-size:.77rem; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; }
    .zl-fld > span .ti { font-size:14px; color:var(--faint); }
    .zl-full { margin-top:12px; }
    .zl-form select, .zl-form input[type=text], .zl-form input[type=number],
    .zl-form input[type=date], .zl-form input[type=email], .zl-form textarea {
        width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:var(--r-sm);
        font-size:.9rem; font-family:inherit; color:var(--ink); background:var(--surface); transition:.15s; }
    .zl-form textarea { resize:vertical; }
    .zl-form select:focus, .zl-form input:focus, .zl-form textarea:focus {
        outline:none; border-color:var(--brand); box-shadow:var(--ring); }

    /* Tlačidlá */
    .zl-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; cursor:pointer;
        border-radius:var(--r-sm); padding:7px 13px; font-size:.85rem; font-weight:600; font-family:inherit;
        text-decoration:none; transition:.15s; white-space:nowrap; line-height:1.2; }
    .zl-btn .ti { font-size:15px; }
    .zl-btn.sm { padding:6px 11px; font-size:.82rem; }
    .zl-btn-primary { margin-top:14px; color:var(--brand-ink-on); background:linear-gradient(135deg, var(--brand), var(--brand-dark));
        box-shadow:0 1px 3px rgba(46,40,40,.3); }
    .zl-btn-primary:hover { filter:brightness(1.07); }
    .zl-btn.sm.zl-btn-primary { margin-top:0; }
    .zl-btn-ok { color:var(--fill-ink); background:var(--fill-ok); }
    .zl-btn-ok:hover { background:var(--success-dark); }
    .zl-btn-reject { color:var(--danger-dark); background:var(--surface); border-color:var(--danger-line); }
    .zl-btn-reject:hover { background:var(--danger-bg); }
    .zl-del { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
        border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--faint); cursor:pointer; transition:.15s; }
    .zl-del:hover { color:var(--danger); border-color:var(--danger-line); background:var(--danger-bg); }
    .zl-del .ti { font-size:15px; }

    /* Tabuľka — profesionálna, hustá */
    .zl-tablewrap { overflow-x:auto; margin:0 -4px; }
    .zl-table { width:100%; border-collapse:collapse; font-size:.86rem; }
    .zl-table th { text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
        color:var(--faint); font-weight:600; padding:0 10px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
    .zl-table th.num, .zl-table th.ta-right { text-align:right; }
    .zl-table td { padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; color:var(--ink-soft); }
    .zl-table tbody tr:last-child td { border-bottom:none; }
    .zl-table tbody tr:hover td { background:var(--surface-2); }
    .zl-table .num, .zl-table .ta-right { text-align:right; }
    .zl-table .nowrap { white-space:nowrap; }
    .money { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); white-space:nowrap; }
    .zl-time { font-size:.73rem; color:var(--faint); }
    .zl-dash { color:var(--line); }
    .zl-dovod { max-width:220px; color:var(--muted); font-size:.83rem; }

    /* Menná bunka: plochý avatar + meno + osobné číslo */
    .zl-emp { display:flex; align-items:center; gap:9px; }
    .zl-ava { width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center;
        justify-content:center; font-weight:700; font-size:.7rem; color:var(--brand-ink); background:var(--brand-100);
        letter-spacing:.02em; }
    .zl-emp-info { display:flex; flex-direction:column; gap:1px; line-height:1.25; min-width:0; }
    .zl-emp-name { font-weight:600; color:var(--ink); }
    .zl-osc { font-family:ui-monospace, "SFMono-Regular", Menlo, monospace; font-size:.68rem; color:var(--muted);
        background:var(--line-soft); padding:0 5px; border-radius:4px; align-self:flex-start; letter-spacing:.02em; }
    .zl-loc { font-weight:700; color:var(--ink); }
    .zl-firma { font-size:.68rem; font-weight:600; color:var(--muted); background:var(--line-soft); padding:1px 6px;
        border-radius:4px; letter-spacing:.02em; }

    /* Stavové pilulky */
    .zl-pill { display:inline-flex; align-items:center; gap:5px; font-size:.73rem; font-weight:600;
        padding:2px 9px 2px 7px; border-radius:var(--r-pill); white-space:nowrap; }
    .zl-pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
    .zl-pill--caka { background:var(--warn-100); color:var(--warn-800); }
    /* „Čaká na prípravu hotovosti" — výrazný plný pill, odlíšený od mien (indigo) */
    .zl-pill--proc { background:var(--brand); color:var(--brand-ink-on); }
    /* „Pripravená — čaká na odovzdanie" — teal, odlíšené od prípravy aj od vybavenej */
    .zl-pill--handover { background:var(--teal-100); color:var(--teal-700); }
    .zl-pill--schvalena { background:var(--success-bg); color:var(--success-dark); }
    .zl-pill--zamietnuta { background:var(--danger-bg); color:var(--danger-dark); }

    /* „Čaká na koho" — reálne mená vykonávateľov */
    .zl-nextcell { min-width:180px; }
    .zl-actors { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
    .zl-actor { font-size:.72rem; font-weight:600; color:var(--brand-ink); background:var(--brand-50);
        border:1px solid var(--brand-200); padding:1px 8px; border-radius:var(--r-pill); }
    .zl-nobody { display:inline-flex; align-items:center; gap:5px; margin-top:5px; font-size:.73rem; color:var(--danger-dark); }
    .zl-onme-badge { margin-left:8px; font-size:.72rem; font-weight:700; color:var(--success-dark);
        background:var(--success-bg); border:1px solid var(--success-line); padding:2px 9px; border-radius:var(--r-pill); }
    .zl-table tr.on-me td { background:var(--success-bg); }
    .zl-table tr.on-me td:first-child { box-shadow:inset 3px 0 0 var(--success); }
    .zl-tag { display:inline-block; font-size:.68rem; font-weight:600; padding:1px 7px; border-radius:var(--r-pill); margin-left:4px; white-space:nowrap; }
    .zl-tag.good { background:var(--success-bg); color:var(--success-dark); }
    .zl-tag.wait { background:var(--brand-50); color:var(--brand-ink); }
    .zl-why { font-size:.7rem; color:var(--muted); margin-left:6px; cursor:help; white-space:nowrap; }
    .zl-selfnote { font-size:.76rem; color:var(--faint); display:inline-flex; align-items:center; gap:5px; }

    .zl-actions { display:flex; gap:7px; align-items:center; justify-content:flex-end; }
    .inline { margin:0; display:inline-flex; }

    /* Hľadanie a zoradenie tabuliek */
    .zl-search { margin-left:auto; width:170px; padding:5px 10px; border:1px solid var(--line);
        border-radius:var(--r-pill); font-size:.82rem; font-family:inherit; color:var(--ink);
        background:var(--surface); transition:.15s; }
    .zl-search:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
    .zl-search::placeholder { color:var(--faint); }
    .zl-card-head .zl-search + .zl-count { margin-left:0; }
    .zl-table th[data-sort] { cursor:pointer; user-select:none; }
    .zl-table th[data-sort]:hover { color:var(--brand-ink); }
    .zl-sip { font-size:.62rem; color:var(--muted); }

    /* Prázdny stav */
    .zl-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 16px; text-align:center; }
    .zl-empty .ti { font-size:26px; color:var(--brand-200); }
    .zl-empty p { margin:0; color:var(--muted); font-size:.88rem; }

    @media (max-width:640px) {
        .zl-actions { flex-wrap:wrap; }
        .zl-dovod { max-width:140px; }
    }

    /* ---------- Hotovostná vetva a nastavenie modulu ---------- */
    /* Hotovosť je jantárová (niečo sa fyzicky chystá), odovzdanie tyrkysové
       (peniaze čakajú na človeka) — rovnaká reč farieb ako v e-mailoch. */
    .zl-pill--cash { background:var(--warn-100); color:var(--warn-800); }

    .zl-btn-ghost { color:var(--ink-soft); background:var(--surface); border-color:var(--line); }
    .zl-btn-ghost:hover { border-color:var(--brand); color:var(--brand-ink); }

    .zl-varovanie { display:flex; gap:10px; align-items:flex-start; margin-bottom:14px;
        padding:11px 14px; border:1px solid var(--danger-line); background:var(--danger-bg);
        border-radius:var(--r-lg); font-size:.85rem; color:var(--danger-dark); }
    .zl-varovanie .ti { font-size:18px; flex:0 0 auto; }

    .zl-nastavenie { padding:0; margin-bottom:14px; }
    .zl-nastavenie > summary { display:flex; align-items:center; gap:10px; padding:12px 16px;
        cursor:pointer; font-size:.86rem; color:var(--ink-soft); list-style:none; }
    .zl-nastavenie > summary::-webkit-details-marker { display:none; }
    .zl-nastavenie > summary::after { content:'▾'; margin-left:auto; color:var(--faint); }
    .zl-nastavenie[open] > summary::after { content:'▴'; }
    .zl-nastavenie > summary:hover { background:var(--surface-2); }
    .zl-nastavenie em { font-style:normal; font-weight:700; color:var(--brand-ink); }
    .zl-nastavenie-form { padding:0 16px 16px; max-width:640px; }

    /* ---------- Karta prípadu (detail zálohy) ---------- */
    .zd-back { display:inline-flex; align-items:center; gap:6px; margin-bottom:12px;
        font-size:.83rem; font-weight:600; color:var(--muted); text-decoration:none; }
    .zd-back:hover { color:var(--brand-ink); }

    .zd-hlava-top { display:flex; align-items:center; gap:14px; }
    .zd-suma { margin-left:auto; font-size:1.5rem; font-weight:700; letter-spacing:-.02em;
        color:var(--ink); white-space:nowrap; }
    .zd-fakty { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
        gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
    .zd-fakty > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
    .zd-fakty span { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
    .zd-fakty strong { font-size:.88rem; font-weight:600; color:var(--ink); display:inline-flex;
        align-items:center; gap:5px; flex-wrap:wrap; }
    .zd-dovod { margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); }
    .zd-dovod span { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
    .zd-dovod p { margin:4px 0 0; font-size:.88rem; color:var(--ink-soft); }

    /* Panel akcie: keď je krok na prihlásenom, je orámovaný značkovou farbou —
       „toto je tvoja vec" musí byť vidno z druhého konca miestnosti. */
    .zd-akcia--na-mna { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-50); }
    .zd-veta { margin:0 0 12px; font-size:.9rem; color:var(--ink-soft); line-height:1.5; }
    .zd-veta .ti { color:var(--faint); }
    .zd-caka { margin:0; font-size:.85rem; color:var(--muted); display:flex; align-items:center;
        gap:6px; flex-wrap:wrap; }
    .zd-tlacidla { display:flex; gap:9px; flex-wrap:wrap; margin-top:4px; }
    .zd-tlacidla .zl-btn[disabled] { opacity:.45; cursor:not-allowed; }
    .zd-tlacidla--alebo { align-items:center; margin-top:10px; }
    .zd-alebo { font-size:.8rem; color:var(--faint); }

    /* Delegovanie je pri hotovosti hlavná akcia — preto formulár, nie panel. */
    .zd-deleg { padding:13px 14px; border:1px solid var(--brand-200); border-radius:var(--r-lg);
        background:var(--brand-50); }
    .zd-deleg-riadok { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
    .zd-deleg-riadok .zl-fld { flex:1 1 200px; min-width:170px; }
    .zd-deleg-riadok select, .zd-deleg-riadok input[type=text] { padding:8px 11px;
        border:1px solid var(--line); border-radius:var(--r); font-family:inherit;
        font-size:.88rem; color:var(--ink); background:var(--surface); transition:.15s; }
    .zd-deleg-riadok select:focus, .zd-deleg-riadok input:focus { outline:none;
        border-color:var(--brand); box-shadow:var(--ring); }
    .zd-deleg-riadok .zl-btn { margin-bottom:1px; }

    .zd-vyzva { display:flex; gap:11px; align-items:flex-start; margin-bottom:13px;
        padding:12px 14px; border-radius:var(--r-lg); font-size:.87rem; line-height:1.5;
        border:1px solid var(--warn-200); background:var(--warn-50); color:var(--warn-800); }
    .zd-vyzva .ti { font-size:19px; flex:0 0 auto; margin-top:1px; }
    .zd-vyzva--ok { border-color:var(--teal-200); background:var(--teal-50); color:var(--teal-800); }

    /* Platobný príkaz */
    .zd-prikaz { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start;
        padding:15px; border:1px solid var(--line); border-radius:var(--r-lg);
        background:var(--surface-2); margin-bottom:14px; }
    .zd-qr { display:flex; flex-direction:column; align-items:center; gap:5px; }
    .zd-qr img { width:200px; height:200px; border:1px solid var(--line); border-radius:var(--r);
        background:#fff; padding:6px; }
    .zd-qr span { font-size:.66rem; font-weight:700; letter-spacing:.06em; color:var(--muted);
        text-transform:uppercase; }
    .zd-udaje { display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:0; flex:1 1 260px; }
    .zd-udaje dt { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--faint);
        align-self:center; }
    .zd-udaje dd { margin:0; font-size:.9rem; font-weight:600; color:var(--ink); align-self:center; }
    .zd-udaje .mono { font-family:ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing:.01em; }
    .zd-kopiruj { font:inherit; color:inherit; background:none; border:none; padding:2px 6px;
        margin:-2px -6px; border-radius:var(--r-sm); cursor:pointer; display:inline-flex;
        align-items:center; gap:7px; }
    .zd-kopiruj:hover { background:var(--brand-50); color:var(--brand-ink); }
    .zd-kopiruj .ti { font-size:14px; color:var(--faint); }

    /* Nástroje spracovateľa (účet, prepnutie cesty) — schované, kým netreba. */
    .zd-nastroje { margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
        display:flex; flex-direction:column; gap:8px; }
    .zd-panel { border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
    .zd-panel > summary { display:flex; align-items:center; gap:8px; padding:9px 13px; cursor:pointer;
        font-size:.84rem; font-weight:600; color:var(--ink-soft); list-style:none; }
    .zd-panel > summary::-webkit-details-marker { display:none; }
    .zd-panel > summary:hover { color:var(--brand-ink); }
    .zd-panel > summary .ti { color:var(--faint); }
    .zd-form { padding:0 13px 13px; display:flex; flex-direction:column; gap:11px; max-width:560px; }
    .zd-form select, .zd-form input[type=text] { padding:8px 11px; border:1px solid var(--line);
        border-radius:var(--r); font-family:inherit; font-size:.88rem; color:var(--ink);
        background:var(--surface); transition:.15s; }
    .zd-form select:focus, .zd-form input:focus { outline:none; border-color:var(--brand);
        box-shadow:var(--ring); }
    .zd-form .zl-btn { align-self:flex-start; }

    /* Časová os prípadu */
    .zd-os { list-style:none; margin:0; padding:0; }
    .zd-krok { display:flex; gap:12px; padding-bottom:16px; position:relative; }
    .zd-krok:not(:last-child)::before { content:''; position:absolute; left:13px; top:28px; bottom:0;
        width:2px; background:var(--line); }
    .zd-bod { width:28px; height:28px; border-radius:50%; flex:0 0 auto; display:flex;
        align-items:center; justify-content:center; font-size:14px; z-index:1;
        background:var(--line-soft); color:var(--muted); }
    .zd-krok--hotovo .zd-bod { background:var(--success-bg); color:var(--success-dark); }
    .zd-krok--zle .zd-bod { background:var(--danger-bg); color:var(--danger-dark); }
    .zd-krok > div { display:flex; flex-direction:column; gap:2px; min-width:0; padding-top:3px; }
    .zd-krok strong { font-size:.88rem; color:var(--ink); }
    .zd-krok p { margin:3px 0 0; font-size:.83rem; color:var(--muted); line-height:1.45; }

    @media (max-width:640px) {
        .zd-prikaz { justify-content:center; }
        .zd-suma { font-size:1.25rem; }
    }

/* ==========================================================================
   templates/zmluvy/_style.html
   ========================================================================== */

    /* ---------- Modul Zmluvy ---------- */
    .zm-head { display:flex; align-items:center; gap:13px; margin-bottom:16px; }
    .zm-head-ico { width:40px; height:40px; border-radius:var(--r); flex:0 0 auto;
        background:linear-gradient(150deg, var(--brand), var(--brand-dark)); color:var(--brand-ink-on);
        display:flex; align-items:center; justify-content:center; font-size:21px; box-shadow:var(--shadow-xs); }
    .zm-head h1 { margin:0; font-size:1.35rem; letter-spacing:-.01em; }
    .zm-sub { margin:1px 0 0; color:var(--muted); font-size:.88rem; }
    .zm-head-actions { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

    .zm-kpi { margin-bottom:16px; }

    /* Vnútromodulové taby */
    .zm-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:0 0 16px; flex-wrap:wrap; }
    .zm-tabs a { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; text-decoration:none;
        color:var(--muted); font-size:.9rem; font-weight:600; border-bottom:2px solid transparent;
        margin-bottom:-1px; border-radius:var(--r-sm) var(--r-sm) 0 0; }
    .zm-tabs a:hover { color:var(--brand); background:var(--surface-2); }
    .zm-tabs a.is-active { color:var(--brand); border-bottom-color:var(--brand); }
    .zm-tabs a .ti { font-size:17px; }
    .zm-tabs-note { font-size:.68rem; font-weight:500; color:var(--faint); }
    .zm-tabbadge { min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--accent);
        color:#fff; font-size:.68rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }

    /* Filtre */
    .zm-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
    .zm-search { position:relative; flex:1 1 260px; min-width:200px; }
    .zm-search .ti { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:16px; }
    .zm-search input { width:100%; padding:9px 11px 9px 34px; border:1px solid var(--line); border-radius:var(--r-sm);
        font-size:.9rem; font-family:inherit; background:var(--surface); color:var(--ink); }
    .zm-filters select { padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
        font-size:.85rem; font-family:inherit; background:var(--surface); color:var(--ink); }
    .zm-filters input:focus, .zm-filters select:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }

    /* Karty */
    .zm-card { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
        box-shadow:var(--shadow-xs); padding:15px 18px 16px; margin-bottom:14px; }
    .zm-card-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
    .zm-card-head h2 { margin:0; font-size:1rem; font-weight:700; letter-spacing:-.01em; }
    .zm-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;
        display:inline-flex; align-items:center; justify-content:center; }

    /* Tabuľka */
    .zm-tablewrap { overflow-x:auto; margin:0 -4px; }
    .zm-table { width:100%; border-collapse:collapse; font-size:.86rem; }
    .zm-table th { text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
        color:var(--faint); font-weight:600; padding:0 10px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
    .zm-table th.num { text-align:right; }
    .zm-table td { padding:10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; color:var(--ink-soft); }
    .zm-table tbody tr { cursor:pointer; }
    .zm-table tbody tr:last-child td { border-bottom:none; }
    .zm-table tbody tr:hover td { background:var(--surface-2); }
    .zm-table .num { text-align:right; }
    .zm-table .nowrap { white-space:nowrap; }
    .money { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); white-space:nowrap; }
    .zm-name { font-weight:600; color:var(--ink); text-decoration:none; }
    .zm-name:hover { color:var(--brand); text-decoration:underline; }
    .zm-cislo { display:inline-block; margin-left:6px; font-size:.7rem; color:var(--muted);
        background:var(--line-soft); padding:1px 6px; border-radius:4px; font-family:ui-monospace, Menlo, monospace; }
    .zm-muted { color:var(--muted); font-size:.78rem; }
    .zm-firma { font-weight:700; color:var(--ink); }
    .zm-tag { display:inline-block; font-size:.68rem; font-weight:600; padding:1px 7px; border-radius:var(--r-pill);
        margin-left:4px; background:var(--brand-50); color:var(--brand-ink); white-space:nowrap; }

    /* Pilulky expirácie */
    .zm-pill { display:inline-block; margin-left:6px; font-size:.7rem; font-weight:700; padding:1px 8px; border-radius:var(--r-pill); white-space:nowrap; }
    .zm-pill--soon { background:var(--warn-100); color:var(--warn-800); }
    .zm-pill--exp { background:var(--danger-bg); color:var(--danger-dark); }

    /* Stavové štítky */
    .zm-state { display:inline-block; font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:var(--r-pill); white-space:nowrap; }
    .zm-state--aktivna { background:var(--success-bg); color:var(--success-dark); }
    .zm-state--koncept { background:var(--line-soft); color:var(--muted); }
    .zm-state--expirovana { background:var(--danger-bg); color:var(--danger-dark); }
    .zm-state--vypovedana { background:var(--warn-100); color:var(--warn-800); }
    .zm-state--archivovana { background:var(--line-soft); color:var(--faint); }

    /* Prázdny stav */
    .zm-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 16px; text-align:center; }
    .zm-empty .ti { font-size:28px; color:var(--brand-200); }
    .zm-empty p { margin:0; color:var(--muted); font-size:.9rem; }

    /* Detail */
    .zm-detail-grid { display:grid; grid-template-columns:2fr 1fr; gap:14px; align-items:start; }
    @media (max-width:820px) { .zm-detail-grid { grid-template-columns:1fr; } }
    .zm-meta { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px 18px; }
    .zm-meta dt { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); font-weight:600; margin-bottom:2px; }
    .zm-meta dd { margin:0 0 2px; font-size:.92rem; color:var(--ink); font-weight:500; }
    .zm-back { display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:.85rem; margin-bottom:10px; }
    .zm-back:hover { color:var(--brand); }
    .zm-doclist { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
    .zm-doclist a { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line);
        border-radius:var(--r-sm); text-decoration:none; color:var(--ink); font-size:.85rem; background:var(--surface); }
    .zm-doclist a:hover { border-color:var(--brand); background:var(--brand-50); }
    .zm-doclist .ti { color:var(--brand); font-size:17px; }
    .zm-doclist .zm-docsize { margin-left:auto; color:var(--faint); font-size:.72rem; }
    .zm-timeline { list-style:none; margin:0; padding:0; }
    .zm-timeline li { position:relative; padding:0 0 14px 20px; border-left:2px solid var(--line); }
    .zm-timeline li:last-child { border-left-color:transparent; padding-bottom:0; }
    .zm-timeline li::before { content:""; position:absolute; left:-6px; top:3px; width:10px; height:10px;
        border-radius:50%; background:var(--brand); }
    .zm-obrat { background:var(--warn-50); border:1px solid var(--warn-100); border-radius:var(--r-sm); padding:10px 12px; margin-top:10px; }
    .zm-obrat h4 { margin:0 0 4px; font-size:.8rem; color:var(--warn-800); display:flex; align-items:center; gap:6px; }

    /* Formulár */
    .zm-form { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-xs); padding:18px; }
    .zm-fset { border:none; margin:0 0 18px; padding:0; }
    .zm-fset > legend { font-size:.8rem; font-weight:700; color:var(--brand-ink); text-transform:uppercase; letter-spacing:.04em;
        padding:0 0 10px; margin-bottom:12px; border-bottom:1px solid var(--line-soft); width:100%; }
    .zm-fgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px 14px; }
    .zm-fld { display:flex; flex-direction:column; gap:5px; }
    .zm-fld.full { grid-column:1 / -1; }
    .zm-fld > span { font-size:.77rem; font-weight:600; color:var(--ink-soft); }
    .zm-fld input, .zm-fld select, .zm-fld textarea { width:100%; padding:9px 11px; border:1px solid var(--line);
        border-radius:var(--r-sm); font-size:.9rem; font-family:inherit; color:var(--ink); background:var(--surface); }
    .zm-fld textarea { resize:vertical; }
    .zm-fld input:focus, .zm-fld select:focus, .zm-fld textarea:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
    .zm-check { flex-direction:row; align-items:center; gap:8px; }
    .zm-check input { width:auto; }
    .zm-formfoot { display:flex; gap:10px; align-items:center; margin-top:6px; }
    .zm-formfoot .btn-danger { margin-left:auto; }
    .zm-hint { font-size:.76rem; color:var(--faint); }
    .req { color:var(--danger); font-weight:700; margin-left:2px; }
    .zm-reqnote { font-size:.8rem; color:var(--muted); margin:0 0 12px; }
    .zm-fld.chyba input, .zm-fld.chyba select { border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-bg); }
    .zm-req-hint { font-size:.76rem; color:var(--warn-800); margin:6px 0 0; display:flex; align-items:center; gap:5px; }
    /* Sken, ktorý je už na serveri (odložený z AI extrakcie) — formulár ho
       druhýkrát nenahráva, len sa naň odkazuje tokenom. */
    /* Hlásenie „pracujem, počkaj" — má byť vidieť, nie sa strácať v šedej. */
    .zm-th-sort { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
    .zm-th-sort:hover { color:var(--brand); }
    .zm-th-sort .ti { font-size:12px; opacity:.45; }
    .zm-th-sort:hover .ti, .zm-th-sort .ti-chevron-up, .zm-th-sort .ti-chevron-down { opacity:1; }
    .zm-praca { font-size:.8rem; font-weight:600; color:var(--brand); display:inline-flex;
        align-items:center; gap:6px; }
    .zm-praca::before { content:""; width:12px; height:12px; border-radius:50%;
        border:2px solid var(--brand); border-top-color:transparent;
        animation:zm-toc .8s linear infinite; }
    @keyframes zm-toc { to { transform:rotate(360deg); } }
    @media (prefers-reduced-motion:reduce) { .zm-praca::before { animation:none; } }
    /* Väzby zmluvy — musia udrieť do očí hneď pod hlavičkou. */
    .zm-vazby { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
        margin:0 0 12px; padding:12px 14px; border:1px solid var(--brand-200);
        border-left:4px solid var(--brand); border-radius:var(--r-lg);
        background:var(--brand-50); }
    .zm-vazby-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
        font-weight:700; color:var(--brand-ink); display:inline-flex; align-items:center; gap:6px; }
    .zm-vazby-chips { display:flex; flex-wrap:wrap; gap:8px; }
    .zm-vazba-chip { display:inline-flex; align-items:center; gap:9px; padding:8px 13px;
        border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
        text-decoration:none; color:var(--ink); font-size:.82rem; line-height:1.25;
        box-shadow:var(--shadow-xs); }
    .zm-vazba-chip:hover { border-color:var(--brand); background:var(--surface-2); }
    .zm-vazba-chip .ti { font-size:19px; flex:0 0 auto; }
    .zm-vazba-chip strong { font-weight:700; }
    .zm-vazba-chip span { color:var(--muted); }
    .zm-vazba-chip strong { color:var(--ink); }
    .zm-vazba-chip--zaruka .ti { color:var(--success); }
    .zm-vazba-chip--dodatok .ti { color:var(--brand); }
    .zm-vazba-chip--rodic .ti { color:var(--warn-500); }

    /* Skok z lišty na konkrétny dodatok — cieľ musí byť vidieť. */
    .zm-timeline li:target { background:var(--warn-50); border-radius:var(--r-sm);
        box-shadow:0 0 0 3px var(--warn-100); }

    /* Naviazanie na zmluvu — lišta akcií na detaile a banner vo formulári. */
    .zm-pridat { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
        margin:0 0 14px; padding:10px 14px; border:1px solid var(--line);
        border-radius:12px; background:var(--surface-2); }
    .zm-pridat-label { font-size:.8rem; font-weight:600; color:var(--ink-soft);
        display:inline-flex; align-items:center; gap:6px; margin-right:2px; }
    .zm-vazba { display:flex; gap:10px; align-items:flex-start; margin:0 0 14px;
        padding:12px 14px; border:1px solid var(--brand-200); border-radius:12px;
        background:var(--brand-50); font-size:.86rem; color:var(--ink-soft); }
    .zm-vazba .ti { color:var(--brand-ink); font-size:1.1rem; }
    .zm-dodatok { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:10px;
        background:var(--surface-2, transparent); }
    .zm-odlozene { display:flex; flex-wrap:wrap; gap:8px; }
    .zm-odlozene:not(:empty) { margin-top:10px; }
    .zm-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
        border:1px solid var(--success-line); background:var(--success-bg);
        color:var(--success-dark); border-radius:999px; font-size:.78rem; }


/* ==========================================================================
   templates/navstevnost/index.html — Návštevnosť portálu
   --------------------------------------------------------------------------
   Obrazovka stojí na komponentoch systému (stat-card, panel, filterbar,
   table-wrap + table.tbl). Tu je len to, čo systém nemá: filtračný riadok
   s oknami, graf a rozpadové zoznamy. Všetko zúžené na `.nv-`.
   ========================================================================== */

    .nv-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px;
        background:var(--sunken); border:1px solid var(--line); border-radius:var(--r);
        padding:12px 14px; margin-bottom:18px; }
    .nv-okna { display:flex; gap:0; }
    .nv-pill { border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
        font-family:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
        padding:7px 13px; margin:0; }
    .nv-pill:first-child { border-radius:var(--r-sm) 0 0 var(--r-sm); }
    .nv-pill:last-child { border-radius:0 var(--r-sm) var(--r-sm) 0; }
    .nv-pill + .nv-pill { border-left:0; }
    .nv-pill:hover { background:var(--tonal); color:var(--ink); }
    .nv-pill.is-on { background:var(--brand); border-color:var(--brand); color:var(--brand-ink-on); }
    .nv-f { display:flex; flex-direction:column; gap:4px; font-size:.74rem; font-weight:640;
        color:var(--faint); letter-spacing:.02em; }
    .nv-f input, .nv-f select { height:34px; padding:0 9px; font-size:.84rem; }
    .nv-check { display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--ink-soft);
        padding-bottom:7px; }
    .nv-reset { font-size:.8rem; color:var(--faint); text-decoration:none; padding-bottom:8px; }
    .nv-reset:hover { color:var(--ink); text-decoration:underline; }

    /* Graf: stĺpce = zobrazenia, krivka = unikátni používatelia. Vodorovný
       scroll je vnútri wrapu, stránka sa nehýbe (pravidlo šírky na QHD). */
    .nv-chartwrap { overflow-x:auto; overflow-y:hidden; padding-bottom:4px; }
    .nv-chart { width:100%; min-width:640px; height:auto; display:block; }
    .nv-chart .nv-bar { fill:var(--c1); }
    .nv-chart .nv-bar:hover { fill:var(--c3); }
    .nv-chart .nv-line { stroke:var(--c2); stroke-width:2; stroke-linejoin:round; }
    .nv-chart .nv-axis { stroke:var(--axis); stroke-width:1; }
    .nv-chart .nv-lbl { fill:var(--faint); font-size:11px; font-family:var(--font); }
    .nv-legend { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:18px;
        font-size:.8rem; color:var(--ink-soft); }
    .nv-legend li { display:inline-flex; align-items:center; gap:7px; }
    .nv-dot { width:11px; height:11px; border-radius:3px; display:block; }
    .nv-dot-bar { background:var(--c1); }
    .nv-dot-line { background:var(--c2); }

    /* Rozpad (zariadenia): meno · pásik · podiel · doplnok pod tým. */
    .nv-breakdown { display:flex; flex-direction:column; gap:12px; }
    .nv-bd { display:grid; grid-template-columns:1fr 90px 52px; align-items:center;
        column-gap:10px; row-gap:2px; }
    .nv-bd-n { display:inline-flex; align-items:center; gap:8px; font-size:.87rem; color:var(--ink); }
    .nv-bd-n .ti { font-size:17px; color:var(--faint); }
    .nv-bd b { text-align:right; font-size:.87rem; font-variant-numeric:tabular-nums; }
    .nv-bd em { grid-column:1 / -1; font-style:normal; font-size:.74rem; color:var(--faint); }
    .nv-bd .bar-mini > i { background:var(--c1); }

    /* Spodná hranica je šírka NAJUŽŠEJ tabuľky, ktorá v tejto trojici žije
       (systém/prehliadač: 5 stĺpcov ≈ 440 px). Pri 340 px sa na 1366 px
       monitore vošli tri stĺpce, ale tabuľky v nich museli scrollovať do
       boku — radšej dva široké panely než tri úzke. */
    .nv-grid3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(440px, 1fr));
        gap:18px; align-items:start; }
    .nv-grid3 .panel { margin-bottom:0; }

    .nv-mi { color:var(--faint); font-size:16px; margin-right:4px; vertical-align:-2px; }
    .nv-barcell { display:inline-flex; align-items:center; gap:9px; }
    .nv-barcell .bar-mini { width:96px; }
    .nv-barcell .bar-mini > i { background:var(--c1); }
    .nv-barcell em { font-style:normal; font-size:.8rem; color:var(--ink-soft);
        font-variant-numeric:tabular-nums; min-width:44px; text-align:right; }

    .nv .tbl tbody tr.nv-off td { color:var(--faint); }
    .nv .tbl th.nv-sortable { cursor:pointer; user-select:none; }
    .nv .tbl th.nv-sortable:hover { color:var(--ink); }
    .nv .tbl th.is-asc::after { content:" ▲"; font-size:.62rem; }
    .nv .tbl th.is-desc::after { content:" ▼"; font-size:.62rem; }

    .nv-note { margin:10px 17px 14px; font-size:.76rem; color:var(--faint); max-width:var(--read-max); }
    .nv-priv { display:flex; gap:10px; align-items:flex-start; margin:22px 0 0;
        padding:13px 15px; border:1px solid var(--line); border-radius:var(--r);
        background:var(--sunken); font-size:.8rem; color:var(--ink-soft); }
    .nv-priv .ti { font-size:18px; color:var(--faint); flex:0 0 auto; }
    .nv-priv code { font-size:.76rem; }

/* ==========================================================================
   ZJEDNOTENIE — jeden tabuľkový engine, jedny záložky, jedny tlačidlá
   --------------------------------------------------------------------------
   Moduly si historicky spravili vlastnú tabuľku (12 rôznych tried), vlastné
   záložky a vlastné pilulky. Tento blok ich sťahuje na spoločný vzhľad zo
   styles.css bez toho, aby sa museli prepisovať šablóny a JS, ktorý na tých
   triedach visí. Je zámerne NA KONCI súboru — pri rovnakej špecificite
   vyhráva neskoršie pravidlo.

   Nové obrazovky už píšu rovno .table-wrap + table.tbl.
   ========================================================================== */

/* --- Obal tabuľky: ohraničená výška + vlastný scroll ---------------------- */
.mz-tablewrap, .dz-tablewrap, .zl-tablewrap, .zm-tablewrap,
.vt-tablewrap, .sv-tablewrap, .rep-tablewrap, .fin-tablewrap, .tz-tablewrap {
    overflow: auto;
    max-height: calc(100vh - 190px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: none;
    margin: 0;
}

/* --- Telo tabuľky --------------------------------------------------------- */
.mz-table, .vp-table, .dz-table, .zl-table, .zm-table, .rep-table,
.fin-table, .sv-table, .vt-table, .konta-table, .rbac-table, .audit-table, .tz-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--cell-fs);
    background: var(--surface);
}

.mz-table thead th, .vp-table thead th, .dz-table thead th, .zl-table thead th,
.zm-table thead th, .rep-table thead th, .fin-table thead th, .sv-table thead th,
.vt-table thead th, .konta-table thead th, .rbac-table thead th, .audit-table thead th, .tz-table thead th {
    background: var(--sunken);
    color: var(--ink-soft);
    font-size: .735rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    text-align: left;
    height: 36px;
    padding: 0 var(--cell-x);
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
    box-shadow: inset 0 -1px 0 var(--line);
    vertical-align: middle;
}

/* Na menších monitoroch (HD notebook) sa dlhý nadpis stĺpca smie zalomiť do
   dvoch riadkov — „Výnosy YTD (účt.)" tak z 148 px spadne pod 100. Hlavička
   narastie o riadok, ktorý sa prečíta raz; šírka tabuľky trápi pri každom
   riadku. Dáta v bunkách sa nezalamujú, tie musia ostať na jednom riadku.
   Pravidlo musí byť TU (nie v `styles.css`): modules.css sa načítava druhý,
   takže rovnako špecifické pravidlo odtiaľ by výnimku prebilo späť. */
@media (min-width: 861px) and (max-width: 1920px) {
    .mz-table thead th, .dz-table thead th, .zl-table thead th,
    .zm-table thead th, .rep-table thead th, .fin-table thead th,
    .sv-table thead th, .vt-table thead th, .konta-table thead th,
    .rbac-table thead th, .audit-table thead th, .tz-table thead th,
    .fin-table th { white-space: normal; }
}

.mz-table tbody td, .vp-table tbody td, .dz-table tbody td, .zl-table tbody td,
.zm-table tbody td, .rep-table tbody td, .fin-table tbody td, .sv-table tbody td,
.vt-table tbody td, .konta-table tbody td, .rbac-table tbody td, .audit-table tbody td {
    height: var(--row-h);
    padding: 0 var(--cell-x);
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    vertical-align: middle;
}

.mz-table tbody tr:hover td, .vp-table tbody tr:hover td, .dz-table tbody tr:hover td,
.zl-table tbody tr:hover td, .zm-table tbody tr:hover td, .rep-table tbody tr:hover td,
.fin-table tbody tr:hover td, .sv-table tbody tr:hover td, .vt-table tbody tr:hover td,
.konta-table tbody tr:hover td, .rbac-table tbody tr:hover td, .audit-table tbody tr:hover td {
    background: var(--tonal);
}

/* Súčtový riadok — tónovaná plocha, prilepený dole. */
.mz-table tfoot td, .vp-table tfoot td, .dz-table tfoot td, .zl-table tfoot td,
.zm-table tfoot td, .rep-table tfoot td, .fin-table tfoot td, .sv-table tfoot td,
.vt-table 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;
}

/* Čísla vždy vpravo a pod sebou — nech sa modul rozhodol pomenovať to akokoľvek. */
.mz-table .n, .vp-table .n, .dz-table .num, .dz-table .ta-right, .zl-table .n,
.zm-table .n, .rep-table .n, .fin-table .n, .sv-table .n, .vt-table .n,
.konta-table .n, .rbac-table .n, .audit-table .n,
.mz-table .num, .vp-table .num, .zl-table .num, .rep-table .num, .fin-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Záložky modulu ------------------------------------------------------- */
.dz-tabs, .zm-tabs, .rep-tabs, .fin-tabs, .tz-tabs {
    display: flex; gap: 3px; flex-wrap: wrap;
    border-bottom: 1px solid var(--line); margin: 0 0 18px;
}
.dz-tabs a, .zm-tabs a, .tz-tabs a, .rep-tab, .fin-tab {
    color: var(--faint); font-size: .855rem; font-weight: 620;
    padding: 9px 13px; border-bottom: 2px solid transparent; margin-bottom: -1px;
    border-radius: var(--r-sm) var(--r-sm) 0 0; background: transparent;
}
.dz-tabs a:hover, .zm-tabs a:hover, .tz-tabs a:hover, .rep-tab:hover, .fin-tab:hover {
    color: var(--ink); background: var(--sunken);
}
.dz-tabs a.is-active, .zm-tabs a.is-active, .tz-tabs a.is-active, .rep-tab.is-on, .fin-tab.is-on {
    color: var(--ink); border-bottom-color: var(--accent); background: transparent;
}
.dz-tabs a.is-active .ti, .zm-tabs a.is-active .ti, .tz-tabs a.is-active .ti, .rep-tab.is-on .ti, .fin-tab.is-on .ti {
    color: var(--accent);
}

/* --- Pilulky stavov: rovnaký tvar ako .tag zo systému --------------------- */
.dz-pill, .zl-pill, .vp-ptag, .zm-stav, .zm-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;
}

/* --- Modulové primárne tlačidlá: rovnaká plocha ako .btn-primary ---------- */
.dz-btn-primary, .zl-btn-primary, .zm-btn-primary {
    background: var(--brand);
    color: var(--brand-ink-on);
    box-shadow: none;
    border-color: transparent;
}
.dz-btn-primary:hover, .zl-btn-primary:hover, .zm-btn-primary:hover {
    background: var(--brand-dark); filter: none;
}

/* --- Vyhľadávacie a filtračné lišty modulov ------------------------------- */
.dz-toolbar, .zm-filters, .mzf-bar, .zl-filters {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.dz-toolbar select, .dz-toolbar input[type=date], .zm-filters select, .zl-filters select {
    height: 32px; padding: 0 9px; font-size: .82rem;
}

/* ==========================================================================
   Príprava miezd — panel „prečo mi v menu svieti číslo"
   --------------------------------------------------------------------------
   Číslo pri module musí byť rozkliknuteľné na dôvod. Toto je ten dôvod:
   strediská, ktorých otvorená príprava ešte nie je odoslaná.
   ========================================================================== */

.mz-todo {
    border: 1px solid var(--warning-line);
    background: var(--warning-bg);
    border-radius: var(--r-lg);
    padding: 13px 16px 14px;
    margin-bottom: 16px;
}
.mz-todo-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mz-todo-h .ti { font-size: 19px; color: var(--warning); }
.mz-todo-h b { font-size: .95rem; color: var(--warning-ink); }
.mz-todo-note { font-size: .76rem; color: var(--warning); opacity: .85; }
.mz-todo-p { margin: 6px 0 11px; font-size: .86rem; color: var(--ink-soft); max-width: 92ch; }
.mz-todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mz-todo-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 5px 13px 5px 11px;
    text-decoration: none; color: var(--ink); font-size: .84rem;
    transition: border-color .12s var(--ease), background .12s var(--ease);
}
.mz-todo-chip:hover { border-color: var(--char-400); background: var(--tonal); }
.mz-todo-chip.is-late { border-color: var(--danger-line); }
.mz-todo-chip.is-here { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.mz-todo-kod { font-weight: 650; }
.mz-todo-obd { color: var(--muted); font-size: .78rem; text-transform: capitalize; }
.mz-todo-tag {
    font-size: .7rem; font-weight: 650; padding: 1px 8px; border-radius: var(--r-pill);
    background: var(--sunken); color: var(--muted); border: 1px solid var(--line);
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.mz-todo-tag .ti { font-size: 12px; }
.mz-todo-tag.late { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.mz-todo-tag.bad { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.mz-todo-tag.here { background: var(--brand); color: var(--brand-ink-on); border-color: transparent; }

/* KPI dlaždica, ktorá vedie na svoj dôvod */
a.stat-card--link { text-decoration: none; color: inherit; transition: border-color .12s var(--ease); }
a.stat-card--link:hover { border-color: var(--char-400); }
a.stat-card--link::after {
    content: "\ea61"; font-family: "tabler-icons"; position: absolute; right: 12px; top: 12px;
    font-size: 15px; color: var(--faint); opacity: .6;
}

.mz-todo-more { margin-top: 9px; }
.mz-todo-more > summary {
    cursor: pointer; font-size: .8rem; font-weight: 620; color: var(--warning);
    list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.mz-todo-more > summary::before { content: "\ea5f"; font-family: "tabler-icons"; font-size: 14px; }
.mz-todo-more[open] > summary::before { content: "\ea62"; }
.mz-todo-more > summary::-webkit-details-marker { display: none; }
.mz-todo-more .mz-todo-list { margin-top: 9px; }

/* Druhá skupina panela — práca, ktorá ešte nemešká (v menu nesvieti). */
.mz-todo.is-running { border-color: var(--line); background: var(--sunken); }
.mz-todo.is-running .mz-todo-h .ti { color: var(--muted); }
.mz-todo.is-running .mz-todo-h b { color: var(--ink); }
.mz-todo.is-running .mz-todo-note { color: var(--faint); }

/* Zbalená skupina „beží tento mesiac" — informácia, nie výzva k akcii. */
details.mz-todo.is-running > summary { cursor: pointer; list-style: none; }
details.mz-todo.is-running > summary::-webkit-details-marker { display: none; }
details.mz-todo.is-running > summary::after {
    content: "\ea5f"; font-family: "tabler-icons"; font-size: 15px;
    color: var(--faint); margin-left: 4px;
}
details.mz-todo.is-running[open] > summary::after { content: "\ea62"; }
details.mz-todo.is-running[open] > .mz-todo-list { margin-top: 11px; }

/* Cena obeda — editovateľný parameter priamo v dlaždici (mení sa opatrením) */
.rep-cena-form { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px;
  padding-top:10px; border-top:1px dashed var(--line); }
.rep-cena-l { font-size:.76rem; color:var(--muted); font-weight:600; }
.rep-cena-eur { font-size:.76rem; color:var(--muted); }
.rep-cena-in { border:1px solid var(--line); border-radius:var(--r-sm,6px); padding:3px 6px;
  font-size:.82rem; font-variant-numeric:tabular-nums; background:var(--surface); color:var(--ink);
  max-width:9rem; }
.rep-cena-in:focus { outline:2px solid var(--brand-line,var(--line)); outline-offset:1px; }
.rep-cena-hint { margin-top:6px; font-size:.72rem; color:var(--faint); line-height:1.45; }

/* ==========================================================================
   MODUL TREZOR — hotovosť v officei
   --------------------------------------------------------------------------
   Obrazovka vedome kopíruje excelový hárok, ktorý kolegyne poznajú: stĺpec
   nominálií od 500 € po cent a JEDEN stĺpec, do ktorého sa píše. Všetko
   ostatné (stav, súčty, rozdiel) sa dopočítava — tak ako to v hárku robil
   vzorec. Vstupné políčka sú preto vysoké a zarovnané doprava: písať sa má
   z numerickej klávesnice, bez trafovania myšou.
   ========================================================================== */

.tz-page { max-width: 100%; }
.tz-firma { font-size: .72em; color: var(--faint); font-weight: 600; letter-spacing: .02em; }
.tz-stats { margin-bottom: 16px; }

/* Varovanie „nominálie sú v mínuse" — evidencia zaostáva za realitou. */
.tz-alert {
    display: flex; gap: 11px; align-items: flex-start;
    border: 1px solid var(--warning-line); background: var(--warning-bg);
    border-radius: var(--r-lg); padding: 12px 15px; margin-bottom: 16px;
    font-size: .84rem; color: var(--ink-soft); max-width: 100ch;
}
.tz-alert .ti { font-size: 19px; color: var(--warning); flex: 0 0 auto; }
.tz-alert strong { color: var(--warning-ink); }

/* --- Prepínač režimu: pripočítať vs. prepočítať --------------------------- */
.tz-zapis {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); padding: 15px 17px 17px; margin-bottom: 16px;
}
.tz-rezim { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.tz-rez {
    flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; position: relative;
    border: 1px solid var(--line); border-radius: var(--r); padding: 10px 13px;
    cursor: pointer; background: var(--sunken);
    transition: border-color .12s var(--ease), background .12s var(--ease);
}
.tz-rez input { position: absolute; opacity: 0; pointer-events: none; }
.tz-rez span { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: .88rem; }
.tz-rez em { font-style: normal; font-size: .75rem; color: var(--faint); }
.tz-rez:hover { border-color: var(--char-400); }
.tz-rez.is-on { border-color: var(--brand); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand); }
.tz-rez.is-on span { color: var(--brand-ink); }

.tz-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 11px; }
.tz-meta label { display: flex; flex-direction: column; gap: 3px; font-size: .76rem;
    color: var(--muted); font-weight: 620; }
.tz-meta input, .tz-meta select { height: 34px; padding: 0 9px; font-size: .86rem;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.tz-meta .tz-pozn { flex: 1 1 320px; }
.tz-meta .tz-pozn input { width: 100%; }
.tz-nepovinne { font-weight: 500; color: var(--faint); text-transform: none; }

/* Proti čomu sa dnešný počet porovnáva — posledný prepočet a čo systém eviduje
   odvtedy. Bez toho je rozdiel len číslo bez príbehu. */
.tz-odvtedy {
    border: 1px solid var(--line); border-left: 3px solid var(--brand);
    background: var(--sunken); border-radius: var(--r);
    padding: 10px 14px; margin-bottom: 12px; font-size: .8rem; color: var(--ink-soft);
}
.tz-odvtedy-h { display: flex; align-items: center; gap: 8px; font-weight: 620; color: var(--ink); }
.tz-odvtedy-h .ti { font-size: 16px; color: var(--faint); }
.tz-odvtedy p { margin: 5px 0 0; max-width: 110ch; line-height: 1.5; }

.tz-hint, .tz-vhint {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: .78rem; color: var(--ink-soft); background: var(--sunken);
    border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px;
    margin-bottom: 11px;
}
.tz-hint .ti, .tz-vhint .ti { font-size: 16px; color: var(--faint); }
.tz-hint kbd {
    font-family: inherit; font-size: .72rem; font-weight: 650; padding: 1px 6px;
    border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
    background: var(--surface); color: var(--ink-soft);
}

/* --- Mriežka nominálií ---------------------------------------------------- */
.tz-tablewrap { overflow: auto; max-height: calc(100vh - 190px);
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.tz-table { width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: var(--cell-fs); background: var(--surface); }
.tz-table .l { text-align: left; }
.tz-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.tz-table th.tz-th-vstup { background: var(--brand-50); color: var(--brand-ink); }
.tz-th-sub { font-weight: 500; opacity: .75; letter-spacing: 0; text-transform: none; }
.tz-table tbody td { padding: 4px 11px; border-bottom: 1px solid var(--line); }
.tz-table tfoot td { padding: 9px 11px; font-weight: 700; background: var(--sunken); }

/* Riadok drobných: do trezora patrí, do obálky sa nikdy nedostane. */
.tz-table tr.tz-drobne td:first-child { color: var(--muted); }
.tz-mini {
    display: inline-block; margin-left: 7px; font-size: .68rem; font-weight: 600;
    color: var(--faint); background: var(--sunken); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 0 7px;
}
.tz-mini-bad { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }
.tz-mince-row td { background: var(--sunken); }

.tz-in {
    width: 100%; max-width: 8rem; height: 32px; text-align: right;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
    font-size: .95rem; font-weight: 620; font-variant-numeric: tabular-nums;
    padding: 0 8px;
}
.tz-in:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.tz-table tr.tz-zmenene td { background: var(--brand-50); }
.tz-table tr.tz-zmenene .tz-po, .tz-table tr.tz-zmenene .tz-hod { color: var(--brand-ink); font-weight: 700; }
/* Napočítané menej, než systém eviduje — buď chýba zápis výdaja, alebo je manko. */
.tz-table tr.tz-chyba td { background: var(--danger-bg); }
.tz-table tr.tz-chyba .tz-po { color: var(--danger); font-weight: 700; }

.tz-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
.tz-bilancia { flex: 1 1 auto; font-size: .82rem; color: var(--faint); font-weight: 600; }
.tz-bilancia.ok { color: var(--success-dark); }
.tz-bilancia.warn { color: var(--warning); }
.tz-bilancia.zle { color: var(--danger); }

/* --- Panel výdaja --------------------------------------------------------- */
.tz-panel { border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); padding: 13px 16px 15px; margin-bottom: 16px; }
.tz-panel-sum, .tz-panel-h {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; font-weight: 650; font-size: .9rem; cursor: pointer;
}
.tz-panel-h { cursor: default; margin-bottom: 10px; }
.tz-panel-sum > span, .tz-panel-h > span { display: flex; align-items: center; gap: 8px; }
.tz-panel-sum em { font-style: normal; font-size: .75rem; color: var(--faint); font-weight: 500; }
.tz-panel-sum::-webkit-details-marker { display: none; }
details.tz-panel > .tz-panel-sum { list-style: none; }
details.tz-panel[open] > .tz-panel-sum { margin-bottom: 13px; padding-bottom: 11px;
    border-bottom: 1px solid var(--line); }

.tz-vmriezka { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.tz-vnom { display: flex; flex-direction: column; gap: 1px; width: 5.9rem;
    border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 7px; background: var(--sunken); }
.tz-vnom-l { font-size: .7rem; font-weight: 650; color: var(--muted); }
.tz-vnom em { font-style: normal; font-size: .64rem; color: var(--faint); }
.tz-vin { width: 100%; height: 27px; border: 1px solid var(--line); border-radius: 5px;
    background: var(--surface); color: var(--ink); text-align: right; padding: 0 6px;
    font-size: .85rem; font-variant-numeric: tabular-nums; }
.tz-vin.je-zle { border-color: var(--danger); background: var(--danger-bg); }
.tz-vnom.tz-drobne { opacity: .82; }

/* --- Kniha pohybov -------------------------------------------------------- */
.tz-filtre { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.tz-filtre label { display: flex; flex-direction: column; gap: 3px; font-size: .74rem;
    color: var(--muted); font-weight: 620; }
.tz-filtre input, .tz-filtre select { height: 32px; padding: 0 9px; font-size: .82rem;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.tz-pocet { font-size: .78rem; color: var(--faint); margin-left: auto; }

.tz-plus { color: var(--success-dark); font-weight: 650; }
.tz-minus { color: var(--danger); font-weight: 650; }
.tz-table tr.tz-storno td { color: var(--faint); text-decoration: line-through; }
.tz-table tr.tz-storno .tz-mini-bad { text-decoration: none; }
.tz-pozn-cell { max-width: 46ch; }
.tz-kto { color: var(--muted); font-size: .78rem; }
.tz-rozpad > summary { cursor: pointer; font-size: .72rem; color: var(--faint); }
.tz-rozpad > span { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tz-storno-akcia > summary { cursor: pointer; list-style: none; color: var(--faint);
    font-weight: 700; text-align: center; }
.tz-storno-akcia > summary::-webkit-details-marker { display: none; }
.tz-storno-akcia > summary:hover { color: var(--danger); }
.tz-storno-akcia form { position: absolute; z-index: 20; right: 14px; width: 320px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    padding: 11px 13px; box-shadow: 0 8px 26px rgba(0,0,0,.16); }
.tz-storno-akcia p { margin: 0 0 7px; font-size: .76rem; color: var(--ink-soft); }
.tz-storno-akcia input { width: 100%; height: 30px; margin-bottom: 8px; padding: 0 8px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }

.tz-strankovanie { display: flex; align-items: center; gap: 12px; margin-top: 12px;
    font-size: .8rem; color: var(--faint); }
.tz-empty { border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--sunken);
    padding: 18px 20px; color: var(--ink-soft); font-size: .87rem; }
.tz-empty p { margin: 0; max-width: 90ch; }
.tz-note { margin-top: 10px; font-size: .75rem; color: var(--faint); max-width: 100ch; }

/* ==========================================================================
   Faktúry — formulárové polia, našeptávač z registra
   --------------------------------------------------------------------------
   Modul stavia na systémových triedach (.panel, .tbl, .filterbar, .tag);
   vlastné je len to, čo inde nie je: dvojriadkové pole s popisom a vysvetlivkou
   a rozbaľovací zoznam návrhov z registra RPO.
   ========================================================================== */

.fa-pole { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; }
.fa-pole > span { color: var(--faint); font-weight: 620; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .04em; }
.fa-pole > em { font-style: normal; color: var(--faint); font-size: .74rem; line-height: 1.4; }
.fa-pole input, .fa-pole select, .fa-pole textarea {
    height: 34px; padding: 0 10px; font-size: .87rem;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink); width: 100%;
}
.fa-pole textarea { height: auto; padding: 8px 10px; }
.fa-pole input:focus, .fa-pole select:focus, .fa-pole textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: var(--ring);
}

/* Riadky položiek — vstupy majú vyplniť bunku, nie plávať v nej. */
#fa-polozky td input, #fa-polozky td select {
    width: 100%; height: 30px; padding: 0 8px; font-size: .85rem;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); color: var(--ink);
}
#fa-polozky td input.n { text-align: right; font-variant-numeric: tabular-nums; }
#fa-polozky td select:disabled { background: var(--sunken); color: var(--faint); }

/* Našeptávač z RPO */
.fa-navrhy { position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-sm); box-shadow: 0 10px 28px rgba(0,0,0,.16);
    max-height: 300px; overflow: auto; }
.fa-navrh { display: flex; flex-direction: column; gap: 2px; width: 100%;
    text-align: left; padding: 8px 11px; background: transparent; border: 0;
    border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.fa-navrh:last-child { border-bottom: 0; }
.fa-navrh:hover { background: var(--tonal); }
.fa-navrh b { font-size: .85rem; font-weight: 620; color: var(--ink); }
.fa-navrh span { font-size: .74rem; color: var(--faint); }

/* --- Faktúry: priebeh doťahovania z registrov ----------------------------- */
/* 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. */
.fa-stav { 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); }
.fa-stav b { display: block; color: var(--ink); font-weight: 660; }
.fa-stav-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); }
.fa-stav.is-hlada .fa-stav-ind { animation: fa-toci .7s linear infinite; }
.fa-stav.is-ok { background: var(--success-bg); border-color: var(--success-line); }
.fa-stav.is-ok .fa-stav-ind { border: 0; background: var(--success);
    -webkit-mask: var(--fa-fajka) center / contain no-repeat; mask: var(--fa-fajka) center / contain no-repeat; }
.fa-stav.is-pozor { background: var(--warning-bg); border-color: var(--warning-line); }
.fa-stav.is-pozor .fa-stav-ind { border-color: var(--warning); border-top-color: var(--warning); }
@keyframes fa-toci { to { transform: rotate(360deg); } }

:root { --fa-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>"); }

/* --- Faktúry: založenie subjektu bez opustenia faktúry -------------------- */
.fa-pridat-subjekt { margin-left: 8px; border: 1px solid var(--line); background: var(--surface);
    color: var(--ink-soft); border-radius: var(--r-pill); padding: 1px 9px; cursor: pointer;
    font-size: .68rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.fa-pridat-subjekt:hover { border-color: var(--brand); color: var(--ink); }
.fa-modal { position: fixed; inset: 0; z-index: 60; background: rgba(25, 21, 21, .5);
    display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow: auto; }
.fa-modal[hidden] { display: none; }
.fa-modal-box { width: min(760px, 100%); background: var(--surface); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); overflow: hidden; }
.fa-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px;
    border-bottom: 1px solid var(--line); }
.fa-modal-head h2 { margin: 0; font-size: 1rem; font-weight: 660; }
.fa-modal-head .btn { margin-left: auto; }
.fa-modal-body { padding: 16px 18px; }
.fa-ns-mriezka { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.fa-modal-foot { display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    border-top: 1px solid var(--line); background: var(--sunken); }

/* --- Faktúry: formulárová mriežka a voľby -------------------------------- */
/* Pôvodné `auto-fit` rozhadzovalo polia podľa toho, koľko sa ich zmestilo,
   takže sa raz vedľa seba ocitlo šesť políčok a inokedy dve — a blok
   zaškrtávatiek trčal von. Pevná 12-stĺpcová mriežka drží formulár v rade
   na každej šírke a šírka poľa nesie informáciu (IBAN je široký, PSČ úzke). */
.fa-mriezka { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 15px 18px; }
.fa-mriezka > .sp-2  { grid-column: span 2; }
.fa-mriezka > .sp-3  { grid-column: span 3; }
.fa-mriezka > .sp-4  { grid-column: span 4; }
.fa-mriezka > .sp-5  { grid-column: span 5; }
.fa-mriezka > .sp-6  { grid-column: span 6; }
.fa-mriezka > .sp-12 { grid-column: 1 / -1; }
@media (max-width: 1180px) {
    .fa-mriezka > .sp-2 { grid-column: span 3; }
    .fa-mriezka > .sp-3, .fa-mriezka > .sp-4 { grid-column: span 4; }
    .fa-mriezka > .sp-5 { grid-column: span 6; }
}
@media (max-width: 760px) { .fa-mriezka > * { grid-column: 1 / -1 !important; } }

/* Zaškrtávatko nesmie dediť šírku a výšku textového poľa — inak sa roztiahne
   na celú bunku (a vyzerá to presne tak zle, ako to znie). */
.fa-pole input[type=checkbox], .fa-pole input[type=radio],
.fa-volba input[type=checkbox] {
    width: 17px; height: 17px; flex: 0 0 17px; padding: 0; margin: 0;
    accent-color: var(--brand); cursor: pointer;
}

.fa-nutne { font-size: .62rem; font-weight: 700; letter-spacing: .04em; margin-left: 6px;
    color: var(--faint); text-transform: uppercase; }

.fa-volby { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.fa-volba { display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
    padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); transition: border-color .12s, background .12s; }
.fa-volba:hover { border-color: var(--char-400); }
.fa-volba.is-on { border-color: var(--brand); background: var(--tonal); }
.fa-volba input { margin-top: 2px; }
.fa-volba b { display: block; font-size: .855rem; font-weight: 640; color: var(--ink); }
.fa-volba span { display: block; font-size: .75rem; line-height: 1.4; color: var(--faint); margin-top: 2px; }

.fa-akcie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 30px; }
.fa-akcie-sep { flex: 1; }

/* `hidden` musí vyhrať nad `display:flex` — inak sa prázdny stavový pás
   zobrazuje aj vtedy, keď sa nič nehľadá. */
.fa-stav[hidden] { display: none; }

/* Panel „doklad ešte neodišiel“ — akcie, ktoré po odoslaní zmiznú. */
.fa-poznamka-akcie { flex: 1 1 320px; border: 1px solid var(--line);
    border-radius: var(--r); background: var(--sunken); padding: 12px 14px;
    font-size: .84rem; line-height: 1.45; color: var(--ink-soft); }
.fa-poznamka-akcie b { display: block; color: var(--ink); }
.fa-zasah { display: flex; gap: 8px; margin-top: 9px; align-items: center; flex-wrap: wrap; }
.fa-zasah input[type=text] { height: 30px; padding: 0 9px; font-size: .82rem; min-width: 230px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }

/* Rozšírené filtre faktúr — zbalené, kým ich niekto nepotrebuje. */
.fa-filtre-viac { margin-top: -6px; }
.fa-filtre-viac[hidden] { display: none; }
.fa-sucty { margin: 4px 0 14px; }

/* --- Faktúry: lišta s filtrami ------------------------------------------- */
/* Lišta ostáva prázdna, kým človek nechce filtrovať: hľadanie a rýchle pohľady
   sú vždy po ruke, zvyšok je v jednom rozbaľovacom paneli a to, čo je zapnuté,
   drží v pilulkách. Štrnásť polí rozostavaných na obrazovke bolo neprehľadných
   — filtre majú byť po ruke, nie na očiach. */
.fa-toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin-bottom: 12px; }

.fa-hladanie { position: relative; flex: 1 1 300px; min-width: 220px; }
.fa-hladanie .ti { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--faint); font-size: 16px; pointer-events: none; }
.fa-hladanie input { width: 100%; height: 36px; padding: 0 12px 0 34px;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
    color: var(--ink); font-size: .86rem; }
.fa-hladanie input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }

.fa-pohlady { display: inline-flex; background: var(--sunken); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 2px; gap: 2px; }
.fa-pohlady a { padding: 5px 13px; border-radius: var(--r-pill); font-size: .8rem;
    font-weight: 600; color: var(--faint); white-space: nowrap; }
.fa-pohlady a:hover { color: var(--ink); }
.fa-pohlady a.is-on { background: var(--surface); color: var(--ink);
    box-shadow: var(--shadow-xs); }

.fa-dd { position: relative; }
.fa-dd-tlacidlo { display: inline-flex; align-items: center; gap: 7px; height: 36px;
    padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); color: var(--ink-soft); font-size: .84rem;
    font-weight: 600; cursor: pointer; }
.fa-dd-tlacidlo:hover { border-color: var(--char-400); color: var(--ink); }
.fa-dd-tlacidlo.is-on { border-color: var(--brand); color: var(--ink); }
.fa-pocet { display: inline-grid; place-items: center; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: var(--r-pill); background: var(--brand);
    color: var(--brand-ink-on); font-size: .7rem; font-weight: 700; }

.fa-dd-panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
    width: min(760px, 92vw); background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.fa-dd-panel[hidden] { display: none; }
.fa-dd-hlava { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px;
    border-bottom: 1px solid var(--line); }
.fa-dd-hlava b { font-size: .92rem; }
.fa-dd-hlava span { font-size: .76rem; color: var(--faint); }
.fa-dd-telo { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 18px; padding: 16px; }
.fa-dd-pata { display: flex; justify-content: flex-end; gap: 8px; padding: 11px 16px;
    border-top: 1px solid var(--line); background: var(--sunken); }

.fa-fskupina { display: flex; flex-direction: column; gap: 9px; }
.fa-fnadpis { font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--brand); }
.fa-fpole { display: flex; flex-direction: column; gap: 4px; }
.fa-fpole > span { font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.fa-fpole > span em { font-style: normal; font-weight: 400; color: var(--faint); }
.fa-fdvoj { display: flex; align-items: center; gap: 5px; }
.fa-fdvoj > i { color: var(--faint); font-style: normal; }
.fa-fpole input, .fa-fpole select { height: 31px; min-width: 0; width: 100%;
    padding: 0 8px; font-size: .8rem; border: 1px solid var(--line);
    border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.fa-fpole input:focus, .fa-fpole select:focus { outline: none;
    border-color: var(--brand); box-shadow: var(--ring); }

.fa-toolbar-vpravo { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.fa-pocet-faktur { font-size: .8rem; color: var(--faint); white-space: nowrap; }
.fa-pocet-faktur b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Aktívne filtre ako pilulky — vidno, prečo je výber taký, a dajú sa zrušiť. */
.fa-chipy { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fa-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .77rem;
    padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--brand-50, var(--line));
    background: var(--tonal); color: var(--ink-soft); }
.fa-chip:hover { border-color: var(--danger-line); color: var(--danger); }
.fa-chip .ti { font-size: 13px; opacity: .7; }
.fa-chip--zrus { background: transparent; border-style: dashed; color: var(--faint); }

.fa-sucty { margin: 0 0 14px; }

/* Ručný prepis preplatenej dovolenky priamo v kontrolnom paneli Výpočtu.
   Polia sú úzke zámerne — panel má sedieť na QHD vedľa ostatných stĺpcov. */
.vp-dov-form { display:flex; gap:6px; align-items:center; }
.vp-dov-form input { padding:4px 7px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:.78rem; min-width:0; }
.vp-dov-form input[name="suma"] { max-width:78px; text-align:right; }
.vp-dov-form input[name="dovod"] { max-width:170px; }