/*
 * Mobile Layer — adaptívna vrstva pre verejnú časť IS Číselníky
 *
 * STRATÉGIA: Desktop-first ostáva, mobile rules sa pridávajú v @media (max-width: 47.99em).
 * Žiadne riziko desktop regression — desktop CSS sa nemení, mobile sa pridáva navrch.
 *
 * Tokeny: používaj var(--*) z _tokens.css (loadovaný PRVÝ v base.html.twig).
 *
 * Sekcie:
 *   1. NAVIGATION buttons (mobile-menu-button, desktop-nav-toggle, mobile-nav-close)
 *   2. NAVIGATION sidebar (off-canvas pattern)
 *   3. @media (max-width: 768px) — mobile-specific overrides
 *   4. @media (min-width: 769px) — desktop ensure (po mobile rules)
 *
 * Pridáva sa postupne v Fáze 2 (mobile layout overlay):
 *   - Header (compact, sticky)
 *   - Footer (stack)
 *   - Breadcrumbs (compact)
 *   - Grid system (full-width)
 *   - Accessibility (focus trap, reduced-motion)
 *
 * Súvisí: docs/MOBILE-PLAN.md
 */

/* ========================================
   1. NAVIGATION BUTTONS (default desktop = hidden)
   ======================================== */

/* Mobile menu button - hidden on desktop */
.mobile-menu-button {
    display: none;
    width: 100%;
    padding: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5);
    background-color: var(--color-primary-hover);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-base);
}

.mobile-menu-button:hover {
    background-color: #005ea5;
}

/* Desktop navigation toggle button */
.desktop-nav-toggle {
    display: inline-block;
    margin-bottom: var(--space-5);
}

/* Mobile close button - hidden on desktop */
.mobile-nav-close {
    display: none;
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 28px;
    height: 28px;
    /* Globálne touch-target pravidlá (`button {min-width/height: 44px; padding: 8px 12px}` nižšie v tomto
       súbore) majú nižšiu špecificitu, ale nastavujú min-* + padding, ktoré by inak držali tento close button
       na 44px bez ohľadu na width/height vyššie. Tu ich explicitne rušíme — menší X je zámer (zostáva nad
       WCAG 2.5.8 AA min. 24px, len pod 2.5.5 AAA 44px). Centrovanie X cez flex pri otvorení menu nižšie. */
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background-color: var(--color-error);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    cursor: pointer;
    z-index: var(--z-mobile-close);
    transition: background-color var(--transition-base);
    box-shadow: var(--shadow-md);
}

.mobile-nav-close:hover {
    background-color: var(--color-error-hover);
}

/* ========================================
   2. NAVIGATION SIDEBAR (desktop default = static, mobile = off-canvas)
   ======================================== */

.navigation-sidebar {
    padding-right: 0;
}

/* ========================================
   3. MOBILE OVERRIDES (max-width: 768px = token --bp-mobile)
   ======================================== */

/* Hodnota 768px je hard-coded duplikát tokenu `--bp-mobile` z _tokens.css.
   CSS spec nedovolí `@media (max-width: var(--bp-mobile))` — pri zmene
   breakpointu synchronizuj aj _tokens.css aj mobile.js (getBreakpoint). */
@media (max-width: 768px) {
    /* Show mobile menu button */
    .mobile-menu-button {
        display: block;
    }
    
    /* Show mobile close button only when menu is open */
    .navigation-sidebar.mobile-menu-open .mobile-nav-close {
        display: flex; /* flex (nie block) — align/justify center vycentruje X v 28px boxe */
    }

    /* Padding-top pre nav inner, aby close button (X) v ľavom hornom rohu
       drawer-a neprekrýval prvý nadpis "Číselníky". Na desktop sa neaplikuje —
       close button má display: none, takže by vznikla zbytočná medzera. */
    .idsk-nav-inner {
        padding-top: 50px;
    }
    
    /* Hide desktop toggle on mobile — !important nutné, lebo .desktop-nav-toggle má aj
       .govuk-button .govuk-button--sec ktoré dostávajú `display: inline-flex` z IDSK3 base. */
    .desktop-nav-toggle {
        display: none !important;
    }
    
    /* Navigation sidebar mobile styles */
    .navigation-sidebar {
        position: fixed;
        top: var(--header-height);
        left: -100%;
        width: 80%;
        max-width: var(--sidebar-width);
        height: calc(100vh - var(--header-height));
        background-color: var(--color-bg);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        transition: left var(--transition-slow);
        z-index: var(--z-mobile-menu);
        overflow-y: auto;
        padding: var(--space-5);
    }
    
    /* When menu is open */
    .navigation-sidebar.mobile-menu-open {
        left: 0;
    }
    
    /* Dark overlay for mobile menu */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: var(--z-overlay);
    }
    
    .mobile-menu-overlay.active {
        display: block;
    }
    
    /* Main content takes full width on mobile */
    .main-content-area {
        width: 100%;
    }
    
    /* Adjust navigation content for mobile */
    .navigation-sidebar .govuk-main-wrapper {
        padding: 0;
        margin: 0;
    }
    
    .navigation-sidebar .idsk-navigation-sidebar {
        padding: 0;
        position: relative; /* For absolute positioning of close button */
    }
    
    /* Style navigation items for mobile */
    .navigation-sidebar .idsk-nav-list a {
        display: flex;
        align-items: center;       /* vertikálne vycentruje text — pozadie + ľavý border active stavu sú symetrické okolo textu, nie text hore + prázdno pod ním */
        justify-content: flex-start; /* text vľavo — prebíja justify-content: center z auth.css (`a` selektor), ktoré sa pri display:flex inak aktivuje a centrovalo by text horizontálne */
        min-height: 40px;          /* prebíja touch-min 44px z auth.css → kompaktnejšie položky (menšie medzery medzi nimi) */
        padding: 0 15px;      /* vert. padding 0 — výšku položky určuje min-height 40px, text centruje flex */
        border-radius: var(--radius-sm);
        transition: background-color var(--transition-fast);
    }

    .navigation-sidebar .idsk-nav-list a:hover {
        background-color: var(--color-bg-hover);
    }

    /* Close button styling when menu is open */
    .mobile-menu-button[aria-expanded="true"] {
        background-color: var(--color-error);
    }

    .mobile-menu-button[aria-expanded="true"]:hover {
        background-color: var(--color-error-hover);
    }

    /* Filter section on mobile */
    .navigation-sidebar .idsk-nav-filter-section {
        margin-bottom: var(--space-5);
        padding-bottom: var(--space-5);
        border-bottom: 1px solid var(--color-border);
    }

    /* Filter button on mobile */
    .navigation-sidebar .idsk-filter-trigger {
        width: 100%;
        margin-bottom: 0;
    }

    /* Adjust legend spacing on mobile */
    .navigation-sidebar .govuk-fieldset__legend {
        margin-bottom: 15px;
    }

    /* Better spacing for navigation groups */
    .navigation-sidebar .idsk-nav-group {
        margin-bottom: var(--space-6);
    }

    /* ---------- 3.1 HEADER (compact) — F2 task #11 ---------- */
    /* Cieľ: kompaktný header na mobile. Logo menšie, action panel zalamovať. */

    /* Logo - obmedz max-height aby header nebol obrovský */
    .govuk-header__logo img {
        max-height: 2.5rem; /* 40px */
        width: auto;
        height: auto;
    }

    /* Predheader - kompaktnejší vertical padding */
    .govuk-predheader {
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }

    /* Inline action panel (Profil/2FA/Odhlásiť) — na mobile úplne skrytý.
       IDSK3 pattern (komponenty.idsk3.gov.sk/components/header) hovorí: user akcie
       patria do hamburger drawer, nie do inline panel v header. Akcie sú duplikované
       v `_main_navigation.html.twig` ako `.idsk-nav-user-section`. */
    .app-header__action-panel {
        display: none;
    }

    /* Secondary navigation s "SK" / "Oficiálna stránka" indikátorom — skryť na mobile.
       Nie je kritická informácia pre používateľa a zaberá vertikálny priestor pred logom. */
    .idsk-secondary-navigation {
        display: none;
    }

    /* Mobile menu button — väčší touch target (WCAG 2.5.5 AAA = 48px) + odsadený od hlavičky.
       HAMBURGER ostáva 48px (z 44px ostatných buttonov) — PRIMARY mobile action ktorá vyžaduje
       väčší touch target ako sekundárne tlačidlá. NEZNIŽOVAŤ pri konsolidácii na 44px.
       POZN: sticky position bol pridaný pre issue 8.2 (hamburger pod fold pri cookies banneri)
       ale spôsoboval prekrytie predheader-u s logom Ministerstva. Revert na non-sticky.
       Issue 8.2 znovu otvorený — viď docs/MOBILE-PLAN.md sekcia 8.2 pre 4 alternatívne fixy. */
    .mobile-menu-button {
        min-height: var(--touch-recommended);
        padding: var(--space-3) var(--space-4);
        font-size: var(--fs-base);
        margin-top: var(--space-5);
    }

    /* ---------- 3.2 BREADCRUMBS (horizontal scroll) — F2 task #14 ---------- */
    /* Dlhé breadcrumbs (Domov > Pohlavie > Vlastné dáta > Preklady > Upraviť)
       sa môžu rozšíriť do strán; používateľ scroll-uje vodorovne. Bez wrapu. */

    .govuk-breadcrumbs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    .govuk-breadcrumbs::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Edge */
    }

    .govuk-breadcrumbs__list {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .govuk-breadcrumbs__list-item {
        flex-shrink: 0;
    }

    /* Touch target — kompaktný ale tap-friendly */
    .govuk-breadcrumbs__link {
        display: inline-block;
        padding-top: var(--space-1);
        padding-bottom: var(--space-1);
    }

    /* ---------- 3.3 GRID OVERRIDES (full-width) — F2 task #15 ---------- */
    /* IDSK3 grid kolony default na mobile by mali byť full-width, ale niektoré
       custom layouts (e.g. govuk-grid-column-two-thirds) potrebujú explicit override.
       je nutné kvôli specifite IDSK3 base CSS. */

    /* Padding kompaktnejší na mobile — IDSK3 default je 15px */
    .govuk-grid-row > [class*="govuk-grid-column-"] {
        width: 100%;
        float: none;
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    /* Grid-row negative margins (IDSK3 default -15px) — reset na mobile.
       IDSK3 default párovanie: row margin -15px páruje s column padding 15px = neutrálne.
       My (sekcia 3.3) máme column padding var(--space-4)=16px + width 100% (full-width override),
       takže párovanie už nepotrebné → margin reset na 0 dáva čistý layout. */
    .govuk-grid-row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Safety net — zabrániť horizontal scrollu z akéhokoľvek overflow elementu.
       Sidebar je position: fixed left: -100% (mimo viewport), ale browser jeho
       scrollWidth občas započíta do body scroll. Musíme aj <html> nie iba body.

       `overflow-x: clip` (modern, Chrome 90+, Safari 15.4+, Firefox 81+) je sticky-friendly —
       clip-ne overflow ALE NEPORUŠÍ position: sticky descendants. `hidden` ako fallback
       pre staršie browsery (kde sticky aj tak nebude fungovať ak by sme ho pridali).
       Pri pridávaní sticky elementu v F5 sa toto stane relevantné. */
    html,
    body,
    .govuk-width-container.content-wrapper {
        overflow-x: hidden; /* fallback */
        overflow-x: clip;   /* modern — sticky-friendly */
    }

    /* .idsk-main-content full-width na mobile — presunuté z adminLayout.css (Fáza 2.5 separácia
       public/admin CSS). adminLayout.css je teraz admin-only; toto cieli na verejný changelog/main
       wrapper. mobile.css je loadovaný posledný → bez !important. */
    .idsk-main-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    /* ---------- 3.4 FOOTER (touch-friendly, kompaktný) — F2 task #13 ---------- */
    /* IDSK3 footer už stackuje meta-item-y na mobile cez flex.
       Pridávame iba touch target zlepšenia a layout polish. */

    /* Footer links — block display, kompaktné medzery.
       Bez 44px min-height (ten robil veľké medzery medzi riadkami); tap area drží padding + line-height. */
    .govuk-footer__inline-list-item {
        display: block;
        margin-bottom: 0;
    }

    .govuk-footer__inline-list-item .govuk-footer__link {
        display: inline-block;
        padding: var(--space-1) 0;
        line-height: 1.4;
    }

    /* Up-button "Hore" — full-width tap target */
    .idsk-feedback-bar__up-button .govuk-button {
        width: 100%;
        min-height: var(--touch-min);
        justify-content: center;
    }

    /* Feedback bar action buttons (Áno/Nie) — širšie na mobile */
    .govuk-feedback-bar__actions .govuk-button,
    .govuk-feedback-bar__useful-actions .govuk-button {
        flex: 1 1 auto;
        min-height: var(--touch-min);
    }

    /* Feedback bar (Boli užitočné? + Áno/Nie + Našli ste chybu?) — center align na mobile,
       aby pôsobil ako balanced sekcia, nie zarovnaný ku ľavému okraju.
       __body a __question sú display:flex; flex-wrap:wrap (label + actions sa wrapujú do 2 rows);
       potrebujú justify-content:center inak ostávajú flex-start (vľavo). */
    .govuk-feedback-bar,
    .govuk-feedback-bar__useful-section,
    .govuk-feedback-bar__label {
        text-align: center;
    }

    .govuk-feedback-bar__body,
    .govuk-feedback-bar__question,
    .govuk-feedback-bar__actions,
    .govuk-feedback-bar__useful-actions,
    .govuk-feedback-bar__success-state {
        justify-content: center;
        align-items: center;
    }

    /* Ministerstvo logo vo footeri — kompaktnejšia šírka */
    .govuk-footer__copyright-logo img {
        max-width: 200px;
        height: auto;
    }

    /* Footer meta: govuk používa negatívne -15px gutter marginy + grow flex-basis 320px,
       čo na úzkom viewporte pretečie cez pravý okraj (dlhší text licencie sa oreže).
       Zrušíme gutter marginy, flex-basis a povolíme shrink (min-width:0) → obsah ostane
       vnútri kontajnera a dlhý text sa zalomí namiesto pretečenia. */
    .govuk-footer__meta {
        margin-left: 0;
        margin-right: 0;
    }

    .govuk-footer__meta-item {
        margin-left: 0;
        margin-right: 0;
        min-width: 0;
        max-width: 100%;
    }

    .govuk-footer__meta-item--grow {
        flex-basis: auto;
    }

    .govuk-footer__licence-description {
        overflow-wrap: break-word;
    }

    /* ---------- 3.5 ACCESSIBILITY (focus indicators) — F2 task #12 ---------- */
    /* Focus indicator pre mobile-menu-button + close — viditeľný keyboard focus */
    .mobile-menu-button:focus-visible,
    .mobile-nav-close:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Aktívne odkazy v sidebar — focus-visible podľa IDSK3 patternu */
    .navigation-sidebar .idsk-nav-list a:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* ---------- 3.6 DATATABLES (toolbar, search, pagination) — F3 task #17 ---------- */
    /* DataTables CSS sa loaduje async (media="print" onload=...) cez CDN — môže prísť
       PO mobile.css, takže potrebujeme vyššiu specificity (.dataTables_wrapper .X)
       namiesto !important pre stabilný override. */

    /* DataTables wrapper má display: grid s column track podľa table content (~760px na 10-stĺp).
       Na mobile override na block — children sa stack-ujú normálne podľa flow. */
    .dataTables_wrapper {
        display: block;
    }

    /* `.bottom` (info + pagination wrapper) má v app-idsk3.css `margin-top: -1.25rem` aby
       rušil grid row-gap. Na mobile nie je grid (display: block), takže negative margin
       posúva footer CEZ posledný row tabuľky a vytvára vizuálnu "strikethrough" čiaru
       cez border-top. Reset na 0. */
    .dataTables_wrapper .bottom {
        margin-top: 0;
    }

    /* Length picker + globálny search stack-ujú full-width na mobile. */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        width: 100%;
        flex: 1 1 100%;
        text-align: left;
        margin-bottom: var(--space-3);
    }

    /* margin-top len na length (prvý element) oddeľuje od .dt-buttons toolbaru nad ním;
       filter ho mať nesmie, inak vznikne dvojitý gap. */
    .dataTables_wrapper .dataTables_length {
        margin-top: var(--space-4);
    }

    /* .search-container wrapper (z DataTables dom) — column stack, full-width.
       box-sizing: border-box drží desktop padding-right (3px) vnútri 100% šírky → žiadny mikro-overflow. */
    .dataTables_wrapper .search-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        box-sizing: border-box;
    }

    /* Filter label je inline → block, aby input išiel na plnú šírku pod ním. */
    .dataTables_wrapper .dataTables_filter label {
        display: block;
        width: 100%;
    }

    /* !important nutné — app-idsk3.css line 496-513 má hojné `!important` deklarácie
       (`width: auto !important; height: 40px !important; ...`) pre IDSK3 override.
       Pre mobile musíme prebíjať tie pravidlá → !important späť na width/height/margin.
       Long-term cleanup: odstrániť `!important` z app-idsk3.css spolu so širším projektom
       (~843 !important total). Tracked v MOBILE-PLAN.md sekcii 8.3 (CSS Layers refactor). */
    .dataTables_wrapper .dataTables_filter input {
        display: block;
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: var(--space-2);
        min-height: var(--touch-min);
        height: auto !important;
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-base);
        border: 2px solid var(--color-border);
        border-radius: var(--radius-sm);
        box-sizing: border-box;
    }

    .dataTables_wrapper .dataTables_length select {
        min-height: var(--touch-min);
        font-size: var(--fs-base);
        padding: 0 var(--space-2);
    }

    /* Length label: "Počet záznamov na stránku:" + select na jednom riadku, keď sa zmestí;
       na úzkych zariadeniach (alebo pri väčšom systémovom fonte) sa select zalomí POD text
       namiesto pretečenia. `strong` nowrap = text sa nezalomí doprostred slova. */
    .dataTables_wrapper .dataTables_length label {
        flex-wrap: wrap;
        row-gap: var(--space-2);
    }

    .dataTables_wrapper .dataTables_length label strong {
        white-space: nowrap;
    }

    /* DataTables info + pagination stack */
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
        text-align: center;
        margin-top: var(--space-3);
    }

    /* Toolbar na mobile: `.top-row` stack-uje tlačidlá aj search full-width pod seba. */
    .dataTables_wrapper .top-row {
        flex-direction: column;
        align-items: stretch;
    }

    /* Filter row (search + length): block flow → desktop `order` sa ignoruje (platí len pre flex/grid),
       deti idú v DOM poradí (search → length) full-width pod seba — rovnaké ako pred .filter-row wrapperom. */
    .dataTables_wrapper .filter-row {
        display: block;
    }

    .dataTables_wrapper .top {
        display: block;
        width: 100%;
    }

    /* Akčné/export tlačidlá — čistý 2-stĺpcový grid: každé rovnako široké a zarovnané do stĺpcov
       (predtým flex:1 1 auto → rôzne šírky podľa obsahu = "poposúvané"). Grid drží toolbar
       v šírke wrappera → žiadny druhý horizontálny scrollbar popri tom tabuľkovom. */
    .dataTables_wrapper .dt-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
        margin-bottom: var(--space-3);
    }

    .dataTables_wrapper .dt-buttons .dt-button {
        width: 100%;
        justify-content: center;
        min-height: var(--touch-min);
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-sm);
    }

    /* ColVis dropdown (Vybrať stĺpce) — DataTables JS ho pozicioval relatívne k
       button-u; ak je button v dolnej polovici viewportu a dropdown je vysoký,
       JS ho otočí nahor a obsah ide cez horný okraj. Na mobile ho centrujeme
       ako modal sheet: fixed v strede viewportu, max 80vh s vnútorným scrollom. */
    .dt-button-collection {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        max-height: 80vh !important;
        max-width: 90vw !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* DataTables scroll wrapper — horizontal scroll pre dlhé tabuľky */
    .dataTables_scroll,
    .dataTables_scrollBody {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Responsive expand-row indicator (DataTables responsive plugin) */
    table.dataTable > tbody > tr.dtr-row td.dtr-control,
    table.dataTable > tbody > tr td.dtr-control {
        min-width: var(--touch-min);
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    /* ---------- 3.7 PAGINATION (tap-friendly) — F3 task #19 ---------- */
    /* DataTables pagination buttons + IDSK3 .govuk-pagination */
    .paginate_button,
    .govuk-pagination__item .govuk-pagination__link,
    .govuk-pagination__prev .govuk-pagination__link,
    .govuk-pagination__next .govuk-pagination__link {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
        padding: var(--space-1) var(--space-3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Pagination gap medzi tlačidlami */
    .govuk-pagination__list,
    .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        justify-content: center;
    }

    /* ---------- 3.8 FORMS (touch targets + input types) — F3 task #18 ---------- */
    /* Všetky form inputs — WCAG 2.5.5 AA touch height (44px) + zoom-prevention font-size */
    .govuk-input,
    .govuk-select,
    .govuk-textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        min-height: var(--touch-min);
        font-size: var(--fs-base); /* ≥ 16px zabraňuje iOS zoom-in pri focus */
        padding: var(--space-1) var(--space-3);
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    /* Textarea nepovinne wider */
    textarea,
    .govuk-textarea {
        min-height: calc(var(--touch-min) * 2);
    }

    /* Label — väčší font + spacing */
    .govuk-label,
    label {
        font-size: var(--fs-base);
        margin-bottom: var(--space-2);
    }

    /* Form group spacing */
    .govuk-form-group {
        margin-bottom: var(--space-5);
    }

    /* Form button — full-width na mobile pre primary CTAs */
    .govuk-button-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .govuk-button-group .govuk-button {
        width: 100%;
        margin: 0;
    }

    /* Auth card (login/register/reset password) — full-width na mobile */
    .auth-card {
        padding: var(--space-5) var(--space-4);
        margin: var(--space-3) 0;
        border-radius: var(--radius-md);
    }

    /* ---------- 3.9 MODALS (full-screen na mobile) — F3 task #21 ---------- */
    /* Modal dialogs — full-screen na mobile namiesto centered overlay.
       100dvh (dynamic viewport height) je presnejšie ako 100vh — na iOS Safari
       100vh zarátava aj URL bar a modal môže prerásť viewport. 100dvh sa škáluje
       podľa aktuálne viditeľnej časti. Fallback 100vh ak prehliadač nepodporuje
       dvh (Safari < 15.4, Chrome < 108, Firefox < 101). */
    .modal,
    .modal-dialog,
    [role="dialog"]:not(.govuk-feedback-bar__panel):not(.dt-button-collection) {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    .modal-content {
        height: 100%;
        border-radius: 0;
        border: none;
    }

    /* Modal close button — top-right, big tap target */
    .modal .close,
    .modal-close,
    [data-modal-close] {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        min-width: var(--touch-min);
        min-height: var(--touch-min);
        font-size: var(--fs-xl);
    }

    /* ---------- 3.10 FLASH MESSAGES (toast pattern) — F3 task #22 ---------- */
    /* Flash messages → fixed bottom, no content blocker */
    .flash-message,
    .alert,
    .govuk-notification-banner {
        position: fixed;
        bottom: var(--space-4);
        left: var(--space-3);
        right: var(--space-3);
        z-index: var(--z-popover);
        margin: 0;
        box-shadow: var(--shadow-lg);
        border-radius: var(--radius-md);
    }

    /* ---------- 3.11 BUTTONS (44×44 audit + hierarchy) — F3 task #23 ---------- */
    /* Všetky governmentové buttony — WCAG 2.5.5 AA touch target (44px minimum),
       kompaktnejší ako AAA recommended (48px) aby nepôsobili nadrozmerne. */
    .govuk-button,
    .govuk-button--sec,
    .govuk-button--warning,
    button,
    [type="button"],
    [type="submit"] {
        min-height: var(--touch-min);
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-base);
    }

    /* Entity REST API links (JSON, JSONLD, CSV, XML) — `.entity-metadata-modern .entity-api-link.govuk-button`
       v app-idsk3.css explicitne nastavuje `min-height: 0`. Match specificity (0,3,0) pre override.
       Kompaktné inline buttony, len touch min + tight padding. */
    .entity-metadata-modern .entity-api-link.govuk-button,
    .entity-api-links .govuk-button {
        min-height: var(--touch-min);
        padding: var(--space-1) var(--space-3);
    }

    /* Primary CTAs na mobile — full width pre dôležité akcie */
    .govuk-button--start {
        width: 100%;
    }

    /* Icon close buttons (.btn-close from Bootstrap, .idsk-notification__close from IDSK3) —
       sú to background-image X ikony bez text content, takže globálny `button { min-height: 48px;
       padding: 8px 16px }` ich deformuje na vysoký rectangle. Tu vynucujeme square WCAG 2.5.5
       touch target (44×44) cez explicit min-width + flex centering. */
    .btn-close,
    .idsk-notification__close {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
        padding: var(--space-2);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ---------- 3.12 FILTER PANEL → BOTTOM SHEET — F3 task #20 ---------- */
    /* navigationFilter modal (.idsk-filter-modal / .idsk-filter-dialog) refaktor:
       centered overlay → bottom sheet (slide-up from bottom).
       JS logic (showModal/hideModal/ESC/focus-trap) ostáva v navigationFilter.js.
       Element ma class `idsk-filter-modal` (NIE `idsk-modal`) — viď _filter_navigation_form.html.twig */

    .idsk-filter-modal {
        align-items: flex-end;
        justify-content: stretch;
        /* padding-bottom na modal-container (nie na dialog) posúva dialog nahor od spodku
           viewportu — dialog má `margin: 0 !important` v app-idsk3.css:109, takže margin
           na ňom nefunguje bez ďalšieho !important. */
        padding: 0 0 var(--space-3) 0;
        z-index: var(--z-modal);
    }

    .idsk-filter-modal .idsk-filter-dialog,
    .idsk-filter-dialog.idsk-modal__dialog {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: 100%;
        margin: 0;
        transform: none;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        /* `vh` zahŕňa iOS Safari URL bar + home indicator — modal bottom ide za chrome.
           `dvh` (dynamic viewport height) automaticky reaguje na browser chrome.
           `vh` fallback pre staršie browsery; padding-bottom rieši iPhone home indicator. */
        max-height: 85vh;
        max-height: 85dvh;
        padding-bottom: env(safe-area-inset-bottom);
        /* `overflow: hidden` (NIE auto) — dialog je flex column container, body má vlastný
           `overflow-y: auto; flex: 1 1 auto`. Outer scroll na dialogu rozbíja sticky footer. */
        overflow: hidden;
        padding-top: var(--space-6);
        animation: mobileBottomSheetSlideUp var(--transition-slow);
    }

    /* Drag handle visual indicator hore */
    .idsk-filter-dialog::before {
        content: "";
        position: absolute;
        top: var(--space-2);
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: var(--radius-full);
        background-color: var(--color-border);
    }

    /* Filter trigger button — full-width na mobile */
    #showFiltersButton,
    .idsk-filter-trigger {
        width: 100%;
        min-height: var(--touch-min);
    }

    /* Filter dialog grid kolony — single column na mobile (override z navigationFilter.css) */
    .idsk-filter-dialog .govuk-grid-column-one-half {
        flex: 0 0 100%;
        padding: var(--space-2) 0;
    }

    /* ---------- 3.14 COOKIES SUBSTRÁNKA (/cookies) ----------
       Template `cookies_settings.html.twig` má nested štruktúru:
       main-wrapper → width-container → intro-block-wrap → intro-block → grid-row → column.
       Každý container pridáva ~10-16px horizontal padding → na mobile sa kumulujú a
       content má len ~243px z 375px viewport (65% využitia). Reset paddingu na nested
       containeroch dáva content celých ~325px (cca 87% — main-wrapper si necháva
       16px breathing room každú stranu, čo je OK). */
    #main-content-area > main > .govuk-width-container,
    #main-content-area .idsk-intro-block {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }

    /* Modal body — touch-friendly spacing pre checkboxes.
       `min-height: 0` rieši flexbox pitfall: default `min-height: auto` na flex itemoch
       prevenuje shrinkovanie pod content size. Bez toho body rastie na celý content (1282px)
       a vytlačí footer (Filter/Reset) mimo viewport. */
    .idsk-filter-dialog .idsk-modal__body {
        padding: var(--space-3);
        min-height: 0;
    }

    .idsk-filter-dialog .govuk-checkboxes__item {
        padding: var(--space-1) 0;
    }

    /* Modal header — "Zavrieť" button: IDSK3 base má `.govuk-button { width: 100% }` pre
       mobile-first design, ale v header bare vedľa title vyzerá nadrozmerne (303px wide
       a tlačí title na 2 riadky). Width: auto = content-based, ako na desktope. */
    .idsk-filter-dialog .idsk-modal__header .govuk-button,
    .idsk-filter-dialog .idsk-modal__header .govuk-button--sec {
        width: auto;
    }

    /* ---------- 3.13 USER SECTION V MOBILE DRAWER (IDSK3 pattern) ----------
       Profil/2FA/Odhlásiť presunuté z header inline panelu do hamburger drawer.
       Layout: avatar + meno hore, akcie pod sebou ako tap rows s 44px touch target. */
    .idsk-nav-user-section {
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid var(--color-border);
    }

    .idsk-nav-user-info {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        margin-bottom: var(--space-2);
    }

    .idsk-nav-user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .idsk-nav-user-name {
        font-size: var(--fs-base);
        font-weight: var(--fw-semibold);
        color: var(--color-black);
        overflow-wrap: anywhere;
    }

    .idsk-nav-user-actions {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .idsk-nav-user-actions li {
        margin: 0;
    }

    /* auth.css:948 globálne nastavuje justify-content: center na všetky .govuk-link
       na mobile (touch optimization). Pre user akcie chceme left-align — override. */
    .idsk-nav-user-actions .govuk-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-width: auto;
        min-height: var(--touch-min);
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-base);
        font-weight: var(--fw-semibold);
        color: var(--color-primary);
        text-decoration: none;
        border-radius: var(--radius-sm);
    }

    .idsk-nav-user-actions .govuk-link:hover {
        background-color: var(--color-bg-hover);
        color: var(--color-primary-dark);
    }

    .idsk-nav-user-actions .govuk-link:focus-visible {
        outline: 3px solid var(--color-warning);
        outline-offset: 2px;
    }
}

/* User section v drawer NIE je viditeľný na desktop (IDSK3 pattern — desktop má inline panel). */
@media (min-width: 769px) {
    .idsk-nav-user-section {
        display: none;
    }
}

/* ========================================
   4. SMALL PHONE OVERRIDES (max-width: 480px = token --bp-mobile-s)
   Sub-mobile breakpoint pre iPhone SE / 320-480px viewports — komponenty s mnohými
   inline tap targetmi (pagination) potrebujú kompaktnejší padding/font-size aby
   sa zmestili bez horizontálneho scrollu alebo ošklivého wrappingu.
   ======================================== */

@media (max-width: 480px) {
    /* Pagination — kompaktnejšie pre 6-8 stránok tlačidiel na <400px viewport.
       Touch target ostáva 44px (z @media 768px sekcie 3.7), len padding/font sa zmenšia. */
    .paginate_button,
    .govuk-pagination__item,
    .govuk-pagination__prev,
    .govuk-pagination__next {
        padding: var(--space-1) var(--space-2);
        font-size: var(--fs-xs);
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dataTables_paginate a.paginate_button {
        /* Tighter padding override pre DataTables (app-idsk3.css má padding: 0 10px !important).
           !important nutné lebo originál má !important. */
        padding: 0 var(--space-2) !important;
        font-size: var(--fs-xs) !important;
    }

    /* Hide "Predchádzajúce/Nasledujúce" label text na sub-480px, ponechať len ikonu/šípku */
    .govuk-pagination__prev .govuk-pagination__link-title,
    .govuk-pagination__next .govuk-pagination__link-title {
        display: none;
    }
}

/* Slide-up animácia pre bottom sheet (mimo @media — len definícia keyframes) */
@keyframes mobileBottomSheetSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ========================================
   ACCESSIBILITY GLOBAL OVERRIDES (mimo @media — platí pre mobile aj desktop)
   ======================================== */

/* ========================================
   4. DESKTOP ENSURE (min-width: 769px)
   ======================================== */

@media (min-width: 769px) {
    .navigation-sidebar {
        position: static;
        left: auto;
        height: auto;
        box-shadow: none;
        overflow-y: visible;
    }

    /* Ensure close button is never shown on desktop */
    .mobile-nav-close {
        display: none;
    }

    /* Remove padding for close button on desktop */
    .navigation-sidebar .idsk-nav-menu > div[style*="padding-top"] {
        padding-top: 0;
    }

    /* Hide navigation when toggled on desktop */
    .govuk-grid-row.navigation-hidden #navigation-sidebar {
        display: none;
    }

    /* Full width content when navigation hidden */
    .govuk-grid-row.navigation-hidden #main-content-area {
        width: 100%;
    }
}

/* ========================================
   5. REDUCED MOTION (mimo @media — platí pre mobile aj desktop)
   Sidebar slide-in + button transitions sa vypnú ak má používateľ
   nastavené prefers-reduced-motion: reduce v OS.
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .navigation-sidebar,
    .mobile-menu-button,
    .mobile-nav-close,
    .mobile-menu-overlay,
    .navigation-sidebar .idsk-nav-list a,
    .idsk-filter-dialog {
        /* !important nutné — prebíjа inline animation/transition z bottom-sheet a sidebar slide */
        transition: none !important;
        animation: none !important;
    }
}