/*
 * Wroomi 2 — zákaznická administrace (portál pro žáky).
 *
 * Vlastní stylopis, ne další vrstva nad admin.css: portál je jiná aplikace pro jiného člověka.
 * Třídy mají předponu `pg-`, takže se s administrací nemůžou potkat ani omylem.
 *
 * 🔴 TOKENY V `:root` MUSÍ SEDĚT S `admin.css`. Je to jedna firma a jedna barevnost; dva různé
 *    modré odstíny vedle sebe vypadají jako chyba. Shodu hlídá test
 *    `docs/smoke-tokens.php` — po změně palety ho pusť, jinak se soubory tiše rozejdou.
 *
 * Mobil první: většina žáků si portál otevře na telefonu mezi jízdami, takže základ je jeden
 * sloupec a velké dotykové cíle; širší obrazovky dostanou víc sloupců v `@media`.
 *
 * Žádné inline styly v šablonách (skill web-css-konvence).
 */

: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-gray-soft: #eef0f5;
    --c-border-input: #b6c0d6;

    /* 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í) */
    --c-star: #f5a524;           /* hvězdička hodnocení; žlutá se s tématem nemě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;
    --space-7: 48px;
    --space-8: 72px;

    --radius: 10px;
    --radius-sm: 6px;
    --ctl-h: 44px;          /* na telefonu musí být dotykový cíl aspoň 44 px (Apple HIG) */
    --ctl-h-sm: 36px;
    --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;
    --pg-max: 1040px;       /* čtecí šířka obsahu */
}

* { box-sizing: border-box; }

/* Plošná pojistka: jeden velký obrázek jinak roztáhne mřížku i celou stránku. */
img, svg, video, canvas { max-width: 100%; }

body.pg {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;        /* 16 px povinně – jinak iOS při zaostření pole přiblíží stránku */
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-bg);
    overflow-wrap: anywhere;
}

.pg a { color: var(--c-primary-dark); text-decoration: none; }
.pg a:hover { text-decoration: underline; }
.pg h1, .pg h2, .pg h3 { margin: 0; font-weight: 600; line-height: 1.3; }
.pg h1 { font-size: 24px; }
.pg h2 { font-size: 18px; }
.pg small { font-size: 13px; }
.pg code {
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--c-gray-soft);
    font-family: var(--font-mono);
    font-size: 14px;
}
.pg-muted { color: var(--c-muted); }
.pg-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-num--minus { color: var(--c-danger); }
.pg-big { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ hlavička a navigace */

.pg-head { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.pg-head__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: var(--pg-max);
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
}

.pg-brand { display: flex; align-items: center; gap: var(--space-3); color: inherit; min-width: 0; }
.pg-brand:hover { text-decoration: none; }
.pg-brand__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--c-primary);
    color: var(--c-on-accent);
}
.pg-brand__mark svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.pg-brand__text { display: flex; flex-direction: column; min-width: 0; }
.pg-brand__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-brand__text small { color: var(--c-muted); }

.pg-head__user { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.pg-head__user form { margin: 0; }
.pg-user { display: flex; align-items: center; gap: var(--space-2); }
.pg-user__avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius-circle);
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
    font-weight: 700;
    font-size: 13px;
}
.pg-user__name { font-weight: 500; }

/* Navigace: na telefonu vodorovný posuv s ikonami, od tabletu řádek pod hlavičkou. */
.pg-nav {
    display: flex;
    gap: var(--space-1);
    max-width: var(--pg-max);
    margin: 0 auto;
    padding: 0 var(--space-2) var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
}
.pg-nav::-webkit-scrollbar { display: none; }
.pg-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1 0 auto;
    min-width: 76px;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--c-muted);
    font-size: 13px;
    font-weight: 500;
}
.pg-nav__item:hover { background: var(--c-gray-soft); color: var(--c-text); text-decoration: none; }
.pg-nav__item.is-active { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.pg-nav__item svg { display: block; width: 20px; height: 20px; fill: currentColor; }

/* ------------------------------------------------------------------ obsah */

.pg-main {
    max-width: var(--pg-max);
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.pg-title { margin: 0; }
/* Ikona v nadpisu: bez rozměru se SVG roztáhne na šířku stránky (průkazka od dávky 96, dávka 209). */
.pg-title:has(> svg) { display: flex; align-items: center; gap: var(--space-2); }
.pg-title svg { display: block; width: 24px; height: 24px; flex: none; fill: var(--c-primary-dark); }
.pg-back { margin: 0; }
.pg-back a { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 14px; }
.pg-back svg { display: block; width: 16px; height: 16px; flex: none; fill: currentColor; transform: rotate(180deg); }

.pg-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.pg-section h2 { display: flex; align-items: center; gap: var(--space-2); }
.pg-section h2 svg { display: block; width: 20px; height: 20px; flex: none; fill: var(--c-muted); }

.pg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

/* ------------------------------------------------------------------ karty */

.pg-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.pg-card--pad { padding: var(--space-4); }
.pg-card--center { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); justify-items: center; padding: var(--space-5) var(--space-4); text-align: center; }
.pg-error__code { font-size: 44px; line-height: 1; font-weight: 800; color: var(--c-primary-dark); }
.pg-card--quiet { box-shadow: none; background: var(--c-primary-soft); border-color: transparent; padding: var(--space-4); }
.pg-card--quiet h2 { margin-bottom: var(--space-2); }
.pg-card--quiet p { margin: var(--space-2) 0 0; }
.pg-card--quiet h2 svg { display: block; width: 20px; height: 20px; flex: none; fill: var(--c-primary-dark); }
.pg-card--quiet h2 { display: flex; align-items: center; gap: var(--space-2); }
.pg-card--pay { border-color: var(--c-primary); }

.pg-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);
}
.pg-card__head strong { display: flex; align-items: center; gap: var(--space-2); }
.pg-card__head strong svg { display: block; width: 18px; height: 18px; flex: none; fill: var(--c-muted); }
.pg-card__head small { display: block; color: var(--c-muted); }
.pg-card__body { padding: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.pg-card__foot { margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 14px; }
.pg-card__foot svg { display: block; width: 16px; height: 16px; flex: none; fill: currentColor; }

/* ------------------------------------------------------------------ nejbližší jízda */

.pg-hero {
    padding: var(--space-5);
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: var(--c-on-accent);
}
.pg-hero--quiet { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); }
.pg-hero__label { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; opacity: .85; }
.pg-hero__label svg { display: block; width: 18px; height: 18px; flex: none; fill: currentColor; }
.pg-hero__when { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); }
.pg-hero__when strong { font-size: 26px; line-height: 1.2; }
.pg-hero__when span { font-size: 14px; opacity: .9; }
.pg-hero__detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
}
.pg-hero__detail dt { font-size: 12px; opacity: .8; }
.pg-hero__detail dd { margin: 0; font-weight: 600; }
.pg-hero__detail small { display: block; font-weight: 400; opacity: .85; }
.pg-hero__note { margin: var(--space-4) 0 0; font-size: 13px; opacity: .85; }
.pg-hero--quiet .pg-hero__note { opacity: 1; color: var(--c-muted); }

/* ------------------------------------------------------------------ dlaždice */

.pg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--space-3); }
.pg-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: inherit;
    box-shadow: var(--shadow);
}
.pg-tile:hover { text-decoration: none; border-color: var(--c-primary); }
.pg-tile--plain { box-shadow: none; }
.pg-tile__icon { color: var(--c-muted); }
.pg-tile__icon svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.pg-tile__value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-tile__label { font-weight: 500; }
.pg-tile small { color: var(--c-muted); }
.pg-tile--ok .pg-tile__value { color: var(--c-success); }
.pg-tile--warn .pg-tile__value { color: var(--c-warning); }
.pg-tile--danger .pg-tile__value { color: var(--c-danger); }

/* ------------------------------------------------------------------ postup výcviku */

.pg-progress { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
/* Dva ukazatele pod sebou (praxe a teorie) potřebují mezeru — jinak lišta jednoho sedí
   na popisku druhého. Mezera je na DRUHÉM a dalším, ať se nepřidává nad první. */
.pg-progress + .pg-progress { margin-top: var(--space-4); }
.pg-progress + p { margin-top: var(--space-4); }
.pg-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.pg-progress p { margin: var(--space-1) 0 0; font-size: 14px; }

.pg-bar { height: 10px; border-radius: var(--radius-pill); background: var(--c-gray-soft); overflow: hidden; }
.pg-bar__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c-primary); }

/* Výplň po pěti procentech – stejná konvence jako graf v administraci, takže se šířka
   nikdy nedopočítává inline stylem. */
.pg-bar__fill--0 { width: 0; }
.pg-bar__fill--5 { width: 5%; }
.pg-bar__fill--10 { width: 10%; }
.pg-bar__fill--15 { width: 15%; }
.pg-bar__fill--20 { width: 20%; }
.pg-bar__fill--25 { width: 25%; }
.pg-bar__fill--30 { width: 30%; }
.pg-bar__fill--35 { width: 35%; }
.pg-bar__fill--40 { width: 40%; }
.pg-bar__fill--45 { width: 45%; }
.pg-bar__fill--50 { width: 50%; }
.pg-bar__fill--55 { width: 55%; }
.pg-bar__fill--60 { width: 60%; }
.pg-bar__fill--65 { width: 65%; }
.pg-bar__fill--70 { width: 70%; }
.pg-bar__fill--75 { width: 75%; }
.pg-bar__fill--80 { width: 80%; }
.pg-bar__fill--85 { width: 85%; }
.pg-bar__fill--90 { width: 90%; }
.pg-bar__fill--95 { width: 95%; }
.pg-bar__fill--100 { width: 100%; background: var(--c-success); }

/* ------------------------------------------------------------------ seznamy, tabulky, odznaky */

.pg-def { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--space-3); margin: 0; }
.pg-def > div { display: flex; flex-direction: column; min-width: 0; }
.pg-def__wide { grid-column: 1 / -1; }

/* Řetězec SPAYD pro QR platbu: dlouhý, bez mezer, a žák si ho označuje myší.
   Bez `word-break` roztáhne kartu a na telefonu vyteče z obrazovky. */
.pg-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; }

/* 🔴 BÍLÉ POZADÍ POD QR NENÍ VZHLED, JE TO ČITELNOST. Čtečka hledá tmavé moduly
   na světlém podkladu; na barevné nebo tmavé kartě by kód nepřečetla. Proto je
   tu pevná bílá, ne token — token se může změnit a QR by tiše přestal fungovat.
   Ze stejného důvodu je kolem kódu odsazení: norma kolem kódu žádá světlý okraj. */
.pg-qr { 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Í GENERÁTOR, NE TENHLE SOUBOR. Modul (velikost jednoho čtverečku)
   se zadává v šabloně; kdyby se tu natvrdo nastavila šířka, přebila by ho a kód by
   se při větším objemu dat zjemnil — hůř by se skenoval. `max-width` je jen pojistka
   pro úzký displej. */
.pg-qr svg { display: block; max-width: 100%; height: auto; }
.pg-qr figcaption { margin-top: var(--space-1); max-width: 220px; font-size: 12px;
    line-height: 1.4; color: var(--c-muted); }
.pg-def dt { font-size: 12px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .03em; }
.pg-def dd { margin: 0; font-weight: 500; }
.pg-def dd small { display: block; font-weight: 400; }

.pg-list { list-style: none; margin: 0; padding: 0; }
.pg-list li {
    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);
}
.pg-list li:last-child { border-bottom: 0; }
.pg-list__main { display: flex; flex-direction: column; min-width: 0; }
.pg-list__main small { color: var(--c-muted); }
.pg-list__side { flex: none; color: var(--c-muted); font-size: 14px; }

.pg-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.pg-table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
    font-size: 12px;
    font-weight: 500;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}
.pg-table th.pg-num { text-align: right; }
.pg-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-border); vertical-align: top; }
.pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-table small { display: block; color: var(--c-muted); }
/* Ikona u drobného textu v buňce, který se smí zalomit (učebna s adresou pod tématem přednášky, dávka 160): ikona
   sedí na PRVNÍM řádku — dostane výšku řádku, ne dorovnání konstantou (jako `.pg-note`). */
.pg-table small.pg-inline-icon { display: flex; align-items: flex-start; gap: var(--space-1); line-height: 1.5; }
.pg-inline-icon svg { display: block; width: 14px; height: 1.5em; flex: none; fill: currentColor; }
/* Datum a čas v buňce se lámou jen v mezerách. `body.pg` má `overflow-wrap: anywhere`, takže buňka smí v rozložení
   tabulky spadnout na šířku jednoho znaku — a jakmile vedlejší sloupec zesílil (učebna s adresou pod tématem, dávka 160),
   rozlomil se na telefonu i čas na „17:0 / 0". */
.pg-table .pg-when { overflow-wrap: normal; }
/* Text jen pro čtečku: kde ikona nahrazuje slovo (učebna), nebo kde se hodnota volí obrázkem (hvězdičky).
   ♻️ Jedno pravidlo pro obě třídy — dávka 160 přidala `.pg-sr` a pravidlo hvězdiček přesunula sem. */
.pg-sr,
.pg-stars__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pg-row--danger { background: var(--c-danger-soft); }
/* Odznak „po splatnosti" má stejné pozadí jako celý řádek, takže by v něm splynul s textem.
   Uvnitř zvýrazněného řádku dostane bílé pozadí, aby zůstal odznakem. */
.pg-row--danger .pg-badge--danger { background: var(--c-surface); }

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

/* Odznaky z administrace (funkce badge()) vypadají v portálu stejně jako ty portálové —
   jedna barevnost, žádná druhá generace vzhledu. */
.pg .badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--c-gray-soft);
    color: var(--c-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.pg .badge--success { background: var(--c-success-soft); color: var(--c-success); }
.pg .badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.pg .badge--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.pg .badge--info { background: var(--c-primary-soft); color: var(--c-primary-dark); }

/* ------------------------------------------------------------------ zkoušky, soubory */

.pg-exam { display: flex; align-items: flex-start; gap: var(--space-4); }
.pg-exam__date { flex: none; display: flex; flex-direction: column; min-width: 92px; }
.pg-exam__date strong { font-size: 17px; }
.pg-exam__date small { color: var(--c-muted); }
.pg-exam__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-exam__body small { display: flex; align-items: center; gap: var(--space-1); color: var(--c-muted); }
.pg-exam__body small svg { display: block; width: 14px; height: 14px; flex: none; fill: currentColor; }
.pg-exam__body p { margin: var(--space-2) 0 0; font-size: 14px; }
.pg-exam__side { flex: none; }

.pg-files { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.pg-files a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: inherit;
}
.pg-files a:hover { text-decoration: none; border-color: var(--c-primary); }
.pg-files a > svg { display: block; width: 22px; height: 22px; flex: none; fill: var(--c-muted); }
.pg-files span { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pg-files small { color: var(--c-muted); }
.pg-files a > svg:last-child { fill: var(--c-primary); }

/* ------------------------------------------------------------------ přepínač, hlášky, prázdno */

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

.pg-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
}
.pg-alert svg { display: block; width: 20px; height: 20px; flex: none; fill: currentColor; }
.pg-alert--success { background: var(--c-success-soft); color: var(--c-success); }
.pg-alert--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.pg-alert--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.pg-alert a { color: inherit; text-decoration: underline; }

.pg-empty {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-5);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
    color: var(--c-muted);
}
.pg-empty svg { display: block; width: 24px; height: 24px; flex: none; fill: var(--c-border); }

.pg-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    font-size: 14px;
    color: var(--c-muted);
}
/* Víceřádkový text: ikona dostane výšku řádku, ne dorovnání konstantou. */
.pg-note svg { display: block; width: 18px; height: 1.5em; flex: none; fill: currentColor; }

/* ------------------------------------------------------------------ tlačítka a formuláře */

.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--ctl-h);
    padding: 0 var(--space-5);
    border: 1px solid var(--c-border-input);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.pg-btn:hover { text-decoration: none; border-color: var(--c-primary); color: var(--c-primary-dark); }
.pg-btn svg { display: block; width: 18px; height: 18px; flex: none; fill: currentColor; }
.pg-btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-accent); }
.pg-btn--primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: var(--c-on-accent); }
.pg-btn--ghost { border-color: transparent; background: transparent; color: var(--c-muted); font-weight: 500; }
/* Tlačítko jako odkaz (dávka 394): `.pg a` (0,1,1) přebíjelo barvu textu tlačítka (0,1,0) a `.pg a:hover` (0,2,1) jeho
   `text-decoration: none` (0,2,0). Hlavní tlačítko-odkaz mělo tmavě modrý text na modré výplni a tlačítka se pod myší
   podtrhávala. Odkaz s třídou tlačítka proto bere barvy tlačítka selektorem o stupeň silnějším; pořadí je jako u tlačítek
   výš (hlavní po obecném, ať mu při najetí zůstane bílý text). */
.pg a.pg-btn { color: var(--c-text); }
.pg a.pg-btn--ghost { color: var(--c-muted); }
.pg a.pg-btn:hover { color: var(--c-primary-dark); text-decoration: none; }
.pg a.pg-btn--primary,
.pg a.pg-btn--primary:hover { color: var(--c-on-accent); }
.pg-btn--sm { min-height: var(--ctl-h-sm); padding: 0 var(--space-3); font-size: 14px; }
.pg-btn--block { width: 100%; }

.pg-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
/* 🔴 Formulář, který JE kartou (přihlášení, zapomenuté heslo), si musí odsazení udělat sám.
   `.pg-card` ho nemá — uvnitř aplikace ho dodává `.pg-card__body`, jenže tady žádné tělo
   není a pole se dotýkala okraje karty. Bylo to vidět hlavně na zaostřeném poli: modrý
   rámeček splýval s hranou karty. */
.pg-form.pg-card { padding: var(--space-5); }
.pg-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--space-4); }
.pg-form__lead { margin: 0; }
.pg-form__note { margin: 0; font-size: 14px; color: var(--c-muted); }
.pg-form__help { margin: 0; font-size: 14px; text-align: center; }

.pg-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.pg-field[hidden] { display: none; }
.pg-field > span { font-size: 13px; font-weight: 500; color: var(--c-muted); }
.pg-field > small { color: var(--c-muted); }
.pg-field input,
.pg-field select,
.pg-field textarea {
    width: 100%;
    min-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);
    color: var(--c-text);
    font: inherit;
    font-size: 16px;
}
.pg-field input:focus,
.pg-field select:focus,
.pg-btn:focus-visible,
.pg a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ---------- hvězdičkové hodnocení autoškoly ---------- */

/* Pět přepínačů bez JavaScriptu. V HTML jsou od 5 k 1 a řádek je otočený, protože
   CSS umí vybrat jen NÁSLEDUJÍCÍ sourozence (`~`) — vybarvit se mají hvězdy vlevo
   od zaškrtnuté, což po otočení znamená „ty za ní v pořadí dokumentu“. */
.pg-stars { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pg-stars legend { padding: 0; font-size: 13px; font-weight: 500; color: var(--c-muted); }
.pg-stars__row { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--space-1); }

/* Přepínač se neschovává `display: none` — tím by zmizel i z pořadí tabulátoru
   a hvězdičky by nešly vybrat z klávesnice. */
.pg-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pg-stars label { cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm); }
.pg-stars label svg { display: block; width: 34px; height: 34px; fill: var(--c-border-input); transition: fill .12s; }
.pg-stars label:hover svg,
.pg-stars label:hover ~ label svg,
.pg-stars input:checked ~ label svg { fill: var(--c-star); }
.pg-stars input:focus-visible + label { outline: 2px solid var(--c-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pg-stars label svg { transition: none; }
}

.pg-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.pg-choice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--c-border-input);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.pg-choice:hover { border-color: var(--c-primary); }
.pg-choice > svg:first-child { display: block; width: 22px; height: 22px; flex: none; fill: var(--c-muted); }
.pg-choice > svg:last-child { display: block; width: 18px; height: 18px; flex: none; fill: var(--c-muted); margin-left: auto; }
.pg-choice span { display: flex; flex-direction: column; min-width: 0; }
.pg-choice small { color: var(--c-muted); }

/* ------------------------------------------------------------------ přihlašovací stránka */

.pg--bare { background: var(--c-bg); }
/* Mobil první: jeden sloupec, formulář nahoře, vysvětlení pod ním. */
.pg-gate {
    max-width: 440px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-content: start;
}
.pg-gate__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; }
.pg-gate__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.pg-gate__wordmark { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-primary); }
.pg-gate__brand strong { font-size: 22px; }
.pg-gate__brand small { color: var(--c-muted); }
.pg-gate__foot { margin: 0; text-align: center; font-size: 14px; color: var(--c-muted); }

/* ---------- vedlejší sloupec „co tu najdete" ---------- */

.pg-gate__intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-content: start; }
.pg-gate__intro h2 { margin: 0; font-size: 15px; color: var(--c-muted); font-weight: 600; }
.pg-gate__note { margin: 0; font-size: 14px; color: var(--c-muted); }

.pg-perks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pg-perk { display: flex; align-items: flex-start; gap: var(--space-3); }
/* Ikona je čtvereček s vlastní výškou, takže `align-items: flex-start` na víceřádkovém
   textu nedorovnává konstantou — odsazení drží sama. */
.pg-perk__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--c-primary-soft);
}
.pg-perk__icon svg { display: block; width: 18px; height: 18px; fill: var(--c-primary-dark); }
.pg-perk__text { display: grid; gap: 2px; }
.pg-perk__text strong { font-size: 15px; }
.pg-perk__text small { color: var(--c-muted); }

/* Od tabletu výš dva sloupce. Formulář zůstává vlevo, i když je v HTML první —
   pořadí v markupu určuje tabulátor a odečítač, pořadí na obrazovce tohle. */
@media (min-width: 860px) {
    .pg-gate {
        max-width: 920px;
        grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
        gap: var(--space-7);
        align-items: start;
        /* Svisle na střed, ale ne násilím: `min-height` je na obsahu, takže delší stránka
           (výběr autoškoly z pěti) přeteče normálně dolů místo oříznutí nahoře. */
        min-height: 100dvh;
        align-content: center;
        padding-block: var(--space-8);
    }
    .pg-gate__brand { align-items: flex-start; text-align: left; }
    .pg-gate__foot { text-align: left; }
    .pg-gate__intro { padding-top: var(--space-6); }
}

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

/* Tlačítko kreslí knihovna Google do `#google-signin`; my dáváme jen rámec a oddělovač.
   Vlastní tlačítko se nestyluje — Google má na vzhled svoje pravidla a přebarvené
   tlačítko přestane být poznat. */
/* Jedna karta na obě cesty: Google, předěl, heslo. Odsazení drží karta, ne formulář —
   proto tu `.pg-form` výjimečně `pg-card` nemá. */
.pg-login { display: grid; gap: var(--space-4); padding: var(--space-5); }
/* 🔴 Kontejner tlačítka musí mít ŠÍŘKU. Google si velikost měří podle prvku, do kterého
   kreslí — když ho `justify-items: center` scvrkne na obsah (v tu chvíli nulový), vykreslí
   nejmenší možnou variantu: jen barevné „G“ bez popisku. Naměřeno 9. 10. 2026 na produkci.
   Blok přes celou šířku je proto záměr; na střed si obsah srovná Google sám
   (`logo_alignment: 'center'`). */
.pg-google { display: block; }
.pg-google #google-signin { min-height: 44px; }

.pg-or { position: relative; margin: 0; width: 100%; text-align: center; }
.pg-or::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--c-border);
}
.pg-or span { position: relative; padding: 0 var(--space-3); background: var(--c-surface); color: var(--c-muted); font-size: 13px; }

/* ---------- přikoupení jízd (dávka 94) ----------

   ⚠️ SPECIFICITA: `.pg-buy__item` je `<label>` uvnitř formuláře, a kdyby portál měl
      obecné pravidlo `label { display: block }` jako přihláška, rozhodilo by řádek
      na dva (zjištěno dávkou 93). Proto je selektor dvojitý a pravidlo vlastní. */

.pg-buy {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4) var(--space-4);
    margin: 0 0 var(--space-4);
}

.pg-buy .pg-buy__legend {
    padding: 0 var(--space-2);
    font-weight: 600;
    color: var(--c-text);
}

.pg-buy .pg-buy__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-2) 0;
    font-weight: 400;
    cursor: pointer;
}

.pg-buy .pg-buy__item + .pg-buy__item { border-top: 1px solid var(--c-border); }

/* Dotykový cíl 22 px — do menšího se na mobilu prst netrefí. */
.pg-buy .pg-buy__item input[type="radio"] {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    flex: 0 0 auto;
}

/* Název vlevo, cena vpravo — a na úzké obrazovce pod sebou, ne přes sebe. */
.pg-buy .pg-buy__item > span {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    justify-content: space-between;
}

/* 🔴 `margin-left: auto` NENÍ ZDOBENÍ. Se `space-between` a zalomením zůstane cena,
   která se na řádek nevešla, VLEVO pod názvem — u dlouhého balíčku („Balíček jízd
   (5 hodin, skupina B)“) tak byla jedna cena vlevo a ostatní vpravo. Zjištěno
   snímkem v dávce 94; na kódu to vidět není. */
.pg-buy .pg-buy__item strong { white-space: nowrap; margin-left: auto; }

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

/* 🔴 NE `display: none`. Část robotů taková pole pozná a přeskočí je; a hlavně by pole
   zmizelo i pro odečítač obrazovky, který by pak o formuláři tvrdil něco jiného než
   prohlížeč. Pole se proto jen odsune mimo plochu a vyřadí z pořadí tabulátoru
   (`tabindex="-1"` v HTML), takže ho člověk nemá jak vyplnit. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------ patička */

.pg-foot { border-top: 1px solid var(--c-border); background: var(--c-surface); }
.pg-foot__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    max-width: var(--pg-max);
    margin: 0 auto;
    padding: var(--space-4);
    font-size: 14px;
    color: var(--c-muted);
}
.pg-foot__inner div { display: flex; flex-direction: column; min-width: 0; }
/* Vyšší specificita místo `!important` (skill web-css-konvence): obecné pravidlo
   `.pg-foot__inner div` staví sloupec, kontakty mají být na řádku. */
.pg-foot__inner .pg-foot__contact { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
.pg-foot__contact a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--c-muted); }
.pg-foot__contact svg { display: block; width: 16px; height: 16px; flex: none; fill: currentColor; }

/* ------------------------------------------------------------------ širší obrazovky */

@media (min-width: 640px) {
    .pg-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
    .pg-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
    .pg-section--split { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
    .pg-nav__item { flex-direction: row; min-width: 0; padding: var(--space-2) var(--space-3); }
    .pg-files { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
}

/* Dotykový cíl aspoň 44 px (Apple HIG) všude, kde se na dotykové šířce klepe.
   Změřeno `docs/responzivita.js`: položka nabídky měla 36 px a tlačítko Odhlásit taky. */
/* ---------------------------------------------------------- kalendář žáka (dávka 110)
   Mřížka je TABULKA, ne grid: blok delší než řádek se natažne přes `rowspan`,
   což drží zarovnání i bez jediného řádku JavaScriptu. Sedm sloupců, protože
   o víkendu se odjede 13,7 % jízd. */
.pg-cal__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
}

/* Na úzkém telefonu se týden nevejde — posouvá se uvnitř karty, ne celá stránka. */
.pg-cal__wrap { overflow-x: auto; }

.pg-cal__grid {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

.pg-cal__grid th,
.pg-cal__grid td {
    border: 1px solid var(--c-border);
    padding: 0;
    vertical-align: top;
}

.pg-cal__grid thead th {
    padding: var(--space-2);
    background: var(--c-gray-soft);
    font-weight: 600;
    text-align: center;
}

.pg-cal__dow { display: block; }
.pg-cal__datum { display: block; color: var(--c-muted); font-weight: 400; }
.pg-cal__dnes { background: var(--c-primary-soft); }

.pg-cal__osa {
    width: 64px;
    padding: var(--space-1) var(--space-2);
    color: var(--c-muted);
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
}

.pg-cal__volno { height: 28px; background: var(--c-surface); }
.pg-cal__bunka { padding: 2px; }

.pg-cal__blok {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    text-decoration: none;
}

.pg-cal__blok strong { font-size: 13px; }
.pg-cal__blok span { font-size: 12px; }
.pg-cal__blok small { color: var(--c-muted); font-size: 11px; }

.pg-cal__blok--jizda { background: var(--c-primary-soft); border-left: 3px solid var(--c-primary); }
.pg-cal__blok--pozadavek { background: var(--c-warning-soft); border-left: 3px solid var(--c-warning); }
.pg-cal__blok--okno { background: var(--c-success-soft); border-left: 3px solid var(--c-success); }

/* Klikací okno musí být poznat, že je klikací — i bez myši (dotyk, klávesnice).
   ⚠️ VĚDOMĚ NATVRDO (dávka 115): je to sytější odstín téhož zeleného podkladu, který
   má okno v klidu (`--c-success-soft`). Kdyby se sáhlo po tokenu, byl by to týž token
   jako v klidovém stavu a najetí myší by nebylo poznat. S tématem se nemění proto, že
   zelená tu znamená „volno", ne barvu školy. */
a.pg-cal__blok--okno:hover,
a.pg-cal__blok--okno:focus-visible { background: #cdf0dc; outline: 2px solid var(--c-success); }

.pg-cal__legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    color: var(--c-muted);
    font-size: 13px;
}

.pg-cal__klic {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.pg-cal__klic--jizda { background: var(--c-primary-soft); border-left: 3px solid var(--c-primary); }
.pg-cal__klic--pozadavek { background: var(--c-warning-soft); border-left: 3px solid var(--c-warning); }
.pg-cal__klic--okno { background: var(--c-success-soft); border-left: 3px solid var(--c-success); }

/* ⚠️ Karta s kalendářem nesmí dědit `overflow-x: auto` z `.pg-card` (telefon),
   jinak by se posouvala karta i mřížka zvlášť. */
@media (max-width: 639px) {
    .pg-cal { overflow-x: visible; }
    .pg-cal__grid { font-size: 12px; }
    .pg-cal__osa { width: 48px; }
}

@media (max-width: 1024px) {
    .pg-nav__item { min-height: 44px; justify-content: center; }
    .pg-btn--sm { min-height: 44px; }
}

@media (min-width: 900px) {
    .pg h1 { font-size: 28px; }
    .pg-main { padding-top: var(--space-6); }
}

/* Na úzkém telefonu se tabulka nevejde – posouvá se vodorovně uvnitř karty, ne celá stránka. */
@media (max-width: 639px) {
    .pg-card { overflow-x: auto; }
    .pg-table { min-width: 520px; }
    .pg-head__user .pg-user__name { display: none; }
    .pg-btn--ghost span { display: none; }
    .pg-exam { flex-direction: column; gap: var(--space-2); }
}

/* ------------------------------------------------------------------ studovna (dávka 116)

   🔴 ŘÁDEK SE MUSÍ SKLÁDAT DO SLOUPCE. Základní `.pg-list li` je flex se
      `space-between`, takže formulář hvězdiček by stál vpravo od textu — a na
      telefonu by se zalomil pod něj k LEVÉMU okraji, tedy pod cizí materiál.
      Stejná past jako u ceny v `.pg-row` (dávka 94). */
.pg-list--study li { flex-direction: column; align-items: stretch; }

/* Hodnocení pod materiálem: hvězdičky, políčko a tlačítko na jednom řádku, a na
   úzké obrazovce pod sebou. `flex-end` drží tlačítko v zákrytu s polem, ne s jeho
   popiskem. */
.pg-study__rate {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--c-border);
}
.pg-study__rate .pg-field { flex: 1 1 200px; }

/* ---------- dokument k podpisu (reverz on-line, dávka 117) ---------- */

/* Dva a víc dokumentů v jedné kartě potřebuje mezi sebou dělicí linku — bez ní
   splyne konec jednoho znění se začátkem dalšího a žák neví, co podepisuje. */
.pg-sign + .pg-sign {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--c-border);
}
.pg-sign__title { margin: 0 0 var(--space-2); font-size: 17px; }

/* Znění je dlouhý text, takže dostane volnější řádkování a vlastní plochu: na
   telefonu se čte z karty, kde je všechno ostatní hustší. */
.pg-sign__body {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--c-surface-2);
    line-height: 1.6;
}

/* Zaškrtávátko se souhlasem: text vedle rámečku, ne pod ním, a zarovnaný na první
   řádek — `align-items: center` by u dvouřádkového textu posunul rámeček doprostřed. */
.pg-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    line-height: 1.4;
}
.pg-check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }

/* Odznak „povinné" u názvu dokumentu. Nese tón výstrahy, ale ne červenou: povinný
   dokument není chyba, jen pořadí. */
.pg-tag {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--c-warning-soft);
    color: var(--c-warning);
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

@media print {
    .pg-head, .pg-foot, .pg-note, .pg-switch { display: none; }
    .pg-card { box-shadow: none; }
}

/* ------------------------------------------------------------------ připouštěcí test (dávka 249)
   Otázky a odpovědi testu jsou od dávky 328 v `test-prehravac.css` (formulář sdílí portál s administrací). */

/* Dávka 251: řádek platby kartou. */
.pg-karta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; }
.pg-actions { display: flex; gap: 12px; flex-wrap: wrap; }