/*
 * Vnitřek aplikace — postranní panel, horní lišta, hlavní strana.
 *
 * Postaveno podle screenu `zadani/screeny/02-dashboard.png`.
 * Rozměry a barvy jsou z něj odečtené, ne odhadnuté.
 */

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../font/figtree-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../font/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Azbuka (ukrajinština). Figtree ji nemá, proto pod stejným jménem rodiny
 * PT Sans jen pro rozsah azbuky — latinka zůstává Figtree a prohlížeč
 * písma skládá znak po znaku. PT Sans má dva řezy, váhy se dělí na půl. */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 550;
    font-display: swap;
    src: url('../font/ptsans-cyrillic-400.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 551 900;
    font-display: swap;
    src: url('../font/ptsans-cyrillic-700.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
    --panel-sirka: 246px;
    --pozadi: #F7F6F9;
    --tmava: #0B1E3B;       /* nadpisy */
    --telo: #5B6983;        /* běžný text */
    --sedy: #8A93A5;        /* popisky */
    --modra: #0C56B5;       /* ikony, odkazy */
    --lem: #ECEEF4;
    --lem-karta: #EAEDF3;
    --zelena: #0F9D6E;
    /* Zluta v palete dosud nebyla. Svetla vypln a plna barva zvlast, aby na
     * plne drzel bily text kontrast (vyskakovaci oznameni „pozor"). */
    --zluta: #C98A00;
    --zluta-plna: #A87400;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--pozadi);
    color: var(--telo);
    font: 400 15px/1.5 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

.preskocit {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 20;
    padding: 10px 16px;
    background: #fff;
    border-radius: 0 0 8px 0;
    font-weight: 700;
}
.preskocit:focus { left: 0; }

/* --------------------------------------------------------------- rozvrh -- */
.rozvrh {
    display: flex;
    min-height: 100vh;
}
.hlavni {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.obsah-aplikace {
    flex: 1;
    padding: 0 32px 40px 38px;
}

/* ------------------------------------------------------- postranní panel -- */
.panel {
    flex: none;
    width: var(--panel-sirka);
    display: flex;
    flex-direction: column;
    color: #fff;
    /*
     * PANEL SE NEROZTAHUJE S OBSAHEM. Jako polozka flexoveho radku by se
     * natahl na vysku CELE stranky, takze na dlouhem seznamu rizik merilo
     * pozadi klidne tri obrazovky a prechod se rozmazal pres neco, co nikdo
     * nevidi najednou. `align-self: flex-start` to natahovani vypne.
     *
     * `sticky` misto `fixed`: fixed by panel vytrhl z toku a hlavni sloupec
     * by se roztahl pod nej. Takhle si drzi sve misto v radku a jen zustava
     * prilepeny nahore, kdyz se stranka roluje.
     *
     * `dvh` kvuli mobilnim prohlizecum, kde se lista schovava a `vh` pak
     * ukazuje na vetsi plochu, nez je doopravdy videt; `vh` je zaloha
     * pro starsi prohlizece.
     */
    align-self: flex-start;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    /* Na nizke obrazovce se osm kroku builderu nemusi vejit — at je panel
     * dorolovatelny sam v sobe misto aby pretekl. */
    overflow-y: auto;
    /* Přechod nejde přesně shora dolů — ve screenu se barva mění i zleva
     * doprava. Úhel 147° vyšel z hledání: pro každý kandidát se spočítalo,
     * jak málo se barva liší uvnitř úzkého pásu kolmého na osu, a 147°
     * mělo rozptyl nejmenší. Zastávky jsou mediány barvy podél té osy. */
    background: linear-gradient(147deg,
        #0C1D54 0%, #0C215C 8%, #0A2B6E 16%, #083A86 25%, #064597 34%,
        #05549C 43%, #056698 52%, #037895 61%, #028C90 70%, #029D8A 79%,
        #02AD85 88%, #02BA80 95%, #02BE7E 100%);
}

/* Ve flexovem sloupci se smi polozky smrsknout, kdyz se obsah nevejde —
 * na nizkem okne se pak nazev zakazky nalepil na odkaz „Dashboard".
 * Panel se ma misto toho rolovat, takze zadna polozka neshrinkuje. */
.panel > * { flex-shrink: 0; }

.panel-znacka {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 23px 0 0 23px;
}
.panel-znacka img { width: 46px; height: 45px; object-fit: contain; }

/* Na tmavém panelu se používá bílá varianta značky přímo na pozadí.
 * Barevná sem nepatří: má tmavě modrý konec přechodu, který by na modré
 * zanikl, a podkládat ji dlaždicí vypadá špatně. */
.panel-znacka--panel { gap: 11px; padding: 17px 0 0 18px; }
.panel-znacka--panel img { width: 40px; height: 35px; }
.panel-znacka--panel .znacka-tld { color: #3FCB78; }
.panel-znacka--panel .panel-znacka-nazev {
    font-size: 17px;
    letter-spacing: -.01em;
    text-transform: none;
    color: #fff;
}
.panel-znacka--panel .panel-znacka-popis { margin-top: 2px; font-size: 9.5px; letter-spacing: .1em; }

.panel-znacka-nazev {
    font-size: 17px;
    letter-spacing: -.01em;
    text-transform: none;
    color: #fff;
}
.panel-znacka--dlazdice .panel-znacka-popis { margin-top: 2px; font-size: 9.5px; letter-spacing: .1em; }
.panel-znacka-nazev {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.05;
}
.panel-znacka-popis {
    display: block;
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
}

.panel-nabidka {
    margin-top: 39px;
    padding: 0 13px;
    display: grid;
    gap: 5px;
}
/* Hamburger je jen pro telefon; zapíná ho `@media (max-width: 620px)` níž.
 * Schování musí stát TADY, před tím pravidlem — obě mají stejnou
 * specificitu, takže rozhoduje pořadí. */
.panel-hamburger { display: none; flex: none; }
.panel-polozka {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    height: 45px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
}
.panel-polozka svg { width: 21px; height: 21px; flex: none; }
.panel-polozka:hover { background: rgba(255, 255, 255, .1); }
.panel-polozka--zde {
    background: #fff;
    color: var(--tmava);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(3, 20, 60, .18);
}
.panel-polozka--zde:hover { background: #fff; }
.panel-polozka--zde svg { color: var(--modra); }
.panel-polozka--zde span { font-size: 14.5px; }

.panel-nabidka hr {
    margin: 11px 14px 9px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.panel-weby {
    margin-top: auto;
    padding: 0 27px 37px;
    font-size: 14.4px;
}
.panel-weby-nadpis {
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}
.panel-weby a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
    color: rgba(255, 255, 255, .93);
}
.panel-weby a:hover { color: #fff; text-decoration: underline; }
.panel-weby svg { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------------------------ horní lišta */
.lista {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 32px 20px 38px;
}
.lista-nazev { margin-right: auto; min-width: 0; }
.lista-nazev h1 {
    margin: 0;
    font-size: 28.6px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tmava);
}
.lista-nazev p {
    margin: 1px 0 0;
    font-size: 15.5px;
    color: var(--telo);
}

.hledani {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 9px 0 17px;
    border: 1px solid #E7E9F1;
    border-radius: 22px;
    background: #F4F5FB;
    color: var(--sedy);
}
.hledani svg { width: 19px; height: 19px; flex: none; }
.hledani input {
    width: 118px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--tmava);
    outline: none;
}
.hledani input::placeholder { color: var(--sedy); }
.hledani kbd {
    flex: none;
    padding: 4px 8px;
    border: 1px solid #E1E4EE;
    border-radius: 7px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #5B6983;
}

/*
 * Účet je stejná pilulka jako kalendář a jazyk vedle něj — tvar, výška
 * i lem se berou ze společného pravidla dole. Předtím to byl holý text
 * s portrétem mezi dvěma orámovanými tlačítky a v liště to viselo.
 *
 * Portrét stojí VLEVO, na místě, kde mají sousední pilulky ikonu. Tím
 * všechny tři začínají značkou a končí textem; portrét vpravo by z účtu
 * dělal výjimku, která se ničím neomlouvá.
 */
.lista-uzivatel {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--tmava);
}
/* Menší než dřív (34 px): do pilulky vysoké 38 px se větší portrét nevejde,
 * aniž by se dotýkal lemu. */
.lista-uzivatel img,
.lista-uzivatel i {
    width: 30px;
    height: 30px;
    margin-left: -6px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--lem);
}
.lista-uzivatel i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--modra);
}

/* ------------------------------------------- rozbalovací nabídky v liště -- */
/* Nabídka účtu a přepínač jazyka. Obojí je `<details>`, takže rozbalování
 * obstará prohlížeč a funguje i bez skriptu; `aplikace.js` jen dovírá.
 *
 * Trojúhelníček `<summary>` musí pryč DVĚMA zápisy: Chrome a Safari ho kreslí
 * přes `::-webkit-details-marker`, ostatní přes `list-style`. Jeden bez
 * druhého nestačí. */
.nabidka { position: relative; }
.nabidka > summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
}
.nabidka > summary::-webkit-details-marker { display: none; }
/* Obrys na `<summary>` z klávesnice. Prohlížeč ho dá sám, ale kolem celého
 * řádku včetně panelu — na kulaté spoušti to vypadá rozbitě. */
.nabidka > summary:focus-visible {
    outline: 2px solid var(--modra);
    outline-offset: 3px;
    border-radius: 20px;
}
.nabidka-sipka {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--sedy);
    transition: transform .12s;
}
.nabidka[open] .nabidka-sipka { transform: rotate(180deg); }
/* Špička sedí na konci pilulky, o kousek blíž textu než k lemu. */
.lista-uzivatel .nabidka-sipka { margin-right: -4px; }

/* Vysunutý panel. `z-index` nad obsah stránky: pod ním jsou karty s vlastním
 * pozadím, kterými by nabídka jinak prosvítala. */
.nabidka-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    width: 246px;
    padding: 7px;
    border: 1px solid var(--lem-karta);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(4, 20, 55, .16);
}
.nabidka-panel--jazyk { width: 238px; }
.nabidka-panel hr {
    margin: 6px 4px;
    border: 0;
    border-top: 1px solid var(--lem);
}

.nabidka-kdo {
    margin: 0;
    padding: 8px 10px 9px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nabidka-kdo b {
    font-size: 14px;
    font-weight: 800;
    color: var(--tmava);
}
/* E-mail se nezalamuje, ale ani nepřetéká — dlouhá adresa by panel roztáhla. */
.nabidka-kdo em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--sedy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nabidka-nadhlavi {
    margin: 0;
    padding: 7px 10px 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sedy);
}

/* Jeden vzhled řádku pro `<a>`, `<button>` i `<span>` — nabídka míchá odkaz,
 * odesílací tlačítko (odhlášení, volba jazyka) i nedostupnou položku. */
.nabidka-polozka {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    color: var(--telo);
    cursor: pointer;
}
.nabidka-polozka svg { width: 18px; height: 18px; flex: none; color: var(--modra); }
.nabidka-polozka span { flex: 1; min-width: 0; }
.nabidka-polozka:hover { background: #F4F6FB; color: var(--tmava); }
.nabidka-polozka--zde { color: var(--tmava); font-weight: 800; }
.nabidka-fajfka { width: 15px !important; height: 15px !important; color: var(--zelena) !important; }

/* Odhlášení červeně a dole. Je to jediná položka, po které člověk ze stránky
 * odejde — barva to říká dřív, než si přečte text. */
.nabidka-polozka--odchod { color: #C0392B; }
.nabidka-polozka--odchod svg { color: #C0392B; }
.nabidka-polozka--odchod:hover { background: #FDF1F0; color: #A53125; }

/* Jazyk, který ještě nemá slovník. Nedá se stisknout, tak ani nemá vypadat
 * jako tlačítko — jinak by se čekalo, že po kliknutí něco udělá. */
.nabidka-polozka--chysta { cursor: default; color: var(--sedy); }
.nabidka-polozka--chysta:hover { background: none; color: var(--sedy); }
.nabidka-polozka--chysta em {
    font-style: normal;
    font-size: 11.5px;
    color: #A7AEBE;
}


/* Vlajka jazyka (`jazykVlajka()`) — v pilulce lišty, v nabídce i v profilu.
 * Tenký lem, ať bílý pruh nesplyne s bílým podkladem. */
svg.vlajka {
    width: 21px;
    height: 14px;
    flex: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(11, 30, 59, .14);
}
.lista-jazyk-spoust svg.vlajka { width: 21px; height: 14px; }
.nabidka-polozka svg.vlajka { width: 21px; height: 14px; }
.nabidka-polozka--chysta svg.vlajka { opacity: .45; }

/* ------------------------------------------------------------ kalendář ---- */
/* Panel je širší než ostatní nabídky — sedm sloupců mřížky se do 246 px
 * nevejde tak, aby dvojciferný den nesahal na sousední. */
.nabidka-panel--kalendar { width: 306px; padding: 12px; }

.kalendar-hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 2px 10px;
}
.kalendar-hlava b {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--tmava);
}
.kalendar-sipka {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 8px;
    color: var(--telo);
}
.kalendar-sipka svg { width: 17px; height: 17px; }
.kalendar-sipka:hover { background: #F4F6FB; color: var(--tmava); }

/* Mřížka i záhlaví mají TÝŽ sedmisloupcový rozvrh. Kdyby se řešily zvlášť,
 * rozešly by se při první změně šířky a zkratka dne by přestala stát nad
 * svým sloupcem. */
.kalendar-tyden,
.kalendar-mrizka {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.kalendar-tyden span {
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--sedy);
}

.kalendar-den {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--telo);
}
/* Den bez události není odkaz, takže ani nesmí reagovat na najetí myší —
 * jinak by vypadal jako něco, na co se dá kliknout. */
a.kalendar-den:hover { background: #F4F6FB; color: var(--tmava); }

/* Dnešek: jen orámování. Výplň patří vybranému dni, a kdyby ji měl i dnešek,
 * nešly by od sebe rozeznat. */
.kalendar-den--dnes {
    box-shadow: inset 0 0 0 1.5px #C9D6EC;
    color: var(--tmava);
}
/* Den s termínem: tečka pod číslem. Nese ji `::after`, aby se číslo
 * nepřestalo středit. */
.kalendar-den--ma {
    position: relative;
    font-weight: 800;
    color: var(--modra);
}
.kalendar-den--ma::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--modra);
}
.kalendar-den--vybrany,
a.kalendar-den--vybrany:hover {
    background: var(--modra);
    color: #fff;
    box-shadow: none;
}
.kalendar-den--vybrany::after { background: #fff; }

.kalendar-vypis {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--lem);
}
.kalendar-nadhlavi {
    margin: 0 0 6px;
    padding: 0 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sedy);
}
.kalendar-nic {
    margin: 0;
    padding: 2px 2px 4px;
    font-size: 13px;
    color: var(--sedy);
}

.kalendar-seznam {
    /* Výpis se roluje uvnitř panelu. Deset termínů na jeden den by jinak
     * panel natáhlo přes celou stránku a mřížka by vyjela z obrazu. */
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 188px;
    overflow-y: auto;
}
.kalendar-seznam a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    border-radius: 9px;
}
.kalendar-seznam a:hover { background: #F4F6FB; }
.kalendar-seznam span { min-width: 0; }
/* Znění opatření bývá celá věta. Dva řádky a pak výpustka: na jeden řádek
 * se z něj pozná málo, a nezkrácené by jedna položka zabrala celý výpis. */
.kalendar-seznam b {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tmava);
}
/* Druhý řádek se nezalamuje: v úzkém panelu by z jednoho termínu byly tři
 * řádky a seznam by přestal být přehledný. */
.kalendar-seznam em {
    display: block;
    margin-top: 1px;
    font-style: normal;
    font-size: 12px;
    color: var(--sedy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Datum uvnitř druhého řádku. Je to `<span>`, ne `<b>`: `.kalendar-seznam b`
 * o kus výš je zalomený název položky s výpustkou přes dva řádky a datum
 * by se tím pravidlem strhlo na vlastní řádek. */
.kalendar-seznam .kalendar-kdy { font-weight: 800; color: var(--telo); }

.kalendar-znak {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
}
.kalendar-znak svg { width: 15px; height: 15px; }
/* Dvě barvy pro dva druhy termínu: přezkoumání je o celé zakázce, opatření
 * o jedné položce plánu. Bez rozlišení by se v seznamu spletly. */
.kalendar-znak--prezkoumani { background: #EAF1FC; color: var(--modra); }
.kalendar-znak--opatreni    { background: #E7F6F0; color: var(--zelena); }

/* Tri pilulky v liste — kalendar, ucet a jazyk. Jeden tvar pro vsechny tri:
 * vyska jako u hledani, at lista drzi jednu linku, a stejny lem, at zadna
 * z nich necni. */
.lista-kalendar-spoust,
.lista-uzivatel,
.lista-jazyk-spoust {
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #E1E4EE;
    border-radius: 22px;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    /* Text pilulky se NIKDY nezalamuje. Dlouhé jméno se na užší liště
     * lámalo na dva řádky a pilulka se roztáhla přes sousední — zalomená
     * pilulka vypadá jako rozbitá sazba, ne jako těsno. */
    white-space: nowrap;
    color: var(--telo);
}
.lista-kalendar-spoust:hover,
.lista-uzivatel:hover,
.lista-jazyk-spoust:hover { border-color: #C9D0E0; }
.lista-kalendar-spoust svg,
.lista-jazyk-spoust svg { width: 19px; height: 19px; flex: none; color: var(--sedy); }
/* Datum se na uzke listy schova a zustane sama ikona — je to nejdelsi
 * text v liste a jmeno uzivatele se schovava uz driv. */
@media (max-width: 1180px) {
    /* Nejdřív ustoupí to nejdelší: datum u kalendáře a jméno u účtu.
     * Obojí je popisek k ikoně, která zůstává — kdo tam co má, pozná se
     * i podle ní. Dřív jméno mizelo až na 620 px a lišta mezitím tlačila
     * nadpis stránky do dvou řádků. */
    .lista-kalendar-spoust b,
    .lista-uzivatel span { display: none; }
    .lista-kalendar-spoust { padding: 0 12px; }
}

/* `inline-flex` uz v zakladu, ne az v jednotlivych mistech. Tlacitko ma pevnou
 * vysku, a kdyz je to `<a>` mimo flexovy rodic, text se v ni nestreduje a
 * vyleze pod ramecek — u `<button>` to prohlizec sredi sam, takze se to
 * pozna az na odkazu. Tatáz past uz jednou byla u `.tlacitko-hlavni`. */
.tlacitko-lem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Ať se ikona nelepí na text, když ji tlačítko má. Místa, která si
     * rozestup nastavovala sama, si ho drží dál. */
    gap: 9px;
    height: 38px;
    padding: 0 17px;
    border: 1px solid #E1E4EE;
    border-radius: 8px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tmava);
    cursor: pointer;
}
.tlacitko-lem:hover { border-color: #C9D0E0; }

/* --------------------------------------------------------------- rada ---- */
.rada {
    border: 1px solid #DEE8F6;
    border-radius: 10px;
    background: #F3F7FD;
}
.rada summary {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 49px;
    padding: 0 18px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #12508F;
}
.rada summary::-webkit-details-marker { display: none; }
.rada summary i {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--modra);
    color: #fff;
}
.rada summary i svg { width: 16px; height: 16px; }
.rada-text {
    padding: 0 18px 18px 58px;
    font-size: 14.5px;
    line-height: 1.6;
}
.rada-text p { margin: 0; }

/* ------------------------------------------------------------ dlaždice --- */
.dlazdice {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 201px;
    gap: 20px;
    margin-top: 23px;
}
.dlazdice-polozka {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 90px;
    padding: 0 15px;
    border: 1px solid var(--lem-karta);
    border-radius: 12px;
    background: #fff;
}
.dlazdice-znak {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 46px;
    border-radius: 12px;
    background: #EEF3FC;
    color: var(--modra);
}
.dlazdice-znak svg { width: 21px; height: 21px; }
.dlazdice-polozka b {
    display: block;
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
    color: var(--tmava);
}
.dlazdice-polozka em {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: 13px;
    color: var(--telo);
}

.tlacitko-nova {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(105deg, #05489F 0%, #0B7C97 55%, #07AC7B 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tlacitko-nova:hover { filter: brightness(1.07); }

/* --------------------------------------------------------------- sloupce - */
.sloupce {
    display: grid;
    /* POMER, ne pevne sirky. Ve screenu (1672 px) vychazi sloupce na 784
     * a 548 px, ale zapsat to takhle znamena, ze na sirsim displeji panely
     * zustanou stat a vpravo zeje diru — zatimco dlazdice nad nimi, ktere
     * jsou v `1fr`, se roztahnou. Presne to se stalo. `fr` drzi pomer
     * a sirku vyplni. */
    grid-template-columns: minmax(0, 784fr) minmax(0, 548fr);
    gap: 21px;
    margin-top: 20px;
    align-items: start;
}
.sloupec-pravy { display: grid; gap: 16px; }

.karta {
    border: 1px solid var(--lem-karta);
    border-radius: 14px;
    background: #fff;
    padding: 20px 17px 18px;
}
.karta h2 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tmava);
}

/*
 * Popisek pod nadpisem karty. Bydlel jen v `builder.css`, jenze `.karta`
 * sama je odsud — takze na strankach bez builderu (panel spravce, ucet,
 * napoveda) zustaval popisek nestylovany, tedy velky a cerny. Hodnoty jsou
 * tytez, co uz mel builder; ten si svou kopii nechava a prepisuje ji
 * shodnymi hodnotami.
 */
.karta-popis { margin: 2px 0 0; font-size: 12.5px; color: var(--sedy); }

.karta--pozornost { min-height: 206px; display: flex; flex-direction: column; }
.prazdno {
    margin: auto 0;
    padding: 24px 0;
    text-align: center;
    font-size: 16px;
    color: var(--telo);
}
.prazdno-pod {
    margin: 0;
    font-size: 12.6px;
    color: var(--sedy);
}
.prazdno-mala {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--sedy);
}

/* Společný kruhový odznak u položek v seznamech. */
.znak {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #EEF3FC;
    color: var(--modra);
}
.znak svg { width: 17px; height: 17px; }
.znak--misto { background: #E6F6EE; color: #0F9D6E; }
.znak--vystraha { background: #FDECEC; color: #C0392B; }
.znak--lhuta { background: #EEF3FC; color: var(--modra); }

.seznam-pozornost {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.seznam-pozornost a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border: 1px solid var(--lem);
    border-radius: 10px;
}
.seznam-pozornost a:hover { border-color: #CFD9EA; background: #FBFCFE; }
.seznam-pozornost b { display: block; font-size: 14.5px; color: var(--tmava); }
.seznam-pozornost em {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--sedy);
}

.pokracovat {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 17px;
    padding: 13px 15px;
    border: 1px solid var(--lem);
    border-radius: 10px;
}
.pokracovat:hover { border-color: #CFD9EA; background: #FBFCFE; }
.pokracovat .znak { border-radius: 10px; width: 38px; height: 38px; }
.pokracovat b { display: block; font-size: 13.5px; font-weight: 700; color: var(--tmava); }
.pokracovat em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 12.7px;
    color: var(--sedy);
}

/* --------------------------------------------------------- proud událostí */
.aktivita {
    position: relative;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
/* Svislá linka spojující odznaky. Vede jen mezi prvním a posledním, ne
 * přes celou výšku — jinak by vyčuhovala nad první a pod poslední. */
.aktivita::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 26px;
    bottom: 26px;
    width: 1px;
    background: #DCE4F0;
}
.aktivita li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 7px 0 8px;
}
.aktivita .znak { z-index: 1; }
.aktivita span { flex: 1; min-width: 0; }
.aktivita b {
    display: block;
    font-size: 13.4px;
    font-weight: 700;
    color: var(--tmava);
}
.aktivita span a {
    display: inline-block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--modra);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.aktivita time {
    flex: none;
    padding-top: 2px;
    font-size: 11.5px;
    color: var(--sedy);
}

/* ------------------------------------------------------------ přihlášení - */
.strana-prihlaseni {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(160deg, #0C1E54 0%, #045A9A 55%, #02B282 100%);
}
.prihlaseni {
    width: 100%;
    max-width: 380px;
    margin: 24px;
    padding: 34px 32px 28px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(4, 20, 55, .28);
    text-align: center;
}
.prihlaseni-znak {
    width: 64px;
    height: 56px;
    margin: 0 auto 16px;
}
.prihlaseni h1 {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tmava);
}
.prihlaseni-popis {
    margin: 4px 0 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sedy);
}
.prihlaseni-chyba {
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: 8px;
    background: #FDECEC;
    color: #A5281B;
    font-size: 14px;
    text-align: left;
}
.prihlaseni label {
    display: block;
    margin-bottom: 14px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--tmava);
}
.prihlaseni input {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 6px;
    padding: 0 14px;
    border: 1px solid #DFE3ED;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-weight: 400;
    color: var(--tmava);
}
.prihlaseni input:focus {
    outline: none;
    border-color: var(--modra);
    box-shadow: 0 0 0 3px rgba(12, 86, 181, .14);
}
.prihlaseni button {
    width: 100%;
    height: 46px;
    margin-top: 8px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(105deg, #05489F 0%, #0B7C97 55%, #07AC7B 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.prihlaseni button:hover { filter: brightness(1.07); }
.prihlaseni-pod { margin: 20px 0 0; font-size: 13.5px; color: var(--sedy); }
.prihlaseni-pod a { text-decoration: underline; text-underline-offset: 2px; }

/* --- druhý krok přihlášení (ověřovací kód) --- */
/* Potvrzení, že se něco povedlo — na téhle obrazovce „poslali jsme nový
 * kód". Zelený protějšek `.prihlaseni-chyba`. */
.prihlaseni-hlaska {
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: 8px;
    background: #EAF7F0;
    color: #0B7A55;
    font-size: 14px;
    text-align: left;
}
/* Zaškrtávátko musí zůstat řádkem, i když `.prihlaseni label` dělá
 * z popisků bloky nad poli. */
.prihlaseni-zaskrtnuti {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 400;
    font-size: 13px;
    color: var(--telo);
    cursor: pointer;
}
.prihlaseni-zaskrtnuti input {
    display: inline-block;
    width: 17px;
    height: 17px;
    margin: 0;
    flex: none;
    accent-color: var(--modra);
}
/* Druhotné akce (poslat znovu, zrušit) nesmí vypadat jako to hlavní
 * tlačítko — je to odkaz v podobě tlačítka, ne barevný pruh přes celou
 * šířku. */
.prihlaseni-druhe { margin-top: 12px; }
.prihlaseni-druhe button {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--sedy);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prihlaseni-druhe button:hover { filter: none; color: var(--tmava); }

/* --------------------------------------------------------------- užší ---- */
@media (max-width: 1280px) {
    .dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tlacitko-nova { grid-column: span 2; height: 56px; }
    .sloupce { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .rozvrh { flex-direction: column; }
    .panel {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        /* Odsazeni ze vsech stran. Doted bylo jen po stranach 16 px
         * a svisle nula, takze hamburger mel nad sebou a pod sebou po dvou
         * pixelech a znacka po sesti — pruh vypadal, ze je z nej vsechno
         * vytlacene ven. */
        padding: 11px 20px;
        flex-wrap: wrap;
        /*
         * ŽÁDNÉ SCROLLOVÁTKO. Dřív tu bylo `overflow-x: auto`, protože se
         * do pruhu nevešla nabídka — ta je teď v hamburgeru, takže pruh
         * rolovat nemá co. A hlavně: `overflow` jiný než `visible` udělá
         * z pruhu ořezávací rámeček, takže se v něm rozbalená nabídka
         * ořízla a na tabletu po klepnutí na hamburger nebylo vidět nic.
         */
        overflow-x: visible;
        /*
         * Z panelu je tu vodorovny pruh nahore, ktery ODJEDE S OBSAHEM.
         *
         * Sviste zustaval prilepeny (`position: sticky` ze zakladniho
         * pravidla) a to na telefonu nefungovalo: pruh se pri rolovani
         * zastavil, ale ovladani z hlavicky stranky — kalendar, ucet,
         * jazyk — se pres nej vykreslilo, protoze si nese vlastni
         * vrstveni kvuli rozbalovacim nabidkam. Vysledek byla kase.
         *
         * Pripnout pruh doopravdy by znamenalo trvale ukrojit sto pixelu
         * z displeje, na kterem jich je sest set; v builderu sto tricet.
         * Na telefonu se proto roluje pryc a vrati se rolovanim nahoru.
         */
        position: static;
        align-self: auto;
        height: auto;
        overflow-y: visible;
    }
    .panel-znacka { padding: 12px 0; }
    /*
     * NABÍDKA JE V HAMBURGERU UŽ OD TABLETU. Ve vodorovném pruhu se
     * nevejde ani na 768 px: byl vidět Dashboard, Přehled zakázek
     * a Zákazníci, Nápověda a Můj účet zůstaly za posuvníkem, o kterém
     * nic neříkalo, že tam je.
     */
    .panel-nabidka { display: none; }
    .panel-hamburger { display: block; }
    .rozvrh:not(.rozvrh--builder) .panel-hamburger { margin-left: auto; }
    /* Do nabídky se stěhuje i kalendář, takže na 246 px z `.nabidka-panel`
     * to nevyjde. `min()` drží kartu uvnitř obrazovky i na 320 px. */
    .panel-hamburger-panel { width: min(322px, calc(100vw - 40px)); }
    .panel-polozka { white-space: nowrap; }
    .panel-weby { display: none; }
    .lista { flex-wrap: wrap; padding: 18px 16px; }
    .obsah-aplikace { padding: 0 16px 32px; }
    .hledani { order: 3; flex: 1; }
    .hledani input { width: 100%; }
}

@media (max-width: 620px) {
    /* V BUILDERU se z panelu stane vodorovný pruh, ve kterém značka sdílí
     * řádek s návratem na dashboard a s nabídkou — název by z něj ukrojil
     * půlku, takže zůstane jen znak. V aplikaci má značka vlastní řádek
     * (níž), tam se název vejde celý. */
    .rozvrh--builder .panel-znacka span { display: none; }

    /*
     * NABÍDKA JE V HAMBURGERU. Vodorovný pruh měl `overflow-x: auto`
     * a nabídka se do něj nevešla: byl vidět Dashboard a půlka „Přehledu
     * zakázek", zbytek zůstal za pravým okrajem. Pak z položek zbyly holé
     * ikony a i tak to bylo na pěti cílech těsné.
     *
     * Teď je v pruhu jen značka a hamburger a položky se vypisují celé
     * v rozbalené nabídce. Vzor je `<details>` jako u účtu a jazyka
     * v horní liště, takže nabídka funguje i bez JavaScriptu.
     */
    .panel { gap: 8px; }
    .panel-znacka { padding: 0; }

    /* Značka a hamburger sdílejí první řádek: značka si vezme, co zbyde,
     * hamburger stojí u pravého okraje. */
    .rozvrh:not(.rozvrh--builder) .panel-znacka {
        order: -1;
        flex: 1 1 auto;
        min-width: 0;
        gap: 11px;
        padding: 0;
    }
    .rozvrh:not(.rozvrh--builder) .panel-hamburger { order: 0; }
    .hledani kbd { display: none; }
    .aktivita li { flex-wrap: wrap; }
    .aktivita time { width: 100%; padding-left: 50px; }

    /*
     * NADPIS NA VLASTNÍ ŘÁDEK, ovládání pod něj. Dokud se o řádek dělil
     * s ovládáním, zbylo na hledání asi třicet pixelů a bylo z něj kolečko
     * s lupou a půlkou písmene; jazyk se navíc odlomil na třetí řádek.
     * Takhle má ovládání celou šířku, vejde se na jednu řádku a hledání
     * si vezme, co zbyde po kalendáři, účtu a jazyku.
     */
    .lista-nazev { flex: 1 0 100%; margin-right: 0; }
    /* Malý základ, ne `auto`: se zalomením se o řádku rozhoduje podle
     * ZÁKLADU, ne podle toho, kam až by šlo prvek smrsknout — s `auto` se
     * hledání odlomilo na vlastní řádek, i když by po smrsknutí zbylo
     * místa dost. */
    .hledani { flex: 1 1 120px; min-width: 0; }
    .hledani input { width: 100%; min-width: 0; }

    /* Nadpis stránky ubere, ať na první obrazovku zbyde i obsah. */
    .lista { gap: 12px; padding: 16px 16px 12px; }
    .lista-nazev h1 { font-size: 23px; }
    .lista-nazev p { font-size: 14px; }

    /*
     * Dlaždice zůstávají po DVOU. Jedna pod druhou z nich udělá tři
     * obrazovky rolování, než se člověk dostane k práci; ve dvou sloupcích
     * má telefon na dlaždici pořád ještě přes 170 px, což číslu i popisku
     * stačí. Pod 400 px už ne — tam se „Blíží se přezkoumání" zalomí na
     * tři řádky a jeden sloupec je čitelnější.
     */
    .dlazdice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .tlacitko-nova { grid-column: span 2; }

    /* Na dvě dlaždice vedle sebe zbyde asi 160 px. Na ikonu VEDLE čísla to
     * nestačí — „Blíží se přezkoumání" se v šedesáti pixelech zalomilo na
     * čtyři řádky a vylezlo z pevné výšky ven. Dlaždice se proto na telefonu
     * staví na výšku: ikona, číslo, popisek pod sebou. */
    .dlazdice-polozka {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 9px;
        height: auto;
        min-height: 104px;
        padding: 14px;
    }
    .dlazdice-znak { width: 34px; height: 34px; border-radius: 9px; }
    .dlazdice-znak svg { width: 17px; height: 17px; }
    .dlazdice-polozka b { font-size: 22px; }
    .dlazdice-polozka em { margin-top: 3px; font-size: 12.5px; }
}



/* ---------------------------------------------------- hlášky a nářadí ---- */
/* Cerveny pruh v toku stranky. Neni to oznameni — vyskakovaci oznameni
 * v pravem dolnim rohu hlasi, co se STALO, tohle stoji tam, kde se s tim ma
 * neco delat: seznam chybejicich poli nad formularem a varovani k volbe,
 * kterou clovek prave dela (5. krok). Proto zustava na miste a nezavira se. */
.pruh-chyba {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #FDECEC;
    color: #A5281B;
    font-size: 14px;
}
.rozvrh--builder .pruh-chyba { margin: 14px 0 0; }

/* Rozbalovaci pole. Nativni <select> vypada vedle nasich poli jako z jine
 * doby — jina vyska, jiny lem, jine pismo. Vzhled je proto SPOLECNY pro cely
 * web a jednotlive obrazovky uz jen doladuji rozmer; drive ho mela kazda
 * po svem a nekde vubec (faktory v 5. kroku, razeni v prehledech).
 *
 * `appearance: none` zahodi i nativni sipku, tak si nese vlastni jako obrazek
 * v pozadi. `data:` URI CSP v `img-src` pousti. Pozadi jde longhandem: kratky
 * zapis `background: #fff` v pozdejsim pravidle by sipku smazal. */
select {
    height: 34px;
    padding: 0 32px 0 11px;
    border: 1px solid #DCDFE6;
    border-radius: 6px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6983' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 15px 15px;
    font: inherit;
    font-size: 14px;
    color: var(--tmava);
    appearance: none;
    cursor: pointer;
}
select:hover { border-color: #C9D0E0; }
select:focus {
    outline: none;
    border-color: var(--modra);
    box-shadow: 0 0 0 3px rgba(12, 86, 181, .16);
}
select:disabled { background-color: #F5F6F9; color: var(--telo); cursor: default; }

.karta--sirsi { margin-top: 4px; padding: 22px 22px 20px; }

/* Jen pro odečítač obrazovky. Odesílací tlačítko hledání musí existovat, aby
 * Enter v poli formulář odeslal, ale vidět nemá být.
 *
 * Bydlí tady, ne v `builder.css`: potřebuje ho i přehled zákazníků a stránka,
 * která `builder.css` nenačítá, by z toho jinak dostala viditelné tlačítko
 * uprostřed hledání. Na tuhle past se přišlo dvakrát — u `.odznak` v panelu
 * správce a tady. Co je obecné, patří do tohohle souboru. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Menší varianta tlačítka do řádků tabulek a lišt. */
.tlacitko-drobne {
    height: 32px;
    padding: 0 13px;
    font-size: 13px;
}

/* Na telefonu se tabulka nevejde a roztlacila by celou stranku do strany —
 * radeji ji necham posouvat uvnitr vlastniho ramecku. */
.tabulka-posuv { overflow-x: auto; }

.tabulka {
    width: 100%;
    min-width: 420px;
    margin-top: 16px;
    border-collapse: collapse;
    font-size: 14px;
}
.tabulka th {
    padding: 0 12px 9px 0;
    border-bottom: 1px solid var(--lem);
    text-align: left;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sedy);
}
.tabulka td {
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid var(--lem);
    vertical-align: top;
}
.tabulka tr:last-child td { border-bottom: 0; }
.tabulka code {
    font: 400 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--tmava);
}

.stav {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.stav--hotovo { background: #E6F6EE; color: #0B6B4C; }
.stav--ceka   { background: #EEF3FC; color: #0B4E9E; }

/* Tlačítko bez vlastního odsazení: mezeru dělá kontejner kolem něj.
 *
 * `margin-top: 20px` tady dřív byl a čtyři místa ho pak rušila zpátky přes
 * `margin-top: 0`. V patičce okna, kde ho nikdo nezrušil, posunul tlačítko
 * o 20 px dolů a vylezlo z rohu ven. Odsazení patří kontejneru, ne tlačítku.
 *
 * `inline-flex` je tu proto, aby se text svisle vystředil i u `<a>`, které
 * není přímo v flexu — dřív si to každý kontejner nastavoval sám. */
.tlacitko-hlavni {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(105deg, #05489F 0%, #0B7C97 55%, #07AC7B 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
}
.tlacitko-hlavni:hover { filter: brightness(1.07); }

/* ================================================== vyskakovací oznámení == */
/* Krátká zpráva po akci — nahrání podkladu, uložení, potvrzení, chyba.
 * Nahradilo pruh `.hlaska` nad obsahem, který vidí jen ten, kdo je zrovna
 * nahoře, a odejde až s dalším načtením stránky. Tohle stojí v pravém dolním
 * rohu, kde nic nepřekrývá, a zavírá se křížkem.
 *
 * Jde tudy, co se STALO: výsledek akce po přesměrování (flash), trvalý stav
 * aplikace (chybějící tabulky, čekající migrace) i odpověď z registru ARES.
 *
 * Co se má teprve udělat, zůstává v toku stránky jako `.pruh-chyba` —
 * seznam chybějících polí nad formulářem a varování k volbě, kterou člověk
 * právě dělá. Ty patří k místu, kde se s nimi něco dělá, ne do rohu.
 */
.oznameni {
    position: fixed;
    right: 32px;
    bottom: 28px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 404px;
    /* Kontejner drží celý roh obrazovky, ale klikat se dá jen do oznámení
     * samotných — jinak by prázdný sloupec bral kliky obsahu pod sebou. */
    pointer-events: none;
}
.oznameni-okno {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 16px 16px;
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(4, 20, 55, .22);
    color: #fff;
    pointer-events: auto;
    animation: oznameni-prijezd .28s ease-out;
}
.oznameni-okno--ok    { background: var(--zelena); }
.oznameni-okno--pozor { background: var(--zluta-plna); }

/* Stranka schovana, dokud se po kliknuti nevrati pozice — vesi `posun.js`
 * v hlavicce, sundava `aplikace.js` hned po odrolovani. Bez toho je videt
 * zacatek stranky a pak skok. `visibility`, ne `display`: rozlozeni se
 * musi spocitat, jinak by nebylo kam rolovat. */
.posun-ceka { visibility: hidden; }

/*
 * Pruh „jen ke čtení" nahoře v obsahu (zkušební týden skončil). Žlutý,
 * ne červený — nic se nerozbilo, jen se nezapisuje. Tytéž barvy jako
 * `.predplatne-pozor`, aby stav vypadal všude stejně.
 */
.cteni-pruh {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 6px;
    padding: 11px 14px;
    border: 1px solid #F0DDB4;
    border-left: 3px solid #C98A0E;
    border-radius: 8px;
    background: #FDF8EC;
    color: var(--tmava);
    font-size: 14px;
    line-height: 21px;
}
.cteni-pruh > svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--zluta-plna); }
.cteni-pruh p { margin: 0; }
.cteni-pruh a { color: var(--modra); font-weight: 600; white-space: nowrap; }
.rozvrh--builder .cteni-pruh { margin-top: 14px; }

/* Výzva k potvrzení podmínek (`aplikaceZacatek()`): vzhled pruhu „jen ke
 * čtení“, navíc odkazy na dokumenty a tlačítko. Na úzkém displeji jde
 * tlačítko pod text přes celou šířku. */
.souhlas-pruh { align-items: center; flex-wrap: wrap; }
.souhlas-pruh-text { flex: 1 1 320px; min-width: 0; }
.souhlas-pruh-odkazy { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px !important; font-size: 13px; }
.souhlas-pruh-odkazy a { font-weight: 600; white-space: normal; }
.souhlas-pruh-form { flex: none; margin: 0; }
@media (max-width: 560px) {
    .souhlas-pruh-form { flex: 1 1 100%; }
    .souhlas-pruh-form .tlacitko-hlavni { width: 100%; }
}
.oznameni-okno--chyba { background: #C0392B; }

.oznameni-znak {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
}
.oznameni-znak svg { width: 18px; height: 18px; stroke-width: 1.9; }

.oznameni-text { flex: 1 1 auto; min-width: 0; }
.oznameni-text b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.oznameni-text em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .82);
    text-wrap: pretty;
}

/* Křížek je odkaz na tutéž stránku, aby zavírání fungovalo i bez skriptu —
 * flash zpráva je už vyzvednutá, takže se po načtení znovu neukáže.
 * Se skriptem klik zachytí `aplikace.js` a stránka se nepřekresluje. */
.oznameni-zavrit {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #fff;
    opacity: .7;
    text-decoration: none;
}
.oznameni-zavrit:hover,
.oznameni-zavrit:focus-visible { color: #fff; opacity: 1; }
.oznameni-zavrit svg { width: 12px; height: 12px; stroke-width: 2; }

/* Odjezd si třídu věší skript, až když oznámení opravdu odchází. */
.oznameni-okno--odchod { animation: oznameni-odjezd .2s ease-out forwards; }

@keyframes oznameni-prijezd {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes oznameni-odjezd {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(12px); }
}

/* Na úzké obrazovce přes celou šířku u dolní hrany. */
@media (max-width: 620px) {
    .oznameni { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* Kdo si vypnul animace, dostane jen prolnutí — žádný posun. Stejné jméno
 * animace o kus níž ji přebije, takže se nikde jinde nic měnit nemusí. */
@media (prefers-reduced-motion: reduce) {
    @keyframes oznameni-prijezd { from { opacity: 0; } to { opacity: 1; } }
    @keyframes oznameni-odjezd  { from { opacity: 1; } to { opacity: 0; } }
}

/* ------------------------------------------------- jednorázové heslo -- */
/* Vrstva, ve které si člověk po prvním přihlášení nastaví vlastní heslo.
 * Není to `<dialog>` ani nic se skriptem: dialog, který drží celou
 * aplikaci, nesmí záviset na tom, jestli se stáhl JavaScript.
 *
 * Nemá křížek. Zavře se jedině nastavením hesla, jinak by to byla
 * připomínka, ne podmínka — a zápis do aplikace mezitím zaráží
 * `vyzadujPrihlaseni()`. */
.heslo-vrstva {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(7, 21, 48, .58);
    /* Rozostření je ozdoba, ne nosný prvek — kdo ho neumí, vidí jen tmavší
     * plochu a nic mu nechybí. */
    backdrop-filter: blur(3px);
    animation: heslo-prijezd .18s ease-out;
}
.heslo-karta {
    width: min(430px, 100%);
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(4, 20, 55, .38);
}
/* Tentýž pruh jako v e-mailu, kterým heslo přišlo — přechod z modré do
 * zelené. Zpráva a dialog na sebe mají navazovat i pohledem. */
.heslo-pruh {
    height: 6px;
    background: linear-gradient(90deg, #0168B6 0%, #0373AC 45%, #10858D 64%, #1D9279 73%, #2E9A63 82%, #54B733 100%);
}
.heslo-obsah { padding: 26px 30px 30px; }
.heslo-nadhlavi {
    margin: 0;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--modra);
}
.heslo-obsah h2 {
    margin: 8px 0 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tmava);
}
.heslo-popis {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--telo);
}
.heslo-chyba {
    margin: 18px 0 0;
    padding: 11px 14px;
    border-radius: 8px;
    background: #FDECEC;
    color: #A5281B;
    font-size: 13.5px;
    line-height: 1.45;
}
.heslo-formular { margin-top: 20px; }
.heslo-formular label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tmava);
}
.heslo-formular input[type="password"] {
    display: block;
    width: 100%;
    height: 44px;
    margin-bottom: 14px;
    padding: 0 14px;
    border: 1px solid #DFE3ED;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    color: var(--tmava);
}
.heslo-formular input[type="password"]:focus {
    outline: none;
    border-color: var(--modra);
    box-shadow: 0 0 0 3px rgba(12, 86, 181, .14);
}
.heslo-pozadavek {
    margin: 0 0 18px;
    font-size: 12.5px;
    color: var(--sedy);
}
.heslo-formular .tlacitko-hlavni { width: 100%; height: 46px; }

@keyframes heslo-prijezd {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .heslo-vrstva { animation: none; }
}

/* ==========================================================================
 * HAMBURGER V PANELU
 * ==========================================================================
 *
 * Kreslí se jen na telefonu (`display: block` v bloku výš). Na širokém
 * displeji je nabídka v panelu pod sebou a hamburger by byl druhá cesta
 * k témuž.
 */
.panel-hamburger-spoust {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
}
.panel-hamburger[open] > .panel-hamburger-spoust { background: rgba(255, 255, 255, .26); }

/* Tři čárky jako prvky, ne ikona z `ikona()`: je to vzhled tlačítka,
 * ne značka nějakého pojmu. */
.panel-hamburger-carky {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 19px;
}
.panel-hamburger-carky i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

/*
 * Obal ovládání lišty. Na širokém displeji se v rozvržení NEPROJEVÍ —
 * `display: contents` znamená, že kalendář, účet i jazyk zůstávají
 * přímými položkami lišty jako předtím, než obal přibyl. Existuje kvůli
 * telefonu, kde ho skript stěhuje do hamburgeru.
 */
.lista-ovladani { display: contents; }

/* Uvnitř hamburgeru už je to normální blok: pilulky pod sebou, oddělené
 * čárou od položek nabídky nad nimi. */
.panel-hamburger-panel > .lista-ovladani {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 4px 2px;
    padding-top: 10px;
    border-top: 1px solid var(--lem-karta);
}

/*
 * Nabídka uvnitř nabídky se ROZBALÍ NA MÍSTĚ, nevyskočí.
 *
 * `.nabidka-panel` je jinak plovoucí karta o pevné šířce ukotvená
 * k pravému okraji své spouště; uvnitř hamburgeru by vyjela mimo něj
 * a část by zůstala za okrajem obrazovky. Ve výsuvné nabídce se proto
 * chová jako harmonika: zabere celou šířku pod pilulkou, bez vlastního
 * rámečku a stínu, ať je vidět, že patří dovnitř.
 */
.panel-hamburger-panel .nabidka-panel {
    position: static;
    width: 100%;
    margin-top: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/*
 * Datum u kalendáře a jméno u účtu se v ÚZKÉ LIŠTĚ schovávají (viz
 * `@media (max-width: 1180px)` výš) — v nabídce je ale místa dost
 * a pilulka jen s ikonou nic neříká.
 */
.panel-hamburger-panel .lista-kalendar-spoust b,
.panel-hamburger-panel .lista-uzivatel span { display: block; }

/* Pilulky si berou svou šířku a co se nevejde, spadne na další řádek —
 * roztažené na třetinu z data „6. září 2026" zbyla samotná ikona. */
.panel-hamburger-panel .lista-kalendar,
.panel-hamburger-panel .lista-ucet,
.panel-hamburger-panel .lista-jazyk { flex: 0 1 auto; min-width: 0; }
/* Rozbalená pilulka si vezme celý řádek, ať má panel kam růst. */
.panel-hamburger-panel .nabidka[open] { flex: 1 0 100%; }

/* Rozbalená nabídka je bílá karta, jenže položky v ní mají třídy z tmavého
 * panelu — je to týž kus HTML, vypsaný podruhé. Tady se přebarví. */
.panel-hamburger-panel .panel-polozka { color: var(--tmava); }
.panel-hamburger-panel .panel-polozka svg { color: var(--sedy); }
.panel-hamburger-panel .panel-polozka:hover { background: #F4F7FD; }
.panel-hamburger-panel .panel-polozka--zde {
    background: #EEF3FC;
    color: var(--modra);
    box-shadow: none;
}
.panel-hamburger-panel .panel-polozka--zde svg { color: var(--modra); }
.panel-hamburger-panel hr {
    margin: 6px 4px;
    border: 0;
    border-top: 1px solid var(--lem-karta);
}

/* ==========================================================================
 * DOTYKOVÉ CÍLE
 * ==========================================================================
 *
 * Rozměry v návrhu jsou pro myš: třicet pixelů vysoké tlačítko se ukazatelem
 * trefí na pixel. Palec ne — Apple doporučuje 44 × 44 px, Google 48 dp.
 * Změřeno, že na telefonu byla většina ovládání mezi 24 a 39 px a hlavní
 * nabídka 39 × 45.
 *
 * Pravidlo: co je HLAVNÍ ovládání (nabídka, tlačítka, pole, záložky), má
 * aspoň 44 px. Drobné ikony (šipka v kalendáři, křížek u oznámení) dostanou
 * 36–38 — čtyřicet čtyři by z nich udělalo plochu větší než to, co ovládají.
 *
 * Platí JEN na telefonu; na desktopu zůstávají rozměry z návrhu.
 */
@media (max-width: 620px) {
    /* --- nabídka v hamburgeru -------------------------------------------- */
    .panel-polozka { min-height: 48px; }

    /* --- tlačítka -------------------------------------------------------- */
    /*
     * `min-height` sice zvedne i pevnou `height`, ale jen na tu svou
     * hodnotu — DELŠÍ POPISEK SE PŘES NI PŘELIJE VEN. Tlačítko „Uložit
     * opatření a vyhodnotit zbytkové riziko" má na telefonu tři řádky
     * verzálek a lezlo z pětačtyřiceti pixelů dole ven. Proto `height:
     * auto`: `min-height` drží dotykový cíl, výšku určuje text.
     *
     * `white-space: normal` je tu kvůli tlačítkům, která si jinde říkají
     * o `nowrap` (návrhy od AI) — na telefonu není kam nezalomit.
     */
    .tlacitko-hlavni, .tlacitko-lem {
        height: auto;
        min-height: 46px;
        padding-top: 9px;
        padding-bottom: 9px;
        white-space: normal;
        text-align: center;
    }
    /*
     * Odkaz sám o sobě není flex, takže `min-height` z něj udělá vysokou
     * krabici s textem NAHOŘE. Vedle tlačítka („Uložit změny" a „Zrušit")
     * pak text odkazu seděl o kus výš než text tlačítka.
     */
    .odkazove-tlacitko {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .tlacitko-drobne { min-height: 40px; }

    /* --- formulářová pole ------------------------------------------------ */
    /*
     * PÍSMO 16 px NENÍ ESTETIKA. Když má pole menší písmo, Safari na
     * iPhonu při klepnutí do něj přiblíží celou stránku — a sama se už
     * neoddálí, takže po vyplnění prvního pole člověk kouká na výsek
     * formuláře a musí oddalovat prsty. Všechna pole v aplikaci měla 14 px,
     * rozbalovací výběry 13.
     */
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea { font-size: 16px; }

    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select { min-height: 44px; }

    /* --- rozbalovací nabídky a drobnosti v liště ------------------------- */
    .nabidka-polozka { min-height: 44px; }
    .kalendar-sipka { width: 38px; height: 38px; }
    .kalendar-den { min-height: 38px; }
    .oznameni-zavrit { width: 36px; height: 36px; }
    .oznameni-zavrit svg { width: 14px; height: 14px; }
}

/* ==========================================================================
 * Formulář podpory (`/podpora.php`)
 *
 * Vlastní pravidla, ne `.kanc-*` z `kancelar.css`: ten se na téhle stránce
 * nenačítá a kopie tří pravidel je levnější než tahat kvůli nim celý styl
 * cizí obrazovky.
 * ========================================================================== */

.podpora-formular { margin-top: 18px; }

.podpora-druh {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
/* Celá dlaždice je štítek, takže se klikat dá kamkoli, ne jen do kolečka. */
.podpora-volba {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid var(--lem-karta);
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
}
.podpora-volba:hover { border-color: #C6D3E8; }
.podpora-volba input { margin-top: 3px; accent-color: #1D4ED8; }
.podpora-volba b { display: block; font-size: 14px; color: var(--tmava); }
.podpora-volba em {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-style: normal;
    color: var(--sedy);
}
/* Vybraná volba. `:has()` umí každý dnešní prohlížeč; kdyby ne, zůstane
 * lem šedý a pozná se to podle kolečka — nic se nerozbije. */
.podpora-volba:has(input:checked) { border-color: var(--modra); background: #F5F9FF; }

.podpora-pole { display: block; margin-bottom: 14px; }
.podpora-pole > span {
    display: block;
    margin-bottom: 5px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tmava);
}
.podpora-pole input,
.podpora-pole textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--lem-karta);
    border-radius: 8px;
    background: #fff;
    color: var(--tmava);
    font: inherit;
    font-size: 14px;
}
.podpora-pole textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.podpora-pole input:focus,
.podpora-pole textarea:focus { outline: 2px solid #B7D4F3; outline-offset: 1px; }

/* ==========================================================================
 * BAREVNÉ REŽIMY PRO BARVOSLEPÉ
 * ==========================================================================
 *
 * Režim posílá server v `<html data-barvy>` (`lib/barvy.php`), přepíná ho
 * `aplikace.js`. Filtr stojí JEN NA KOŘENOVÉM `<html>`: na `body` nebo jiném
 * prvku by se stal obalem pro `position: fixed` a rozbil by modaly,
 * oznámení i bublinu poradce. Na kořeni to podle specifikace nedělá.
 */
.barvy-filtry { position: absolute; width: 0; height: 0; overflow: hidden; }
html[data-barvy="protanopie"]       { filter: url(#barvy-protanopie); }
html[data-barvy="deuteranopie"]     { filter: url(#barvy-deuteranopie); }
html[data-barvy="tritanopie"]       { filter: url(#barvy-tritanopie); }
html[data-barvy="mono"]             { filter: grayscale(1); }
html[data-barvy="sim-protanopie"]   { filter: url(#barvy-sim-protanopie); }
html[data-barvy="sim-deuteranopie"] { filter: url(#barvy-sim-deuteranopie); }
html[data-barvy="sim-tritanopie"]   { filter: url(#barvy-sim-tritanopie); }

/* Náhled pro admina: štítek v rohu, ať se simulace nesplete se skutečností.
 * Text je v atributu `<body>` (`barvyStitky()`), v CSS by nešel přeložit. */
html[data-barvy^="sim-"] body::after {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9999;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--tmava);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    pointer-events: none;
}
html[data-barvy="sim-protanopie"] body::after   { content: attr(data-barvy-sim-protanopie); }
html[data-barvy="sim-deuteranopie"] body::after { content: attr(data-barvy-sim-deuteranopie); }
html[data-barvy="sim-tritanopie"] body::after   { content: attr(data-barvy-sim-tritanopie); }

/* Vysoký kontrast: tmavší běžný text a popisky, výraznější lemy. Barvy
 * stavů (zelená, žlutá, červená) zůstávají — ty nesou význam. */
html[data-barvy="kontrast"] {
    --telo: #1F2A44;
    --sedy: #3F4A60;
    --lem: #B4BDCE;
    --lem-karta: #A9B3C6;
}
html[data-barvy="kontrast"] :focus-visible { outline: 3px solid #0B3A78 !important; outline-offset: 2px; }
html[data-barvy="kontrast"] main p a { text-decoration: underline; }

/* --- volba v nabídce účtu ------------------------------------------------ */
.barvy > summary { list-style: none; }
.barvy > summary::-webkit-details-marker { display: none; }
.barvy-souhrn > span { display: flex; flex-direction: column; }
.barvy-ted {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    color: var(--sedy);
}
.nabidka-polozka svg.barvy-sipka { width: 15px; height: 15px; color: var(--sedy); transition: transform .12s; }
.barvy[open] .barvy-sipka { transform: rotate(180deg); }
.barvy-seznam {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 4px 8px;
}
.barvy-volba {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--telo);
    cursor: pointer;
}
.barvy-volba:hover { background: #F4F6FB; }
.barvy-volba:focus-visible { outline: 2px solid var(--modra); outline-offset: 1px; }
.barvy-volba[aria-checked="true"] { background: #EEF3FC; color: var(--tmava); }
.barvy-txt { flex: 1; min-width: 0; }
.barvy-txt b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.barvy-txt em { display: block; font-style: normal; font-size: 12px; line-height: 1.3; color: var(--sedy); }
.barvy-fajfka { width: 16px; height: 16px; flex: none; color: var(--zelena); visibility: hidden; }
.barvy-volba[aria-checked="true"] .barvy-fajfka { visibility: visible; }
/* Kolečko s dvojicí barev, kterou daný režim pomáhá rozlišit. */
.barvy-vzorek {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    border: 1px solid rgba(11, 30, 59, .15);
}
.barvy-vzorek--vychozi      { background: linear-gradient(135deg, #0C56B5 0 50%, #0F9D6E 50%); }
.barvy-vzorek--protanopie   { background: linear-gradient(135deg, #D33A2C 0 50%, #2E8B3A 50%); }
.barvy-vzorek--deuteranopie { background: linear-gradient(135deg, #2E8B3A 0 50%, #D33A2C 50%); }
.barvy-vzorek--tritanopie   { background: linear-gradient(135deg, #0C56B5 0 50%, #E8B90C 50%); }
.barvy-vzorek--mono         { background: linear-gradient(135deg, #3A3A3A 0 50%, #BDBDBD 50%); }
.barvy-vzorek--kontrast     { background: linear-gradient(135deg, #000 0 50%, #fff 50%); }
.barvy-vzorek[class*="--sim-"] { background: linear-gradient(135deg, #8A8565 0 50%, #A9A28A 50%); border-style: dashed; }
.barvy-skupina {
    margin: 6px 8px 2px;
    padding-top: 7px;
    border-top: 1px solid var(--lem);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sedy);
}
@media (max-width: 620px) {
    .barvy-volba { min-height: 44px; }
}