/* =============================================================================
   riscare — platformní rozhraní

   Návrhový systém, ne sada záplat. Tokeny nahoře, komponenty pod nimi; stránky
   nemají vlastní barvy ani rozestupy. Vizuál je součást produktu, ne obal:
   subjekt tímhle prochází výstupy, které pak předkládá dohledu.
   ========================================================================== */

/* --- písmo rozhraní ---------------------------------------------------------
   Instrument Sans, hostovaný U NÁS (wwwroot/fonts). Z Google Fonts to nejde:
   CSP appky pouští písma jen z vlastního serveru (`font-src 'self' data:`) a web
   zároveň slibuje, že měří bez třetích stran — odkaz na gstatic by ten slib zrušil.
   Proměnný řez 400-700, podmnožiny latin a latin-ext. `latin-ext` je pro češtinu
   POVINNÁ (ě ř ů ť ď ň š č ž leží v Latin Extended-A); bez ní by diakritiku
   dokresloval náhradní font a text by v řádku skákal.
   `unicode-range` se nesmí zahodit — jinak si prohlížeč stáhne obě podmnožiny vždy.
   Detaily a postup aktualizace: wwwroot/fonts/README.md. */
@font-face {
    font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700;
    font-display: swap; src: url("/fonts/instrument-sans-latin-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700;
    font-display: swap; src: url("/fonts/instrument-sans-latin-ext-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
      U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
      U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700;
    font-display: swap; src: url("/fonts/instrument-sans-latin-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700;
    font-display: swap; src: url("/fonts/instrument-sans-latin-ext-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
      U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
      U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Nativní prvky (checkbox, šipka selectu, spinnery, scrollbar) se řídí tímhle —
       bez toho by v tmavém motivu zůstaly světlé. */
    color-scheme: light;

    /* --- písmo a typografická škála ---
       Jedna stupnice na celou appku. Dřív si každá komponenta zvolila velikost
       od oka a nadpisy „skákaly" o půl pixelu. */
    --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --fs-page: 25px;    /* název stránky */
    --fs-section: 19px; /* nadpis sekce */
    --fs-card: 15px;    /* nadpis karty */
    --fs-sub: 13.5px;   /* vnořený nadpis */
    --fs-body: 14.5px;
    --fs-label: 12.5px; /* popisek pole */
    --fs-hint: 12px;    /* nápověda pod popiskem */
    --fs-micro: 10.5px; /* eyebrow, hlavička tabulky */

    /* --- značka ------------------------------------------------------------
       Akční modř je svěží, jasná (odvozená od loga, ale rozsvícená), aby
       rozhraní nepůsobilo úředně. Logo zůstává v původní tmavé modři a sedí
       k ní jako sytější člen téže rodiny. */
    --brand: #1f3480;
    --brand-ink: #16265c;
    --brand-mid: #4a63b8;
    --brand-soft: #e8ecfb;
    --brand-line: #c9d3f5;
    /* Interaktivní modř — tlačítka, aktivní záložka, fokus. Značková navy je na to
       příliš tmavá a na rozhraní by působila úředně. */
    --accent: #2d5be3;

    /* --- plochy a text ---
       Čistá, chladně světlá plocha — modř na ní vynikne. */
    --bg: #eff1f6;
    --panel: #fff;
    --panel-2: #f7f8fc;
    --panel-3: #eaecf4;
    --ink: #12141b;
    --ink-2: #4b5063;
    --muted: #787e93;
    --line: #dee1ec;
    --line-soft: #ebedf4;
    --line-strong: #cbd0e0;

    /* --- stavy --- */
    --good: #0b8560;
    --warn: #9c5a08;
    --bad: #b93229;
    --good-bg: #e1f3ec;
    --warn-bg: #faefdc;
    --bad-bg: #fae9e7;
    --good-line: #b6dfcf;
    --warn-line: #ead4ac;
    --bad-line: #efc6c1;

    /* --- akcenty ------------------------------------------------------------
       Jasná modř značky si žádá stejně živé akcenty. Sada cyan / fialová /
       amber / růžová / smaragd — každá agenda má svou barvu, takže se sekce
       pozná dřív, než se přečte nadpis, a barva znamená pořád totéž. */
    --teal: #0e6f86;     --teal-bg: #dcf0f6;   --teal-line: #b0dbe7;
    --violet: #5b46c7;   --violet-bg: #e9e6fa; --violet-line: #cbc3f2;
    --gold: #9c5a08;     --gold-bg: #faefdc;   --gold-line: #ead4ac;
    --coral: #b93229;    --coral-bg: #fae9e7;  --coral-line: #efc6c1;
    --grass: #0b8560;    --grass-bg: #e1f3ec;  --grass-line: #b6dfcf;

    /* --- rozměry ---
       Jedna stupnice pro odsazení i rádiusy. Bez ní se každá komponenta odsadí
       „od oka“ a stránka se rozjede. */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px;

    --r-xs: 8px; --r-sm: 11px; --r-md: 14px; --r-lg: 16px; --r-xl: 18px;
    --r-pill: 999px;

    /* Jednotná výška formulářových prvků (input, select, tlačítko) — aby v jedné řadě
       neseděly editboxy, rolety a tlačítka každý v jiné výšce. Textarea je víceřádková,
       drží se `min-height`. Mění se tady na jednom místě. */
    --control-h: 36px;

    --shadow-1: 0 1px 2px rgb(16 20 40 / .05);
    --shadow-2: 0 1px 2px rgb(16 20 40 / .06), 0 8px 24px -8px rgb(16 20 40 / .12);
    --shadow-3: 0 2px 6px rgb(16 20 40 / .10), 0 32px 64px -16px rgb(16 20 40 / .28);
}

/* --- tmavý motiv ----------------------------------------------------------
   Přepnou se jen tokeny, komponenty jedou beze změny. Značková modř se zesvětlí
   (jinak by jako text na tmavém zmizela), stavové i akcentní barvy taky. Volbu
   drží `data-theme` na <html>, nastaví ji skript v hlavičce ještě před vykreslením
   (bez probliknutí) podle uložené volby nebo systému. Tatáž volba (localStorage
   `riscare-theme`) platí i na pracovní ploše. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --brand: #8fa3ff;
    --brand-ink: #a9b8ff;
    --brand-mid: #6b7fd6;
    --brand-soft: #1b2340;
    --brand-line: #2c3558;
    --accent: #7f95ff;

    --bg: #0b0d12;
    --panel: #151821;
    --panel-2: #1a1e29;
    --panel-3: #232937;
    --ink: #e9ebf3;
    --ink-2: #a7adbf;
    --muted: #7c8299;
    --line: #2b3140;
    --line-soft: #222735;
    --line-strong: #3a4154;

    --good: #3ecf9e;   --warn: #dfa85c;   --bad: #f08279;
    --good-bg: #11302a; --warn-bg: #2c2416; --bad-bg: #31191a;
    --good-line: #1d4b41; --warn-line: #4a3c22; --bad-line: #4d2a28;

    --teal: #4cc3e0;   --teal-bg: #0e2b35;   --teal-line: #1d4653;
    --violet: #a294ff; --violet-bg: #201d38; --violet-line: #352f5c;
    --gold: #dfa85c;   --gold-bg: #2c2416;   --gold-line: #4a3c22;
    --coral: #f08279;  --coral-bg: #31191a;  --coral-line: #4d2a28;
    --grass: #3ecf9e;  --grass-bg: #11302a;  --grass-line: #1d4b41;

    --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-2: 0 1px 2px rgb(0 0 0 / .45), 0 8px 24px -8px rgb(0 0 0 / .6);
    --shadow-3: 0 2px 6px rgb(0 0 0 / .5), 0 32px 64px -16px rgb(0 0 0 / .8);
}
/* Pruh „pohled klienta“ zůstává tmavě modrý banner s bílým textem v obou motivech. */
:root[data-theme="dark"] .viewas-bar { background: #182240; }
/* Logo se nikdy neinvertuje — na tmavé liště sedí v bílé destičce s modrým logem. */
/* V tmavém svítí logo značkovou modří tmavého motivu (#8fa3ff) — ne na bílé destičce
   (vypadala jako nálepka) a ne invertované do bílé (logo je modré, ať je pozadí jakékoli).
   Obrázek prohazuje `content: url()`: <img> je samostatný dokument, z CSS se obarvit nedá.
   Tmavou variantu VYRÁBÍ tools/make-logo-dark.mjs ze světlé — needituje se ručně. */
:root[data-theme="dark"] .brand-logo { content: url("/img/riscare-logo-tmavy.svg"); }

* { box-sizing: border-box; }

/* Systémové písmo zůstává ve fallbacku: než se woff2 načte (a na stroji bez něj)
   nesmí rozhraní zůstat bez písma.
   POZOR — TISK ZATÍM JEDE JINAK. PDF se sází v sandboxu, kam projde jen `data:`,
   takže odsud se Instrument Sans do výstupů nedostane a PrintTheme zatím drží
   systémové bezpatkové písmo. Dokud se do něj písmo nevloží jako base64, vypadá
   appka a to, co z ní vypadne, trochu jinak. Je to VĚDOMÝ mezikrok. */
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: var(--fs-body)/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

/* Jedna typografická škála (tokeny nahoře). Řezy zůstávají lehké — jemné písmo
   jako na přístrojovce, žádné tučné nadpisy. */
h1, h2, h3 { margin: 0; letter-spacing: -.018em; font-weight: 600; }
h1 { font-size: var(--fs-page); line-height: 1.18; }
h2 { font-size: var(--fs-card); }
h3 { font-size: var(--fs-sub); }
p { margin: 0; }

a { color: var(--brand); }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.bad-text { color: var(--bad); font-weight: 600; }
.ok-text { color: var(--good); font-weight: 600; }

/* Popisek nad nadpisem. Dává sekci kontext bez toho, aby soutěžil o pozornost. */
.eyebrow {
    font-size: var(--fs-micro); font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--muted);
}

/* ---------- horní lišta ---------------------------------------------------
   Jen navigace a identita. Akce patří ke stránce, na kterou působí. */

.topbar {
    display: flex; align-items: center; gap: var(--s3);
    padding: 0 var(--s5); height: 64px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 20;
}

.brand { display: flex; align-items: center; text-decoration: none; }
/* Poměr stran loga je 173:72 — výška musí zůstat dopočítaná, jinak se deformuje. */
.brand-logo { width: 124px; height: auto; display: block; }

/* Lišta je JEDEN řádek a musí se vejít. Zalomená navigace vyroste do výšky, rozhodí
   sticky offset a „Odhlásit" utíká za okraj — proto `nowrap` na položkách a nabídky
   místo dlouhé řady odkazů (viz _Layout). */
.nav { display: flex; gap: var(--s1); margin-left: var(--s4); height: 100%; min-width: 0; }
.nav a {
    display: flex; align-items: center; padding: 0 10px; white-space: nowrap;
    color: var(--muted); text-decoration: none; font-weight: 600; font-size: var(--fs-label);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav a:hover { color: var(--ink); }
/* Bez zvýraznění aktivní položky uživatel neví, kde je. */
.nav a.on { color: var(--brand); border-bottom-color: var(--brand); }

/* Rozbalovací skupina v horní liště — týž prvek jako u záložek subjektu, jen zarovnaný
   na výšku lišty (ta je vysoká 68 px, kontextová lišta ne). */
.nav-group { height: 100%; align-items: stretch; }
.nav-group > .ctx-group-btn {
    padding: 0 10px; margin-bottom: -1px; white-space: nowrap; font-size: var(--fs-label);
}
.nav-group > .ctx-menu { left: auto; right: 0; margin-top: -1px; }

.user { margin-left: auto; display: flex; align-items: center; gap: var(--s2); min-width: 0; flex-shrink: 0; }
/* Dlouhé jméno nesmí roztlačit lištu — ořízne se, celé je v `title`. */
/* Jméno ustoupí navigaci, ne naopak: `min-width:0` mu dovolí se zmenšit, plné je v `title`.
   Přechodem na Instrument Sans (širší než systémové písmo) lišta při 1440 px přetekla
   o 30 px a jméno se přetisklo přes „Nápověda" — naměřeno, ne odhadnuto. */
.who {
    font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 18ch; min-width: 0; font-size: var(--fs-label);
}
.role {
    font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 600;
    background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line);
}

/* Stavový štítek v liště (předplatné). Patří do chromu aplikace vedle ovládání — pruh nad
   obsahem by odsouval obsah a čtenář by ho po druhém zobrazení přestal vnímat. */
.rb-tag {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    text-decoration: none;
}
.rb-tag-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.rb-tag-bad { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-line); }

/* Přepínač světlý/tmavý motiv — ikonové tlačítko v liště. */
.theme-toggle {
    width: 34px; height: 34px; padding: 0; font-size: 15px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.theme-toggle:hover { background: var(--bg); border-color: var(--line-strong); }
/* Přepínač jazyka je stejné ikonové tlačítko, jen s kódem jazyka místo ikony. */
.lang-toggle { text-decoration: none; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; }

/* ---------- pohled klienta ---------- */

.viewas-bar {
    display: flex; align-items: center; gap: var(--s4);
    padding: 10px var(--s6);
    background: var(--brand-ink); color: #fff; font-size: 14px;
}
.viewas-bar strong { color: #b9c6e8; }
.viewas-bar form { margin-left: auto; }
.viewas-bar .btn-ghost { border-color: #3b4d84; color: #fff; background: transparent; }
.viewas-bar .btn-ghost:hover { background: #24356b; }

/* Pruh veřejného dema (jen ke čtení) — vlídný info tón, ne varovný. */
.demo-bar {
    padding: 8px var(--s6); text-align: center; font-size: 13.5px;
    background: var(--teal-bg); color: var(--teal); border-bottom: 1px solid var(--teal-line);
}
.demo-bar strong { font-weight: 700; }

/* ---------- stránka ---------- */

.page { max-width: 1180px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); }

.page-head {
    display: flex; align-items: flex-start; gap: var(--s4);
    margin-bottom: var(--s5);
}
.page-head > :last-child:not(:first-child) { margin-left: auto; }
.page-head p { color: var(--muted); margin-top: 2px; }

.head-actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* ---------- kontextová lišta klienta ---------- */

.ctx {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-1); margin-bottom: var(--s5);
    /* Bez overflow:hidden — to ořezávalo rozbalovací menu skupin (Posouzení/Provoz/
       Třetí strany), které padá pod lištu. Rohy drží samotný border-radius; žádné dítě
       nemá pozadí až k okraji karty, takže se ořez nepotřebuje. */
}
.ctx-top { display: flex; align-items: center; gap: var(--s4); padding: var(--s5) var(--s5) var(--s4); }
.ctx-id { display: flex; align-items: center; gap: var(--s3); }
.ctx-back {
    width: 34px; height: 34px; border-radius: var(--r-sm); flex: none;
    display: grid; place-items: center; text-decoration: none; font-size: 18px;
    color: var(--muted); border: 1px solid var(--line); background: var(--bg);
}
.ctx-back:hover { color: var(--brand); border-color: var(--brand-line); }
.ctx-sub { color: var(--muted); font-size: 13.5px; margin-top: 1px; }
.ctx-actions { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }

/* Odznak propadlých lhůt — vždy viditelný na liště, aby byla urgence vidět z každé
   stránky subjektu. Zobrazuje se jen když je co hlásit; barevně jako stav „bad". */
.ctx-alert {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13px;
    text-decoration: none; color: var(--bad);
    background: var(--bad-bg); border: 1px solid var(--bad-line);
}
.ctx-alert:hover { border-color: var(--bad); }

.ctx-tabs { display: flex; gap: var(--s1); padding: 0 var(--s5); border-top: 1px solid var(--line); }
.ctx-tabs a {
    padding: 11px var(--s3); text-decoration: none; font-weight: 600; font-size: 14px;
    color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ctx-tabs a:hover { color: var(--ink); }
.ctx-tabs a.on { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- karta / sekce ---------- */

.card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s4) calc(var(--s4) + 2px);
    margin-bottom: var(--s3); box-shadow: var(--shadow-2);
}
.card > h2 { margin-bottom: var(--s3); }
.card.notice { border-left: 3px solid var(--brand); }
.card.notice.warn { border-left-color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }

/* ---------- metriky ---------------------------------------------------------
   Popisek nahoře, číslo velké, kontext pod ním. Dřív bylo pořadí obrácené
   a oko četlo nejdřív číslo bez toho, aby vědělo, čeho se týká. */

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-bottom: var(--s4); }

.kpi {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 3px);
    box-shadow: var(--shadow-1); position: relative; overflow: hidden;
}
.kpi::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--brand-mid);
}
.kpi.bad::before { background: var(--bad); }
.kpi.warn::before { background: var(--warn); }
.kpi.good::before { background: var(--good); }

.kpi .l {
    font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); margin-bottom: var(--s2);
}
.kpi .v { font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: -.01em; }
.kpi.bad .v { color: var(--bad); }
.kpi .s { font-size: 13px; color: var(--muted); margin-top: var(--s2); }

/* ---------- tabulky ----------------------------------------------------------
   JEDEN vzhled seznamu pro celou aplikaci. Každá tabulka dostane `class="tbl"` —
   ne kopii pravidel na stránce. Chování (řazení klikem, hledání, stránkování) jede
   globálně z `js/tabulka.js`; stránka nic nezapíná. Pravidla: docs/VZHLED.md.

   VÝŠKA ŘÁDKU JE PEVNÁ. Bez toho řádek kolísá podle toho, jestli se jméno zalomí
   (naměřeno 50 px vs. 71 px v jedné tabulce) a seznam se čte jako rozsypaný čaj.
   Svislé odsazení buněk je proto nulové — výšku drží řádek, ne padding. Dlouhý text
   se ořezává (`.trunc`), nikdy nezalomí. */

table { width: 100%; border-collapse: collapse; }
th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muted); font-weight: 600;
    padding: var(--s2) 10px; border-bottom: 1px solid var(--line-strong);
}
td { padding: 12px 10px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--bg); }
td.num, th.num { text-align: right; }

/* Tabulka se nesmačkává pod svou přirozenou šířku — sloupce jsou procentní, takže
   v úzkém okně (postranní panel, rozdělená obrazovka) by se popisky hlaviček přelezly
   do sousedního sloupce. Místo toho roluje vodorovně uvnitř karty. */
table.tbl { table-layout: fixed; font-size: var(--fs-body); min-width: 980px; }
.card:has(> table.tbl), .card:has(> .tbl-nav) { overflow-x: auto; }
table.tbl thead th {
    padding: 0 var(--s3); height: 34px; vertical-align: middle; white-space: nowrap;
    font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted);
    background: transparent; border-bottom: 1px solid var(--line);
}
table.tbl thead th:first-child { border-top-left-radius: var(--r-sm); }
table.tbl thead th:last-child { border-top-right-radius: var(--r-sm); }
table.tbl tbody tr { height: 48px; border-bottom: 1px solid var(--line-soft); }
table.tbl tbody tr:last-child { border-bottom: 0; }
/* Střídavé pruhy jsou pryč — s tenčí linkou a nižším řádkem je seznam čitelný
   i bez nich a nevypadá jako výpis z databáze. Řádek se zvýrazní až pod myší. */
table.tbl tbody tr:nth-child(even) { background: transparent; }
table.tbl tbody td {
    padding: 0 var(--s3); border-bottom: 0; overflow: hidden; vertical-align: middle;
}
table.tbl tbody tr:hover td { background: transparent; }
table.tbl tbody tr:hover { background: var(--panel-2); }
/* Rodina „lidé" — řádek s iniciálou a podtitulem pod jménem. */
table.tbl.tbl-lide tbody tr { height: 62px; }

/* Ořez dlouhého textu. Celá hodnota patří do `title`, jinak se ztratí. */
.trunc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dvouřádková buňka (jméno + podtitul) — obojí se ořezává zvlášť, výška řádku drží. */
.cell-2 { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.cell-2 .sub { font-size: 12px; color: var(--muted); }

/* Identifikátor (e-mail, kód, IČO, otisk) — NIKDY strojopisem. Prohlížeč sáhne po
   systémovém Courieru, ten má jiný duktus i výšku a v tabulce působí jako cizí prvek.
   Zůstává písmo aplikace, jen s pevnou šířkou číslic, aby kódy pod sebou lícovaly. */
.id-cell { font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--muted); font-size: 13px; }
/* Doslovný kód k opsání (název souboru, klíč konfigurace) — jediné místo pro strojopis. */
.code-literal { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* Hlavička, na kterou se dá kliknout. Šipku doplňuje skript do textu, ne ::after —
   jinak by zůstala viset i po přeřazení na jiný sloupec. */
table.tbl th.radit { cursor: pointer; user-select: none; }
table.tbl th.radit:hover { color: var(--ink); }
.radit-sipka { color: var(--brand); font-size: 9px; margin-left: 5px; }

/* Řádek nástrojů nad tabulkou — hledání vlevo, akce vpravo. */
.tbl-tools { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.tbl-tools .tbl-hledani { width: min(320px, 100%); }
.tbl-tools .vpravo { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.tbl-nav {
    display: flex; align-items: center; justify-content: center; gap: var(--s4);
    padding-top: var(--s3); margin-top: var(--s3); border-top: 1px solid var(--line);
}
.tbl-nav button { padding: 6px 12px; font-size: 13px; }
.tbl-nav button:disabled { opacity: .4; cursor: default; }
.tbl-nav-info { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tbl-nic { margin: var(--s4) 0 0; color: var(--muted); font-size: 14px; text-align: center; }

/* Buňka „kdo" — iniciála + jméno (a případný podtitul). Iniciála je menší než
   v kartě: v řádku 52/62 px by velká rozhodila výšku. */
.cell-klient { display: flex; align-items: center; gap: var(--s3); min-width: 0; height: 100%; }
.cell-klient .avatar { width: 32px; height: 32px; border-radius: var(--r-sm); font-size: 13px; }
.cell-klient .cell-2 { min-width: 0; flex: 1; }

/* Skóre v řádku — číslo nese pásmo barvou, slovo je vedle, ne pod ním (jinak by
   řádek narostl). V jednom bloku mají hodnoty stejnou velikost; význam nese barva. */
.skore { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; }
.skore b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.skore-slovo { font-size: 12px; color: var(--muted); white-space: nowrap; }
.skore-good b { color: var(--good); }
.skore-warn b { color: var(--warn); }
.skore-bad b { color: var(--bad); }

/* Průchod zájemce demem — časová osa jednoho dne. Řádky mají stejnou výšku písma,
   význam nese barva a pořadí, ne velikost. */
.pruchod { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.pruchod li {
    display: flex; align-items: baseline; gap: var(--s3);
    padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.pruchod li:last-child { border-bottom: 0; }
.pruchod-cas { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; width: 6ch; }
.pruchod-sekce { font-weight: 600; flex: none; min-width: 18ch; }
.pruchod-cesta { flex: 1; min-width: 0; font-size: 12.5px; }

/* Akce na konci řádku — pevná stopa, ať sloupec neposkakuje podle délky popisků. */
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); }
.row-actions form { margin: 0; }
.row-actions .btn-ghost { padding: 5px 10px; font-size: 13px; white-space: nowrap; }
/* Akce se NESMÍ smrsknout pod svůj text. Buňka má overflow:hidden, takže zúžené tlačítko
   se ořízne zleva a z „upravit" zbude „t" — vypadá to jako chyba dat, ne jako těsný sloupec.
   (Samotné `white-space: nowrap` nestačí: u flex položky s neviditelným overflow spadne
   `min-width: auto` na nulu a položka se zúží i tak.) */
.row-actions > * { flex: none; }

/* Akce v řádku jako PIKTOGRAM, ne odkaz se slovem (vzor z FinancniStudia). V seznamu
   o osmi sloupcích si „upravit · smazat" bere šířku, kterou potřebují data, a dvě slova
   v každém řádku dělají z tabulky text.
   BARVU NESE IKONA, ne až hover: tužka zeleně, koš červeně (rozhodnutí Radima 19. 9. 2026,
   stejně jako `.icon-edit`/`.icon-del` ve FinancniStudiu). Šedý piktogram, který se obarví
   až pod myší, po uživateli chce, aby si tvar rozluštil — barva odpoví dřív než tvar.
   Piktogramy jsou z jedné sady (_Ikona.cshtml); `title` i `aria-label` jsou povinné,
   bez nich je to pro čtečku i pro myš hádanka. */
.ico-akce {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border: 0; background: none;
    border-radius: var(--r-xs); cursor: pointer;
    color: var(--good);
    transition: background .12s, color .12s;
}
.ico-akce .ico { width: 17px; height: 17px; }
.ico-akce.smazat { color: var(--bad); }
.ico-akce:hover { background: var(--good-bg); }
.ico-akce.smazat:hover { background: var(--bad-bg); }
.ico-akce:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Sloupec s piktogramy se drží u pravého okraje, jako všude jinde v appce. */
td > .row-actions { justify-content: flex-end; }

/* Stav znění a jeho schválení patří k sobě, ale ne mezi stahovací tlačítka: stažení si
   vezme kdokoli, schválení je úkon navenek. Vlastní řádek to odděluje bez nadpisu navíc. */
.stav-schvaleni { display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line);
    border-radius: var(--r-md); background: var(--panel-2); }
.stav-schvaleni form { margin: 0; }

/* ---------- štítky ---------- */

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: var(--r-pill);
    font-size: var(--fs-hint); font-weight: 600; line-height: 1.5;
    border: 1px solid transparent; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.good { background: var(--good-bg); color: var(--good); border-color: var(--good-line); }
.pill.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.pill.bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.pill.dora { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.pill.dora::before { display: none; }

.flag {
    display: inline-block; margin-left: var(--s2); padding: 1px 8px;
    border: 1px dashed var(--line-strong); border-radius: 999px;
    font-size: 11px; color: var(--muted);
}

/* ---------- prázdné stavy ---------------------------------------------------
   Prázdná obrazovka bez vysvětlení vypadá jako chyba aplikace. */

.empty { text-align: center; padding: var(--s7) var(--s5); }
.empty-mark {
    width: 48px; height: 48px; border-radius: var(--r-md); margin: 0 auto var(--s4);
    display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.empty-mark svg { width: 24px; height: 24px; }
.empty h2 { margin-bottom: var(--s2); }
.empty p { color: var(--muted); max-width: 460px; margin: 0 auto var(--s4); }

/* ---------- klienti ---------- */

.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s3); }
.client-card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-1);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.client-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.client-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s4); }
.client-head h2 { margin: 0; flex: 1; }

/* Skóre připravenosti vede kartu — pásmo (good/warn/bad) je stejné jako na Připravenosti. */
.client-score {
    display: flex; align-items: baseline; gap: var(--s3);
    padding: var(--s3) var(--s4); border-radius: var(--r-md); margin-bottom: var(--s3);
}
.client-score.score-good { background: var(--good-bg); }
.client-score.score-warn { background: var(--warn-bg); }
.client-score.score-bad  { background: var(--bad-bg); }
.client-score-num { font-size: 30px; font-weight: 400; letter-spacing: -.01em; line-height: 1; color: var(--ink); }
.client-score-num span { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.client-score.score-good .client-score-num { color: var(--good); }
.client-score.score-warn .client-score-num { color: var(--warn); }
.client-score.score-bad  .client-score-num { color: var(--bad); }
.client-score-word { font-size: 13px; font-weight: 600; color: var(--muted); }

.client-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s4); }

.client-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: 0 0 var(--s4); }
.client-stats dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.client-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 400; letter-spacing: -.01em; }

.client-actions { display: flex; gap: var(--s2); }

/* ---------- skupinové dlaždice na přehledu (Posouzení / Provoz / Třetí strany) ----------
   Obsah nabídek z horního menu jako stavový rozcestník: každá agenda svůj řádek,
   barevný stav vpravo, celý řádek je odkaz do detailu. */
.group-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); }
.group-card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--shadow-1);
}
.group-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s2); }
.group-card-head h3 { margin: 0; font-size: 15px; }
.group-card-head .mark { color: var(--accent, var(--brand)); }

.group-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    padding: 11px 0; border-top: 1px solid var(--line);
    text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 500;
}
.group-row::after { content: "›"; color: var(--muted); font-size: 18px; margin-left: 2px; }
.group-row:hover { color: var(--brand); }
.group-row:hover > span:first-child { text-decoration: underline; }
.group-row > span:first-child { flex: 1; }
.group-row .pill { flex: none; }

/* ---------- rozcestník ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }

.tile {
    display: flex; align-items: flex-start; gap: var(--s3);
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: var(--s4) var(--s4) var(--s4) var(--s4); text-decoration: none; color: inherit;
    box-shadow: var(--shadow-1);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.tile:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-1px); }

.tile-icon {
    flex: none; width: 38px; height: 38px; border-radius: var(--r-sm);
    display: grid; place-items: center; background: var(--brand-soft); color: var(--brand);
}
.tile-icon svg { width: 20px; height: 20px; }

.tile-body { display: block; }
.tile-body strong { display: block; font-size: 15px; margin-bottom: 3px; }
.tile-body span { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Pracovní plocha je hlavní nástroj — dostane celý řádek a obrácené barvy. */
.tile-lead {
    grid-column: 1 / -1; align-items: center;
    background: var(--brand);
    border-color: var(--brand); color: #fff;
    box-shadow: 0 6px 20px rgb(21 40 100 / .22);
}
.tile-lead:hover { box-shadow: 0 10px 28px rgb(21 40 100 / .3); border-color: var(--brand); }
.tile-lead .tile-icon { background: rgb(255 255 255 / .16); color: #fff; width: 44px; height: 44px; }
.tile-lead .tile-icon svg { width: 24px; height: 24px; }
.tile-lead .tile-body strong { font-size: 17px; }
.tile-lead .tile-body span { color: rgb(255 255 255 / .8); }
.tile-go { margin-left: auto; font-size: 22px; opacity: .85; }

/* ---------- registr informací ---------- */

.roi-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.roi-head h2 { margin: 0; flex: 1; }
.roi-head code {
    background: var(--brand-soft); padding: 3px 8px; border-radius: var(--r-pill);
    font-size: 13px; color: var(--brand); margin-right: 6px;
}
.roi-badges { display: flex; gap: var(--s2); align-items: center; }
.mini-link { padding: 4px 10px; font-size: 12px; }

/* Šablony mají až 18 sloupců — tabulka roluje uvnitř karty, ne celá stránka. */
.roi-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--s5)); padding: 0 var(--s5); }
.roi-table { min-width: 100%; white-space: nowrap; }
.roi-table th { vertical-align: bottom; }
.roi-table th .field { display: block; font-size: 10px; color: var(--brand-mid); letter-spacing: .06em; }
.roi-table th .req { color: var(--bad); margin-left: 2px; }
.roi-table td { font-size: 13px; }
.cell-missing { background: var(--bad-bg); color: var(--bad); font-weight: 600; }

/* ---------- soulad ---------- */

td.ref { white-space: nowrap; font-size: 12px; color: var(--brand-mid); font-weight: 600; }
.small-cell { font-size: 12px; color: var(--muted); }

.incident { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.incident:last-child { border-bottom: 0; padding-bottom: 0; }
.incident-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.reasons { margin: var(--s2) 0 10px; padding-left: 18px; font-size: 13px; color: var(--muted); }
.reasons li { margin: 2px 0; }

/* ---------- metodika, drift ---------- */

.drift-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s2); flex-wrap: wrap; }
.drift-head h2 { margin: 0; }
.drift-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); font-weight: 700; margin: var(--s4) 0 6px; }
.drift-list { margin: 0; padding-left: 18px; font-size: 14px; }
.drift-list li { margin: 3px 0; }
.drift-list li.ok { color: var(--good); }

.deadlines { margin-top: 6px; }

.todo { list-style: none; padding: 0; margin: 0; }
.todo li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.todo li:last-child { border-bottom: 0; }

/* ---------- tlačítka ---------- */

.btn-primary, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--control-h); box-sizing: border-box; padding: 0 16px; border-radius: var(--r-sm);
    font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
    border: 1px solid transparent; white-space: nowrap;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn-primary .ico, .btn-ghost .ico { width: 16px; height: 16px; }
/* Plné tlačítko veze INTERAKTIVNÍ modř (--accent), ne značkovou navy: navy je na
   plochu tlačítka příliš tmavá a rozhraní po ní působí úředně. Navy zůstává pro
   identitu (logo, bočnice), accent pro to, na co se dá kliknout. */
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--brand); }
/* V tmavém motivu je značková modř světlá — bílý text na ní nemá kontrast. Tmavé plné
   tlačítko proto veze tmavý text (v obou stavech; --brand-ink je v tmavém taky světlá). */
:root[data-theme="dark"] .btn-primary { color: #0b0d12; }
:root[data-theme="dark"] .btn-primary:hover { background: var(--brand-ink); }
:root[data-theme="dark"] .btn-primary:hover { color: #0b1120; }
.btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg); border-color: var(--brand-line); }
.btn-ghost.on { background: var(--brand); color: #fff; border-color: var(--brand); }

:where(.btn-primary, .btn-ghost, .nav a, .ctx-tabs a, .tile, .client-card):focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px;
}

/* ---------- formulářová pole ---------- */

.field-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=search], input[type=time], input[type=tel], select {
    width: 100%; height: var(--control-h); box-sizing: border-box; padding: 0 11px; font: inherit;
    font-size: var(--fs-body);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--panel-2); color: var(--ink);
    transition: border-color .13s, box-shadow .13s, background .13s;
}
.fld { display: inline-flex; flex-direction: column; gap: 4px; }
.fld > span { line-height: 1; }
textarea {
    width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit;
    font-size: var(--fs-body); line-height: 1.55;
    min-height: calc(var(--control-h) * 2);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--panel-2); color: var(--ink);
    transition: border-color .13s, box-shadow .13s, background .13s;
}

/* Fokus jako prstenec, ne jako obrys navíc: obrys posouval sousedy o dva pixely
   a řádek formuláře při tabování poskakoval. */
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent); background: var(--panel);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--muted); }

/* Klávesnicový fokus musí být vidět i tam, kde prvek nemá vlastní stav. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Kdo si vypnul animace, nechce je ani tady. */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- přihlášení ----------
   Vstupní okno: vlevo brandový panel s „budíkem" skóre, vpravo čistý formulář.
   Panel drží hlubokou modř (bez ohledu na motiv), formulářová strana jede na tokenech. */
/* Centrovaný rámeček uprostřed obrazovky (jako Finanční studio) — bez dělení na půlky. */
.login-body {
    margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: var(--s5);
    background:
        radial-gradient(80% 50% at 50% -10%, var(--brand-soft) 0%, transparent 55%),
        var(--bg);
}
.login-box {
    position: relative; width: 100%; max-width: 400px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl);
    padding: 40px 40px 34px;
    box-shadow: 0 24px 60px -32px rgba(15, 23, 42, .35);
}
.login-logo { display: block; width: 152px; margin: 0 auto var(--s3); }
/* Výjimka z pravidla „logo se neinvertuje": na TMAVÉ přihlašovací stránce chce Radim logo
   inverzní — bílý rámeček i bílé písmo „riscare" přímo na tmavém pozadí, ne bílá destička
   (ta by na loginu působila jako nálepka). Platí jen pro login; jinde zůstává bílá destička. */
:root[data-theme="dark"] .login-logo { content: url("/img/riscare-logo-tmavy.svg"); }
.login-form-title {
    font-size: 20px; font-weight: 600; letter-spacing: -.01em; text-align: center;
    color: var(--ink); margin: 0 0 var(--s5);
}

.login-lang {
    position: absolute; top: 14px; right: 14px;
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
}
.login-lang a {
    text-decoration: none; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
    color: var(--muted); padding: 3px 10px; border-radius: 999px; line-height: 1;
}
.login-lang a:hover { color: var(--ink); }
.login-lang a.on { background: var(--brand); color: #fff; }
:root[data-theme="dark"] .login-lang a.on { color: #0b1120; }

/* Vstupy s ikonou, jemný focus prstenec. Pole jsou na --bg, ať se odliší od bílé karty. */
.login-fields { display: grid; gap: 12px; }
.login-field { position: relative; display: block; margin: 0; }
.login-field-ico {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--muted); pointer-events: none; transition: color .15s;
}
.login-field:focus-within .login-field-ico { color: var(--brand); }
.login-field input {
    width: 100%; height: 50px; padding: 0 16px 0 44px; font-family: inherit; font-size: 15px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: var(--ink);
    /* Výrazný blikající kurzor ve značkové modři — ať je po zaostření hned vidět, že pole je aktivní. */
    caret-color: var(--brand);
    transition: border-color .15s, box-shadow .15s;
}
.login-field input::placeholder { color: var(--muted); }
/* Nápověda k pravidlům hesla pod polem (registrace, obnova hesla). */
.login-pwd-rules { margin: -4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.login-field input:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.login-submit { width: 100%; height: 50px; margin-top: 6px; border-radius: var(--r-md); gap: 8px; font-size: 15px; }
.login-submit svg { width: 18px; height: 18px; }

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

@media (max-width: 460px) {
    .login-box { padding: 32px 26px 28px; }
}

.alert {
    background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-line);
    padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: var(--s4); font-size: 14px;
}

.demo { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.demo-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.demo-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 var(--s4); }
.demo-group { margin-top: var(--s4); }
.demo-group:first-of-type { margin-top: 0; }
.demo-group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.demo-group-title { font-size: 12.5px; font-weight: 750; color: var(--brand); }
.demo-group-note { font-size: 11.5px; color: var(--muted); }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo-account {
    display: flex; flex-direction: column; gap: 2px;
    text-align: left; padding: 9px 11px; font: inherit;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.demo-account:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.demo-account strong { font-size: 13px; line-height: 1.25; }
.demo-tag { font-size: 11px; color: var(--muted); }
.demo-cred { font-size: 10.5px; color: var(--muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; margin-top: 2px; word-break: break-all; }
@media (max-width: 480px) { .demo-grid { grid-template-columns: 1fr; } }

/* Banner při příchodu z webu „Vyzkoušet" — persona je předvyplněná, stačí Přihlásit. */
.login-prefill {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--brand-soft); border: 1px solid var(--brand-line); border-left: 3px solid var(--brand);
    border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: var(--s4);
}
.login-prefill strong { font-size: 14px; color: var(--brand); }
.login-prefill span { font-size: 12.5px; color: var(--ink-2); }
.login-prefill .login-prefill-hint { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ---------- druhý krok přihlášení (kód z e-mailu) ---------- */

.login-2fa-lead { margin: 0 0 var(--s4); font-size: 14px; line-height: 1.55; color: var(--ink-2); text-align: center; }
.login-2fa-lead strong { color: var(--ink); white-space: nowrap; }

/* Kód se opisuje z e-mailu po číslicích — pevná šířka a prostrkání, ať se nespletou.
   Ikona vlevo tu nepřekáží, protože text je vystředěný přes celé pole. */
.login-field input.login-2fa-code {
    padding-left: 14px; text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 24px; font-weight: 700; letter-spacing: 10px; text-indent: 10px;
}
.login-field input.login-2fa-code::placeholder { letter-spacing: 10px; font-weight: 400; }

.login-remember { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 0; font-size: 13.5px; cursor: pointer; }
.login-remember input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--brand); }
.login-remember small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.45; }

.login-note {
    background: var(--brand-soft); color: var(--ink-2); border: 1px solid var(--brand-line);
    padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: var(--s4); font-size: 13.5px;
}

.login-2fa-hint { margin: var(--s4) 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); text-align: center; }

.login-2fa-actions {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line);
}
.login-2fa-actions form { margin: 0; }
.login-2fa-resend {
    background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
    color: var(--brand); cursor: pointer; text-decoration: underline;
}
.login-2fa-resend:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.login-2fa-muted { font-size: 12.5px; color: var(--muted); }

/* ---------- dokumentace ---------- */

.doc-head { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s3); }
.doc-head h2 { margin: 0 0 2px; }
.doc-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.doc-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.doc-check .drift-sub { margin-top: 0; }
.doc-check p { margin: 4px 0; }
/* Na detailu dokumentu jsou kontroly samostatné karty vedle sebe — mřížka jim řeší mezery,
   vlastní spodní okraj karty by je rozhodil. */
.doc-checks > .card { margin-bottom: 0; }
.doc-checks > .card h2 { font-size: 16px; margin: 0 0 var(--s3); }

.doc-text { margin-top: var(--s4); }
.doc-text summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.doc-text pre {
    margin-top: 10px; padding: var(--s4); background: var(--bg); border-radius: var(--r-sm);
    font-size: 12px; line-height: 1.6; white-space: pre-wrap; max-height: 380px; overflow: auto;
}

/* ---------- cyklus zlepšování ---------- */

.cycle-meta { display: grid; grid-template-columns: max-content 1fr; gap: 3px var(--s4); margin: 0; }
.cycle-meta dt { color: var(--muted); font-size: 13px; }
.cycle-meta dd { margin: 0; font-size: 13px; }

.phases { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.phase { border-left: 2px solid var(--line); padding: 0 0 var(--s5) var(--s5); margin-left: 16px; position: relative; }
.phase:last-child { border-left-color: transparent; padding-bottom: 0; }
.phase.done { border-left-color: var(--good); }
.phase.active { border-left-color: var(--brand); }

.phase-head { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: 10px; }
.phase-head h3 { margin: 0 0 2px; font-size: 16px; }

.phase-mark {
    position: absolute; left: -17px; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: 14px;
    background: var(--bg); color: var(--muted); border: 2px solid var(--line);
}
.phase.done .phase-mark { background: var(--good-bg); color: var(--good); border-color: var(--good); }
.phase.active .phase-mark { background: var(--brand); color: #fff; border-color: var(--brand); }

.facts { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: 4px; }
.facts li { display: flex; gap: var(--s3); font-size: 14px; }
.fact-label { color: var(--muted); min-width: 220px; }
.fact-value { font-weight: 600; }

.phase-actions { display: flex; gap: var(--s2); margin-top: var(--s2); }
.phase-note { margin: 0; padding: 10px 12px; background: var(--bg); border-radius: var(--r-sm); font-size: 14px; }

.start-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); align-items: end; }
.close-form { display: flex; gap: var(--s3); align-items: end; flex-wrap: wrap; margin-top: var(--s4);
    padding-top: var(--s4); border-top: 1px solid var(--line); }
.close-form label { flex: 1 1 280px; }
.close-form p { flex: 1 1 100%; margin: 0; }

/* ---------- manuál ----------
   Sazba se drží tištěné podoby (Services/PrintTheme.cs): stejné lekce, stejný jazyk.
   Kdo si manuál přečte na obrazovce a pak si ho stáhne, má vidět totéž. */

.manual { padding: var(--s2) var(--s5) var(--s5); }

.lesson { padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
.lesson:last-child { border-bottom: 0; }

.lesson-head { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s5); }
.lesson-head h2 { margin: 0; font-size: 20px; }
.lesson-no {
    flex: none; min-width: 30px; height: 30px; padding: 0 9px;
    border-radius: var(--r-xs); background: var(--accent, var(--brand)); color: #fff;
    font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.lesson-where { margin: 3px 0 0; font-size: 13px; color: var(--muted); }

.lesson-why {
    background: var(--accent-bg, var(--brand-soft)); border-left: 3px solid var(--accent, var(--brand));
    border-radius: 0 var(--r-md) var(--r-md) 0; padding: 12px 15px; margin: 0 0 var(--s5);
    color: var(--ink);
}

.lesson h3 {
    font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
    color: var(--muted); margin: 0 0 var(--s3); font-weight: 700;
}

/* Čísla kroků a vykřičníky u varování jsou odznaky, ne odrážky — v tisku i tady. */
.lesson-steps { counter-reset: krok; list-style: none; padding: 0; margin: 0 0 var(--s5); }
.lesson-steps li { counter-increment: krok; position: relative; padding-left: 38px; margin: 0 0 var(--s4); }
.lesson-steps li::before {
    content: counter(krok); position: absolute; left: 0; top: 0;
    width: 26px; height: 26px; border-radius: var(--r-xs);
    background: var(--accent-bg, var(--brand-soft)); border: 1px solid var(--accent-line, var(--brand-line));
    color: var(--accent, var(--brand)); font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.lesson-watch { list-style: none; padding: 0; margin: 0 0 var(--s5); }
.lesson-watch li { position: relative; padding-left: 38px; margin: 0 0 var(--s4); }
.lesson-watch li::before {
    content: "!"; position: absolute; left: 0; top: 0;
    width: 26px; height: 26px; border-radius: var(--r-xs); background: var(--warn-bg);
    color: var(--warn); font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.lesson-done {
    margin: 0; padding: 12px 15px; background: var(--good-bg);
    border-left: 3px solid var(--good); border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 14px; color: var(--ink);
}
.lesson-done strong { color: var(--good); }

/* ---------- responzivita ---------- */

@media (max-width: 1000px) {
    .kpis { grid-template-columns: 1fr 1fr; }
    .topbar { padding: 0 var(--s4); gap: var(--s3); }
    .ctx-top { flex-wrap: wrap; }
    /* Akce (Zpráva, Pracovní plocha, odznak lhůt) se na úzké obrazovce musí zalomit,
       jinak tlačítko „Pracovní plocha" přetéká a stránka roluje vodorovně. */
    .ctx-actions { margin-left: 0; flex-wrap: wrap; }
    /* Po seskupení do pěti položek se lišta vejde a řádkuje se; overflow-x by
       navíc ořezával rozbalovací menu. */
    .ctx-tabs { flex-wrap: wrap; }
}

/* Lišta se do jedné řady nevejde dřív, než začne mobilní rozvržení: naměřeno 801 px
   potřeby na 700 px místa, takže mezi 640 a 900 px stránka rolovala vodorovně. Zalomení
   proto začíná na 900 px, ne až na 640. */
@media (max-width: 900px) {
    /* Horní lišta se na úzkou obrazovku nevejde do jedné řady — logo a akce zůstanou
       nahoře, navigace se přesune pod ně na celou šířku. Jméno a role se skryjí
       (uživatel ví, kdo je; o který subjekt jde, říká hlavička stránky). */
    .topbar {
        height: auto; flex-wrap: wrap; row-gap: var(--s2);
        padding: var(--s3); gap: var(--s3);
    }
    .topbar .who, .topbar .role { display: none; }
    /* Navigace má víc položek, než se vejde do řádku — musí se zalomit, jinak
       přetéká vpravo a stránka roluje vodorovně. */
    .nav { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; row-gap: var(--s1); height: auto; }
    .nav a { padding: 0 var(--s2); }
    /* Zalomená lišta nemá pevnou výšku, takže se skupina nemůže roztáhnout na 100 %. */
    .nav-group { height: auto; }
    .nav-group > .ctx-group-btn { padding: 0 var(--s2); }
    .nav-group > .ctx-menu { left: 0; right: auto; }
    .brand-logo { width: 96px; }
}

/* Lišta je JEDEN řádek a musí se do něj vejít. Na úzkém notebooku ustupuje identita,
   ne navigace: uživatel ví, kdo je, ale bez odkazů se nikam nedostane. Prahy jsou
   naměřené (1280 px kolidovalo o 36 px), ne odhadnuté. */
@media (max-width: 1400px) {
    .topbar .role { display: none; }
}
@media (max-width: 1240px) {
    .topbar .who { display: none; }
}

@media (max-width: 640px) {
    .kpis { grid-template-columns: 1fr; }
    .page { padding: var(--s4) var(--s3) var(--s6); }

    /* KPI karty na úzkém displeji nemusí držet výšku popisku dvou řádků. */
    .kpi-top { min-height: 0; }

    /* Široké tabulky na mobil nezúžíš — ať rolují vodorovně uvnitř karty místo
       přetékání přes její okraj. Platí pro KAŽDOU tabulku na stránce, nejen pro ty
       v kartě: tabulka mimo kartu (Termíny napříč klienty) přetékala přes okraj. */
    .card table, .page table { display: block; overflow-x: auto; }
    /* Dlouhý popisek tlačítka se na mobilu zalomí, místo aby roztlačil stránku.
       Na široké obrazovce zůstává `nowrap` — tam by zalomení zvýšilo lištu. */
    .head-actions { flex-wrap: wrap; }
    .head-actions .btn-primary, .head-actions .btn-ghost { white-space: normal; max-width: 100%; }
}

/* ---------- tisk ---------- */

@media print {
    /* Ovládání aplikace na papír nepatří — po vytištění se na nic kliknout nedá.
       Skrývají se tlačítka, ne celé formuláře: v těch může být i obsah. */
    .topbar, .viewas-bar, .head-actions, .doc-actions, .client-actions, .ctx-tabs, .ctx-actions,
    button, .btn-primary, .btn-ghost { display: none !important; }

    body { background: #fff; }
    .page { max-width: none; padding: 0; }
    .card, .ctx { border: 0; padding: 0; margin-bottom: 14px; box-shadow: none; break-inside: avoid; }
    .manual { padding: 0; }

    /* Lekce je jedna stránka — stejně jako v PDF. */
    .lesson { break-before: page; break-inside: avoid; border-bottom: 0; padding: 0; }
    .lesson:first-child { break-before: auto; }

    a { color: inherit; text-decoration: none; }
}

/* ---------- členění stránky ------------------------------------------------
   Dlouhý sloupec karet se čte hůř než tři pojmenované bloky. Eyebrow říká,
   co v bloku je, dřív než ho oko začne luštit. */

.block { margin-bottom: var(--s6); }
.block:last-child { margin-bottom: 0; }
.block > .eyebrow { margin-bottom: var(--s3); }

.block-head { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s3); }
.block-head > .eyebrow { margin: 0; }
.block-head > a { margin-left: auto; text-decoration: none; font-weight: 600; }
.block-head > a:hover { text-decoration: underline; }

.block .card { margin-bottom: 0; }

/* ---------- akcenty a piktogramy ------------------------------------------
   Barva se nepřiděluje od oka: každá agenda ji má svou a drží se jí všude
   (záložka, hlavička sekce, dlaždice). Utilita nastaví trojici proměnných,
   komponenta si z nich vezme, co potřebuje. */

.a-brand  { --accent: var(--brand);  --accent-bg: var(--brand-soft);  --accent-line: var(--brand-line); }
.a-teal   { --accent: var(--teal);   --accent-bg: var(--teal-bg);     --accent-line: var(--teal-line); }
.a-violet { --accent: var(--violet); --accent-bg: var(--violet-bg);   --accent-line: var(--violet-line); }
.a-gold   { --accent: var(--gold);   --accent-bg: var(--gold-bg);     --accent-line: var(--gold-line); }
.a-coral  { --accent: var(--coral);  --accent-bg: var(--coral-bg);    --accent-line: var(--coral-line); }
.a-grass  { --accent: var(--grass);  --accent-bg: var(--grass-bg);    --accent-line: var(--grass-line); }

.ico { width: 18px; height: 18px; flex: none; }

/* Chip s ikonou. Dává sekci obrázek dřív, než se čte nadpis. */
.mark {
    width: 30px; height: 30px; border-radius: var(--r-xs); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-bg, var(--brand-soft));
    color: var(--accent, var(--brand));
    border: 1px solid var(--accent-line, var(--brand-line));
}

/* ---------- hlavička bloku ---------- */

.block { margin-bottom: var(--s6); }
.block-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }

/* NADPIS SEKCE. Dřív to byl 10,5px verzálkový popisek v šedomodré — a protože nad ním
   žádný nadpis nestál, bylo to jediné, co sekci titulkovalo. Odtud dojem nedodělané
   aplikace. Sazba je tatáž jako na riscare.cz (lehký řez, věta, ne verzálky), jen
   zmenšená na hustotu rozhraní; barvu agendy nese destička s piktogramem vedle. */
.block > .eyebrow,
.block-head .eyebrow {
    font-size: var(--fs-section); font-weight: 500; letter-spacing: -.02em;
    text-transform: none; color: var(--ink); line-height: 1.25;
}
.block-head > a { margin-left: auto; text-decoration: none; font-weight: 600; font-size: 13px; }
.block .card { margin-bottom: 0; }

/* ---------- metriky s ikonou ---------- */

.kpi { position: relative; }
/* Popisek se u delších názvů zalomí na dva řádky; bez pevné výšky by číslo
   v jedné kartě sedělo níž než ve zbytku řady a řada by vypadala rozházeně. */
.kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s3); min-height: 40px; }
.kpi-top .mark { width: 26px; height: 26px; border-radius: var(--r-xs); }
.kpi-top .mark .ico { width: 15px; height: 15px; }
.kpi .l { margin: 0; }

/* Pásek nahoře nese barvu agendy; stavové třídy ji přebijí, protože stav je
   důležitější než to, o čem karta je. */
.kpi::before { background: var(--accent, var(--brand-line)); }

/* ---------- záložky s ikonou ---------- */

.ctx-tabs a { display: inline-flex; align-items: center; gap: 7px; }
.ctx-tabs a .ico { width: 16px; height: 16px; opacity: .75; }
.ctx-tabs a.on .ico { opacity: 1; color: var(--brand); }

/* ---------- skupiny záložek (rozbalovací) ----------------------------------
   Sedm dílčích sekcí by v jednom řádku bylo nečitelných, proto se skládají do
   tří skupin. Menu se otevírá na hover i na fokus (`:focus-within`) — na dotyku,
   kde hover není, ho otevře ťuknutí, které prvek zaostří. */

.ctx-group { position: relative; display: inline-flex; }
.ctx-group-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px var(--s3); margin-bottom: -1px;
    font: inherit; font-weight: 600; font-size: 14px; line-height: normal;
    color: var(--muted); background: none; border: 0;
    border-bottom: 2px solid transparent; cursor: pointer;
}
.ctx-group-btn:hover { color: var(--ink); }
.ctx-group-btn .ico { width: 16px; height: 16px; opacity: .75; }
.ctx-group-btn.on { color: var(--brand); border-bottom-color: var(--brand); }
.ctx-group-btn.on .ico { opacity: 1; color: var(--brand); }
.ctx-caret { font-size: 10px; opacity: .7; margin-left: -2px; }

.ctx-menu {
    position: absolute; top: 100%; left: 0; z-index: 60;
    display: none; flex-direction: column; min-width: 190px;
    padding: 6px; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.ctx-group:hover .ctx-menu,
.ctx-group:focus-within .ctx-menu,
.ctx-group.open .ctx-menu { display: flex; }
/* Otevřená skupina má obrácenou šipku — potvrzení, že klik zabral. */
.ctx-group.open .ctx-caret { transform: rotate(180deg); }

.ctx-menu a {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 12px; border-radius: var(--r-sm); border: 0; margin: 0;
    font-weight: 500; font-size: 14px; color: var(--ink); text-decoration: none;
}
.ctx-menu a:hover { background: var(--bg); }
.ctx-menu a.on { color: var(--brand); font-weight: 600; background: var(--brand-soft); }
.ctx-menu a .ico { width: 16px; height: 16px; opacity: .75; }
.ctx-menu a.on .ico { opacity: 1; color: var(--brand); }

/* ---------- zvýraznění po úkonu ---------- */

.card.highlight {
    border-color: var(--grass-line);
    box-shadow: 0 0 0 3px var(--grass-bg);
}

/* ---------- iniciála klienta ---------- */

.avatar {
    width: 38px; height: 38px; border-radius: var(--r-sm); flex: none;
    display: grid; place-items: center; font-weight: 700; font-size: 15px;
    background: var(--accent-bg, var(--brand-soft));
    color: var(--accent, var(--brand));
    border: 1px solid var(--accent-line, var(--brand-line));
}

/* ---------- kalendář lhůt ---------- */
/* Druh lhůty jako chip s ikonou; barvu nese akcent agendy (.a-teal atd.). */
.chip {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 3px 10px 3px 8px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600;
    background: var(--accent-bg, var(--brand-soft)); color: var(--accent, var(--brand));
    border: 1px solid var(--accent-line, var(--brand-line));
}
.chip .ico { width: 14px; height: 14px; }

/* ---------- auditní stopa ----------
   Filtr GET (segment aktéra + chipy druhů) a čtecí tabulka událostí. */
.stopa-filtr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }

/* Přepínač aktéra — tři odkazy jako jeden segment. */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.seg a {
    padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--muted);
    text-decoration: none; border-left: 1px solid var(--line);
}
.seg a:first-child { border-left: 0; }
.seg a:hover { color: var(--ink); background: var(--bg); }
.seg a.on { background: var(--brand); color: #fff; }

.stopa-druhy { display: flex; flex-wrap: wrap; gap: 6px; }
.stopa-druhy .chip { text-decoration: none; cursor: pointer; }
/* Aktivní chip se vyplní barvou agendy. */
.chip.on { background: var(--accent, var(--brand)); color: #fff; border-color: var(--accent, var(--brand)); }
.chip.on .ico { color: #fff; }

.pill.staff { background: var(--panel-2, #eef1f6); color: var(--muted); border-color: var(--line); }
.pill.staff::before { background: var(--muted); }

table.stopa td { vertical-align: top; }
.stopa-kdy { white-space: nowrap; }
.stopa-kdy span { display: block; }
table.stopa td code { color: var(--muted); }
table.stopa td .chip { text-decoration: none; }

.stopa-strany { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s4); }
.stopa-nav { display: inline-flex; align-items: center; gap: var(--s4); }

/* ---------- skóre připravenosti na audit ---------- */
.readiness { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: center; }
.score { text-align: center; padding: var(--s4) var(--s6); border-radius: var(--r-lg); min-width: 190px; }
.score-good { background: var(--good-bg); }
.score-warn { background: var(--warn-bg); }
.score-bad  { background: var(--bad-bg); }
.score-num { font-size: 56px; font-weight: 300; line-height: 1; letter-spacing: -.005em; color: var(--ink); }
.score-num span { font-size: 22px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.score-good .score-num { color: var(--good); }
.score-warn .score-num { color: var(--warn); }
.score-bad  .score-num { color: var(--bad); }
.score-word { margin-top: var(--s2); font-weight: 600; font-size: 15px;
    text-transform: uppercase; letter-spacing: .1em; }
.score-good .score-word { color: var(--good); }
.score-warn .score-word { color: var(--warn); }
.score-bad  .score-word { color: var(--bad); }
.score-note p { margin: 0 0 var(--s3); }
.score-note p:last-child { margin-bottom: 0; }

.dims { display: grid; gap: var(--s4); }
.dim { display: flex; gap: var(--s4); align-items: flex-start; }
.dim-body { flex: 1; min-width: 0; }
.dim-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: 6px; }
.dim-head strong { font-size: 15px; }
.dim-weight { font-size: 12px; color: var(--muted); }
.dim-score { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.dim-score.good { color: var(--good); }
.dim-score.warn { color: var(--warn); }
.dim-score.bad  { color: var(--bad); }
.bar { height: 7px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; margin-bottom: 5px; }
.bar-fill { display: block; height: 100%; border-radius: var(--r-pill); }
.bar-fill.good { background: var(--good); }
.bar-fill.warn { background: var(--warn); }
.bar-fill.bad  { background: var(--bad); }

@media (max-width: 640px) {
    .readiness { grid-template-columns: 1fr; }
}

/* ---------- evidence školení ---------- */
/* Potvrzovací dialog — viz wwwroot/js/potvrzeni.js. */
.potvrzeni {
    border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5);
    background: var(--panel); color: var(--ink); max-width: 420px; box-shadow: var(--shadow-3);
}
.potvrzeni::backdrop { background: rgb(16 20 40 / .45); }
.potvrzeni-text { margin: 0 0 var(--s4); font-size: var(--fs-body); line-height: 1.5; }
.potvrzeni-akce { display: flex; justify-content: flex-end; gap: var(--s2); }
.potvrzeni-akce .btn-primary.je-nebezpecne { background: var(--bad); }
.potvrzeni-akce .btn-primary.je-nebezpecne:hover { background: #8f241d; }

/* ---------- FORMULÁŘ (docs/VZHLED.md §1) ---------------------------------
   Čtyři základní sloupce a dělení jen na sudý počet: čtvrtina, polovina, celý
   řádek. `repeat(auto-fit, minmax(…))` se nepoužívá — počet sloupců se s ním mění
   podle obsahu, takže dva formuláře v aplikaci vedle sebe nikdy nelícují a jeden
   údaj navíc přeskládá celý blok.

   Popisek stojí NAD polem a je krátký; vysvětlení nese kolečko „i" za ním. Věta
   pod každým polem udělá z formuláře článek — a přesně tím se rozhraní rozjelo. */
.form {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s4) var(--s4); align-items: end;
}
.pole { display: grid; gap: 5px; min-width: 0; }
.pole-pul { grid-column: span 2; }
.pole-cela { grid-column: 1 / -1; }
/* Prázdná buňka drží mřížku, aby řádky pod sebou lícovaly. */
.pole-prazdno { visibility: hidden; }
.pole > label {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-label); color: var(--muted); line-height: 1.3;
}
.pole > input, .pole > select, .pole > textarea { width: 100%; }
.form-akce { grid-column: 1 / -1; display: flex; gap: var(--s2); flex-wrap: wrap; }

/* Prvek odsunutý na konec řádku. Bylo to pětkrát `style="margin-left:auto"`. */
.vpravo { margin-left: auto; }

/* Jeden řádek: pole roztažené a tlačítko na konci. Pro dopsání hodnoty do rozjetého
   seznamu (komentář k úkolu, přiřazení poradce) — tam je mřížka formuláře zbytečná. */
.radek-pole { display: flex; align-items: center; gap: var(--s2); }
.radek-pole > input, .radek-pole > select { flex: 1; min-width: 0; }
.radek-pole > button { flex: none; }

/* Kolečko „i": vysvětlení, které nezabírá řádek. Text nese `title`, takže ho
   přečte i čtečka; bublinu kreslí prohlížeč, vlastní se nedodělává. */
.hint-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; flex: none; border-radius: 50%;
    border: 1px solid var(--line-strong); background: var(--panel-2);
    font-size: 10px; font-weight: 700; font-style: normal; color: var(--muted);
    cursor: help; user-select: none;
}
.hint-i:hover { border-color: var(--brand); color: var(--brand); }

/* Zaškrtávátko je čtvereček a popisek. Rámeček kolem něj z něj dělá tlačítko,
   které v řadě mezi textovými poli trčí — rámeček patří jen tam, kde je nositelem
   volby (výběr z možností), ne jednotlivému přepínači. */
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--fs-body); }
.check input[type="checkbox"] { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--accent); }

@media (max-width: 900px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .form { grid-template-columns: minmax(0, 1fr); }
    .pole-pul { grid-column: span 1; }
}

.training-actions { display: flex; gap: var(--s2); grid-column: 1 / -1; }
.link-danger { background: none; border: 0; padding: 0; margin-left: 10px; font: inherit; font-size: 13px;
    color: var(--bad); cursor: pointer; text-decoration: underline; }

/* ---------- due diligence dotazník ---------- */
.dd-q { padding: 12px 0; border-bottom: 1px solid var(--line); }
.dd-q:last-of-type { border-bottom: 0; }
.dd-text { font-size: 15px; margin-bottom: 8px; }
.dd-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
    border: 1px solid var(--line-strong); font-size: 13.5px; cursor: pointer; background: var(--panel);
    color: var(--ink); user-select: none; }
.dd-opt input { margin: 0; }
.dd-opt:hover { border-color: var(--brand-line); }
.dd-opt.sel.good { background: var(--good-bg); border-color: var(--good-line); color: var(--good); font-weight: 600; }
.dd-opt.sel.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); font-weight: 600; }
.dd-opt.sel.bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); font-weight: 600; }
/* Závěr prověření jede na společné mřížce formuláře (§1), jen se odsadí od otázek. */
.dd-zaver { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }

/* Hláška o stahování — jediná viditelná odezva kliku na „Stáhnout PDF/CSV/…":
   soubor se generuje i pár vteřin a Chrome stažení ohlásí jen nenápadně. */
.dl-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 8px);
    background: var(--ink);
    color: var(--panel);
    padding: 10px 18px;
    border-radius: var(--r-md);
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 1000;
    max-width: min(90vw, 480px);
    text-align: center;
}
.dl-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------------
   Modul Bezpečná komunikace (docs/ZADANI_modul_politika.md).
   Dotazník i matice kanálů se ukládají po jedné hodnotě, takže potřebují tichou
   zpětnou vazbu „uloženo" — tlačítko, po kterém se stránka překreslí, tu není.
   --------------------------------------------------------------------------- */
/* Dvousloupcový dotazník. Pole MUSÍ na sobě v řádku sedět — vysvětlivky mají různou
   délku, takže bez toho začíná každý editbox jinde a dvojice vypadá jako dva nesouvisející
   formuláře. Řeší to `subgrid`: otázka si nedělá vlastní mřížku, ale sedí ve třech pásech
   nadřazené (popisek / vysvětlivka / pole), takže výšku pásu určí ta delší z dvojice
   a obě pole začnou ve stejné výšce. */
.pol-otazky {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px var(--s5); margin-top: 14px;
}
.pol-otazka {
    display: grid; grid-template-rows: subgrid; grid-row: span 3;
    gap: 6px; align-content: start;
}
.pol-otazka.plna { grid-column: 1 / -1; }
/* Prázdná vysvětlivka drží pás, ale nesmí přidávat výšku tam, kde ji nemá nikdo v řádku. */
.pol-napoveda { margin: 0; min-height: 0; }
.pol-napoveda:empty { display: block; }
@media (max-width: 720px) { .pol-otazky { grid-template-columns: minmax(0, 1fr); } }
.pol-otazka > label { font-size: 14px; }
.pol-otazka p.small { margin: 0; }
.pol-otazka input[type="text"],
.pol-otazka select,
.pol-otazka textarea { width: 100%; }

/* Postup v řádku tabulky — pruh a zlomek vedle sebe. Pevná šířka pruhu, aby se
   řádky daly porovnat pohledem; číslice tabulkové, ať zlomky neskáčou. */
.postup { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.postup .bar { width: 96px; height: 7px; margin: 0; flex: none; }
.postup .bar-fill { background: var(--accent, var(--brand)); }
.postup b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* Postup vyplňování: velké číslo vlevo, pruh a věta vpravo. Číslo nese odpověď na
   „kde jsem", pruh ji ukazuje bez čtení. */
.pol-postup { display: flex; align-items: center; gap: var(--s4); margin: var(--s4) 0 var(--s2); }
.pol-postup-cislo { display: flex; align-items: baseline; gap: 6px; flex: none; }
.pol-postup-cislo strong { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.pol-postup-cislo span { font-size: 13px; color: var(--muted); }
/* Pruh se nesmí roztáhnout přes celou šířku — vyplněný na 100 % by vypadal jako
   dělicí linka, ne jako ukazatel. */
.pol-postup .bar { flex: 0 1 360px; height: 8px; margin: 0; }
.pol-postup .bar-fill { background: var(--accent, var(--brand)); transition: width .25s ease; }
@media (max-width: 560px) { .pol-postup .bar { flex: 1; } }

/* ---------- značka subjektu ----------
   Náhled záhlaví a výměna loga jsou jeden úkon, tedy jedna karta. */
.znacka { display: grid; gap: var(--s4); }
.znacka-popis { display: block; font-size: var(--fs-label); color: var(--muted); margin-bottom: 8px; }
/* Papír je bílý v obou motivech — je to náhled TISKU, ne prvek rozhraní. Rámeček proto
   jede na tokenu, ale plocha uvnitř zůstává papírem. */
.znacka-papir {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: var(--s5) var(--s5) var(--s3);
}
.znacka-akce { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.znacka-pozn { margin: 0; }

/* Výběr souboru. Nativní `input[type=file]` je prohlížečová vsuvka — v každém prohlížeči
   jiná, nejde jí nastavit písmo ani rádius a vedle vlastních tlačítek trčí. Skryje se
   a klikne se na popisek, který už rozhraní patří. */
.soubor { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; min-width: 0; }
.soubor input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.soubor-tlacitko {
    display: inline-flex; align-items: center; height: var(--control-h); padding: 0 16px;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    background: var(--panel-2); color: var(--ink); font-weight: 600; white-space: nowrap;
    transition: border-color .12s, background .12s;
}
.soubor:hover .soubor-tlacitko { border-color: var(--brand); background: var(--panel-3); }
.soubor input:focus-visible + .soubor-tlacitko { outline: 2px solid var(--brand); outline-offset: 2px; }
.soubor-nazev {
    font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 28ch;
}
.soubor-nazev.je { color: var(--ink); }

/* Stav postupu pod názvem subjektu — tam, kde se čte, o koho jde, a ne v menu.
   Je to jeden řádek: krátký pruh, zlomek a co je na řadě. */
.pol-stav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pol-stav .bar { width: 84px; height: 6px; margin: 0; flex: none; }
.pol-stav .bar-fill { background: var(--brand); }
.pol-stav .dim { color: var(--muted); }

/* Pět stupňů TLP jako semafor. Barva je z Traffic Light Protocol, ne z naší palety,
   a jde dovnitř inline proměnnou `--tlp` — komponenta si pak sama řekne, kde ji použít,
   takže tmavý motiv může odstín rozsvítit, aniž by se sahalo na inline styl. */
.tlp-pas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); }
.tlp-stupen {
    border: 1px solid var(--line); border-left: 4px solid var(--tlp);
    border-radius: var(--r-md); padding: var(--s3) var(--s4); background: var(--panel-2);
}
.tlp-stupen b { display: block; font-size: 13px; letter-spacing: .02em; margin-bottom: 5px; }
.tlp-stupen b::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px;
    border-radius: 50%; background: var(--tlp); vertical-align: middle;
}
.tlp-stupen span { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
/* Odstíny jsou ztmavené kvůli čitelnosti na papíře; na tmavém podkladu by splynuly,
   proto se rozsvítí. Míchá se z téže hodnoty, takže zdroj barvy zůstává jeden. */
:root[data-theme="dark"] .tlp-stupen { border-left-color: color-mix(in srgb, var(--tlp) 62%, #fff); }
:root[data-theme="dark"] .tlp-stupen b::before { background: color-mix(in srgb, var(--tlp) 62%, #fff); }
/* Pět stupňů se na dva sloupce nedělí beze zbytku — poslední by zůstal sám na řádku. */
@media (max-width: 980px) {
    .tlp-pas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tlp-stupen:last-child { grid-column: span 2; }
}
@media (max-width: 560px) {
    .tlp-pas { grid-template-columns: minmax(0, 1fr); }
    .tlp-stupen:last-child { grid-column: auto; }
}

.pol-vyber { display: flex; flex-wrap: wrap; gap: 8px; }
.pol-check { display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px;
  font-size: 14px; cursor: pointer; }
.pol-check input { width: auto; height: auto; margin: 0; }
.pol-check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }

/* Stav uložení: zelený rámeček na dvě vteřiny, červený zůstane. */
.pol-ulozeno { animation: pol-blik 2s ease-out; }
.pol-chyba { outline: 2px solid var(--bad); outline-offset: 1px; }
@keyframes pol-blik { from { outline: 2px solid var(--good); outline-offset: 1px; } to { outline-color: transparent; } }

/* Třídy informací jsou ČTYŘI SAMOSTATNÉ BLOKY, ne čtyři skupiny polí za sebou.
   Oddělené jen linkou splývaly: člověk nepoznal, kde Důvěrné končí a Citlivé začíná,
   a přitom je to nejdůležitější rozhodnutí v celém modulu. Vlastní rámeček, podbarvená
   hlavička s názvem a barevná lišta ve stupni TLP (`--tlp` inline) — tatáž barva, jakou
   má třída v pásu nahoře, takže se obě místa čtou jako jedna věc. */
.pol-tridy { display: grid; gap: var(--s4); }
.pol-trida {
    display: grid; gap: var(--s3); padding: 0;
    border: 1px solid var(--line); border-left: 4px solid var(--tlp, var(--line-strong));
    border-radius: var(--r-md); background: var(--panel-2); overflow: hidden;
}
.pol-trida-hlava {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: var(--s3) var(--s4); background: var(--panel-3);
    border-bottom: 1px solid var(--line);
}
.pol-trida-hlava input { font-weight: 600; font-size: 15px; max-width: 320px; background: var(--panel); }
.pol-trida-hlava .znacka-tlp {
    margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .02em;
    color: var(--tlp, var(--muted)); white-space: nowrap;
}
.pol-trida > label, .pol-trida > button { margin: 0 var(--s4); }
.pol-trida > *:last-child { margin-bottom: var(--s4); }
.pol-trida label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.pol-trida button { justify-self: start; }
:root[data-theme="dark"] .pol-trida { border-left-color: color-mix(in srgb, var(--tlp, #888) 62%, #fff); }
:root[data-theme="dark"] .pol-trida-hlava .znacka-tlp { color: color-mix(in srgb, var(--tlp, #888) 62%, #fff); }

.pol-rezim { width: 100%; font-size: 13px; }

/* Náhled znění politiky: text vzniká z dat, needituje se tady — proto jen čitelný výpis. */
/* Náhled znění politiky: dokument, ne výpis zdroje. Dřív to byl syrový markdown
   ve strojopisu — včetně „| --- |" u tabulek — a na první pohled to vypadalo jako
   polotovar, přestože PDF pod tím bylo vysázené. Sazba zrcadlí PrintTheme (tmavě modré
   nadpisy, tabulky bez mřížky, střídmá barva), ale jede na tokenech, takže platí
   i v tmavém motivu. */
.pol-dokument {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 30px 34px; max-height: 65vh; overflow: auto;
  font-size: var(--fs-body); line-height: 1.65; color: var(--ink-2);
}
.pol-dokument > :first-child { margin-top: 0; }
.pol-dokument > :last-child { margin-bottom: 0; }

.pol-dokument h1 {
  font-size: 23px; line-height: 1.15; letter-spacing: -.01em;
  color: var(--brand-ink); margin: 0 0 4px; font-weight: 700;
}
/* Název firmy sedí hned pod titulem jako podtitul — stejně jako v PDF. */
.pol-dokument h1 + h2 {
  font-size: 15px; font-weight: 600; color: var(--muted);
  margin: 0 0 26px; padding: 0; border: 0;
}
.pol-dokument h2 {
  font-size: 16.5px; color: var(--brand-ink); font-weight: 700;
  margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.pol-dokument h3 {
  font-size: var(--fs-sub); color: var(--ink); font-weight: 700; margin: 20px 0 6px;
}
.pol-dokument p { margin: 0 0 11px; }
.pol-dokument strong { color: var(--ink); font-weight: 600; }
.pol-dokument ul, .pol-dokument ol { margin: 0 0 12px; padding-left: 22px; }
.pol-dokument li { margin-bottom: 4px; }
.pol-dokument li::marker { color: var(--muted); }

/* Tabulky bez mřížky — jako v tisku; hlavička nese jen linku a kapitálky. */
.pol-dokument table {
  width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 13.5px;
}
.pol-dokument th {
  text-align: left; font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 0 14px 7px 0;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.pol-dokument td {
  padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.pol-dokument tr > *:last-child { padding-right: 0; }
/* Titulní tabulka (Verze / Datum vydání / IČO …) nadpisy sloupců nemá — markdown ale
   hlavičkový řádek vyžaduje, takže v ní stojí prázdný. Skrýt ho a první sloupec sázet
   jako popisek; jinak tabulka začne prázdným pruhem. */
.pol-dokument table:has(th:empty) thead { display: none; }
.pol-dokument table:has(th:empty) td:first-child {
  color: var(--muted); width: 34%; font-size: 13px;
}
.pol-dokument table:has(th:empty) tr:first-child td { border-top: 1px solid var(--line); }

.pol-dokument blockquote {
  margin: 14px 0 18px; padding: 10px 16px;
  border-left: 3px solid var(--accent); background: var(--brand-soft);
  color: var(--ink); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.pol-dokument blockquote p:last-child { margin-bottom: 0; }
.pol-dokument hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.pol-dokument code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
  background: var(--panel-3); border-radius: 4px; padding: 1px 5px;
}
.pol-dokument em { color: var(--muted); }

/* Kick-off dotazník: doplňující údaje jsou sbalené, aby základ nevypadal jako zeď. */
.pol-doplnujici > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; padding: 14px 0;
}
.pol-doplnujici > summary::-webkit-details-marker { display: none; }
.pol-doplnujici > summary::before {
  content: "▸"; color: var(--muted); font-size: .85em; transition: transform .15s ease;
}
.pol-doplnujici[open] > summary::before { content: "▾"; }
.pol-doplnujici > summary:hover .eyebrow { color: var(--brand); }