/*
 * 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;
}

/* ---- PANEL KROKŮ V DETAILU ---------------------------------------------
   Základ panelu je v serviceapp/resources/src/sass/components/_progress.scss
   (.aside-panel) a jde do style.bundle.css. Ten se ale překládá ručně přes
   gulp — CI ho nestaví — takže výška se opravuje tady, v souboru, který se
   načítá až za bundlem.

   `max-height: 600px` je pevná míra z doby, kdy měl stepper méně kroků.
   Změřeno na sedmi krocích: obsah 746 px proti stropu 600, takže poslední
   krok („Souhrn / Podpis klienta") nebyl vidět a menu působilo useknutě.
   Strop se odvíjí od okna; 130 px je horní lišta (sticky top 95) plus mezera.

   Jen od lg výš: pod 992 px je z panelu výsuvná zásuvka přes celou výšku
   a tu řídí vlastní media query v _progress.scss. */
@media (min-width: 992px) {
    .aside-panel {
        /* Drží se pod horní lištou, ale zůstává flexovou položkou — proto
           sticky, ne fixed. Rodič #kt_content_container má align-items-start,
           bez kterého by se položka roztáhla na výšku řádku a sticky by
           nemělo kam posouvat. */
        position: sticky;
        /* Přirozená pozice panelu na začátku stránky je 86 px (spodek pevné
           hlavičky je na 50). Se stickym `top` větším než ta hodnota by se
           panel hned na začátku posunul o 9 px dolů. */
        top: 86px;
        align-self: flex-start;
        max-height: calc(100vh - 130px);
        /* Panel je flexová položka a smršťoval se podle zbylého místa —
           změřeno 265 px na 1024, 282 na 1280, 314 na 1440, ačkoli CSS říká
           320. KTSticky ale při připnutí nasadí pevnou šířku, takže se menu
           při odscrollování pokaždé skoklo na jinou míru. Nesmršťovat: pak
           je 320 px pořád a připnutí se neprojeví. */
        flex: 0 0 320px;
    }
}

/* Nízká okna: sedm kroků se do panelu nevejde ani s pružným stropem.
   Změřeno na 1024 × 768 — obsah 746 px proti 638 dostupným. Krok měří 87 px,
   z toho 40 je spojovací čára mezi ikonami; na 20 px je pořád čitelná a šest
   mezer ušetří 120 px. Odsazení panelu z 29,6 na 18 px přidá dalších 23.
   Nad 860 px výšky se nic nemění — tam je místa dost. */
@media (min-width: 992px) and (max-height: 860px) {
    .aside-panel {
        padding: 18px;
    }

    /* !important kvůli knihovní utilitě h-40px, která ji sama nese. */
    .aside-panel .stepper-nav .stepper-line {
        height: 20px !important;
    }
}

/* ---- POLOŽKA OZNAČENÁ K ODEBRÁNÍ ---------------------------------------
   Uložená položka se nemaže hned: řádek musí zůstat ve formuláři, aby se
   odeslal s prázdným množstvím — teprve to ji na serveru smaže. Do odeslání
   je to tedy vratné a řádek má vypadat jako škrtnutý, ne jako zmizelý. */
/* !important: ki-duotone si display nastavuje samo, takže bez toho svítily
   obě ikony naráz. */
.sapp-ikona-vratit {
    display: none !important;
}

tr.sapp-row-removed > td {
    opacity: .4;
}

tr.sapp-row-removed > td:last-child {
    opacity: 1;
}

tr.sapp-row-removed .form-control,
tr.sapp-row-removed .form-select,
tr.sapp-row-removed .sapp-summary__name,
tr.sapp-row-removed .sapp-summary__desc {
    text-decoration: line-through;
}

tr.sapp-row-removed .sapp-ikona-odebrat {
    display: none !important;
}

tr.sapp-row-removed .sapp-ikona-vratit {
    display: inline-flex !important;
}

/* Vrácení zpět není destruktivní akce, tak ani nemá být červené.

   Včetně :hover/:focus/:active — po kliknutí si odkaz drží fokus, takže bez
   nich zůstalo tlačítko svítit sytou magentou. !important kvůli tomu, že
   Metronic má na .btn:not(.btn-outline)… specificitu 0,7,0. */
tr.sapp-row-removed .deleteLine,
tr.sapp-row-removed .deleteLine:hover,
tr.sapp-row-removed .deleteLine:focus,
tr.sapp-row-removed .deleteLine:active {
    background-color: var(--sapp-surface) !important;
    color: var(--sapp-indigo) !important;
}

/* Akce v tabulce materiálu má být stejně vysoká jako pole, mezi kterými stojí.
   btn-sm jí dával 35 px proti 44px poli — o devět míň, což bylo vidět. */
#materialTable .deleteLine {
    width: var(--sapp-touch);
    height: var(--sapp-touch);
    padding: 0;
}

/* ---- ČITELNOST ZTLUMENÝCH TEXTŮ ----------------------------------------
   Knihovní odstíny jsou pro technika v terénu moc světlé. Změřeno proti
   podkladu, na kterém skutečně leží:

     .form-check-label   #A1A5B7   2,45 : 1     popisky zaškrtávátek ve filtrech
     .text-muted         #A1A5B7   2,32 : 1     hlavičky tabulek, podnadpisy
     .text-gray-400      #B5B5C3   1,84 : 1     „Ke dni", počty, stavové popisky

   WCAG AA chce u běžného textu 4,5 : 1, takže to nebyla estetika — text
   vypadal jako zakázané pole. --sapp-ink-secondary (#6B6B8D) dá proti bílé
   5,9 : 1 a proti světlým podkladům dlaždic pořád přes 5 : 1.

   Ověřeno, že tyhle třídy v technikově části na tmavém podkladu nejsou
   (jediné bílé na tmavém je .text-light na dlaždici Obnovit data, ta se
   nemění). !important kvůli tomu, že knihovní utility ho nesou taky.
   Administrace tenhle soubor nenačítá, ta potřebuje vlastní průchod. */
.text-muted,
.text-gray-400,
.text-gray-500,
.form-check-label {
    color: var(--sapp-ink-secondary) !important;
}

/* ---- PATKA KROKU PŘIPNUTÁ DOLE -----------------------------------------
   Na dotykových a úzkých displejích ji drží mobile.css přes position: fixed
   přes celou šířku. Tady by to nešlo: přes celou šířku by přejela i menu
   kroků vlevo. sticky zůstává v toku karty, takže si drží její šířku samo
   a nic se nepočítá. Když je karta kratší než okno, patka prostě dosedne
   na její konec. */
@media (min-width: 992px) {
    /* Bez `.card >`: krok Vlastní pole nemá kartu, jeho patka visí rovnou
       v .container. Stejný záběr jako v mobile.css, ať se kroky nerozcházejí. */
    #kt_content .card-footer {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: #fff;
        /* Vlasová linka místo stínu. Připnutá patka potřebuje oddělit od řádků,
           které pod ní projíždějí, ale stín shora patří spodní systémové liště
           na telefonu — uvnitř karty na desktopu působí jako chyba. */
        box-shadow: none;
        border-top: 1px solid var(--sapp-border);
    }

    [data-bs-theme="dark"] #kt_content .card-footer {
        background: #1e1e2d;
        border-top-color: rgba(255, 255, 255, .1);
    }
}

/* ---- ZAOBLENÍ HLAVIČKY A PATKY KARTY -----------------------------------
   Karta má rádius 8,125 px, ale hlavička i patka měly 0 a rohy z ní trčely.
   Metronic je zaobluje přes `.card > .card-header:first-child`, jenže prvním
   dítětem karty detailu je skrytá mobilní lišta (.card-header.sapp-bar,
   na desktopu display: none) — pravidlo tak na viditelnou hlavičku nikdy
   nesedne. Proto natvrdo, na konkrétní prvky. */
#kt_content .card > .card-header.sapp-block {
    border-top-left-radius: var(--bs-card-inner-border-radius, 7.125px);
    border-top-right-radius: var(--bs-card-inner-border-radius, 7.125px);
}

/* Patka jen od lg výš. Na telefonu je připnutá přes celou šířku displeje
   (mobile.css), takže by zaoblené rohy jen vykously kraje obrazovky. */
@media (min-width: 992px) {
    #kt_content .card > .card-footer {
        border-bottom-left-radius: var(--bs-card-inner-border-radius, 7.125px);
        border-bottom-right-radius: var(--bs-card-inner-border-radius, 7.125px);
    }
}

/* ======================================================================
 * KROK VLASTNÍ POLE
 *
 * Formulář skládá administrace (počet, typy i skupiny se liší instanci od
 * instance), takže musí držet rytmus sám od sebe. Změřený stav před úpravou
 * na 1440 px: zaškrtávátko začínalo na y=310, sousední pole v téže řádce na
 * y=333 — 23 px vedle, protože boolean neměl popisek nad sebou. Zaškrtávátko
 * samo měřilo 23 px (na telefonu 21) proti 44px poli, rámeček skupiny byl
 * #F4F4F4 na bílé (poměr 1,03, tedy neviditelný) a odkaz na Raynet padal
 * na 11,3 px.
 * ====================================================================== */

/* --- Skupina polí (fieldset) --- */
.sapp-cf-group {
    border: 1px solid var(--sapp-border);
    border-radius: 8px;
    /* Bílá, oddělení nese rámeček. Tónovaná plocha by spolkla zaškrtávátko,
       které je v celé aplikaci šedé bez rámečku. */
    background-color: #fff;
    padding: 20px;
    margin-bottom: 16px;
}

.sapp-cf-group:last-of-type {
    margin-bottom: 0;
}

/* legend je ve výchozím stavu blokový přes celou šířku a 19,5 px velký —
   větší než nadpis kroku. Srovnáno do stupnice aplikace. */
.sapp-cf-group__title {
    /* Plovoucí legendu prohlížeč vykreslí jako běžný blok uvnitř rámečku
       místo do zářezu v horní hraně. Zářez by v obarvené skupině prosvítal
       bílou kartou. <legend> zůstává kvůli tomu, že skupinu pojmenovává. */
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sapp-indigo);
}

/* --- Jedno pole --- */
.sapp-cf-item {
    display: flex;
    flex-direction: column;
}

.sapp-cf-item .form-label {
    /* Pevná výška řádku popisku. Bez ní se pole s jednořádkovým a
       dvouřádkovým popiskem v téže mřížce rozjedou. */
    min-height: 22px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sapp-indigo);
}

/* Zaškrtávátko je taky ovládací prvek, takže má mít stejný dotykový cíl
   jako pole vedle něj. */
.sapp-cf-item .form-check {
    min-height: var(--sapp-touch);
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: 0;
}

/* Zaškrtávátko musí být vidět. form-check-solid počítá s bílým okolím:
   výplň #F4F4F4 má proti podkladu skupiny poměr 1,04 a rámeček žádný není,
   takže prázdné pole na obrazovce prostě nebylo. */
/* Zaškrtávátko zůstává knihovní — stejné jako v checklistu a ve filtrech
   (20 × 20, výplň #F4F4F4, bez rámečku, rádius 6 px). Nastavuje se tu jen to,
   co plyne z rozvržení buňky. Kvůli tomu má skupina bílý podklad: na tónovaném
   by měla výplň zaškrtávátka poměr 1,04 a prázdné pole by nebylo vidět. */
.sapp-cf-item .form-check .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.sapp-cf-item .form-check-label {
    font-size: 14px;
    color: var(--sapp-indigo);
}

/* Povinné pole pozná technik podle hvězdičky, ta musí být vidět. */
.sapp-cf-item .form-label .text-danger {
    color: var(--sapp-magenta-dark) !important;
    font-weight: 700;
}

/* --- Hodnota, kterou má Raynet ---
   Referenční údaj, ne hodnota pole: patří pod ovládací prvek, tišeji, ale
   pořád čitelně. Drží se dole, aby řádky s různě vysokými poli končily
   zároveň. */
.sapp-cf-item__raynet {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--sapp-border);
    font-size: 12px;
    line-height: 1.4;
    color: var(--sapp-ink-secondary);
    margin-top: auto;
}

.sapp-cf-item__raynet-popis {
    font-weight: 600;
}

.sapp-cf-item__raynet-hodnota {
    color: var(--sapp-indigo);
}

@media (max-width: 767.98px) {
    .sapp-cf-group {
        padding: 16px;
    }

    /* Pole a popisky drží stejnou velikost jako ve zbytku aplikace na mobilu. */
    .sapp-cf-item .form-label {
        font-size: 14px;
    }
}

/* ---- LOGO V HLAVIČCE ----------------------------------------------------
   Utilita h-lg-60px dávala logu 60 px, jenže hlavička má na desktopu 50.
   Změřeno: logo 379 × 60 na y = −5 (1440 px) a y = −19 (1024 px), tedy
   přetékalo nad horní hranu a na laptopu bylo uříznuté mimo obrazovku.
   Na dotykových šířkách je hlavička 65 px a logo 35 px na y = 15, tam je
   v pořádku — proto jen od lg výš.

   !important kvůli tomu, že knihovní výškové utility ho nesou taky. */
@media (min-width: 992px) {
    #kt_header .logo-default,
    #kt_header .logo-sticky,
    #kt_header a > img[src*="logo"] {
        height: 32px !important;
        width: auto !important;
    }
}