/* ==========================================================================
   BCG Nexus — mobil a tablet
   --------------------------------------------------------------------------
   Manažér neschvaľuje pri stole. Schvaľuje na parkovisku pred prevádzkou,
   jednou rukou, na telefóne. Táto vrstva je preto rovnocenná s desktopovou,
   nie „ešte sa to dá prečítať".

   PRAVIDLÁ MOBILU (overuje `tools/kontrola_mobil.py`):
     1. Stránka sa NIKDY nehýbe do boku. Vodorovne smie scrollovať len to,
        čo je na to určené — široká dátová tabuľka vo svojom ráme.
     2. Do poľa sa dá písať bez toho, aby Safari priblížilo celú stránku.
        To znamená písmo v poliach minimálne 16 px na dotykovom zariadení.
        Pod 16 px iOS zoomne a už sa nevráti — používateľ dopisuje formulár
        v odzoomovanom rozložení a nevidí tlačidlo Uložiť.
     3. Na čo sa dá klepnúť, má aspoň 44 px. Prst nie je kurzor.
     4. Nikdy scroll v scrolle. Zvislo scrolluje stránka, nie rám tabuľky —
        inak sa prst „zasekne" v tabuľke a stránka sa nehýbe.
     5. Nič sa neschová len preto, že je málo miesta. Keď sa niečo nezmestí,
        zalomí sa alebo sa preskladá; skryť sa smie len ozdoba.

   STAVBA SÚBORU:
     0) moduly — šírkové @media odchýlky modulov (z modules.css, audit E11)
     1) základ zariadenia (bezpečné zóny, dvíhanie písma)
     2) shell — horná lišta, kontextová lišta, bočné menu, plocha
     3) dotyk — ciele pre prst a formulárové polia
     4) hlavičky modulov, nástrojové lišty a filtre
     5) tabuľky — karty na telefóne, bočný scroll na širokom
     6) zásuvky, dialógy, Paviel
     7) tablet

   HRANICE — jediná sada šírok portálu (audit E11, 24. 10. 2026; predtým 26
   rôznych). Nová @media berie šírku odtiaľto, protipól je +1 px (861, 701 …):
     (pointer: coarse)   dotykové zariadenie — bez ohľadu na šírku
     max-width: 1920px   veľký monitor (rozsah od 861)
     max-width: 1600px   široký monitor (rozsah od 861)
     max-width: 1400px   notebook so širokou tabuľkou
     max-width: 1280px   notebook 1280
     max-width: 1200px   úzky desktop — mriežka kariet na menej stĺpcov
     max-width: 1100px   úzky desktop s menu
     max-width: 1024px   tablet na výšku aj na šírku (mobil.js HRANICA_BOK)
     max-width:  860px   bočné menu je zasunuté (hranica zo styles.css)
     max-width:  760px   tablet na výšku pod 768 — jeden stĺpec formulára
     max-width:  700px   telefón — tabuľky sa menia na karty (mobil.js HRANICA)
     max-width:  640px   veľký telefón
     max-width:  560px   telefón
     max-width:  480px   úzky telefón

   Systémové pravidlá mobilu sú v častiach 1–7. Modulová odchýlka podľa
   šírky ide do časti 0 (nie do modules.css), zoskupená po moduloch.
   Farba sa ani tu nepíše natvrdo — všetko cez token.
   ========================================================================== */

:root {
    /* Výška mobilnej hornej lišty. Kontextová lišta sa lepí POD ňu — obe sú
       sticky na top:0 a bez tohto by sa pri scrolle prekryli. */
    --topbar-h: 59px;
    --ctxbar-h: 56px;
    /* Najmenší cieľ pre prst. 44 px je hranica, pod ktorou sa ľudia trafia
       vedľa (a v Zálohách je „vedľa" tlačidlo Zamietnuť). */
    --tap: 44px;
}

/* ==========================================================================
   0) Moduly — odchýlky rozloženia podľa šírky (audit E11, 24. 10. 2026)
   Šírkové @media z modules.css, v pôvodnom poradí, zoskupené po moduloch
   tak, ako idú v modules.css. Sú PRED systémovými pravidlami mobilu —
   systém (dotyk, karty tabuliek) má posledné slovo. Hranice = sada v
   hlavičke súboru. Blok, ktorý by presunom zmenil poradie voči neskoršiemu
   pravidlu v modules.css, ostal tam (rovnaký selektor aj vlastnosť).
   ========================================================================== */

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

    @media (max-width: 640px) {
        .dz-actions { flex-wrap:wrap; }
        .dz-dovod { max-width:140px; }
        .dz-udalost { font-size:.58rem; padding:1px 4px 1px 6px; }
    }

@media (max-width: 1280px) {
    .dz-rytmus { grid-template-columns: 236px minmax(0, 1fr); gap: 18px; }
    /* Vedľa seba by sa položky s tlačidlom Stornovať tlačili — pod seba. */
    .dz-dvojica { grid-template-columns: 1fr; }
    .dz-zostatok--hlavny .dz-zostatok-num { font-size: 3rem; }
}

@media (max-width: 1100px) {
    .dz-tim-uvod { grid-template-columns: 1fr; }
    .dz-tim-suhrn { flex-direction: row; justify-content: flex-start; align-items: center; gap: 20px; padding: 18px 22px; }
}

@media (max-width: 1024px) {
    .dz-rytmus { grid-template-columns: 1fr; }
    .dz-zostatky { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
    .dz-zostatok--hlavny .dz-zostatok-num { margin-top: 10px; font-size: 2.4rem; }
}

@media (max-width: 760px) {
    .dz-dvojica { grid-template-columns: 1fr; }
    /* Mesiac sa na úzkej obrazovke nestláča — mriežka sa posúva do boku,
       mená ostávajú prilepené vľavo. */
    .dz-tim .tk { min-width: 960px; }
}

@media (max-width: 560px) {
    .nx-hlava-akcie .dz-velke { flex: 1; }
    .dz-rytmus .dz-card, .dz-tim { padding: 16px; }
    .dz-tyzden-pas { gap: 4px; }
    .dz-den { min-height: 68px; padding: 11px 2px 14px; gap: 7px; }
    .dz-den-cislo { font-size: 1.1rem; }
    .dz-agenda { grid-template-columns: 1fr; gap: 10px; }
    .dz-agenda-datum br { display: none; }
    .dz-mden { min-height: 60px; padding: 5px; }
    .dz-mden .dz-udalost { font-size: .55rem; padding: 2px 3px 2px 5px; }
    .dz-polozka { flex-wrap: wrap; }
    .dz-polozka-text { flex: 1 1 calc(100% - 60px); }
    .dz-polozka-stav .tag { white-space: normal; }
    .dz-polozka-akcia { margin-left: 60px; }
    .dz-fields--dva { grid-template-columns: 1fr; }
    .dz-tim-suhrn { gap: 18px; }
    .dz-tim .tk .tk-emp-col { width: 150px; padding-left: 10px; }
}

@media (max-width: 700px) {
  .fin-skup { flex:1 1 100%; }
  .fin-skup-panel { position:static; width:auto; max-width:none; max-height:none; margin-top:8px; box-shadow:var(--shadow-xs); }
  .fin-skup-zoznam { grid-template-columns:1fr 1fr; }
}

@media (max-width: 1280px) {
  .fin-cisla { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .fin-cisla > .fin-skore { grid-column:1 / -1; }
  .fin-most { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .fin-cisla { grid-template-columns:minmax(0, 1fr); }
  .fin-most { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .fin-most-krok.je-vysledok { grid-column:1 / -1; }
  .fin-filters .fin-uzavrety { margin-left:0; }
}

@media (max-width: 860px) {
  .fin-legenda dl { grid-template-columns: 1fr; gap: 2px; }
  .fin-legenda dd { margin-bottom: 8px; }
}

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

    @media (max-width: 1024px) {
        .ac-split { grid-template-columns: 1fr; }
        .ac-zoznam { position: static; max-height: 60vh; }
        .ac-detail { padding: 18px 16px; }
    }

    @media (max-width: 860px) {
        .hr-dvojica { grid-template-columns:1fr; }
        .hr-sipka { flex-direction:row; max-width:none; }
        .hr-akcie { justify-content:flex-start; }
    }

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

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

    @media (max-width: 860px) { .zm-detail-grid { grid-template-columns:1fr; } }

@media (max-width: 760px) { .tz-rozpad-grid { grid-template-columns: 1fr; } }

@media (max-width: 760px) { .tz-odp { grid-template-columns: 1fr 1fr; } .tz-odp .tz-odp-p { grid-column: 1 / -1; } }

@media (max-width: 480px) {
    .tz-meta label { flex: 1 1 100%; }
    .tz-w-s, .tz-w-m, .tz-w-l { width: 100%; min-width: 0; }
    .tz-odp { grid-template-columns: 1fr; }
    .tz-odp .tz-odp-p { grid-column: auto; }
}

@media (max-width: 640px) {
    .tz-riadok { flex-wrap: wrap; }
    .tz-riadok-suma, .tz-riadok-str, .tz-riadok-pozn { width: 100%; }
    /* Na mobile pod sebou — šesť stĺpcov sa do šírky telefónu nezmestí.
       Vo flexe sa `grid-column` ignoruje, netreba ho prebíjať. */
    .tz-riadok-p { display: flex; flex-wrap: wrap; }
    .tz-riadok-p > :not(.tz-riadok-x) { flex: 1 1 100%; }
}

@media (max-width: 1200px) {
    .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; } }

@media (max-width: 760px) {
    .nv-riadok { grid-template-columns:1fr; }
    .nv-odober { margin-left:0; }
}

@media (max-width: 1024px) {
    .nv-transfer { grid-template-columns:1fr; }
    .nv-list { max-height:300px; }
}

@media (max-width: 760px) {
    .nv-riadok { grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px) {
    .tk-meta { grid-template-columns:1fr; gap:2px; }
    .tk-meta dt { margin-top:8px; }
}

@media (max-width: 760px) {
    .tk-rychle { flex-wrap:wrap; }
    .tk-rychle select { min-width:0; flex:1; }
}

@media (max-width: 1280px) {
    .tk-disp { grid-template-columns: 1fr; }
    .tk-metriky { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tk-metrika { padding: 15px 16px; }
    .tk-metrika strong { font-size: 1.65rem; }
}

@media (max-width: 760px) {
    .tk-fronta { grid-template-columns: 1fr; }
    .tk-stlpec { min-height: 0; }
    .tk-metriky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .tk-metrika strong { font-size: 1.45rem; }
    .tk-sekcia-hlava .nx-kicker { display: none; }
}

@media (max-width: 760px) {
}

@media (max-width: 1280px) {
    .mzdy-page .mz-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .mzdy-page .mz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mzdy-page .mz-actions.nx-akcie-lista > .nx-akcie-pomoc { flex-basis: 100%; margin: 0; }
}

@media (min-width: 701px) { .tz-page #tz-mriezka tbody td { padding: 7px 12px; } }

@media (max-width: 1200px) {
    .tz-page .tz-prepocet, .tz-vydaj-grid, .tz-mesiace-hore { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 1024px) {
    .tz-page .tz-prepocet, .tz-vydaj-grid, .tz-mesiace-hore { grid-template-columns: minmax(0, 1fr); }
    .tz-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
    .tz-rail > * + * { margin-top: 0; }
}

@media (max-width: 560px) {
    .tz-prepocet-praca, .tz-vydaj-grid > .tz-vydajf { padding: 14px; }
    .tz-rail { display: flex; }
    .tz-rail > * + * { margin-top: 14px; }
    .tz-page .nx-akcie-lista .tz-bilancia { flex-basis: 100%; margin: 0; }
    .tz-page .tz-filtre input[type="search"] { min-width: 0; }
}

@media (max-width: 1200px) {
    .rep-pribeh { grid-template-columns: 250px minmax(0, 1fr); }
}

@media (max-width: 1024px) {
    .rep-pribeh { grid-template-columns: minmax(0, 1fr); }
    .rep-pribeh-bok { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-gap: 14px; gap: 14px; }
    .rep-pribeh-bok > * + * { margin-top: 0; }
    .rep-otazky { display: none; }
    .rep-dvoj { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .rep .rep-filters-info { margin-left: 0; flex-basis: 100%; }
    .rep .rep-konsol-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rep .rep-konsol-op.is-result { grid-template-columns: minmax(0, 1fr); }
    .rep .rep-konsol-op.is-result .rep-konsol-v { grid-column: 1; grid-row: auto; margin: 6px 0; }
}

@media (min-width: 701px) { .zl-page .zl-table td { padding: 11px 10px; } }

@media (min-width: 701px) {
    .zl-page .zl-table td.zl-actions { display: table-cell; text-align: right; white-space: nowrap; }
    .zl-page .zl-table td.zl-actions > * { vertical-align: middle; }
    .zl-page .zl-table td.zl-actions > * + * { margin-left: 6px; }
}

@media (max-width: 1100px) {
    .zl-grid { grid-template-columns: minmax(0, 1fr); }
    .zd-layout { grid-template-columns: minmax(0, 1fr) 250px; }
}

@media (max-width: 860px) {
    .zd-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .zl-teraz, .zl-panel, .zl-page .zd-akcia { padding: 18px 16px; }
    .zl-page .zd-hlava { padding: 20px 18px; }
    .zl-page .zd-hlava .zd-fakty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zl-dlg .nx-dlg-akcie .btn-primary, .zl-dlg .nx-dlg-akcie .btn-ghost { flex: 1 1 auto; }
}

@media (max-width: 1100px) {
    .rh-praca { grid-template-columns:minmax(0, 1fr) 260px; }
    .rh-davka { padding:20px; }
}

@media (max-width: 1024px) {
    .rh-praca { grid-template-columns:minmax(0, 1fr); }
    .rh-rail { position:static; }
}

@media (max-width: 560px) {
    .rh-panel { padding:16px; }
    .rh-krok { padding:10px; font-size:.74rem; }
    .rh-krok small { display:none; }
    .rh-vysledok { grid-template-columns:minmax(0, 1fr); }
    .rh-filtre .nx-stav { margin-left:0; }
}

@media (min-width: 1281px) { .tr-cisla { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); } }

@media (max-width: 1100px) {
    .tr-report { grid-template-columns: minmax(0, 1fr); }
    .tr-report-rail { position: static; }
    .tr-mriezka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .tr-mriezka, .tr-mriezka--3, .tr-mriezka--4 { grid-template-columns: minmax(0, 1fr); }
    /* „span 2“ v jednom stĺpci založí druhý, skrytý — a prvý stĺpec spadne
       na 0 px (Nastavenia: „Tržby sa zbierajú od“ a „Poplatok za kartu“ na
       telefóne zmizli). Široké pole = celý riadok. */
    .tr-mriezka > .tr-pole--siroke { grid-column: 1 / -1; }
    .tr-pas { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .tr-pas-d:nth-child(-n+7) { display: none; }
    .tr-blok { padding: 16px 14px 14px; border-radius: var(--r-lg); }
    .tr-gastro-r, .tr-gastro-r.ma-vydavatela { grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr) 32px; }
    .tr-gastro-r.tr-gastro-r--polozka { grid-template-columns: minmax(0, 1fr) auto minmax(0, .9fr) 86px 32px; }
    .tr-gastro-r.ma-vydavatela select, .tr-gastro-r--polozka input[data-tr-pol-text] { grid-column: 1 / -1; }
    .tr-gastro-r b { display: none; }
    .tr-filtre .nx-stav, .tr-den-lista .nx-stav { margin-left: 0; }
}

@media (max-width: 1024px) {
    .tr-fa { grid-template-columns: minmax(0, 1fr) 84px 32px; }
    .tr-fa-firma { grid-area: 1 / 1 / 2 / 3; }
    .tr-fa > .tr-gastro-x { grid-area: 1 / 3; align-self: end; }
    .tr-fa-suma { grid-area: 2 / 1; }
    .tr-fa-dph { grid-area: 2 / 2 / 3 / 4; }
    .tr-fa-email { grid-area: 3 / 1 / 4 / 4; }
    .tr-fa-popis { grid-area: 4 / 1 / 5 / 4; }
    .tr-blok-stav { margin-left: 0; }
}

@media (max-width: 640px) {
    /* Denný report na telefóne: formulár hneď hore, bez veľkého nadpisu. */
    .tr-report-page .tr-hlava h1, .tr-report-page .tr-hlava .nx-hlava-pod,
    .tr-report-page .tr-hlava .nx-hlava-akcie { display: none; }
    .tr-tim-meno { min-width: 112px; max-width: 128px; }
    .tr-tim-kto b { font-size: .74rem; white-space: normal; line-height: 1.2; }
    .tr-tim-b input { width: 2.3rem; }
    .tr-fakt-akcie .tr-input { width: 100%; }
}

@media (max-width: 1100px) { .zm-dod-sken { min-height: 40px; } }

@media (max-width: 1100px) {
    .zm-cisla, .zm-cisla--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .zm-priority { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .zm-filter-row--hlavny select { flex: 1 1 140px; }
}

@media (max-width: 640px) {
    .zm-uloha { grid-template-columns: 52px minmax(0, 1fr); }
    .zm-uloha-kde, .zm-uloha-akcia { grid-column: 2; }
    .zm-zavrete li { grid-template-columns: minmax(0, 1fr); }
    .zm-pohlad { margin-left: 0; }
}


/* ==========================================================================
   1) Základ zariadenia
   ========================================================================== */

html {
    /* Safari na iPhone pri otočení na šírku samo zväčšuje písmo v blokoch,
       ktoré považuje za dlhý text. V tabuľke miezd tým rozhodí stĺpce. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    /* Modrý blik pri klepnutí je androidí default a v uhlíkovej palete
       vyzerá ako chyba. Spätnú väzbu dáva :active stav prvku. */
    -webkit-tap-highlight-color: transparent;
}

/* POZNÁMKA K PRAVIDLU Č. 1: v prvej verzii tu bolo `overflow-x: clip` ako
   poistka. Nie je to poistka, je to obväz — pretečenie neodstráni, len ho
   odreže, takže na telefóne ticho zmizne pravá polovica sumy a nikto sa
   nedozvie prečo. Pretečenie sa rieši tam, kde vzniká, a stráži ho
   `tools/kontrola_mobil.py`. */

/* Veta „tabuľka pokračuje do boku". Vkladá ju `static/js/mobil.js` nad každý
   rám, ktorý sa naozaj nezmestil. Na desktope by bola nezmysel (posuvník je
   vidno a myš ho chytí), na dotyku je nutná — posuvník sa tam nekreslí a bez
   vety ľudia o stĺpcoch vpravo nevedia. Platí aj na tablete: 768 px na
   dvadsať stĺpcov tiež nestačí. */
.tbl-bok-hint { display: none; }

@media (max-width: 1024px) {
    .tbl-bok-hint {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0 0 8px;
        font-size: .78rem;
        color: var(--muted);
    }
    .tbl-bok-hint .ti { font-size: 15px; color: var(--faint); }
    /* Doťahnutie tabuľky do boku nesmie prepnúť gesto na „späť v histórii". */
    .ma-bok { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
}

/* Dlhé slovo bez medzery — e-mail, IBAN, názov súboru — na 360 px roztlačí
   kartu. Zalomí sa až keď niet inej možnosti, takže bežný text netrpí. */
@media (max-width: 700px) {
    body { overflow-wrap: break-word; }
    .mono, code { overflow-wrap: anywhere; }
}

/* ==========================================================================
   2) Shell — horná lišta, kontextová lišta, bočné menu, plocha
   ========================================================================== */

@media (max-width: 860px) {

    /* --- Horná lišta ------------------------------------------------------
       Výška je PEVNÁ, nie „koľko vyjde". Kontextová lišta sa lepí presne pod
       ňu (`top: var(--topbar-h)`) a keby sa tie dve čísla rozišli, buď medzi
       nimi presvitá scrollujúci obsah, alebo si zakryjú okraj. Preto je výška
       token a nie súčet paddingu a náhodnej výšky tlačidla. */
    .topbar {
        height: var(--topbar-h);
        padding-top: 0;
        padding-bottom: 0;
        /* Zárez a zaoblené rohy iPhonu: na šírku by inak logo skončilo pod
           čiernym pásom. `viewport-fit=cover` v base.html to zapína. */
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        z-index: calc(var(--z-hlavicka) + 2);
    }
    .nav-toggle { width: var(--tap); height: var(--tap); font-size: 22px; flex: 0 0 auto; }

    /* --- Kontextová lišta ------------------------------------------------
       Lepí sa POD hornú lištu, nie na ňu. Obsah, ktorý sa nezmestí, sa dá
       potiahnuť do boku — obdobie a zvonček sa neskrývajú, sú to pracovné
       nástroje, nie ozdoba. */
    .ctxbar {
        position: sticky; top: var(--topbar-h); z-index: calc(var(--z-hlavicka) + 1);
        height: var(--ctxbar-h);
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none;
        padding: 0 max(12px, env(safe-area-inset-left)) 0 max(12px, env(safe-area-inset-right));
        gap: 8px;
    }
    .ctxbar::-webkit-scrollbar { display: none; }
    .ctxbar > * { flex: 0 0 auto; }
    /* Lišta sa posúva do boku bez posuvníka — na telefóne vyzerala orezaná (audit
       31. 10. 2026). Kratší text (hodiny + mesiac stačia, slovo je v tooltipe) a bez
       klávesovej skratky (telefón nemá Ctrl). Tieň na okraji nie — stmieval by zvonček. */
    .ctxbar .ctx-len-siroke, .ctxbar .ctx-prikazy kbd { display: none; }
    .ctx-scope { margin-left: auto; padding-left: 4px; }

    /* --- Bočné menu ako zásuvka -------------------------------------------
       styles.css ju už vysúva; tu sa dorieši telefón: šírka podľa obrazovky
       (nie 232 px na 360 px displeji), vlastný scroll a bezpečné zóny. */
    .sidebar {
        width: min(300px, 86vw);
        flex-basis: min(300px, 86vw);
        height: 100vh;
        height: 100dvh;
        padding-left: env(safe-area-inset-left);
        padding-bottom: env(safe-area-inset-bottom);
        overscroll-behavior: contain;
    }
    .side-nav { padding-bottom: 10px; }
    /* Položka menu je hlavný cieľ pre prst na celom portáli. */
    .side-nav a { padding: 11px 12px; font-size: .94rem; min-height: var(--tap); }
    .side-nav a .ti { font-size: 20px; }
    .side-sec { margin: 16px 10px 6px; }
    .sidebar-foot {
        padding: 12px max(12px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom));
    }
    .foot-btn, .logout-form button { width: var(--tap); height: var(--tap); }
    body.nav-open { overflow: hidden; }   /* pod zásuvkou sa stránka nescrolluje */

    /* --- Pracovná plocha -------------------------------------------------- */
    .content {
        margin: 16px auto;
        padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
    }
    /* Dole 84 px: bublina Paviela (14 px od spodku + 56 px) by inak aj na konci
       stránky ležala na texte pätičky — zalomená pätička na telefóne siaha až
       k pravému okraju (kontrola prekrytia, 2. 10. 2026). */
    .footer { padding: 20px 16px calc(84px + env(safe-area-inset-bottom)); }
}

@media (max-width: 700px) {
    .content { margin: 14px auto; padding-left: max(13px, env(safe-area-inset-left));
               padding-right: max(13px, env(safe-area-inset-right)); }
    /* Paviel sedí v pravom dolnom rohu. Bez tohto miesta prekrýva poslednú
       kartu — a v Zálohách je na nej tlačidlo Schváliť. */
    .content { padding-bottom: 78px; }
    h1 { font-size: 1.26rem; line-height: 1.25; }
    h2 { font-size: 1.06rem; }
    /* Dlhý text na 390 px nemá čo obmedzovať — 80ch je širších ako displej. */
    .page-head p, .panel > p, .empty-state p { max-width: none; }
    .panel { padding: 14px 15px; }
    .panel-head { padding: 12px 14px; }
    .panel-body { padding: 13px 14px; }
}

@media (max-width: 480px) {
    /* „26 stredísk · 287 ľudí" je kontext, nie nástroj — na úzkom telefóne
       ustúpi obdobiu a zvončeku. */
    .ctx-scope-lead { display: none; }
    .topbar .brand { font-size: .98rem; }
}

/* ==========================================================================
   3) Dotyk — ciele pre prst a formulárové polia
   --------------------------------------------------------------------------
   Rozhoduje DRUH ZARIADENIA, nie len šírka: iPad na šírku má 1024 px a myš
   nemá. Klávesnica aj prst sú tam rovnaké ako na telefóne. Šírka je v
   podmienke druhá preto, aby sa pravidlo dalo odmerať — headless prehliadač
   v `tools/kontrola_mobil.py` sa za dotykové zariadenie nevydáva.
   ========================================================================== */

/* --- Koniec priblíženia pri písaní (pravidlo č. 2) ------------------------
   Toto NIE JE kozmetika. Safari na iOS priblíži stránku pri každom kliknutí
   do poľa s písmom pod 16 px a späť sa už nevzdiali — používateľ dopisuje
   formulár v odzoomovanom rozložení a nevidí tlačidlo Uložiť. Na mobile ani
   na tablete preto neexistuje pole menšie ako 16 px: ani vyhľadávacie, ani
   v bunke tabuľky. Áno, stĺpce s poľami sú na tablete o kúsok širšie; tá
   tabuľka sa tam aj tak ťahá do boku.

   PREČO `!important` — jediné miesto v portáli, kde je namieste. Písmo polí
   sa nastavuje na troch úrovniach: `input[type="text"]…` v styles.css,
   `.nx-hladaj input` v komponente a `.fb-sel` v module. Poradie
   súborov na ne nestačí, lebo vyhráva špecifickosť — pri prvom pokuse
   meranie ukázalo 14,4 px na 25 obrazovkách napriek tomu, že mobil.css sa
   načítava posledný. Preteky v špecifickosti tu nemajú zmysel: toto nie je
   názor na vzhľad, ktorý by mal modul právo prebiť. Je to hranica
   použiteľnosti zariadenia. */
@media (max-width: 1024px), (pointer: coarse) {
    input, select, textarea { font-size: 16px !important; }
    /* Zaškrtávacie políčko písmo nemá — nech si nechá svoju veľkosť. */
    input[type=checkbox], input[type=radio], input[type=range] { font-size: inherit !important; }

    /* Spodná hranica pre prst platí NIŽŠIE aj na `select`, `button` a spol.
       Textové pole tam dlho nebolo — a každý formulárový riadok, v ktorom
       stálo pole vedľa rozbaľovacieho zoznamu, tým išiel nakrivo: zoznam mal
       40 px, pole vedľa neho 30. Rovnaká hranica na oboch je zároveň lepší
       cieľ pre prst; `textarea` sa berie tiež, výšku si aj tak určí `rows`. */
    input[type=text], input[type=search], input[type=number], input[type=password],
    input[type=date], input[type=datetime-local], input[type=month], input[type=time],
    input[type=email], input[type=tel], input[type=url], input[type=color],
    input:not([type]), textarea {
        min-height: 40px;
    }

    /* Vyhľadávacie pole v lište tabuľky je orámovaný OBAL s bezrámovým
       `input`-om vnútri — pravidlo vyššie sa naň nevzťahuje a lišta tým išla
       nakrivo: rozbaľovačka filtra 40 px, hľadanie vedľa nej 32. Obal musí
       dostať hranicu tiež, a `height` sa musí uvoľniť, inak ju prebije. */
    .nx-hladaj, .nx-tools .nx-hladaj { height: auto; min-height: 40px; }
    /* Hľadanie s lupou (.nx-hladaj): rám nesie obal, pole vnútri dostane
       výšku bez rámu — spolu presne 40 px ako rozbaľovačka vedľa. */
    .nx-hladaj input { min-height: 38px; }
}

/* --- Ciele pre prst (pravidlo č. 3) ---------------------------------------
   Hranica je 1024 px, nie 860: iPad na šírku má presne 1024, bočné menu na
   ňom ostáva a je to hlavná navigácia, do ktorej sa klepe prstom. */
@media (max-width: 1024px), (pointer: coarse) {
    /* Bočné menu je na tablete stále vidno — položka musí byť plný cieľ. */
    .side-nav a { min-height: var(--tap); }
    .btn, .btn-primary, .btn-ghost, .btn-submit, .btn-danger,
    .ctx-btn, .seg button, .seg a, .nx-zalozky > a, .nx-zalozky > button,
    .pager a, .pager span.cur, .stepper a, .stepper button,
    /* Modulové kópie tlačidiel (zl-, dz-, sv-, rep-, cmt-btn, btn-mini) sú od
       auditu E6 jadro `.btn-*` — prejdú riadkom vyššie. Ostáva, čo jadrom nie je. */
    .hr-ikonbtn, select, button[type=submit] {
        min-height: var(--tap);
    }
    /* Prepínače a filtre v podobe „pilulky": nižšia hranica, lebo ich býva
       v rade viac a 44 px by z lišty spravilo dva riadky. Pod 40 px sa ale
       prst netrafí ani do nich. Čip voľby / filtra je jadro (`.chip--volba`,
       `--pridaj`, `--zrus`), štítok `.tag` cieľom nie je — len odkaz s ním. */
    .chip--volba, .chip--pridaj, .chip--zrus, .mz-todo-polozka, .vp-pend,
    .dz-udalost, .fa-pohlady a, .btn-sm,
    /* Značky v registri zmlúv sú prepínače filtra — do 26 px sa prst netrafí.
       Značka v riadku tabuľky (`--riadok`) je len štítok, nie cieľ, a preto
       sa nezväčšuje: zväčšila by riadky celej tabuľky. */
    .zm-znacky-filter .zm-znacka, .zm-znacka--vyber {
        min-height: 40px;
    }
    .btn-sm { padding: 7px 13px; }
    /* Značka v hornej lište je odkaz na nástenku — nech je celý pás cieľom. */
    .topbar .brand { display: flex; align-items: center; min-height: var(--tap); }

    /* Checkbox v riadku tabuľky sa trafí len keď je väčší než 13 px.
       `:where()` má nulovú špecifickosť zámerne: prepínač `.nx-prepinac`
       (styles.css) je tiež `input[type=checkbox]`, len s `appearance:none`
       a vlastným tvarom. Bežné pravidlo by ho stlačilo na 20 × 20 a posunovač
       by mu vyliezol z rámu — meranie to ukázalo ako 21 px pretečenia
       v Moduloch. Takto si prepínač svoju veľkosť ubráni a zväčší sa len holé
       políčko. Cieľom prsta je pri prepínači celý `<label>` s textom. */
    @supports selector(:where(a)) {
        :where(input[type=checkbox], input[type=radio]) { width: 20px; height: 20px; }
    }
    .nx-prepinac { min-height: 40px; }

    /* Ovládanie, ktoré sa ukazuje až pri prejdení myšou, je na dotyku
       neviditeľné — prst nemá „hover". Tieto akcie sú preto vždy vidno. */
    .dz-actions, .zl-actions, .hr-riadok-akcie, .tz-actions { opacity: 1; visibility: visible; }
}

/* Vymenúvať triedy jednu po druhej nemá koniec — portál má vlastných tlačidiel
   niekoľko desiatok a každé nové by pravidlo obišlo. Na dotyku a na úzkom
   displeji preto platí spodná hranica plošne, na všetko, čo sa dá stlačiť.
   Áno, riadky dátových tabuliek tým na tablete o kúsok narastú; hodnota je
   opačná — na iPade sa dá trafiť do krížika, ktorý mal 26 px. */
@media (max-width: 1024px), (pointer: coarse) {
    button, select, summary, input[type=file], input[type=submit],
    a.btn, a[class*="-btn"], a[class*="btn-"] { min-height: 40px; }

    /* Odkazy, ktoré vyzerajú ako text, ale správajú sa ako tlačidlo:
       „← späť", meno v zozname, zrušenie filtra, prepínač roka. */
    .zd-back, .zm-back, .nv-reset, .dz-rok-active,
    .hr-osoba, .zm-name, .fa-pridat-subjekt, .nv-back,
    /* Číslo faktúry / meno subjektu v riadku tabuľky (19–21 px) — riadok má
       --row-h 42 px, takže 40 px odkazu ho nezväčší, len vyplní. */
    a.nx-riadok-odkaz {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    /* Kalendár odovzdania Denných tržieb (stredisko × deň): bunka 26 × 26 px
       je na prst terč naslepo. Na dotyku má 40 × 40 — matica je v posuvnom
       `.table-wrap` a stĺpec strediska je prilepený, takže sa číta po riadku
       aj na telefóne. Legenda nad maticou (span, nie odkaz) ostáva malá. */
    .tr-matica a.tr-bunka { width: 40px; height: 40px; }

    /* Triedenie v hlavičke tabuľky. Odkaz má 18 px, hoci bunka okolo neho má
       štyridsať — prst mieri na bunku a trafí sa vedľa. Odkaz preto vyplní
       celú bunku, namiesto aby ju roztiahol. */
    .nx-th-zorad, th a, th button {
        display: flex;
        align-items: center;
        min-height: 40px;
        margin: -6px 0;
    }
}

/* ==========================================================================
   4) Hlavičky modulov, nástrojové lišty a filtre
   --------------------------------------------------------------------------
   Všetky sú postavené rovnako: obsah vľavo a `margin-left:auto` vpravo.
   Na 390 px sa pravá časť musí presunúť pod ľavú, inak vytlačí nadpis do
   dvoch znakov na riadok (alebo vypadne z obrazovky — to bol pôvodný stav
   Zamestnancov, kde tlačidlo „Možné duplicity" trčalo 146 px za okrajom).
   ========================================================================== */

@media (max-width: 700px) {

    .nx-hlava, .vt-head,
    .pl-group-head, .rep-labor-head,
    .rep-odv-head, .rep-konsol-head, .page-head, .zl-card-head, .dz-card-head,
    .zm-card-head, .panel-head, .fa-modal-head {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 10px;
    }
    .nx-hlava h1, .vt-head h1 { font-size: 1.26rem; }

    /* Pravá strana hlavičky ide pod ňu a na plnú šírku. */
    .nx-hlava-akcie, .hr-akcie,
    .hr-hlavicka-akcie, .mz-export, .page-head .page-acts,
    .fa-toolbar-vpravo, .panel-head .panel-acts {
        margin-left: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    /* Tlačidlo v takej lište nech vyplní riadok — dva vedľa seba sa delia. */
    .nx-hlava-akcie > *,
    .hr-akcie > *, .mz-export > *, .page-head .page-acts > * {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }

    /* --- Filtračné a nástrojové lišty ------------------------------------- */
    .filterbar, .dz-toolbar, .mz-toolbar, .sv-toolbar,
    .fa-toolbar, .zm-filters, .fin-filters, .rep-filters, .nv-filters,
    .hr-filtre, .dz-fields, .zl-fields, .fin-upload, .stav-filter,
    .dz-tb-range, .fa-pohlady, .vp-upform, .mz-selectors {
        flex-wrap: wrap;
        row-gap: 9px;
    }
    .filterbar, .dz-toolbar, .zm-filters, .fin-filters, .rep-filters,
    .nv-filters, .fa-toolbar { padding: 10px 11px; }
    /* Hľadanie je na telefóne najpoužívanejší filter — dostane celý riadok.
       (Pevná šírka 170 px so `margin-left:auto` bola príčinou toho, že
       vyhľadávacie pole v Zálohách a Zamestnancoch trčalo mimo karty.) */
    .ac-search, .nx-hladaj {
        margin-left: 0;
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 1 1 100%;
    }
    /* Počítadlá a „x z y" ostávajú, len sa prestanú tlačiť doprava. */
    .dz-toolbar-count, .mzf-count, .vp-count, .tk-count, .count,
    .dz-count, .vt-count, .tz-pocet, .filterbar .fb-right {
        margin-left: 0;
    }
    /* Rozbaľovačka filtra nech je čitateľná, ale nech nevytlačí susedov. */
    .filterbar select, .filterbar .fb-sel, .dz-toolbar select,
    .fa-toolbar select, .nv-filters select, .hr-filtre select {
        flex: 1 1 46%;
        min-width: 0;
        max-width: 100%;
    }

    /* --- Nič v lište nesmie byť širšie než lišta ---------------------------
       Lišty zalomenie majú, ale to samo nestačí: keď je JEDNA položka širšia
       než obrazovka, zalomí sa na vlastný riadok a aj tak preteká. A šírku si
       nepýtajú štýly, ale prehliadač — rozbaľovačka sa roztiahne podľa
       najdlhšej možnosti („Obdobie: september 2026"), pole s dátumom podľa
       natívneho výberu a pole so súborom podľa názvu súboru. Pri 16 px písme
       (viď sekciu 3) je to o to viac. */
    .filterbar > *, .dz-toolbar > *, .mz-toolbar > *, .sv-toolbar > *,
    .fa-toolbar > *, .zm-filters > *, .fin-filters > *, .fin-filters-f > *,
    .rep-filters > *, .nv-filters > *, .hr-filtre > *,
    .vp-upform > *, .mz-selectors > *, .zl-fields > *, .dz-fields > *,
    .fin-upload > *, .stav-filter > *, .dz-tb-range > *, .fa-pohlady > * {
        max-width: 100%;
        min-width: 0;
    }
    select, input[type=date], input[type=file], input[type=datetime-local] {
        max-width: 100%;
    }
    /* Popis so vstupom vnútri („Obdobie: [výber]") sa smie zalomiť. */
    .mz-selectors label, .vp-file, .hr-filtre label, .dz-toolbar label {
        flex-wrap: wrap;
        max-width: 100%;
    }
    /* Trojstĺpcová mriežka Návštevnosti má spodnú hranicu stĺpca 440 px —
       širšiu, než je celý telefón. Na jeden stĺpec. */
    .nv-grid3 { grid-template-columns: 1fr; }

    /* --- Záložky modulu ---------------------------------------------------
       Namiesto zalomenia do troch riadkov sa ťahajú do boku — záložky sú
       jeden pás a v dvoch riadkoch sa v nich stráca poradie.

       Bez pretiahnutia pod okraj obrazovky, hoci by to vyzeralo lepšie:
       zápornými okrajmi by pás prerástol svojho rodiča a `tools/kontrola_mobil.py`
       by to hlásil ako pretečenie. Buď je pravidlo „nič nepreteká" absolútne
       a dá sa naň spoľahnúť, alebo má výnimky a potom nestráži nič. */
    .nx-zalozky {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nx-zalozky::-webkit-scrollbar { display: none; }
    .nx-zalozky > a, .nx-zalozky > button { flex: 0 0 auto; }

    /* Stavový odznak s dlhou vetou (Tržby: „Skúšobná prevádzka · Nexus zatiaľ
       nikomu nič neposiela…") na telefóne zalomí, inak vytlačil celú stránku
       o 92 px do boku (kontrola_mobil, 8. 10. 2026). */
    .nx-stav { white-space: normal; max-width: 100%; }

    /* --- Dlaždice a mriežky ------------------------------------------------
       Dve úzke dlaždice vedľa seba sú na telefóne čitateľnejšie než jedna
       široká — číslo aj popis sa zmestia a nescrolluje sa cez pol obrazovky.
       Pod 480 px už nie je na dve miesto. */
    .stat-grid, .mz-cards, .sv-cards, .vp-cards,
    .zu-kpi, .rep-labor-kpi, .nx-cisla, .module-grid, .hr-vazby,
    .vp-davky, .vp-chks, .vp-odo-grid {
        grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
        gap: 10px;
    }
    .stat-value, .kpi-v { font-size: 1.5rem; }
    /* Širšia dlaždica nástenky sa na telefóne vracia do jedného stĺpca —
       inak by `span 2` v jednostĺpcovej mriežke vytlačil stránku do boku. */
    .stat-grid .nas-w2, .stat-grid .nas-w4 { grid-column: auto; }

    /* Nástenka sa na telefóne needituje. Preskladávanie ťahaním na dotyku je
       boj s prstom aj so scrollom; rozloženie si človek nastaví na počítači
       a telefón ho len zobrazí. Nie je to skrytý obsah, ale skrytý nástroj —
       všetky údaje sú na telefóne rovnako dostupné. */
    #nas-upravit { display: none; }
    body.nas-upravy .nas-plocha { grid-template-columns: minmax(0, 1fr); }
    .nas-katalog { position: static; max-height: none; }
}

@media (max-width: 480px) {
    .stat-grid, .mz-cards, .sv-cards, .vp-cards,
    .zu-kpi, .rep-labor-kpi, .nx-cisla, .module-grid {
        grid-template-columns: 1fr;
    }
    /* Dvojstĺpcové porovnania (zlúčenie duplicít) sa preskladajú pod seba. */
    .hr-dvojica, .zm-detail-grid { grid-template-columns: 1fr; }
    .kv { grid-template-columns: 1fr; gap: 2px; }
    .kv dt { margin-top: 8px; }
}

/* --- Grafy (spoločný engine `static/js/graf.js`) ------------------------
   Samotné kreslenie sa o telefón stará samo: `viewBox` sa počíta na
   skutočnú šírku plochy, takže písmo v grafe ostáva rovnako veľké a nič
   nepretečie do boku (pravidlo č. 1). Sem patrí len obal — prepínač typu
   a legenda sú bežné HTML tlačidlá a musia sa dať trafiť prstom. */
@media (pointer: coarse) {
    .graf-typ { min-height: var(--tap); padding: 8px 14px; font-size: .85rem; }
    .graf-lg { min-height: 34px; font-size: .85rem; }
    /* Tooltip drží prst — na dotyku nie je kam „odísť myšou", tak nesmie
       zakrývať graf viac, než musí. */
    .graf-tip { max-width: 62vw; font-size: .78rem; }
}

@media (max-width: 700px) {
    .graf-hlava { gap: 8px; }
    .graf-typy { margin-left: 0; width: 100%; justify-content: flex-start; overflow-x: auto; }
    /* Ikona stačí; názvy typov by na 390 px lištu rozbili do troch riadkov. */
    .graf-typ span { display: none; }
    .graf-typ { padding: 8px 12px; }
    .graf-legenda { gap: 2px 12px; }
}

/* ==========================================================================
   5) Tabuľky
   --------------------------------------------------------------------------
   Tabuľka je mriežka, ktorá dáva zmysel, len keď vidíš celý riadok naraz.
   Na 390 px to pri siedmich stĺpcoch neplatí — čítaš cez okno na dva
   stĺpce a porovnávať sa nedá.

   Portál preto na telefóne pozná dva režimy a vyberá medzi nimi
   `static/js/mobil.js` podľa toho, ako je tabuľka postavená:

     KARTY (jednoduché zoznamy — Zálohy, Dochádzka, Úlohy, Zmluvy)
        Riadok sa preskladá na kartu: prvá bunka je nadpis, ostatné sú
        dvojice popis–hodnota, akcie sú v päte karty. Nescrolluje sa do boku.

     BOČNÝ SCROLL (Príprava miezd, Výpočet, výsledovka, kalendár)
        Široká dátová mriežka sa na karty preložiť nedá — 16 stĺpcov by dalo
        kartu na dve obrazovky. Ostáva tabuľkou vo vlastnom ráme, ktorý sa
        ťahá do boku, a nad ňou je o tom veta.

   Prepnúť ručne sa dá atribútom na `<table>`:
        data-mobil="karty"     vynúť karty
        data-mobil="tabulka"   nechaj tabuľkou
   ========================================================================== */

@media (max-width: 700px) {

    /* --- Koniec scrollu v scrolle (pravidlo č. 4) -------------------------
       Rám tabuľky má na desktope ohraničenú výšku, aby hlavička ostala
       vidno. Na telefóne to znamená, že prst scrolluje raz stránku a raz
       tabuľku podľa toho, kde sa práve dotkol. Zvislo scrolluje stránka. */
    .table-wrap, .vp-tablewrap {
        max-height: none;
    }

    /* --- Režim KARTY ------------------------------------------------------ */

    /* Rám okolo kariet nič nedrží — rámik má každá karta vlastný. */
    .ma-karty {
        overflow: visible;
        max-height: none;
        border: 0;
        border-radius: 0;
        background: none;
    }
    .filterbar + .ma-karty { margin-top: 10px; }

    /* Karta nie je tabuľka, takže jej nesmie ostať šírka tabuľky. Moduly si
       na širokých mriežkach držia spodnú hranicu (`.vp-str-t` má 420 px, aby
       sa na desktope nezliali stĺpce) — v režime kariet by tá hranica
       vytlačila celú stránku do boku. */
    table.je-karty {
        display: block;
        width: 100%;
        min-width: 0 !important;
        max-width: none;
        font-size: .875rem;
    }
    table.je-karty thead { display: none; }
    table.je-karty tbody, table.je-karty tfoot { display: block; }

    table.je-karty tr {
        display: block;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r);
        box-shadow: var(--shadow-xs);
        margin-bottom: 10px;
        padding: 3px 0;
        overflow: hidden;
    }
    table.je-karty tbody tr:hover td { background: transparent; }

    /* Bunka: popis stĺpca vľavo v pevnom stĺpci, hodnota vedľa neho.
       Popis je umiestnený absolútne zámerne — bunka tak ostáva obyčajný
       blok a obsah vnútri (avatar + meno, štítok, formulár) sa správa
       presne tak, ako na desktope. Flexbox by ho rozobral na kusy. */
    table.je-karty td {
        display: block;
        position: relative;
        width: auto !important;
        min-width: 0;
        max-width: none;
        height: auto;
        padding: 8px 14px 8px 122px;
        border: 0;
        border-bottom: 1px solid var(--line-soft);
        text-align: left;
        white-space: normal;
        line-height: 1.45;
        min-height: 0;
    }
    /* `.tbl:not(.tbl--zalom) tbody td { nowrap }` (styles.css) má vyššiu špecificitu
       než `table.je-karty td` — dlhé meno v karte sa orezalo bez trojbodky (Faktúry
       › Vydané, „Nadácia pre potreby detí…" o 343 px; nezávislý audit 31. 10. 2026). */
    table.je-karty.tbl tbody td { white-space: normal; overflow-wrap: anywhere; }
    table.je-karty td::before {
        content: attr(data-th);
        position: absolute;
        left: 14px;
        top: 9px;
        width: 96px;
        color: var(--faint);
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .045em;
        line-height: 1.35;
        white-space: normal;
    }
    table.je-karty tr > td:last-child { border-bottom: 0; }

    /* Bunka, do ktorej sa PÍŠE, dostane popis nad seba. Vedľa popisu ostáva
       na hodnotu 254 px a to je na opravu sumy alebo dôvodu málo — pole je
       treba vidieť celé. Šírky v šablónach (`style="width:150px"`) sú miery
       desktopových stĺpcov; v karte žiadny stĺpec nie je, tak idú preč. */
    @supports selector(:has(a)) {
        table.je-karty td:not(.karta-akcie):has(
            input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select, textarea
        ) {
            padding: 27px 14px 10px;
        }
        table.je-karty td:not(.karta-akcie):has(
            input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select, textarea
        )::before {
            top: 8px;
            width: auto;
            right: 14px;
        }
    }
    table.je-karty td input:not([type=checkbox]):not([type=radio]),
    table.je-karty td select,
    table.je-karty td textarea {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Prvá bunka je nadpis karty — meno človeka, číslo faktúry, názov
       strediska. Popis nad ňou by bol šum („ZAMESTNANEC: Ján Novák"). */
    table.je-karty td.karta-titul {
        padding: 11px 14px 9px;
        font-size: 1rem;
        font-weight: 650;
        color: var(--ink);
        background: var(--tonal);
        border-bottom: 1px solid var(--line);
    }
    table.je-karty td.karta-titul::before { content: none; }

    /* Bunka bez obsahu kartu len predlžuje. */
    table.je-karty td.karta-prazdna { display: none; }

    /* Riadok cez celú tabuľku — medzisúčet, alebo hláška „nič sa nenašlo".
       Nie je to dvojica popis–hodnota, takže popis nedostane. */
    table.je-karty td.karta-plna {
        padding: 12px 14px;
        text-align: center;
        color: var(--muted);
    }
    table.je-karty td.karta-plna::before { content: none; }

    /* Akcie idú do päty karty na plnú šírku — tam ich prst čaká. */
    table.je-karty td.karta-akcie {
        padding: 10px 14px;
        background: var(--surface-2);
        border-top: 1px solid var(--line-soft);
        border-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    table.je-karty td.karta-akcie::before { content: none; }
    table.je-karty td.karta-akcie > *,
    table.je-karty td.karta-akcie form { flex: 1 1 auto; }
    table.je-karty td.karta-akcie .btn,
    table.je-karty td.karta-akcie .btn-primary,
    table.je-karty td.karta-akcie .btn-ghost,
    table.je-karty td.karta-akcie .btn-submit,
    table.je-karty td.karta-akcie .btn-danger,
    table.je-karty td.karta-akcie button {
        width: 100%;
        min-height: var(--tap);
        justify-content: center;
    }

    /* Čísla sa v karte zarovnávajú doľava — nie je k čomu ich zarovnávať
       vpravo, keď pod sebou nie je stĺpec. */
    table.je-karty td.n, table.je-karty td.num, table.je-karty td.money,
    table.je-karty td.ta-right { text-align: left; }

    /* Súčtový riadok je vlastná karta, vizuálne odlíšená. */
    table.je-karty tfoot tr {
        background: var(--tonal);
        border-color: var(--line-strong);
    }
    table.je-karty tfoot td { font-weight: 650; }

    /* Lepiace stĺpce v karte nemajú zmysel a s absolútnym popisom by sa bili. */
    table.je-karty .stick, table.je-karty .stick-1, table.je-karty .stick-2 {
        position: static;
        left: auto;
        box-shadow: none;
        width: auto;
        min-width: 0;
    }
    /* Farebný prúžok stavu riadka funguje aj na karte — len zľava po celej. */
    table.je-karty tbody tr.st-warn > td:first-child,
    table.je-karty tbody tr.st-ok   > td:first-child { box-shadow: none; }
    table.je-karty tbody tr.st-warn { border-left: 3px solid var(--warning); }
    table.je-karty tbody tr.st-ok   { border-left: 3px solid var(--success); }

    /* Zaškrtávacie políčko výberu ostáva pri nadpise karty. */
    table.je-karty td.karta-vyber {
        position: absolute; top: 10px; right: 12px; padding: 0; border: 0; width: auto !important;
    }
    table.je-karty td.karta-vyber::before { content: none; }
    @supports selector(:has(a)) {
        table.je-karty tr:has(> td.karta-vyber) { position: relative; }
    }

    /* --- Režim BOČNÝ SCROLL ----------------------------------------------- */

    /* Hlavička tu lepiaca NIE JE a ani byť nemôže: rám sa smie ťahať do boku
       (`overflow-x:auto`), čím sa stáva scrollovacou plochou aj zvislo — a
       keďže mu podľa pravidla č. 4 zvislý strop výšky berieme, nemá sa voči
       čomu prilepiť. Zvislo scrolluje stránka. Je to zámena: buď lepiaca
       hlavička a prst uviaznutý v tabuľke, alebo plynulý scroll stránky.
       Na telefóne vyhráva scroll. */
    .ma-bok thead th { position: static; }
}

/* ==========================================================================
   6) Zásuvky, dialógy, Paviel
   ========================================================================== */

@media (max-width: 700px) {
    /* Zásuvka a dialóg zaberú celú obrazovku. Okno v okne sa na telefóne
       nedá ovládať — na zavretie treba trafiť krížik veľkosti nechtu. */
    .dz-zasuvka { width: 100vw; }

    /* Tímový kalendár: lepiaci stĺpec s menom má na desktope 300 px — na
       360 px telefóne by zabral 83 % šírky a na dni by ostalo ~40 px. */
    .tk .tk-emp-col { width: 140px; white-space: normal; padding-right: 6px; }
    .dz-drawer-head { padding-top: calc(14px + env(safe-area-inset-top)); }
    .dz-drawer-close { width: var(--tap); height: var(--tap); font-size: 24px; }
    .dz-drawer-foot {
        flex-wrap: wrap;
        padding-bottom: calc(13px + env(safe-area-inset-bottom));
    }
    .dz-drawer-foot > * { flex: 1 1 auto; min-height: var(--tap); justify-content: center; }

    .nx-dlg.fa-ns {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        margin: auto 0 0;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }
    .fa-modal-foot {
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
    }
    .fa-modal-foot > * { flex: 1 1 auto; }

    .nz-box { padding: 18px 17px calc(18px + env(safe-area-inset-bottom)); }
    .nz-akcie > * { flex: 1 1 auto; min-height: var(--tap); justify-content: center; }
    .nz-akcie .btn-primary { margin-left: 0; }

    /* Bublinky s poznámkou sú na desktope 236/290 px pri kurzore; na
       telefóne by trčali za okraj. */
    .cmt-pop, .note-pop { width: calc(100vw - 24px); max-width: 340px; }

    /* Štítok prepnutého admina: bočné menu je schované, tak od okraja;
       vpravo nechá miesto Pavielovi. */
    .nx-prepnutie { left: 12px; bottom: calc(14px + env(safe-area-inset-bottom));
                    max-width: calc(100vw - 90px); }
    .nx-prepnutie button { min-height: var(--tap); }

    /* Paviel: bublina nech nesedí na pätke a panel nech rešpektuje zárez. */
    .pav-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
    .pav-panel {
        right: 0; bottom: 0; left: 0;
        width: 100%; max-width: none;
        height: 100dvh; max-height: 100dvh;
        border-radius: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ==========================================================================
   7) Tablet
   --------------------------------------------------------------------------
   iPad na výšku (768) beží v mobilnom režime shellu — 232 px menu by z 768
   ukrojilo tretinu. Na šírku (1024) je menu späť a platí desktopové
   rozloženie, len s väčšími cieľmi pre prst (viď sekciu 3).
   ========================================================================== */

@media (min-width: 701px) and (max-width: 1024px) {
    .content { padding: 0 22px; margin: 20px auto; }
    /* Na tablete je na dlaždice miesto, ale nie na päť v rade. */
    .stat-grid, .mz-cards, .sv-cards, .vp-cards, .zu-kpi {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
    /* Rám tabuľky nech nevyžerie celú výšku — pod ním musí byť vidno, že
       stránka pokračuje. */
    .table-wrap { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); }
}

/* Tablet aj telefón na šírku: výšky sa počítajú z dvh, nie vh — panel
   prehliadača sa na mobile skrýva a `vh` s tým nepočíta, takže spodný
   riadok tabuľky končí pod okrajom obrazovky. */
@media (max-width: 1024px) {
    .layout { min-height: 100vh; min-height: 100dvh; }
    .sidebar { height: 100vh; height: 100dvh; }
    .table-wrap--short { max-height: min(460px, 60vh); max-height: min(460px, 60dvh); }
}

/* ==========================================================================
   Tlač zo telefónu — karty sa tlačiť nemajú, tlačí sa tabuľka.
   ========================================================================== */
@media print {
    table.je-karty { display: table; }
    table.je-karty thead { display: table-header-group; }
    table.je-karty tbody { display: table-row-group; }
    table.je-karty tr { display: table-row; border: 0; box-shadow: none; margin: 0; }
    table.je-karty td { display: table-cell; padding: 6px 8px; }
    table.je-karty td::before { content: none; }
    table.je-karty td.karta-prazdna { display: table-cell; }
    .tbl-bok-hint { display: none; }
}


/* --- Košielka zmluvy na telefóne -------------------------------------------
   Košielka je navrhnutá ako list A4 (dva stĺpce údajov, hlavička s menom
   vľavo a firmou vpravo). Na 360 px sa to nezmestí a stránka sa rozhýbe do
   boku — čo je porušenie pravidla č. 1. Preto sa na úzkom displeji preskladá
   do jedného stĺpca; pri tlači platí ďalej pôvodné rozloženie. */
@media (max-width: 700px) {
    .zm-kosielka { padding: 16px 14px; }
    .zm-kos-hlava { flex-direction: column; gap: 8px; }
    .zm-kos-meta { text-align: left; white-space: normal; }
    .zm-kos-hlava h1 { font-size: 1.1rem; overflow-wrap: anywhere; }
    .zm-kos-dl { grid-template-columns: 1fr; gap: 8px; }
    .zm-kos-dl > div { grid-template-columns: 1fr; gap: 1px; }
    .zm-kos-dl dd { overflow-wrap: anywhere; }
    .zm-kos-akcie { flex-wrap: wrap; gap: 8px; }
}



/* Funkčné minimum Chromium 83 (ARCHITEKTURA §2): flex `gap` vie až 84 —
   náhradné okraje ako na konci styles.css. */
@supports not (aspect-ratio: 1 / 1) {
    .tbl-bok-hint > * + * { margin-left: 7px; }
    table.je-karty td.karta-akcie > * { margin: 4px; }
}