/* Tréninky JKM - základní styly.
   Záměrně bez frameworku: pár proměnných a jednoduché komponenty. */

:root {
    --barva-pozadi: #f5f6f8;
    --barva-panel: #ffffff;
    --barva-text: #1b1f24;
    --barva-text-tlumeny: #5b6570;
    --barva-ram: #dde1e6;
    --barva-akcent: #e02b20;
    --barva-akcent-tmavy: #b01f16;
    --barva-znacka: #e02b20;
    --barva-chyba: #b3261e;
    --barva-chyba-pozadi: #fdecea;
    --barva-uspech: #12694a;
    --barva-uspech-pozadi: #e6f4ec;
    --barva-varovani: #8a5a00;
    --barva-varovani-pozadi: #fdf3e0;
    --radius: 10px;
    --stin: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
    --sirka-obalu: 60rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --barva-pozadi: #14171a;
        --barva-panel: #1d2126;
        --barva-text: #e8eaed;
        --barva-text-tlumeny: #9aa4af;
        --barva-ram: #2e343b;
        --barva-akcent: #f0554a;
        --barva-akcent-tmavy: #c9382e;
        --barva-chyba: #f2837c;
        --barva-chyba-pozadi: #3a1f1e;
        --barva-uspech: #2f9d72;
        --barva-uspech-pozadi: #1b3329;
        --barva-varovani: #e0ac52;
        --barva-varovani-pozadi: #33290f;
        --stin: 0 1px 3px rgb(0 0 0 / 40%);
    }
}

/* Prohlížeč sám skrývá [hidden] jen v user-agent stylu, který prohraje
   proti jakémukoli autorskému pravidlu nastavujícímu display (např.
   .tlacitko níže) -- proto to musí platit natvrdo a všude. */
[hidden] {
    display: none !important;
}

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

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--barva-text);
    background: var(--barva-pozadi);
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }

a { color: var(--barva-akcent); }

.obal {
    width: 100%;
    max-width: var(--sirka-obalu);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* Hlavička */

.hlavicka {
    background: var(--barva-panel);
    border-bottom: 1px solid var(--barva-ram);
}

.hlavicka__obsah {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.85rem;
}

.znacka {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.znacka strong { line-height: 1.2; }

/* Stejná destička jako na přihlášení: logo je bílé a na panelu by zmizelo. */
.znacka__logo {
    height: 2.5rem;
    width: auto;
    padding: 0.3rem 0.45rem;
    border-radius: 7px;
    background: var(--barva-znacka);
}

.navigace {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.navigace__uzivatel {
    color: var(--barva-text-tlumeny);
    font-size: 0.9rem;
    text-decoration: none;
}

.navigace__uzivatel:hover { text-decoration: underline; }

.obsah { padding-block: 2rem 3rem; }

.paticka {
    padding-block: 1.5rem;
    color: var(--barva-text-tlumeny);
    font-size: 0.85rem;
    border-top: 1px solid var(--barva-ram);
}

/* Karty */

.karta {
    background: var(--barva-panel);
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    box-shadow: var(--stin);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.karta--tlumena {
    background: transparent;
    box-shadow: none;
    border-style: dashed;
    color: var(--barva-text-tlumeny);
}

.popis {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.4rem 1.5rem;
    margin: 0;
}

.popis dt { color: var(--barva-text-tlumeny); font-size: 0.9rem; }
.popis dd { margin: 0; }

.odznak {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    margin-right: 0.25rem;
    font-size: 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--barva-ram);
    background: var(--barva-pozadi);
}

.tlumene { color: var(--barva-text-tlumeny); }

/* Hlášky */

.hlaska {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.hlaska--error, .hlaska--danger {
    background: var(--barva-chyba-pozadi);
    color: var(--barva-chyba);
}

.hlaska--success, .hlaska--uspech {
    background: var(--barva-uspech-pozadi);
    color: var(--barva-uspech);
}

/* Uložilo se, ale něco se nevzalo tak, jak trenér čekal. Není to chyba
   (data jsou uložená) a není to ani čistý úspěch. */
.hlaska--warning {
    background: var(--barva-varovani-pozadi);
    color: var(--barva-varovani);
}

/* Formuláře */

.formular { display: grid; gap: 1rem; }

.pole { display: grid; gap: 0.3rem; }

.pole label { font-size: 0.9rem; font-weight: 600; }

.pole input,
.pole select,
.pole textarea {
    font: inherit;
    color: inherit;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--barva-ram);
    border-radius: 8px;
    background: var(--barva-pozadi);
}

.pole input:focus-visible,
.pole select:focus-visible,
.pole textarea:focus-visible {
    outline: 2px solid var(--barva-akcent);
    outline-offset: 1px;
}

.zaskrtavatko {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9rem;
    color: var(--barva-text-tlumeny);
}

.tlacitko {
    display: inline-block;
    font: inherit;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--barva-ram);
    background: var(--barva-panel);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.tlacitko--hlavni {
    background: var(--barva-akcent);
    border-color: var(--barva-akcent);
    color: #fff;
    font-weight: 600;
}

.tlacitko--hlavni:hover { background: var(--barva-akcent-tmavy); }

.tlacitko--tiche { font-size: 0.9rem; padding: 0.35rem 0.75rem; }

/* Přihlašovací obrazovka */

.prihlaseni {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

/* Pod kartou stojí ještě návod na přidání na plochu. Šířku drží sloupec,
   ne karta, aby obě dlaždice lícovaly. */
.prihlaseni__sloupec {
    display: grid;
    gap: 1rem;
    width: min(24rem, 100%);
}

.prihlaseni__sloupec > .karta { margin: 0; }

/* Dvousloupcový popis se do úzkého sloupce nevejde a kroky by se lámaly
   uprostřed. Na přihlášení proto stojí krok pod platformou. */
.prihlaseni__sloupec .popis { grid-template-columns: 1fr; gap: 0.15rem; }
.prihlaseni__sloupec .popis dd + dt { margin-top: 0.7rem; }

.prihlaseni__zahlavi { text-align: center; margin-bottom: 1.5rem; }
.prihlaseni__zahlavi h1 { margin: 0.75rem 0 0; font-size: 1.35rem; }

/* Klubové logo je bílé, takže si podklad nese s sebou. Značková červená
   je v obou režimech stejná -- na světlejším akcentu tmavého režimu by
   bílá ztrácela kontrast. */
.prihlaseni__logo {
    display: block;
    width: min(15rem, 100%);
    height: auto;
    margin: 0 auto;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius);
    background: var(--barva-znacka);
}

.prihlaseni__napoveda {
    margin: 1.25rem 0 0;
    font-size: 0.82rem;
    text-align: center;
}

/* Seznam a docházka */

.zahlavi-sekce {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.tabulka-obal { overflow-x: auto; }

.tabulka {
    width: 100%;
    border-collapse: collapse;
    background: var(--barva-panel);
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    overflow: hidden;
}

.tabulka th, .tabulka td {
    padding: 0.6rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid var(--barva-ram);
    vertical-align: top;
}

/* Zalomit se smí text, ne údaje, které se čtou jako celek: datum s časem,
   čísla a odznaky. Bez toho tabulka přeteče i na širokém displeji a čte
   se posouváním do stran. */
.tabulka .cislo,
.tabulka .nedelitelne,
.tabulka .odznak { white-space: nowrap; }

/* E-mail nemá kde zalomit, tak se láme kdekoli -- jinak si vynutí šířku
   sloupce a odsune tlačítka za okraj. */
.tabulka .zalomitelne { overflow-wrap: anywhere; }

.tabulka th { font-size: 0.85rem; color: var(--barva-text-tlumeny); font-weight: 600; }
.tabulka tr:last-child td { border-bottom: 0; }
.tabulka .cislo { text-align: right; font-variant-numeric: tabular-nums; }

/* Ve výpisu tréninků je tečka jediné označení skupiny, proto je větší než
   dřív a má prstenec: světlé barvy (žlutá) by se jinak na bílém pozadí
   ztratily. Prstenec bere barvu rámu, takže drží ve světlém i tmavém motivu. */
.tecka {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: baseline;
    box-shadow: 0 0 0 1px var(--barva-ram);
}

/* Rozpad výkazu trenérů: tečka s počtem drží pohromadě, dvojice od sebe
   odděluje mezera -- bez názvu by jinak „20×14×" splynulo. */
.skupina-pocet {
    white-space: nowrap;
    margin-right: 0.6rem;
}

.dochazka__seznam {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    background: var(--barva-panel);
    overflow: hidden;
}

.dochazka__seznam li + li { border-top: 1px solid var(--barva-ram); }

/* Řádek dítěte: jméno vlevo, tři stavy vpravo. Na telefonu se zalomí pod sebe. */
.dochazka__polozka {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    min-height: 3rem;
}

/* Poznámka bývá na dva odstavce a na telefonu se zalamuje; do tří řádků
   se nevešla ani ta krátká. Kde prohlížeč umí field-sizing, roste s textem,
   jinak platí rows a ruční tažení za roh. */
.dochazka__poznamka {
    field-sizing: content;
    min-height: 10rem;
    max-height: 60vh;
    resize: vertical;
}

.dochazka__jmeno { flex: 1 1 10rem; }
.dochazka__rocnik { color: var(--barva-text-tlumeny); font-size: 0.85rem; }

/* Přepínač stavu: tři radia stylovaná jako segmentované tlačítko.
   Bez JS, s klávesnicí i s odečítačem -- a palcem se trefuje líp než select. */
.prepinac {
    display: flex;
    flex: none;
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    overflow: hidden;
}

.prepinac__volba { display: flex; cursor: pointer; }
.prepinac__volba + .prepinac__volba { border-left: 1px solid var(--barva-ram); }

/* Samotné radio je schované, klikací plocha je celý popisek. */
.prepinac__volba input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.prepinac__volba span {
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    min-width: 4.5rem;
    text-align: center;
    background: var(--barva-panel);
}

.prepinac__volba input:focus-visible + span {
    outline: 2px solid var(--barva-akcent);
    outline-offset: -2px;
}

.prepinac__volba--pritomen input:checked + span {
    background: var(--barva-uspech-pozadi);
    font-weight: 600;
}

.prepinac__volba--omluven input:checked + span {
    background: var(--barva-pozadi);
    font-weight: 600;
}

.prepinac__volba--nepritomen input:checked + span {
    background: var(--barva-chyba-pozadi);
    color: var(--barva-chyba);
    font-weight: 600;
}

/* Zrušení tréninku stojí stranou od zápisu docházky, ať se neplete. */
.zruseni {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--barva-ram);
}

.zruseni input[type="text"] {
    flex: 1 1 14rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    background: var(--barva-panel);
    color: inherit;
    font: inherit;
}

/* Přepínač období nad výkazem */
.obdobi {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    background: var(--barva-panel);
}

/* Zaškrtávátko vedle tlačítka: samotný text je nízký, tlačítko má vnitřní
   odsazení i rám, a protože se řádek zarovnává na spodní hranu, seděly na sobě
   spodky boxů a text zaškrtávátka byl níž než text tlačítka. Dostane proto
   stejný box jako tlačítko, jen průhledný -- výšky se tím srovnají a texty
   sednou na jednu linku. Zarovnání celého .obdobi měnit nejde: jinde v něm
   stojí popisek se <select>em, kde je spodní hrana správně. */
.obdobi .zaskrtavatko {
    padding-block: 0.55rem;
    border: 1px solid transparent;
}

/* Datum a začátek vedle sebe: jsou to dva krátké údaje jednoho termínu
   a každý na vlastním řádku by kartu tréninku zbytečně natáhl. Na úzkém
   displeji se zalomí pod sebe. */
.termin {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.termin .pole { flex: 1 1 8rem; }

.obdobi__cast {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.obdobi .pole span { font-size: 0.85rem; }

/* Předvolby období jako přepínač: vybraná je vyplněná, ostatní jen
   orámované. Jsou to odkazy, takže podtržení pryč. */
.obdobi__predvolby {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.obdobi__volba {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.obdobi__volba:hover { border-color: var(--barva-akcent); }

.obdobi__volba--vybrana {
    border-color: var(--barva-akcent);
    background: var(--barva-akcent);
    color: #fff;
}

/* Rozbalovátka a datumová pole mimo .pole vypadají stejně. Třetí kopie téhož
   deklaračního bloku by se dřív nebo později rozešla, proto jeden blok a víc
   selektorů. */
.obdobi select,
.obdobi input[type="date"],
.dochazka__duvod {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    background: var(--barva-pozadi);
    color: inherit;
    font: inherit;
}

/* Odznak stavu vede na docházku; podtržení by u něj vypadalo jako chyba. */
.odkaz-stav { text-decoration: none; }

/* Stavy tréninku v seznamu */
.odznak--zapsano { background: var(--barva-uspech-pozadi); }
.odznak--chybi { background: var(--barva-chyba-pozadi); color: var(--barva-chyba); border-color: var(--barva-chyba); }
.odznak--zruseno { background: var(--barva-pozadi); color: var(--barva-text-tlumeny); }

/* Stav docházky ve výpisu tréninků na kartě dítěte. Stejné barvy jako
   přepínač u zápisu docházky, ať to znamená totéž na obou místech. */
.odznak--dochazka-pritomen { background: var(--barva-uspech-pozadi); }
.odznak--dochazka-omluven { background: var(--barva-pozadi); }
.odznak--dochazka-nepritomen {
    background: var(--barva-chyba-pozadi);
    color: var(--barva-chyba);
    border-color: var(--barva-chyba);
}

.radek--zruseny td { color: var(--barva-text-tlumeny); }

/* Mezititulek skupiny v docházce dětí: odliší bloky, aniž by tabulku
   rozdělil na několik -- sloupce tak zůstanou pod sebou zarovnané. */
.tabulka__skupina th {
    text-align: left;
    background: var(--barva-pozadi);
    padding-top: 0.9rem;
}

/* Na úzkém displeji se tabulka nerozpadá do karet, jen ubere sloupce:
   jedna položka = jeden řádek se čte líp než šest řádků pod sebou.
   Co se skryje, je vidět po otevření položky. */
@media (max-width: 44rem) {
    /* Na úzkém displeji je šířka vzácnější než srovnaný sloupec: prázdné
       místo po rozbalovátku by tlačítka se stavem vytlačilo na další řádek. */
    .dochazka__polozka:not(:has(input[value="omluven"]:checked)) .dochazka__duvod {
        display: none;
    }

    .sloupec--doplnkovy,
    .doplnkovy { display: none; }

    .tabulka th, .tabulka td { padding: 0.5rem 0.45rem; }

    /* Na telefonu šířka na dvojici tlačítek vedle sebe nezbývá vždycky;
       ať se radši zalomí, než aby tabulka přetekla za okraj. */
    .akce { flex-wrap: wrap; }

    /* Na telefonu se smí zalomit i to, co na širokém displeji drží
       pohromadě -- dvě barvy skupin na dva řádky jsou pořád lepší než
       useknutý odznak stavu za pravým okrajem. Datum s časem zůstává
       vcelku, je to nadpis řádku. */
    .tabulka td.nedelitelne:not(:first-child) { white-space: normal; }

    /* Odznak se na telefonu zalomí taky. „Čeká na potvrzení" v jednom
       řádku ukusuje ze sloupce 137 px, zalomený 90 -- a přesně o ten
       rozdíl jde, aby se vedle vešlo datum prohlídky. */
    .tabulka .odznak { white-space: normal; }
}

.radek--nezapsany td:first-child { box-shadow: inset 3px 0 0 var(--barva-chyba); }

/* Potvrzení prohlídky stojí pod datem, ne vedle něj: vedle by tlačítko
   „Zrušit potvrzení" roztáhlo sloupec přes půl tabulky. */
.prohlidka-potvrzeni { margin: 0.25rem 0 0; }

/* Zrovna tomuhle tlačítku se zalomit smí -- jinde v tabulce ne. „Zrušit
   potvrzení" je na telefonu širší než celý sloupec a v jednom řádku by
   tabulku poslalo do vodorovného posouvání. Dva řádky jsou menší zlo. */
.prohlidka-potvrzeni .tlacitko { white-space: normal; text-align: left; }

/* Hlavička sloupce poplatku se zalomí a částka jde pod název. Na jednom
   řádku měl sloupec přes 200 px a čtyři poplatky vytlačily tabulku 94 px
   za okraj -- na širokém displeji stejně jako na úzkém, protože obal má
   pevnou maximální šířku a rozšíření okna nepomůže. Samotná částka se
   zalomit nesmí, "1 500 Kč" má mezeru v tisících. */
.tabulka th.sloupec-poplatku { white-space: normal; }
.tabulka th.sloupec-poplatku .tlumene { display: block; }

/* Zaškrtávátko v matici poplatků je zvětšené na dotyk prstem -- jinak
   zůstává zarovnané vpravo spolu s částkami jako ostatní čísla ve sloupci. */
.tabulka td.cislo input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
}

.dochazka__patka {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Patička, která leží přímo pod formulářem (a ne uvnitř karty), potřebuje
   odstup od toho, co následuje -- jinak se na kartu dítěte nalepí blok
   „Nový účet rodiče". Uvnitř karty odstup dělá její vlastní padding, proto
   se pravidlo omezuje na přímého potomka. Hodnota je stejná jako margin
   karet, ať se mezery na stránce nerozcházejí. */
.formular > .dochazka__patka { margin-bottom: 1.25rem; }

/* Sudý řádek formuláře z Twigu */
.formular .pole + .pole { margin-top: 0; }

.karta--uzka { max-width: 26rem; }

/* Na úzkém displeji ustoupí název aplikace: logo ho zastoupí a místo je
   potřeba pro navigaci. Jméno zůstává -- je to jediná cesta na účet. */
@media (max-width: 30rem) {
    .znacka strong { display: none; }
}

/* Formulářové téma */

.chyby {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--barva-chyba);
    font-size: 0.85rem;
}

.napoveda { margin: 0; font-size: 0.82rem; color: var(--barva-text-tlumeny); }

.pole--chyba input,
.pole--chyba select,
.pole--chyba textarea { border-color: var(--barva-chyba); }

.volby { display: grid; gap: 0.15rem; }

/* Dvojice zaškrtávátko + jmenovka. Jmenovka je klikací plocha,
   proto má vlastní výšku a normální řez písma. */
.volby {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.15rem 0.6rem;
}

/* Zaškrtávátko ani přepínač nejsou textové pole: bez pevné velikosti je grid
   v .pole roztáhne přes celý řádek a čtvereček se vykreslí někde uprostřed. */
.pole input[type="checkbox"],
.pole input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    justify-self: start;
}

.volby label {
    font-weight: 400;
    cursor: pointer;
    padding-block: 0.35rem;
    min-height: 2.25rem;
    display: flex;
    align-items: center;
}

/* Správa uživatelů */

/* Tlačítka zůstávají v jednom řádku: zalomená dvojice natahovala řádek
   tabulky na dvojnásobek. Sloupec si na ně řekne o šířku sám. */
.akce { display: flex; gap: 0.4rem; }

/* Popisek tlačítka zalomený na dva řádky ("Nové / heslo") natahuje řádek
   tabulky; ať se radši zalomí celá tlačítka pod sebe. */
.akce .tlacitko { white-space: nowrap; }
.akce form { margin: 0; }

.karta--heslo { border-color: var(--barva-akcent); }

/* Návod na instalaci je k ničemu, když aplikace už na ploše je. */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .navod-instalace { display: none; }
}

/* Nadcházející tréninky s omluvenkou */
.omluvenky {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    border: 1px solid var(--barva-ram);
    border-radius: var(--radius);
    overflow: hidden;
}

.omluvenky__polozka {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.6rem 0.85rem;
    min-height: 3rem;
}

.omluvenky__polozka + .omluvenky__polozka { border-top: 1px solid var(--barva-ram); }

.odznak--omluven { background: var(--barva-uspech-pozadi); }

/* Výběr důvodu u rodičovské omluvenky -- bez pravidla zůstal select
   v defaultním vzhledu prohlížeče vedle stylovaného tlačítka (Minor 2). */
.omluvenky__duvod {
    max-width: 12rem;
}

/* Poplatky v rodičovském pohledu */

/* Částka není doplněk názvu, ale druhý nejdůležitější údaj v řádku --
   tlumená šedá z ní dělala poznámku pod čarou na stránce o penězích.
   Oddělovač je nutný: bez něj se "2026/2027" a "1 500" slily v jedno
   dlouhé číslo, protože je odbarvením přestala dělit šedá. */
.castka {
    color: var(--barva-text);
    font-variant-numeric: tabular-nums;
}

.castka::before {
    content: "·";
    margin: 0 0.45rem;
    color: var(--barva-text-tlumeny);
}

/* Souhrn je jediné číslo, kvůli kterému rodič na stránku jde. Jako obyčejný
   odstavec prohrával s červenými odznaky nad sebou, proto linka a větší
   písmo: čte se jako uzávěrka seznamu, ne jako jeho další položka. */
.souhrn-poplatku {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 1.25rem;
    padding-top: 0.7rem;
    border-top: 2px solid var(--barva-ram);
    font-size: 1.05rem;
}

.souhrn-poplatku strong { font-size: 1.2rem; }

/* Výpis rodičů u dítěte */
.prosty-seznam {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.prosty-seznam li + li { margin-top: 0.35rem; }

.heslo {
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    margin: 0.5rem 0;
    user-select: all;
    word-break: break-all;
}

.odznak--varovani {
    border-color: var(--barva-chyba);
    color: var(--barva-chyba);
}

/* Galerie fotek u tréninku */

.galerie {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.galerie__polozka { position: relative; }

.galerie__polozka img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}

.galerie__smazani {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

/* Křížek musí být dost velký na prst, ne jen na myš. */
.galerie__krizek {
    min-width: 2rem;
    min-height: 2rem;
    border: 0;
    border-radius: var(--radius);
    background: rgb(0 0 0 / 55%);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.fotky { margin-bottom: 1.5rem; }

/* Výběr důvodu patří k omluvenému, u ostatních jen překáží. Selektor je
   schválně psaný jako „skryj, když NENÍ omluven": prohlížeč, který :has()
   neumí, celé pravidlo zahodí a rozbalovátko zůstane vidět. Opačný zápis
   by ho takovému prohlížeči schoval natrvalo.

   Skrývá se průhledností, ne odstraněním z rozvržení: místo si drží dál,
   takže trojice tlačítek se stavem stojí u všech řádků na stejném místě
   a při projíždění seznamu neposkakuje. */
.dochazka__polozka:not(:has(input[value="omluven"]:checked)) .dochazka__duvod {
    visibility: hidden;
}

/* Vedle přepínače stavu: smrskne se, když je řádek úzký, a na telefonu se
   zalomí pod něj. margin-top tu dřív nedělal nic -- řádek je zarovnaný
   na střed, ne na horní hranu. */
.dochazka__duvod {
    flex: 0 1 12rem;
    min-width: 8rem;
}

/* Historie změn */

.historie {
    list-style: none;
    padding: 0;
    margin: 0;
}

.historie__hlavicka {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 0.25rem;
}

/* Rozpis polí je hustá tabulka uvnitř karty, ne přehled na celou stránku. */
.historie__pole { margin-top: 0.75rem; font-size: 0.9rem; }
.historie__pole th { width: 12rem; font-weight: 600; }