/* Vizualni styl podle interniho vzoru "advokatni kalkulacka": svetle sede
   pozadi, bile karty se zaoblenymi rohy, tmave petrolejova pro nadpisy a
   velka cisla, pastelove matove "stat" dlazdice, outline tlacitka, tabulka
   bez tezkych ramecku, drobne ikonove akce vpravo. */

:root {
  --bg: #f3f5f4;
  --card-bg: #ffffff;
  --border: #dde3e0;
  --heading: #1a3c4f;
  --text: #2b2f33;
  --text-muted: #6b7278;
  --accent-teal: #2f8f8c;
  --tile-bg: #e6f4ee;
  --tile-bg-warn: #fdf1e0;
  --red: #b03434;
  --red-bg: #fbe4e4;
  --green: #1a6b4c;
  --green-bg: #e3f3ec;
  --orange: #9a5b00;
  --orange-bg: #fbeedc;
  --gray-bg: #eef0f1;
  --gray-text: #6b7278;
  --radius: 10px;
  --radius-sm: 6px;
  /* Vyska, kterou na strance zaberou veci NAD tabulkou (topbar + hlavickova
     karta + toolbar). Tabulka si pak vezme zbytek okna a scrolluje uvnitr
     sebe (viz .tabulka-scroll nize) - hlavicka sloupcu zustava viditelna
     a nescrolluje se cela stranka. `max(...)` je pojistka pro nizke okno -
     bez ni by pri male vysce okna zbyl na tabulku jen prouzek. */
  --tabulka-max-vyska: max(340px, calc(100vh - 250px));
}

* { box-sizing: border-box; }

/* Kompaktni hustota celeho dashboardu: rem-based rozmery (paddingy karet,
   tabulek, tlacitek) se skaluji z tohohle jednoho mista. 15px misto
   vychozich 16px = vsechno o ~6 % tesnejsi bez zasahu do desitek pravidel.
   `body` si drzi vlastni 13px pro text, ktery zadnou explicitni velikost
   nema (napr. zalozky v topbaru), aby se nezvetsil. */
html { font-size: 15px; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

/* --- login --- */

.login-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.login-screen[hidden] { display: none; }

.login-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  width: 340px;
  box-shadow: 0 8px 24px rgba(20, 30, 35, 0.1);
}

.login-card h1 {
  font-size: 1.1rem;
  color: var(--heading);
  margin: 0 0 0.3rem;
}

.login-card label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0.7rem 0 0.25rem;
}

.login-card input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  font-size: 0.88rem;
  box-sizing: border-box;
}

.user-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  /* Odsune se k pravemu okraji topbaru bez ohledu na to, kolik mista
     zabere `.topbar-nav` vlevo - viz komentar u `.topbar` v app.css. */
  margin-left: auto;
}

.user-bar[hidden] { display: none; }

/* --- top bar --- */

/* Zadani uzivatele 2026-09-14: "vlevo bylo jen logo AHF a pak jednotlive
   zalozky (aby se jich veslo co nejvice na jednom radku)" - drive
   `justify-content: space-between` na trech flex polozkach (brand/nav/
   user-bar) rozprostrelo nav nekam doprostred radku misto hned za logo.
   Bez space-between zalozky nasleduji logo bezprostredne zleva a
   `.user-bar` (margin-left: auto nize) se samo odsune k pravemu okraji -
   zbyle misto uprostred tak pripadne zalozkam, ne prazdne mezere. */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 1.1rem;
}

.topbar-brand {
  font-weight: 700;
  color: var(--heading);
  font-size: 1.05rem;
  flex: 0 0 auto;
}

.topbar-nav { display: flex; flex-wrap: wrap; gap: 0.2rem; }

.topbar-tab {
  position: relative;
  text-decoration: none;
  color: var(--text-muted);
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  white-space: nowrap;
}

.topbar-tab.active {
  background: var(--tile-bg);
  color: var(--green);
}

/* --- page layout --- */

/* Bez max-width - siroke tabulky (hlavne "Rizeni", 18 datovych sloupcu)
   maji na sirokouhlem monitoru vyuzit celou sirku okna, jinak zbytecne
   padaji do vodorovneho scrollu uvnitr .tabulka-scroll. */
.page {
  margin: 0 auto;
  padding: 0.7rem 1rem 1.2rem;
}

/* Jen dashboard (index.html), ne verejne formulare pro dluzniky - ty maji
   vlastni `.ds-page` layout a maji zustat normalne scrollovatelnou strankou.
   Okno je rozdelene na pevny topbar + zbytek pro aktivni `.page`; ta je
   sloupcovy flex, aby si hlavni tabulka mohla vzit vsechnu zbylou vysku
   (viz .table-card--hlavni nize). overflow-y: hidden = stranka jako celek
   nescrolluje (scrolluje az tabulka uvnitr), overflow-x: auto = pojistka pro
   velmi uzke okno, aby zalozky v topbaru nezustaly nedosazitelne. */
body.app { height: 100vh; display: flex; flex-direction: column; overflow-y: hidden; overflow-x: auto; }
body.app > .topbar { flex: 0 0 auto; }
body.app > .page {
  flex: 1 1 auto;
  /* `width: 100%` je nutne, ne jen `min-width: 0`: siroka tabulka uvnitr
     by jinak pres automatickou minimalni velikost flex polozky roztahla
     celou zalozku (i hlavickovou kartu) na svou sirku, misto aby
     scrollovala vodorovne uvnitr .tabulka-scroll. */
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* `display: flex` vyse prebije UA pravidlo [hidden] { display: none } -
   bez tohohle radku by nav.js prestal umet neaktivni zalozky schovat. */
body.app > .page[hidden] { display: none; }

/* Stejny duvod jako radek vyse - `.table-card--hlavni` nize nastavuje
   `display: flex`, ktere by jinak precetlo pred UA vychozim `display: none`
   na atributu `[hidden]` (autorske pravidlo vyhrava nad UA stylem i pri
   stejne specificite). Zalozka "Odmeny" prepina pet takovych sekci
   (Prehled/Podle mesicu/Prihlasky podle mesicu/Zpenezeni podle mesicu/
   Hotove vydaje podle mesicu, viz static/js/odmeny.js) - bez tohohle by
   skryta sekce zustala vykreslena vedle te viditelne. */
#od-sekce-prehled[hidden],
#od-sekce-mesice[hidden],
#od-sekce-prihlasky[hidden],
#od-sekce-zpenezeni[hidden],
#od-sekce-hotove-vydaje[hidden] { display: none; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
}

.header-card h1 {
  margin: 0 0 0.15rem;
  font-size: 1.1rem;
  color: var(--heading);
  font-weight: 700;
}

.popis {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.popis code {
  background: var(--gray-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
}

/* Hlavickova karta, ktera vedle nadpisu/popisu nese jeste statistiky
   a/nebo akcni tlacitka (Rizeni, Vyplatni pasky) - drive to byly dve az tri
   samostatne karty pod sebou (.header-card + .stat-row + akce), coz na
   nejhustsich obrazovkach ubiralo ~90 px vysky urcene tabulce. */
.header-card--radek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
}

.header-card--radek .header-text { flex: 1 1 320px; min-width: 0; }
.header-card--radek .header-vpravo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.header-card--radek .stat-row { margin-bottom: 0; }

/* Prvek, ktery ma v hlavickove karte zabrat cely radek pod nadpisem
   (sbalitelny seznam kandidatu z ISIR na obrazovce "Rizeni"). */
.header-card--radek .header-cely-radek { flex: 0 0 100%; }
.header-card--radek .header-cely-radek .ns-sekce summary { font-size: 0.88rem; margin-bottom: 0; }
.header-card--radek .header-cely-radek .ns-sekce[open] summary { margin-bottom: 0.5rem; }

/* --- stat tiles --- */

/* Dlazdice se drzi obsahu (ne pulka sirky stranky jako driv) - v hlavickove
   karte sedi vpravo vedle nadpisu, ne pres celou sirku pod nim. */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.stat-tile {
  background: var(--tile-bg);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.85rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
}

.stat-tile--warn { background: var(--tile-bg-warn); }

.stat-label {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading);
}

.stat-tile--warn .stat-value { color: var(--orange); }

/* --- toolbar (months + filter) --- */

.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.toolbar-row + .toolbar-row { margin-top: 0.45rem; }

.mesice-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.pripady-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.filtr-row { gap: 0.5rem; }

/* --- buttons --- */

.btn-outline {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.35rem 0.8rem;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-outline:hover { background: #f6f7f8; }

.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.78rem; }

.btn-primary {
  background: var(--heading);
  border: 1px solid var(--heading);
  border-radius: var(--radius-sm);
  color: white;
  padding: 0.4rem 0.9rem;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary:hover { opacity: 0.9; }

.btn-danger {
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  color: var(--red);
  padding: 0.4rem 0.9rem;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-outline:disabled,
.btn-primary:disabled,
.btn-danger:disabled,
.icon-btn:disabled { opacity: 0.6; cursor: default; pointer-events: none; }

/* Tocici se kolecko na tlacitku behem async akce (viz common.js
   nastavNacitaniTlacitka/sNactenimTlacitka) - barva se bere z currentColor,
   funguje tak beze zmeny na svetlem (.btn-outline) i tmavem (.btn-primary)
   pozadi. */
.btn-spinner {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.btn-danger:hover { background: #f8d5d5; }

.pill-tab {
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.pill-tab.active {
  background: var(--heading);
  border-color: var(--heading);
  color: white;
}

.chip {
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-size: 0.79rem;
  cursor: pointer;
  color: var(--text-muted);
}

.chip.active {
  border-color: var(--heading);
  color: var(--heading);
  font-weight: 600;
  background: #eef3f2;
}

/* --- table --- */

.table-card { padding: 0; overflow: hidden; flex-shrink: 0; }

/* `flex-shrink: 0` vyse (zadani uzivatele 2026-09-05, zjisteno na zalozce
   "Dotaznik pro dluznika" po pridani karty "Nevygenerovane dotazniky"):
   `.page` je sloupcovy flex (viz body.app > .page vyse) a KAZDA jeho
   primo-podrizena `.card` sekce je tak flex polozka. Bez explicitniho
   `min-height` ma flex polozka "automaticky minimum" rovne velikosti
   sveho obsahu (min-content) - ALE jen pokud ma `overflow: visible`
   (proto obycejne `.card`/`.header-card` sekce nikdy nemizi). Tahle
   trida ale nastavuje `overflow: hidden` (kvuli zaobleneym rohum tabulky),
   cimz se dle specifikace flexboxu automaticke minimum zmeni na 0 - kdyz
   pak souhrn vsech karet na strance jen kousek presahne vysku okna, flex
   layout radeji NEPATRNE zmensi kazdou takovou kartu (misto aby stranka
   dostala vlastni scrollbar, ktery uz `.page` ma pripraveny), a protoze
   minimum je 0, muze ji zmenshit klidne na pár pixelu - tabulka pak
   vizualne "zmizi", i kdyz je v DOM porad cela pritomna (zjisteno presne
   takhle na `dz-zadosti-tabulka` i nove pridane `dz-nevygenerovane-tabulka`
   soucasne, jakmile pribyla dalsi karta nad nimi). `flex-shrink: 0` tomu
   zabranuje - karta si drzi svou prirozenou vysku a pripadny prebytek
   resi `.page`'s vlastni `overflow-y: auto` (viz vyse), presne jako u
   `.card`/`.header-card` sekci. `.table-card--hlavni` nize si vlastnim
   `flex: 1 1 auto` (chce se naopak roztahnout na zbytek okna) sub-vlastnost
   `flex-shrink` sama prepise zpet na 1 (stejna specificita, ale definovana
   pozdeji v souboru => v kaskade vyhrava) - svuj vlastni `min-height: 240px`
   uz ma, takze tenhle plosny fix pro ni neni potreba ani skodlivy. */

/* Hlavni tabulka obrazovky se roztahne na CELY zbytek okna pod toolbarem
   (viz `body.app` vyse) misto pevneho odhadu vysky - na vyssim monitoru se
   tak automaticky zobrazi vic radku a stranka jako celek uz nescrolluje,
   scrolluje se jen tabulka pod svou sticky hlavickou. */
.table-card--hlavni {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  /* Bez tohohle by vychozi `min-width: auto` flex polozky nechalo sirokou
     tabulku roztahnout celou stranku (vcetne hlavickove karty) na svou
     sirku misto toho, aby scrollovala uvnitr .tabulka-scroll. */
  min-width: 0;
}

.table-card--hlavni .tabulka-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-height: none;
}

/* Zabalit kazdou tabulku dashboardu (index.html) do .tabulka-scroll - sirsi
   tabulky (napr. "Rizeni" s 11+ sloupci) nebo uzsi tabulky s dlouhym obsahem
   posledniho sloupce (napr. akcni tlacitka v dz-zadosti-tabulka) se pak
   nerozbiji na urovni cele stranky, scroll je uvnitr karty, ne na <body>. */
/* Svisly scroll je ZAMERNE uvnitr tabulky, ne na cele strance: hlavicka
   sloupcu pak muze byt sticky vuci tomuhle kontejneru a zustava viditelna
   i po 50. radku (tolik jich Rizeni strankuje). Vyska je vazana na okno
   pres --tabulka-max-vyska, takze na vyssim monitoru se rovnou zobrazi
   vic radku. Je to `max-height`, takze kratke tabulky se neroztahuji. */
.tabulka-scroll {
  overflow: auto;
  max-height: var(--tabulka-max-vyska);
}

table { width: 100%; border-collapse: collapse; }

thead th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  /* Hlavicka se ZAMERNE zalamuje (driv nowrap): dlouhy popisek jako
     "Datum rozh. o úpadku" jinak roztahne sloupec na 160 px kvuli
     desetiznakovemu datu. Dva radky v hlavicce se zaplati jednou, usetrena
     sirka se pocita u kazdeho radku. */
  white-space: normal;
  vertical-align: bottom;
  /* Pozadi je nutne - pruhledna sticky hlavicka by pri scrollu prekryvala
     radky pod sebou. `border-collapse: collapse` navic sticky bunce sebere
     spodni ramecek, proto je nahrazeny box-shadow. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card-bg);
  box-shadow: inset 0 -1px 0 var(--border);
}

.th-akce { width: 60px; }

/* klikatelne hlavicky sloupcu (Rizeni, viz rizeni.js pripravRazeniHlavicky) */
.th-raditelny { cursor: pointer; user-select: none; }
.th-raditelny:hover { color: var(--heading); }
.razeni-sipka { color: var(--accent-teal); }

tbody td {
  padding: 0.28rem 0.6rem;
  border-bottom: 1px solid #eef0f1;
  vertical-align: middle;
  font-size: 0.82rem;
}

tbody tr:last-child td { border-bottom: none; }

/* Zebra + zvyrazneni radku pod mysi. Zamerne na <tr>, ne na <td>: bunky maji
   pruhledne pozadi, takze pruh prosviti, ale pravidla, ktera si pozadi bunky
   nastavuji sama (napr. .zi-detail-radek td), zustanou nedotcena. Levy
   barevny akcent radku (tr[data-barva] nize) je inset box-shadow, kresli se
   nad pozadim, takze ho zebra neprebarvi. */
tbody tr:nth-child(even) { background: #f7f9f9; }
tbody tr:hover { background: var(--tile-bg); }

.col-soubor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; }

.col-poznamka { color: var(--text-muted); font-size: 0.8rem; max-width: 320px; }
.col-poznamka.puvod-rucne { font-style: italic; }

/* Jmeno dluznika ve sloupci "Dlužník" (Rizeni, viz rizeni.js) - klikatelne,
   otevira dialog "Upravit dlužníka" (openDluznikPopover). Vypada jako
   odkaz, ne jako tlacitko - je jich v jedne bunce az dvakrat (manzele). */
.odkaz-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent-teal);
  cursor: pointer;
  text-align: left;
}
.odkaz-btn:hover { text-decoration: underline; }

/* Tabulka "Rizeni" ma 18 datovych sloupcu a jeji bunky se ZAMERNE
   nezalamuji: nejdelsi hodnota ("Oddlužení - splátkami a prodejem majetku")
   se ve uzkem sloupci lamala do ctyr radku a hnala vysku KAZDEHO radku na
   ~73 px. S nowrap ma radek jednotnych ~30 px, tj. vic nez dvojnasobek
   viditelnych rizeni na jedno zobrazeni. Tabulka je tim sirsi - proto je
   `.page` bez max-width a proto ma obrazovka prepinac "Sloupce". Nic se
   neoreznava, dlouhe hodnoty zustavaji cele citelne. */
#rz-tabulka tbody td { white-space: nowrap; }
/* Jmena dvou dluzniku (spolecne oddluzeni manzelu) jsou v jedne bunce
   spojena " a " - jedina bunka, kde zalomeni dava smysl. */
#rz-tabulka tbody td[data-col="dluznik"] { white-space: normal; min-width: 150px; }

/* ISIR sloupec je jen ikonovy odkaz (viz rizeni.js) - drzi sloupec uzky,
   aby na sirokou tabulku "Rizeni" zbylo misto pro ostatni sloupce. */
.col-isir { width: 44px; text-align: center; }

/* Prokliky na souvisejici nastroje (vyplatnice/dotaznik/pravidelna vyzva)
   na konci tabulky "Rizeni" (viz rizeni.js) - stejny princip jako
   .col-isir, kazdy sloupec jen jedna ikona. Vodorovne odsazeni je
   minimalni vcetne navazujiciho akcniho sloupce: ctvericeP/D/V + upravit
   ma pusobit jako jedna skupina ikon, ne jako ctyri siroke sloupce. */
.col-nastroj { width: 28px; text-align: center; padding-left: 0.1rem; padding-right: 0.1rem; }
#rz-tabulka .th-akce,
#rz-tabulka .akce-cell { width: 30px; padding-left: 0.1rem; padding-right: 0.35rem; }

/* Zkraceny "Zpusob reseni" (viz rizeni/tabulka.js ZKRATKY_ZPUSOBU) - `title`
   je jen na bunkach, kde se opravdu zkracovalo, kurzor to tak signalizuje
   presne tam, kde se najetim mysi neco dozvim. */
#rz-tabulka td[data-col="zpusob"][title] { cursor: help; }

/* Radek "pridat novy zaznam" v katalozich (Nastaveni) drzi u spodni hrany
   scrollovaci oblasti - stejny duvod jako sticky hlavicka vyse. */
tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--card-bg);
  box-shadow: inset 0 1px 0 var(--border);
}

.prazdno { text-align: center; color: var(--text-muted); padding: 2rem !important; }

/* status pill */

.pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.pill--zelena { background: var(--green-bg); color: var(--green); }
.pill--oranzova { background: var(--orange-bg); color: var(--orange); }
.pill--cervena { background: var(--red-bg); color: var(--red); }
.pill--seda { background: var(--gray-bg); color: var(--gray-text); }

/* row left accent border, matches pill color */
tr[data-barva="zelena"] td:first-child { box-shadow: inset 3px 0 0 var(--green); }
tr[data-barva="oranzova"] td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
tr[data-barva="cervena"] td:first-child { box-shadow: inset 3px 0 0 var(--red); }
tr[data-barva="seda"] td:first-child { box-shadow: inset 3px 0 0 #b6bcc0; }

/* row icon actions */

/* Akcni sloupec na konci radku. ZAMERNE to NENI flex kontejner: `display:
   flex` na <td> mu sebere chovani table-cell - prestane pro nej platit
   `vertical-align: middle` z `tbody td` vyse a bunka se neroztahne na
   vysku radku, takze u viceradkoveho radku (napr. dlouhy "Zpusob reseni"
   v tabulce Rizeni) ikona sedela o 15 px vys nez ikony v sousednich
   sloupcich .col-nastroj. Tlacitka uvnitr jsou inline-flex (.icon-btn),
   takze na jejich zarovnani vedle sebe staci obycejny inline tok - stejna
   struktura jako .col-nastroj bunky, tim padem i stejne svisle usazeni. */
.akce-cell { text-align: right; white-space: nowrap; }
.akce-cell > * + * { margin-left: 0.3rem; }

.icon-btn {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}

.icon-btn--edit:hover { border-color: var(--accent-teal); color: var(--accent-teal); background: #eef7f6; }
/* "Hotovo" (Ukolovnik) - jedina ikonova akce, ktera je barevna uz bez
   najeti: zeleny tick je v radku ukolu ta nejcastejsi akce a ma jit najit
   okem, ne az podle popisku. */
.icon-btn--hotovo { color: var(--green); }
.icon-btn--hotovo:hover { border-color: var(--green); background: var(--green-bg); }
.icon-btn--del:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.icon-btn--open { text-decoration: none; }
/* Varianta s pismenem misto SVG (sloupce Pasky/Dotaznik/Vyzva v tabulce
   "Rizeni", viz rizeni/tabulka.js) - stejny ctverecek jako ikonove akce,
   jen s vyraznejsim pismenem uvnitr. */
.icon-btn--pismeno { font-size: 0.78rem; font-weight: 700; letter-spacing: 0; }
.icon-btn--open:hover { border-color: var(--heading); color: var(--heading); background: #eef3f2; }
.icon-btn--mail:hover { border-color: var(--heading); color: var(--heading); background: #eef3f2; }

/* --- zvonecek s upozornenimi (Zpenezovani, viz zpenezovani.js) --- */

#zvonek-btn { position: relative; }

.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.badge[hidden] { display: none; }

/* Skupina vice odznaku "vedle sebe" v jednom rohu (viz Vyplatni pasky,
   3 barevna kolecka na zalozce) - jednotlive .badge uvnitr NEjsou
   samostatne position:absolute (jinak by se prekryvaly ve stejnem rohu),
   misto toho je absolutne umistena az cela skupina a badge se v ni radi
   vedle sebe pres flex. */
.badge-skupina {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  gap: 3px;
}

.badge-skupina .badge { position: static; top: auto; right: auto; }

.badge--zelena { background: var(--green); }
.badge--oranzova { background: var(--orange); }
.badge--cervena { background: var(--red); }

#zvonek-panel { width: 380px; }

#zvonek-seznam { max-height: 360px; overflow-y: auto; margin-top: 0.4rem; }

.zvonek-prazdno { color: var(--text-muted); font-size: 0.85rem; padding: 0.4rem 0; }

.zvonek-polozka {
  padding: 0.55rem 0;
  border-bottom: 1px solid #f1f2f3;
}

.zvonek-polozka:last-child { border-bottom: none; }

.zvonek-polozka .rizeni { font-weight: 600; color: var(--heading); font-size: 0.85rem; }
.zvonek-polozka .predmet { font-size: 0.83rem; margin-top: 0.1rem; }
.zvonek-polozka .meta { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.1rem; }
.zvonek-polozka .popover-actions { margin-top: 0.35rem; }

/* --- zalozka "Zpenezovani" - odkazy inzeratu (static/js/zpenezovani-inzeraty.js) --- */

.zi-detail-radek td { background: var(--bg-subtle, #fafafa); padding: 0.7rem 1rem !important; }

.zi-odkaz-radek {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.35rem 0;
  border-bottom: 1px solid #f1f2f3;
  font-size: 0.85rem;
}

.zi-odkaz-radek:last-of-type { border-bottom: none; }

.zi-odkaz-radek a { word-break: break-all; }

.zi-pdf-ok { color: var(--green); font-size: 0.8rem; white-space: nowrap; }
.zi-pdf-chyba { color: var(--red); font-size: 0.8rem; }
.zi-pdf-pending { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }

/* --- popover (inline row action, floats - never expands the table) --- */

.popover {
  position: fixed;
  z-index: 50;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(20, 30, 35, 0.14);
  padding: 1.1rem 1.2rem;
  width: 360px;
  /* Delsi formulare (napr. "Upravit dluznika", viz rizeni.js
     openDluznikPopover) se do vysky obrazovky nevejdou - radeji vlastni
     scroll uvnitr popoveru nez preteceni mimo viewport. Scroll uvnitr
     popoveru uz ho nezaviraji (viz odstraneny "scroll" listener nize v
     rizeni.js/vyplatnice.js). */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

.popover[hidden] { display: none; }

/* Sirsi varianta pro obsahlejsi formulare (napr. "Upravit dluznika", viz
   rizeni.js openDluznikPopover) - pridava/odebira se pres classList, .popover
   samotna zustava kompaktni pro kratsi dialogy (editace rizeni, sloupce). */
.popover--sirsi { width: 560px; }

/* Jeste sirsi/landscape varianta pro zakladaci dialog "Zalozit rizeni z
   ISIR"/"Zalozit novy pripad" (rizeni/isir.js) - od 2026-09-08 nabizi
   jedním krokem vsechna pole, ktera driv byla az v "Upravit rizeni"
   (zadani uzivatele), takze uz nejde vejit do jednoho svisleho sloupce
   jako .popover--sirsi. Sirka roste az k 1180px, na uzsi obrazovce (viz
   media query u .popover-sloupce nize) spadne zpatky na sirku viewportu
   s 12px okrajem - stejne klamovani uvnitr viewportu uz zajistuje
   umistiPopover() v jadro.js, tady se jen meri skutecna sirka. */
.popover--zalozeni { width: min(1180px, calc(100vw - 24px)); }

/* Vicesloupcovy layout uvnitr .popover--zalozeni - kazdy primy potomek
   (obvykle <div> se skupinou popisek+pole) je jeden sloupec. Bez tohohle
   by dlouhy seznam poli zbytecne roztahoval dialog na vysku misto na
   sirku, presne to, co si uzivatel vyzadal ("nemusi byt svisly jen na
   casti stranky"). --2 je pro dva sloupce (napr. Manzel/Manzelka vedle
   sebe), vychozi trida tri (Osoby / Platba / Terminy a zalohy). */
.popover-sloupce {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1.4rem;
  align-items: start;
}
.popover-sloupce--2 { grid-template-columns: repeat(2, 1fr); }
.popover-sloupce > div { min-width: 0; }
@media (max-width: 900px) {
  .popover-sloupce, .popover-sloupce--2 { grid-template-columns: 1fr; }
}

/* Dvousloupcovy radek uvnitr popoveru (napr. cislo popisne + cislo
   orientacni vedle sebe) - stejny princip jako .ds-grid2 ve verejnych
   formularich (dotaznik.html), samostatna trida tady, protoze .popover
   input ma jina pravidla nez .ds-pole input. */
.popover-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.6rem;
}
.popover-grid2 > div > label { margin-top: 0.55rem; }

/* Ramecek kolem jednoho dluznika v zakladacim dialogu (rizeni/isir.js) -
   u spolecneho oddluzeni manzelu jsou pod sebou dva skoro shodne bloky
   (prijmeni/jmeno/datum/adresa) a bez vizualniho oddeleni by nebylo
   poznat, kde jeden konci a druhy zacina. */
.popover-fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1rem 0.6rem 0.6rem;
  margin: 0 0 0.7rem;
  min-width: 0;   /* jinak fieldset ignoruje sirku rodice a roztahne popover */
}
.popover-fieldset > legend {
  padding: 0 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Zaskrtavatko s popiskem na jednom radku (napr. "Spolecne oddluzeni
   manzelu") - .popover label je jinak blokovy popisek nad polem. */
.popover-checkbox {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.55rem 0 0.6rem;
  cursor: pointer;
}
.popover-checkbox input { width: auto; margin: 0; }

.popover h3 {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  color: var(--heading);
}

/* Podnadpis oddelujici sekce uvnitr delsich formularu (napr. "Upravit
   dluznika" - Zamestnavatele/Jini platci, "Upravit rizeni" - Darci, viz
   rizeni.js) - nizsi vyznamova uroven nez .popover h3 (nadpis cele
   sekce), proto viditelne oddeleny horni carou. */
.popover-podnadpis {
  margin: 1.1rem 0 0.6rem !important;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem !important;
}

/* Jeden opakovatelny "vedlejsi" zaznam (zamestnavatel/jiny platce/darce,
   viz rizeni.js zamestnavatelFormHtml/jinyPlatceFormHtml/darceFormHtml) -
   ohraniceny box, at je v delsim seznamu vizualne jasne, kde jeden zaznam
   konci a dalsi zacina. */
.pod-radek {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem 0.2rem;
  margin-bottom: 0.7rem;
  background: #fafbfb;
}
.pod-radek .popover-actions { margin-top: 0.7rem; }

/* `.rz-detail-obsah` (obsah zalozky detailu rizeni, viz rizeni/detail.js)
   sdili tenhle formularovy vzhled s `.popover` - oba vykresluji stejne
   HTML fragmenty (adresaPoleHtml, openEditacePopover/openDluznikPopover
   presunute do trvaleho panelu), jen `.popover` je navic plovouci dialog
   (position:fixed/box-shadow/pevna sirka, viz nize) a `.rz-detail-obsah`
   normalni obsah karty na sirku sveho kontejneru. */
.popover label, .rz-detail-obsah label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  margin: 0.55rem 0 0.25rem;
}

.popover input[type=text], .popover input[type=email], .popover input[type=tel],
/* `number` je tu od 2026-08-29 (rozvrh zprav o plneni oddluzeni v dialogu
   "Upravit rizeni") - bez nej mel prohlizec vlastni, o dost uzsi vychozi
   sirku a pole se rozesla s okolim. */
.popover input[type=date], .popover input[type=number], .popover select, .popover textarea,
.rz-detail-obsah input[type=text], .rz-detail-obsah input[type=email], .rz-detail-obsah input[type=tel],
.rz-detail-obsah input[type=date], .rz-detail-obsah input[type=number], .rz-detail-obsah input[type=time],
.rz-detail-obsah input[type=month], .rz-detail-obsah select, .rz-detail-obsah textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--card-bg);
}

.popover textarea, .rz-detail-obsah textarea { resize: vertical; min-height: 3.2rem; }

.popover-navrhy {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 150px;
  overflow-y: auto;
  margin-top: 0.25rem;
}

.popover-navrhy div {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.83rem;
  border-bottom: 1px solid #f1f2f3;
}

.popover-navrhy div:last-child { border-bottom: none; }
.popover-navrhy div:hover { background: #f3f6f5; }

.popover-navrhy .znacka { color: var(--text-muted); font-size: 0.8em; display: block; }

/* checklist "viditelne sloupce" (Rizeni, viz rizeni.js) - vlastni radek
   misto .popover label (display:block, viz vyse), proto vyssi specificita
   (.popover .trida) a ne jen samotna trida. */
.popover-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 260px;
  overflow-y: auto;
  margin: 0.3rem 0 0.2rem;
}

.popover .popover-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

.popover-checklist-item input { margin: 0; }

.popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

/* Hlavni akcni radek dialogu (Zalozit/Ulozit + Zrusit) PRIPNUTY ke spodku
   scrollovatelneho .popover, ne jen .popover-actions obecne - vnorene
   pouziti tridy uvnitr radku podformulare (napr. .pod-radek u
   zamestnavatelu/darcu) nebo v .zvonek-polozka (bell notifikace, samostatny
   panel mimo #popover) maji zustat na svem miste v obsahu, proto primy
   potomek `.popover >`. NAVIC `:last-child` - u "Upravit rizeni"/"Upravit
   dluznika" je hlavni akcni radek uprostred formulare (nasleduje sekce
   Zamestnavatele/Jini platci/Darci), takze pripnuti ke spodku by ho
   nechalo trvale prekryvat obsah pod nim pri scrollovani; tam se necha
   v normalnim toku. U kratsich dialogu, kde je akcni radek OPRAVDU
   posledni (Zalozit z ISIR, Novy pripad, Viditelne sloupce, ...), by
   jinak bylo tlacitko "Zalozit"/"Ulozit" videt az po scrollu na uplny
   konec - na dotykovem zarizeni s malou obrazovkou (napr. iPad, viz oprava
   max-height v jadro.js:umistiPopover) snadno nedopatrenim zustane mimo
   dohled. Zapornymi okraji "prebleduje" az k okraji .popover (ktery ma
   padding 1.1rem 1.2rem), aby pozadi zakrylo obsah pod sebou pri
   scrollovani. */
.popover > .popover-actions:last-child {
  position: sticky;
  bottom: -1.1rem;
  margin: 0.9rem -1.2rem -1.1rem;
  padding: 0.7rem 1.2rem 1.1rem;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
}

.popover-chyba {
  background: var(--red-bg);
  color: var(--red);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  font-size: 0.8rem;
  margin-top: 0.6rem;
}

.popover-hint { color: var(--text-muted); font-size: 0.78rem; margin: 0 0 0.6rem; }

/* read-only zobrazeni textu e-mailu (openEmailPopover, vyplatnice.js) -
   stejne odsazeni jako label+input dvojice v .popover, ale bez ramecku
   vstupu (jde jen o zobrazeni, ne o formularove pole). */
.popover-email-pole { margin: 0.15rem 0 0.5rem; font-size: 0.85rem; word-break: break-word; }
.popover-email-nahled {
  margin: 0.15rem 0 0.5rem;
  font-size: 0.8rem;
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.5rem 0.65rem;
  background: #f8f9f9;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* radek "spisova znacka + tlacitko Aktualizovat z ISIR" (openEditacePopover,
   rizeni.js) - popover-hint uvnitr ztraci svuj vychozi margin-bottom, ten
   drzi tenhle radek jako celek. */
.popover-radek-tlacitko { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.popover-radek-tlacitko .popover-hint { margin-bottom: 0; }

/* vysledek "Aktualizovat z ISIR" (isirNavrhHtml, rizeni.js) - varovani o
   polich, ktera uz maji jinou hodnotu, nez navrhuje ISIR. */
.popover-isir-navrh { margin: 0 0 0.6rem; padding-left: 1.1rem; font-size: 0.78rem; color: var(--text-muted); }
.popover-isir-navrh li { margin-bottom: 0.25rem; }

/* radek "ISIR uvadi <hodnota> - Prevzit" pod JEDNIM polem dialogu
   "Upravit rizeni" (nabidniIsirPrevzeti, rizeni/upravit-rizeni.js) - vznika
   jen u poli, kde se ulozena hodnota lisi od ISIR (hromadne "Aktualizovat
   z ISIR" je zamerne neprepisuje). Sedi tesne pod svym vstupem, proto
   zaporny horni margin - jinak by od nej odskocil o mezeru mezi poli. */
.popover-isir-prevzit { margin: -0.35rem 0 0.6rem; }

/* odkaz-tlacitko uprostred textu varovani (napr. "pouzijte" u navrhu
   spisove znacky z ISIR, isirNavrhHtml v rizeni.js) - vypada jako odkaz,
   ne jako tlacitko, at nerozbiji plynuly text vety. */
.btn-link { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--accent-teal); text-decoration: underline; cursor: pointer; }

/* --- detail rizeni (barevne odlisene zalozky pod hlavni tabulkou, viz
   rizeni/detail.js) --------------------------------------------------- */

/* Karta se otevira PO kliknuti na "upravit"/jmeno dluznika (viz
   tabulka.js) - `.card` samotna nema flex-grow, takze `.page` (sloupcovy
   flex, viz vyse) pod ni jen prida vysku a stranka jako celek zacne
   scrollovat (`overflow-y: auto` na `.page`); hlavni tabulka nad ni si
   drzi svoje `min-height: 240px` a zbytek prostoru radeji prenecha
   detailu. Zadny vlastni scroll uvnitr karty (na rozdil od `.popover`) -
   je to trvala soucast stranky, ne plovouci dialog. */
/* `flex-shrink: 0` je nutny ze stejneho duvodu jako u `.table-card`
   (viz komentar tam): `.page` je sloupcovy flex a `overflow: hidden`
   (kvuli zaoblenym rohum radku zalozek) by bez nej zmenilo automaticke
   minimum polozky na 0 - misto aby `.page` cely dostal svuj vlastni
   scroll (`overflow-y: auto`, viz vyse), flexbox by radeji tuhle kartu
   (a hlavni tabulku nad ni) tise smacknul na par pixelu. */
/* Obal kolem hlavicky/toolbaru/tabulky (viz index.html) - musi byt sam
   "pruhledny" flex sloupec (stejne vlastnosti jako `.page`, jehoz je
   primym potomkem), jinak by `.table-card--hlavni`'s `flex: 1 1 auto`
   (roztahnout na zbytek okna) prestalo fungovat - fungovalo by jen vuci
   tomuhle obalu, ne vuci cele strance. Skryva se cely najednou, kdyz je
   otevreny detail rizeni (viz detail.js). */
#rz-seznam-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#rz-seznam-wrap[hidden] { display: none; }

.rz-detail-card { padding: 0; overflow: hidden; flex-shrink: 0; }

.rz-detail-hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
}
.rz-detail-hlavicka h2 { margin: 0; font-size: 1rem; color: var(--heading); }
.rz-detail-hlavicka .popis { margin-top: 0.1rem; }

/* Barevne odliseny radek zalozek (zadani uzivatele - "barevně odlišený
   řádek se záložkami"), aby bylo na prvni pohled jasne, ze jde o DRUHOU,
   kontextovou uroven navigace (zalozky rizeni), ne o hlavni `.topbar-tab`
   nahore. Vlastni sytejsi pozadi misto prebarveneho `.topbar-tab`. */
.rz-detail-taby {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
  background: var(--tile-bg);
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--border);
}

.rz-detail-tab {
  border: none;
  background: none;
  color: var(--green);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.rz-detail-tab:hover { background: rgba(255, 255, 255, 0.5); }
.rz-detail-tab.active { background: var(--heading); color: white; }

.rz-detail-obsah { padding: 0.9rem 1rem; }

/* Zalozky "Zadani"/"Dluznik" prevzaly formulare puvodne stavene pro uzky
   `.popover--sirsi` (560px) - beze zmeny sirky by se pole roztahla na
   celou (mnohem sirsi) kartu a byla by hur citelna. "Platci prijmu" tohle
   nema (chce sirku pro casovou osu). */
.rz-detail-uzky { max-width: 640px; }

/* Odkaz "Otevřít X v plné aplikaci" nad vlozenym seznamem (zalozky
   Vyplatnice/Dotaznik/Pravidelne vyzvy, viz nastroje-vlozene.js) - pro
   editacni workflow, ktere davaji smysl jen mimo kontext jedne kauzy
   (napr. "Opravit zařazení" u výplatnic hledá SPRÁVNOU kauzu, generování
   nových odkazů u dotazníku/výzvy, hromadné odeslání). */
.rz-vlozeny-odkaz { margin-bottom: 0.8rem; }
.rz-vlozeny-odkaz a { font-size: 0.85rem; color: var(--accent-teal); }

/* --- casova osa plateu prijmu (panel "Platci prijmu", nova vizualizace -
   viz detail.js) - cistě CSS/HTML, zadna grafova knihovna. Kazdy radek je
   jeden zamestnavatel/jiny platce/darce, pruh(y) uvnitr odpovidaji jeho
   obdobim (od/do_kdy). Rozsah osy (min/max mesic) pocita JS a promita se
   do `--rz-osa-od`/`--rz-osa-pocet` na `.rz-platci-osa` (viz tam) - pruhy
   pak jen `left/width` v % z tehle spolecne meritky. */
.rz-platci-osa {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.9rem;
  overflow-x: auto;
}

.rz-platci-radek {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid #f1f2f3;
}
.rz-platci-radek:last-child { border-bottom: none; }

.rz-platci-popisek {
  flex: 0 0 180px;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rz-platci-popisek .znacka { color: var(--text-muted); display: block; font-size: 0.78em; }

.rz-platci-pruhy {
  position: relative;
  flex: 1 1 auto;
  min-width: 360px;
  height: 1.3rem;
  background: var(--gray-bg);
  border-radius: var(--radius-sm);
}

.rz-platci-pruh {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 4px;
  background: var(--accent-teal);
  min-width: 4px;
}
.rz-platci-pruh--byvaly { background: var(--gray-text); opacity: 0.6; }

.rz-platci-osa-mesice {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0.3rem 0 0 calc(180px + 0.7rem);
}

/* Zalozka "Nastaveni" (static/js/nastaveni.js) - katalogy Zpracovatele/
   Spravci/Pobocky. Kazdy zaznam je JEDEN radek tabulky (ne velky
   .pod-radek box jako u zamestnavatelu/darcu), male vstupy primo v
   bunkach - viz .tabulka-input nize. Cela sekce jde sbalit pres nativni
   <details>/<summary>, zadny extra JS. */
.ns-sekce summary {
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 0.3rem;
}
.ns-sekce summary::marker { color: var(--text-muted); }
.ns-sekce[open] summary { margin-bottom: 0.6rem; }

.tabulka-input {
  width: 100%;
  min-width: 90px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.45rem;
  font-size: 0.82rem;
  font-family: inherit;
  box-sizing: border-box;
  background: white;
}
.tabulka-input:disabled { background: var(--gray-bg); color: var(--text-muted); }

/* Sloupec "Aktivni" (checkbox) u Zpracovatelu/Spravcu - male, na stred. */
.ns-aktivni-sloupec { width: 46px; text-align: center; }

/* Sloupec "Soud" u Pobocek - jen ke cteni (dopocitava se z kodu soudu ve
   spisove znacce, data_core.py:soudy_pobocky), proto tlumene a bez inputu. */
.ns-pob-soudy { white-space: nowrap; color: var(--text-muted); font-size: 0.82rem; }

/* Hromadne pridani uctu u Bankovnich uctu - vyber spravce + textarea (jedno
   cislo uctu na radek) + tlacitko vedle sebe na sirsich obrazovkach. */
.ns-bu-pridat-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.ns-bu-pridat-form select { flex: 0 0 auto; }
.ns-bu-pridat-form textarea {
  flex: 1 1 260px;
  min-width: 200px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
}

/* Jedna sbalitelna skupina uctu na spravce (viz nastaveni.js:buSkupinaHtml) -
   vlastni ramecek + nativni <details>/<summary>, stejny princip jako
   top-urovnove .ns-sekce vyse, jen jich tu je vic vedle sebe. Sbalene je
   to jen jeden radek (jmeno + pocet), coz je cely bod teto zmeny - na
   vyslovne prani uzivatele 2026-09-04 "zobrazeni uctu je prilis velke". */
.ns-bu-skupina {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 0.7rem;
  margin-bottom: 0.4rem;
}
.ns-bu-skupina summary {
  cursor: pointer;
  padding: 0.5rem 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--heading);
}
.ns-bu-skupina summary::marker { color: var(--text-muted); }
.ns-bu-skupina[open] summary { border-bottom: 1px solid var(--border); }
.ns-bu-pocet { font-weight: 400; color: var(--text-muted); }
.ns-bu-skupina table { margin: 0.4rem 0 0.6rem; }

/* banner "filtrovano podle rizeni" - proklik ze stranky Rizeni (sloupce
   Pasky/Dotaznik/Vyzva, viz rizeni.js) do vyplatnice.js/dotaznik.js/
   pravidelna-vyzva.js, sdileny vzor napric vsemi tremi. */
.filtr-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--tile-bg);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 0.85rem;
}
.filtr-banner[hidden] { display: none; }

/* --- toast --- */

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--heading);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  z-index: 60;
}

.toast[hidden] { display: none; }
.toast.toast--erro { background: var(--red); }

/* --- stylovany potvrzovaci dialog (nahrada za window.confirm(), viz
   common.js:confirmDialog) - vlastni centrovany overlay, NE #popover
   (potvrzeni se casto spousti z tlacitka UVNITR uz otevreneho popoveru,
   napr. "Smazat" u darce v dialogu "Upravit rizeni" - sdileni #popover by
   rozepsany formular pod nim zavrelo/prepsalo). --- */

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(20, 30, 35, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-overlay[hidden] { display: none; }

.confirm-dialog {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(20, 30, 35, 0.22);
  padding: 1.2rem 1.3rem;
  width: 320px;
}
.confirm-dialog p { margin: 0; font-size: 0.88rem; }

/* =========================================================================
   Verejny formular "Dotaznik pro dluznika" (static/dotaznik.html) - vlastni
   jednoduchy layout bez topbaru/loginu, ale stejna paleta/karty jako zbytek
   dashboardu, aby to na prvni pohled vypadalo jako appka kancelare.
   ========================================================================= */

.ds-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 4rem;
}

.ds-hlavicka {
  text-align: center;
  margin-bottom: 1.4rem;
}

.ds-hlavicka h1 {
  color: var(--heading);
  font-size: 1.3rem;
  margin: 0.6rem 0 0.3rem;
}

.ds-stav-card {
  text-align: center;
  padding: 3rem 1.5rem;
}

.ds-stav-card[hidden] { display: none; }

.ds-sekce {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1rem;
}

.ds-sekce legend {
  font-weight: 700;
  color: var(--heading);
  font-size: 0.95rem;
  padding: 0 0.4rem;
}

.ds-sekce .ds-hint {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: -0.2rem 0 0.8rem;
}

.ds-pole { margin-bottom: 0.85rem; }

.ds-pole label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.ds-pole input[type=text], .ds-pole input[type=email], .ds-pole input[type=tel],
.ds-pole input[type=date], .ds-pole input[type=number], .ds-pole input[type=file],
.ds-pole textarea, .ds-pole select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
  font-size: 0.88rem;
  font-family: inherit;
  box-sizing: border-box;
  background: white;
}

.ds-pole textarea { resize: vertical; min-height: 3.6rem; }

.ds-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .ds-grid2 { grid-template-columns: 1fr; } }

.ds-radio-group { display: flex; gap: 1.2rem; align-items: center; margin-top: 0.2rem; }
.ds-radio-group label { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; font-size: 0.86rem; }

.ds-podpole {
  border-left: 3px solid var(--tile-bg);
  padding-left: 0.9rem;
  margin: 0.5rem 0 0.9rem;
}
.ds-podpole[hidden] { display: none; }

/* Souhrn udaju, ktere uz o dluznikovi evidujeme (pravidelna-vyzva-verejny.js
   zapojKonfirmaciAdresy/zapojKonfirmaciPrijmu) - odlisen od .ds-podpole
   vyplnenym pozadim, at je na prvni pohled jasne, ze jde o predvyplnena
   data k potvrzeni, ne o dalsi otazku. */
.ds-udaje-souhrn {
  background: var(--tile-bg);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  margin: 0.5rem 0 0.7rem;
  font-size: 0.86rem;
}
.ds-udaje-souhrn p { margin: 0 0 0.35rem; }
.ds-udaje-souhrn ul { margin: 0; padding-left: 1.1rem; }
.ds-udaje-souhrn li { margin-bottom: 0.15rem; }

/* Strukturovana adresa (obec/cast obce/ulice/cislo popisne/cislo
   orientacni/PSC, viz migrace 0007 a dotaznik-verejny.js
   initAdresaAutocomplete) - ohraniceny box at je v delsim formulari
   vizualne jasne, kde jedna adresa konci a dalsi pole zacinaji. */
.ds-adresa-nadpis {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.ds-adresa-blok {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem 0.05rem;
  margin-bottom: 0.85rem;
  background: #fafbfb;
}

.ds-radek {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.6rem;
  position: relative;
}

.ds-radek-odebrat {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
}
.ds-radek-odebrat:hover { color: var(--red); }

.ds-pridat-btn { margin-top: 0.3rem; }

.ds-checkbox-pole {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--tile-bg);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
}
.ds-checkbox-pole input { margin-top: 0.2rem; }
.ds-checkbox-pole label { font-size: 0.85rem; }

.ds-nutne {
  display: inline-block;
  background: var(--orange-bg);
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-left: 0.4rem;
}

.ds-submit-bar {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: 1rem 0;
  text-align: center;
}

.ds-submit-bar .btn-primary { width: 100%; padding: 0.8rem; font-size: 0.95rem; }

/* Progress bar behem odesilani (viz dotaznik-verejny.js/pravidelna-vyzva-
   verejny.js:odeslat) - PDF + JSON + kazda priloha zvlast pres WebDAV muze
   trvat desitky sekund az minutu (viz README.md o gunicorn timeoutu), staticke
   "Odesílám…" bez cisla predtim nedavalo zadnou predstavu, jak dlouho to
   jeste potrva. */
.ds-progress {
  display: block;
  width: 100%;
  height: 8px;
  margin-bottom: 0.6rem;
  accent-color: var(--accent-teal);
}
.ds-progress[hidden] { display: none; }

.ds-chyba-form {
  background: var(--red-bg);
  color: var(--red);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.ds-chyba-form[hidden] { display: none; }

/* banner "rozpracovany dotaznik obnoven" (viz dotaznik-verejny.js) */

.ds-draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--tile-bg);
  border: 1px solid var(--accent-teal);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.ds-draft-banner[hidden] { display: none; }

.ds-autosave-info {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
  min-height: 1.1em;
}

/* formular "pozadat o opravu" na obrazovce "odkaz uz byl pouzit" */

.ds-oprava-formular {
  max-width: 360px;
  margin: 1rem auto 0;
  text-align: left;
}
.ds-oprava-formular[hidden] { display: none; }

/* soubor-widget s postupnym pridavanim (viz dotaznik-verejny.js initFileWidget) */

.ds-file-seznam {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.ds-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--tile-bg);
  border-radius: 999px;
  padding: 0.25rem 0.4rem 0.25rem 0.7rem;
  font-size: 0.8rem;
  max-width: 100%;
}

.ds-file-chip button {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.15rem;
}
.ds-file-chip button:hover { color: var(--red); }

.ds-file-widget {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  transition: border-color 0.15s, background 0.15s;
}

.ds-file-widget--dragover {
  border-color: var(--accent-teal);
  background: var(--tile-bg);
}

.ds-file-hint {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-left: 0.6rem;
}

/* inline naseptavac (ARES, platci duchodu) - normalni tok, ne overlay,
   protoze se pouziva i uvnitr dynamicky pridavanych radku */

.ds-inline-navrhy {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 180px;
  overflow-y: auto;
  margin-top: 0.25rem;
  background: white;
}
.ds-inline-navrhy[hidden] { display: none; }

.ds-inline-navrhy div {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.83rem;
  border-bottom: 1px solid #f1f2f3;
}
.ds-inline-navrhy div:last-child { border-bottom: none; }
.ds-inline-navrhy div:hover { background: #f3f6f5; }
.ds-inline-navrhy .znacka { color: var(--text-muted); font-size: 0.8em; display: block; }

/* --- Ukolovnik (zalozka "Ukolovnik", js/ukolovnik.js) ---
   Prehled je jedna .card na zpracovatele (misto jedne velke tabulky se
   sloupcem "zpracovatel") - hlavicka karty nese jmeno, pocet nedokoncenych
   a pripadne pocet ukolu po terminu. .table-card ma padding 0, proto si
   hlavicka rezervuje vlastni. */
#uk-druh-row,
#uk-filtr-row { justify-content: flex-start; }

/* Formular "Novy ukol" - mrizka, ne vnorene flex radky: jen tak jsou pole
   ve dvou radcich pod sebou opravdu ve stejnych sloupcich (na siroko:
   nazev | zpracovatel, popis | termin | priorita). Pole "Řízení" zabira
   cely radek, aby jeho schovani u ukolu bez kauzy nepreskladalo zbytek. */
.uk-formular {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 0.7rem;
}

.uk-formular .ds-pole { margin-bottom: 0.7rem; }
.uk-cely-radek { grid-column: 1 / -1; }
.uk-sirsi { grid-column: span 2; }

/* Naseptavac rizeni: vlastni obal kvuli position:relative pro rozbaleny
   seznam - pole "Řízení" je pres celou sirku karty, ale samotny vstup i
   nabidka pod nim se drzi ctive sirky. */
.uk-naseptavac { position: relative; max-width: 520px; }
#uk-navrhy { position: absolute; z-index: 20; background: white; width: 100%; }

@media (max-width: 900px) {
  .uk-formular { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .uk-formular { grid-template-columns: 1fr; }
  .uk-sirsi { grid-column: 1 / -1; }
}

.uk-skupina-hlavicka {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem 0.5rem;
}

.uk-skupina-hlavicka h2 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--heading);
}

.uk-meta { color: var(--text-muted); font-size: 0.78rem; }

/* Pole s datem (termin ukolu) - na sirku jen podle obsahu, ne pres celou
   bunku mrizky/sloupec tabulky: datum ma pevnou delku ~10 znaku a
   roztazene pole vedle kratkeho obsahu pusobi rozhozene.
   Vyska: iOS Safari kresli input[type=date] s vlastnim vnitrnim odsazenim
   (::-webkit-datetime-edit) a zarovnanim doprava, takze pole vyjde vyssi
   nez sousedni text/select - zazito naostro na iPadu. Normalizace nize ho
   srovna na stejnou vysku jako ostatni pole; v prohlizecich, ktere tyhle
   pseudoelementy neznaji, se nic nedeje. */
.uk-formular input[type="date"],
.uk-tabulka input[type="date"] {
  max-width: 170px;
  -webkit-appearance: none;
  appearance: none;
}

/* Zadani terminu: pevne datum NEBO pocet dni od dneska (druhy vstup jen
   prepocita datum vedle, viz js/ukolovnik.js) - jedna radka, na uzkem
   displeji se zalomi. */
.uk-termin-vstup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.uk-termin-nebo { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; }

#uk-termin-dnu { width: 4.5rem; }

/* Dopocitane datum vedle poctu dni ("dní — 5. 9. 2026") - jen napoveda,
   at je videt, na co se pocet dni prepocital. */
#uk-termin-nahled { color: var(--text-muted); }

/* Jednotna vyska vsech ovladacich prvku v ramci jednoho bloku - prohlizec
   dava kazdemu typu jinou prirozenou vysku (v Chromiu 32/34/35,5 px pro
   text/select/datum, v iOS Safari je datum jeste vyssi), takze bez tohohle
   nejsou pole vedle sebe stejne vysoka. Hodnoty jsou nad nejvyssim
   prirozenym rozmerem, aby se obsah nikde neorezal. */
.uk-formular input,
.uk-formular select { height: 2.25rem; }

.uk-tabulka input,
.uk-tabulka select { height: 1.85rem; }

.uk-formular input[type="date"]::-webkit-datetime-edit,
.uk-tabulka input[type="date"]::-webkit-datetime-edit {
  padding: 0;
  line-height: 1.25;
}

.uk-formular input[type="date"]::-webkit-date-and-time-value,
.uk-tabulka input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-height: 0;
}

/* Na uzsim displeji (iPad na vysku) at tabulka radeji SCROLLUJE uvnitr
   .tabulka-scroll, nez aby zmackla sloupce tak, ze se "bez vazby na kauzu"
   lame do ctyr radku a nazev ukolu do orezaneho inputu. */
.uk-tabulka { min-width: 940px; }

/* Sbaleny radek ukolu je JEN nazev na jedne radce - popis, kdo ukol zalozil
   a editovatelny nazev se ukazou az po kliknuti na nazev (viz radekHtml v
   js/ukolovnik.js). Diky tomu ma bezny radek jednu vysku radku, ne tri. */
.uk-ukol-bunka { max-width: 420px; }

.uk-nazev-radek {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

/* Sipka pred nazvem - jediny prvek, kterym jde radek zase sbalit (u
   rozbaleneho radku je misto textu nazvu input, na ktery uz "klik na nazev"
   nefunguje). */
.uk-rozbalit {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 0.1rem;
  font-size: 0.75rem;
  line-height: 1;
}
.uk-rozbalit:hover { color: var(--heading); }

/* Nazev drzi jednu radku i kdyz je dlouhy ("Vygenerovat odkaz na dotaznik
   pro dluznika") - jinak by se zalomil do tri radku a sbaleny radek by
   prestal byt jednoradkovy, cimz by cele sbaleni ztratilo smysl. Cely
   nazev zustava v title. */
.uk-nazev {
  cursor: pointer;
  flex: 0 1 auto;
  min-width: 6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uk-nazev:hover { color: var(--heading); text-decoration: underline; }

/* Nahled popisu za nazvem ve sbalenem radku - aby bylo poznat, ze ukol
   nejaky popis ma, i kdyz je schovany. Delsi text se orizne. */
.uk-popis-nahled {
  color: var(--text-muted);
  font-size: 0.9em;
  /* Zaklad 0 + roztazeni do zbytku radky: nazev si vezme sve misto prvni,
     nahled popisu vyplni, co zbyde, a orizne se. */
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uk-popis-input { margin-top: 0.25rem; font-size: 0.78rem; }

.uk-po-terminu { border-color: var(--red); color: var(--red); }

/* Pripravena upominka dluznikovi v rozbalenem radku ukolu "Proverit,
   jestli dluznik vyplnil dotaznik" - appka ji jen PRIPRAVI ke zkopirovani,
   sama nic neposila (viz ukolovnik/data.py:upominka_k_ukolu). */
.uk-upominka {
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--tile-bg, #f7f9f9);
}

.uk-upominka-hlavicka {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.uk-upominka-text {
  margin-top: 0.35rem;
  height: auto;          /* prebiji jednotnou vysku poli v .uk-tabulka */
  font-size: 0.78rem;
  resize: vertical;
}

.uk-upominka-akce {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

/* Zalozka "Fakturace" (viz js/fakturace.js) - radek transakce, kterou
   uzivatel v nahledu vyradil z teto davky (checkbox "vyradit"). */
.fa-vyrazeny-radek { opacity: 0.45; text-decoration: line-through; }

/* Zalozka "Odmeny" (viz js/odmeny.js) - rizeni s nedoplatkem/preplatkem
   na bezne mesicni odmene, vizualne stejny duch jako badge--cervena/zelena. */
.od-nedoplatek { background: color-mix(in srgb, var(--red) 12%, transparent); }
.od-preplatek { background: color-mix(in srgb, var(--green) 12%, transparent); }

/* Zalozka "Odmeny", pohled "Podle mesicu" a jeho faze-2/3 obdoby
   "Prihlasky podle mesicu"/"Zpenezeni podle mesicu"/"Hotove vydaje podle
   mesicu" (viz js/odmeny.js) - jeden sloupec na kalendarni mesic, casto
   desitky sloupcu -> radky musi byt co nejnizsi (zadani uzivatele) a
   prvni sloupec (jmeno dluznika, po prehozeni poradi pred spisovou
   znackou) zustava pri vodorovnem scrollu pripevneny vlevo, at je
   vzdycky videt, o ktere rizeni jde. */
#od-matice-tabulka th,
#od-matice-tabulka td,
#od-matice-prihlasky-tabulka th,
#od-matice-prihlasky-tabulka td,
#od-matice-zpenezeni-tabulka th,
#od-matice-zpenezeni-tabulka td,
#od-matice-hotove-vydaje-tabulka th,
#od-matice-hotove-vydaje-tabulka td {
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}
#od-matice-tabulka th:first-child,
#od-matice-tabulka td:first-child,
#od-matice-prihlasky-tabulka th:first-child,
#od-matice-prihlasky-tabulka td:first-child,
#od-matice-zpenezeni-tabulka th:first-child,
#od-matice-zpenezeni-tabulka td:first-child,
#od-matice-hotove-vydaje-tabulka th:first-child,
#od-matice-hotove-vydaje-tabulka td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card-bg);
  box-shadow: inset -1px 0 0 var(--border);
}
/* Rohova bunka (hlavicka prvniho sloupce) musi byt nad sticky hlavickovym
   radkem (z-index 2, viz `thead th` vyse) i nad sticky prvnim sloupcem
   (z-index 1) - jinak by pri soucasnem svislem i vodorovnem scrollu jedno
   prekryvalo druhe. */
#od-matice-tabulka thead th:first-child,
#od-matice-prihlasky-tabulka thead th:first-child,
#od-matice-zpenezeni-tabulka thead th:first-child,
#od-matice-hotove-vydaje-tabulka thead th:first-child { z-index: 3; }

/* Zalozka "Hospodareni" (viz js/hospodareni.js) - mesicni prehled se
   sloupcem na kazdy druh odmeny x bez DPH/DPH/vc. DPH, taky dost sloupcu
   na sirku - stejny sticky-prvni-sloupec vzor jako matice v Odmenach
   vyse, at je pri vodorovnem scrollu porad videt, ktereho mesice se
   radek tyka. */
#ho-tabulka th:first-child,
#ho-tabulka td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card-bg);
  box-shadow: inset -1px 0 0 var(--border);
}
#ho-tabulka thead th:first-child { z-index: 3; }

/* Podzalozka "Odmeny" v detailu rizeni (viz js/rizeni/odmeny-tab.js) -
   souhrnna tabulka uhrazeno/ocekavano/rozdil, textova obdoba
   od-nedoplatek/od-preplatek vyse (tam se barvi cely radek tabulky
   prehledu, tady jen jedna hodnota uprostred textu). */
/* Tri sekce (mesicni odmena/prihlasky/zpenezeni, viz js/rizeni/
   odmeny-tab.js:sekceHtml) se skladaji jedna za druhou do stejneho
   `.rz-detail-uzky` - prvni z tech, ktere rizeni ma (nemusi byt vzdy
   "Pravidelna mesicni odmena"), nema mit horni okraj/ramecek jako
   ostatni podnadpisy panelu. */
.od-tab-sekce > h3.popover-podnadpis:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.od-tab-souhrn { border-collapse: collapse; margin-bottom: 0.6rem; }
.od-tab-souhrn td { padding: 0.15rem 0; }
.od-tab-souhrn td:first-child { color: var(--text-muted); padding-right: 0.8rem; }
.od-tab-souhrn td:last-child { font-weight: 600; }
.od-text-nedoplatek { color: var(--red); }
.od-text-preplatek { color: var(--green); }

/* Zalozka "Osobni jednani" (viz js/osobni-jednani.js) - postup vypoctu
   SHA-256 (pocita se po castech, viz sha256.js), aby u velkych
   videosouboru uzivatel videl, ze appka nezamrzla. */
.oj-progress {
  margin-top: 0.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--border);
  overflow: hidden;
}
.oj-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent-teal);
  transition: width 0.15s linear;
}

/* Zalozka "Muj prehled" (vychozi po prihlaseni, viz js/muj-prehled.js) -
   "Moje ukoly"/"Nejblizsi terminy" vedle sebe na sirokem okne, pod sebe na
   uzkem - stejny princip jako .ds-grid2 ve verejnych formularich, jen
   samostatna trida (dve .card deti, ne "pole formulare"). "Ceka na
   schvaleni" pod tim zustava na celou sirku (bezny pocet radku tam kolisa
   nejvic, tabulka navrhu ma i tak dost sloupcu). */
.mp-mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 0.7rem; }
@media (max-width: 800px) { .mp-mrizka { grid-template-columns: 1fr; } }

/* Radek "po terminu"/"dnes" pro Moje ukoly i Nejblizsi terminy - stejny
   vizual jako tr[data-barva] v Ukolovniku (box-shadow na prvni bunce),
   znovu tu jen proto, ze "Muj prehled" ma vlastni tabulky bez `uk-`
   prefixu. */
#mp-ukoly-tbody tr[data-barva="cervena"] td:first-child,
#mp-kalendar-tbody tr[data-barva="cervena"] td:first-child { box-shadow: inset 3px 0 0 var(--red); }
#mp-ukoly-tbody tr[data-barva="oranzova"] td:first-child,
#mp-kalendar-tbody tr[data-barva="oranzova"] td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.mp-meta {
  display: block;
  color: var(--text-muted);
  font-size: 0.8rem;
  /* Popis ukolu umi byt dlouhy (viz Ukolovnik) - v kompaktni karte se
     jen naznaci a orizne, cely text jde precist az v Ukolovniku samotnem. */
  max-width: 26rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}