/* ==========================================================================
   ZOZNAMY A TABUĽKY
   ==========================================================================
   Vzhľad podľa karty "Backend - Matrica pre zoznam / Tabuľka". Platí pre
   všetky zoznamy v administrácii - produkty, objednávky, zákazníci a ďalšie.

   Správanie (koľko riadkov na stranu, filtre, menu funkcií) nastavuje
   App\Support\MatricaTabulky. Tu je len to, ako to má vyzerať.

   ODKIAĽ POCHÁDZAJÚ HODNOTY
   --------------------------------------------------------------------------
   Odmerané z podkladov v priečinku fotky3. (M) = odmerané, (Z) = v zadaní
   vypísané slovom.
   ========================================================================== */

:root {
    --be-ta-riadok-sivy:   #F9F9F9;   /* (Z) každý druhý riadok */
    --be-ta-pridat:        #92C22D;   /* štandard prvkov (fGaWyseJ, 28. 9. 2026): tlačidlo Potvrdenia */
    --be-ta-pridat-hover:  #7FAB24;   /* (M) stmavené o 12 % */
    --be-ta-sive-tlacidlo: #F2F2F2;   /* (M) tlačidlo Otvoriť filtre */
}

/* --------------------------------------------------------------------------
   1. RÁM TABUĽKY
   --------------------------------------------------------------------------
   Návrh nemá okolo zoznamu žiadny rámček ani tieň - tabuľka sedí priamo na
   bielej ploche stránky.
   -------------------------------------------------------------------------- */
.fi-body .fi-ta-ctn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   2. HLAVIČKA STĹPCOV
   --------------------------------------------------------------------------
   Čierna, tučná, bez podkladu a bez linky pod ňou.
   -------------------------------------------------------------------------- */
/* Podklad nesie riadok hlavičky, nie samotné bunky - preto sa biely podklad
   nastavuje aj tu. Bez toho zostal za hlavičkou sivý pás, hoci bunky mali
   priehľadné pozadie. */
.fi-body .fi-ta-header-row,
.fi-body .fi-ta-table > thead,
.fi-body .fi-ta-table > thead > tr {
    background: transparent !important;
}

/* Bez linky pod hlavičkou - predloha tam žiadnu nemá (biela až po prvý
   sivý riadok na y=229). */
.fi-body .fi-ta-table > thead {
    border: 0 !important;
}

.fi-body .fi-ta-header-cell {
    background: transparent !important;
    border-bottom: 0 !important;

    color: var(--be-active) !important;
    font-weight: 700 !important;
    font-size: 16px;       /* (Z) štandard: hlavička 16 px Bold */
}

/* Tlačidlo triedenia - názov stĺpca aj so šípkami. Karta: "bude možné určiť,
   či má ponúkať zoradenie od A do Z a opačne kliknutím na ikonu alebo
   hlavičku stĺpca". Filament to vie, tu ide len o vzhľad. */
.fi-body .fi-ta-header-cell-sort-btn {
    color: var(--be-active) !important;
    font-weight: 700 !important;
    gap: 8px;
}

/* Ikona zoradenia (karta "Backend - modul Tabuľka - opravy", Trello ykwi6HTL):
   24 x 24 px, VŽDY ZA textom hlavičky s medzerou 10 px. Pri prvom zobrazení
   sú všetky ikony vypnuté (obe šípky 30 %); po kliknutí sčernie šípka podľa
   smeru - A-Z hore, Z-A dole. Stav nesie Filament v atribúte aria-sort
   hlavičky (none / ascending / descending). Filamentove vlastné ikony
   (chevron + koliesko načítania) sa skryjú; ikony sú z príloh karty. */
.fi-body .fi-ta-header-cell-sort-btn > svg {
    display: none !important;
}

.fi-body .fi-ta-header-cell-sort-btn {
    gap: 10px !important;   /* (Z) text -> ikona */
}

.fi-body .fi-ta-header-cell-sort-btn::after {
    content: '';
    flex: none;
    gap: 0 !important;
    min-width: 0 !important;
    width: 24px;
    height: 24px;
    background: url('../icons/zoradenie-hlavicka-a-z-neaktivna.svg') center / contain no-repeat;
}

.fi-body th[aria-sort="ascending"] .fi-ta-header-cell-sort-btn::after {
    background-image: url('../icons/zoradenie-hlavicka-a-z.svg');
}

.fi-body th[aria-sort="descending"] .fi-ta-header-cell-sort-btn::after {
    background-image: url('../icons/zoradenie-hlavicka-z-a.svg');
}

/* --------------------------------------------------------------------------
   3. RIADKY
   --------------------------------------------------------------------------
   Karta: "každý druhý riadok bude obsahovať farbu pozadia #F9F9F9".
   Filament striedanie riadkov vie, tu sa mu určuje odtieň.
   Predloha začína sivým riadkom: 1., 3., 5. ... sivé, párne biele.
   -------------------------------------------------------------------------- */
.fi-body .fi-ta-row:nth-child(odd),
.fi-body .fi-ta-row.fi-striped:nth-child(odd) {
    background-color: var(--be-ta-riadok-sivy) !important;
}

.fi-body .fi-ta-row:nth-child(even),
.fi-body .fi-ta-row.fi-striped:nth-child(even) {
    background-color: var(--be-surface) !important;
}

/* Riadky nemajú v návrhu deliace linky - oddeľuje ich striedanie farby.
   Filament kreslí linku na riadku aj na bunke, preto obe. */
.fi-body .fi-ta-row,
.fi-body .fi-ta-cell {
    border: 0 !important;
}

/* Výška riadku 53 px (predloha: riadky 229-282, 282-335 ...). Filament dáva
   textu aj prepínaču 16 px hore a dole, čím mal riadok 60 px. Bunka drží
   výšku, obsah sa v nej len vycentruje. Na mobile, kde sú z riadkov
   kartičky, výšku ruší ResponzivitaService. */
.fi-body .fi-ta-row > .fi-ta-cell {
    height: 53px;   /* (M) */
}

.fi-body .fi-ta-row .fi-ta-text,
.fi-body .fi-ta-row .fi-ta-toggle,
.fi-body .fi-ta-row .fi-ta-icon,
.fi-body .fi-ta-row .fi-ta-image,
.fi-body .fi-ta-row .fi-ta-color {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Text v bunkách: štandard zadávateľa (24. 9. 2026) - riadky 16 px Light. */
.fi-body .fi-ta-text {
    color: var(--be-active);
    font-size: 16px;       /* (Z) */
    font-weight: 300;      /* (Z) Light */
}

/* --------------------------------------------------------------------------
   4. TLAČIDLÁ NAD ZOZNAMOM
   --------------------------------------------------------------------------
   Karta: "vždy prvé sprava bude tlačidlo Pridať (zelené) a následne naľavo
   od neho bude možné pridávať ďalšie šedé tlačidlá".
   -------------------------------------------------------------------------- */

/* Zelené "Pridať". Farba sa nastavuje tu a nie v téme Filamentu, aby zostala
   nezávislá od farby, ktorú si prevádzkovateľ zvolí v Nastaveniach - tá sa
   týka bežných tlačidiel, nie tohto. */
.fi-body .fi-btn.fi-color-success {
    background: var(--be-ta-pridat) !important;
    color: #FFFFFF !important;
}

.fi-body .fi-btn.fi-color-success:hover {
    background: var(--be-ta-pridat-hover) !important;
}

/* Sivé tlačidlá vedľa neho - napríklad "Otvoriť filtre".
   -------------------------------------------------------------------------
   Tlačidlo filtrov sa vyberá podľa svojho OBALU, nie podľa farebnej triedy:
   Filament mu žiadnu nedáva, takže by naň pravidlo pre fi-color-gray
   nesadlo a zostalo by vo farbe bežných tlačidiel. */
.fi-body .fi-btn.fi-color-gray,
.fi-body .fi-ta-filters-trigger-action-ctn .fi-btn {
    background: var(--be-ta-sive-tlacidlo) !important;
    color: var(--be-active) !important;
}

.fi-body .fi-btn.fi-color-gray:hover,
.fi-body .fi-ta-filters-trigger-action-ctn .fi-btn:hover {
    background: #E6E6E6 !important;
}

.fi-body .fi-btn.fi-color-gray .fi-icon,
.fi-body .fi-ta-filters-trigger-action-ctn .fi-btn .fi-icon {
    color: var(--be-active) !important;
}

/* Ikony na tlačidlách nad zoznamom - posuvníky na filtroch, plus na Pridať -
   sú 24 x 24 px (štandard zadávateľa 24. 9. 2026), medzera k textu 10 px. */
.fi-body .fi-ta-filters-trigger-action-ctn .fi-btn,
.fi-body .fi-resource-list-records-page .fi-header-actions-ctn .fi-btn,
.fi-body .fi-ta-header-toolbar .fi-btn:not(.fi-icon-btn) {
    gap: 10px !important;
}

.fi-body .fi-ta-filters-trigger-action-ctn .fi-btn .fi-icon,
.fi-body .fi-resource-list-records-page .fi-header-actions-ctn .fi-btn .fi-icon,
.fi-body .fi-ta-header-toolbar .fi-btn:not(.fi-icon-btn) .fi-icon {
    width: 24px !important;
    height: 24px !important;
}

/* Ikona posuvníkov na tlačidle filtrov.
   -------------------------------------------------------------------------
   Filament pri spúšťači filtrov ikonu z akcie NEVYKRESLÍ (tlačidlo má len
   text, overené v značke), preto sa kreslí tu maskou z prílohy
   (icons/filter1.svg) vo farbe textu, 24 px. */
.fi-body .fi-ta-filters-trigger-action-ctn .fi-btn::before {
    content: '';
    flex: none;
    gap: 0 !important;
    min-width: 0 !important;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url('../icons/filter1.svg') center / contain no-repeat;
    mask: url('../icons/filter1.svg') center / contain no-repeat;
}

/* Správca stĺpcov (ikona troch stĺpčekov) v návrhu nie je - MatricaTabulky
   ho nezapína; keby ho niektorý zoznam zapol sám, ostane skrytý. */
.fi-body .fi-ta-col-manager-dropdown {
    display: none !important;
}

/* --- Sivé tlačidlá zoznamu v riadku nadpisu ----------------------------- */
/* Karta: "Vždy prvé sprava bude tlačidlo Pridať (zelené) a následne naľavo
   od tohto tlačidla bude možné pridávať ďalšie šedé tlačidlá podľa potreby
   (pre teraz je to tlačidlo na otvorenie filtrov)." Návrh to potvrdzuje.

   Tlačidlá zostávajú v značke tam, kde ich dáva Filament, a do riadku nadpisu
   ich posunie až toto odsadenie. Presúvať ich v značke NEMOŽNO: tlačidlo
   filtrov je naviazané na stav tabuľky a mimo nej klik spadne na
   "areFiltersOpen is not defined" - vyzerá správne a nerobí nič.

   Odkiaľ a ako ďaleko sa posúvajú, závisí od šírky zeleného tlačidla, teda
   od dĺžky jeho popisu ("Pridať jazyk" verzus "Pridať pobočku"). To vie len
   prehliadač, preto samotné odsadenie dopočíta a nastaví
   public/js/backend-tabulky.js. Tu je len to, čo naň platí vždy. */
.fi-main .fi-page {
    position: relative;
}

/* Obaly medzi stránkou a tlačidlami nesmú byť ukotvené.
   -------------------------------------------------------------------------
   Odsadenie sa počíta od najbližšieho ukotveného predka. Keď je ním obal
   filtrov, tak sa pri otvorení panela posunie aj on - a tlačidlo "Zatvoriť
   filtre" odskočí o výšku panela nahor. Nastavením na "static" je predkom
   vždy celá stránka, takže odsadenie platí v oboch stavoch rovnako. */
.fi-body .fi-ta-ctn,
.fi-body .fi-ta-header-ctn,
.fi-body .fi-ta-filters-above-content-ctn {
    position: static !important;
}

/* LEN NA STRÁNKACH SO ZOZNAMOM
   -------------------------------------------------------------------------
   Trieda fi-resource-list-records-page je na stránke, ktorej hlavným obsahom
   JE tabuľka. Bez tohto ohraničenia pravidlo zasiahlo aj tabuľky vnútri
   formulárov - napríklad zoznam obrázkov na detaile produktu - a ich lišta
   skončila dvetisíc bodov nad obrazovkou, lebo sa mala zarovnať s hlavičkou
   stránky, ktorá je úplne inde. Odhalil to až test e2e. */
.fi-body .fi-resource-list-records-page .fi-ta-filters-trigger-action-ctn,
.fi-body .fi-resource-list-records-page .fi-ta-header-toolbar {
    position: absolute;
    z-index: 5;
}

/* Lišta vedľa tlačidiel hlavičky nemá vlastnú linku - Filament ju pod ňu
   kreslí, lebo ju inak má nad tabuľkou. */
.fi-body .fi-ta-header-toolbar {
    border-bottom: 0 !important;
}

/* V riadku nadpisu nemá lišta vlastné odsadenie - inak by sedela o 12 px
   nižšie než "Pridať" a 24 px od neho (Filament: py-3 px-6). */
.fi-body .fi-resource-list-records-page .fi-ta-header-toolbar {
    padding: 0 !important;
}

/* "Zmeniť poradie" a ďalšie tlačidlá lišty sú sivé ako "Otvoriť filtre" -
   karta: vpravo zelené Pridať, naľavo od neho sivé tlačidlá. */
.fi-body .fi-ta-header-toolbar .fi-btn:not(.fi-icon-btn) {
    background: var(--be-ta-sive-tlacidlo) !important;
    color: var(--be-active) !important;
}

.fi-body .fi-ta-header-toolbar .fi-btn:not(.fi-icon-btn) .fi-icon {
    color: var(--be-active) !important;
}

.fi-body .fi-ta-header-toolbar .fi-btn:not(.fi-icon-btn):hover {
    background: #E6E6E6 !important;
}

/* Na mobile sa nadpis a tlačidlá skladajú pod seba a tlačidlá idú cez celú
   šírku. Tie pravidlá sú v App\Services\ResponzivitaService (blok "mobil
   naležato"), lebo hranica sa nastavuje v Nastaveniach → Identita a do CSS
   sa napísať nedá. public/js/backend-tabulky.js odsadenie nastavuje len
   vtedy, keď je prvok naozaj absolútne umiestnený - o tom teda rozhoduje
   výhradne CSS. */


/* Počítadlo aktívnych filtrov na tlačidle.
   -------------------------------------------------------------------------
   V návrhu nie je ani na zatvorených filtroch, ani na otvorených s dvoma
   zvolenými hodnotami (nastavenia_pobocky_zoznam_filter.jpg) - tlačidlo je
   tam v oboch prípadoch čisté. Naviac by tu ukazovalo trvalú jednotku, lebo
   filter "Zoradiť" má vždy nejakú hodnotu. */
.fi-body .fi-ta-filters-trigger-action-ctn .fi-badge {
    display: none !important;
}

/* Nástrojová lišta, ktorá po presune zostala prázdna.
   -------------------------------------------------------------------------
   Držala nad tabuľkou zhruba šesťdesiatbodovú medzeru - v návrhu tabuľka
   začína hneď pod hlavičkou.

   Skrýva sa LEN samotná lišta, nie celý obal .fi-ta-header-ctn: v tom istom
   obale je aj vysúvací panel s filtrami a ten musí zostať.

   :has() namiesto natvrdo display:none preto, že tá istá lišta nesie aj
   nadpis a popis tabuľky, ak ich niektorý modul niekedy nastaví, a tlačidlo
   prehadzovania poradia. Zmizne teda len vtedy, keď v nej naozaj nič
   viditeľné nezostalo. */
/* Hromadné funkcie sa ukážu, až keď je niečo označené.
   -------------------------------------------------------------------------
   Karta: "Na začiatku každého riadka bude ikona Checkbox, ktorá bude neskôr
   slúžiť na hromadné funkcie s označenými riadkami. Pre teraz však sa bude
   dať iba označiť / odznačiť, nič viac nebude vykonávať." V návrhu preto
   žiadne také tlačidlo nie je.

   Skrýva sa LEN roletka hromadných funkcií. V tej istej lište sú totiž ešte
   dve tlačidlá, ktoré tam ostať musia:

     - voľba stĺpcov, ktorú karta výslovne žiada ("pre každú tabuľku zvlášť
       bude možné určiť, ktoré stĺpce záznamov sa majú zobrazovať"),
     - "Zmeniť poradie" pri zoznamoch, ktoré sa dajú prehadzovať ťahaním.

   Skrytie celej lišty vzalo aj ich - prehadzovanie poradia sa potom nedalo
   spustiť vôbec.

   Triedu prideľuje public/js/backend-tabulky.js. */
/* Roletku hromadných akcií skrýva oddiel 9a - nie display: none, aby sa
   z našej ponuky dalo stlačiť jej tlačidlo "Vymazať". */

/* Zbalený panel s filtrami si drží medzeru pod sebou aj keď nie je vidieť. */
.fi-body .fi-ta-filters-above-content-ctn:not(.fi-open) {
    margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   5. PANEL S FILTRAMI
   --------------------------------------------------------------------------
   Karta: "kliknutím na tlačidlo Otvoriť filter sa nad zoznamom záznamov
   zobrazí obsahová časť, ktorá bude obsahovať Selekty".
   -------------------------------------------------------------------------- */
/*
   Rámček dostane panel LEN keď je otvorený.

   Obal je v značke vždy - je v ňom aj tlačidlo, ktoré filtre otvára. Keby mal
   rámček natrvalo, pri zatvorených filtroch by okolo samotného tlačidla
   ostala prázdna orámovaná plocha.

   Triedu fi-open nastavuje Filament, keď je panel otvorený.
*/
.fi-body .fi-ta-filters-above-content-ctn {
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 14px;
}

.fi-body .fi-ta-filters-above-content-ctn.fi-open {
    margin-bottom: 18px;
    padding: 18px 20px !important;

    background: var(--be-surface);
    border: 1px solid var(--be-frame-okraj) !important;
    border-radius: 10px;   /* (M) */
    /* Zadávateľ (24. 9. 2026): "otvorený filter má orámovanie s tieňom - ako
       pri obrázku v Media poli" - rovnaký tieň ako rozbaľovacie zoznamy. */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}

/* Pruh "Aktívne filtre" so štítkami, ktorý Filament kreslí pod panelom,
   v návrhu nie je - stav ukazuje samotný panel a jeho "Zrušiť filtre". */
.fi-body .fi-ta-filter-indicators {
    display: none !important;
}

/* Nadpis panela návrh nemá - sú tam rovno filtre. */
.fi-body .fi-ta-filters-heading {
    display: none;
}

/* --------------------------------------------------------------------------
   6. "ZRUŠIŤ FILTRE"
   --------------------------------------------------------------------------
   Karta: "keď je niektorý z filtrov aktívny, pod selektami vznikne tlačidlo
   Zrušiť filtre".

   V návrhu je to text s červeným krížikom, nie plné tlačidlo.
   -------------------------------------------------------------------------- */
.fi-body .fi-ta-filters-actions-ctn .fi-btn,
.fi-body .fi-ta-filter-indicators .fi-btn {
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;

    color: var(--be-active) !important;
    font-weight: 400 !important;
}

.fi-body .fi-ta-filters-actions-ctn .fi-btn .fi-icon,
.fi-body .fi-ta-filter-indicators .fi-btn .fi-icon {
    width: 24px;
    height: 24px;
    color: var(--be-chyba) !important;   /* červený krížik */
}

/* Červený krížik pred textom.
   -------------------------------------------------------------------------
   Návrh (nastavenia_pobocky_zoznam_filter.jpg) má pred textom plný červený
   krúžok s bielym krížikom.

   Kreslí sa tu a nie v PHP: tlačidlo v paneli filtrov vykresľuje Filament ako
   akciu "resetTableFiltersForm", ktorá sa nedá nastaviť cez
   filtersRemoveAllAction() - to je iná akcia, ktorá sa v tomto rozložení
   vôbec nepoužije. Overené priamo v značke.

   Obrázok je vložený priamo (data URI), lebo je dvojfarebný - maskou by sa
   dala prefarbiť len jedna farba. */
.fi-body .fi-ta-filters-actions-ctn .fi-btn::before {
    content: '';
    flex: none;
    gap: 0 !important;
    min-width: 0 !important;
    width: 24px;    /* (Z) ikony 24 px */
    height: 24px;
    /* Medzeru 10 px k textu drží gap tlačidla nižšie (Trello ykwi6HTL:
       "ikona Zrušiť filtre bude od textu odsadená 10 px"); vlastný okraj by
       ju zdvojnásobil. */
    margin-inline-end: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E30014'/%3E%3Cpath d='M6.8 6.8l6.4 6.4M13.2 6.8l-6.4 6.4' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Tlačidlo musí byť riadok s ikonou a textom, nie len text. Pri prejdení
   myšou ani pri zaostrení sa NEPODFARBUJE (zadávateľ 24. 9. 2026) - je to
   text s ikonou, nie plné tlačidlo. */
.fi-body .fi-ta-filters-actions-ctn .fi-btn,
.fi-body .fi-ta-filters-actions-ctn .fi-btn:hover,
.fi-body .fi-ta-filters-actions-ctn .fi-btn:focus,
.fi-body .fi-ta-filters-actions-ctn .fi-btn:focus-visible,
.fi-body .fi-ta-filters-actions-ctn .fi-btn:active {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;   /* (Z) ikona -> text */
    background: transparent !important;
    box-shadow: none !important;
}

/* Počet výsledkov (Vojto 1. 10. 2026): ikona filtra a „Počet výsledkov:
   1 205“ sivým textom vpravo. Je to posledný riadok formulára filtrov;
   keď je pod ním „Zrušiť filtre“, posunie sa na jeho riadok (záporný
   okraj 44 px a posun 16 px nadol - namerané na stred riadka). Na mobile
   ostane samostatne nad „Zrušiť filtre“ (ResponzivitaService). */
.fi-body .be-pocet-vysledkov {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 24px;
    font-size: 16px;
    font-weight: 300;
    color: #7F7F7F;
}

.fi-body .be-pocet-vysledkov strong {
    font-weight: 700;
}

.fi-body .be-pocet-vysledkov-ikona {
    width: 24px;
    height: 24px;
    color: #7F7F7F;
}

.fi-body .fi-ta-filters:has(.fi-ta-filters-actions-ctn:not(.be-bez-filtra)) {
    position: relative;
}

/* S „Zrušiť filtre“: bunka s počtom sa vyberie z toku mriežky (absolútne
   v pravom dolnom rohu panela = v riadku tlačidla), takže pod selectmi
   nevznikne prázdny riadok s medzerou a výška nezávisí od počtu riadkov
   filtrov (Vojto 1. 10. 2026: „na niektorých je to problém“). Riadok
   tlačidla je viditeľne 20 px pod selectmi - overené na všetkých zoznamoch. */
.fi-body .fi-ta-filters:has(.fi-ta-filters-actions-ctn:not(.be-bez-filtra)) .fi-grid-col:has(.be-pocet-vysledkov) {
    position: absolute;
    right: 0;
    bottom: var(--be-pocet-dole, 0px);
    z-index: 1;
    width: max-content;
}

.fi-body .fi-ta-filters:has(.fi-ta-filters-actions-ctn:not(.be-bez-filtra)) .be-pocet-vysledkov {
    margin: 0;
}

.fi-body .fi-ta-filters:has(.fi-ta-filters-actions-ctn:not(.be-bez-filtra)) .fi-ta-filters-actions-ctn {
    margin-top: 4px;               /* len pole Hľadať: namerané 16 -> 20 px */
}

/* Selecty (be-pole) majú štandardný spodný okraj 20 px - namerané 36 -> 20. */
.fi-body .fi-ta-filters:has(.fi-ta-filters-actions-ctn:not(.be-bez-filtra)):has(.be-pole) .fi-ta-filters-actions-ctn {
    margin-top: -16px;
}

/* Počet výsledkov pod selectmi VĽAVO (Vojto 1. 10. 2026, zmena): pole
   Vyhľadať je na celú šírku; „Zrušiť filtre“ je v tom istom riadku 20 px
   za počtom - šírku počtu meria backend-tabulky.js (--be-pocet-sirka). */
.fi-body .fi-ta-filters .be-pocet-vysledkov {
    justify-content: flex-start;
}

.fi-body .fi-ta-filters:has(.fi-ta-filters-actions-ctn:not(.be-bez-filtra)) .fi-grid-col:has(.be-pocet-vysledkov) {
    left: 0;
    right: auto;
}

.fi-body .fi-ta-filters:has(.be-pocet-vysledkov) .fi-ta-filters-actions-ctn:not(.be-bez-filtra) {
    padding-left: calc(var(--be-pocet-sirka, 220px) + 20px);
}

/* Bez aktívneho filtra je počet v toku pod selectmi - 20 px od nich
   (namerané 46 -> 20 px). */
.fi-body .fi-ta-filters:has(.be-pole):has(.fi-ta-filters-actions-ctn.be-bez-filtra) .be-pocet-vysledkov {
    margin-top: -26px;
}

/* Karta: "zobrazuje sa iba, ak je niektorý z filtrov aktívny" - triedu
   prepína backend-tabulky.js (prepniZrusitFiltre). */
.fi-body .fi-ta-filters-actions-ctn.be-bez-filtra {
    display: none !important;
}

/* --------------------------------------------------------------------------
   6b. PRÁZDNY ZOZNAM
   --------------------------------------------------------------------------
   Trello ykwi6HTL: "ak tabuľka neobsahuje žiadne záznamy, zobrazuje sa na
   stred plochy a 300 px od hora text Žiadne záznamy a pod ním zelené
   tlačidlo na pridanie záznamu, rovnaké ako v hlavičke". Vodorovný stred
   rieši toto CSS, horné odsadenie 300 px od hrany karty dopočíta
   backend-tabulky.js (vycentrujPrazdnyStav); nadpis a tlačidlo nastavuje
   MatricaTabulky. Sivá ikona (krúžok s X) sa neukazuje.
   -------------------------------------------------------------------------- */
.fi-body .fi-ta-empty-state {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    /* Horné odsadenie (300 px od hrany karty) nastavuje skript do atribútu
       style - preto tu bez !important a bez skráteného zápisu padding. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 30px !important;
}

/* Medzi textom a tlačidlom je len medzera bloku (20 px) - Filamentove
   vlastné okraje sa rušia. */
.fi-body .fi-ta-empty-state-content > * {
    margin: 0 !important;
}

.fi-body .fi-ta-empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;   /* (Z) text -> tlačidlo, pravidlo 20 px */
    max-width: none !important;
}

/* Ikona a popis - v zadaní nie sú, len text a tlačidlo. */
.fi-body .fi-ta-empty-state-icon-bg,
.fi-body .fi-ta-empty-state-description {
    display: none !important;
}

.fi-body .fi-ta-empty-state-heading {
    margin: 0 !important;
    color: var(--be-active) !important;
    font-size: 16px !important;   /* (Z) písmo tabuľky 16 px */
    font-weight: 700 !important;
}

/* Tlačidlo je to isté zelené "Pridať" ako vpravo hore: farbu dáva
   fi-color-success (oddiel 4), tu len ikona 24 px a medzera 10 px. */
.fi-body .fi-ta-empty-state .fi-btn {
    gap: 10px !important;
}

.fi-body .fi-ta-empty-state .fi-btn .fi-icon {
    width: 24px !important;
    height: 24px !important;
}

/* --------------------------------------------------------------------------
   7. MENU FUNKCIÍ (TRI BODKY)
   --------------------------------------------------------------------------
   Karta: "na konci každého riadku bude vždy ikona Menu funkcií - tri bodky
   vertikálne. Po kliknutí sa zobrazí malá roletka s funkciami."

   Zatváranie kliknutím mimo rieši Filament sám.
   -------------------------------------------------------------------------- */
.fi-body .fi-ta-actions .fi-icon-btn,
.fi-body .fi-ta-actions .fi-dropdown-trigger .fi-icon-btn {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--be-active) !important;
}

.fi-body .fi-ta-actions .fi-icon-btn:hover {
    background: var(--be-panel) !important;
}

/* Tri bodky a úchyt na zmenu poradia: 24 px (štandard zadávateľa). */
.fi-body .fi-ta-actions .fi-icon-btn .fi-icon,
.fi-body .fi-ta-actions .fi-icon-btn svg,
.fi-body .fi-ta-reorder-handle svg,
.fi-body .fi-ta-reorder-handle .fi-icon {
    width: 24px !important;
    height: 24px !important;
}

/* Položky roletky - ikona vľavo (24 px), text vedľa nej, 16 px. */
.fi-body .fi-dropdown-list-item {
    gap: 10px;
    font-size: 16px;       /* (Z) */
}

.fi-body .fi-dropdown-list-item .fi-icon,
.fi-body .fi-dropdown-list-item svg {
    width: 24px !important;
    height: 24px !important;
}

/* Prepínač (napr. Predvolený) je vždy na KONCI riadku, tesne pred Funkciami
   (zadávateľ 24. 9. 2026): jeho stĺpec nezaberá viac než obsah, zvyšok šírky
   dostanú textové stĺpce pred ním. */
.fi-body .fi-ta-row > .fi-ta-cell:has(.fi-ta-toggle) {
    width: 1% !important;
    white-space: nowrap;
}

.fi-body .fi-ta-row > .fi-ta-cell:has(.fi-ta-toggle) .fi-ta-toggle {
    justify-content: flex-end;
}

/* Ikony v stĺpci Funkcie (prepínač, úchyt poradia, tri bodky) sú zarovnané
   doprava k menu a od seba VŽDY 10 px (zadávateľ 24. 9. 2026). Prepínač do
   bloku ikon presúva backend-tabulky.js (presunPrepinace), jeho pôvodný
   stĺpec sa skryje. */
.fi-body .be-prepinac-presunuty {
    display: none !important;
}

.fi-body .fi-ta-actions .fi-ta-toggle {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;   /* inak je široký ako pôvodný stĺpec a úchyt poradia odskočí */
    flex: none;
    gap: 0 !important;
    min-width: 0 !important;
}

.fi-body .fi-ta-row > .fi-ta-cell:has(.fi-ta-actions) {
    text-align: end;
}

/* Filamentov prepínač režimu "Zmeniť poradie" nad zoznamom sa nekreslí -
   poradie sa mení úchytom v riadku (hidden() na akcii Filament pri tomto
   tlačidle nerešpektuje, preto aj tu). */
.fi-body .fi-ta-header-toolbar [wire\:click="toggleTableReordering"],
.fi-body .fi-ta-header-toolbar .fi-ta-reorder-trigger-action-ctn {
    display: none !important;
}

/* Úchyt "Zoradiť poradie potiahnutím" na konci riadku, pred tromi bodkami
   (zadávateľ 24. 9. 2026, ikona z prílohy icons/zoradit-tahanim.svg). Vkladá ho
   backend-tabulky.js do tabuliek so stĺpcom poradia (data-be-poradie="1"). */
.fi-body .fi-ta-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;   /* (Z) medzera medzi ikonami */
}

.fi-body .be-poradie-uchyt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--be-active);
    cursor: grab;
    touch-action: none;   /* ťahanie prstom nesmie posúvať stránku */
}

.fi-body .be-poradie-uchyt::before {
    content: '';
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url('../icons/zoradit-tahanim.svg') center / contain no-repeat;
    mask: url('../icons/zoradit-tahanim.svg') center / contain no-repeat;
}

.fi-body .be-poradie-uchyt:active,
.fi-body .be-tahanie .be-poradie-uchyt {
    cursor: grabbing;
}

/* Ťahaný riadok je priesvitný, aby bolo vidieť, kam ide. */
.fi-body .fi-ta-row.be-tahany {
    opacity: 0.55;
}

.fi-body .fi-ta-row.be-tahany > .fi-ta-cell {
    background: var(--be-panel) !important;
}

body.be-tahanie {
    user-select: none;
    cursor: grabbing;
}

/* Roletka Funkcie podľa návrhu (zadávateľ 24. 9. 2026, nastavenia_pobocky_zoznam.jpg):
   biely panel so zaoblením a jemným tieňom, položky ČIERNYM písmom
   s čiernymi obrysovými ikonami - Upraviť aj Vymazať rovnako, bez
   Filamentovej oranžovej a červenej. Bežné rozbaľovacie zoznamy polí
   (backend-formulare.css) to nemení - platí len pre roletku v riadku. */
.fi-body .fi-ta-actions .fi-dropdown-panel {
    min-width: 200px;                       /* (M) */
    padding: 8px 6px;                       /* (M) */
    background: var(--be-surface) !important;
    border: 1px solid #EEEEEE !important;   /* (M) */
    border-radius: 10px !important;         /* (M) */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

.fi-body .fi-ta-actions .fi-dropdown-panel .fi-dropdown-list-item,
.fi-body .fi-ta-actions .fi-dropdown-panel .fi-dropdown-list-item-label {
    color: var(--be-active) !important;
    font-weight: 400;
}

.fi-body .fi-ta-actions .fi-dropdown-panel .fi-dropdown-list-item {
    padding: 10px 14px;                     /* (M) */
    border-radius: 6px;
}

.fi-body .fi-ta-actions .fi-dropdown-panel .fi-dropdown-list-item .fi-icon,
.fi-body .fi-ta-actions .fi-dropdown-panel .fi-dropdown-list-item svg {
    color: var(--be-active) !important;
}

.fi-body .fi-ta-actions .fi-dropdown-panel .fi-dropdown-list-item:hover,
.fi-body .fi-ta-actions .fi-dropdown-panel .fi-dropdown-list-item:focus-visible {
    background: var(--be-panel) !important;
}

/* --------------------------------------------------------------------------
   8. ZAŠKRTÁVACIE POLÍČKO NA ZAČIATKU RIADKU
   --------------------------------------------------------------------------
   Karta: "na začiatku každého riadka bude ikona Checkbox, ktorá bude neskôr
   slúžiť na hromadné funkcie. Pre teraz sa bude dať iba označiť / odznačiť."

   Vzhľad políčka (čierne so zaškrtnutím) je spoločný pre celú administráciu -
   viď backend-formulare.css.
   -------------------------------------------------------------------------- */
.fi-body .fi-ta-selection-cell {
    width: 48px;           /* (M) */
    padding-left: 18px;
}

/* Políčko v tabuľke je 24 x 24 px ako všetky ikony (štandard zadávateľa);
   bežné políčka vo formulároch ostávajú 18 px (backend-formulare.css). */
.fi-body .fi-ta-table .fi-checkbox-input,
.fi-body .fi-ta-selection-cell .fi-checkbox-input {
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px;
}

.fi-body .fi-ta-table .fi-checkbox-input:checked {
    background-size: 17px 17px !important;
}

/* --------------------------------------------------------------------------
   9. STRÁNKOVANIE
   --------------------------------------------------------------------------
   Šablóna: resources/views/vendor/filament/components/pagination/index.blade.php
   Predloha (počítač aj mobil):  [ < 1 2 3 .... 122 > ]  ...  [ 10 ⌄ ]
   Namerané v nastavenia_pobocky_zoznam.jpg: blok aj výber sú vysoké 45 px,
   okraj #CCCCCC, zaoblenie 8 px, 20 px pod posledným riadkom, bez deliacej
   čiary nad nimi.
   -------------------------------------------------------------------------- */
.fi-body .fi-ta-ctn .be-strankovanie,
.fi-body .be-strankovanie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 0;
    padding: 30px 0 0;          /* (M) zadávateľ: 30 px pod tabuľkou */
    border-top: 0 !important;
}

.fi-body .be-strany {
    display: flex;
    align-items: center;
    height: 45px;               /* (M) */
    padding: 0 6px;
    margin: 0;
    list-style: none;

    background: var(--be-surface);
    border: 1px solid var(--be-pole-okraj);
    border-radius: 8px;         /* (M) */
}

.fi-body .be-strana {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 43px;
    padding: 0 4px;

    background: none;
    border: 0;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    color: var(--be-active);
    cursor: pointer;
}

.fi-body .be-strana-aktualna {
    font-weight: 700;
}

.fi-body .be-strana-medzera {
    cursor: default;
}

/* Šípky z príloh (icons/sipka-vlavo.svg, sipka-vpravo.svg) - plné tvary
   vo farbe textu, 24 px. */
.fi-body .be-strana-sipka svg {
    width: 24px;    /* (Z) ikony 24 px */
    height: 24px;
    fill: currentColor;
}

/* Na prvej / poslednej strane šípka ostáva na mieste, len stlmená. */
.fi-body .be-strana:disabled {
    color: var(--be-pole-okraj);
    cursor: default;
}

/* Zobraziť viac… (Vojto 6. 10. 2026) - vedľa stránok, v dizajne bloku
   stránkovania: 45 px, okraj #CCCCCC, zaoblenie 8 px, ikona 24 px. */
.fi-body .be-zobrazit-viac {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 45px;
    padding: 0 18px;

    background: var(--be-surface);
    border: 1px solid var(--be-pole-okraj);
    border-radius: 8px;
    font: inherit;
    font-size: 16px;
    color: var(--be-active);
    cursor: pointer;
}

.fi-body .be-zobrazit-viac:hover {
    background: #F2F2F2;
}

.fi-body .be-zobrazit-viac:disabled {
    opacity: 0.6;
    cursor: wait;
}

.fi-body .be-zobrazit-viac svg {
    width: 24px;
    height: 24px;
}

/* Výber počtu riadkov: vždy vpravo, aj keď blok so stranami chýba. */
.fi-body .be-strankovanie .be-na-stranu {
    display: block !important;
    margin-left: auto;
}

.fi-body .be-na-stranu select {
    height: 45px;               /* (M) */
    width: 89px;                /* (M) */
    padding: 0 36px 0 18px;

    font: inherit;
    font-size: 16px;
    color: var(--be-active);
    background-color: var(--be-surface);
    /* Šípka z prílohy (icons/sipka-dole.svg), 24 px. */
    background-image: url('../icons/sipka-dole.svg');
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 24px 24px;

    border: 1px solid var(--be-pole-okraj);
    border-radius: 8px;         /* (M) */
    appearance: none;
    cursor: pointer;
}

.fi-body .be-na-stranu select:focus {
    outline: none;
    border-color: var(--be-pole-okraj-akt);
}

/* --------------------------------------------------------------------------
   9a. HROMADNÉ FUNKCIE NAD OZNAČENÝMI RIADKAMI
   --------------------------------------------------------------------------
   Predloha nastavenia_jazyky_zoznam_hromadne_funkcie.jpg: ružové tlačidlo
   351-562 x 175-219 (teda 211 x 45 px) prekryje ľavú časť hlavičky tabuľky
   a pod ním visí biela ponuka široká 286 px s troma položkami.

   Značku kreslí resources/views/filament/tables/hromadne-funkcie.blade.php,
   vidieť je len vtedy, keď je niečo označené.
   -------------------------------------------------------------------------- */
:root {
    --be-hromadne-ruzova: #ECBCC2;   /* (M) */
}

.fi-body .fi-ta {
    position: relative;
}

/* Keď je niečo označené, nad hlavičkou tabuľky sa urobí miesto pre
   tlačidlo Hromadné funkcie (45 px + 10 px) - tlačidlo stojí nad hlavičkami,
   nie cez ne (komentár 27. 9. 2026). */
/* Trieda je na obale tabuľky (.fi-ta-ctn); odsúva sa obsah tabuľky, aby sa
   tlačidlo s ničím neprekrývalo. Platí pre všetky tabuľky / moduly.
   Zadávateľ 27. 9. 2026: pod tlačidlom 10 px k hlavičke; nad tlačidlom
   20 px, len keď je otvorený panel filtrov - inak bez medzery.
     zatvorené filtre:  45 (tlačidlo) + 10          = 55 px
     otvorené filtre:   20 + 45 (tlačidlo) + 10     = 75 px */
.fi-body .be-ma-oznacene .fi-ta-content-ctn {
    margin-top: 55px !important;
}

.fi-body .be-ma-oznacene:has(.fi-ta-filters-above-content-ctn.fi-open) .fi-ta-content-ctn {
    margin-top: 75px !important;
}

.fi-body .be-hromadne {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
}

.fi-body .be-hromadne-tlacidlo {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-width: 211px;   /* (M) */
    height: 45px;       /* (M) */
    padding: 0 20px;

    background: var(--be-hromadne-ruzova);
    border: 0;
    border-radius: 8px;   /* (M) */

    color: var(--be-active);
    font-size: 16px;      /* (M) */
    font-weight: 700;
    cursor: pointer;
}

.fi-body .be-hromadne-fajka {
    width: 22px;   /* (M) */
    height: 22px;
}

/* Ponuka pod tlačidlom - biela karta ako roletka profilu. */
.fi-body .be-hromadne-ponuka {
    position: absolute;
    top: calc(45px + 8px);
    left: 0;

    width: 286px;   /* (M) */
    padding: 8px 0;

    background: var(--be-surface);
    border: 1px solid var(--be-divider);
    border-radius: 10px;   /* (M) */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

.fi-body .be-hromadne-ponuka button {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    padding: 10px 20px;

    background: none;
    border: 0;

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

.fi-body .be-hromadne-ponuka button:hover {
    background: var(--be-panel);
}

.fi-body .be-hromadne-ponuka svg {
    width: 24px;   /* (Z) ikony 24 px */
    height: 24px;
    flex: 0 0 auto;
}

/* Označený riadok bez farebnej čiary na začiatku (zadávateľ 24. 9. 2026) -
   Filament ju kreslí ako vnútorný tieň prvej bunky; stav ukazuje zaškrtnuté
   políčko a tlačidlo Hromadné funkcie. */
.fi-body .fi-ta-row.fi-selected > :first-child {
    box-shadow: none !important;
}

/* Pás "Označiť všetkých 31 / Zrušiť označenie všetkých", ktorý Filament
   ukáže nad tabuľkou po označení riadku. Predloha ho nemá - to isté robia
   položky našej ponuky. */
.fi-body .fi-ta-selection-indicator {
    display: none !important;
}

/* Filamentova roletka hromadných akcií zostáva v značke - mazanie spúšťa
   práve ona (viď backend-tabulky.js) - ale vidieť ju nemá. */
.fi-body .fi-ta-header-toolbar .fi-ta-actions > .fi-dropdown {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   9b. PREPÍNAČ V ZOZNAME
   --------------------------------------------------------------------------
   Predloha nastavenia_jazyky_zoznam.jpg: zapnutý prepínač je zelený
   (odmerané 0,197,13), vypnutý čierny, oba s bielym kolieskom. Filament
   kreslí vypnutý svetlosivý, takže v zozname splýval s riadkom.

   Nad stĺpcom s prepínačom nie je v predlohe nadpis. Popis sa preto len
   skrýva pred očami - pre odčítavače obrazovky zostáva.
   -------------------------------------------------------------------------- */
:root {
    --be-prepinac-zapnuty:  #92C22D;   /* zelená tlačidla Uložiť (Vojto 30. 9. 2026, predtým #00C50D) */
    --be-prepinac-vypnuty:  #000000;   /* (M) */
}

/* Všetky prepínače v Backende - v zozname aj vo formulároch (Vojto
   30. 9. 2026: vo formulári sa prefarboval na oranžovo = farba témy
   Filamentu). Zapnutý zelený, vypnutý čierny ako ikony switcher-aktivny /
   switcher-neaktivny v Médiách. */
.fi-body .fi-toggle.fi-toggle-on,
.fi-body .fi-toggle[aria-checked="true"] {
    background-color: var(--be-prepinac-zapnuty) !important;
}

.fi-body .fi-toggle.fi-toggle-off,
.fi-body .fi-toggle[aria-checked="false"] {
    background-color: var(--be-prepinac-vypnuty) !important;
}

/* Text je v bunke priamo, nie vo vlastnej značke, preto nulová veľkosť
   písma - odčítavače obrazovky ho aj tak prečítajú. */
.fi-body .fi-ta-header-cell-predvoleny {
    font-size: 0 !important;
}

/* Prepínač stojí tesne pri menu funkcií - v predlohe končí 22 px pred tromi
   bodkami (1264-1295 proti bodkám od 1317). Stĺpec s funkciami preto nemá
   naberať zvyšnú šírku. */
.fi-body .fi-ta-row > .fi-ta-cell:last-child,
.fi-body .fi-ta-table > thead .fi-ta-header-cell:last-child {
    width: 1%;
    padding-left: 0;
    padding-right: 16px;   /* (M) tri bodky končia na x=1334 ako v predlohe */
}

.fi-body .fi-ta-cell-predvoleny,
.fi-body .fi-ta-cell-predvoleny .fi-ta-toggle {
    padding-right: 0 !important;
}

/* Predloha má prepínač 32 x 18 px, Filament kreslí 44 x 24. Zmenšuje sa celý
   naraz, aby koliesko zostalo na svojom mieste. */
.fi-body .fi-ta-toggle .fi-toggle {
    transform: scale(0.727);
    transform-origin: right center;
}

/* V bloku Funkcie by zmenšený prepínač nechal vľavo 12 px prázdneho miesta
   (44 - 32) a úchyt poradia by bol 22 px, nie 10 px od neho. */
.fi-body .fi-ta-actions .fi-ta-toggle .fi-toggle {
    margin-left: -12px;
}

/* --- Blokované konto: celý riadok načerveno ----------------------------- */
/* Karta "Kontá": "keď je konto blokované, všetky texty v riadku sú prefarbené
   na červeno". Triedu prideľuje riadku KontaTable::configure().

   Farba sa dedí do všetkých textov v riadku vrátane odkazu v stĺpci s menom -
   ten má vlastnú farbu, preto je vypísaný zvlášť. */
.fi-body .fi-ta-row.be-riadok-blokovany,
.fi-body .fi-ta-row.be-riadok-blokovany .fi-ta-text,
.fi-body .fi-ta-row.be-riadok-blokovany a {
    color: var(--be-badge, #D92D20) !important;
}

/* --------------------------------------------------------------------------
   10. MOBIL - Z RIADKOV SA STANÚ KARTIČKY
   --------------------------------------------------------------------------
   Karta má pre mobil vlastný podklad: každý záznam je samostatná kartička,
   hore zaškrtávacie políčko a "Funkcie", pod tým názvy stĺpcov a hodnoty pod
   sebou.

   Filament ku každej bunke vypisuje aj názov stĺpca (fi-ta-cell-label),
   pretože je zapnuté stackedOnMobile() - viď MatricaTabulky. Tu sa z toho
   skladá vzhľad kartičiek.

   Hraničný bod je "mobil naležato" zo zadania.
   -------------------------------------------------------------------------- */

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

/* Otvorený panel: tlačidlo „Zatvoriť filtre“ má červený krížik (zavriet.svg,
   komentár 27. 9. 2026) - ten istý ako tlačidlo Zrušiť vo formulároch. */
.fi-body .fi-ta-filters-above-content-ctn.fi-open .fi-ta-filters-trigger-action-ctn .fi-btn::before {
    background: url('../icons/zavriet.svg') center / contain no-repeat;
    -webkit-mask: none;
    mask: none;
}

/* Vlastné pole hľadania Filamentu v lište sa nezobrazuje (komentár 27. 9.
   2026) - hľadá sa poľom v paneli filtrov (MatricaTabulky, filtersFormSchema). */
.fi-body .fi-ta-header-toolbar .fi-ta-search-field:not(.be-vyhladat-vo-filtroch) {
    display: none !important;
}

/* Pole „Vyhľadať v záznamoch“ v paneli filtrov: prvý riadok na celú šírku
   (vzhľad poľa Text je v pravidlách .fi-ta-search-field nižšie). */
.fi-body .fi-ta-filters .be-vyhladat-vo-filtroch {
    width: 100% !important;
    max-width: none !important;
}

/* --- Pole „Vyhľadať v záznamoch“ (karta ykwi6HTL, 26. 9. 2026) ----------
   Stojí v riadku nadpisu naľavo od „Otvoriť filtre“ (návrh
   2026-09-26-vyhladavanie.png). Komentár 26. 9. 19:00: vyzerá ako pole
   Text vo filtroch - tie isté premenné z backend-formulare.css: v pokoji
   rámik aj text #CCCCCC, po kliknutí alebo s vyplneným textom čierne
   (rámik zhrubne ako pri poli Text), rovnaké zaoblenie, výška a písmo.
   Ikona lupy 24 px sa farbí spolu s textom. */
.fi-body .fi-ta-search-field {
    width: 250px;
    max-width: 100%;
}

.fi-body .fi-ta-search-field .fi-input-wrp {
    min-height: var(--be-pole-vyska, 45px);
    background: var(--be-surface) !important;
    border: 1px solid var(--be-pole-okraj, #ccc) !important;
    border-radius: var(--be-pole-radius, 8px) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.12s ease;
}

.fi-body .fi-ta-search-field .fi-input-wrp:focus-within,
.fi-body .fi-ta-search-field .fi-input-wrp:has(input:not(:placeholder-shown)) {
    border-color: var(--be-pole-okraj-akt, #000) !important;
}

.fi-body .fi-ta-search-field .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 1px var(--be-pole-okraj-akt, #000) !important;
}

.fi-body .fi-ta-search-field .fi-input-wrp-prefix {
    padding-inline-start: var(--be-pole-odsadenie, 13px);
    border: 0 !important;
    background: transparent !important;
}

.fi-body .fi-ta-search-field .fi-input-wrp-prefix .fi-icon {
    width: 24px;
    height: 24px;
    color: var(--be-pole-okraj, #ccc);
    transition: color 0.12s ease;
}

.fi-body .fi-ta-search-field .fi-input-wrp:focus-within .fi-input-wrp-prefix .fi-icon,
.fi-body .fi-ta-search-field .fi-input-wrp:has(input:not(:placeholder-shown)) .fi-input-wrp-prefix .fi-icon {
    color: var(--be-pole-okraj-akt, #000);
}

.fi-body .fi-ta-search-field input {
    height: calc(var(--be-pole-vyska, 45px) - 2px);
    line-height: calc(var(--be-pole-vyska, 45px) - 2px);
    padding-block: 0;
    padding-inline: 8px var(--be-pole-odsadenie, 13px);
    font-size: var(--be-pole-pismo, 15px);
    color: var(--be-pole-text-akt, #000);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fi-body .fi-ta-search-field input::placeholder {
    color: var(--be-pole-okraj, #ccc);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   POTVRDZOVACIE OKNO HROMADNÝCH FUNKCIÍ (karta ykwi6HTL, 27. 9. 2026)
   --------------------------------------------------------------------------
   Návrh: biele okno v strede obrazovky na šírku aj na výšku, sivá ikona
   funkcie, tučný nadpis 18 px, sivý text 15 px, dole dve tlačidlá vedľa
   seba (sivé Zrušiť s červeným krížikom, zelené Súhlasím s fajkou), vpravo
   hore červený krížik v krúžku presahujúci roh okna.
   Nastavenie akcie: MatricaTabulky::potvrdzovacieOkno().
   -------------------------------------------------------------------------- */
.fi-modal-window-ctn:has(.be-potvrdenie) {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow-y: auto;
}

.fi-body .be-potvrdenie.fi-modal-window {
    position: relative;
    width: 100%;
    max-width: 340px !important;
    margin: auto !important;
    padding: 30px 24px 24px !important;
    border-radius: 10px !important;
    overflow: visible !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.fi-body .be-potvrdenie .fi-modal-header {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

/* Ikona funkcie: sivá, bez podkladového krúžku Filamentu. */
.fi-body .be-potvrdenie .fi-modal-icon-bg,
.fi-body .be-potvrdenie .fi-modal-icon-ctn {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.fi-body .be-potvrdenie .fi-modal-icon-ctn .fi-icon,
.fi-body .be-potvrdenie .fi-modal-icon-bg .fi-icon {
    width: 56px !important;
    height: 56px !important;
    color: #BDBDBD !important;
}

.fi-body .be-potvrdenie .fi-modal-heading {
    margin-top: 6px;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
}

.fi-body .be-potvrdenie .fi-modal-description {
    margin-top: 0 !important;
    font-size: 15px !important;
    line-height: 1.5;
    color: #7F7F7F !important;
}

.fi-body .be-potvrdenie .fi-modal-footer {
    padding: 22px 0 0 !important;
}

.fi-body .be-potvrdenie .fi-modal-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px !important;
}

.fi-body .be-potvrdenie .fi-modal-footer-actions .fi-btn {
    height: 48px;
    width: 100%;
    justify-content: center;
    gap: 10px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    box-shadow: none !important;
}

.fi-body .be-potvrdenie .fi-modal-footer-actions .fi-btn .fi-icon {
    width: 24px !important;
    height: 24px !important;
}

.fi-body .be-potvrdenie .fi-modal-footer-actions .be-potvrdenie-zrusit,
.fi-body .be-potvrdenie .fi-modal-footer-actions .fi-btn.fi-color-gray {
    background: var(--be-ta-sive-tlacidlo, #F2F2F2) !important;
    color: #000 !important;
    font-weight: 400 !important;
}

.fi-body .be-potvrdenie .fi-modal-footer-actions .be-potvrdenie-suhlasim,
.fi-body .be-potvrdenie .fi-modal-footer-actions .fi-btn.fi-color-success {
    background: var(--be-ta-pridat, #92C32B) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.fi-body .be-potvrdenie .fi-modal-footer-actions .be-potvrdenie-suhlasim .fi-icon,
.fi-body .be-potvrdenie .fi-modal-footer-actions .fi-btn.fi-color-success .fi-icon {
    color: #000 !important;
}

/* Zatvárací krížik: červený krúžok z icons/zrusit.svg v rohu okna. */
.fi-body .be-potvrdenie .fi-modal-close-btn {
    position: absolute !important;
    top: -12px !important;
    right: -12px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: url('../icons/zrusit.svg') center / contain no-repeat !important;
    border-radius: 50%;
}

.fi-body .be-potvrdenie .fi-modal-close-btn > * {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   OKNÁ S FORMULÁROM / OBSAHOM (karta ykwi6HTL, komentár 29. 9. 2026 9:06)
   --------------------------------------------------------------------------
   „Každý popup v Backende rovnaký vizuál“ - okná, ktoré nie sú potvrdením
   (zmena hesla, info o importe ...), majú rovnaký rám, krížik v rohu
   a tlačidlá ako potvrdzovacie okno vyššie; obsah si určuje akcia.
   Trieda be-okno: MatricaTabulky::zapni() (Action::configureUsing).
   -------------------------------------------------------------------------- */
.fi-body .be-okno.fi-modal-window {
    position: relative;
    padding: 30px 24px 24px !important;
    border-radius: 10px !important;
    overflow: visible !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.fi-body .be-okno .fi-modal-header {
    padding: 0 0 16px !important;
}

.fi-body .be-okno .fi-modal-heading {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
}

.fi-body .be-okno .fi-modal-description {
    font-size: 15px !important;
    color: #7F7F7F !important;
}

.fi-body .be-okno .fi-modal-icon-bg,
.fi-body .be-okno .fi-modal-icon-ctn {
    background: transparent !important;
    box-shadow: none !important;
}

.fi-body .be-okno .fi-modal-icon-ctn .fi-icon,
.fi-body .be-okno .fi-modal-icon-bg .fi-icon {
    color: #BDBDBD !important;
}

.fi-body .be-okno .fi-modal-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.fi-body .be-okno .fi-modal-footer {
    padding: 22px 0 0 !important;
}

.fi-body .be-okno .fi-modal-header {
    text-align: center;
}

/* Tlačidlá ako v potvrdení: dve rovnako široké, Zrušiť vľavo. */
.fi-body .be-okno .fi-modal-footer-actions {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 14px !important;
}

.fi-body .be-okno .fi-modal-footer-actions .be-potvrdenie-zrusit {
    order: -1;
}

.fi-body .be-okno .fi-modal-footer-actions .fi-btn {
    height: 48px;
    min-width: 140px;
    justify-content: center;
    gap: 10px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    box-shadow: none !important;
}

.fi-body .be-okno .fi-modal-footer-actions .fi-btn .fi-icon {
    width: 24px !important;
    height: 24px !important;
}

.fi-body .be-okno .fi-modal-footer-actions .be-potvrdenie-zrusit {
    background: var(--be-ta-sive-tlacidlo, #F2F2F2) !important;
    color: #000 !important;
    font-weight: 400 !important;
}

.fi-body .be-okno .fi-modal-footer-actions .be-potvrdenie-suhlasim {
    background: var(--be-ta-pridat, #92C32B) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.fi-body .be-okno .fi-modal-footer-actions .be-potvrdenie-suhlasim .fi-icon {
    color: #000 !important;
}

.fi-body .be-okno .fi-modal-close-btn {
    position: absolute !important;
    top: -12px !important;
    right: -12px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: url('../icons/zrusit.svg') center / contain no-repeat !important;
    border-radius: 50%;
}

.fi-body .be-okno .fi-modal-close-btn > * {
    visibility: hidden;
}

/* Filtre vždy od ľavého okraja pod vyhľadávaním (zadávateľ 28. 9. 2026).
   Filter „hladanie“ (MatricaTabulky::filterHladania) nemá vlastné pole -
   jeho bunka v mriežke je prázdna a posúvala ďalšie filtre doprava. Rovnako
   filter „zoradenie“ - od 1. 10. 2026 bez poľa Zoradiť (MatricaTabulky::
   filterZoradenia), zoraďuje sa cez hlavičky tabuľky. */
.fi-body .fi-ta-filters .fi-grid-col:has(> .fi-sc-component > [id="tableFiltersForm.hladanie"]),
.fi-body .fi-ta-filters .fi-grid-col:has(> .fi-sc-component > [id="tableFiltersForm.zoradenie"]) {
    display: none !important;
}

/* Okno Informácie pri zákazníkovi (Trello LEX0WD5w, 29. 9. 2026): údaje
   pod sebou - popis vľavo sivý, hodnota vpravo. */
.fi-body .be-info-zoznam {
    margin: 0;
}

.fi-body .be-info-zoznam > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #EEEEEE;
    font-size: 14px;   /* texty informácií 14 px (komentár 29. 9. 2026 10:04) */
}

.fi-body .be-info-zoznam dt {
    color: #7F7F7F;
}

.fi-body .be-info-zoznam dd {
    margin: 0;
    font-weight: 700;
    color: #000;
}

/* --------------------------------------------------------------------------
   IKONA V POPUPE - GLOBÁLNE (karta LEX0WD5w, komentár 29. 9. 2026 10:04)
   --------------------------------------------------------------------------
   „Ikona popup musí byť vždy rovnako veľká 55 x 55 px a farbou #B2B2B2“ -
   potvrdenia (be-potvrdenie) aj okná s obsahom (be-okno). Ikony z vlastnej
   sady (be-*) majú výplň priamo v SVG, preto sa prefarbuje aj výplň;
   obrysové ikony Filamentu (fill="none") len farbou čiary.
   -------------------------------------------------------------------------- */
.fi-body :is(.be-potvrdenie, .be-okno) .fi-modal-icon-ctn,
.fi-body :is(.be-potvrdenie, .be-okno) .fi-modal-icon-bg {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.fi-body :is(.be-potvrdenie, .be-okno) .fi-modal-icon-ctn .fi-icon,
.fi-body :is(.be-potvrdenie, .be-okno) .fi-modal-icon-bg .fi-icon {
    width: 55px !important;
    height: 55px !important;
    color: #B2B2B2 !important;
}

.fi-body :is(.be-potvrdenie, .be-okno) .fi-modal-icon-ctn svg:not([fill="none"]) :is(path, circle, rect, polygon, ellipse),
.fi-body :is(.be-potvrdenie, .be-okno) .fi-modal-icon-bg svg:not([fill="none"]) :is(path, circle, rect, polygon, ellipse) {
    fill: #B2B2B2 !important;
}

.fi-body :is(.be-potvrdenie, .be-okno) .fi-modal-header {
    align-items: center;
}

/* Okno s jediným tlačidlom (napr. Informácie - Zavrieť): tlačidlo nie je
   cez celú šírku okna, má šírku ako jedno z dvojice (zadávateľ 29. 9. 2026). */
.fi-body .be-okno .fi-modal-footer-actions:has(> :only-child) {
    display: flex !important;
    justify-content: center;
}

.fi-body .be-okno .fi-modal-footer-actions > :only-child {
    width: 160px;
    justify-self: center;   /* na stred okna (zadávateľ 29. 9. 2026) */
    margin-inline: auto;
}

/* Interné poznámky v okne Informácie pri zákazníkovi (29. 9. 2026). */
.fi-body .be-info-poznamky {
    margin-top: 14px;
    font-size: 14px;
    text-align: left;
}

.fi-body .be-info-poznamky-nadpis {
    margin-bottom: 4px;
    color: #7F7F7F;
}

.fi-body .be-info-poznamky-text {
    max-height: 240px;
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: 6px;
    background: #F7F7F7;
    color: #000;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Recenzie zákazníkov (Trello MpdWel4D, 29. 9. 2026): neschválená recenzia
   má riadok sivý, hodnotenie ako zlaté hviezdičky. */
.fi-body .fi-ta-row.be-riadok-neschvaleny .fi-ta-text,
.fi-body .fi-ta-row.be-riadok-neschvaleny a {
    color: #9E9E9E !important;
}

.fi-body .be-hviezdicky,
.fi-body .be-hviezdicky .fi-ta-text {
    color: #F2B01E !important;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* Správy z formulárov (Trello rNUkjF2P, 29. 9. 2026): užší stĺpec Správa
   a ikona Statusu 24 px (farba success / danger z IconColumn). */
.fi-body .fi-ta-header-cell.be-stlpec-sprava,
.fi-body .fi-ta-cell.be-stlpec-sprava {
    width: 30%;
    max-width: 360px;
}

.fi-body .fi-ta-cell.be-stlpec-sprava .fi-ta-text {
    max-width: 360px;
}

.fi-body .fi-ta-actions .be-na-koniec,
.fi-body .fi-ta-actions .be-na-koniec .fi-ta-icon {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    padding: 0 !important;
}

.fi-body .fi-ta-actions .fi-ta-icon .fi-icon {
    width: 24px;
    height: 24px;
}

/* Predvolený záznam (Vojto 29. 9. 2026, globálne - MatricaTabulky::predvoleny):
   ikona predvoleny-zaznam.svg na konci riadka pred Funkciami, zelená #80BA3A
   = predvolený, červená #EA001C = nepredvolený. */
.fi-body .be-predvoleny .fi-icon,
.fi-body .be-predvoleny-ano .fi-icon {
    color: #80BA3A !important;
}

.fi-body .be-predvoleny-nie .fi-icon {
    color: #EA001C !important;
}

/* --------------------------------------------------------------------------
   Prepínač Zapnúť / Vypnúť logovanie v hlavičke Logov (Trello jaxnkmlJ,
   30. 9. 2026) - na mieste tlačidla Pridať. Ikona je samotný prepínač
   (zelený zapnutý / sivý vypnutý), preto širšia než bežná ikona.
   -------------------------------------------------------------------------- */
.fi-body .fi-btn.be-prepinac-logovania .fi-icon {
    width: 40px !important;
    height: 22px !important;
    color: inherit !important;
}

/* Ikona stavu, ktorá sa v riadku nemá ukázať, ale má držať miesto (napr.
   Parametre - ikona filtrovania, aby úchyt Zoradiť nestál inde). */
.fi-body .be-ikona-neviditelna svg,
.fi-body .be-ikona-neviditelna .fi-icon {
    visibility: hidden;
}

/* Hromadné funkcie bez Vymazať - tabuľka bez hromadného mazania
   (Kategórie, Trello dWnN02sG 1. 10. 2026). */
[data-be-bez-hromadneho-mazania] .be-hromadne-vymazat,
.fi-ta:has([data-be-bez-hromadneho-mazania]) .be-hromadne-vymazat,
[data-be-bez-hromadneho-mazania] ~ * .be-hromadne-vymazat {
    display: none !important;
}


/* Zlúčiť parametre - priebeh (Trello 5Q8IO3fp, 6. 10. 2026). */
.fi-body .be-zlucovanie {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.fi-body .be-zlucovanie-text {
    margin: 0;
    font-size: 15px;
    color: #7F7F7F;
}

.fi-body .be-zlucovanie-draha {
    height: 14px;
    overflow: hidden;
    border-radius: 7px;
    background: #EEEEEE;
}

.fi-body .be-zlucovanie-draha span {
    display: block;
    height: 100%;
    border-radius: 7px;
    background: var(--be-ta-pridat, #92C22D);
    transition: width .2s;
}

.fi-body .be-zlucovanie-percento {
    font-size: 18px;
    font-weight: 700;
}

/* Ďalšie hromadné funkcie v ponuke - ikona ako pri ostatných položkách. */
.fi-body .be-hromadne-ikona {
    display: inline-flex;
}

.fi-body .be-hromadne-ikona svg {
    width: 24px;
    height: 24px;
}