/* ==========================================================================
   VZHĽAD ADMINISTRÁCIE
   ==========================================================================
   Prekrývacie štýly, ktoré Filamentu dávajú vzhľad podľa karty
   "Backend - Definícia Backend prostredia". Špecifikácia so všetkými
   rozmermi a ich pôvodom je v _MD/Backend-PROSTREDIE.md.

   ODKIAĽ POCHÁDZAJÚ HODNOTY
   --------------------------------------------------------------------------
   Návrh bol dodaný ako PNG náhľady, nie ako návrhový súbor. Ukázalo sa ale,
   že sú v mierke 1:1 - nameraný ikonový pruh má 101 px pri zadaných 100 px
   a podmenu 198 px pri zadaných 200 px. Každý rozmer aj farba nižšie sú preto
   odmerané priamo z pixelov a nie odhadnuté od oka.

   Tam, kde sa nameraná hodnota líši od zadanej, platí ZADANÁ - rozdiel je
   zaokrúhlenie v náhľade, nie zámer návrhára.

   PREČO !important
   --------------------------------------------------------------------------
   Filament je postavený na Tailwinde a svoje rozmery aj farby nastavuje
   pomocnými triedami priamo na tých istých prvkoch. Prepis s rovnakou
   špecifickosťou by prehral, takže tam, kde ide o hodnotu, ktorú Filament sám
   nastavuje, je !important nevyhnutnosť, nie lenivosť.

   PREČO SA NEPREPISUJÚ BLADE ŠABLÓNY
   --------------------------------------------------------------------------
   Pôvodne to tak vyzeralo, že samostatný stĺpec s podmenu Filament nemá
   a bude ho treba dorobiť prepísaním šablón. Nie je to tak: Filament ho má
   ako "sub navigation" (.fi-page-sub-navigation-sidebar) a stačí ho zapnúť
   a nastýlovať. Rám administrácie tak zostáva nedotknutý a prežije upgrade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PÍSMO
   --------------------------------------------------------------------------
   Zadanie určuje Open Sans pre celé prostredie.

   Súbory písma sú v projekte (Frontend/public/fonts/open-sans/), takže sa
   nesťahujú odnikiaľ zvonka. Filament si so sebou nesie Inter, ktorý je tu
   zámerne prebitý.
   -------------------------------------------------------------------------- */

/*
   Súbory sú v projekte - stiahnuté z Google Fonts a uložené lokálne, NIE
   načítavané z ich servera. Dôvody sú dva:
     - stránka nezávisí od cudzej služby; keď je Google nedostupný, písmo
       aj tak nabehne
     - prehliadač neposiela IP adresu administrátora tretej strane, čo je
       pri európskom zákazníkovi podstatné

   Sú to dva rezy jedného variabilného písma, rozdelené podľa znakov:
     latin      - základná abeceda, čísla, interpunkcia
     latin-ext  - ľ, š, ť, ž, č, ď, ň, ŕ, ô a ostatná diakritika

   unicode-range hovorí prehliadaču, ktorý súbor kedy potrebuje - na stránke
   bez diakritiky sa ten druhý vôbec nestiahne.
*/
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('/fonts/open-sans/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('/fonts/open-sans/open-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.fi-body,
.fi-body * {
    /* Diakritika je tu podstatná: bez latin-ext rezu by sa ľ, š, ť a ž
       dopĺňali zo záložného písma a text by v strede slova zmenil tvar. */
    font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* --------------------------------------------------------------------------
   2. FAREBNÉ A ROZMEROVÉ PREMENNÉ
   --------------------------------------------------------------------------
   Všetko na jednom mieste. Hodnoty označené (Z) sú zo zadania, (M) odmerané
   z návrhu - podrobnosti v _MD/Backend-PROSTREDIE.md.
   -------------------------------------------------------------------------- */
:root {
    --be-rail-width:        100px;   /* (Z) namerané 101 */
    --be-submenu-width:     200px;   /* (Z) namerané 198 */
    --be-topbar-height:      65px;   /* (M) */
    --be-header-height:     100px;   /* (Z) */
    --be-card-inset:         20px;   /* (M) odsadenie karty od okraja okna */

    --be-rail-bg:          #D7D7D7;  /* (M) */
    --be-rail-medzera:       20px;   /* (Z) okolo ikon v pruhu aj medzi nimi */
    --be-surface:          #FFFFFF;  /* (M) */
    --be-divider:          #EBEBEB;  /* (M) linka medzi podmenu a obsahom */
    --be-rail-divider:     #AAAAAA;  /* (M) linka nad Nastaveniami */

    --be-active:           #000000;  /* (Z) */
    --be-inactive:         #7F7F7F;  /* (Z) namerané 7A7A7A */
    --be-muted:            #7B7B7B;  /* (M) popis pod nadpisom */

    --be-badge:            #E30014;  /* (M) bublina s počtom notifikácií */
    --be-logout:           #FF553C;  /* (M) ikona odhlásenia */
}

/* --------------------------------------------------------------------------
   3. RÁM - karta na fotografii
   --------------------------------------------------------------------------
   Aplikácia nevypĺňa okno. Sedí ako biela karta na rozmazanej fotografii,
   ktorá je vidieť po okrajoch a pod spodnou hranou.

   Predlohy (nastavenia_*.jpg, backend definicia prostredia) majú za kartou
   tú istú fotografiu interiéru ako prihlasovacia obrazovka - preto ten istý
   súbor. Farba pod ňou drží vzhľad, kým sa obrázok načíta.
   -------------------------------------------------------------------------- */
.fi-body {
    background-color: #8A7A63;   /* (M) priemerná farba fotografie */
    background-image: url('/images/prihlasenie-pozadie.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Samotná plocha aplikácie. Horná lišta leží NAD ňou, priamo na fotografii,
   preto karta začína až pod ňou. */
.fi-layout {
    margin: 0 var(--be-card-inset) !important;

    /* Šírka sa MUSÍ o odsadenie zmenšiť.
       -----------------------------------------------------------------
       Filament dáva tomuto prvku plnú šírku okna. Samotné margin ju
       nezmenší - prvok zostane široký ako okno a odsadenie ho posunie
       doprava, takže o rovnakých 20 px pretečie. Namerané testom pri
       1024 px: šírka 1024, pravý okraj na 1044. */
    width: calc(100% - (var(--be-card-inset) * 2)) !important;
    max-width: calc(100% - (var(--be-card-inset) * 2)) !important;

    /* Karta má aj spodok - v predlohe (nastavenia_pobocky_zoznam.jpg) končí
       na y=1214 pri okne vysokom 1240, teda rovnakých 20 px nad spodnou
       hranou ako po stranách. Predtým siahala až na koniec okna. */
    margin-bottom: var(--be-card-inset) !important;
    min-height: calc(100vh - var(--be-topbar-height) - var(--be-card-inset)) !important;

    background: var(--be-surface) !important;
    border-radius: 8px;
    /* clip, nie hidden: hidden robí z karty posúvací kontajner a sticky
       (podmenu, hlavné menu) by sa počítal voči nej, nie voči oknu. */
    overflow: clip;
}

/* --------------------------------------------------------------------------
   4. HORNÁ LIŠTA
   --------------------------------------------------------------------------
   Priehľadná, leží na fotografii. Vľavo logo a názov (z Nastavení -
   Copyright), vpravo tri ikony: vyhľadávanie, notifikácie, profil.
   -------------------------------------------------------------------------- */
.fi-topbar,
.fi-topbar-ctn {
    height: var(--be-topbar-height) !important;
    min-height: var(--be-topbar-height) !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Lišta sa NESMIE pripínať k hornému okraju.
   --------------------------------------------------------------------------
   Filament ju má ako position: sticky. Pokiaľ má vlastný biely podklad, je to
   v poriadku - obsah sa pod ňu schová. Naša je ale podľa návrhu priehľadná,
   lebo leží na fotografii nad kartou. Pri posune stránky potom cez ňu bolo
   vidieť obsah karty a názov e-shopu s ikonami sa prekrývali s formulárom
   aj s ľavým pruhom modulov.

   Lišta preto zostáva tam, kde je - na fotografii nad kartou - a pri posune
   odchádza spolu so stránkou. Je to aj bližšie k návrhu: v ňom nie je lišta
   ovládacím prvkom aplikácie, ale hornou hranou obrazovky. */
.fi-topbar-ctn {
    position: static !important;
}

/* Ikony v lište sú BIELE - vo všetkých predlohách (počítač aj mobil)
   ležia biele na tmavšej časti fotografie. Logo a názov vľavo sú tmavé. */
:root {
    --be-topbar-ikona: #FFFFFF;   /* (Z) odmerané 255,251,239 */
}

.fi-topbar-end .fi-icon-btn {
    background: transparent !important;
    color: var(--be-topbar-ikona) !important;
}

/* --- Logo a názov e-shopu vľavo hore ------------------------------------ */
/* Návrh má logo vysoké 40 bodov a hneď za ním názov: prvé slovo tenké,
   druhé tučné ("Eshop Standard"). Názov dopĺňa render hook, viď
   resources/views/filament/nazov-eshopu.blade.php. */
/* Logo dostáva PLOCHU z návrhu, nie pevnú výšku.
   -------------------------------------------------------------------------
   V návrhu zaberá logo obdĺžnik 62 x 20 bodov (odmerané z
   nastavenia_farebnost.jpg, x=28..89, y=26..45). Je to vodorovný variant
   značky; logo, ktoré prišlo ako príloha karty Copyright, je naopak takmer
   štvorcové (250 x 200).

   Preto sa neurčuje výška, ale rámec: object-fit dovnútra vloží akýkoľvek
   tvar bez deformácie. Vodorovné logo vyplní celú šírku, štvorcové sa zmestí
   na výšku. */
/* Lišta podľa nastavenia_pobocky_zoznam.jpg (šírka 1400):
     logo 25-69 x 15-55, názov od x=80 (20 px, "Eshop" Light, "Standard" Bold),
     lupa 1265-1291, zvonček 1299-1323, postavička 1333-1356,
     stredy všetkého na y~36 - o 3 px nižšie než stred 65 px vysokej lišty. */
.fi-topbar {
    padding-top: 7px !important;     /* (M) */
}

.fi-topbar .fi-logo {
    margin-inline-start: 9px !important;   /* (M) 16 px lišty + 9 = x 25 */
    max-height: 40px !important;   /* (M) */
    max-width: 44px !important;    /* (M) */
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

.be-nazov-eshopu {
    margin-inline-start: 11px;   /* (M) */
    font-size: 20px;             /* (M) "Standard" Bold = 90 px ako v predlohe */
    line-height: 1;
    color: var(--be-active);
    white-space: nowrap;
}

/* Light: "Eshop" má v predlohe 52 px, čo sedí na 300, nie na 400 (56 px). */
.be-nazov-eshopu-prva {
    font-weight: 300;
}

.be-nazov-eshopu-zvysok {
    font-weight: 700;
}

/* Profil až za lupou a zvončekom.
   -------------------------------------------------------------------------
   Návrh má vpravo poradie lupa, zvonček, postavička. Ikony sa vkladajú
   háčikom "user-menu.before", takže v značke stoja správne - poradie ale
   určuje flex a používateľské menu má vlastné miesto. Toto ho posunie
   za ne. */
.fi-topbar-end {
    display: flex;
    align-items: center;
    column-gap: 7px !important;          /* (M) zvonček -> postavička */
    padding-inline-end: 22px;            /* (M) postavička končí na x 1358 */
}

.fi-topbar-end .fi-user-menu,
.fi-topbar-end .fi-dropdown:has(.fi-user-menu-trigger) {
    order: 2;
}

/* Postavička namiesto kolieska s iniciálami.
   -------------------------------------------------------------------------
   Filament kreslí v lište avatar - koliesko s iniciálami prihláseného
   ("TU"). Návrh má na tom mieste obyčajnú obrysovú postavičku, rovnakú ako
   ostatné dve ikony.

   Ikona je tá istá, ktorú má tlačidlo "Prihlásiť sa" (public/icons/profil.svg),
   takže sa nikde nekreslí druhýkrát. Vkladá sa ako maska, aby sa dala
   prefarbiť spolu s ostatnými ikonami. */
.fi-topbar-end .fi-user-menu-trigger .fi-avatar {
    display: none !important;
}

.fi-topbar-end .fi-user-menu-trigger::before {
    content: '';
    display: block;
    width: 24px;    /* (M) */
    height: 24px;
    background: var(--be-topbar-ikona);
    -webkit-mask: url('/icons/profil.svg') center / contain no-repeat;
    mask: url('/icons/profil.svg') center / contain no-repeat;
}

/* --- Roletka profilu (Správca, Odhlásiť sa) ----------------------------- */
/*
   Zadávateľ (22. 9.): "roletka a ikony sú v inom dizajne". Predloha pre ňu
   nie je, preto sa zjednocuje so zvyškom administrácie: biela karta so
   zaoblením a okrajom ako pole, čierny text Open Sans 15 px, ikony 20 px.
   Odhlásenie je červené ako v ikonovom pruhu - je to nezvratná akcia.

   Roletka poľa (select) visí NA poli, preto je zaoblená len dole. Táto visí
   pod ikonou v lište, takže je zaoblená dokola.
*/
.fi-body .fi-user-menu .fi-dropdown-panel {
    border: 1px solid var(--be-pole-okraj, #CCCCCC) !important;
    border-radius: 10px !important;   /* (M) */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10) !important;
    overflow: hidden;
    padding: 6px 0 !important;
}

.fi-body .fi-user-menu .fi-dropdown-list {
    padding: 0 !important;
}

.fi-body .fi-user-menu .fi-dropdown-list-item {
    gap: 12px;
    padding: 10px 16px !important;   /* (M) */
    border-radius: 0 !important;
    color: var(--be-active) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

/* Prvý riadok je meno prihláseného - Filament mu dáva sivú ikonu. */
.fi-body .fi-user-menu .fi-dropdown-header {
    gap: 12px;
    padding: 10px 16px !important;
    color: var(--be-active) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

.fi-body .fi-user-menu .fi-dropdown-header .fi-icon,
.fi-body .fi-user-menu .fi-dropdown-list-item .fi-icon {
    width: 20px !important;
    height: 20px !important;
    color: var(--be-active) !important;
}

.fi-body .fi-user-menu .fi-dropdown-list-item:hover {
    background: var(--be-panel) !important;
}

/* Odhlásenie - posledná položka, rovnako červená ikona ako v pruhu vľavo. */
.fi-body .fi-user-menu .fi-dropdown-list-item:last-child .fi-icon {
    color: var(--be-logout) !important;
}

/* --------------------------------------------------------------------------
   5. HLAVNÉ MENU - ikonový pruh 100 px
   --------------------------------------------------------------------------
   Pevná šírka, responzívna výška. Položka je ikona a pod ňou popis.
   Hore moduly (posúvateľné), dole pripnuté Nastavenia a Odhlásiť.
   -------------------------------------------------------------------------- */
/* --sidebar-width je premenná, ktorou Filament riadi nielen šírku samotného
   pruhu, ale aj odsadenie obsahu vedľa neho. Keby sa prepísala len šírka
   pruhu, obsah by zostal odsadený podľa pôvodnej hodnoty a vznikla by medzera.
   Preto sa nastavuje premenná a šírka zároveň. */
.fi-body {
    --sidebar-width: var(--be-rail-width);
    --collapsed-sidebar-width: var(--be-rail-width);
}

.fi-sidebar {
    /* Pruh si pýtal výšku celého okna a karta sa tým naťahovala až na jeho
       spodnú hranu - spodok karty z predlohy potom nebolo vidieť. (Na mobile
       je to roletka cez celú obrazovku - viď ResponzivitaService.) */
    height: calc(100vh - var(--be-topbar-height) - var(--be-card-inset)) !important;

    width: var(--be-rail-width) !important;
    min-width: var(--be-rail-width) !important;
    max-width: var(--be-rail-width) !important;
    background: var(--be-rail-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Pruh na celú výšku karty - VŽDY.
   --------------------------------------------------------------------------
   Karta "Chyba responzivity hlavného menu" (Trello HVwaxQIE, 24. 9. 2026):
   pruh sa musí rozťahovať na celú výšku pri akomkoľvek layoute. Filament ho
   od 64 rem (1024 px) kreslí ako position: sticky s top = výška lišty.
   Lenže karta (.fi-layout) má overflow: hidden kvôli zaobleniu, a sticky
   sa vtedy počíta voči karte, nie voči oknu: prvok sa odsadí o tých 64 px
   od hornej hrany karty (biela medzera nad ikonou Plocha) a výška zostane
   z okna, takže pri karte vyššej než okno chýba aj spodok.

   Rieši sa to tak, že pruh na počítači nie je sticky, ale obyčajný prvok,
   ktorý vypĺňa svoj obal: obal je položka pružnej karty (roztiahnutá na jej
   výšku), takže 100 % = výška karty. Karta má min-height na výšku okna,
   pruh teda nikdy nie je kratší než doteraz a s dlhým obsahom rastie.
   Hranica 64 rem je zámerne Filamentova, nie z Nastavení - musí sedieť
   s tým, kde Filament prepína sticky/fixed. */
@media (min-width: 64rem) {
    .fi-sidebar {
        position: relative !important;
        top: 0 !important;
        height: 100% !important;
        min-height: calc(100vh - var(--be-topbar-height) - var(--be-card-inset)) !important;
    }

    /* Hlavné menu prilepené pri hornom okraji okna (Vojto 6. 10. 2026) -
       rovnako ako podmenu. Pozadie na celú výšku karty nesie obal pruhu,
       samotný pruh je vysoký najviac na okno a pri posúvaní ostáva hore. */
    /* Päta (Číselníky … Odhlásiť) vždy pri spodku obrazovky. */
    .fi-sidebar-footer {
        margin-top: auto !important;
    }

    .fi-layout > div:has(> .fi-sidebar) {
        background: var(--be-rail-bg);
    }

    .fi-sidebar {
        position: sticky !important;
        top: 0 !important;
        align-self: flex-start;
        display: flex !important;
        flex-direction: column !important;
        /* Viditeľná výška karty počíta backend.js (vyskaPruhu). */
        height: var(--be-pruh-vyska, calc(100vh - var(--be-topbar-height) - var(--be-card-inset))) !important;
        min-height: 0 !important;
    }
}

/* Hlavička sidebaru s logom sa nepoužíva - logo je v hornej lište. */
.fi-sidebar-header,
.fi-sidebar-header-ctn {
    display: none !important;
}

/* Moduly sa pri pretečení posúvajú zvisle; funkcie dole nie.
   flex + min-height:0 je to, čo dovolí vnútornému zoznamu naozaj skrolovať
   namiesto toho, aby pretiekol von. */
/* Okolo ikon je 20 px na všetky strany a 20 px medzi nimi - tak to žiada
   zadávateľ (pripomienky z 22. 9.) a sedí to aj s predlohou, kde je prvá
   ikona 24 px pod hornou hranou karty. */
.fi-sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: var(--be-rail-medzera) 0 !important;
}

.fi-sidebar-nav-groups .fi-sidebar-group-items,
.fi-sidebar-footer .fi-sidebar-group-items {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--be-rail-medzera) !important;
    padding: 0 var(--be-rail-medzera) !important;
    margin: 0 !important;
}

.fi-sidebar-item {
    margin: 0 !important;
}

.fi-sidebar-nav-groups {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    /* Posuvník sa neskrýva - zadanie žiada šípku hore a dole na okrajoch
       stĺpca, tá sa dorába samostatne. */
    scrollbar-width: none;
}
.fi-sidebar-nav-groups::-webkit-scrollbar { width: 0; }

/* --- Položka modulu: ikona nad popisom ---------------------------------- */
.fi-sidebar-item-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;   /* (Z) karta HVwaxQIE: medzi ikonou a textom 5 px */
    /* Vlastné odsadenie položky by sa k 20 px medzerám pripočítalo. */
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Moduly na osi päty (Číselníky, Nastavenia). Filament dáva zoznamu modulov
   záporný okraj -8 px a pruhu rezervu 15 px na posuvník (scrollbar-gutter),
   takže ikony stáli 7 px vľavo od osi. Kým bol popis široký 92 px, ťahal
   položky na stred a nebolo to vidieť; pri 70 / 65 px (25. 9. 2026) áno.
   Posúva sa len zoznam modulov (má vlastný overflow), pruh rezervu nepotrebuje. */
.fi-sidebar-nav {
    scrollbar-gutter: auto !important;
}

.fi-sidebar-nav .fi-sidebar-nav-groups {
    margin-inline: 0 !important;
}

.fi-sidebar-item-label {
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: center !important;

    /* Text pod ikonou má najviac 65 px (zadávateľ 25. 9. 2026, predtým 70);
       dlhší názov ("Doprava a sklad") sa zalomí do ďalšieho riadka medzi
       slovami, nie uprostred slova. Stred ostáva na osi ikony: záporný okraj
       je polovica rozdielu medzi 65 px a šírkou tlačidla. */
    white-space: normal !important;
    overflow-wrap: normal;
    hyphens: none;
    width: 65px;
    max-width: 65px;
    margin-inline: calc((100% - 65px) / 2);
}

/* Ikony modulov z príloh karty "Backend - Hlavné menu" (Trello HVwaxQIE):
   plné čierne tvary 32 x 32 px (Z). Odhlásiť má farby v súbore. */
.fi-sidebar .fi-sidebar-item-btn .fi-icon,
.fi-sidebar .fi-sidebar-item-btn svg {
    width: 32px !important;
    height: 32px !important;
    flex: none;
}

/* Neaktívny stav (karta HVwaxQIE): ikona aj text čierne, ale "zošednuté
   na 50 %" - teda polovičná priehľadnosť, nie iná farba. */
.fi-sidebar-item-btn,
.fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item-label {
    color: var(--be-active) !important;
    font-weight: 400 !important;
}

.fi-sidebar-nav .fi-sidebar-item-btn:not(.fi-active) {
    opacity: 0.5;   /* (Z) */
}

.fi-sidebar-nav .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    opacity: 1;
}

/* Aktívny stav: ikona aj text čierne (plná farba). Tučné písmo zrušené -
   karta HVwaxQIE, komentár 28. 9. 2026: „zruš tučné písmo pri prechode
   kurzorom alebo keď je položka aktívna“.
   -------------------------------------------------------------------------
   Trieda je .fi-active, NIE .fi-sidebar-item-active. Overené v šablónach
   Filamentu (resources/views/components/sidebar/item.blade.php, riadok 31:
   'fi-active' => $active). Pôvodne tu bol odhadnutý názov a aktívna položka
   preto zostávala sivá - na obrazovke to vyzeralo, akoby zvýraznenie nebolo
   naprogramované vôbec.

   Selektor pokrýva obe miesta, kde sa trieda objavuje: na položke aj na
   samotnom tlačidle. */
.fi-sidebar-item.fi-active .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-btn.fi-active,
.fi-sidebar-item-btn.fi-active .fi-icon,
.fi-sidebar-item-btn.fi-active .fi-sidebar-item-label {
    color: var(--be-active) !important;
    font-weight: 400 !important;
}

/* Ani pri prejdení kurzorom sa písmo v hlavnom menu nemení. */
.fi-sidebar-nav .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-footer .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    font-weight: 400 !important;
}

/* --- Funkcie pripnuté dole (Nastavenia, Odhlásiť) ----------------------- */
.fi-sidebar-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--be-rail-medzera) !important;   /* 20 px medzi Číselníky, Nastavenia, Odhlásiť */
    flex: 0 0 auto !important;
    border-top: 1px solid var(--be-rail-divider) !important;
    background: var(--be-rail-bg) !important;
    /* Rovnakých 20 px ako hore: nad ikonami, pod nimi aj po stranách. */
    padding: var(--be-rail-medzera) 0 !important;
}

.fi-sidebar-footer > .fi-sidebar-item,
.fi-sidebar-footer > form {
    margin: 0 !important;
}

/* Nastavenia a Odhlásiť sú VŽDY 100 % (karta HVwaxQIE) - bez zošednutia,
   nech je otvorený ktorýkoľvek modul. Ikona odhlásenia má vlastné farby
   (červený kruh s bielym vypínačom priamo v súbore). */
.fi-sidebar-footer .fi-sidebar-item-btn {
    opacity: 1 !important;
}

/* Odhlásiť je <button> vo formulári a bez tohto by bol široký len podľa
   obsahu (60 px namiesto 68) - ikona aj text by sedeli 4 px vľavo od osi
   Číselníkov a Nastavení (zadávateľ 25. 9. 2026). */
.fi-sidebar-footer > form .fi-sidebar-item-btn {
    width: 100% !important;
}

.fi-sidebar-footer .fi-sidebar-item-logout .fi-icon,
.fi-sidebar-footer [data-be-logout] .fi-icon {
    color: var(--be-logout) !important;
}

/* --------------------------------------------------------------------------
   6. PODMENU - stĺpec 200 px
   --------------------------------------------------------------------------
   Vo Filamente je to "sub navigation" stránky. Zobrazuje sa len vtedy, keď má
   otvorený modul čo ponúknuť - čo presne zodpovedá zadaniu ("iba v prípade, že
   je zakliknutý nejaký modul").
   -------------------------------------------------------------------------- */
.fi-page-sub-navigation-sidebar,
.fi-page-sub-navigation-sidebar-ctn {
    width: var(--be-submenu-width) !important;
    min-width: var(--be-submenu-width) !important;
    max-width: var(--be-submenu-width) !important;
    background: var(--be-surface) !important;
    /* box-sizing: vodorovné odsadenie sa počíta DO šírky. Bez toho bol stĺpec
       nameraný o tridsať bodov širší, než hovorí zadanie - odsadenie sa
       pripočítavalo k dvestovke namiesto toho, aby sa do nej zmestilo. */
    box-sizing: border-box !important;
    border-right: 1px solid var(--be-divider) !important;
    /* Zadávateľ (22. 9., obrázok s plochami): v podmenu je 20 px zhora,
       po stranách aj medzi položkami - rovnako ako v ikonovom pruhu.
       Zdola 40 px na všetkých rozlíšeniach (Trello tX69QH7f, 7. 10. 2026) -
       posledná položka nesmie byť pod okrajom okna neklikateľná. */
    padding: var(--be-rail-medzera) 0 40px !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-items {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--be-rail-medzera) !important;
    padding: 0 var(--be-rail-medzera) !important;
    margin: 0 !important;
}

/* Obal sub-navigácie si nesie vlastnú medzeru voči obsahu. Nuluje sa, aby
   oddeľovacia čiara sedela presne na hranici dvestovky. */
.fi-page-has-sub-navigation-start .fi-page-sub-navigation-sidebar-ctn {
    margin-inline-end: 0 !important;
}

/* 40 px pod poslednou položkou drží samotný stĺpec - obal ho nezdvojuje. */
.fi-page-sub-navigation-sidebar-ctn {
    padding-bottom: 0 !important;
}

/* PODMENU SIAHA OD VRCHU, HLAVIČKA JE VEDĽA NEHO
   -------------------------------------------------------------------------
   V návrhu (nastavenia_farebnost.jpg a spol.) je podmenu samostatný stĺpec
   od horného okraja plochy až dolu a nadpis modulu stojí VEDĽA neho, nie
   nad ním.

   Filament ho kreslí inak: najprv hlavička cez celú šírku a až pod ňou riadok
   s podmenu a obsahom. Nadpis tým začínal na kraji podmenu a celá stránka
   vyzerala inak zalomená než návrh.

   Rieši sa umiestnením, nie presunom v značke - podmenu sa vyberie z toku
   a pripne na ľavý okraj cez celú výšku, hlavička aj obsah sa o jeho šírku
   odsadia. Značka Filamentu zostáva nedotknutá, takže sa nič nerozbije pri
   jeho aktualizácii.

   Platí len na stránkach, ktoré podmenu MAJÚ (trieda
   fi-page-has-sub-navigation) - stránka bez neho by inak mala vľavo 200 bodov
   prázdneho miesta.

   Na užších obrazovkách, kde sa podmenu skrýva, odsadenie vracia na nulu
   App\Services\ResponzivitaService (podľa hraničných bodov z Nastavení).
   Hranica tu zámerne NIE JE napísaná - viď oddiel 9 nižšie. */
.fi-main .fi-page-header-main-ctn {
    /* Hlavička začína hneď pod hornou lištou.
       ---------------------------------------------------------------------
       Filament dáva obalu odsadenie 32 px zhora, takže nadpis modulu sedel
       o toľko nižšie než v návrhu - a s ním celý zvyšok stránky.

       Medzeru medzi hlavičkou a obsahom (Filament 32 px) drží .fi-page-content
       nižšie - v predlohe je hlavička stĺpcov tabuľky 11 px pod hlavičkou
       (nastavenia_pobocky_zoznam.jpg: hlavička končí na y=165, prvý riadok
       tabuľky začína na y=229 pri výške riadku 53 px). Mobil má vlastné
       odsadenie .fi-page-content v ResponzivitaService. */
    padding-top: 0 !important;
    row-gap: 0 !important;
}

.fi-main .fi-page-has-sub-navigation .fi-page-header-main-ctn {
    position: relative;
}

.fi-main .fi-page-has-sub-navigation .fi-page-sub-navigation-sidebar-ctn {
    /* Obal má vlastných 20 px zhora; medzeru drží samotný stĺpec, inak by
       sa sčítali a prvá položka by bola 40 px pod hornou hranou karty. */
    padding-top: 0 !important;
    position: absolute !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

/* Podmenu s vlastným posúvaním (Vojto 2. 10. 2026): keď je položiek viac,
   než sa zmestí, posúva sa samo. Výška = karta, najviac výška okna; pri
   dlhej stránke ostáva prilepené pri hornom okraji okna. */
.fi-main .fi-page-has-sub-navigation .fi-page-sub-navigation-sidebar {
    position: sticky !important;
    top: 0;
    max-height: min(100%, 100vh);
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #CCCCCC transparent;
}

/* Čiara podmenu až po spodnú hranu karty (Trello z57KqbFl, 26. 9. 2026).
   -------------------------------------------------------------------------
   Podmenu je pripnuté k obalu hlavičky a obsahu (.fi-page-header-main-ctn),
   a ten bol len taký vysoký ako obsah - pri krátkom zozname čiara končila
   v polovici okna. .fi-main má výšku celej karty (je roztiahnutý v pružnej
   karte), tak sa jeho výška pružným rozložením podá cez stránku až na obal. */
.fi-main:has(> .fi-page-has-sub-navigation) {
    display: flex !important;
    flex-direction: column !important;
}

.fi-main > .fi-page-has-sub-navigation {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
}

.fi-main .fi-page-has-sub-navigation > .fi-page-header-main-ctn {
    flex: 1 1 auto;
}

/* !important je tu nutné: hlavička modulu má nižšie v oddiele 7
   "margin: 0 !important", ktoré by toto odsadenie prebilo. */
.fi-main .fi-page-has-sub-navigation .fi-header,
.fi-main .fi-page-has-sub-navigation .fi-page-main {
    margin-left: var(--be-submenu-width) !important;
}

/* ==========================================================================
   PODMENU - globálne pravidlo (karta 37FOahyC „Backend - Podmenu“, 26. 9. 2026)
   --------------------------------------------------------------------------
   - bloky položiek, každý s hlavičkou Open Sans 18 px Bold, 20 px nad prvou
     položkou; na konci riadka hlavičky ikona podmenu.svg 15 x 15 px
     (zbalí / rozbalí),
   - položka: ikona 26 x 26 px, text 10 px vpravo; jednoriadkový text je na
     strede ikony, viacriadkový začína na vrchu ikony; medzi položkami 20 px,
   - červená bublina je na výšku na strede textu (komentár 26. 9. 14:39),
   - neaktívna #7F7F7F, po prejdení myšou a aktívna #000000 (ikona aj text),
     text vždy 13 px Regular - bez Bold (zadávateľ 26. 9. 2026),
   - bublina s číslom na konci riadka (podľa modulu, BublinaPoctu),
   - filtre pod položkou (Objednávky → Prijaté ...) spojené čiarami.
   ========================================================================== */
.fi-page-sub-navigation-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;   /* medzi blokmi (návrh: ~40 px pod poslednou položkou) */
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;   /* hlavička -> prvá položka */
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group.fi-collapsed {
    gap: 0 !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-btn {
    padding: 0 var(--be-rail-medzera) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    cursor: pointer;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-label {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #000000 !important;
}

/* Ikona podmenu.svg na konci hlavičky - 15 x 15 px, farba #7F7F7F (zadávateľ
   26. 9. 2026, komentáre 14:36 a 15:48), bez otáčania šípky Filamentu. */
.fi-page-sub-navigation-sidebar .fi-sidebar-group-collapse-btn {
    width: 15px !important;
    height: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #7F7F7F !important;
    transform: none !important;
    rotate: none !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-collapse-btn .fi-icon,
.fi-page-sub-navigation-sidebar .fi-sidebar-group-collapse-btn svg {
    width: 15px !important;
    height: 15px !important;
    color: #7F7F7F !important;
    transform: none !important;
    rotate: none !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-items {
    gap: 20px !important;   /* medzi položkami */
}

/* Položka: ikona vľavo hore, text vedľa nej, bublina na konci riadka. */
.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 10px !important;
    /* Odsadenie nesie stĺpec (20 px), položka už žiadne nepridáva. */
    padding: 0 !important;
    opacity: 1 !important;
    background: transparent !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn .fi-icon,
.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn > svg {
    width: 26px !important;
    height: 26px !important;
    flex: none;
    color: #7F7F7F !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item-label {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 17px !important;
    /* Text je aspoň taký vysoký ako ikona (26 px) a v tej výške vycentrovaný:
       jeden riadok (17 px) tak stojí na strede ikony, dva a viac riadkov
       (34 px+) sú vyššie než ikona a začínajú na jej vrchu (zadávateľ
       26. 9. 2026, komentár 14:39). */
    display: flex !important;
    align-items: center !important;
    min-height: 26px !important;
    padding-top: 0 !important;
    color: #7F7F7F !important;
    text-align: left !important;
    white-space: normal !important;
    /* Zalamovanie, 65 px a záporné okraje sú len pre úzky ikonový pruh. */
    width: auto;
    max-width: none;
    margin-inline: 0;
    flex: 1 1 auto;
    min-width: 0;
}

/* Prejdenie myšou a aktívna položka: čierna, bez Bold (zadávateľ 26. 9. 2026).
   Podpoložky sa riadia samy - otvorená nadradená položka ich nezafarbí. */
.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #000000 !important;
    font-weight: 400 !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn:hover .fi-icon,
.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn:hover > svg,
.fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon,
.fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > svg {
    color: #000000 !important;
}

/* Bublina na výšku na strede textu: riadok položky je vysoký ako text
   (min. 26 px), bublina sa v ňom centruje. */
.fi-page-sub-navigation-sidebar .fi-sidebar-item-badge-ctn {
    align-self: center !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item-badge-ctn .fi-badge {
    line-height: 16px !important;
}

/* Filtre pod položkou (Objednávky → Prijaté, Čakajúce, Vybavené, Zrušené).
   Čiary podľa návrhu: jedna zvislá pod ikonou nadradenej položky (kreslí ju
   zoznam filtrov, aby ju nepreťala vyššia bublina) a krátka vodorovná ku
   každému filtru. Text filtra začína tam, kde text nadradenej položky.
   Filter má vlastný stav: neaktívny sivý, aktívny / pod myšou čierny (bez
   Bold) - otvorená nadradená položka ho nezafarbí. */
.fi-page-sub-navigation-sidebar .fi-sidebar-sub-group-items {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 10px !important;
    padding: 0 !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-sub-group-items::before {
    content: '';
    position: absolute;
    left: 12.5px;
    top: -6px;
    bottom: 10px;   /* po stred posledného filtra */
    width: 1px;
    background: #BFBFBF;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-btn {
    align-items: center !important;
    min-height: 20px;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item > .fi-sidebar-item-btn .fi-sidebar-item-label {
    padding-top: 0 !important;
    min-height: 20px !important;
    color: #7F7F7F !important;
    font-weight: 400 !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item > .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-page-sub-navigation-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #000000 !important;
    font-weight: 400 !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-badge-ctn {
    align-self: center;
    margin-top: 0;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item-grouped-border {
    position: relative !important;
    width: 26px !important;
    align-self: stretch !important;
    flex: none;
    margin: 0 !important;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item-grouped-border-part-not-first,
.fi-page-sub-navigation-sidebar .fi-sidebar-item-grouped-border-part-not-last {
    display: none !important;
}

/* Bodka Filamentu -> vodorovná čiarka od zvislej čiary k textu. */
.fi-page-sub-navigation-sidebar .fi-sidebar-item-grouped-border-part {
    position: absolute !important;
    left: 12.5px !important;
    top: 50% !important;
    width: 13.5px !important;
    height: 1px !important;
    border-radius: 0 !important;
    background: #BFBFBF !important;
    transform: none !important;
}

/* --- Bublina s počtom záznamov (Trello eel1HxBZ, 30. 9. 2026) ------------ */
/* Sivý krúžok #F0F0F0 s čiernym písmom = celkový počet záznamov modulu;
   červený s bielym (farba 'danger') = v module je niečo nové / neprečítané /
   expirované - viď App\Support\BublinaPoctu.
   margin-left:auto ju posunie na koniec riadku nezávisle od dĺžky textu. */
.fi-sidebar-item-badge-ctn {
    margin-left: auto !important;
}

.fi-sidebar-item-badge-ctn .fi-badge {
    background: #F0F0F0 !important;
    color: #000000 !important;
    border-radius: 999px !important;
    /* Vždy miesto na 3 číslice (komentár 30. 9. 12:50); dlhšie číslo je
       skrátené na „1..“ a celé je v tooltipe (App\Support\Bublina). */
    min-width: calc(3ch + 12px) !important;
    justify-content: center !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px !important;
    font-size: 11px !important;
    font-weight: 400 !important;         /* sivá = Regular */
    border: 0 !important;
    box-shadow: none !important;
}

.fi-sidebar-item-badge-ctn .fi-badge * {
    font-weight: inherit !important;
    color: inherit !important;
}

.fi-sidebar-item-badge-ctn .fi-badge.fi-color-danger {
    background: var(--be-badge) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;         /* červená = Bold */
}

/* --------------------------------------------------------------------------
   7. HLAVIČKA MODULU
   --------------------------------------------------------------------------
   Výška 100 px, nadpis H1 s rovnakým textom ako položka podmenu, pod ním
   voliteľný popis z prekladov, vpravo plocha pre funkcie modulu (filtre).
   -------------------------------------------------------------------------- */
.fi-header {
    display: flex !important;
    /* Návrh zarovnáva nadpis aj tlačidlá k HORNEJ hrane hlavičky, nie na jej
       stred: nadpis začína na y=92, tlačidlá na y=93 (odmerané
       z nastavenia_pobocky_zoznam.jpg). Pri zarovnaní na stred sedel nadpis
       inak než tlačidlá, lebo sú rôzne vysoké. */
    align-items: flex-start !important;
    min-height: var(--be-header-height) !important;
    margin: 0 !important;
    /* Horné odsadenie MUSÍ byť v tomto skrátenom zápise, nie nad ním -
       skrátený zápis by ho inak prepísal na nulu. */
    padding: 27px 32px 0 !important;   /* (M) */
    /* Bez deliacej čiary - žiadna predloha ju pod hlavičkou nemá
       (nastavenia_identita.jpg, nastavenia_pobocky_zoznam.jpg, image6.png). */
    border-bottom: 0 !important;
    background: var(--be-surface) !important;
}

.fi-header-heading {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--be-active) !important;
    line-height: 1.2 !important;
}

/* --- Nadpis "Modul > Položka podmenu" ---------------------------------- */
/* Skladá ho Frontend/resources/views/vendor/filament-panels/components/
   header/index.blade.php z navigačnej cesty; tu dostáva len vzhľad z návrhu:
   oba názvy tučné čierne, oddeľovač tenký sivý. */
.be-nadpis-modul,
.be-nadpis-polozka {
    font-weight: 700;
}

/* Štandard hlavičky každého layoutu (zadávateľ 24. 9. 2026, tabuľka aj
   formulár): nadpis 28 px tučný, časti oddelené ikonou šípky #CCCCCC (Z)
   z prílohy (icons/drobeckova-navigacia.svg), ikona 24 x 24 px ako všetky ikony. */
.be-nadpis-oddelovac {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: #7F7F7F;   /* štandard prvkov (fGaWyseJ, 28. 9. 2026) */
    margin: 0 10px;   /* medzery medzi ikonami a textami 10 px */
}

.be-nadpis-oddelovac svg,
.be-nadpis-oddelovac .fi-icon {
    width: 24px;
    height: 24px;
}

/* Klikateľné úrovne nadpisu (zadávateľ 28. 9. 2026, všetky layouty): vyzerajú
   rovnako ako text nadpisu, odkaz prezradí kurzor a podčiarknutie pri prejdení. */
.fi-header-heading .be-nadpis-odkaz {
    color: inherit;
    text-decoration: none;
}

.fi-header-heading .be-nadpis-odkaz:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Štandard prvkov (Trello fGaWyseJ, 28. 9. 2026): pod H1 medzera 10 px,
   textová časť je P - Open Sans 14 px Light #7F7F7F a pod ňou 20 px. Každý
   layout ju má (popis stránky z Prekladov, viď šablóna hlavičky). */
.fi-header-subheading {
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.45 !important;
    color: var(--be-inactive) !important;
    margin: 10px 0 20px !important;
}

/* Ikona hlavného modulu na začiatku H1 (štandard 28. 9. 2026), 10 px od textu. */
.fi-header-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.be-nadpis-ikona {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    color: var(--be-active);
}

.be-nadpis-ikona .fi-icon,
.be-nadpis-ikona svg {
    width: 32px !important;
    height: 32px !important;
}

/* Plocha pre funkcie modulu. Drží sa vpravo aj keď je prázdna, aby sa
   rozloženie nehýbalo podľa toho, či modul filtre má alebo nemá. */
.fi-header-actions-ctn {
    margin-left: auto !important;
    align-items: center !important;
    /* Tlačidlá sa zarovnávajú k hornej hrane hlavičky rovnako ako nadpis -
       v návrhu začínajú obe na tej istej výške (nadpis y=92, tlačidlá y=93).
       Bez toho si plocha tlačidiel drží vlastné zvislé zarovnanie a sedela
       o štrnásť bodov nižšie. */
    align-self: flex-start !important;
    margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   8. OBSAHOVÁ PLOCHA
   -------------------------------------------------------------------------- */
/* Obsahová plocha nemá po stranách vlastné odsadenie.
   -------------------------------------------------------------------------
   Filament dáva .fi-main odsadenie 32 px zľava aj sprava. Zľava tým odtlačí
   podmenu od ikonového pruhu, čo návrh nemá - podmenu naň v návrhu priamo
   nadväzuje. Celý obsah sa tým posunul o 32 bodov vpravo a v porovnaní
   s návrhom "nesedelo" úplne všetko, hoci chyba bola jediná.

   Odsadenie samotného obsahu od podmenu zostáva - dáva ho .fi-page-content
   a hlavička modulu nižšie. */
.fi-main {
    padding-left: 0 !important;
    padding-right: 0 !important;

    /* Obsah sa roztiahne do celej karty.
       -------------------------------------------------------------------------
       Filament mu dáva najväčšiu šírku 1366 px a nad ňou celý blok vycentruje.
       Podmenu je pripnuté k tomuto bloku, takže od zhruba 1490 px sa odlepilo
       od ikonového pruhu a vľavo od neho zostal biely pás - nahlásené
       zadávateľom pri rozlíšení 1723 px. Podmenu má stále 200 px, len sa
       nemá kam posúvať. */
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.fi-main,
.fi-main-ctn {
    background: var(--be-surface) !important;
}

/* Zadávateľ (22. 9.): okolo obsahu 30 px. Horné odsadenie je menšie, aby
   hlavička stĺpcov tabuľky sedela na 177 px ako v predlohe - medzeru nad
   obsahom drží samotná hlavička modulu. */
.fi-page-content {
    padding: 12px 30px 30px !important;   /* (M) */
}

/* Formuláre začínajú nadpisom sekcie o kúsok nižšie než tabuľka: nadpis
   "Identita" / "Farebnosť" / "Fonty" má v predlohách písmo od y=191. */
.fi-page-content > form {
    padding-top: 10px;   /* (M) */
}

/* --- Ľavý a pravý stĺpec ------------------------------------------------ */
/* Zadanie delí obsah na dva stĺpce a pri formulárových podstránkach sa bude
   pri každom poli uvádzať, do ktorého patrí. V šablóne sa použije
   <div class="be-columns"> s deťmi .be-col-left a .be-col-right. */
.be-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* --------------------------------------------------------------------------
   9. RESPONZIVITA
   --------------------------------------------------------------------------
   V TOMTO SÚBORE UŽ ŽIADNE @media NIE SÚ.
   --------------------------------------------------------------------------
   Šesť hraničných bodov sa zadáva v Nastaveniach → Identita. Pravidlo @media
   hodnotu z CSS premennej prečítať nevie, takže napísané natvrdo v súbore by
   sa nastaveniami riadiť nedalo. Všetky responzívne pravidlá administrácie
   preto skladá App\Services\ResponzivitaService::administracia() a vpisujú sa
   do hlavičky stránky - teda AŽ ZA tento súbor, aby ho vedeli prebiť.

   Tu zostal len vzhľad prvkov, ktoré tie pravidlá zapínajú a vypínajú
   (spodná lišta na mobile a podobne).

   Pôvodné public/css/responsive.css a public/css/admin.css z toho istého
   dôvodu zanikli - nehľadaj ich.
   -------------------------------------------------------------------------- */

/* Tablet nastojato a menej: podmenu sa skryje, obsah dostane celú šírku.
   Ktorá presne hranica to má byť, v karte určené nie je - zvolená je tá,
   pri ktorej dva bočné stĺpce (300 px) zaberajú vyše štvrtiny šírky. */
/* Mobil: ikonový pruh zmizne a nahradí ho spodná lišta s tromi položkami -
   Moduly, Nastavenia, Odhlásiť. Samotná lišta sa vkladá cez render hook,
   tu je len jej vzhľad a uvoľnenie miesta pod obsahom. */
/* --- Spodná lišta na mobile -------------------------------------------- */
.be-mobile-bar {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    background: var(--be-rail-bg);
    border-top: 1px solid var(--be-rail-divider);
}

.be-mobile-bar a,
.be-mobile-bar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    font-size: 12px;
    font-weight: 300;
    color: var(--be-inactive);
    background: transparent;
    border: 0;
    /* Oddeľovače medzi tromi položkami, ale nie na krajoch. */
    border-left: 1px solid var(--be-rail-divider);
}
.be-mobile-bar > :first-child { border-left: 0; }

.be-mobile-bar [data-be-logout] { color: var(--be-logout); }

/* Spodná lišta podľa návrhu (nastavenia_pobocky_zoznam_filter-mobil.jpg)
   a komentára karty HVwaxQIE z 30. 9. 2026 (mobil na výšku aj na šírku).
   -------------------------------------------------------------------------
   Leží v šírke bielej karty (20 px od okrajov okna) a končí 20 px nad
   spodnou hranou okna - so zaoblenými spodnými rohmi ako karta. Tri rovnaké
   bunky oddelené linkou, ikona 26 px nad popisom 13 px, popisy čierne;
   pri Odhlásiť je červená len ikona (odhlasit-menu.svg z Médií). */
.be-mobile-bar {
    inset: auto var(--be-card-inset) var(--be-card-inset) var(--be-card-inset);
    min-height: 68px;
    /* Zaoblené len spodné rohy 15 px, horné rovné, bez čiary nad lištou
       (HVwaxQIE, 30. 9. 2026). */
    border-radius: 0 0 15px 15px;
    overflow: hidden;
    border-top: 0;
}

.be-mobile-bar a,
.be-mobile-bar button,
.be-mobile-bar [data-be-logout] {
    gap: 6px;
    padding: 9px 4px 8px;
    color: var(--be-active);
    font-weight: 400;
    font-size: 13px;   /* (M) */
    line-height: 1.2;
}

.be-mobile-bar form {
    display: flex;
    border-left: 1px solid var(--be-rail-divider);
}

.be-mobile-bar form > button {
    flex: 1 1 auto;
    border-left: 0;
}

.be-mobile-bar svg,
.be-mobile-bar .fi-icon {
    width: 26px !important;
    height: 26px !important;
    color: var(--be-active);
}

.be-mobile-bar [data-be-logout] svg,
.be-mobile-bar [data-be-logout] .fi-icon {
    color: var(--be-logout);
}

/* Podklad lišty - tá istá fotografia ako pozadie (.fi-body, fixed), takže
   nadväzuje. Siaha od vrchu lišty po spodok okna: v rohoch lišty (15 px)
   je vidieť fotografiu, nie bielu kartu, a pod lištou nepresvitá posúvaný
   obsah. Zobrazuje sa spolu s lištou (ResponzivitaService). */
.be-mobile-bar-podklad {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    height: calc(68px + var(--be-card-inset));
    z-index: 39;
    background-color: #8A7A63;
    background-image: url('/images/prihlasenie-pozadie.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   10. IKONY V HORNEJ LIŠTE
   --------------------------------------------------------------------------
   Lupa a zvonček. Ležia na fotografii - biele a bez podkladu.
   Vkladá ich resources/views/filament/topbar-icons.blade.php.
   -------------------------------------------------------------------------- */
.be-topbar-icons {
    display: flex;
    align-items: center;
    gap: 10px;               /* pripomienka zadávateľa 24. 9.: medzi ikonami 10 px */
    margin-inline-end: 0;
}

/* Lupa a zvonček sú v predlohe výrazné - kresba 26 a 24 px, čiara ~2 px.
   Heroicons majú okolo kresby voľný okraj, preto 30 px celá ikona. */
.be-topbar-icon .fi-icon {
    width: 24px !important;  /* pripomienka zadávateľa 24. 9.: všetky ikony 24 x 24 px */
    height: 24px !important;
}

.be-topbar-icon {
    position: relative;   /* kotva pre bublinu s počtom */
    display: inline-flex;
    align-items: center;
    color: var(--be-topbar-ikona);
}
.be-topbar-icon:hover { opacity: .7; }

/* Otvoriť frontend (zadanie Vojta 27. 9. 2026): text sa po prechode myšou
   vysunie zľava od ikony; odkaz zahŕňa text aj ikonu, takže klik na oboje
   otvorí frontend v novom tabe. Text ide cez max-width, aby sa lišta
   neposúvala skokom. */
.be-topbar-frontend {
    gap: 0;
    color: var(--be-topbar-ikona);
    text-decoration: none;
}
.be-topbar-frontend:hover { opacity: 1; }
.be-topbar-frontend-text {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    font-size: 16px;
    transition: max-width .25s ease, opacity .2s ease, margin .25s ease;
}
.be-topbar-frontend:hover .be-topbar-frontend-text,
.be-topbar-frontend:focus-visible .be-topbar-frontend-text {
    max-width: 200px;
    margin-inline-end: 10px;
    opacity: 1;
}

/* Text sa nezmestí (backend.js meria voľné miesto) alebo je to dotykové
   zariadenie: len ikona, ikony vpravo sa neposúvajú (HVwaxQIE, 30. 9. 2026). */
.be-topbar-frontend.be-bez-textu .be-topbar-frontend-text {
    max-width: 0 !important;
    margin-inline-end: 0 !important;
    opacity: 0 !important;
}
@media (hover: none) {
    .be-topbar-frontend-text { display: none; }
}

/* Oddeľovač - zvislá čiara medzi ikonou frontendu a lupou. */
.be-topbar-oddelovac {
    display: block;
    width: 1px;
    height: 24px;
    background: var(--be-topbar-ikona);
    opacity: .5;
}

/* Bublina s počtom neprečítaných. Vysunutá za okraj ikony, aby ju
   neprekrývala. */
/* Predloha: krúžok 14 px, horným okrajom na úrovni vrchu zvončeka,
   vpravo zarovnaný s jeho okrajom. */
.be-topbar-badge {
    position: absolute;
    top: 2px;                /* (M) */
    inset-inline-end: 0;
    min-width: 14px;         /* (M) */
    padding: 0 3px;
    border-radius: 999px;
    background: var(--be-badge);
    color: #FFFFFF;
    font-size: 9px;          /* (M) */
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   10b. ROLETKY V HORNEJ LIŠTE A POPUP VYHĽADÁVANIE
   --------------------------------------------------------------------------
   Karty "Backend - Definícia Backend prostredia" z 23. 9. 2026: Ikona Zvonček
   (Trello HCL8XBZb), Menu ikona Profil (QdGhvSD9), Ikona Lupa (HeexgwcF).
   Rozmery odmerané z uvodna_obrazovka_cista_menu_*.jpg (M). Značku kreslí
   filament/topbar-icons.blade.php.

   Vstavané používateľské menu Filamentu sa skrýva - profil kreslí naša
   roletka podľa návrhu. Menu zostáva zaregistrované, lebo hook, cez ktorý sa
   lišta vkladá (panels::user-menu.before), sa bez neho nevykreslí.
   -------------------------------------------------------------------------- */
.fi-topbar-end .fi-user-menu,
.fi-topbar-end .fi-dropdown:has(.fi-user-menu-trigger) {
    display: none !important;
}

.be-lista-polozka {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Popisy len pre odčítavače obrazovky (Filament túto triedu nedodáva). */
.be-topbar-icons .sr-only,
.be-hladanie-okno .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ikony v lište sú tlačidlá, nie odkazy - bez vlastného pozadia a rámu. */
.be-topbar-icon {
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* Profil: tá istá postavička ako doteraz, cez masku (farba z --be-topbar-ikona). */
.be-topbar-profil-ikona {
    display: block;
    width: 24px;
    height: 24px;
    background: var(--be-topbar-ikona);
    -webkit-mask: url('/icons/profil.svg') center / contain no-repeat;
    mask: url('/icons/profil.svg') center / contain no-repeat;
}

/* Roletka: biela karta 300 px (M), zaoblenie 10 px, tieň, pod ikonou vpravo. */
.be-roletka {
    position: absolute;
    top: calc(100% + 12px);             /* (M) 12 px pod lištou */
    right: -6px;
    z-index: 60;

    width: 300px;                        /* (M) */
    padding: 12px 20px;                  /* (M) */

    background: var(--be-surface);
    border: 1px solid var(--be-pole-okraj, #CCCCCC);
    border-radius: 10px;                 /* (M) */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10);

    color: var(--be-active);
    font-size: 15px;                     /* (M) */
    text-align: left;
    cursor: default;
}

.be-roletka-zoznam {
    list-style: none;
    margin: 0;
    padding: 0;
}

.be-roletka-polozka,
.be-roletka-hlavicka,
.be-roletka-akcia {
    display: flex;
    align-items: center;
    gap: 14px;                           /* (M) */
    width: 100%;
    padding: 12px 0;                     /* (M) riadok 44-56 px */

    background: transparent;
    border: 0;
    font: inherit;
    font-size: 15px;
    color: var(--be-active);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.be-roletka-polozka:hover:not(.je-ukazka) {
    color: var(--be-active);
    opacity: 0.7;
}

/* "Funkcia" je len ukážka ďalších riadkov - bez akcie, bez kurzora ruky. */
.be-roletka-polozka.je-ukazka {
    cursor: default;
}

.be-roletka-ikona {
    width: 24px;                         /* (M) */
    height: 24px;
    flex-shrink: 0;
    color: var(--be-active);
}

/* Notifikácia: zvonček tenší a tmavosivý, názov tučný, text sivý (M). */
.be-roletka-notifikacia {
    align-items: flex-start;
}

.be-roletka-notifikacia .be-roletka-ikona {
    margin-top: 2px;
    color: #333333;                      /* (M) */
}

.be-roletka-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.be-roletka-text strong {
    font-weight: 700;
    color: var(--be-active);
    line-height: 1.25;
}

.be-roletka-text small {
    font-size: 13px;                     /* (M) */
    color: var(--be-inactive);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.be-roletka-delitel {
    height: 1px;
    margin: 6px 0;                       /* (M) */
    background: var(--be-pole-okraj, #CCCCCC);
}

/* "Zobraziť všetky" - v strede, s okom (M). */
.be-roletka-akcia {
    justify-content: center;
    gap: 12px;
    padding: 14px 0 8px;
}

.be-roletka-akcia .be-roletka-ikona {
    width: 22px;
    height: 22px;
}

.be-roletka-akcia:hover {
    opacity: 0.7;
}

/* Hlavička profilu: postavička v krúžku, meno tučné, práva sivé (M). */
.be-roletka-hlavicka {
    cursor: default;
}

.be-roletka-profil-ikona {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--be-active);
    -webkit-mask: url('/icons/profil.svg') center / contain no-repeat;
    mask: url('/icons/profil.svg') center / contain no-repeat;
}

.be-roletka-formular {
    margin: 0;
}

/* Odhlásiť sa: ikona červená ako v päte pruhu (M). */
.be-roletka-odhlasit .be-roletka-ikona {
    color: var(--be-logout);
}

/* --- Popup Vyhľadávanie ------------------------------------------------
   Karta: "čierna priehľadná plocha bude vždy prekrývať celú plochu Backend
   prostredia s výnimkou hlavného menu na Desktope, alebo spodného menu na
   Mobile". Na počítači preto začína až za ikonovým pruhom; mobil rieši
   ResponzivitaService (spodná lišta). Okno je podľa návrhu kompaktné
   (450 px), nie 80 % - viď _MD/Backend-Others-ODOVZDANIE.md. */
.be-hladanie-pozadie {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--be-rail-width);
    z-index: 35;                         /* pod spodnou lištou mobilu (40) */

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.8);
}

.be-hladanie-okno {
    width: min(450px, 80vw);             /* (M) 450 px */
    padding: 20px;                       /* (M) */

    background: var(--be-surface);
    border-radius: 10px;                 /* (M) */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.be-hladanie-pole {
    position: relative;
    display: block;
}

.be-hladanie-pole input {
    width: 100%;
    height: 45px;
    padding: 0 36px 0 16px;

    background: var(--be-surface);
    border: 1px solid var(--be-pole-okraj, #CCCCCC);
    border-radius: 8px;

    font: inherit;
    font-size: 16px;                     /* (M) */
    color: var(--be-active);
}

.be-hladanie-pole input::placeholder {
    color: var(--be-inactive);
}

.be-hladanie-pole input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.be-hladanie-pole input:focus {
    outline: none;
    border-color: var(--be-active);
}

.be-hladanie-hviezdicka {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--be-badge);
    pointer-events: none;
}

.be-hladanie-pole input:not(:placeholder-shown) + .be-hladanie-hviezdicka {
    display: none;
}

/* --------------------------------------------------------------------------
   11. DLAŽDICE SO ŠTATISTIKAMI
   -------------------------------------------------------------------------- */
.be-stat-grid {
    display: grid;
    /* auto-fit + minmax: počet stĺpcov sa prispôsobí šírke sám, takže na
       tieto dlaždice netreba vlastné hraničné body.

       Spodná hranica je 170 px kvôli dlaždici s tržbami - pri 150 px zostalo
       vnútri len 126 px a suma s menou sa do toho nezmestila. */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.be-stat {
    padding: 16px;
    border: 1px solid var(--be-divider);
    border-radius: 8px;
    background: var(--be-surface);
}

.be-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--be-active);
    line-height: 1.2;
}

/*
   Mena pri sume.
   --------------------------------------------------------------------------
   Je vo vlastnej značke preto, aby mohla pri úzkej dlaždici prejsť na druhý
   riadok - samotné číslo má vnútri nezalomiteľné medzery a rozdeliť sa nesmie.

   Menšia a bez tučného písma: v dlaždici je podstatné číslo, mena je len
   jednotka. Zároveň sa tým ušetrí miesto a druhý riadok často netreba vôbec.
*/
.be-stat-mena {
    font-size: 16px;
    font-weight: 400;
    color: var(--be-muted);
}

.be-stat-label {
    margin-top: 4px;
    font-size: 13px;
    color: var(--be-muted);
}

/* --------------------------------------------------------------------------
   12. NOTIFIKÁCIE
   -------------------------------------------------------------------------- */
.be-actions-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.be-notifications {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.be-notification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--be-divider);
    border-radius: 8px;
    background: var(--be-surface);
}

/* Neprečítaná sa odlišuje podkladom a farebným prúžkom, nie len tučným
   písmom - to sa pri rýchlom pohľade prehliadne. */
.be-notification-unread {
    background: #FFF7F7;
    border-inline-start: 3px solid var(--be-badge);
}

.be-notification-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--be-muted);
}

.be-notification-body { flex: 1 1 auto; min-width: 0; }

.be-notification-title { font-weight: 600; color: var(--be-active); }
.be-notification-message { font-size: 13px; color: var(--be-muted); margin-top: 2px; }
.be-notification-time { font-size: 12px; color: var(--be-muted); margin-top: 4px; }

.be-notification-read {
    flex: 0 0 auto;
    padding: 4px 10px;
    border: 1px solid var(--be-divider);
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    color: var(--be-muted);
    cursor: pointer;
}
.be-notification-read:hover { color: var(--be-active); }

/* --------------------------------------------------------------------------
   13. VYHĽADÁVANIE
   -------------------------------------------------------------------------- */
.be-search { max-width: 520px; margin-bottom: 20px; }

.be-search-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--be-active);
    margin-bottom: 8px;
}

.be-search-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--be-muted);
}

.be-search-items { display: flex; flex-direction: column; }

.be-search-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
}
.be-search-item:hover { background: #F4F4F4; }

.be-search-item-title { font-size: 14px; color: var(--be-active); }
.be-search-item-subtitle { font-size: 12px; color: var(--be-muted); }

/* --------------------------------------------------------------------------
   14. ZÁSTUPNÉ MIESTO
   --------------------------------------------------------------------------
   Používa sa tam, kde obsah ešte nie je alebo nič nenašlo. Radšej poctivá
   veta než prázdna plocha, pri ktorej používateľ nevie, či sa to načítava.
   -------------------------------------------------------------------------- */
.be-placeholder {
    padding: 28px;
    border: 1px dashed var(--be-divider);
    border-radius: 8px;
    color: var(--be-muted);
    font-size: 14px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   15. ŠÍPKY NA POSÚVANIE MODULOV
   --------------------------------------------------------------------------
   Zadanie: "ak ich je viac, dajú sa vertikálne scrollovať a zobrazuje sa
   potom šípka dole a hore na začiatku a konci stĺpca".

   Šípky sa zobrazujú LEN keď je čo posúvať - triedy pridáva a odoberá
   public/js/backend.js podľa toho, kde sa zoznam práve nachádza.
   -------------------------------------------------------------------------- */
.be-rail-arrow {
    display: none;
    width: 100%;
    height: 20px;
    padding: 0;
    margin: 0;
    border: 0;
    background: var(--be-rail-bg);
    color: var(--be-active);
    cursor: pointer;
    line-height: 0;
    flex: 0 0 auto;
}

.be-rail-arrow svg {
    width: 14px;
    height: 14px;
    display: inline-block;
}

/* Viac než 6 položiek (komentár 30. 9. 2026): obe šípky sú vidieť stále;
   šípka, ktorej smerom sa už posúvať nedá, je zošednutá. */
.be-rail-scroll .be-rail-arrow { display: block; }

.be-rail-scroll:not(.be-rail-can-scroll-up)   .be-rail-arrow-up,
.be-rail-scroll:not(.be-rail-can-scroll-down) .be-rail-arrow-down {
    color: var(--be-rail-divider);
    cursor: default;
}

.be-rail-arrow:hover { color: var(--be-active); }

/* --------------------------------------------------------------------------
   16. TLAČIDLÁ POD FORMULÁROM
   --------------------------------------------------------------------------
   Podklad k obrazovke Identita má uloženie v samostatnom páse pod formulárom,
   zarovnané na stred. Odsadenie zhora a linka ho oddeľujú od polí, aby sa
   nestratilo medzi nimi.
   -------------------------------------------------------------------------- */
.be-form-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--be-divider);
}

/* ==========================================================================
   RESPONZÍVNE PRAVIDLÁ TU NIE SÚ
   ==========================================================================
   Hľadáš, kedy sa toto preskladá na tablete alebo mobile? Je to v

       Core/app/Services/ResponzivitaService.php

   Nie je to rozmar: šesť hraničných bodov sa zadáva v Nastaveniach → Identita
   a pravidlo @media hodnotu z premennej prečítať nevie. Jediný spôsob, ako tie
   hodnoty naozaj riadiť z Nastavení, je pravidlá vygenerovať. Kým boli tu
   napevno, nastavenia sa síce uložili, ale nerobili nič.

   V tom súbore sú pohromade pravidlá pre administráciu aj pre verejnú časť,
   usporiadané od najširšej obrazovky po najužšiu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   NEPOVOLENÉ ROZLÍŠENIE (Vojto 30. 9. 2026)
   --------------------------------------------------------------------------
   Pod 390 px šírky (Vojto 30. 9. 2026, pôvodne 393) len biela plocha a H1 na strede; stránka pod
   ňou sa neposúva. Šablóna filament/nepovolene-rozlisenie.blade.php.
   -------------------------------------------------------------------------- */
.be-nepovolene-rozlisenie {
    display: none;
}

@media (max-width: 389.98px) {
    .be-nepovolene-rozlisenie {
        display: flex;
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: #FFFFFF;
        text-align: center;
    }

    .be-nepovolene-rozlisenie h1 {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.3;
        color: #000000;
    }

    html:has(.be-nepovolene-rozlisenie),
    body:has(.be-nepovolene-rozlisenie) {
        overflow: hidden !important;
    }
}

/* --------------------------------------------------------------------------
   BOČNÉ MENU NA MOBILE (Trello HVwaxQIE, Vojto 30. 9. 2026)
   --------------------------------------------------------------------------
   Otvára ho Menu / Nastavenia v spodnej lište: plocha sa vysunie sprava, má
   400 px (na úzkom mobile najviac šírku karty) a siaha od hornej hrany
   (20 px) po spodné menu. Vľavo stĺpec modulov ako ikonový pruh, vpravo
   podmenu vybraného modulu - oba sa posúvajú samostatne. Šablóny
   mobile-bar.blade.php + mobilne-menu.blade.php, logika backend.js (2.).
   -------------------------------------------------------------------------- */
.be-mm[hidden],
.be-mm-pozadie[hidden] {
    display: none !important;
}

.be-mm {
    position: fixed;
    z-index: 38;
    /* Na výšku od 20 px pod horným okrajom obrazovky (rovnako ako okraje
       karty) - prekryje hornú lištu (Vojto 30. 9. 2026). */
    top: var(--be-card-inset);
    bottom: calc(68px + var(--be-card-inset));
    /* Sprava, 400 px (Vojto 30. 9. 2026: Tablet stojato, Mobil ležato aj
       stojato); na úzkom mobile najviac po okraje karty. */
    right: var(--be-card-inset);
    width: min(400px, calc(100vw - 2 * var(--be-card-inset)));
    display: flex;
    background: var(--be-surface, #FFFFFF);
    border-radius: 8px 8px 0 0;
    box-shadow: -4px 0 16px rgba(0, 0, 0, .18);
    overflow: hidden;
    /* Vysúva sa sprava doľava (Vojto 30. 9. 2026): zavreté stojí za pravým
       okrajom obrazovky. */
    transform: translateX(100vw);
    transition: transform .25s ease;
}

.be-mm.je-otvorene {
    transform: translateX(0);
}

.be-mm-pozadie {
    position: fixed;
    inset: 0;
    z-index: 37;
    /* Čierna, priehľadná 80 % - ako okno Médií (Vojto 30. 9. 2026). */
    background: rgba(0, 0, 0, 0.8);
}

.be-mm-obsah {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Stĺpec modulov ------------------------------------------------------ */
.be-mm-moduly {
    flex: 0 0 var(--be-rail-width);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--be-rail-medzera);
    padding: var(--be-rail-medzera) 0;
    background: var(--be-rail-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.be-mm-modul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--be-inactive);
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.be-mm-modul .be-mm-modul-ikona {
    width: 32px;
    height: 32px;
    opacity: .45;
}

.be-mm-modul.je-aktivny {
    color: var(--be-active);
}

.be-mm-modul.je-aktivny .be-mm-modul-ikona {
    opacity: 1;
}

/* --- Podmenu ------------------------------------------------------------- */
.be-mm-podmenu {
    flex: 1 1 auto;
    min-width: 0;
    /* 40 px pod poslednou položkou aj na mobile (Trello tX69QH7f). */
    padding: 20px 20px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.be-mm-skupina + .be-mm-skupina {
    margin-top: 30px;
}

.be-mm-skupina-nazov {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--be-active);
}

/* Hlavička bloku: názov a ikona podmenu.svg 15 x 15 px #7F7F7F na konci
   riadka - ťuknutím sa blok zbalí / rozbalí (ako na počítači). */
.be-mm-skupina-tlacidlo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.be-mm-skupina-ikona {
    flex: none;
    width: 15px !important;
    height: 15px !important;
    color: #7F7F7F;
}

.be-mm-skupina.je-zbalena .be-mm-skupina-nazov {
    margin-bottom: 0;
}

.be-mm-skupina.je-zbalena .be-mm-skupina-polozky {
    display: none;
}

.be-mm-skupina ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.be-mm-polozka {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--be-inactive);
    font-size: 15px;   /* o 2 px väčšie než podmenu počítača (Vojto 30. 9. 2026) */
    line-height: 1.25;
    text-decoration: none;
}

.be-mm-polozka-ikona {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
}

.be-mm-polozka-nazov {
    flex: 1 1 auto;
    min-width: 0;
}

.be-mm-polozka.je-aktivna,
.be-mm-polozka:hover {
    color: var(--be-active);
}

/* Filtre pod položkou (Objednávky → statusy) - odsadené pod text položky. */
.be-mm-skupina ul.be-mm-filtre {
    gap: 12px;
    margin-top: 12px;
    padding-left: 36px;
    border-left: 1px solid #BFBFBF;
    margin-left: 12.5px;
}

.be-mm-skupina ul.be-mm-filtre .be-mm-polozka {
    padding-left: 0;
    margin-left: -23.5px;
    padding-left: 23.5px;
}

/* Bublina ako v podmenu počítača (BublinaPoctu, App\Support\Bublina). */
.be-mm-bublina {
    flex: 0 0 auto;
    min-width: calc(3ch + 12px);
    padding: 1px 6px;
    border-radius: 999px;
    background: #F0F0F0;
    color: #000000;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.be-mm-bublina.je-cervena {
    background: var(--be-badge);
    color: #FFFFFF;
    font-weight: 700;
}

/* Načítavanie obsahu pri prvom otvorení. */
.be-mm-nacitava {
    flex: 1 1 auto;
    background:
        linear-gradient(var(--be-rail-bg), var(--be-rail-bg)) left / var(--be-rail-width) 100% no-repeat;
}

/* Aktívne tlačidlo spodnej lišty, kým je jeho plocha otvorená. */
.be-mobile-bar [data-be-mm].je-aktivne {
    background: #CBCBCB;
}

/* Obsah pod otvoreným menu sa neposúva (Vojto 30. 9. 2026): stránka sa
   zaistí na mieste (position: fixed, backend.js mmZamkniStranku) - samotné
   overflow: hidden mobilné prehliadače pri ťahaní prstom nerešpektujú. */
html:has(body.be-mm-otvorene),
body.be-mm-otvorene {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.be-mm-otvorene {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100%;
}

.be-mm-pozadie {
    touch-action: none;
}

/* Biele plochy vpravo a dole pri posúvaní (Vojto 1. 10. 2026): pozadie
   administrácie je na body, dokument (html) bol biely - pri odskočení
   stránky za okraj (trackpad na Macu, dlhý strom kategórií) a pri zmene
   veľkosti okna presvital. Dokument má teraz rovnaké pozadie a stránka
   za okraj neodskakuje. */
html:has(> body.fi-body) {
    background-color: #8A7A63;
    background-image: url('/images/prihlasenie-pozadie.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overscroll-behavior: none;
}

body.fi-body {
    overscroll-behavior: none;
}

/* Pole len na čítanie so súčtom (Produkt → Skladové zásoby → Spolu,
   1. 10. 2026): pozadie #F0F0F0, Bold, bez šípok čísla. */
.fi-body .be-pole .fi-input-wrp.be-pole-sucet,
.fi-body .be-pole .fi-input-wrp.be-pole-sucet input {
    background-color: #F0F0F0 !important;
}

.fi-body .be-pole .fi-input-wrp.be-pole-sucet input {
    font-weight: 700 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    opacity: 1 !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.fi-body .be-pole-sucet input::-webkit-outer-spin-button,
.fi-body .be-pole-sucet input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}