/*
 * Wroomi 2 – administrace. Jediný stylopis; žádné inline styly v šablonách.
 * Barvy, rozestupy a rádiusy jsou tokeny v :root, jinde se používají jen proměnné.
 */

:root {
    --c-bg: #f4f6fb;
    --c-surface: #fff;
    --c-border: #e2e6ef;
    --c-text: #1a2233;
    --c-muted: #6b7386;
    --c-primary: #2f6df0;
    --c-primary-dark: #2356c4;
    --c-primary-soft: #e8f0fe;
    --c-success: #1c9a5f;
    --c-success-soft: #e4f6ec;
    --c-warning: #c98209;
    --c-warning-soft: #fdf2df;
    --c-danger: #cf3b3b;
    --c-danger-soft: #fdeaea;
    --c-info: #2f6df0;
    --c-info-soft: #e8f0fe;
    --c-gray-soft: #eef0f5;
    --c-border-input: #b6c0d6;   /* ohraničení polí – tmavší než linky, aby pole bylo vidět jako pole */

    /* Doplnila dávka 115. Dokud tyhle tokeny chyběly, psaly se jejich hodnoty
       natvrdo (bílá na barevné ploše 8x napříč stylopisy, #f4f5f7 jen jako ZÁLOŽNÍ
       údaj u tokenu, který nikdo nedeklaroval) a přepínač vzhledu by je minul. */
    --c-on-accent: #fff;         /* text a ikony NA barevné ploše (tlačítko, odznak) */
    --c-surface-2: #f4f5f7;      /* druhá plocha uvnitř karty (QR kód, výpis k opsání) */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --radius-pill: 999px;        /* pilulka; přepínač rohů ji schválně nemění */
    --radius-circle: 50%;        /* kolečko; přepínač rohů ho schválně nemění */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --radius: 10px;
    --radius-sm: 6px;

    /* Jednotná výška ovládacích prvků. Bez ní má každý typ pole svůj vlastní rozměr podle
       obsahu (naměřeno 25. 9. 2026 ve filtru objednávek: hledání 34,5 px, datum 36,5 px,
       select 39 px) a řádek filtrů vypadá křivě. Výška se nastavuje, nedopočítává z paddingu. */
    --ctl-h: 38px;
    --ctl-h-sm: 32px;
    --shadow: 0 1px 2px rgba(20, 30, 60, .06), 0 8px 24px rgba(20, 30, 60, .05);
    --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sidebar: 232px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-bg);
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }
small { font-size: 12px; }

/* ---------- rozvržení ---------- */

.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }

.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand { display: flex; align-items: center; gap: var(--space-3); color: inherit; }
.brand:hover { text-decoration: none; }
.brand__mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--c-primary);
    color: var(--c-on-accent);
    font-weight: 700;
}
.brand__text { display: flex; flex-direction: column; font-weight: 600; }
.brand__text small { color: var(--c-muted); font-weight: 400; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--c-text);
}
.nav__item:hover { background: var(--c-gray-soft); text-decoration: none; }
.nav__item.is-active { background: var(--c-primary-soft); color: var(--c-primary-dark); font-weight: 600; }
.nav__item svg { display: block; width: 18px; height: 18px; flex: none; fill: currentColor; }

/* Skládací skupina nabídky (dávka 231). Záhlaví má stejný rozměr i odsazení jako řádek pod ním. */
.nav__box { display: flex; flex-direction: column; gap: 2px; }
.nav__toggle { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); color: var(--c-text); font-weight: 600; cursor: pointer; list-style: none; }
.nav__toggle::-webkit-details-marker { display: none; }
.nav__toggle:hover { background: var(--c-gray-soft); }
.nav__toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.nav__toggle > svg { display: block; width: 18px; height: 18px; flex: none; fill: currentColor; }
.nav__toggle > .nav__chevron { width: 12px; height: 12px; margin-left: auto; color: var(--c-muted); transition: transform .2s ease-out; }
.nav__box[open] > .nav__toggle > .nav__chevron { transform: rotate(90deg); }
.nav__box > .nav__item { padding-left: var(--space-5); }
.nav > .nav__item:last-of-type { margin-bottom: var(--space-2); }

.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.user { display: flex; align-items: center; gap: var(--space-3); }
.user__avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--radius-circle);
    background: var(--c-gray-soft);
    font-weight: 600;
}
.user__name { display: flex; flex-direction: column; line-height: 1.2; }
.user__name small { color: var(--c-muted); }

.main { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
/* 🔴 Bez `flex-wrap` se čtyři tlačítka na kartě zákazníka („Upravit · Nový výcvik ·
   Nová objednávka · Přijmout platbu“) nevejdou na telefon a roztáhnou CELOU stránku
   na 486 px místo 390 — navigace i nadpis pak odjíždějí do strany spolu s nimi.
   Naměřeno 9. 10. 2026; `--standalone` to mělo opravené jen pro sebe. */
.topbar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- pracovní lišta: hledání + globální středisko ---------- */

/* Lišta stojí nad nadpisem stránky a platí pro celou administraci, ne pro jeden seznam –
   proto je vizuálně oddělená linkou a nemá pozadí karty. */
.workbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--c-border);
}
.workbar__search { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0; position: relative; }
/* Proklik na frontend. `flex: none`, aby se při zúžení scvrkla navigace, ne tohle
   (pravidlo z `web-css-konvence`: v hlavičce se zmenšuje obsah, nikdy ikony). */
.workbar__front { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; padding: 0 var(--space-3); height: var(--ctl-h-sm); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-muted); font-size: 14px; white-space: nowrap; }
.workbar__front:hover { border-color: var(--c-primary); color: var(--c-primary-dark); text-decoration: none; }
.workbar__front svg { display: block; width: 16px; height: 16px; flex: none; fill: currentColor; }
.workbar__search .input-icon { flex: 1 1 auto; min-width: 0; max-width: 560px; }
.workbar__search input { width: 100%; background: var(--c-surface); }
/* Tlačítko potřebuje jen prohlíeč bez JS; s našeptávačem se odešle Enterem. */
.workbar.has-js .workbar__go { display: none; }

.scope { position: relative; flex: 0 0 auto; }
.scope__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-border-input);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: 13px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.scope__toggle::-webkit-details-marker { display: none; }
.scope__toggle:hover { border-color: var(--c-primary); }
.scope__toggle .icon { color: var(--c-muted); }
.scope__toggle .icon--xs { transform: rotate(90deg); }
.scope[open] .scope__toggle .icon--xs { transform: rotate(-90deg); }
/* Zapnutý rozsah musí být vidět na první pohled – jinak uživatel řeší, proč je seznam krátký. */
.scope.is-set .scope__toggle { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-dark); font-weight: 600; }
.scope.is-set .scope__toggle .icon { color: var(--c-primary-dark); }
.scope[open] .scope__toggle { border-color: var(--c-primary); }

/* 🔴 Zavřený `<details>` svoje potomky schová, ale absolutně umístěný potomek si BOX NECHÁ.
   Nabídka střediska tím na 320px displeji trčela 16 px přes okraj a prohlížeč si kvůli tomu
   roztáhl layout na 336 px — ačkoli nabídka nebyla vidět. Naměřeno `docs/responzivita.js`
   8. 10. 2026; na snímku to vidět není, protože nabídka je neviditelná.
   Zavřený stav proto box ruší úplně. */
.scope:not([open]) .scope__menu { display: none; }

.scope__menu {
    position: absolute;
    right: 0;
    z-index: 30;
    min-width: 240px;
    max-width: calc(100vw - 2 * var(--space-4));
    max-height: 60vh;
    overflow-y: auto;
    margin-top: var(--space-1);
    padding: var(--space-2);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(26, 34, 51, 0.16);
}
.scope__hint { margin: 0 0 var(--space-2); padding: 0 var(--space-2); font-size: 11px; color: var(--c-muted); }
.scope__item { display: block; padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm); color: var(--c-text); font-size: 13px; }
.scope__item:hover { background: var(--c-bg); }
.scope__item.is-active { background: var(--c-primary-soft); color: var(--c-primary-dark); font-weight: 600; }

/* ---------- výsledky hledání ---------- */

.hits { list-style: none; margin: 0; padding: 0; }
.hits__item + .hits__item { border-top: 1px solid var(--c-border); }
.hits__item a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm); color: var(--c-text); }
.hits__item a:hover { background: var(--c-bg); }
.hits__title { font-weight: 600; }
.hits__note { font-size: 12px; color: var(--c-muted); }

/* Našeptávač pod políčkem v liště – stejné řádky jako na stránce výsledků. */
.suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    max-width: 560px;
    max-height: 70vh;
    overflow-y: auto;
    margin-top: var(--space-1);
    padding: var(--space-2);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(26, 34, 51, 0.16);
}
.suggest__group { padding: var(--space-2) var(--space-2) var(--space-1); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); }
.suggest__item { display: flex; flex-direction: column; gap: 1px; padding: var(--space-2); border-radius: var(--radius-sm); color: var(--c-text); }
.suggest__item:hover, .suggest__item.is-active { background: var(--c-primary-soft); }
.suggest__note { font-size: 12px; color: var(--c-muted); }
.suggest__all { display: block; padding: var(--space-2); border-top: 1px solid var(--c-border); margin-top: var(--space-2); font-size: 12px; text-align: center; }

@media (max-width: 720px) {
    .workbar { flex-wrap: wrap; }
    .workbar__search { order: 2; width: 100%; }
    .scope { order: 1; margin-left: auto; }
}

/* ---------- karty a mřížky ---------- */

.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /* 🔴 Ořez kvůli zaobleným rohům, ale VODOROVNĚ raději posouvání. S `overflow: hidden`
       tabulka, která se do karty nevejde, tiše přijde o pravé sloupce — a protože stránku
       neroztáhne, žádné měření si toho nevšimne. Takhle jsou dostupné pořád. */
    overflow-x: auto;
    overflow-y: hidden;
}
.card--pad { padding: var(--space-4); }
/* Karta, která něco nevratně maže. Třída v šabloně byla, ale žádné pravidlo k ní nevedlo,
   takže „Smazat článek“ vypadalo jako kterákoli jiná karta (našel `smoke-css-admin.php`). */
.card--danger { border-color: var(--c-danger); }
.card--danger h2 { color: var(--c-danger); }
.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
}
/* 🔴 Nadpis s ikonou. `.icon` je `display: block` (potřebuje to v tlačítkách a v liště),
   takže uvnitř blokového <h2> spadne ikona na VLASTNÍ ŘÁDEK a z nadpisu jsou dva.
   Postihovalo to 50 nadpisů ve třiceti šablonách administrace — Položky, Platby, Splátky,
   Poznámka, Rychlé odkazy… (vidět 9. 10. 2026 na kartě objednávky). Dřív to mělo opravené
   jediné pravidlo pro `.card--hits`; tohle platí pro všechny nadpisy karet, takže další
   nadpis s ikonou spadne rovnou správně. Portál to má vyřešené u sebe (`.pg-section h2`). */
.card__head h2,
.card > h2 { display: flex; align-items: center; gap: var(--space-2); }
.card__head h2 .icon,
.card > h2 .icon { color: var(--c-muted); }

/* Pravá strana hlavičky karty: popisek a tlačítko vedle sebe. Bez obalu by je
   `justify-content: space-between` rozhodilo po celé šířce a nadpis by osiřel vlevo. */
.card__tools { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.card__tools .muted { text-align: right; }

.card__label { color: var(--c-muted); font-size: 12px; }
.card__value { font-size: 22px; font-weight: 700; }

/* 🔴 Mřížka bez určených sloupců si udělá jeden implicitní, široký `auto` – tedy
   nejméně na min-content. Široká tabulka uvnitř ho roztáhne a s ním celou stránku,
   i když rodič (`.detail`) už zúžit umí. `minmax(0, 1fr)` to utne. Proto se to hledalo
   dvakrát: oprava jen u `.detail` sama nestačila. */
.grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.card--stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); color: inherit; }
.card--stat:hover { text-decoration: none; border-color: var(--c-primary); }
.card--warn .card__value { color: var(--c-warning); }
.card--ok .card__value { color: var(--c-success); }

.center { text-align: center; }
.muted { color: var(--c-muted); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- tabulky ---------- */

.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-muted);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}
.table th.num { text-align: right; }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-bg); }
.table small { display: block; }
/* Ikona typu v buňce: `display: block` by ji odsunula nad text (sloupec Typ u položek
   objednávky). Buňka s ikonou a popiskem drží obojí na jednom řádku. */
.cell-icon { display: flex; align-items: center; gap: var(--space-2); }
.cell-icon .icon { flex: none; }
.table--compact th, .table--compact td { padding: var(--space-2) var(--space-4); }
.row-actions { text-align: right; white-space: nowrap; }

/* ---------- formuláře ---------- */

.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }

.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 160px; }
.field--grow { flex: 1 1 260px; }
.field > span { font-size: 12px; color: var(--c-muted); }
/* 🔴 `.input-icon` i `.range` jsou taky <span> a taky přímí potomci `.field`, takže pravidlo
   pro popisek dopadlo i na ně – hledací pole a datumovky měly 11px VERZÁLKY a šedou barvu,
   a tím i menší výšku než ostatní pole (naměřeno 25. 9. 2026). Obal musí zůstat neutrální. */
.field > .input-icon,
.field > .range { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
/* ⚠️ Pole, které se jen ČTE, nese místo ovládacího prvku <p> (kontext karty jízdy,
   stav výcviku s vypnutou ruční změnou). Odstavec má výchozí vnější okraj prohlížeče
   a v pružném sloupci se neslučuje, takže takové pole bylo o dva řádky vyšší než
   jeho sousedé. Mezery tady dělá `gap`, ne okraje. */
.field > p { margin: 0; }

/* Vyjmenovaný seznam typů se nevyplatil: `type="tel"` v něm chyběl, takže telefon u zákazníka vypadal
   jako z jiného webu (24. 9. 2026). Proto se styluje obráceně – všechna textová pole, kromě těch, která
   mají vlastní vzhled (přepínače, soubor, tlačítka, posuvník). Nový typ pole tím spadne rovnou správně. */
/* Řetězené :not() by mělo sílu osmi atributových selektorů a přebilo by i pozdější úpravy jednotlivých
   polí (.input-icon input, .combo__input). Seznam v jednom :not() má sílu jen toho nejsilnějšího z nich. */
input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="image"], [type="range"], [type="color"]),
select, textarea {
    /* `font: inherit` by pole zmenšilo všude, kde má okolí drobnější písmo (pruh hromadných akcí,
       panely sběru dat z MA) – naměřeno 13px. Velikost pole je věc pole, ne kontextu. */
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    height: var(--ctl-h);
    padding: 0 var(--space-3);
    border: 1px solid var(--c-border-input);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    width: 100%;
}
/* Pole, která rostou s obsahem, pevnou výšku mít nesmí. */
textarea, select[multiple], select[size] { height: auto; padding: var(--space-2) var(--space-3); }

/* Šipka selectu: nativní vypadá v každém prohlíeči jinak a v řádku filtrů se bítí s šipkou
   vyhledávacího comboboxu (`input.combo__input`), který nahrazuje delší seznamy. Kreslená šipka
   je proto stejná pro obojí, ať řádek nevypadá složený ze dvou různých sad polí. */
select:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%), linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
    background-position: right 15px top 52%, right 10px top 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--space-6);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--c-primary-soft);
    border-color: var(--c-primary);
}
textarea { min-height: 84px; resize: vertical; }

.form-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); padding: var(--space-4); }
.form__actions { display: flex; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--c-border); }
.field--wide { grid-column: 1 / -1; }

/* Dotazy pro školu (dávka 225): vlevo zadání, vpravo odpověď, na telefonu pod sebou. */
.dotazy { margin-bottom: var(--space-4); }
.dotazy__veta { margin: 0; padding: var(--space-3) var(--space-4) 0; }
.dotaz { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); padding: var(--space-4); border-bottom: 1px solid var(--c-border); }
.dotaz:last-of-type { border-bottom: 0; }
.dotaz > *, .dotaz__zadani, .dotaz__odpoved { min-width: 0; }
.dotaz__otazka { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.dotaz__udaj { margin: 0 0 var(--space-1); font-size: 13px; }
/* Nápady (dávka 324) mají tutéž položku: vlevo nápad, vpravo stav, naše odpověď a akce. */
.dotaz__stav { margin: 0; }
.dotaz__akce { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dotaz__akce form { display: inline-flex; margin: 0; }
/* Přílohy k odpovědi (dávka 304): pod polem odpovědi, dlouhý název souboru se zalomí a nevytlačí tlačítko. */
.dotaz__reseni { display: flex; flex-direction: column; gap: var(--space-3); }
.dotaz__soubory { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.dotaz__soubor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.dotaz__soubor a { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.dotaz__soubor .btn { margin-left: auto; }
/* Nápověda vedle tlačítka nesmí tlačítko smáčknout na dva řádky; na telefonu spadne pod ně. */
.dotazy .form__actions { flex-wrap: wrap; align-items: center; }
.dotazy .form__actions .btn { flex: none; }
.dotazy .form__actions .muted { flex: 1 1 280px; min-width: 0; }

/* ---------- tlačítka a odznaky ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--ctl-h);
    padding: 0 var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}
.btn:hover { text-decoration: none; border-color: var(--c-primary); color: var(--c-primary-dark); }
/* Zakázané tlačítko musí vypadat zakázaně. Bez tohohle pravidla bylo `disabled` jen
   v HTML: tlačítko zůstalo modré, obsluha na ně klikla a nestalo se nic. Týkalo se to
   „Dotáhnout nová data" (bez hesla k MA), „Odeslat poštu" (prázdná fronta) i „Vypsat
   termíny" (není co vypsat). `:hover` se u nich musí umlčet taky, jinak tlačítko na
   najetí myší ožije. */
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:hover, .btn:disabled:hover { border-color: var(--c-border); color: inherit; }
.btn--primary[disabled]:hover, .btn--primary:disabled:hover { border-color: var(--c-primary); color: var(--c-on-accent); }
.btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-primary-dark); color: var(--c-on-accent); }
.btn--danger { background: var(--c-danger-soft); border-color: transparent; color: var(--c-danger); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--c-muted); }
.btn--sm { height: var(--ctl-h-sm); padding: 0 var(--space-3); font-size: 13px; }
.btn--block { width: 100%; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--c-gray-soft);
    color: var(--c-muted);
}
.badge--success { background: var(--c-success-soft); color: var(--c-success); }
.badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.badge--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.badge--info { background: var(--c-info-soft); color: var(--c-info); }

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--c-info-soft);
    color: var(--c-primary-dark);
}
.alert--success { background: var(--c-success-soft); color: var(--c-success); }
.alert--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.alert--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.alert--floating { position: fixed; top: var(--space-4); left: 50%; transform: translateX(-50%); box-shadow: var(--shadow); }

/* ---------- stránkování ---------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}
.pagination__info { color: var(--c-muted); font-size: 12px; }
.pagination__pages { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.page {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--c-text);
}
.page:hover { background: var(--c-gray-soft); text-decoration: none; }
.page.is-active { background: var(--c-primary); color: var(--c-on-accent); }
.page--gap { color: var(--c-muted); }

/* ---------- graf ---------- */

.chart { display: flex; align-items: flex-end; gap: var(--space-2); height: 180px; padding: var(--space-4); }
.chart__bar { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: var(--space-1); }
.chart__bar small { color: var(--c-muted); font-size: 11px; }
.chart__fill { display: block; width: 100%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--c-primary); min-height: 2px; }
.chart__fill--0 { height: 0; }
.chart__fill--5 { height: 5%; }
.chart__fill--10 { height: 10%; }
.chart__fill--15 { height: 15%; }
.chart__fill--20 { height: 20%; }
.chart__fill--25 { height: 25%; }
.chart__fill--30 { height: 30%; }
.chart__fill--35 { height: 35%; }
.chart__fill--40 { height: 40%; }
.chart__fill--45 { height: 45%; }
.chart__fill--50 { height: 50%; }
.chart__fill--55 { height: 55%; }
.chart__fill--60 { height: 60%; }
.chart__fill--65 { height: 65%; }
.chart__fill--70 { height: 70%; }
.chart__fill--75 { height: 75%; }
.chart__fill--80 { height: 80%; }
.chart__fill--85 { height: 85%; }
.chart__fill--90 { height: 90%; }
.chart__fill--95 { height: 95%; }
.chart__fill--100 { height: 100%; }

/* ---------- přihlášení ---------- */

.bare { display: grid; place-items: center; min-height: 100vh; }
.login { width: min(100%, 380px); padding: var(--space-4); }
.login__card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.login__brand { display: flex; align-items: center; gap: var(--space-3); }
.login__brand small { display: block; color: var(--c-muted); }

.error__code { font-size: 40px; }

/* ---------- detail ---------- */

.detail { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 2fr) minmax(min(260px, 100%), 1fr); align-items: start; }
.deflist { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: var(--space-2) var(--space-4); padding: var(--space-4); margin: 0; }
.deflist dt { color: var(--c-muted); font-size: 12px; }
.deflist dd { margin: 0; }

/* Řetězec SPAYD pro QR platbu: dlouhý, bez mezer, a obsluha ho diktuje nebo
   kopíruje. Bez `word-break` roztáhne kartu do šířky obrazovky. */
.spayd { display: block; padding: var(--space-2); background: var(--c-surface-2);
    border-radius: var(--radius-sm); font-size: 12px; line-height: 1.5;
    word-break: break-all; user-select: all; }

/* 🔴 Pevná bílá pod QR, ne token: čtečka hledá tmavé moduly na světlém podkladu
   a token se může změnit, aniž by to někdo spojil s tím, že kód přestal jít
   načíst. Odsazení je světlý okraj, který norma kolem kódu žádá. */
.qr-platba { display: inline-block; margin: var(--space-3) 0 0; padding: var(--space-2);
    background: #fff; border-radius: var(--radius-sm); text-align: center; }
/* ⚠️ Velikost řídí modul zadaný v šabloně, ne tenhle soubor — pevná šířka by ho
   přebila a kód by se při větším objemu dat zjemnil. `max-width` je jen pojistka. */
.qr-platba svg { display: block; max-width: 100%; height: auto; }
.qr-platba figcaption { margin-top: var(--space-1); max-width: 190px; font-size: 11px;
    line-height: 1.4; color: var(--c-muted); }

.tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.tab { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--c-muted); }
.tab.is-active { background: var(--c-surface); color: var(--c-text); font-weight: 600; box-shadow: var(--shadow); }

@media (max-width: 1000px) {
    /* 🔴 `1fr` je zkratka za `minmax(auto, 1fr)` a to `auto` znamená min-content: široká
       tabulka uvnitř sloupec roztáhne a s ním celou stránku. Na mobilu se pak dal web
       posouvat do strany a prohlížeč si layout natáhl na 486 px místo 390 (naměřeno
       9. 10. 2026 na kartě zákazníka). `minmax(0, 1fr)` sloupci dovolí se zúžit. */
    .detail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .nav { flex-direction: row; flex-wrap: wrap; }
    .sidebar__foot { margin-left: auto; flex-direction: row; align-items: center; }
    .main { padding: var(--space-4); }
    .card { overflow-x: auto; }
    .table { min-width: 640px; }
}

/* ---------- výběr zákazníka ---------- */

.picker { display: flex; gap: var(--space-2); }
.picker input { flex: 1 1 auto; }
.picker__results { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.picker__results li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--c-border); }
.picker__results li:last-child { border-bottom: 0; }

/* ---------- ikony ---------- */

.icon { display: block; width: 18px; height: 18px; flex: none; fill: currentColor; }
.icon--xs { width: 13px; height: 13px; }
.icon--lg { width: 22px; height: 22px; }

/* ---------- panel filtrů ---------- */

.toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
/* Filtry stály na flexu, takže každé pole mělo jinou šířku, druhá řada nenavazovala na první
   a popisek splýval s obsahem („je to celé vybledlé, špatně se v tom orientuje“, 24. 9. 2026).
   Teď je to mřížka s pevnou šířkou sloupce: pole pod sebou lícují a řádky na sebe navazují. */
/* 🔴 Mřížka, ne flex. Flex rozdělí volné místo mezi položky **jednoho řádku**, takže řádek se šesti
   poli měl jinou šířku pole než řádek se třemi – naměřeno 252 / 217 / 320 px v jednom panelu
   (25. 9. 2026). Mřížka drží sloupce stejné napříč všemi řádky.

   `auto-fit` (ne `auto-fill`): když je polí méně než sloupců – sbalený panel se čtyřmi filtry –
   prázdné stopy zkolabují a pole vyplní řádek. S `auto-fill` zůstala vpravo prázdná polovina
   a tlačítka visela pod ní. */
/* `dense`: daterange zabírá dva sloupce, a když se do zbytku řádku nevejde, přeskočí – bez
   `dense` by po něm zbyla prázdná mezera uprostřed panelu (naměřeno až 712 px). */
.toolbar__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); grid-auto-flow: row dense; gap: var(--space-3) var(--space-4); align-items: end; }
.toolbar__row > .field { min-width: 0; }
/* Dva sloupce dostane jen daterange – má uvnitř dvě pole. Hledacímu poli stačí jeden. */
.toolbar__row > .field--range,
.toolbar__row > .field--wide { grid-column: span 2; }
/* 🔴 Zalamovat. Bez `flex-wrap` se tlačítka, která se do řádku nevešla, vysunula DOLEVA za okraj panelu
   (`justify-content: flex-end`) — a doleva posuvník nevznikne, takže měření „stránka nepřetéká" prošlo. Na 390 px
   nebylo vidět „Filtrovat" u zákazníků, výcviků, jízd ani objednávek a u plateb se šesti tlačítky čtyři
   (naměřeno 28. 10. 2026, dávka 171). */
.toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; justify-content: flex-end; }
.toolbar.is-expanded .field--advanced { display: flex; }
.field--advanced { display: none; }

/* Popisek musí být na první pohled popisek, ne další text v poli. */
.toolbar .field > span { font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); }
.toolbar .field > .input-icon,
.toolbar .field > .range { font: inherit; font-weight: 400; color: inherit; letter-spacing: normal; text-transform: none; }
.toolbar .field input,
.toolbar .field select,
.toolbar .field .combo__input { color: var(--c-text); }
.toolbar .field input::placeholder { color: var(--c-muted); opacity: 0.75; }

.input-icon { position: relative; display: block; }
.input-icon .icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--c-muted); }
.input-icon input { padding-left: calc(var(--space-3) * 2 + 18px); }

.range { display: flex; align-items: center; gap: var(--space-2); }
/* `input[type=date]` má vlastní minimální šířku; bez `min-width: 0` dvojice datumů přeteče
   ze sloupce mřížky a překryje sousední filtr. */
.range > input { flex: 1 1 0; min-width: 0; }
.range__sep { color: var(--c-muted); }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--c-gray-soft); border-radius: var(--radius-sm); }
.segmented__item { padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); color: var(--c-muted); font-size: 13px; font-weight: 500; }
.segmented__item:hover { color: var(--c-text); text-decoration: none; }
.segmented__item.is-active { background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow); }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.chips__label { font-size: 12px; color: var(--c-muted); }
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
    font-size: 12px;
}
.chip:hover { text-decoration: none; background: var(--c-primary); color: var(--c-on-accent); }
/* 🔴 Vybraný filtr musí být poznat. Třídu `is-active` kreslily tři obrazovky
   (deník, materiály, datové zprávy), ale pravidlo pro ni bylo jen uvnitř
   `.level__picker` — vybraný chip proto vypadal stejně jako ostatní (dávka 124). */
.chip.is-active { background: var(--c-primary); color: var(--c-on-accent); }
.chip__label { opacity: .75; }
.chip--reset { background: transparent; color: var(--c-muted); text-decoration: underline; }
.chip--reset:hover { background: transparent; color: var(--c-danger); }

/* ---------- řazení v hlavičce ---------- */

.th-sort a { display: inline-flex; align-items: center; gap: var(--space-1); color: inherit; }
.th-sort a:hover { color: var(--c-text); text-decoration: none; }
.th-sort__arrow { font-size: 9px; color: var(--c-primary); }

/* ---------- navigace se skupinami ---------- */

.nav__group { margin-top: var(--space-3); padding: 0 var(--space-3) var(--space-1); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.sidebar { overflow-y: auto; }

/* ---------- tlačítka s ikonou ---------- */

.btn .icon { width: 16px; height: 16px; }
.btn--icon { padding: var(--space-2); }

/* ---------- prázdný stav ---------- */

.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); color: var(--c-muted); text-align: center; }
.empty .icon { width: 28px; height: 28px; color: var(--c-border); }

/* ---------- souhrnné dlaždice nad seznamem ---------- */

.summary { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-border); background: var(--c-bg); }
.summary__item { display: flex; flex-direction: column; }
.summary__label { font-size: 11px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .03em; }
.summary__value { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- drobečky, hlavička, hlášky ---------- */

.topbar__title { display: flex; flex-direction: column; gap: 2px; }
.crumbs { display: flex; align-items: center; gap: var(--space-1); font-size: 12px; color: var(--c-muted); }
.crumbs a { color: var(--c-muted); }
.crumbs .icon { color: var(--c-border); }
.alert { display: flex; align-items: center; gap: var(--space-2); }

/* ---------- rozcestník číselníků ---------- */

.tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.tile { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); color: inherit; }
.tile:hover { text-decoration: none; border-color: var(--c-primary); }
.tile__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: var(--radius-sm); background: var(--c-primary-soft); color: var(--c-primary-dark); }
.tile__text { display: flex; flex-direction: column; }
.tile__text small { color: var(--c-muted); }
.tile__count { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- záložky nastavení ---------- */

.subnav { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--c-border); }
.subnav a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 2px solid transparent; color: var(--c-muted); }
.subnav a:hover { color: var(--c-text); text-decoration: none; }
.subnav a.is-active { border-bottom-color: var(--c-primary); color: var(--c-text); font-weight: 600; }
/* Druhá řada odkazů pod přepínačem číselníků: obrazovky NAD celým číselníkem
   (u e-mailových šablon „Vzory zpráv"). Bez spodní linky, aby se nepletla s první. */
.subnav--sub { border-bottom: 0; margin-top: calc(-1 * var(--space-1)); }
.subnav--sub a { padding-top: var(--space-1); padding-bottom: var(--space-1); border-bottom: 0; }

/* ---------- barevná tečka (štítky, skupiny) ---------- */


/* ---------- přístupnost a detaily tabulek ---------- */

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.table thead th { position: sticky; top: 0; z-index: 1; background: var(--c-surface); }
.table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c-bg) 45%, transparent); }
.table tbody tr:hover { background: var(--c-primary-soft); }
.table a.strong { color: var(--c-text); }
.table a.strong:hover { color: var(--c-primary-dark); }

/* číslo v buňce nikdy nezalomit a zarovnat na desetiny */
.num { font-variant-numeric: tabular-nums; }

/* stav „bez hodnoty" má být tišší než data */
.table td:empty::after { content: "—"; color: var(--c-muted); }
/* V patičce se součty a ve sloupci akcí se žádná hodnota nečeká, takže pomlčka tam
   vypadá jako chybějící číslo (vidět 9. 10. 2026 za součtem položek i splátek). */
.table tfoot td:empty::after,
.table td.row-actions:empty::after { content: none; }

/* dlouhý text v buňce zkrátit, ale nechat dostupný přes title */
.ellipsis { display: block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* řádek zvýrazněný podle stavu (např. propadlý posudek, dluh) */
.row--warning td { background: var(--c-warning-soft); }

/* ⚠️ TISK MÁ VLASTNÍ, ČERNOBÍLOU PALETU — a je to schválně (dávka 115 to nechala být):
   barevná linka karty vyjde na černobílé tiskárně jako šedá kaše, kdežto #ccc je šedá
   zvolená. Přepínač vzhledu se tisku netýká ze stejného důvodu. */
@media print {
    .sidebar, .toolbar, .pagination, .row-actions, .topbar__actions, .workbar { display: none; }
    .app { grid-template-columns: 1fr; }
    .card { box-shadow: none; border-color: #ccc; }
}

/* Akce v řádku tabulky: formuláře jsou blokové, bez tohoto by řádek narostl na čtyři patra. */
/* 🔴 `display: flex` na <td> vytrhne buňku z tabulkového layoutu – prohlížeč kolem ní udělá
   anonymní buňku, takže na ni nedopadne pozadí řádku. Zvýrazněný řádek pak u tlačítek zbělá
   (vidět 9. 10. 2026 na upravované položce objednávky). Buňka proto zůstává buňkou
   a tlačítka se řadí jako řádkové prvky. */
.row-actions { text-align: right; }
.row-actions form { display: inline-flex; vertical-align: middle; }
.row-actions > .btn { vertical-align: middle; }

/* ---------- přihlášení přes Google ---------- */

.login__google { display: flex; justify-content: center; min-height: 44px; }
.login__or { display: flex; align-items: center; gap: var(--space-3); color: var(--c-muted); font-size: 12px; }
.login__or::before, .login__or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--c-border); }
.login__form { display: flex; flex-direction: column; gap: var(--space-4); }
.login__forgot { margin: 0; text-align: center; font-size: 13px; }

/* ------------------------------------------------------------- past na roboty

   🔴 TŘÍDA `.hp` TU DO DÁVKY 122 CHYBĚLA, a nebyla to drobnost: na formuláři
      zapomenutého hesla bylo pole „Nevyplňujte" VIDĚT, a kdo ho vyplnil, dostal
      „odkaz jsme poslali" a jeho žádost se mlčky zahodila. Tutéž past má portál
      (`portal.css`) i veřejná přihláška (`prihlaska.css`) — admin ji neměl, protože
      do téhle dávky žádný veřejný formulář neměl.

   🔴 NE `display: none`. Část robotů taková pole pozná a přeskočí je; a hlavně by
      pole zmizelo i pro odečítač obrazovky. Odsouvá se mimo plochu, z pořadí
      tabulátoru ho vyřadí `tabindex="-1"` v HTML. */

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Odkaz s ikonou v přihlašovací kartě — ikona vedle textu, ne nad ním. */
.login__card .muted a { display: inline-flex; align-items: center; gap: 6px; }
.login__card .muted a svg { flex: 0 0 auto; }

/* ------------------------------------------------------------------ sběr dat z moje-autoškoly */
.alert--info { background: var(--c-info-soft); color: var(--c-info); }

.ma { display: grid; gap: var(--space-5); }
.ma-status { display: grid; gap: var(--space-4); border-left: 4px solid var(--c-border); }
.ma[data-state="running"] .ma-status { border-left-color: var(--c-primary); }
.ma[data-state="active"] .ma-status { border-left-color: var(--c-success); }
.ma[data-state="paused"] .ma-status { border-left-color: var(--c-danger); }
.ma-status__main { display: flex; align-items: center; gap: var(--space-3); }
.ma-status__title { font-size: 18px; }
.ma-status__timer { margin-left: auto; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-muted); }
.ma-status__numbers { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-2); font-size: 13px; }
/* Věta s fajfkou musí téct jako běžný text – jako flex se každý kousek (text, <strong> s datem)
   stal vlastní položkou a dlouhá věta se pak lámala do několika úzkých sloupců. */
.ma-lock { display: block; margin: 0; font-size: 13px; }
.ma-lock > .icon { display: inline-block; vertical-align: -2px; margin-right: var(--space-2); }

.ma-dot { flex: none; width: 12px; height: 12px; border-radius: var(--radius-circle); background: var(--c-border); }
.ma[data-state="running"] .ma-dot { background: var(--c-primary); }
.ma[data-state="active"] .ma-dot { background: var(--c-success); animation: ma-pulse 1.2s ease-in-out infinite; }
.ma[data-state="paused"] .ma-dot { background: var(--c-danger); }
@keyframes ma-pulse { 50% { opacity: .35; transform: scale(1.35); } }

/* Proužek postupu — JEDNA komponenta pro celou administraci (dávka 135).
   Do té dávky se jmenovala `.ma-progress` a kreslila jen postup sběru z MA; výpis výcviků
   proužek neměl vůbec (jen text „X / Y h"). Název se proto zobecnil — druhá lišta s jiným
   jménem by se s touhle nevyhnutelně rozešla. Šířku nese atribut `value`, ne inline styl. */
.progress { display: block; width: 100%; height: 10px; border: 0; border-radius: 5px; overflow: hidden; background: var(--c-gray-soft); appearance: none; -webkit-appearance: none; }
.progress::-webkit-progress-bar { background: var(--c-gray-soft); }
.progress::-webkit-progress-value { background: var(--c-primary); border-radius: 5px; transition: width .6s ease; }
.progress::-moz-progress-bar { background: var(--c-primary); border-radius: 5px; }
.progress--sm { display: inline-block; width: 140px; height: 8px; vertical-align: middle; }
/* Ve výpisu stojí proužek pod dvouřádkovým textem buňky, proto vlastní rozměr. */
.progress--cell { display: block; width: 100%; max-width: 120px; height: 6px; margin-top: 3px; }
.ma-col-progress { white-space: nowrap; }
/* Bez spodní meze zúží sloupec s bezřádkovým průběhem popis databáze na pár slov na řádek. */
.ma-datasets td:first-child { min-width: 176px; }
.ma-datasets .progress { max-width: 96px; }
.ma-percent { display: inline-block; min-width: 56px; margin-left: var(--space-2); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }

.ma-pending { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; padding: 0; list-style: none; }
.ma-pending li { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--c-gray-soft); font-size: 13px; }

.ma-log { max-height: 520px; overflow-y: auto; padding: var(--space-2) 0; font-size: 13px; }
.ma-log__row { display: grid; grid-template-columns: 64px 84px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: 5px var(--space-4); border-bottom: 1px solid var(--c-gray-soft); }
.ma-log__row[hidden] { display: none; }
.ma-log__time { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.ma-log__tag { justify-self: start; padding: 1px var(--space-2); border-radius: var(--radius-sm); background: var(--c-gray-soft); color: var(--c-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.ma-log__text { overflow-wrap: anywhere; }
.ma-log__row--new .ma-log__tag { background: var(--c-success-soft); color: var(--c-success); }
.ma-log__row--changed .ma-log__tag { background: var(--c-warning-soft); color: var(--c-warning); }
.ma-log__row--request .ma-log__tag,
.ma-log__row--import .ma-log__tag { background: var(--c-primary-soft); color: var(--c-primary); }
.ma-log__row--warn .ma-log__tag { background: var(--c-warning-soft); color: var(--c-warning); }
.ma-log__row--error { background: var(--c-danger-soft); }
.ma-log__row--error .ma-log__tag { background: var(--c-danger); color: var(--c-on-accent); }
.ma-log__row--wait .ma-log__text,
.ma-log__row--info .ma-log__text { color: var(--c-muted); }

@media (max-width: 720px) {
    .ma-log__row { grid-template-columns: 56px minmax(0, 1fr); }
    .ma-log__tag { display: none; }
    .progress--sm { width: 80px; }
    .ma-pending { grid-template-columns: 1fr; }
}
button.segmented__item { border: 0; background: none; font-family: inherit; cursor: pointer; }
button.segmented__item.is-active { background: var(--c-surface); }
.ma .card__head form { margin: 0; }

/* ------------------------------------------------------------------ hromadné akce v seznamu */
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-border); background: var(--c-gray-soft); font-size: 13px; }
.bulk__label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.bulk select { width: auto; min-width: 180px; }
.bulk__scope { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.bulk__scope.is-disabled { color: var(--c-muted); cursor: not-allowed; }
.col-check { width: 36px; text-align: center; }
.col-check input { width: 16px; height: 16px; cursor: pointer; }
.ma-backups { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: 13px; }
.ma-backups li { display: flex; justify-content: space-between; gap: var(--space-3); }
.ma-backups a { display: inline-flex; align-items: center; gap: var(--space-2); }
.check { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; cursor: pointer; }
.check input { width: 16px; height: 16px; }
.ma-history { margin: 0 0 var(--space-4); font-size: 13px; }
.ma-history summary { cursor: pointer; color: var(--c-primary); font-weight: 500; }
.ma-history .table { margin-top: var(--space-2); }
.ma-reach { margin-bottom: var(--space-3); }
.ma-reach th { font-weight: 500; }
.ma .form__actions .check { font-weight: 400; font-size: 13px; }

/* ------------------------------------------------------------------ odchozí pošta */

.mail-setup { display: grid; gap: var(--space-3); }
.mail-setup__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-5); }
.mail-setup__row > div { display: grid; gap: 2px; }
/* Tlačítka patří na pravý kraj, ale `margin-left: auto` smí platit jen tam, kde se řádek
   nezalomil — po zalomení by akce odskočily doprava pod údaje a vypadaly by jako cizí blok. */
.mail-setup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mail-setup__actions form { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.mail-setup__actions .btn { white-space: nowrap; }
.mail-setup__test input { min-width: 180px; }
@media (min-width: 1100px) {
    .mail-setup__actions { margin-left: auto; }
}
.mail-setup p { margin: 0; }

/* Prostá verze zprávy: zalomit, ne rolovat do šířky. */
.mail-plain {
    margin: 0;
    padding: var(--space-4);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Náhled jede v `<iframe>` kvůli sandboxu, takže výšku musí dát CSS — obsah se zvenčí neměří. */
.mail-preview { display: block; width: 100%; height: 520px; border: 0; background: var(--c-bg); }

/* ------------------------------------------------------------------ kontrola peněz */

/* Karty bez vlastního vnitřního odsazení (`.card--pad`) — tabulka má sahat na kraj,
   text uvnitř ne. Proto obal na text, ne padding na celou kartu. */
.checks { display: grid; gap: var(--space-4); }
.checks__body { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.checks__body p { margin: 0; }
.checks__sum { font-size: 15px; }
.checks__note { margin: 0; padding: var(--space-3) var(--space-4); font-size: 13px; }

/* ------------------------------------------------------------------ kontrola úplnosti dat z MA */
.ma-check { display: grid; gap: var(--space-4); }
.ma-datasets__note { margin: 0; padding: var(--space-3) var(--space-4) 0; font-size: 13px; }
.card--pad .ma-datasets__note { padding: 0; }
.ma-gaps { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ma-gaps li + li { margin-top: var(--space-1); }
.is-bad { color: var(--c-danger); }

/* ------------------------------------------------------------------ vyhledávání v dlouhém selectu
   Původní <select> zůstává v dokumentu a musí být zaostřitelný (jinak prohlížeč u `required` zruší
   odeslání bez jediné hlášky), proto se schovává odsunutím, ne přes display: none. */
.combo { position: relative; }
/* Karta s rozbalenou nabídkou ořez na chvíli pustí, jinak by seznam končil u jejího okraje.
   Zapíná to `admin.js` (`propustKartu`), aby to platilo jen po dobu, kdy je nabídka otevřená. */
.card.is-open-menu { overflow: visible; }
.combo__native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
input.combo__input { background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%), linear-gradient(135deg, var(--c-muted) 50%, transparent 50%); background-position: right 15px top 52%, right 10px top 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--space-6); }
.combo__list { position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; right: 0; max-height: 280px; overflow-y: auto; margin: 0; padding: var(--space-1); list-style: none; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); box-shadow: 0 8px 24px rgb(15 23 42 / 12%); }
.combo__option { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; }
.combo__option.is-chosen { font-weight: 600; }
.combo__option.is-active { background: var(--c-primary-soft); color: var(--c-primary); }
.combo__empty { padding: var(--space-2) var(--space-3); color: var(--c-muted); font-size: 13px; }
/* Kategorie u položky ceníku. Vpravo a slabě – je to zařazení, ne součást názvu. */
.combo__group { float: right; margin-left: var(--space-3); color: var(--c-muted); font-size: 12px; }
/* Nabídka uvnitř okna: umístěná vůči obrazovce (polohu dopočítává admin.js), protože
   rolovací tělo okna by ji jinak oříznulo. */
.combo__list--okno { position: fixed; z-index: 60; top: auto; left: auto; right: auto; }

/* nabídka se zaškrtávátky (výběr víc hodnot naráz) */
.combo__items { margin: 0; padding: 0; list-style: none; }
.combo__items label { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; }
.combo__items label:hover { background: var(--c-gray-soft); }
.combo__items input { width: 16px; height: 16px; flex: none; }
.combo__search { margin-bottom: var(--space-1); }

/* ------------------------------------------------------------------ kalendář jízd */
.cal { display: grid; gap: var(--space-4); --cal-slot: 26px; --cal-hour: 2; }
/* 🔴 KROK MŘÍŽKY ŘÍDÍ NASTAVENÍ ŠKOLY, NE CSS. `--cal-hour` je POČET ŘÁDKŮ NA HODINU, takže
   linka na pozadí vede vždycky po celé hodině — i při kroku 15 minut, kdy by pevná perioda
   „každé dva řádky" kreslila linku po půlhodině a mřížka by lhala. Jemnější krok znamená víc
   řádků, proto se u něj zároveň sníží výška jednoho; jinak by den byl dvakrát vyšší než obrazovka.
   Třídu `cal--krok-N` dává šablona, protože inline styly v HTML se v tomhle projektu nepíšou. */
.cal--krok-60 { --cal-hour: 1; --cal-slot: 40px; }
.cal--krok-30 { --cal-hour: 2; --cal-slot: 26px; }
.cal--krok-20 { --cal-hour: 3; --cal-slot: 20px; }
.cal--krok-15 { --cal-hour: 4; --cal-slot: 16px; }
.cal--krok-10 { --cal-hour: 6; --cal-slot: 12px; }
.cal--krok-5 { --cal-hour: 12; --cal-slot: 8px; }
/* 🔴 KOMPAKTNÍ ZOBRAZENÍ (dávka 104): jeden řádek = 30/45/60/90 minut a linka vede po
   KAŽDÉM řádku (`--cal-hour: 1`). Hodinová linka tu být nemůže: 45 minut se do hodiny
   nevejde celým počtem řádků, takže by mřížka ukazovala čáru jinde, než kde hodina je.
   ⚠️ Krok mřížky NENÍ krok plánovače — zhuštěné zobrazení nemění, na jaký čas se jízda
   zakládá; o tom rozhoduje `data-step`, který zůstává z nastavení Provozu. */
.cal--kompakt { --cal-hour: 1; }
.cal--kompakt-30 { --cal-slot: 22px; }
.cal--kompakt-45 { --cal-slot: 28px; }
.cal--kompakt-60 { --cal-slot: 34px; }
.cal--kompakt-90 { --cal-slot: 46px; }
.cal__nav { display: flex; gap: var(--space-1); align-items: flex-end; }
.cal__filter { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; flex: 1 1 auto; }
.cal__hint { margin: 0; padding: 0 var(--space-1); font-size: 13px; }
.cal__hint.is-bad { color: var(--c-danger); font-weight: 500; }
.cal__hint.is-good { color: var(--c-success); }
.cal__legend { margin: 0; padding: 0 var(--space-1); font-size: 12px; }
.cal__day.is-today { border-color: var(--c-primary); }
.cal__empty { padding: var(--space-4); margin: 0; }
/* Úkoly dne (dávka 107) — pruh NAD mřížkou, protože termín úkolu je den, ne hodina */
.cal__ukoly { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0 var(--space-3) var(--space-2); }
.cal__ukol { display: flex; align-items: baseline; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-sm); border-left: 3px solid var(--c-muted); background: var(--c-gray-soft); font-size: 12px; }
.cal__ukol.is-urgent { border-left-color: var(--c-danger); }
.cal__ukol a { color: var(--c-text); text-decoration: none; }
.cal__ukol a:hover { text-decoration: underline; }
.cal__ukol small { white-space: nowrap; }
/* 🔴 MŘÍŽKA JE VLASTNÍ POSUVNÉ OKNO (dávka 136), aby hlavička se jmény učitelů a osa
   s časy zůstaly na místě. Dřív posouvala stránka: mřížka má při 07:00–19:00 po 15
   minutách 48 řádků po 16 px, tedy 768 px, takže v dolní třetině dne už plánovač
   neviděl, ČÍ ten sloupec je — a to je přesně otázka, na kterou MA odpovídá
   iniciálami učitele v každém bloku (`kalendar_kompakt_zobraz_ucitel_inicialy`).
   ⚠️ `overflow-x: auto` samo nestačí: `sticky` se váže na posouvajícího předka, a ten
   se svisle neposouval, takže by `top: 0` nikdy nezabralo. Proto `max-height`
   a `overflow: auto` — s podlahou 24rem, aby okno na telefonu nebylo na dva řádky. */
.cal__grid { display: flex; overflow: auto; max-height: max(24rem, calc(100vh - 12rem)); padding: 0 var(--space-3) var(--space-3); }
/* Osa s časy drží vlevo, jinak se při vodorovném posuvu ztratí, na jaké hodině se stojí. */
.cal__times { flex: none; width: 48px; position: sticky; left: 0; z-index: 3; background: var(--c-surface); }
/* ⚠️ Rohová buňka drží v obou osách — `left` má od `.cal__times`, `top` si bere tady.
   Bez vlastního `z-index` by ji přejely bloky prvního sloupce. */
.cal__corner { height: 28px; position: sticky; top: 0; z-index: 4; background: var(--c-surface); }
.cal__time { height: var(--cal-slot); font-size: 11px; color: var(--c-muted); text-align: right; padding-right: var(--space-2); transform: translateY(-6px); }
.cal__col { flex: 1 1 120px; min-width: 120px; border-left: 1px solid var(--c-border); }
/* 🔴 JMÉNO UČITELE ZŮSTÁVÁ CELÉ A ZŮSTÁVÁ VIDĚT. Vlastní podklad je povinný: bez něj
   je hlavička průhledná a bloky by jí prosvítaly, jak pod ní podjíždějí. */
.cal__head { height: 28px; padding: 0 var(--space-2); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; top: 0; z-index: 2; background: var(--c-surface); }
.cal__slots { position: relative; }
.cal__slots { background-image: repeating-linear-gradient(to bottom, var(--c-border) 0 1px, transparent 1px calc(var(--cal-slot) * var(--cal-hour))); background-size: 100% calc(var(--cal-slot) * var(--cal-hour)); }
.cal--js .cal__slots { cursor: copy; }
/* `cal__block` je společný podklad obou vrstev (jízda i přednáška) — umisťuje je tentýž kód */
.cal__block { display: block; margin: 0 2px; padding: 2px var(--space-2); border-radius: var(--radius-sm); border-left: 3px solid var(--c-primary); background: var(--c-primary-soft); color: var(--c-text); font-size: 11px; line-height: 1.3; overflow: hidden; }
.cal__block strong { margin-right: var(--space-1); }
.cal__block span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* `small` nese SPZ a zkratku stanoviště — musí se oříznout stejně jako jméno žáka nad ním,
   jinak se dlouhá dvojice zalomí na druhý řádek a u 45minutové jízdy (tři řádky mřížky)
   vytlačí čas s jménem mimo blok */
.cal__block small { display: block; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal--js .cal__block { position: absolute; left: 0; width: 100%; padding-right: var(--space-1); }
.cal__lesson:hover { text-decoration: none; filter: brightness(0.97); }
.cal--js .cal__lesson { cursor: grab; touch-action: none; }
.cal__lesson.is-dragging { cursor: grabbing; box-shadow: 0 6px 18px rgb(15 23 42 / 22%); z-index: 5; }
.cal__lesson--completed { border-left-color: var(--c-success); background: var(--c-success-soft); }
.cal__lesson--cancelled { border-left-color: var(--c-muted); background: var(--c-gray-soft); color: var(--c-muted); text-decoration: line-through; }
.cal__lesson--no_show { border-left-color: var(--c-warning); background: var(--c-warning-soft); }
.cal__lesson--in_progress { border-left-color: var(--c-warning); background: var(--c-warning-soft); }
/* přednáška: podklad, ne záznam — přerušovaný okraj a šrafa říkají „tohle se tu neupravuje“,
   a od zrušené jízdy ji odliší šrafa (ta má jen šedou plochu s přeškrtnutým textem) */
.cal__lecture { border-left-style: dashed; border-left-color: var(--c-muted); background: repeating-linear-gradient(135deg, var(--c-gray-soft) 0 6px, transparent 6px 12px); color: var(--c-muted); cursor: default; }
.cal__lecture strong { color: var(--c-text); }
/* Pracovní doba učitele (dávka 163): zelený podklad sloupce POD bloky, jako v MA. Je v DOM před bloky,
   takže ho bloky překryjí bez z-indexu, a klik jím projde do mřížky (zakládání jízdy). Bez skriptu
   se nekreslí — poloha je z data atributů, výpis u dne zůstává. */
.cal__pracdoba { display: none; }
.cal--js .cal__pracdoba { display: block; position: absolute; left: 0; right: 0; background: var(--c-success-soft); opacity: .7; pointer-events: none; }
.cal--js .cal__pracdoba--ceka { background: repeating-linear-gradient(135deg, var(--c-success-soft) 0 6px, transparent 6px 12px); }
.cal__rezimy { flex-wrap: wrap; gap: var(--space-3); }
.cal__rezimy .btn { white-space: nowrap; }
.cal__meta { font-style: normal; color: var(--c-muted); }
.cal__cinnost { border-left-color: var(--c-warning); background: var(--c-warning-soft); }
.cal__doprovod { border-left-style: dashed; background: var(--c-gray-soft); }
.cal__blokace { border-left-color: var(--c-danger); background: var(--c-danger-soft); color: var(--c-muted); cursor: default; }
.row--chyba td { background: var(--c-danger-soft); }
.jizdy__hromadne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.tacho__tlacitka { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.cal__pracdoby { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0 var(--space-3) var(--space-2); font-size: 12px; }
.cal__pracdoby--pod { padding-top: var(--space-2); border-top: 1px solid var(--c-border); }
.cal__pracdoby li { padding: 2px var(--space-2); border-radius: var(--radius-sm); border-left: 3px solid var(--c-success); background: var(--c-success-soft); }
.cal__pracdoby strong { margin-right: var(--space-1); }

/* zkratky kurzů v seznamu zákazníků (B, B96, C…) – aby šlo na první pohled vidět, co kdo má */
.tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 2px; padding: 1px var(--space-2); border: 1px solid var(--c-border-input); border-radius: var(--radius-sm); background: var(--c-gray-soft); font-size: 12px; font-weight: 600; color: var(--c-muted); }
.tag--live { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-dark); }
.tag small { font-weight: 400; }

/* prostý seznam bez odrážek s ikonou na řádku (učitelé u zkoušky) – zarovnání ikony řeší flex,
   nikdy dorovnání konstantou: ta sedí jen při velikosti písma, u které vznikla */
.plainlist { display: grid; gap: var(--space-2); padding: var(--space-4); margin: 0; list-style: none; }
.plainlist li { display: flex; align-items: center; gap: var(--space-2); }
.plainlist .icon { flex: none; color: var(--c-muted); }

/* ikona a text na jednom řádku uvnitř `small` (v tabulce je `small` blok, jinak by se ikona
   odsadila na vlastní řádek); zarovnání dělá flex, nikdy dorovnání konstantou */
.inline-icon { display: inline-flex; align-items: center; gap: var(--space-1); }
.table small.inline-icon { display: flex; align-items: center; gap: var(--space-1); }
.inline-icon .icon { flex: none; }

/* ------------------------------------------------------------------ více autoškol, mobilní nabídka

   Přidáno 8. 10. 2026 spolu s vícenájemností. Postranní panel měl pevných 232 px bez jediného
   mediálního bloku, takže na telefonu zabral třetinu obrazovky a nedal se schovat.
   Nabídka jde bez JavaScriptu: zaškrtávátko před panelem + `:checked`. Vstup je skrytý
   přístupně (ne `display:none`), aby na něj šlo zaostřit klávesnicí. */

.sr-only,
.sidebar-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sidebar-scrim { display: none; }

.workbar__menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--ctl-h);
    height: var(--ctl-h);
    flex: none;
    border: 1px solid var(--c-border-input);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    cursor: pointer;
}
.workbar__menu:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }
.workbar__menu svg { display: block; width: 18px; height: 18px; }

/* Přepínač autoškoly posílá POST (mění stav relace), takže položka je <button>, ne <a>.
   `.scope__item` byl psaný pro odkaz – tlačítku chybí šířka, zarovnání a zrušení rámu. */
.scope__item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.scope__item--link { color: var(--c-primary); }
.scope--school .scope__menu { left: 0; right: auto; }
.scope--school .scope__toggle { max-width: 260px; }
.scope--school .scope__toggle span { overflow: hidden; text-overflow: ellipsis; }
.scope--school form { margin: 0; }

/* Řádek školy, ve které se právě pracuje. Barvou se nic nerozhoduje – v buňce je k tomu i text. */
.row--current { background: var(--c-primary-soft); }
.table tbody tr.row--current:hover { background: var(--c-primary-soft); }

/* ------------------------------------------------------------------ text, tabulky, nebezpečné úkony */

/* Rytmus textových bloků jedním pravidlem. Nulovat se smí jen SPODNÍ okraj: `p { margin: 0 }`
   má vyšší specificitu než `> * + *` a tiše by mezery zrušil (viz skill web-css-konvence). */
.prose { padding: var(--space-4); }
.prose > * + * { margin-top: var(--space-4); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose > :last-child { margin-bottom: 0; }

/* Tabulka, která se do šířky nevejde (kontrola dat má sloupec na každou školu).
   🔴 `position: relative` drží uvnitř posuvníku i absolutně umístěné potomky. Bez něj se popisek pro čtečky
   (`.sr-only` je `position: absolute`) měřil od stránky, ne od tabulky. V matici učitele za pravým okrajem
   roztáhl celou stránku o 89 px na 768 px (dávka 173, `responzivita.js` hlásil „přetečení (?)"). */
.table-scroll { position: relative; overflow-x: auto; min-width: 0; max-width: 100%; }
/* 🔴 Položka mřížky má min-width:auto, tedy šířku svého obsahu. Bez tohohle řádku
   roztáhne široká tabulka uvnitř karty celou stránku a `.table-scroll` se nikdy
   nezapne — vodorovný posuvník dostane dokument, ne tabulka. */
.detail > *, .grid > * { min-width: 0; }

code {
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: var(--c-gray-soft);
    font-family: var(--font-mono);
    font-size: 12px;
}

.danger-zone { display: flex; flex-direction: column; gap: var(--space-4); }
.danger-zone form { margin: 0; }
.danger-zone__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}
.danger-zone__row p { margin: var(--space-1) 0 0; font-size: 13px; }
.danger-zone__row--hard { border-color: var(--c-danger); background: var(--c-danger-soft); }
.danger-zone__row--hard .field { margin-top: var(--space-3); max-width: 320px; }
.danger-zone__row .btn { flex: none; }

/* Akce nad obsahem stránky, když nejsou v hlavičce (karta autoškoly). */
.topbar__actions--standalone { align-items: center; }
.topbar__actions--standalone form { margin: 0; }

/* Zaškrtávátko uvnitř `.field`: obal musí zůstat neutrální, jinak na něj dopadne
   `.field > span` (11px verzálky, šedá) – stejná past jako u `.input-icon`. */
.field > .check { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }

/* ------------------------------------------------------------------ zapisovací panel pod tabulkou */

/*
 * 🔴 Formulář nalepený rovnou pod tabulku splývá s kartou a vypadá jako její další řádek.
 *    Na kartě objednávky kvůli tomu nebylo poznat, že se zakládá NOVÁ položka — jediným
 *    vodítkem byl popisek prvního pole („Nová položka – popis“), což je nadpis schovaný
 *    do labelu (nahlášeno 9. 10. 2026). Panel se proto od tabulky odděluje vlastním
 *    pozadím, rámečkem a skutečným nadpisem.
 */
.editbox {
    margin: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-bg);
}
.editbox__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
}
/* Kolečko s ikonou: nese význam „tady se přidává“ i bez čtení nadpisu. */
.editbox__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--radius-circle);
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
}
.editbox__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
/* Popisek pod nadpisem je dlouhý a tlačítko vedle něj se jinak zlomí na „Zrušit / úpravu“. */
.editbox__head .btn { white-space: nowrap; }
.editbox__title h3 { font-size: 14px; }
.editbox__title p { margin: 0; font-size: 12px; color: var(--c-muted); }

/* 🔴 Úprava existující položky jede po stejné routě i stejným formulářem jako přidání.
   Když se obě vypadají stejně, přepíše se omylem hotový řádek v domnění, že se zakládá
   nový — proto má úprava jinou barvu, jiný nadpis a jinou ikonu. */
.editbox--edit { border-color: var(--c-warning); background: var(--c-warning-soft); }
.editbox--edit .editbox__head { border-bottom-color: var(--c-warning); }
.editbox--edit .editbox__mark { background: var(--c-surface); color: var(--c-warning); }
.editbox--edit .form__actions { border-top-color: var(--c-warning); }

.editbox .form-grid { padding: var(--space-4); }
.editbox .form__actions { align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ okno pro nový záznam
 * Panel `.editbox` se do okna jen přestěhuje (dělá to `admin.js`), takže uvnitř platí
 * stejná pravidla jako na stránce – tady se jen zruší vlastní rámeček a přidá rolování.
 */
.modal {
    width: min(760px, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100vh - 2 * var(--space-5));
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--c-surface);
    box-shadow: 0 24px 64px rgb(15 23 42 / 28%);
    color: var(--c-text);
    /* Rolování má na starosti tělo panelu, ne okno – jinak by odjela i hlavička s nadpisem. */
    overflow: visible;
}
.modal::backdrop { background: rgb(15 23 42 / 45%); }

.editbox--okno { max-height: calc(100vh - 2 * var(--space-5)); display: flex; flex-direction: column; margin: 0; border: 0; background: var(--c-surface); }
.editbox--okno > form { display: flex; flex-direction: column; min-height: 0; }
/* Roluje se jen mřížka polí: nadpis nahoře a tlačítka dole zůstanou vidět, takže
   je pořád jasné, co se zakládá a kde se to uloží. */
.editbox--okno .form-grid { overflow-y: auto; }
.editbox--okno .editbox__head { border-radius: var(--radius) var(--radius) 0 0; }
.modal__close { flex: none; margin-left: var(--space-2); }
/* Hláška, kterou si okno přitáhlo ze stránky (server formulář odmítl). Lepí se pod nadpis,
   takže se roluje i s mřížkou polí – důvod musí zůstat u toho, co se má opravit. */
.editbox__alert { margin: var(--space-4) var(--space-4) 0; }
/* 🔴 Barvu úpravy musí okno zopakovat. `.editbox--okno` stojí ve stylopisu níž než
   `.editbox--edit`, obě mají stejnou váhu – a bílé pozadí okna tak jantarové přebilo.
   Úprava pak vypadala jako přidání, přesně to, co barva měla rozlišit. */
.editbox--okno.editbox--edit { background: var(--c-warning-soft); }

/* Skupina nepovinných polí uvnitř panelu. `min-width: 0` je povinné —
   fieldset má výchozí `min-inline-size: min-content` a v mřížce by přetekl. */
.subgroup {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    min-width: 0;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border: 1px dashed var(--c-border-input);
    border-radius: var(--radius-sm);
}
.subgroup > legend { padding: 0 var(--space-2); font-size: 12px; font-weight: 600; color: var(--c-muted); }
.subgroup__note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--c-muted); }

/* Živý součin „cena × počet“. Bez něj se násobí z hlavy a překlep se pozná až po uložení. */
.linesum { margin-left: auto; font-size: 13px; color: var(--c-muted); }
.linesum b { color: var(--c-text); font-variant-numeric: tabular-nums; }

/* Řádek, který se právě upravuje — jinak není v tabulce vidět, kterého se formulář týká. */
.table tbody tr.is-edited { background: var(--c-warning-soft); }
.table tbody tr.is-edited:hover { background: var(--c-warning-soft); }

/* Patička tabulky se součty. Oddělená linka navíc, ať se součet neplete s posledním řádkem. */
.table tfoot td { border-top: 2px solid var(--c-border); border-bottom: 0; background: var(--c-surface); }

/* Vysvětlivka pod polem (jednotka, co se stane po uložení). */
.hint { font-size: 12px; color: var(--c-muted); }
.hint--warn { color: var(--c-warning); }
/* Chyba u pole (formulář nového učitele). Do dávky 142 tam stála třída `field__error`
   bez pravidla, takže hláška vypadala jako šedá vysvětlivka a „vyznačená pole" vidět nebyla. */
.hint--danger { color: var(--c-danger); }

/* Záložky Nastavení po tématech (dávka 231). Všechny zůstávají vidět, aby se nic nehledalo za kliknutím. */
.temata { display: grid; gap: var(--space-2); }
.temata__radek { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: start; gap: var(--space-3); min-width: 0; }
.temata__nazev { padding-top: var(--space-2); font-size: 12px; font-weight: 600; color: var(--c-muted); }

@media (max-width: 768px) {
    .temata__radek { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
    .temata__nazev { padding-top: 0; }
}

/* ------------------------------------------------------------------ responzivita rozvržení */

@media (max-width: 900px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--sidebar);
        height: auto;
        z-index: 60;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
    }
    .sidebar-toggle:checked ~ .sidebar { transform: none; box-shadow: 0 0 40px rgba(26, 34, 51, .25); }
    .sidebar-toggle:checked ~ .sidebar-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(26, 34, 51, .45);
    }
    .workbar__menu { display: inline-flex; }
    .main { padding: var(--space-4); }
    /* Dotykový cíl aspoň 44 px (Apple HIG). Položka nabídky měla 37 px — změřeno,
       ne odhadnuto (`docs/responzivita.js`). */
    .nav__item, .nav__toggle { min-height: 44px; }
    .sidebar__foot .btn { min-height: 44px; }
}

@media (max-width: 768px) {
    /* Na dotykovém displeji má pole 16 px, jinak iOS při zaostření stránku přiblíží.
       🔴 Selektor musí mít stejný tvar jako základní pravidlo výš: `input:not(…)` má
          specificitu (0,1,1) kvůli `[type=…]` uvnitř `:not()`, takže holé `input` (0,0,1)
          by prohrálo a pole by na mobilu zůstala na 14 px. Naměřeno 8. 10. 2026
          skriptem `docs/responzivita.js` — pravidlo v souboru bylo, jen nic nedělalo. */
    input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="image"], [type="range"], [type="color"]),
    select, textarea { font-size: 16px; }
    /* 🔴 Pole pro soubor je z pravidla výš vyňaté kvůli vlastnímu vzhledu, jenže iOS
       stránku přiblíží i kvůli němu — výchozích 13,3 px je pod mezí stejně jako 14 px.
       Naměřeno 9. 10. 2026 na kartě zákazníka a výcviku (pole `prilohy[]`), až když
       `docs/responzivita.js` začal měřit i detailní karty. */
    input[type="file"] { font-size: 16px; }

    /* Dotykové cíle. Administrace je u myši hustá schválně (38 px), prstem se do ní ale
       netrefíte — na úzké obrazovce proto platí 44 px (Apple HIG) a u druhotných akcí
       v řádku 40 px. Mění se token, ne jednotlivá tlačítka. */
    :root { --ctl-h: 44px; --ctl-h-sm: 40px; }

    .danger-zone__row { flex-direction: column; }
    .danger-zone__row .btn { width: 100%; }
    .scope--school .scope__toggle { max-width: 150px; }

    /* Na úzké obrazovce se nabídka rozloží přes celou lištu, ne jen pod tlačítko:
       240 px pod přepínačem posunutým doprava se na displej nevejde. Kotva se přenese
       z `.scope` na `.workbar` tím, že `.scope` přestane být vztažný prvek. */
    .scope { position: static; }
    .workbar { position: relative; }
    .scope__menu { left: 0; right: 0; top: 100%; min-width: 0; max-width: none; }

    /* Tabulka se na telefon nevejde a nemá se jak zmenšit. Posouvá se vodorovně UVNITŘ
       karty, ne celá stránka — jinak se s tabulkou odjede i navigace a nadpis. */
    .card { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
    .nav__chevron { transition: none; }
}

/* Odkaz, který se má zkopírovat (pozvánka do portálu). Celá šířka a monospace,
   ať je vidět, že je to adresa, a ať se dá označit jedním klikem. */
.copy-field {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--c-border-input);
    border-radius: var(--radius-sm);
    background: var(--c-gray-soft);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ------------------------------------------------------------------ Administrace 2 (srovnávač)

   Druhá administrace používá tentýž stylopis — je to admin, takže druhá sada tlačítek
   a tabulek by byla jen další generace vzhledu k udržování. Liší se značkou a pruhem
   nahoře, aby bylo na první pohled jasné, že katalog stojí NAD jednotlivými autoškolami.

   ⚠️ BARVY NÍŽ JSOU NATVRDO SCHVÁLNĚ (dávka 115 je nechala být): tyrkysová je značka
      SROVNÁVAČE (předloha wroomi.webflow.io), ne vzhled autoškoly. Přepínač v Nastavení →
      Vzhled na ně proto nesahá — kdyby si katalog bral `--c-primary`, změnila by jedna
      autoškola podobu stránky, která patří všem. */

.app--catalog .brand__mark { background: #00c2d4; color: #072a2e; }
.app--catalog .nav__item.is-active { background: #e3fbfe; color: #065b63; }
.app--catalog .btn--primary { background: #00c2d4; border-color: #00c2d4; color: #06252a; }
.app--catalog .btn--primary:hover { background: #00a9b9; border-color: #00a9b9; color: #06252a; }

/* Pruh s vysvětlením v horní liště Administrace 2. */
.workbar__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    color: var(--c-muted);
}
.workbar__note svg { display: block; width: 16px; height: 1.5em; flex: none; fill: currentColor; }
.workbar form { margin: 0; }

/* Odznak v položce nabídky (čeká schválení, nové poptávky). */
.nav__item .badge { margin-left: auto; }

/* Řádek, který něco potřebuje — čekající hodnocení, nová poptávka. */
.row--todo { background: var(--c-warning-soft); }
.table tbody tr.row--todo:hover { background: var(--c-warning-soft); }

/* Náhled obrázku v seznamu katalogu. */
.thumb { width: 72px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); display: block; background: var(--c-gray-soft); }
.thumb--logo { object-fit: contain; background: var(--c-surface); border: 1px solid var(--c-border); }

/* ============================================================== Porovnání s MA
   Seznam 715 položek nastavení moje-autoškoly proti tomu, co umíme my.
   Není to tabulka, ale mřížka z <details>: řádek se musí dát rozbalit i bez
   JavaScriptu, a rozbalovací <tr> bez JS neexistuje. */

/* Pokrytí po oblastech — pruh složený z barevných dílů podle stavu. */
.parita-areas { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); }
.parita-area {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) 2.4fr 72px minmax(96px, auto) minmax(92px, auto);
    align-items: center;
    gap: 2px var(--space-3);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 13px;
}
.parita-area:hover { background: var(--c-bg); }
.parita-area__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.parita-area__bar { display: block; width: 100%; height: 10px; overflow: hidden; border-radius: 99px; background: var(--c-gray-soft); }
.parita-area__seg--chybi { fill: var(--c-danger); }
.parita-area__seg--castecne { fill: var(--c-warning); }
.parita-area__seg--hotovo { fill: var(--c-success); }
.parita-area__seg--lepsi { fill: var(--c-info); }
.parita-area__seg--nepotrebujeme { fill: var(--c-border); }
.parita-area__pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.parita-area__count { text-align: right; font-variant-numeric: tabular-nums; }
.parita-area__open { text-align: right; white-space: nowrap; }
.parita-area__what { grid-column: 2 / -1; font-size: 12px; }

/* Věta, co je ve jmenovateli pokrytí a proč to není sto procent. */
.parita-areas__done summary { padding: var(--space-2); cursor: pointer; color: var(--c-primary); font-size: 13px; font-weight: 500; }
.parita-veta { margin: 0 0 var(--space-4); font-size: 13px; color: var(--c-muted); }

/* Lišta řazení — nahrazuje klikací hlavičky tabulky. */
.parita-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3); font-size: 13px; }
.parita-sort__item { color: var(--c-muted); }
.parita-sort__item.is-active { color: var(--c-text); font-weight: 600; }

/* Seznam položek. */
.parita-list { border-top: 1px solid var(--c-border); }
.parita-item { display: grid; grid-template-columns: 34px 1fr; border-bottom: 1px solid var(--c-border); }
.parita-item:hover { background: var(--c-bg); }
.parita-item--edit { background: var(--c-warning-soft); }
.parita-item--edit:hover { background: var(--c-warning-soft); }
.parita-item__pick { display: flex; align-items: flex-start; justify-content: center; padding-top: 11px; }
.parita-group {
    padding: var(--space-2) var(--space-4);
    background: var(--c-gray-soft);
    border-bottom: 1px solid var(--c-border);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted);
}

.parita-row { min-width: 0; }
.parita-row__head {
    display: grid;
    grid-template-columns: minmax(220px, 2.6fr) minmax(90px, 1fr) 92px 112px 92px 108px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) var(--space-2) 0;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
}
.parita-row__head::-webkit-details-marker { display: none; }
.parita-row__title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.parita-row__name { font-weight: 600; }
.parita-row__meta { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parita-row__meta code { font-size: 11px; }
/* Jak to je teď na sbaleném řádku: dva řádky stačí, celé znění je v rozbalené položce. */
.parita-row__now {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    padding-left: 14px; font-size: 12px; font-weight: 400;
}
.parita-row__ma { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; }
.parita-row__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* Šipka rozbalení: vlastní, protože výchozí trojúhelník se v mřížce chová nepředvídatelně. */
.parita-row__name::before { content: "▸"; display: inline-block; width: 14px; color: var(--c-muted); }
.parita-row[open] .parita-row__name::before { content: "▾"; }

/* Sloupce s odznaky. Bez vlastního pravidla by se odznak roztáhl na celou šířku
   buňky mřížky a sloupce by vypadaly různě široké podle délky slova. */
.parita-row__state,
.parita-row__decision,
.parita-row__priority,
.parita-row__task { display: flex; justify-content: flex-start; min-width: 0; }
.parita-row__state .badge,
.parita-row__decision .badge,
.parita-row__priority .badge,
.parita-row__task .badge { white-space: nowrap; }

/* Rozbalený detail: MA vlevo, my vpravo — ať je rozdíl vidět vedle sebe. */
.parita-row__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--space-4);
    padding: 0 var(--space-4) var(--space-4) 14px;
}
.parita-side { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--c-surface); border: 1px solid var(--c-border); }
.parita-side--ma { background: var(--c-gray-soft); }
.parita-side--my { background: var(--c-primary-soft); border-color: transparent; }
.parita-side h4 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.parita-side p { margin: 0 0 var(--space-2); font-size: 13px; }
.parita-side dl { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 2px var(--space-3); margin: 0; font-size: 12px; }
.parita-side dt { color: var(--c-muted); }
.parita-side dd { margin: 0; overflow-wrap: anywhere; }
.parita-side__actions { margin: var(--space-3) 0 0; }
.parita-side__now { font-weight: 500; }
.parita-history { margin: 0 0 var(--space-3); font-size: 12px; }
.parita-history summary { cursor: pointer; color: var(--c-primary); font-weight: 500; }
.parita-history p { margin: var(--space-2) 0 0; font-size: 12px; }

/* Hromadná akce nad označenými řádky. */
.parita-bulk {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--c-border);
    background: var(--c-bg);
}
.parita-bulk__label { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 600; }
.field--inline { min-width: 130px; }
.inline-form { display: flex; align-items: flex-end; gap: var(--space-2); margin: 0; }
.parita-delete { padding: 0 var(--space-4) var(--space-4); }

/* Na úzké obrazovce se řádek skládá pod sebe — jinak by odznaky zmizely za okrajem. */
@media (max-width: 860px) {
    .parita-row__head { grid-template-columns: 1fr auto; row-gap: var(--space-1); }
    .parita-row__title { grid-column: 1 / -1; }
    .parita-row__ma { grid-column: 1 / -1; }
    .parita-row__state,
    .parita-row__decision,
    .parita-row__priority,
    .parita-row__task { grid-column: auto; }
    .card__tools { flex-wrap: wrap; }
    .parita-area { grid-template-columns: 1fr auto; padding: var(--space-2); }
    .parita-area__name { grid-area: 1 / 1; white-space: normal; }
    .parita-area__pct { grid-area: 1 / 2; }
    .parita-area__bar { grid-area: 2 / 1 / 2 / -1; }
    .parita-area__count { grid-area: 3 / 1; text-align: left; }
    .parita-area__open { grid-area: 3 / 2; }
    .parita-area__what { grid-area: 4 / 1 / 4 / -1; }
}


/* ================================================================== Učitelé
   Karta učitele má všechno na jedné stránce: návaznosti, údaje, matici „co smí
   učit", povolená vozidla a hodinové sazby. V MA je to čtyři obrazovky. */

/* Vysvětlivka pod hlavičkou karty — proč je sekce taková, jaká je. */
.card__note { margin: 0; padding: var(--space-3) var(--space-4); font-size: 13px; color: var(--c-muted); border-bottom: 1px solid var(--c-border); }
.card__note strong { color: var(--c-text); }

/* Matice „kdo co smí učit": osm druhů výuky × skupiny ŘO. */
.matrix th.matrix__cat { text-align: center; white-space: nowrap; }
.matrix td.matrix__cell { text-align: center; vertical-align: middle; padding: var(--space-1) var(--space-2); }
.matrix td.strong small { font-weight: 400; }
.matrix__code { display: none; }

/* 🔴 Matice 8 druhů výuky × 14 skupin ŘO se na mobil nevejde ANI DO POSUVNÍKU.
   Mobilní prohlížeč (a Chrome v emulaci) roztáhne layout viewport na šířku
   nezmenšitelného obsahu bez ohledu na to, že je obsah v `overflow-x: auto` —
   změřeno 13. 10. 2026: tabulka 737 px roztáhla stránku z 320 na 723 px a žádná
   varianta `overflow`, `contain` ani `max-width` na předcích to nezastavila.
   Jediné, co pomůže, je nedělat z ní na mobilu tabulku: rozpadne se na bloky
   po druzích výuky a skupiny jsou zaškrtávátka s kódem, která se zalamují. */
@media (max-width: 760px) {
    .matrix,
    .matrix tbody,
    .matrix tbody tr { display: block; min-width: 0; }
    .matrix thead { display: none; }
    .matrix tbody tr { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--c-border); }
    .matrix tbody tr:first-child { border-top: 0; }
    .matrix td { border: 0; padding: 0; }
    .matrix td.strong { display: block; margin-bottom: var(--space-2); }
    .matrix td.matrix__cell { display: inline-flex; align-items: center; justify-content: flex-start;
        gap: var(--space-1); min-height: 40px; margin: 0 var(--space-3) var(--space-1) 0; }
    .matrix__code { display: inline; font-size: 13px; color: var(--c-muted); }
}
/* Zaškrtávátko bez popisku vedle sebe — popisek nese hlavička sloupce a první buňka. */
.check--bare { display: inline-flex; margin: 0; }
.check--muted { color: var(--c-muted); }

/* Výběr vozidel: sloupec zaškrtávátek s vlastním rolováním, ať karta nenaroste do nekonečna. */
.picklist { display: flex; flex-direction: column; gap: var(--space-1); max-height: 320px; overflow-y: auto; padding: var(--space-3) var(--space-4); }
.picklist .check { gap: var(--space-2); }
.picklist-more { border-top: 1px solid var(--c-border); }
.picklist-more > summary { padding: var(--space-2) var(--space-4); font-size: 13px; color: var(--c-muted); cursor: pointer; }

/* Sazby: dvě skupiny polí (skupiny ŘO a činnosti) v husté mřížce. */
.rates { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-4) var(--space-4); }
.rates__group h4 { margin: 0 0 var(--space-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.rates__grid { display: grid; gap: var(--space-2) var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.rates__grid .field > span { display: flex; justify-content: space-between; gap: var(--space-2); }

/* Hustší mřížka formuláře tam, kde jsou jen dvě tři pole. */
.form-grid--tight { padding-bottom: 0; }

/* Kompaktní formulář jízdy — zapíná si ho škola v Nastavení → Provoz (dávka 15,
   protějšek `nast:jizda_detail_kompakt` v MA). Zhušťují se MEZERY, nic se neskrývá:
   políčka zůstávají všechna, jen se karta jízdy vejde na obrazovku bez posouvání.
   `--tight` je něco jiného (jen spodní odsazení u krátkých formulářů) a nechává se být. */
.form-grid--kompakt { gap: var(--space-2); padding: var(--space-2) var(--space-4); }
.form-grid--kompakt .field > span { margin-bottom: 0; }

/* Barva učitele v kalendáři — tečka vedle jména v seznamu. */
.dot-color { display: inline-block; width: 10px; height: 10px; margin-left: var(--space-1); border-radius: var(--radius-circle); background: var(--dot, var(--c-border)); vertical-align: middle; }

/* Odznaky skupin ŘO vedle sebe v buňce tabulky. */
.chips-inline { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; }

/* Vyřazený řádek je vidět, ale netahá za oči. */
.row--muted td { color: var(--c-muted); }
.row--muted td.strong a { color: var(--c-muted); }

.text-danger { color: var(--c-danger); }


/* 🔴 Pole menší než 16 px přiblíží iOS Safari při zaostření celou stránku a uživatel
   pak kouká na detail formuláře. `input[type=color]` si velikost písma nastavuje sám,
   proto musí být napsaná výslovně. */
input[type="color"] { font-size: 16px; height: var(--ctl-h); padding: 2px; }


/* ===========================================================================
   MAPA NÁVAZNOSTÍ — nekonečné plátno (/admin/navaznosti, 13. 10. 2026)

   🔴 Plátno má PEVNOU výšku a vlastní posuvník vypnutý: posouvá se transformem
      obsahu, ne rolováním. Kdyby se rolovalo, vzalo by kolečko stránce rolování
      dokumentu a mapa by se při každém přiblížení posunula jinam, než člověk čeká.
   ⚠️ Šířka lístečku je token `--dep-card-w`. Stejné číslo zná i šablona (odkud
      počítá začátky spojnic) a `navaznosti.js`. Když se rozejdou, spojnice
      začínají mimo kartu — proto je to token, ne hodnota na třech místech.
   =========================================================================== */

.dep-bar { display: grid; gap: var(--space-3); }
.dep-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.dep-bar__search { flex: 1 1 240px; min-width: 0; }
.dep-bar__areas { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.dep-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }

/* Přepínač oblasti. Barva oblasti je levé ohraničení, ne další prvek — v liště
   s osmi přepínači by osm teček byl šum. */
.dep-chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
    border: 1px solid var(--c-border); border-left-width: 4px; border-radius: var(--radius-sm);
    background: var(--c-surface); font-size: 13px; cursor: pointer;
}
.dep-chip input { width: 14px; height: 14px; }
.dep-chip small { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.dep-chip:has(input:not(:checked)) { opacity: .5; }

/* ⚠️ SEDM BAREV KATEGORIÍ JE NATVRDO SCHVÁLNĚ (dávka 115 je nechala být): musí se od sebe
   lišit navzájem, ne sednout s barvou školy. Kdyby braly `--c-primary`, splynuly by dvě
   kategorie v jednu, jakmile si škola vybere jiné schéma. Totéž platí pro čáry a hroty níž. */
.dep-chip--lide { border-left-color: #2f6df0; }
.dep-chip--vycvik { border-left-color: #1c9a5f; }
.dep-chip--penize { border-left-color: #c98209; }
.dep-chip--provoz { border-left-color: #8257d6; }
.dep-chip--srovnavac { border-left-color: #0f9ba8; }
.dep-chip--system { border-left-color: #6b7386; }
.dep-chip--sber { border-left-color: #cf3b3b; }
.dep-chip--ostatni { border-left-color: var(--c-border-input); }

/* ------------------------------------------------------------------ plátno */
.dep-stage {
    position: relative; overflow: hidden; height: min(72vh, 760px);
    margin-bottom: var(--space-4);
    border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg);
    /* Mřížka na pozadí: bez ní není při posouvání poznat, že se plátno hýbe. */
    background-image: radial-gradient(var(--c-border) 1px, transparent 1px);
    background-size: 24px 24px;
    touch-action: none;
    cursor: grab;
}
.dep-stage.is-panning { cursor: grabbing; }

.dep-world {
    --dep-pan-x: 24px;
    --dep-pan-y: 24px;
    --dep-zoom: 1;
    --dep-card-w: 280px;
    position: absolute; top: 0; left: 0;
    width: var(--dep-w, 2000px); height: var(--dep-h, 1200px);
    transform: translate(var(--dep-pan-x), var(--dep-pan-y)) scale(var(--dep-zoom));
    transform-origin: 0 0;
}

.dep-wires { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.dep-wire__line { fill: none; stroke-width: 1.5; stroke: var(--c-border-input); }
.dep-wire--logicka .dep-wire__line { stroke: #8257d6; stroke-dasharray: 6 4; }
.dep-wire--proces .dep-wire__line { stroke: #0f9ba8; stroke-dasharray: 2 5; stroke-width: 2; }
.dep-wire--kaskada .dep-wire__line { stroke: var(--c-danger); }
.dep-wire--skola .dep-wire__line { stroke-dasharray: 1 6; }
.dep-wire__label {
    font-size: 11px; fill: var(--c-muted); text-anchor: middle;
    paint-order: stroke; stroke: var(--c-bg); stroke-width: 3px;
}
.dep-wires--bez-popisku .dep-wire__label { display: none; }
.dep-hrot path { fill: var(--c-border-input); }
.dep-hrot--logicka path { fill: #8257d6; }
.dep-hrot--proces path { fill: #0f9ba8; }
.dep-wire.is-hidden { display: none; }

/* Zvýraznění okolí: při nájezdu na lísteček jeho spojnice zesílí a ostatní
   zesvětlí. Jinak je 177 spojnic klubko, ve kterém se nedá nic najít. */
.dep-stage.is-focused .dep-wire__line { opacity: .12; }
.dep-stage.is-focused .dep-wire.is-related .dep-wire__line { opacity: 1; stroke-width: 2.5; }
.dep-stage.is-focused .dep-wire__label { opacity: 0; }
.dep-stage.is-focused .dep-wire.is-related .dep-wire__label { opacity: 1; }

/* ------------------------------------------------------------------ lísteček */
.dep-card {
    position: absolute; top: 0; left: 0;
    width: var(--dep-card-w, 280px); min-height: 104px;
    transform: translate(var(--dep-x, 0px), var(--dep-y, 0px));
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-2) var(--space-3) var(--space-3);
    border: 1px solid var(--c-border); border-left: 4px solid var(--c-border-input);
    border-radius: var(--radius-sm); background: var(--c-surface); box-shadow: var(--shadow);
    font-size: 13px;
}
.dep-card.is-hidden { display: none; }
.dep-card.is-dragging { z-index: 5; box-shadow: 0 8px 28px rgba(20, 30, 60, .22); }
.dep-card.is-unsaved { border-color: var(--c-danger); background: var(--c-danger-soft); }
.dep-card.is-selected { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft), var(--shadow); }
.dep-stage.is-focused .dep-card { opacity: .35; }
.dep-stage.is-focused .dep-card.is-focus,
.dep-stage.is-focused .dep-card.is-related { opacity: 1; }
.dep-card.is-focus { z-index: 4; }

.dep-card--lide { border-left-color: #2f6df0; }
.dep-card--vycvik { border-left-color: #1c9a5f; }
.dep-card--penize { border-left-color: #c98209; }
.dep-card--provoz { border-left-color: #8257d6; }
.dep-card--srovnavac { border-left-color: #0f9ba8; }
.dep-card--system { border-left-color: #6b7386; }
.dep-card--sber { border-left-color: #cf3b3b; }
.dep-card--ostatni { border-left-color: var(--c-border-input); }

/* Rámec a náš nápad se musí poznat na první pohled: rámec drží všechno ostatní,
   nápad ještě neexistuje. */
.dep-card--ramec { border-style: double; border-left-width: 6px; }
.dep-card--napad { border-style: dashed; background: var(--c-warning-soft); }
.dep-card--proces { background: var(--c-info-soft); }
.dep-card--entita { background: var(--c-surface); }

.dep-card__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.dep-card__grab { color: var(--c-muted); cursor: grab; line-height: 1; letter-spacing: -2px; }
.dep-card.is-dragging .dep-card__grab { cursor: grabbing; }
.dep-card__title { margin: 0; font-size: 14px; font-weight: 700; min-width: 0; }
.dep-card__title a { color: inherit; }
.dep-card__state { margin-left: auto; color: var(--c-muted); }
.dep-card__table { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: 12px; }
.dep-card__table code { font-size: 12px; }
.dep-card__hard { color: var(--c-danger); font-size: 11px; }
.dep-card__summary { margin: 0; color: var(--c-muted); }
.dep-card__foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    margin-top: auto; padding-top: var(--space-1);
    color: var(--c-muted); font-size: 12px; font-variant-numeric: tabular-nums;
}
.dep-card__foot a { display: inline-flex; align-items: center; gap: var(--space-1); }

.dep-zoom { position: absolute; right: var(--space-3); bottom: var(--space-3); display: flex; gap: var(--space-1); }
.dep-zoom__btn { min-width: var(--ctl-h-sm); font-size: 16px; line-height: 1; }
.dep-stage__hint {
    position: absolute; left: var(--space-3); bottom: var(--space-3); max-width: 60%;
    margin: 0; padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm); background: rgba(255, 255, 255, .85);
    color: var(--c-muted); font-size: 12px;
}

/* ------------------------------------------------------------------ detail a seznam */
.dep-detail { margin-bottom: var(--space-4); }
.dep-detail__summary { margin: 0 0 var(--space-3); font-size: 15px; font-weight: 600; }
.dep-detail__text p { margin: 0 0 var(--space-3); }
.dep-list > summary { cursor: pointer; }
.dep-list > summary h2 { margin: 0; }

/* Tělo a spodek karty patří ke `.card`, ne k mapě — proto jsou pojmenované po kartě. */
.card__body { padding: var(--space-4); }
.card__foot { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--c-border); }

@media (max-width: 760px) {
    /* Na mobilu se plátno netahá dobře a dvě třetiny obrazovky by vzalo obsahu.
       Zůstane menší a pod ním je seznam, ve kterém se dá číst. */
    .dep-stage { height: 56vh; }
    .dep-bar__actions { margin-left: 0; }
    .dep-stage__hint { display: none; }
}

/* ==================================================================
   Nastavení po pobočkách (14. 10. 2026)

   Volba úrovně nad záložkami nastavení a stav jednoho pole, které
   hodnotu dědí z celé autoškoly. Dědění se NESMÍ kreslit jako vypnuté
   pole: `disabled` vstup prohlížeč neodešle, takže by se po zaškrtnutí
   „vlastní hodnota" uložilo prázdno. Pole proto jen zešedne.
   ================================================================== */
.level { gap: var(--space-3); }
.level__head { display: flex; flex-direction: column; gap: var(--space-1); }
.level__picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Vybraná úroveň musí být vidět na první pohled — jinak správce uloží hodnoty
   pobočce a myslí si, že mění celou školu. */
.level__picker .chip.is-active { background: var(--c-primary); color: var(--c-on-accent); }

/* Pole, které se dědí: čitelné, ale zřetelně neaktivní. */
.field.is-inherited > span,
.field.is-inherited small { opacity: .8; }
.field.is-inherited input:not([type="checkbox"]),
.field.is-inherited textarea,
.field.is-inherited select { background: var(--c-gray-soft); color: var(--c-muted); }

/* Popisek pod odkazem v tabulce odchylek (ident nastavení) na vlastním řádku. */
.block { display: block; }

/* ==================================================================
   Deník systému — /admin/log (14. 10. 2026)

   Seznam je mřížka z `<details>`, ne tabulka: rozbalovací `<tr>` bez
   JavaScriptu neexistuje a deník musí být čitelný i tehdy, když je
   rozbité právě to JS (stejný důvod jako u /admin/parita).
   ================================================================== */
.badge--neutral { background: var(--c-gray-soft); color: var(--c-muted); }

.log { display: grid; }
.log__row { border-top: 1px solid var(--c-border); }
.log__row:first-child { border-top: 0; }
.log__row > summary {
    display: grid;
    grid-template-columns: 72px 68px minmax(0, 110px) minmax(0, 200px) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    font-size: 13px;
}
.log__row[open] > summary { background: var(--c-gray-soft); }
.log__time { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.log__event { font-weight: 600; overflow-wrap: anywhere; }
.log__msg { color: var(--c-muted); overflow-wrap: anywhere; }
.log__detail { padding: 0 var(--space-4) var(--space-3); }

/* Kontext události je JSON. Zalamuje se, protože v něm bývají dlouhé cesty
   a seznamy sloupců — vodorovný posuvník by se musel hledat. */
.log__data {
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--c-gray-soft);
    font-size: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    /* Na mobilu se pět sloupců nevejde ani do posuvníku — řádek se rozpadne.
       Stejná past jako u matice oprávnění učitele (13. 10. 2026). */
    .log__row > summary { grid-template-columns: auto auto; }
    .log__event, .log__msg { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ lhůty vozidla
   Karta vozidla (`views/admin/vehicles/show.php`, 14. 10. 2026). Lhůty jsou dlaždice,
   ne tabulka: propadlá STK musí být vidět barvou bez čtení řádků. Stav nese `.badge`,
   dlaždice si jen obarví levý okraj podle toho, co v ní odznak říká. */
.deadlines {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.deadline {
    display: grid;
    gap: var(--space-1);
    align-content: start;
    padding: var(--space-3);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
}

.deadline .badge { justify-self: start; }

.deadline__name {
    font-weight: 600;
    font-size: 14px;
}

.deadline__value {
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

/* Levý okraj kopíruje barvu odznaku — `:has()` zvládne i Safari 15.4+ a nic se
   nerozbije tam, kde ho prohlížeč nezná (zůstane šedý okraj výš). */
.deadline:has(.badge--danger) { border-left-color: var(--c-danger); }
.deadline:has(.badge--warning) { border-left-color: var(--c-warning); }
.deadline:has(.badge--success) { border-left-color: var(--c-success); }

/* ------------------------------------------------------------------ víc zaškrtávátek v jednom poli
   Typ pole `checks` v číselnících (příznaky jízd u šablony výcviku, 14. 10. 2026).
   Pod sebou by osm voleb protáhlo formulář o půl obrazovky, proto se sázejí do sloupců;
   `auto-fill` je nechá přetéct na mobilu do jednoho sloupce bez dalšího pravidla. */
.checks {
    display: grid;
    gap: var(--space-1) var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.checks .check {
    margin: 0;
}

/* Volby s nápovědou (sloupce dokladů v Nastavení, dávka 197): ve 190px sloupci by se nápověda lámala po dvou slovech,
   proto širší sloupce, které na telefonu spadnou do jednoho. Nápověda začíná pod textem popisku — odsazení je šířka
   zaškrtávátka (`.check input`, 16px) a mezera `.check`. Spodní odstup: nápověda celého pole jde hned za mřížkou
   a bez něj by vypadala jako pokračování nápovědy poslední volby. */
.checks--napovedy {
    gap: var(--space-3) var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    margin-bottom: var(--space-3);
}

.checks__volba {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
}

.checks__volba > small {
    padding-left: calc(16px + var(--space-2));
    line-height: 1.4;
}

/* Příznak jízdy — barva přichází z číselníku, proto proměnná `--flag` ze šablony. */
.badge--flag { border: 1px solid var(--flag, var(--c-border)); color: var(--flag, var(--c-text-muted)); background: transparent; }

/* ------------------------------------------------------------------ přihláška žáka ke zkoušce
   Řádek nabídky nese víc ovládacích prvků než obvyklá akce v tabulce: část zkoušky,
   potvrzení „přihlásit přesto“, důvod a tlačítko. `.row-actions form` je `inline-flex`
   na jeden řádek, což by tohle rozmáčklo — proto se tahle jedna přihláška láme.
   (15. 10. 2026, spolu se zápisem termínů a přihlašováním.) */
/* Tlumočník u žadatele na termínu (dávka 255). */
.tlumocnik-zadatele { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.row-actions form.prihlaska {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 230px;
}

/* Důvod obejití je nepovinný a nesmí roztáhnout tabulku — zalomí se pod zaškrtávátko. */
.row-actions form.prihlaska input[type="text"] {
    flex: 1 1 100%;
}

/* Nálezy pod sebou, ne v jednom dlouhém řádku: čte se jich u žáka klidně pět. */
.nalezy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

/* ------------------------------------------------------------------ doklad k tisku (seznam žadatelů)
   🔴 ORIENTACI PAPÍRU NASTAVUJE `@page` V LAYOUTU, ne tahle třída: tentýž doklad se
      tiskne na výšku i na šířku podle nastavení školy a prohlížeč sám orientaci nemění.
   🔴 `doklad__netisknout` je jediná cesta, jak dostat ovládání na obrazovku a ne na papír.
      Bez toho skončí tlačítko „Vytisknout" na papíře pro úřad.
   ⚠️ Rozměry jsou v mm a pt, ne v px. Na papíře px nic neznamená — stejné pravidlo
      jako u e-mailových šablon.
   ⚠️ ČERNOBÍLÁ PALETA NATVRDO JE ZÁMĚR (dávka 115 ji nechala být): doklad jde na úřad,
      kde se čte z papíru, a barva školy by z něj udělala šedou kaši. Přepínač vzhledu
      se proto tiskové sestavy netýká a `vzhled.css` se do tiskového layoutu nepřipojuje. */
.doklad { margin: 0; padding: var(--space-5); background: #fff; color: #000; }
.doklad__list { max-width: 190mm; margin: 0 auto; }
.doklad--landscape .doklad__list { max-width: 277mm; }

.doklad__poukaz-castka { margin: 12mm 0; text-align: center; font-size: 28pt; font-weight: 700; }
.doklad__head { display: flex; justify-content: space-between; gap: var(--space-5); align-items: flex-start; }
.doklad__skola { display: flex; flex-direction: column; font-size: 10pt; line-height: 1.35; }
.doklad__skola strong { font-size: 12pt; }
/* Logo autoškoly v hlavičce tiskopisu. Strop je v milimetrech, protože nahraný soubor
   může mít libovolné rozměry a hlavička se nesmí roztáhnout přes půl stránky;
   `height: auto` drží poměr stran, takže se logo nikdy nezdeformuje. */
.doklad__logo { max-height: 18mm; max-width: 50mm; width: auto; height: auto; margin-bottom: 2mm; }
.doklad__nazev { text-align: right; }
.doklad__nazev h1 { margin: 0; font-size: 15pt; }
.doklad__nazev p { margin: 2pt 0 0; font-size: 9pt; color: #444; }
/* Čárový kód: čtečka potřebuje modul aspoň 0,25 mm, proto pevná výška a šířka podle obsahu. */
.doklad__kod { display: block; margin-top: 2pt; text-align: right; font-size: 7pt; color: #444; }
.doklad__kod svg { display: block; width: 52mm; height: 11mm; margin-left: auto; }

.doklad__udaje { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin: var(--space-4) 0; font-size: 10pt; }
.doklad__udaje dt { font-size: 8pt; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.doklad__udaje dd { margin: 0; font-weight: 600; }

.doklad__skupina { margin: var(--space-4) 0 var(--space-2); font-size: 11pt; }

.doklad__tabulka { width: 100%; border-collapse: collapse; font-size: 9pt; }
.doklad__tabulka th,
.doklad__tabulka td { border: 1px solid #333; padding: 3pt 4pt; text-align: left; vertical-align: top; }
.doklad__tabulka th { background: #eee; font-size: 8pt; }
/* Seznam žadatelů má ze všech dokladů nejvíc sloupců — od dávky 189 jedenáct ve výchozím stavu. Se čtyřmi body
   vodorovně se na A4 na výšku nevešel (nejužší možná tabulka ukázkového termínu 719 px na listu 718); se třemi body
   je to 693 px a rezerva zbude na delší jméno. Ostatní doklady mají sloupců málo a odsazení si nechávají. */
.doklad__tabulka--husta th,
.doklad__tabulka--husta td { padding: 3pt; }
.doklad__poradi { width: 7mm; text-align: right; }
.doklad__jmeno { white-space: nowrap; }
/* Datum, PSČ a telefon se nelámou (`ExamSheet::NEZALAMOVAT`, dávka 187); zalomí se adresa. */
.doklad__celistve { white-space: nowrap; }
/* Prázdné úřední sloupce musí být na papíře dost široké na ruční zápis. */
.doklad__volne { min-width: 18mm; }

.doklad__vozidla { margin-top: var(--space-4); font-size: 9pt; }
.doklad__vozidla h2 { font-size: 10pt; margin: 0 0 2pt; }
.doklad__poznamka { margin-top: var(--space-4); font-size: 9pt; white-space: pre-line; }
.doklad__poznamka h2 { font-size: 10pt; margin: 0 0 2pt; }
.doklad__prazdno { margin: var(--space-5) 0; font-size: 10pt; }
/* Zápis podání v řádku hlášení Úřadu práce (dávka 237). */
.urad-podani { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.urad-podani input, .urad-podani select { width: auto; max-width: 180px; }
.urad-vratit { display: inline-block; }

/* Průkazka (dávka 61). Vlastní záhlaví z nastavení, nadpis III. etapy uvnitř
   tabulky jízd a připomínka naplánovaných termínů pod ní. */
.doklad__vlastni { margin: 0 0 var(--space-4); font-size: 9pt; white-space: pre-line; }
.doklad__etapa td { background: #eee; font-size: 8pt; text-transform: uppercase;
    letter-spacing: .04em; text-align: center; }
.doklad__plan { margin-top: var(--space-4); font-size: 9pt; }
.doklad__plan h2 { font-size: 10pt; margin: 0 0 2pt; }
.doklad__plan p { margin: 0; }

.doklad__podpis { display: flex; gap: var(--space-6); margin-top: 14mm; font-size: 9pt; }
.doklad__podpis > div { flex: 1 1 0; }
.doklad__linka { display: block; border-bottom: 1px solid #333; height: 10mm; }
.doklad__linka--plna { height: 8mm; }
.doklad__druha-strana { page-break-before: always; margin-top: var(--space-5); }
/* Sdružený výcvik: každá skupina má vlastní list průkazky (dávka 255). */
.doklad__list--dalsi { page-break-before: always; margin-top: var(--space-5); }
/* Faktura (dávka 235): dvě strany smlouvy, rekapitulace DPH, QR platba a razítko konceptu. */
.doklad__strany { display: flex; gap: var(--space-5); margin-bottom: var(--space-4); font-size: 10pt; }
.doklad__strany section { flex: 1 1 0; display: flex; flex-direction: column; line-height: 1.35; }
.doklad__strany h2 { margin: 0 0 2pt; font-size: 8pt; text-transform: uppercase; letter-spacing: .04em; }
.doklad__rekapitulace { width: 60%; margin: var(--space-3) 0 0 auto; }
.doklad__platba { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font-size: 9pt; }
.doklad__platba svg { width: 32mm; height: 32mm; }
.doklad__platba p { margin: 0; }
.doklad__razitko { margin: 0 0 var(--space-3); padding: 2pt 4pt; border: 1px solid #333; font-size: 10pt;
    font-weight: 700; text-align: center; }
/* Formulář faktury: pole přes celou buňku, popis dostane zbytek šířky. */
.faktura-radky input { width: 100%; }
.faktura-radky th:nth-child(2), .faktura-radky th:nth-child(3) { width: 7rem; }

@media print {
    .doklad { padding: 0; }
    .doklad__netisknout { display: none; }
    /* Hlavička tabulky se opakuje na každé stránce — u třiceti žadatelů jinak druhá
       stránka nedává smysl. */
    .doklad__tabulka thead { display: table-header-group; }
    .doklad__tabulka tr { page-break-inside: avoid; }
}

/* Náhled z kamery při čtení QR kódu z průkazky (dávka 96).
   Šířka je omezená: nativní rozlišení kamery je klidně 1920 px a náhled by
   roztáhl kartu. Poměr stran drží `aspect-ratio`, aby se obraz nedeformoval. */
.qr-nacteni__video {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: var(--space-3) 0 0;
    aspect-ratio: 4 / 3;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    object-fit: cover;
}

/* ------------------------------------------------- administrace na telefonu (dávka 129)

   🔴 CO SE ZMĚŘILO, NEŽ SE TOHLE NAPSALO (26. 10. 2026, vykreslené HTML při 390 px,
      ne grep v šablonách). Hypotéza byla, že stránka na telefonu přetéká, protože
      67 z 83 pohledů s tabulkou nemá obal `.table-scroll`. **Je to nepravda:**
      `scrollWidth` se u všech 28 změřených obrazovek rovnal `clientWidth` (371 px),
      protože posuv drží `.card { overflow-x: auto }` — a funguje i tam, kde je mezi
      kartou a tabulkou `<form>` (`vycviky`: form sw=1155 uvnitř card w=339).
      Pravidlo proti přetékání tedy nevzniklo; nebylo co opravit.

   🔴 CO SE ZMĚŘILO JAKO SKUTEČNÁ VADA: tabulka je 959–1268 px široká, karta 339 px —
      takže `.row-actions` („Upravit", „Smazat") začínaly **829 až 1037 px** od levého
      okraje karty. Obsluha se k akci řádku dostala až po dvou až třech šířkách
      obrazovky vodorovného posuvu, a nic jí neřeklo, že tam něco je.
   ⚠️ `position: sticky; right: 0` funguje PRÁVĚ TADY, protože posouvající předek je
      `.card`. Na stránce bez vodorovného posuvu se pravidlo neprojeví vůbec.
   ⚠️ Pozadí musí být neprůhledné (text pod přilepenou buňkou by jinak prosvítal)
      a u zebrovaných řádků se musí míchat zvlášť — `inherit` by u lichých řádků
      dalo `transparent`. */
@media (max-width: 760px) {
    /* 🔴 `row-actions` JE TŘÍDA NA `<td>`, ne na jeho obsahu. Napsané
          `td:has(> .row-actions)` prošlo grepem i nasazením a `getComputedStyle`
          u něj vrátil `position: static` — pravidlo bylo mrtvé. Měř vykreslený
          výsledek, ne existenci řádku v souboru. */
    .table td.row-actions {
        position: sticky;
        right: 0;
        /* 🔴 STROP ŠÍŘKY A POVOLENÉ ZALOMENÍ. Změřeno: u jízd má buňka akcí 440 px,
              tedy VÍC než celá karta (339 px) — přilepená by zakryla celou tabulku
              a z výpisu by zůstala jen tlačítka. `.row-actions` má `nowrap`, takže
              bez téhle dvojice se tlačítka nezalomí a strop by jen odřízl poslední. */
        max-width: 45%;
        white-space: normal;
        background: var(--c-surface);
        /* Stín říká, že vlevo pokračuje obsah — jinak přilepená buňka vypadá
           jako konec tabulky. */
        box-shadow: -8px 0 8px -8px rgb(15 23 42 / 25%);
    }
    .table tbody tr:nth-child(even) td.row-actions {
        background: color-mix(in srgb, var(--c-bg) 45%, var(--c-surface));
    }

    /* 🔴 DOTYKOVÉ CÍLE. Změřeno při 390 px: ze 158 cílů na `zakaznici` bylo 28 pod
       40 px, na `nastaveni` 39 z 97. Nejmenší skutečné: stránkování 30 × 30 px,
       chip filtru 22 px na výšku, přepínač pohledu 28 px. WCAG 2.5.8 (AA) žádá
       aspoň 24 × 24 px, doporučení pro prst je 44 px — a stránkování se na telefonu
       mačká nejčastěji, protože výpisy mají stránky po 50 řádcích.
       ⚠️ Jen v tomhle bloku: na myši by 44px chip roztáhl lištu filtrů do dvou
       řádků a ubral místo výpisu. */
    .page { min-width: 40px; height: 40px; }
    .chip { min-height: 40px; padding: var(--space-2) var(--space-3); font-size: 13px; }
    .segmented__item { min-height: 40px; display: inline-flex; align-items: center; }
}

/* Podpis jízdy, záznam trasy a elektronický vozák (dávka 247).
   ⚠️ `touch-action: none`: bez něj prohlížeč vezme první pohyb prstu za rolování a tah se utrhne.
   ⚠️ Plocha i obrázek podpisu drží poměr 600 : 220 z `LessonSignature`, výška se dopočítá z šířky. */
.podpis-tah { display: block; width: 100%; max-width: 150px; height: auto; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.table .podpis-tah { max-width: 84px; }
.doklad__volne .podpis-tah { max-width: 34mm; }
.podpis { min-width: 0; align-items: flex-start; }
.podpis__zneni { margin: 0; }
.podpis__plocha { display: block; width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 220; border: 1px dashed var(--c-border-input); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text); touch-action: none; cursor: crosshair; }
.podpis-chybi { color: var(--c-danger); }
.zaznam { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.zaznam__radek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.zaznam__popis { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.vozak-e li { flex-wrap: wrap; }
.vozak-e__podpisy { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.vozak-e__podpis { display: flex; flex-direction: column; gap: var(--space-1); min-width: 110px; margin: 0; }
.poloha__seznam { margin-top: var(--space-3); }

/* ------------------------------------------------------------------ testy žáků (dávka 249) */

.test-odpovedi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; }
.test-odpoved { display: flex; align-items: center; gap: var(--space-2); }
.test-odpoved input[type="text"] { flex: 1 1 auto; min-width: 0; }
.test-obrazek { display: block; max-width: 100%; max-height: 240px; margin-bottom: var(--space-3); border-radius: var(--radius-sm); }
.test-pokusy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.test-seznam { margin-top: var(--space-4); }

/* Dávka 257: jízdy pod žákem patří k řádku nad sebou, proto bez horního odsazení. */
.vycvik-jizdy td { padding-top: 0; }
.vycvik-jizdy .nowrap { margin-right: var(--space-3); }

/* Dávka 251: zkušební režim se nesmí přehlédnout. */
.zkusebni-pruh { border-left: 4px solid var(--c-warning); }
.zkusebni-pruh a { color: inherit; text-decoration: underline; }