/* Thumbsday — sdílený styl appky (Notion-minimal). Tokeny odpovídají DESIGN.md → Colors.
   Hodnota mimo tokeny = nález. Sjednoceno s mockups/styl.css (T05) — základ je 1:1 kopie
   maket, doplněno o obrazovky mimo makety (přihlášení, změna hesla, správa uživatelů,
   chybová stránka) a viditelnost položek postranního panelu podle role. */
:root {
  --bg: #ffffff;
  --plocha-2: #f7f7f5;
  --hover: #efefed;
  --aktivni: #e8e8e5;
  --text: #37352f;
  --tlum: #6b6a65;
  --tlum-2: #9b9a97;
  --linka: #e9e9e7;
  --linka-2: #f1f1ef;
  --linka-silna: #d9d9d6;
  --akce: #2f2e2a;
  --akce-hover: #4a4843;
  --fokus: #2383e2;
  --prohlizec: #ebebea;
  --zvyrazneni: #fbf3dc;

  --ok: #2d7a4e;          --ok-hover: #24653f;  --ok-plocha: #e4f2e9;
  --ne: #b83a2f;          --ne-plocha: #fbe9e6;
  --ceka: #6b6a65;        --ceka-plocha: #f1f1ef;
  --varovne: #9a560b;     --varovne-plocha: #fbefe0;

  --st-plan-text: #55534e; --st-plan: #efefed;
  --st-dela-text: #1f4f82; --st-dela: #e3eefa;
  --st-ke-text: #7a5a12;   --st-ke: #fbf1d4;
  --st-ok-text: #22603d;   --st-ok: #e4f2e9;
  --st-ne-text: #8f2a22;   --st-ne: #fbe9e6;

  --stin-pop: 0 0 0 1px rgba(15,15,15,.05), 0 3px 6px rgba(15,15,15,.08), 0 9px 24px rgba(15,15,15,.14);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.5 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.tlum { color: var(--tlum); }

/* ---------- ikony ---------- */
.ikona { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.15em; }
.ikona.s { width: 14px; height: 14px; }
.ikona.m { width: 18px; height: 18px; }
.ikona.l { width: 24px; height: 24px; }
.ikona.xl { width: 32px; height: 32px; stroke-width: 1.6; }

/* ---------- layout s postranním panelem ---------- */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .18s ease; }
.app.bez-prechodu { transition: none; }
.sidebar { background: var(--plocha-2); border-right: 1px solid var(--linka); padding: 8px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.sb-hlava { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; }
/* Značka + wordmark = jeden lockup SVG (web/znacka.js) — barva `--akce` (inkoust,
   DESIGN.md → Brand & Landing), zelený akcent stopy je pevná barva uvnitř SVG. */
.sb-znacka { display: flex; align-items: center; padding: 8px; text-decoration: none; flex: 0 1 auto; min-width: 0; border-radius: 6px; color: var(--akce); }
.sb-znacka svg { display: block; }
.sb-prepnout { flex: none; }
.sb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-av { display: inline-grid; }
.sb-polozka { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--tlum); text-decoration: none; font-weight: 500; }
.sb-polozka:hover { background: var(--hover); color: var(--text); }
.sb-polozka[aria-current="page"] { background: var(--aktivni); color: var(--text); }
.sb-polozka .ikona { width: 16px; height: 16px; }
.sb-pocet { margin-left: auto; font-size: 12px; color: var(--tlum); font-variant-numeric: tabular-nums; }
.sb-oddel { height: 1px; background: var(--linka); margin: 8px; }
.sb-pata { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--linka); }
.sb-pata .sb-jmeno { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Verze aplikace v hlavičce hned za lockupem (margin-right: auto odsune tlačítko sbalení
   doprava) — klik = tvrdé přenačtení bez cache (`tvrdeObnoveni()`). */
.sb-verze { flex: none; margin: 0 auto 0 -3px; padding: 0 2px; border: 0; background: none; font-size: 10px; line-height: 14px; color: var(--tlum); font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 4px; }
.sb-verze:hover { color: var(--text); text-decoration: underline; }
.sb-verze[aria-busy="true"] { cursor: progress; opacity: .6; }

/* sbalený sidebar = úzký pruh ikon (jen na širokém layoutu; pod 1100 px je panel nahoře) */
@media (min-width: 1101px) {
  .app.sbaleny { grid-template-columns: 56px minmax(0, 1fr); }
  .app.sbaleny .sidebar { align-items: center; padding: 8px 6px; }
  .app.sbaleny .sb-hlava { flex-direction: column; gap: 4px; }
  .app.sbaleny .sb-znacka { padding: 8px; flex: none; }
  .app.sbaleny .sb-text, .app.sbaleny .sb-pocet { display: none; }
  .app.sbaleny .sb-polozka { width: 40px; height: 36px; padding: 0; justify-content: center; }
  .app.sbaleny .sb-pata { flex-direction: column; padding: 8px 0 4px; width: 100%; }
  .app.sbaleny .sb-verze { margin: 0; font-size: 9px; }
}
.obsah { min-width: 0; padding: 0 48px 64px; overflow-x: clip; }
.lista { height: 44px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tlum); }
.lista a { text-decoration: none; padding: 2px 6px; border-radius: 4px; }
.lista a:hover { background: var(--hover); color: var(--text); }
.lista .oddel { color: var(--tlum-2); }
.lista a.zpet { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; margin-right: 4px; border-radius: 999px; border: 1px solid var(--linka-silna); background: var(--bg); color: var(--text); }
.lista a.zpet:hover { background: var(--plocha-2); }
.lista a.zpet .ikona { width: 16px; height: 16px; }
.stranka { max-width: 1240px; margin: 0 auto; }

.hlavicka { display: flex; align-items: flex-end; gap: 16px; margin: 32px 0 16px; }
.hlavicka h1 { flex: 1; min-width: 0; }
.akce { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h1 { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 16px; line-height: 1.4; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
.sekce { margin-top: 32px; }
.sekce-hlava { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--linka); }
.sekce-hlava h2 { flex: 1; }
.sekce-hlava .meta { font-size: 13px; color: var(--tlum); }

@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--linka); }
  .sb-znacka { padding: 0 8px; }
  .sb-hlava { padding: 0; }
  .sb-prepnout { display: none; }
  .sb-oddel { display: none; }
  .sb-pata { margin: 0 0 0 auto; border: 0; }
  .obsah { padding: 0 20px 48px; }
}

/* ---------- tlačítka ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid transparent; background: none; font-size: 14px; font-weight: 500; line-height: 1; color: var(--text); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .12s ease, border-color .12s ease; }
.btn .ikona { width: 16px; height: 16px; }
.btn-primarni { background: var(--akce); color: #fff; }
.btn-primarni:hover { background: var(--akce-hover); }
.btn-sek { background: var(--bg); border-color: var(--linka-silna); }
.btn-sek:hover { background: var(--plocha-2); }
.btn-ter { color: var(--tlum); }
.btn-ter:hover { background: var(--hover); color: var(--text); }
.btn-schvalit { background: var(--ok); color: #fff; }
.btn-schvalit:hover { background: var(--ok-hover); }
.btn-neschvalit { background: var(--bg); border-color: var(--linka-silna); color: var(--ne); }
.btn-neschvalit:hover { background: var(--ne-plocha); border-color: var(--ne-plocha); }
.btn-maly { height: 28px; padding: 0 10px; font-size: 13px; }
.btn-maly .ikona { width: 14px; height: 14px; }
.btn-velky { height: 40px; padding: 0 16px; font-size: 15px; }
.btn-ikona { width: 32px; padding: 0; }
.btn-maly.btn-ikona { width: 28px; }
/* `.btn-mini` — osiřelá třída z T01 (web/uzivatele.html, ikona úpravy zobrazovaného jména
   vedle textu v tabulce); doplněno při T05 review DoD (react-dev.md — žádné osiřelé třídy). */
.btn-mini { height: 22px; padding: 0 6px; font-size: 12px; }
.btn-mini .ikona { width: 12px; height: 12px; }
.btn-mini.btn-ikona { width: 22px; }
.btn-cele { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-primarni[disabled]:hover { background: var(--akce); }
.btn-schvalit[disabled]:hover { background: var(--ok); }
.btn .pocet { font-variant-numeric: tabular-nums; opacity: .75; }
kbd { font: 500 11px/1 var(--mono); padding: 3px 5px; border-radius: 4px; background: rgba(55,53,47,.08); color: inherit; }
.btn-primarni kbd, .btn-schvalit kbd { background: rgba(255,255,255,.18); }
.proc-vypnuto { font-size: 13px; color: var(--tlum); }

/* ---------- čipy, stavy, štítky ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 22px; white-space: nowrap; background: var(--linka-2); color: var(--st-plan-text); }
.chip .ikona { width: 12px; height: 12px; }
.stav::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: .8; }
.stav-naplanovano { background: var(--st-plan); color: var(--st-plan-text); }
.stav-dela_se { background: var(--st-dela); color: var(--st-dela-text); }
.stav-ke_schvaleni { background: var(--st-ke); color: var(--st-ke-text); }
.stav-schvaleno { background: var(--st-ok); color: var(--st-ok-text); }
.stav-zamitnuto { background: var(--st-ne); color: var(--st-ne-text); }
.stitky { display: flex; gap: 4px; flex-wrap: wrap; }

/* ---------- avatary a semafor ---------- */
.av { position: relative; display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--aktivni); color: var(--st-plan-text); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.av-m { width: 28px; height: 28px; font-size: 11.5px; }
.av-l { width: 32px; height: 32px; font-size: 12px; }
.av-hlas { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 999px; background: var(--bg); display: grid; place-items: center; }
.av-hlas .ikona { width: 13px; height: 13px; stroke-width: 2.4; }
.h-schvalil { color: var(--ok); }
.h-neschvalil { color: var(--ne); }
.h-ceka { color: var(--tlum); }
.av-skupina { display: inline-flex; align-items: center; gap: 6px; }
.semafor { display: inline-flex; align-items: center; gap: 10px; }
.semafor-souhrn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tlum); font-variant-numeric: tabular-nums; white-space: nowrap; }
.semafor-souhrn b { color: var(--text); font-weight: 600; }
.semafor-souhrn .ne { color: var(--ne); display: inline-flex; align-items: center; gap: 3px; }
.osoba { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.osoby { display: flex; gap: 4px 12px; flex-wrap: wrap; }

/* ---------- pohledy a filtry (seznam) ---------- */
.pohledy { display: flex; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--linka); flex-wrap: wrap; }
.pohled { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--tlum); font-weight: 500; cursor: pointer; }
.pohled:hover { background: var(--hover); color: var(--text); }
.pohled[aria-selected="true"] { background: var(--aktivni); color: var(--text); }
.pohled .pocet { font-size: 12px; color: var(--tlum); font-variant-numeric: tabular-nums; }
.filtry { display: flex; align-items: center; gap: 6px; padding: 10px 0; flex-wrap: wrap; }
.filtr { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--linka-silna); border-radius: 999px; background: var(--bg); color: var(--tlum); font-size: 13px; font-weight: 500; cursor: pointer; }
.filtr:hover { background: var(--plocha-2); color: var(--text); }
.filtr.aktivni { background: var(--aktivni); border-color: var(--aktivni); color: var(--text); }
.filtr .ikona { width: 14px; height: 14px; }
.filtry .vpravo { margin-left: auto; font-size: 13px; color: var(--tlum); }

/* ---------- popover a dropdown ---------- */
.popover { position: absolute; z-index: 40; min-width: 220px; max-width: 320px; max-height: 360px; overflow: auto; background: var(--bg); border-radius: 8px; box-shadow: var(--stin-pop); padding: 6px; }
.pop-hledat { display: flex; align-items: center; gap: 6px; padding: 4px 8px 8px; margin: -2px -6px 6px; border-bottom: 1px solid var(--linka); color: var(--tlum); }
.pop-hledat input { border: 0; outline: 0; flex: 1; min-width: 0; font-size: 14px; background: none; padding: 4px 0; }
.volba { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; font-size: 14px; }
.volba:hover, .volba.fokus { background: var(--hover); }
.volba[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.volba .vpravo { margin-left: auto; font-size: 12px; color: var(--tlum); }
.volba .zatrzeni { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--linka-silna); display: grid; place-items: center; flex: none; }
.volba[aria-selected="true"] .zatrzeni { background: var(--akce); border-color: var(--akce); color: #fff; }
.volba .zatrzeni .ikona { width: 12px; height: 12px; stroke-width: 2.6; opacity: 0; }
.volba[aria-selected="true"] .zatrzeni .ikona { opacity: 1; }
.pop-pata { border-top: 1px solid var(--linka); margin: 6px -6px -6px; padding: 6px; }
.pop-prazdno { padding: 8px; font-size: 13px; color: var(--tlum); }

/* ---------- tabulka (seznam) ---------- */
/* Tabulka se nemačká: buňky se nezalamují (termín má záměrně dva řádky), co se nevejde,
   posouvá se vodorovně uvnitř .tab-posun — stránka sama vodorovně neroluje. Název je přilepený
   vlevo; stín na jeho hraně jen při odrolování (.odrolovano). border-collapse: separate, aby
   linky jely s přilepenou buňkou. */
.tab-posun { overflow-x: auto; overscroll-behavior-x: contain; }
table.tabulka { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tabulka th, .tabulka td { white-space: nowrap; }
.tabulka .stitky { flex-wrap: nowrap; }
.tabulka th:first-child, .tabulka td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); transition: box-shadow .12s ease; }
.tab-posun.odrolovano .tabulka th:first-child, .tab-posun.odrolovano .tabulka td:first-child { box-shadow: 1px 0 0 var(--linka), 6px 0 8px -6px rgba(15,15,15,.16); }
/* Přilepené záhlaví (T14, rozvržení stránky Položky/Správa uživatelů) — sedí nad přilepeným
   sloupcem Název (z-index 3), nad ostatními přilepenými buňkami sloupce (1) i běžnými
   buňkami. Funguje, jen když `.tab-posun`/`.tabulka-scroll` roluje i svisle (viz `body.pevna-vyska`). */
.tabulka th { position: sticky; top: 0; z-index: 2; background: var(--bg); height: 34px; padding: 0 8px; border-bottom: 1px solid var(--linka); font-size: 12px; font-weight: 500; color: var(--tlum); text-align: left; white-space: nowrap; }
.tabulka th:first-child { z-index: 3; }
.tabulka th .ikona { width: 13px; height: 13px; margin-right: 4px; }
.tabulka td { height: 48px; padding: 6px 8px; border-bottom: 1px solid var(--linka-2); vertical-align: middle; }
.tabulka tbody tr { cursor: pointer; }
.tabulka tbody tr:hover td { background: var(--plocha-2); }
.tabulka .t-nazev { font-weight: 500; text-decoration: none; display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabulka .t-nazev:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linka-silna); }
.tabulka .t-sub { font-size: 12px; color: var(--tlum); }
.tabulka .c-kom { text-align: right; color: var(--tlum); font-variant-numeric: tabular-nums; white-space: nowrap; }
.termin { white-space: nowrap; font-variant-numeric: tabular-nums; }
.termin .pozn { display: block; font-size: 12px; color: var(--tlum); }
.termin.po { color: var(--varovne); }
.termin.po .pozn { color: var(--varovne); display: flex; align-items: center; gap: 3px; }
.prazdne { padding: 48px 0; text-align: center; color: var(--tlum); }
.prazdne h2 { color: var(--text); margin-bottom: 4px; }
.prazdne .btn { margin-top: 16px; }

/* ---------- detail ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
@media (max-width: 1100px) { .detail { grid-template-columns: 1fr; gap: 24px; } .panel { position: static !important; } }
.vlastnosti { display: grid; grid-template-columns: 170px minmax(0, 1fr); margin-top: 8px; }
.vl-nazev { display: flex; align-items: center; gap: 8px; min-height: 34px; color: var(--tlum); }
.vl-nazev .ikona { width: 16px; height: 16px; }
.vl-hodnota { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; min-height: 34px; padding: 4px 0; }
.popis { font-size: 15px; line-height: 1.6; max-width: 72ch; }
.odkazy { display: flex; flex-direction: column; gap: 2px; }
.odkaz { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 8px; margin: 0 -8px; border-radius: 6px; text-decoration: none; }
.odkaz:hover { background: var(--hover); }
.odkaz .typ { font-size: 12px; color: var(--tlum); min-width: 110px; }
.odkaz .nazev { font-weight: 500; color: var(--text); }
.odkaz .ikona { color: var(--tlum); }
.odkaz .ven { margin-left: auto; }
.poznamka-varianty { font-size: 14px; color: var(--text); background: var(--plocha-2); border-radius: 6px; padding: 10px 12px; margin-bottom: 16px; max-width: 72ch; }
.poznamka-varianty .kdo { display: block; font-size: 12px; color: var(--tlum); margin-bottom: 2px; }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.nahled { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; min-width: 0; text-decoration: none; }
.nahled-obr { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--linka); border-radius: 8px; background: var(--plocha-2); display: grid; place-items: center; overflow: hidden; transition: border-color .12s ease; }
.nahled:hover .nahled-obr { border-color: var(--linka-silna); }
.nahled-obr img { max-width: 88%; max-height: 88%; object-fit: contain; border-radius: 4px; box-shadow: 0 0 0 1px rgba(15,15,15,.06); }
.nahled-obr .zoom { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 6px; background: var(--bg); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--linka); opacity: 0; transition: opacity .12s ease; }
.nahled:hover .zoom, .nahled:focus-visible .zoom { opacity: 1; }
.nahled-pdf { cursor: pointer; }
.nahled-pdf .nahled-obr { color: var(--tlum); gap: 6px; align-content: center; }
.nahled-jmeno { font-size: 12px; color: var(--tlum); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.panel { position: sticky; top: 16px; border: 1px solid var(--linka); border-radius: 8px; padding: 16px; }
.panel h2 { font-size: 14px; }
.panel .panel-hlava { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.panel .panel-hlava .meta { margin-left: auto; font-size: 12px; color: var(--tlum); }
.pravidlo-veta { font-size: 13px; color: var(--tlum); margin-bottom: 12px; }
.souhrn-radek { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; padding: 8px 0 12px; border-bottom: 1px solid var(--linka-2); }
.souhrn-radek span { display: inline-flex; align-items: center; gap: 4px; }
.souhrn-radek b { font-variant-numeric: tabular-nums; }
.schv-seznam { list-style: none; margin: 0; padding: 4px 0; }
.schv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linka-2); }
.schv:last-child { border-bottom: 0; }
.schv .jm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schv .kdy { font-size: 12px; color: var(--tlum); }
.schv .hlas { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; }
.muj-hlas { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linka); }
.muj-hlas .radek { display: flex; gap: 8px; flex-wrap: wrap; }
.muj-hlas .radek .btn { flex: 1; }
.muj-hlas .radek .btn-ter { flex: 0 0 100%; }
.muj-hlas p { font-size: 13px; color: var(--tlum); margin-bottom: 8px; }
.stav-veta { font-size: 13px; color: var(--tlum); display: flex; gap: 6px; align-items: flex-start; }

/* ---------- timeline ---------- */
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 1px; background: var(--linka); }
.tl-kolo { position: relative; display: flex; align-items: center; gap: 8px; margin: 24px 0 8px; padding-left: 36px; font-size: 12px; font-weight: 600; color: var(--tlum); }
.tl-kolo:first-child { margin-top: 0; }
.tl-kolo::after { content: ""; flex: 1; height: 1px; background: var(--linka); }
.tl-kolo .chip { font-weight: 500; }
.tl-u { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 6px 0; }
.tl-znak { width: 28px; height: 28px; border-radius: 999px; background: var(--bg); display: grid; place-items: center; color: var(--tlum); position: relative; z-index: 1; }
.tl-znak .ikona { width: 16px; height: 16px; }
.tl-znak.sys { box-shadow: 0 0 0 1px var(--linka); background: var(--plocha-2); }
.tl-radek { min-height: 28px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.tl-radek b { font-weight: 600; }
.tl-cas { font-size: 12px; color: var(--tlum); font-variant-numeric: tabular-nums; margin-left: 2px; }
.tl-text { margin-top: 4px; padding: 8px 12px; border-radius: 6px; background: var(--plocha-2); font-size: 14px; line-height: 1.55; max-width: 72ch; white-space: pre-wrap; }
.tl-mini { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.tl-mini button { width: 44px; height: 54px; padding: 0; border: 1px solid var(--linka); border-radius: 4px; background: var(--plocha-2); cursor: zoom-in; display: grid; place-items: center; overflow: hidden; }
.tl-mini img { max-width: 90%; max-height: 90%; }
.tl-mini .pdf { font-size: 11px; color: var(--tlum); cursor: default; }
.hlas-slovo { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.komentar-pole { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; margin-bottom: 20px; }
.komentar-pole .box { border: 1px solid var(--linka-silna); border-radius: 8px; padding: 8px 10px; }
.komentar-pole .box:focus-within { border-color: var(--fokus); box-shadow: 0 0 0 1px var(--fokus); }
.komentar-pole textarea { width: 100%; min-height: 44px; border: 0; outline: 0; resize: vertical; font-size: 14px; background: none; }
.komentar-pole .pata { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.komentar-pole .napoveda { margin-right: auto; font-size: 12px; color: var(--tlum); }

/* ---------- formuláře ---------- */
.pole { display: flex; flex-direction: column; gap: 6px; }
.pole label, .popisek { font-size: 13px; font-weight: 500; color: var(--tlum); }
.vstup, textarea.vstup { width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid var(--linka-silna); border-radius: 6px; background: var(--bg); font-size: 14px; }
.vstup:focus { outline: 0; border-color: var(--fokus); box-shadow: 0 0 0 1px var(--fokus); }
textarea.vstup { min-height: 88px; resize: vertical; line-height: 1.5; }
.vstup-titulek { width: 100%; border: 0; outline: 0; padding: 0; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; background: none; }
.vstup-titulek::placeholder { color: var(--tlum-2); }
.vstup-titulek:focus-visible { outline: 0; }
.chyba { font-size: 13px; color: var(--ne); display: flex; gap: 6px; align-items: center; }
.napoveda-pole { font-size: 12px; color: var(--tlum); }
.segment { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--linka-2); gap: 2px; }
.segment button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: none; font-size: 13px; font-weight: 500; color: var(--tlum); cursor: pointer; }
.segment button[aria-checked="true"] { background: var(--bg); color: var(--text); box-shadow: 0 0 0 1px rgba(15,15,15,.06), 0 1px 2px rgba(15,15,15,.08); }
/* Segment jako VLASTNÍ pole (celá šířka, volby rovnoměrně, např. Práva v dialogu uživatelů)
   — na rozdíl od výchozího `.segment` (úzký podle obsahu, v řádku vedle popisku). Zakázané:
   roztažený podklad s úzkými tlačítky a prázdnem vpravo (DESIGN.md, reklamace uživatele
   2026-09-26, T14). Přidává se DRUHÁ třída vedle `.segment`. */
.segment-pole { display: flex; width: 100%; }
.segment-pole button { flex: 1; text-align: center; }
.vybrane { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vybrany { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 3px 0 10px; border-radius: 999px; background: var(--linka-2); font-size: 13px; font-weight: 500; }
.vybrany .odeber { width: 20px; height: 20px; border: 0; border-radius: 999px; background: none; display: grid; place-items: center; color: var(--tlum); cursor: pointer; padding: 0; }
.vybrany .odeber:hover { background: var(--aktivni); color: var(--text); }
.vybrany .odeber .ikona { width: 12px; height: 12px; }
.vybrany.stitek { padding-left: 8px; border-radius: 4px; }
.dusledek { font-size: 13px; color: var(--tlum); display: flex; flex-direction: column; gap: 2px; }
.dropzona { border: 1px dashed var(--linka-silna); border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 14px; background: var(--bg); transition: background-color .12s ease, border-color .12s ease; }
.dropzona.nad { background: var(--plocha-2); border-color: var(--tlum-2); }
.dropzona .ikona.l { color: var(--tlum); }
.dropzona .text { flex: 1; font-size: 13px; color: var(--tlum); }
.dropzona .text b { display: block; font-size: 14px; color: var(--text); font-weight: 500; }
.soubory { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.soubor { position: relative; border: 1px solid var(--linka); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.soubor .obr { aspect-ratio: 4 / 3; background: var(--plocha-2); border-radius: 4px; display: grid; place-items: center; overflow: hidden; color: var(--tlum); }
.soubor .obr img { max-width: 100%; max-height: 100%; object-fit: contain; }
.soubor .jm { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soubor .btn { position: absolute; top: 12px; right: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--linka); }
.odkaz-radek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }

/* ---------- dialog ---------- */
dialog.dlg { border: 0; padding: 0; border-radius: 12px; box-shadow: var(--stin-pop); width: min(520px, calc(100vw - 32px)); color: var(--text); }
dialog.dlg::backdrop { background: rgba(15,15,15,.4); }
.dlg-hlava { display: flex; align-items: center; gap: 8px; padding: 16px 20px 0; }
.dlg-hlava h2 { flex: 1; font-size: 16px; }
.dlg-telo { padding: 12px 20px; display: flex; flex-direction: column; gap: 14px; }
.dlg-pata { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 20px 16px; }
.dlg-pata .proc-vypnuto { margin-right: auto; }
.upozorneni { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; background: var(--plocha-2); font-size: 13px; line-height: 1.5; }
.upozorneni .ikona { margin-top: 2px; color: var(--tlum); }
.upozorneni.varovne { background: var(--varovne-plocha); color: var(--varovne); }
.upozorneni.varovne .ikona { color: var(--varovne); }
.moznost { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linka-silna); border-radius: 8px; cursor: pointer; }
.moznost:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.moznost input { margin-top: 3px; accent-color: var(--akce); }
.moznost b { display: block; font-weight: 500; }
.moznost span { font-size: 13px; color: var(--tlum); }

/* ---------- toast ---------- */
/* Skrytý toast (jen opacity:0) zůstával v DOM klikatelný — ve frontě leží přes horní část
   karty (`.s-frontou .toast` níže), takže klik tam mohl neviditelně vzít zpět předchozí
   hlas i dlouho po zmizení (nález leada, kolo oprav 4, DŮLEŽITÉ). `visibility` má vlastní
   zpožděný přechod (schová se AŽ po doběhnutí fade-out), `pointer-events` přepíná hned. */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 8px; background: var(--akce); color: #fff; font-size: 14px; box-shadow: var(--stin-pop); transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .16s ease, opacity .16s ease, visibility 0s linear .16s; }
.toast.viditelny { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .16s ease, opacity .16s ease, visibility 0s linear 0s; }
.toast .btn { height: 28px; color: #fff; background: rgba(255,255,255,.12); font-size: 13px; }
.toast .btn:hover { background: rgba(255,255,255,.22); }
.s-frontou .toast { top: 64px; bottom: auto; }

/* ---------- prohlížeč příloh ---------- */
.prohlizec { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: 52px minmax(0, 1fr); background: var(--prohlizec); }
.pr-lista { display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--bg); border-bottom: 1px solid var(--linka); }
.pr-lista .jm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pr-lista .poradi { font-size: 13px; color: var(--tlum); font-variant-numeric: tabular-nums; margin-right: auto; padding-left: 6px; white-space: nowrap; }
.pr-lista .zoom-hodnota { min-width: 56px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.pr-lista .oddel { width: 1px; height: 20px; background: var(--linka); margin: 0 4px; }
.pr-plocha { position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.pr-plocha.tahne { cursor: grabbing; }
.pr-plocha img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; box-shadow: 0 1px 3px rgba(15,15,15,.12), 0 0 0 1px rgba(15,15,15,.06); background: #fff; }
.pr-sipka { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: var(--bg); box-shadow: 0 0 0 1px var(--linka); }
.pr-sipka.vlevo { left: 16px; }
.pr-sipka.vpravo { right: 16px; }
.pr-napoveda { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: 12px; color: var(--tlum); background: var(--bg); padding: 4px 10px; border-radius: 999px; box-shadow: 0 0 0 1px var(--linka); white-space: nowrap; pointer-events: none; transition: opacity .3s ease; }

/* ---------- fronta (proklikávací režim) ---------- */
.fr { min-height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.fr-lista { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--linka); }
.fr-lista .vpravo { justify-self: end; }
.fr-postup { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tlum); }
.fr-postup b { color: var(--text); font-variant-numeric: tabular-nums; }
.fr-body { display: flex; gap: 4px; }
.fr-body span { width: 22px; height: 4px; border-radius: 2px; background: var(--linka); }
.fr-body span.hotovo { background: var(--akce); }
.fr-body span.preskoceno { background: var(--tlum-2); }
.fr-body span.ted { background: var(--akce); opacity: .35; }
.fr-telo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 40px; width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 32px; transition: opacity .16s ease, transform .16s ease; }
.fr-telo.odchod { opacity: 0; transform: translateX(-12px); }
.fr-telo.prichod { opacity: 0; transform: translateX(12px); transition: none; }
.fr-cover { position: relative; display: grid; place-items: center; min-height: 380px; height: calc(100vh - 52px - 76px - 48px - 70px); border: 1px solid var(--linka); border-radius: 8px; background: var(--plocha-2); cursor: zoom-in; padding: 24px; width: 100%; }
.fr-cover { overflow: hidden; }
.fr-cover img { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 48px); max-height: calc(100% - 48px); object-fit: contain; border-radius: 6px; box-shadow: 0 0 0 1px rgba(15,15,15,.06), 0 2px 8px rgba(15,15,15,.06); }
.fr-cover .zoom { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--bg); font-size: 12px; color: var(--tlum); box-shadow: 0 0 0 1px var(--linka); }
.fr-dalsi { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.fr-dalsi button { width: 52px; height: 64px; padding: 0; border: 1px solid var(--linka); border-radius: 6px; background: var(--plocha-2); display: grid; place-items: center; overflow: hidden; cursor: zoom-in; }
.fr-dalsi button[aria-current="true"] { border-color: var(--text); }
.fr-dalsi img { max-width: 90%; max-height: 90%; }
.fr-dalsi .pdf { cursor: default; color: var(--tlum); }
.fr-info { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fr-info h1 { font-size: 26px; }
.fr-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--tlum); }
.fr-meta span { display: inline-flex; align-items: center; gap: 5px; }
.fr-akce { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--linka); }
.fr-akce-radek { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 18px 16px; flex-wrap: wrap; }
.fr-akce-radek .mezera { width: 16px; }
.fr-vstup { max-width: 720px; margin: 0 auto; padding: 16px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.fr-vstup .radek { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.fr-vstup .radek .proc-vypnuto { margin-right: auto; }
.fr-konec { display: grid; place-items: center; text-align: center; padding: 48px 16px; }
.fr-konec .obal { max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fr-konec .ikona.xl { color: var(--ok); }
.fr-konec .vysledky { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-size: 14px; color: var(--tlum); }
.fr-konec .vysledky span { display: inline-flex; align-items: center; gap: 5px; }
.fr-konec .vysledky b { color: var(--text); }
@media (max-width: 960px) { .fr-telo { grid-template-columns: 1fr; padding: 16px; } .fr-cover { height: 56vh; } }

/* ---------- rozcestník ---------- */
.rozcestnik { max-width: 720px; margin: 0 auto; padding: 64px 24px; }
.rozcestnik ul { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--linka); }
.rozcestnik li a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 8px; border-bottom: 1px solid var(--linka); text-decoration: none; }
.rozcestnik li a:hover { background: var(--plocha-2); }
.rozcestnik li b { font-weight: 600; display: block; }
.rozcestnik li span { font-size: 13px; color: var(--tlum); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- nástěnka (přehled týmu podle stavu) ---------- */
.filtry .segment { margin-left: 12px; }
.filtry .segment button { display: inline-flex; align-items: center; gap: 6px; }
.filtry .segment .ikona { width: 14px; height: 14px; }
.nastenka { display: grid; grid-template-columns: repeat(5, minmax(172px, 1fr)); gap: 8px; overflow-x: auto; padding: 8px 0 24px; align-items: start; }
.sloupec { background: var(--plocha-2); border-radius: 8px; padding: 8px; min-height: 120px; transition: box-shadow .12s ease, background .12s ease; }
.sloupec.cil { box-shadow: inset 0 0 0 1px var(--linka-silna); }
.sloupec.nad { box-shadow: inset 0 0 0 2px var(--fokus); background: var(--bg); }
.sloupec-hlava { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; font-size: 13px; }
.sloupec-karty { display: flex; flex-direction: column; gap: 8px; }
.sloupec-prazdny { margin: 0; padding: 12px 4px; font-size: 13px; color: var(--tlum); }
/* `flex-shrink: 0` — `.sloupec-karty` je sloupcový flex; bez týhle vlastnosti flexbox karty
   POMĚRNĚ ZMÁČKNE, aby se vešly do dostupné výšky (67 px místo přirozených ~253 px), místo
   aby přetekly a sloupec je nechal odrolovat (nález leada, kolo oprav 1, DŮLEŽITÉ). */
.karta { display: block; flex-shrink: 0; background: var(--bg); border-radius: 6px; box-shadow: 0 0 0 1px rgba(15,15,15,.06), 0 1px 2px rgba(15,15,15,.06); color: inherit; text-decoration: none; overflow: hidden; transition: box-shadow .12s ease; }
.karta:hover { box-shadow: 0 0 0 1px rgba(15,15,15,.1), 0 3px 8px rgba(15,15,15,.08); }
.karta.lze { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.karta.zvednuta { opacity: .3; }
.karta-tah { position: fixed; z-index: 90; pointer-events: none; cursor: grabbing; will-change: transform;
  box-shadow: 0 0 0 1px rgba(15,15,15,.08), 0 12px 28px rgba(15,15,15,.18), 0 4px 10px rgba(15,15,15,.10); }
.karta-tah.pristava { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; box-shadow: 0 0 0 1px rgba(15,15,15,.06), 0 1px 2px rgba(15,15,15,.06); }
body.tahne, body.tahne * { cursor: grabbing !important; }
.misto-dopadu { border-radius: 6px; border: 1.5px dashed var(--linka-silna); background: rgba(15,15,15,.03); animation: misto-vznik .16s ease-out; }
@keyframes misto-vznik { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: none; } }
.sloupec.zakazany { opacity: .45; }
.karta-cover { display: grid; place-items: start center; height: 112px; overflow: hidden; background: var(--plocha-2); border-bottom: 1px solid var(--linka-2); padding-top: 10px; }
.karta-cover img { width: 62%; border-radius: 4px; box-shadow: 0 0 0 1px rgba(15,15,15,.06); }
.karta-telo { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px; }
.karta-nazev { font-size: 14px; font-weight: 500; line-height: 1.35; }
.karta-pata { display: flex; align-items: center; gap: 4px 8px; justify-content: space-between; flex-wrap: wrap; font-size: 12px; }
.karta-termin { font-size: 12px; text-align: right; margin-left: auto; }
.karta-ceka { font-size: 12px; color: var(--text); font-weight: 500; }

/* ---------- řaditelné záhlaví tabulky ----------
   Celá buňka th je tlačítko. Šipka je skrytá, objeví se při hoveru/fokusu (šedá);
   u aktivně řazeného sloupce zůstává trvale v barvě textu a ukazuje směr. */
.tabulka th.lze-radit { padding: 0; }
.tabulka th .razeni { display: flex; align-items: center; gap: 4px; width: 100%; height: 34px; padding: 0 8px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.tabulka th .razeni:hover { background: var(--plocha-2); color: var(--text); }
.tabulka th .razeni .ikona { width: 13px; height: 13px; margin: 0; opacity: 0; color: var(--tlum); }
.tabulka th .razeni:hover .ikona, .tabulka th .razeni:focus-visible .ikona { opacity: 1; }
.tabulka th[aria-sort="ascending"] .razeni, .tabulka th[aria-sort="descending"] .razeni { color: var(--text); }
.tabulka th[aria-sort="ascending"] .razeni .ikona, .tabulka th[aria-sort="descending"] .razeni .ikona { opacity: 1; color: var(--text); }

/* ---------- zvoneček a notifikační centrum ---------- */
.zvonek { position: relative; }
/* pointer-events: none — klik na ikonu/odznak musí vždy dopadnout na samotné tlačítko, jinak
   přepsání odznaku uprostřed pointerdown→click gesta umí prohlížeči click zahodit (T05,
   kolo oprav 1, nález leada č. 9 — první klik po načtení stránky). */
.zvonek .ikona, .zvonek .odznak { pointer-events: none; }
.zvonek .odznak { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--akce); color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg); }
.notif-panel { position: absolute; z-index: 45; display: flex; flex-direction: column; max-height: min(600px, calc(100vh - 120px)); background: var(--bg); border-radius: 8px; box-shadow: var(--stin-pop); animation: notif-vznik .14s ease-out; }
@keyframes notif-vznik { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.notif-hlava { display: flex; align-items: center; gap: 8px; padding: 12px 12px 4px 16px; }
.notif-hlava h2 { flex: 1; font-size: 14px; }
.notif-klid { font-size: 13px; color: var(--tlum); padding: 0 4px; line-height: 28px; }
.notif-zalozky { display: flex; gap: 2px; padding: 4px 12px 8px; border-bottom: 1px solid var(--linka); flex-wrap: wrap; }
.notif-zalozky .pohled { height: 28px; padding: 0 8px; font-size: 13px; }
.notif-seznam { overflow: auto; min-height: 0; }
.notif-seznam ul { list-style: none; margin: 0; padding: 4px; }
.notif { display: grid; grid-template-columns: 28px minmax(0, 1fr) 8px; gap: 10px; align-items: start; padding: 10px 8px; border-radius: 6px; text-decoration: none; color: var(--text); }
.notif:hover { background: var(--hover); }
.notif.nova { background: var(--plocha-2); }
.notif.nova:hover { background: var(--hover); }
.notif-znak { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--plocha-2); box-shadow: 0 0 0 1px var(--linka); color: var(--tlum); }
.notif.nova .notif-znak { background: var(--bg); }
.notif-znak .ikona { width: 15px; height: 15px; }
.notif-znak.h-schvalil { color: var(--ok); }
.notif-znak.h-neschvalil { color: var(--ne); }
.notif-telo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-radek { display: flex; align-items: baseline; gap: 8px; }
.notif-veta { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--tlum); }
.notif-veta b { color: var(--text); font-weight: 600; }
.notif.nova .notif-veta { color: var(--text); }
.notif-cas { flex: none; font-size: 12px; color: var(--tlum); font-variant-numeric: tabular-nums; white-space: nowrap; }
.notif-polozka { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-uryvek { font-size: 13px; line-height: 1.5; color: var(--tlum); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-tecka { width: 8px; height: 8px; margin-top: 10px; border-radius: 999px; background: var(--akce); }
.notif-prazdno { padding: 32px 24px; text-align: center; }
.notif-prazdno h3 { margin-bottom: 4px; }
.notif-prazdno p { font-size: 13px; color: var(--tlum); }

/* ---------- zmínky @ ---------- */
.zminka { display: inline; padding: 0 4px; border-radius: 4px; background: var(--aktivni); color: var(--akce); font-weight: 600; white-space: nowrap; }
.zminky-pop { position: fixed; z-index: 70; width: 260px; padding: 6px; background: var(--bg); border-radius: 8px; box-shadow: var(--stin-pop); }
.zminky-pop .volba { cursor: pointer; }
.zminky-pop .volba[aria-selected="true"] { background: var(--hover); }

/* ---------- skok na událost v historii (z notifikace) ----------
   Cíl se odroluje doprostřed a krátce podbarví; odezní ~2 s. Bez pohybu: statické podbarvení 2 s. */
.tl-u { scroll-margin: 96px 0; border-radius: 8px; }
.tl-u:focus { outline: none; }
.tl-u.tl-cil { animation: tl-cil 2.2s ease-out; }
.tl-u.tl-cil-klid { background: var(--zvyrazneni); box-shadow: 0 0 0 6px var(--zvyrazneni); }
@keyframes tl-cil {
  0%, 55% { background: var(--zvyrazneni); box-shadow: 0 0 0 6px var(--zvyrazneni); }
  100% { background: rgba(251, 243, 220, 0); box-shadow: 0 0 0 6px rgba(251, 243, 220, 0); }
}

/* ---------- stránkování ---------- */
.strankovani { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0 4px; font-size: 13px; flex-wrap: wrap; }
.str-vlevo { display: flex; align-items: center; gap: 8px; color: var(--tlum); }
.str-vlevo select { height: 28px; padding: 0 6px; border: 1px solid var(--linka-silna); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.str-vlevo .tlum { margin-left: 8px; font-variant-numeric: tabular-nums; }
.str-vpravo { display: flex; align-items: center; gap: 2px; }
.str-vpravo .btn { min-width: 28px; justify-content: center; font-variant-numeric: tabular-nums; }
.str-vpravo .btn.aktivni { background: var(--aktivni); color: var(--text); }
.str-vpravo .btn:disabled { opacity: .35; cursor: default; }
.str-mezera { padding: 0 4px; }

/* ---------- přihlášení / změna hesla (bez postranního panelu) ---------- */
.auth-plocha { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--plocha-2); }
.auth-karta { width: 100%; max-width: 360px; background: var(--bg); border: 1px solid var(--linka); border-radius: 12px; padding: 32px; box-shadow: var(--stin-pop); }
.auth-karta h2 { margin-bottom: 4px; }
.auth-karta .uvod { font-size: 13px; color: var(--tlum); margin-bottom: 20px; }
.auth-karta form { display: flex; flex-direction: column; gap: 14px; }
.auth-pata { font-size: 12px; color: var(--tlum); margin-top: 20px; text-align: center; }
.heslo-obal { position: relative; }
.heslo-obal .vstup { padding-right: 38px; }
.heslo-obal .prepinac { position: absolute; right: 2px; top: 2px; }

/* ---------- pravidla hesla (checklist) ---------- */
.pravidla { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tlum); }
.pravidla li { display: flex; align-items: center; gap: 6px; }
.pravidla li .ikona { width: 14px; height: 14px; }
.pravidla li.hotovo { color: var(--ok); }
.duvod { font-size: 12px; color: var(--tlum); margin-top: 2px; }

/* ---------- správa uživatelů (tabulka, akce, stav účtu) ----------
   Tabulka účtů sdílí s Položkami `.tab-obal`/`.tab-posun`/`.strankovani` (přilepené záhlaví
   a sloupec Název, rolování uvnitř, stránkování dole — T14), `.tabulka-scroll` už nepoužito. */
.stav-uctu { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.stav-uctu .ikona { width: 14px; height: 14px; }
.stav-uctu.je-aktivni { color: var(--ok); }
.stav-uctu.je-vypnuty { color: var(--tlum); }
tr.neaktivni td { color: var(--tlum); }
.akce-radek { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.duvod-radku { font-size: 12px; color: var(--tlum); }
.nebezpecne { color: var(--ne) !important; border-color: var(--ne) !important; }
.heslo-blok { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 6px; background: var(--plocha-2); margin: 12px 0; }
.heslo-blok code { flex: 1; font: 600 15px/1.4 var(--mono); word-break: break-all; }
.potvrzeni { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--tlum); margin-bottom: 16px; }
.potvrzeni input { margin-top: 2px; }

/* ---------- chybová stránka (404) ---------- */
.err-plocha { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; text-align: center; }
.err-plocha .znacka { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; font-weight: 600; }
.err-plocha .znacka .ikona { width: 22px; height: 22px; color: var(--ok); }
.err-plocha p { color: var(--tlum); margin: 8px 0 20px; max-width: 44ch; }

/* ---------- viditelnost položek postranního panelu jen pro admina ---------- */
/* Položka je vždy v DOM (guard T5/R-0 — žádná dynamická HTML větev podle
   jeAdmin), viditelnost řídí `html[data-admin]` nastavené po načtení /api/me. */
html:not([data-admin="1"]) .sb-jen-admin { display: none; }

/* ---------- rozvržení pevné výšky — Položky a Správa uživatelů (T14) ----------
   Nad 1100 px se stránka jako celek neposouvá: hlavička/pohledy/filtry stojí nahoře, tabulka
   nebo nástěnka vyplní zbytek okna a roluje uvnitř sebe (`.tab-posun` obě osy s přilepeným
   záhlavím i sloupcem Název, `.sloupec-karty` svisle), stránkování je díky `flex:1` na
   scrollovací oblasti vždy u spodního okraje okna — i při jediném řádku. Pod 1100 px je
   sidebar beztak nesticky (viz layout výše) a okno bývá i nižší (mobil/tablet naležato) —
   necháno na běžném rolování stránky (DESIGN.md, rozhodnutí T14: komplikovat pevnou výšku
   pod 1100 px nemá cenu, sidebar se tam stejně chová jinak). */
@media (min-width: 1101px) {
  body.pevna-vyska { height: 100vh; overflow: hidden; }
  body.pevna-vyska .app { height: 100vh; }
  /* `padding-bottom` dává stránkování odstup od spodního okraje OKNA (dřív 0 zde + 4px vlastní
     odsazení `.strankovani` = jen 4px — nález leada, kolo oprav 1, DROBNÉ, cíl ≥16px). */
  body.pevna-vyska .obsah { height: 100vh; overflow: hidden; padding-bottom: 16px; display: flex; flex-direction: column; }
  body.pevna-vyska .stranka { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  body.pevna-vyska .stranka > .lista,
  body.pevna-vyska .stranka > #hlavicka,
  body.pevna-vyska .stranka > .pohledy,
  body.pevna-vyska .stranka > .filtry { flex: none; }
  body.pevna-vyska .tab-obal,
  body.pevna-vyska .nastenka,
  body.pevna-vyska .prazdne { flex: 1; min-height: 0; }
  body.pevna-vyska .tab-obal { display: flex; flex-direction: column; }
  body.pevna-vyska .tab-posun { flex: 1; min-height: 0; overflow: auto; }
  body.pevna-vyska .strankovani { flex: none; }
  body.pevna-vyska .prazdne { overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  /* `overflow: hidden` na obou osách ořízlo 5. stavový sloupec na šířkách ~1101–1230 px
     s rozbaleným panelem (nevejde se, ale nešlo se k němu horizontálně doscrollovat) — jen
     svislý přetok se má schovávat, vodorovný pořád roluje jako mimo pevnou výšku (nález
     leada, kolo oprav 1, KRITICKÉ). */
  body.pevna-vyska .nastenka { overflow-x: auto; overflow-y: hidden; grid-template-rows: minmax(0, 1fr); align-items: stretch; padding-bottom: 8px; }
  body.pevna-vyska .sloupec { display: flex; flex-direction: column; min-height: 0; }
  /* `padding-block` dá stínu karet (box-shadow) místo u horního/dolního okraje scrollované
     oblasti, ať `overflow-y: auto` neořízne stín první/poslední karty (nález leada, DŮLEŽITÉ). */
  body.pevna-vyska .sloupec-karty { flex: 1; min-height: 0; overflow-y: auto; padding-block: 2px; }
  /* `#prazdnyUcty` (Správa uživatelů) NEnahrazuje tabulku, jen vedle ní doplňkově vybízí
     založit další účet — nesmí si brát flex:1 (natáhlo by malý banner na půl okna). */
  body.pevna-vyska #prazdnyUcty { flex: none; overflow: visible; display: block; }
}