/*
 * Akční tlačítka technika (UI2, etapa 3a).
 *
 * Řídí se ALUNOVA Design System v2.0 — tedy tou pro APLIKACI (Metronic 8 / BS5
 * override), ne brandovou škálou pro web. Rozdíl je podstatný: brand má jako
 * primary magentu, jenže v aplikaci magenta znamená DANGER. Kdyby hlavní
 * tlačítko bylo magenta, „Dokončit" by vypadalo stejně jako „Smazat".
 *
 * DVĚ NEZÁVISLÉ OSY. Tohle je jádro a poprvé jsem to spletl:
 *
 *   DŮRAZ  — jak hlasité tlačítko je: plné / tónované / obrysové
 *   VÝZNAM — co dělá: pokračovat, otevřít, volat, smazat
 *
 * Když se obojí slije do jednoho „vedlejšího" koše, vznikne obrazovka bez
 * jediného barevného bodu a nedá se v ní navigovat. Změřeno: seznam měl po
 * prvním pokusu 24 viditelných akcí a všech 24 stejně šedých.
 *
 * Barvy nesou význam z palety design systemu, ne z libosti:
 *
 *   teal    #06D6A0  hotovo, dokončeno   -> hlavní akce kroku
 *   sky     #49B6FF  informace, odkazy   -> otevřít, zobrazit, detail
 *   amber   #F59E0B  probíhá, akcent     -> kontakt (volat)
 *   magenta #E8175D  nebezpečí, urgence  -> maže, ruší
 *   indigo  #1E1B4B  primární text       -> neutrální podpora
 *
 * Tónovaná varianta používá vzor design systemu pro status badge: podklad
 * rgba(barva, .12) a tmavší text. Tím je tlačítko čitelné, drží význam a
 * nepřebíjí obsah — plná barva patří jen tam, kde je akce opravdu jedna.
 *
 * Neutrální podklad je chladná šedomodrá, ne fialová. Design system zakazuje
 * „pure gray bg" a navrhuje #F0ECF9 — ta se ale v aplikaci neosvědčila, viz
 * poznámka u tokenu. Rádius se tu nenastavuje vůbec, drží ho Metronic — systém
 * zakazuje pill a připouští max 6 px.
 *
 * Soubor leží v public/assets/, ne v resources/src/sass/: style.bundle.css
 * sdílí ADMIN (admin/@layout.latte:20 i app/globals/@layout.latte), takže
 * změna geometrie tlačítek v SCSS by tiše přerozměřila celý admin panel.
 */

:root {
    /* Paleta ALUNOVA Design System v2.0 */
    --sapp-teal: #06D6A0;
    --sapp-teal-dark: #05B98A;
    --sapp-sky: #49B6FF;
    --sapp-sky-ink: #0B6FA8;
    --sapp-amber: #F59E0B;
    --sapp-amber-ink: #92610A;
    --sapp-magenta: #E8175D;
    --sapp-magenta-dark: #C91350;
    --sapp-indigo: #1E1B4B;
    /* Chladny neutral, ne fialova. Design system zakazuje "pure gray bg" a
       navrhuje #F0ECF9, jenze ta fialova v aplikaci nesedi — modra slozka je
       tu o 9 vyssi nez cervena, takze to ceduli "seda" neplni a fialove to
       nevypada. Kontrast proti bile 1,18 (fialova mela 1,16). */
    --sapp-surface: #E9EDF2;
    --sapp-surface-hover: #DDE3EC;
    --sapp-border: #E0E0EA;
    --sapp-ink-secondary: #6B6B8D;

    /* Dotykový cíl. 44 px je minimum, pod kterým se do tlačítka nedá spolehlivě
       trefit prstem — z auditu, měřeno na skutečných prvcích. */
    --sapp-touch: 44px;
}

/* Základ. Nesahá na padding ani border — ty drží Metronic
   (.btn:not(.btn-outline)…, specificita 0,7,0) a přebíjet je znamená !important. */
.btn.sapp-action {
    border: 0;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

/*
 * Ikona musí převzít barvu tlačítka.
 *
 * Bez tohohle zůstane šedá i na barevném tlačítku: Metronic dává obalu
 * `.svg-icon` vlastní `color: var(--bs-text-muted)` (style.bundle.css:42427),
 * což je pravidlo na OBALU, takže barva nastavená na tlačítku se k ikoně
 * nedostane. Změřeno — telefon měl rgb(161,165,183) uvnitř amber tlačítka.
 *
 * Ikonový font `ki-duotone` barvu dědí sám, ale `.path*` vrstvy se řídí
 * currentColor, takže i ty se tím srovnají.
 */
.btn.sapp-action .svg-icon,
.btn.sapp-action .svg-icon svg,
.btn.sapp-action i {
    color: inherit;
}

.btn.sapp-action .svg-icon svg [fill]:not([fill="none"]) {
    fill: currentColor;
}

/* ---- DŮRAZ: hlavní akce -------------------------------------------------
   Plná teal. Právě jedna na obrazovku — ta, kterou krok pokračuje nebo se
   uloží. Tmavý indigo inkoust je záměrný: bílá na #06D6A0 má kontrast ~1,9:1,
   hluboko pod WCAG AA. */
.btn.sapp-action--primary {
    background-color: var(--sapp-teal);
    color: var(--sapp-indigo);
}

.btn.sapp-action--primary:hover,
.btn.sapp-action--primary:focus,
.btn.sapp-action--primary:active {
    background-color: var(--sapp-teal-dark);
    color: var(--sapp-indigo);
}

/* ---- DŮRAZ: neutrální podpora ------------------------------------------
   Akce bez vlastního významu: otevřít modál, přidat řádek, přeskočit. */
.btn.sapp-action--secondary {
    background-color: var(--sapp-surface);
    color: var(--sapp-indigo);
}

.btn.sapp-action--secondary:hover,
.btn.sapp-action--secondary:focus,
.btn.sapp-action--secondary:active {
    background-color: var(--sapp-surface-hover);
    color: var(--sapp-indigo);
}

/* ---- VÝZNAM: informace, otevření, detail --------------------------------
   Sky je v design systemu barva informací a odkazů. Sem patří „zobrazit
   zakázku", „historie", „další informace" — všechno, co něco UKAZUJE. */
.btn.sapp-action--info {
    background-color: rgba(73, 182, 255, .12);
    color: var(--sapp-sky-ink);
}

.btn.sapp-action--info:hover,
.btn.sapp-action--info:focus,
.btn.sapp-action--info:active {
    background-color: rgba(73, 182, 255, .24);
    color: var(--sapp-sky-ink);
}

/* ---- VÝZNAM: kontakt ----------------------------------------------------
   Amber je akcent produktu a stav „probíhá". Volání klientovi je jediná akce,
   která vede MIMO aplikaci, a proto si vlastní barvu zaslouží. */
.btn.sapp-action--contact {
    background-color: rgba(245, 158, 11, .12);
    color: var(--sapp-amber-ink);
}

.btn.sapp-action--contact:hover,
.btn.sapp-action--contact:focus,
.btn.sapp-action--contact:active {
    background-color: rgba(245, 158, 11, .24);
    color: var(--sapp-amber-ink);
}

/* ---- DŮRAZ: odchod bez uložení -----------------------------------------
   Jen obrys. `btn-outline` musí zůstat i v zápisu v šabloně — je to vypínač
   pravidla `.btn:not(.btn-outline)…{border:0}` (style.bundle.css:34166), bez
   něj by rámeček nešlo nakreslit jinak než přes !important. */
.btn.sapp-action--cancel {
    background-color: transparent;
    border: 1px solid var(--sapp-border);
    color: var(--sapp-ink-secondary);
}

.btn.sapp-action--cancel:hover,
.btn.sapp-action--cancel:focus,
.btn.sapp-action--cancel:active {
    background-color: var(--sapp-surface);
    color: var(--sapp-indigo);
}

/* ---- VÝZNAM: maže nebo nevratně ruší ------------------------------------ */
.btn.sapp-action--danger {
    background-color: var(--sapp-magenta);
    color: #fff;
}

.btn.sapp-action--danger:hover,
.btn.sapp-action--danger:focus,
.btn.sapp-action--danger:active {
    background-color: var(--sapp-magenta-dark);
    color: #fff;
}

/*
 * Ikonová podoba nebezpečné akce je TÓNOVANÁ, ne plná.
 *
 * Čtyřicetipixelový plný magenta čtverec v řádku tabulky přebíjí obsah, kvůli
 * kterému ten řádek existuje — a jen u mazání položek materiálu je takových
 * tlačítek šestnáct. Plná barva se rozsvítí až při doteku.
 */
.btn.btn-icon.sapp-action--danger {
    background-color: rgba(232, 23, 93, .12);
    color: var(--sapp-magenta);
}

.btn.btn-icon.sapp-action--danger:hover,
.btn.btn-icon.sapp-action--danger:focus,
.btn.btn-icon.sapp-action--danger:active {
    background-color: var(--sapp-magenta);
    color: #fff;
}

/*
 * Otevřený stav spouštěče nabídky.
 *
 * KTMenu dává třídu `show` PŘÍMO na prvek s data-kt-menu-trigger
 * (src/js/components/menu.js:505), ne na jeho rodiče — selektor `.show > .btn`
 * by minul a spouštěče filtru i nastavení focení by ztratily indikaci.
 */
.btn.sapp-action--secondary.show,
.show > .btn.sapp-action--secondary {
    background-color: var(--sapp-surface-hover);
}

/* ======================================================================
 * FORMULÁŘOVÁ POLE
 *
 * Pole musí být vidět jako pole. Metronic dává `form-control-solid` výplň
 * #F9F9F9, což je na bílé kartě poměr 1,05 a na šedém podkladu seznamu rovnou
 * 1,00 — změřeno. Z pole pak zbyde jen šedý text a ikona plovoucí v prázdnu;
 * na desktopu tak vypadá i vyhledávání a výběr pohledu v seznamu.
 *
 * Rámeček to neřeší a je zamítnutý: WCAG 1.4.11 chce na hranici 3:1, což proti
 * #F9F9F9 vychází až na #8C8C9E — odstín, který by vypadal dobře (#E0E0EA), dá
 * 1,25 a splyne stejně. Nese to tedy VÝPLŇ z palety: #E9EDF2 dává proti bílé
 * 1,18 a proti podkladu seznamu 1,12, což je vidět a přitom to nekřičí.
 * ====================================================================== */

.form-control.form-control-solid,
.form-select.form-select-solid {
    background-color: var(--sapp-surface);
}

.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus {
    background-color: var(--sapp-surface-hover);
}

/*
 * Dotykový cíl.
 *
 * Rozhoduje HUSTOTA ovládání, ne šířka okna — stejná podmínka jako v mobile.css.
 * Tablet mezi 768 a 1024 px má prst stejně tlustý jako telefon a podle šířky by
 * mu 44px cíl nikdy nevyšel.
 *
 * Cílí VÝHRADNĚ na .sapp-action. Pravidlo v @layout.latte míří na
 * `.btn-icon[class*="w-25px"]` kvůli 17 kolečkům u fotoaparátu — to jsou
 * <label> a <span>, ne .btn, takže by je přepis o cíl připravil. Zůstává obojí.
 */
@media (pointer: coarse), (max-width: 767.98px) {
    .btn.sapp-action {
        min-height: var(--sapp-touch);
    }

    /* Ikonová tlačítka jsou čtvercová: Metronic drží tvar přes width i height
       (style.bundle.css:34233), takže samotné min-height by z nich udělalo
       obdélník. */
    .btn.btn-icon.sapp-action {
        min-width: var(--sapp-touch);
    }

    /*
     * Typografie tlačítek v PIXELECH.
     *
     * Metronic počítá padding i písmo v rem a kořen je pod 768 px 12 px, takže
     * z toho vyjdou nesmyslná čísla: změřeno 13,2px písmo, padding 10,3 × 19 px
     * a rádius 5,7 px. Hlavní akce kroku je nejdůležitější prvek obrazovky
     * a 13 px na ni nestačí.
     *
     * 15 px odpovídá brandové škále (Button 14/500) s mobilním navýšením,
     * rádius 6 px je strop, který design system připouští (zakazuje pill).
     *
     * Padding se tu ZÁMĚRNĚ nenastavuje. Metronic ho drží selektorem
     * `.btn:not(.btn-outline)…` se specificitou 0,7,0 a přebít ho by šlo jen
     * přes !important nebo přes ID. Nevadí to: výšku určuje min-height 44 px
     * a obsah je uvnitř vycentrovaný, takže vodorovných 19 px stačí.
     */
    .btn.sapp-action {
        font-size: 15px;
        line-height: 1.3;
        border-radius: 6px;
    }

    /* Hlavní akce nese o stupeň větší váhu — je to jediné tlačítko na obrazovku
       a musí být poznat na první pohled, ne až po přečtení. */
    .btn.sapp-action--primary {
        font-weight: 600;
    }
}

/*
 * VÝJIMKA: akce v kartě seznamu zůstávají 40 px, ne 44.
 *
 * mobile.css:664 je drží na 40×40 přes !important a je to vědomé rozhodnutí
 * o hustotě — v kartě jsou dvě tlačítka pod sebou (flex-direction: column,
 * gap .375rem) a se 44 px by karta narostla o 9 px, tedy o jednu zakázku
 * na obrazovku míň.
 *
 * Pravidlo se tu záměrně NEPŘEBÍJÍ. Kdyby se to mělo změnit, patří to
 * k hustotě karty, ne k tlačítku.
 */

/* ---- ŠTÍTKY AKTIVNÍCH FILTRŮ -------------------------------------------
   Nad tabulkou stálo jen „Aplikován filtr“ — vědělo se, ŽE filtr je, ne
   který. Štítek nese jméno filtru a ruší se kliknutím na křížek; hodnoty
   čte z panelu, takže zdroj pravdy zůstává jeden (localStorage). */
/*
 * Velikosti písma v PIXELECH, ne v rem.
 *
 * Technikova část aplikace má kořenové písmo 12 px (admin 13), takže
 * .8125rem nebylo 13 px, ale 9,75 px — a knihovní fs-8/fs-9 v šabloně
 * dokonce 10,2 a 8,25 px. Změřeno na štítcích, byly nečitelné. Stejná
 * past je popsaná u karet v mobile.css.
 */
.sapp-filter-chip {
    background-color: var(--sapp-surface);
    color: var(--sapp-indigo);
    border: 0;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

/* Popisek „Zapnuto:" a odkaz „Zrušit vše" v témže pruhu. */
.sapp-filter-chips__label {
    font-size: 14px;
    color: var(--sapp-ink-secondary);
}

.sapp-filter-chips__clear {
    font-size: 14px;
    font-weight: 500;
}

.sapp-filter-chip i {
    font-size: 12px;
}

.sapp-filter-chip:hover,
.sapp-filter-chip:focus {
    background-color: var(--sapp-surface-hover);
    color: var(--sapp-indigo);
}

.sapp-filter-chip i {
    opacity: .55;
}

.sapp-filter-chip:hover i {
    opacity: 1;
}

/* Na dotyku musí jít křížek trefit — 44px je minimum z ADR-J. */
@media (hover: none) and (pointer: coarse) {
    .sapp-filter-chip {
        min-height: var(--sapp-touch);
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Počet zapnutých filtrů na tlačítku Filtry. */
.sapp-filter-count {
    background-color: var(--sapp-indigo);
    color: #fff;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* ---- OVLÁDÁNÍ TABULKY VPRAVO V LIŠTĚ -----------------------------------
   Hledání zůstává vlevo u nadpisu, filtry a sloupce jsou spolu vpravo —
   vlevo se dlouhá řada ovládacích prvků nevešla a tlačila na vyhledávání. */
.sapp-toolbar-open .columns > .keep-open > .btn,
.sapp-toolbar-waiting .columns > .keep-open > .btn,
.sapp-toolbar-closed .columns > .keep-open > .btn {
    background-color: var(--sapp-surface);
    color: var(--sapp-indigo);
    border: 0;
    border-radius: 6px;
    min-height: 32px;
}

.sapp-toolbar-open .columns > .keep-open > .btn:hover,
.sapp-toolbar-waiting .columns > .keep-open > .btn:hover,
.sapp-toolbar-closed .columns > .keep-open > .btn:hover {
    background-color: var(--sapp-surface-hover);
    color: var(--sapp-indigo);
}

/* Dlouhý seznam sloupců nesmí přerůst obrazovku. */
.sapp-toolbar-open .columns .dropdown-menu,
.sapp-toolbar-waiting .columns .dropdown-menu,
.sapp-toolbar-closed .columns .dropdown-menu {
    max-height: 320px;
    overflow-y: auto;
}

/* Na mobilu jsou z řádků karty — sloupce tam neřídí nic. */
@media (max-width: 767.98px) {
    .sapp-toolbar-open .columns,
    .sapp-toolbar-waiting .columns,
    .sapp-toolbar-closed .columns {
        display: none;
    }
}

/* Nadpis v menu sloupců — stejné odsazení jako hlavička panelu Filtry. */
.sapp-columns-title {
    padding: 1.25rem 1.75rem .75rem;
}

.sapp-toolbar-open .columns .dropdown-menu,
.sapp-toolbar-waiting .columns .dropdown-menu,
.sapp-toolbar-closed .columns .dropdown-menu {
    min-width: 260px;
    padding-bottom: .75rem;
}

.sapp-toolbar-open .columns .dropdown-item,
.sapp-toolbar-waiting .columns .dropdown-item,
.sapp-toolbar-closed .columns .dropdown-item {
    padding: .5rem 1.75rem;
}

/* ---- VYHLEDÁVACÍ POLE ---------------------------------------------------
   form-control-solid dává poli šedé pozadí, kterým splývalo s okolím a text
   v něm byl špatně čitelný. Bílé pole s jemným rámečkem se čte lépe a drží
   stejné tvarosloví jako ovládání vedle něj.

   Platí na VŠECH šířkách. Dřív to byla jen desktopová výjimka, protože na
   mobilu se pole sbalovalo do lupy — právě kvůli tomu, že šedé na šedém
   nebylo vidět (kontrast 1,00). Bílá plocha ten důvod ruší, takže lišta
   filtrace může na mobilu držet celou šířku. Rozměr a rádius drží dole
   společný blok, aby se obě šířky nerozešly. */
.sapp-search .form-control,
.sapp-search .form-control-solid {
    background-color: #fff;
    border: 1px solid var(--sapp-border);
    color: var(--sapp-indigo);
    border-radius: 10px;
    min-height: 44px;
}

.sapp-search .form-control:focus,
.sapp-search .form-control-solid:focus {
    background-color: #fff;
    border-color: var(--sapp-ink-secondary);
}

.sapp-search .form-control::placeholder {
    color: var(--sapp-ink-secondary);
    opacity: 1;
}

/* Tři tečky mluví samy za sebe — knihovní šipka je navíc. */
.sapp-toolbar-open .columns .keep-open > .btn::after,
.sapp-toolbar-waiting .columns .keep-open > .btn::after,
.sapp-toolbar-closed .columns .keep-open > .btn::after {
    display: none;
}

/* ---- JEDNOTNÝ ROZMĚR OVLÁDÁNÍ V LIŠTĚ ----------------------------------
   Filtry měly 36 px, sloupce 44 px a hledání 44 px — tři prvky vedle sebe,
   každý jinak vysoký. Sjednoceno na výšku vyhledávacího pole. */
@media (min-width: 768px) {
    .sapp-toolbar-open > .btn,
    .sapp-toolbar-waiting > .btn,
    .sapp-toolbar-closed > .btn,
    .sapp-toolbar-open button[aria-label="Filtry"],
    .sapp-toolbar-waiting button[aria-label="Filtry"],
    .sapp-toolbar-closed button[aria-label="Filtry"],
    .sapp-toolbar-open .columns .keep-open > .btn,
    .sapp-toolbar-waiting .columns .keep-open > .btn,
    .sapp-toolbar-closed .columns .keep-open > .btn {
        min-height: 44px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
    }
}

/* Zaškrtávátka v menu sloupců sedí na řádek stejně jako ve filtrech. */
.sapp-toolbar-open .columns .dropdown-item,
.sapp-toolbar-waiting .columns .dropdown-item,
.sapp-toolbar-closed .columns .dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.sapp-toolbar-open .columns .dropdown-item .form-check-input,
.sapp-toolbar-waiting .columns .dropdown-item .form-check-input,
.sapp-toolbar-closed .columns .dropdown-item .form-check-input {
    margin: 0;
    flex-shrink: 0;
}