/* ═══════════════════════════════════════════
   FINANČNÍ STUDIO — design system v2
   dark default + light toggle
   brand: navy #1B2C5E · pink #E91E8C
═══════════════════════════════════════════ */
/* GLOBÁLNÍ RESET TU BYL, ALE NIKDY NEBĚŽEL — a záměrně ho nezapínáme (2026-08-27).
   Soubor začínal doslova značkou <style> (od úplně prvního commitu). V .css souboru je to
   neplatný token: parser ho nepřečte jako pravidlo a zahodí všechno až po nejbližší blok,
   takže se snědl přesně jeden následující řádek — a byl to reset
       *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
   Změřeno v prohlížeči: box-sizing je content-box, <p> má margin 14px, <ul> padding-left 40px,
   <body> margin 8px. Celá aplikace tedy stojí na výchozích hodnotách prohlížeče a jednotlivá
   pravidla si box-sizing dopisují sama (.page, .std-page…).
   Značka je pryč, aby soubor byl platné CSS. Reset se ale NEVRACÍ: zapnout ho dnes by naráz
   sebralo odsazení všem odstavcům a seznamům a přehodilo box model každému prvku, který má
   šířku i padding — to je vlastní úkol s vlastním proměřením, ne vedlejší efekt opravy. */
:root{
  --vyp-cols:9% 26% 8% 12% 12% 9% 20% 4%;
  --sort-cols:42% 30% 14% 14%;
  --nero-cols: 19% 14% 13% 15% 10% 9% 13% 7%;
  --dluh-cols:14% 18% 14% 8% 10% 24% 12%;
  --storno-cols:13% 16% 14% 10% 10% 10% 14% 13%;
  --vyj-cols:20% 20% 15% 11% 11% 15% 8%;
  --pozad-cols:12% 13% 22% 17% 11% 10% 8% 7%;

  --fs-navy:#1B2C5E;--fs-pink:#E91E8C;--fs-pink3:#fce4f1;
  /* Akcent rozložený na tokeny (29. 9. 2026, holverový vzhled): --accent-rgb pro průhledné
     podklady (rgba(var(--accent-rgb),.15)), --on-accent pro text na plné výplni akcentem.
     Ve Studiu dávají totéž co dřív; holverový vzhled je přepíše níž. */
  --accent-rgb:233,30,140;--on-accent:#fff;
  --bg0:#07111C;--bg1:#0D1E2E;--bg2:#112031;--bg3:#1C2F44;
  --b1:rgba(255,255,255,.07);--b2:rgba(255,255,255,.13);--b3:rgba(255,255,255,.22);
  --t1:#F0F4FF;--t2:#8FA8C8;--t3:#4A6580;
  --gr:#3DD68C;--grd:#3DD68C18;
  --am:#F5A623;--amd:#F5A62318;
  --rd:#F26B6B;--rdd:#F26B6B18;
  /* Kategorická paleta ikon karet smluv (SmlBg, rodinaColors) — popředí = sytá verze pozadí
     rgba. --ora (255,152,0) a --lime (164,197,32) se dřív používaly bez definice → var() tiše
     selhal a ikona/text zdědil barvu rodiče místo oranžové/limetkové (past jako dřív --tab-fg). */
  --ora:#FF9800;--lime:#A4C520;
  /* Sémantická paleta TŘÍD AKTIV (2026-07-13) — jedna barva na druh aktiva napříč celou
     appkou i PDF (alokační koláče, rozpad portfolia dle třídy aktiv). Akcie = červená (nejvyšší
     riziko), Dluhopisy = modrá, Nemovitosti = jantarová, Vklady/hotovost = zelená, Smíšené =
     fialová. Datové barvy (ne UI chrome) — stejné v tmavém i světlém režimu. */
  --ac-akcie:#E23744;--ac-dluhopisy:#2E77D0;--ac-nemovitosti:#E0A83B;--ac-hotovost:#2FA96A;--ac-smisene:#7E57C2;
  /* Typografická škála — 2026-07-06, návrh na sjednocení "skákajících" velikostí písma
     (desítky ad-hoc inline font-size hodnot po celé appce, půlpixelové kroky 10.5/11.5/12.5px).
     Zatím zapojeno jen na .sec-title (nadpis karty/položky — jméno cíle, Příjmy/Výdaje,
     Přebytek/Nedostatek) jako první krok; --fs-body/--fs-label/--fs-stat/--fs-stat-lg jsou
     připravené proměnné pro postupné dolaďování zbytku appky beze nutnosti měnit desítky
     inline stylů znovu — stačí upravit hodnotu tady. Neaplikováno zpětně na VŠECHNY existující
     inline styly najednou (rozsah přes celou appku), viz DOMYSLET.md. */
  --fs-page-title:21px;      /* .pt — název stránky (Zdroje, Cíle, Osoby...) — 2026-07-09 +2px, sjednocení nadpisů napříč appkou */
  --fs-section-title:14px;   /* .sec-title — nadpis karty/záznamu (jméno cíle, Příjmy, Výdaje, Přebytek) */
  --fs-subsection-title:12px;/* .det-sec-title — vnořený nadpis uvnitř karty (Identita, Občanský průkaz...) */
  --fs-body:12.5px;          /* běžný řádek v seznamu */
  --fs-label:10.5px;         /* popisek pole / mikro-caption */
  /* HUSTÝ SEKUNDÁRNÍ TEXT (20. 9. 2026). Ve škále nebyl, a přitom ho aplikace používá na
     384 místech a nese ho i `.ps` (podnadpis stránky) — detaily obchodu, vnořené tabulky,
     vysvětlivky pod poli. Doplněno jako TOKEN místo přepisování těch 384 míst: velikost je
     zavedená a konzistentní, chyběl jí jen název. */
  --fs-body-sm:11.5px;       /* hustý sekundární text (podnadpis, detail, vnořená tabulka) */
  --fs-stat:18px;            /* středně velké číslo (Splněno, Naspořeno, celkové % ochrany) */
  --fs-stat-lg:24px;         /* hero číslo (Přebytek/Nedostatek částka, dashboard souhrny) */
  /* Bez tohoto prohlížeč vykresluje OTEVŘENOU nabídku <select> (a spinnery number/date inputů)
     podle OS světlého výchozího stylu bez ohledu na tmavé pozadí appky — proto ta "divná bílá
     roleta" a černý text na bílém uprostřed tmavé appky. color-scheme řekne prohlížeči, ať tyhle
     nativní widgety (které si CSS nedokáže samo stylovat, viz <option> uvnitř otevřeného selectu)
     vykresluje ve stejné paletě jako appka. Musí se měnit spolu s body.light přepínačem níže —
     jinak by světlý režim měl naopak tmavé rolety na bílém pozadí.
     2026-07-05: globální konvence appky — každé nové tmavé/světlé téma nebo widget musí toto
     respektovat, ne řešit barvy jen custom CSS. */
  color-scheme: dark;
}
body.light{
  --bg0:#F3F5FA;--bg1:#FFFFFF;--bg2:#EEF1F8;--bg3:#E3E8F2;
  --b1:rgba(27,44,94,.07);--b2:rgba(27,44,94,.13);--b3:rgba(27,44,94,.22);
  --t1:#0F1A3A;--t2:#3E5080;--t3:#7B90B8;
  --gr:#1A9E5E;--grd:#1A9E5E12;
  --am:#C47D0A;--amd:#C47D0A12;
  --rd:#D93F3F;--rdd:#D93F3F12;
  color-scheme: light;
}

/* HOLVEROVÝ VZHLED (29. 9. 2026) — holverové kontexty (backoffice, prodejce, manažer, poradce
   v režimu Provize) dostanou barvy a písmo z grafického manuálu holveru; klient, poradenská část
   a správa zůstávají ve vzhledu Studia. Třídu `skin-holver` dává na <body> server (_Layout podle
   dataRole), takže nic neproblikne. Paleta z manuálu: Cod Gray #0c0c0c (60 %), Slate Gray #7a8c92
   (20 %), Spring Bud #b2f10c (10 %, akce), Riptide Blue #8fedd3 (5 %), Raspberry Rose #f9348a (5 %).
   Rozhodnutí uživatele: písmo Arial; zelená „v pořádku" posunutá k Riptide Blue, ať se neplete
   s limetkou; ve světlém režimu je limetka jen výplň tlačítek s tmavým textem (jako text na bílé
   je nečitelná), akcent v textu je tmavá olivová. PDF tenhle vzhled NEPŘEBÍRAJÍ (střídmost). */
body.skin-holver{
  --fs-navy:#B2F10C;--fs-pink:#B2F10C;--fs-pink3:#EEF9D0;
  --accent-rgb:178,241,12;--on-accent:#0C0C0C;
  --bg0:#0C0C0C;--bg1:#141617;--bg2:#1B1E20;--bg3:#262B2E;
  --t1:#F1F3F3;--t2:#A3B1B6;--t3:#66767C;
  --gr:#8FEDD3;--grd:#8FEDD318;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;
}
body.skin-holver.light{
  --fs-pink:#4D6B00;--accent-rgb:77,107,0;--on-accent:#FFFFFF;
  --bg0:#F2F4F4;--bg1:#FFFFFF;--bg2:#EDF0F1;--bg3:#E4E8E9;
  --b1:rgba(12,12,12,.07);--b2:rgba(12,12,12,.13);--b3:rgba(12,12,12,.22);
  --t1:#0C0C0C;--t2:#4E5B60;--t3:#7A8C92;
  --gr:#12876B;--grd:#12876B14;
  /* Jantar Studia (#C47D0A) měl na bílém kontrast 2,7 : 1 — stavy „čeká na rozpad", „Probíhá
     podpis", „Nové" byly ve světlém holverovém vzhledu sotva čitelné (audit ve WebKitu 1. 10. 2026). */
  --am:#9A6100;--amd:#9A610014;
}
/* Primární tlačítko je v obou režimech limetkové s tmavým textem. */
body.skin-holver .btn-primary{color:#0C0C0C}
/* Logo: v hlavičce menu jsou obě, ukazuje se podle vzhledu (SPA poradce ho přepíná za běhu). */
.sb-logo-wrap .logo-holver{display:none}
.sb-logo-wrap .logo-studio{display:block}
body.skin-holver .sb-logo-wrap .logo-holver{display:block}
body.skin-holver .sb-logo-wrap .logo-studio{display:none}
/* Modrá informační ikona (#2196F3) v paletě holveru není — nahrazuje ji Slate Gray. */
body.skin-holver .icon-info{color:var(--t2)}
/* Manuál: nadpisy ani popisky se nepíšou kapitálkami (holver je vždy malými). */
body.skin-holver *{text-transform:none !important}
/* PÍSMO — OSM VELIKOSTÍ, KAŽDÁ MÁ JEDNU ROLI (10. 10. 2026, uživatel: „nechci mít v každé tabulce
   jiné velikosti… musí to být opravdu profi"). Nejdřív v holveru, týž den v celé aplikaci.
   Obsah obrazovky je 12,5 (`--fs-body`): buňka tabulky i řádek seznamu včetně ID, podtitulu pod
   jménem a data, text karty, prázdný stav, odkaz. Podřazený údaj se liší BARVOU, ne velikostí.
   12 = záhlaví tabulky a ovládací prvky (rolety, záložky, pilulky filtru, stránkování),
   14 = nadpis karty, 11 = štítek, 10,5 = popisek pole a dlaždice, 19 = číslo v dlaždici,
   11,5 = podnadpis stránky, 21 = název stránky. V seznamu a tabulce pravidlo přebíjí i inline
   velikost (`!important`), aby se do buňky nedostala vlastní. Nový mřížkový seznam patří do
   výčtu řádků níž. Pravidla: docs/VZHLED.md §2b.
   AKČNÍ IKONY (.icon-edit/-del/-info) Z PRAVIDLA VYŇATÉ (16. 10. 2026): `!important` jim dřív
   vnutilo 12,5 px a ikona na konci řádku byla v každé tabulce drobná (Mojmír: „téměř nerozeznatelné"). */
.page{font-size:var(--fs-body)}
table.tbl tbody :not(i):not(.pill):not(.badge):not(.zj-badge):not(.action-priority):not(.icon-edit):not(.icon-del):not(.icon-info):not(svg):not(svg *),
:is(.osoby-row,.cl-row,.prodejci-row:not(.prodejci-head),.penezenky-row:not(.penezenky-head),
  .hjednani-row:not(.hjednani-head),.hparovani-row:not(.hparovani-head),.uz-row,
  .pskup-row:not(.pskup-head),.jednani-row,.obchod-list-row,.feed-row,
  .opp-row,.sanon-row,.action-item-row,.pf-ord-row)
  :not(i):not(.pill):not(.badge):not(.zj-badge):not(.action-priority):not(.icon-edit):not(.icon-del):not(.icon-info):not(svg):not(svg *){font-size:var(--fs-body) !important}
:is(.pill,.badge,.zj-badge,.action-priority){font-size:11px !important}
.fpill,.btn-sm{font-size:12px}
/* Nadpis karty je jeden: 14 / 600. `.ct-lg` to mělo zajistit, ale `.ct` stojí v souboru až za ním
   a velikost mu přebíjí — nadpis karty proto nese velikost sám. */
.page :is(.ct,.sec-title){font-size:var(--fs-section-title);font-weight:600}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
     font-size:14px;background:var(--bg0);color:var(--t1);overflow:hidden;height:100vh;
     transition:background .25s,color .25s}

/* TOPBAR */
#topbar{display:none}
.tb-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:rgba(255,255,255,.6);font-size:var(--fs-stat);
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);transition:background .15s}
.tb-ico:hover{background:rgba(255,255,255,.16);color:#fff}

/* SHELL */
#shell{display:grid;grid-template-columns:240px 1fr;position:fixed;
  top:0;left:0;right:0;bottom:0;overflow:hidden}
#sidebar{background:var(--bg1);border-right:1px solid var(--b1);padding:0;
  overflow-y:auto;overflow-x:hidden;transition:background .25s;
  display:flex;flex-direction:column}
.ni{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;
  font-size:12.5px;color:var(--t2);cursor:pointer;user-select:none;
  transition:background .12s,color .12s}
.ni i{font-size:14px;flex-shrink:0}
a.ni,a.ni:visited,a.ni:hover{text-decoration:none}
.ni.active{background:rgba(var(--accent-rgb),.14);color:var(--fs-pink);font-weight:500}
body.light .ni.active{background:var(--fs-pink3)}
.ni:hover:not(.active){background:var(--bg2);color:var(--t1)}
/* Infoportál — strom producentů/produktů: výběr přes celý řádek jako položka menu (.ni.active). */
.ip-sum{display:flex;align-items:center;gap:2px;list-style:none;cursor:pointer}
.ip-sum::-webkit-details-marker{display:none}
.ip-chev{font-size:13px;color:var(--t3);flex-shrink:0;transition:transform .15s}
details[open]>.ip-sum .ip-chev{transform:rotate(90deg)}
.ip-uzel{display:block;flex:1;min-width:0;padding:5px 8px;border-radius:7px;color:var(--t1);text-decoration:none}
a.ip-uzel:hover:not(.on){background:var(--bg2)}
.ip-uzel.ip-dite{margin-left:15px;color:var(--t2)}
.ip-uzel.on{background:rgba(var(--accent-rgb),.14);color:var(--fs-pink);font-weight:500}
.ip-oddil+.ip-oddil{margin-top:18px;padding-top:16px;border-top:1px solid var(--b1)}
.ni-badge{margin-left:auto;font-size:9.5px;background:var(--bg3);color:var(--t3);
  padding:1px 6px;border-radius:10px;font-weight:500}
.ni.active .ni-badge{background:rgba(var(--accent-rgb),.2);color:var(--fs-pink)}
/* 2026-07-19 — CRM R2: odznak nepřečtených zpráv. Výrazný (plná růžová), ne tlumený jako počet klientů.
   2026-08-06 — DOPLNĚNO NA SAMOSTATNOU TŘÍDU. Do té doby tvar (kulaté rohy, odsazení, velikost písma)
   dodávala až `.ni-badge` vedle ní; kde se `.unread-badge` použila sama (fronty ke schválení u admina),
   vyšel z toho hranatý růžový blok s textem v plné velikosti. Třída, která se jmenuje „odznak", musí
   odznak nakreslit sama — spoléhat na druhou třídu vedle je tichá past. */
.unread-badge{display:inline-flex;align-items:center;justify-content:center;
  background:var(--fs-pink);color:var(--on-accent);min-width:18px;box-sizing:border-box;text-align:center;
  font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:10px}
.ni.active .unread-badge{background:var(--fs-pink);color:var(--on-accent)}
.zpr-unread{background:var(--fs-pink);color:var(--on-accent);font-size:9.5px;font-weight:600;min-width:16px;height:16px;
  border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
/* 2026-07-09 — rozbalovací skupina v postranním menu (poprvé použito pro Compliance →
   Licence & AML/Certifikace/Kategorie) — obecné, ne vázané na konkrétní skupinu, další budoucí
   sbalitelná sekce menu použije stejné třídy. `.nm-chevron` se otáčí přes `.ni-group.open`. */
.ni-group>.ni .nm-chevron{margin-left:auto;font-size:11px;transition:transform .15s;color:var(--t3)}
.ni-group.open>.ni .nm-chevron{transform:rotate(180deg)}
.ni-group .ni-children{display:none;flex-direction:column;gap:2px;padding-left:18px;margin-top:2px}
.ni-group.open .ni-children{display:flex}
.ni-group .ni-children .ni{font-size:12px}
.nb{margin-top:auto;border-top:1px solid var(--b1);padding-top:7px}

#main{overflow-y:auto;background:var(--bg0);transition:background .25s;width:100%;box-sizing:border-box}
.page{display:none;padding:22px 26px;flex-direction:column;gap:16px;min-height:100%;width:100%;box-sizing:border-box}
.page.active{display:flex}

/* KOMPONENTY */
.ph{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px}
.pt{font-size:var(--fs-page-title);font-weight:600;color:var(--t1)}
.ps{font-size:var(--fs-body-sm);color:var(--t3);margin-top:3px}
.btn-primary{display:flex;align-items:center;gap:5px;background:var(--fs-navy);color:#fff;
  border:none;border-radius:9px;padding:8px 15px;font-size:12.5px;font-weight:500;
  cursor:pointer;font-family:inherit;transition:opacity .15s;white-space:nowrap}
.btn-primary:hover{opacity:.82}
.btn-sec{display:flex;align-items:center;justify-content:center;gap:5px;background:transparent;
  color:var(--t2);border:1px solid var(--b2);border-radius:9px;padding:8px 15px;font-size:12.5px;
  font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.btn-sec:hover{background:var(--bg2);color:var(--t1)}
/* 2026-07-11 — rozbalovací menu "Produkty" v horní liště (seskupení Renta/Domov/Studium/
   Bucket/Legacy, viz DOMYSLET.md T14) — appka ho stylovala jako lehčí, kompaktnější dropdown. */
.pm-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;
  font-size:12.5px;font-weight:500;color:var(--t1);cursor:pointer;white-space:nowrap}
.pm-item:hover{background:var(--bg2)}
.pm-item i{font-size:15px;color:var(--t2);width:16px;text-align:center}
/* Řádek tlačítek VYSKAKOVACÍHO OKNA (28. 9. 2026, uživatel: „OK uprostřed; je-li druhé tlačítko,
   jedno nalevo a druhé napravo").
   · jedno tlačítko → uprostřed
   · dvě → první u levého okraje (Zrušit/Zavřít/Zpět), druhé u pravého (hlavní akce)
   · tři a víc → první vlevo, ostatní spolu vpravo (hlavní akce úplně vpravo)
   Prvním dítětem řádku je proto vždy Zrušit/Zavřít. Kde JS za běhu tlačítko skryje (showNotice
   schová „Zrušit"), přepočítá `srovnejAkce()` (studio.js) třídu `jedno` podle VIDITELNÝCH tlačítek.
   Bez :has() — ten se v dokumentu o desítkách tisíc prvků přepočítává draze.
   Tlačítka pod formulářem na STRÁNCE (ne v okně) mají `.form-actions` — ta drží dřívější zarovnání. */
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.modal-actions > :first-child{margin-right:auto}
.modal-actions > :only-child{margin-left:auto}
.modal-actions.jedno{justify-content:center}
.modal-actions.jedno > *{margin-left:0;margin-right:0}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
/* Tlačítka formulářů jsou KOMPAKTNÍ (obsahová šířka, ne půl stránky) a zarovnaná doprava — dřív
   flex:1 roztáhlo Uložit/Zrušit na 47 % šířky (na plné stránce editoru smlouvy hnusné). iPhone styl. */
.modal-actions .btn-sec,.modal-actions .btn-primary,.form-actions .btn-sec,.form-actions .btn-primary{flex:0 0 auto;min-width:128px;justify-content:center}
.btn-ghost{display:flex;align-items:center;gap:5px;padding:8px 15px;border-radius:9px;
  border:1px solid var(--b2);background:transparent;color:var(--t2);cursor:pointer;
  font-size:12.5px;font-family:inherit;transition:all .12s}
.btn-ghost:hover{background:var(--bg2);color:var(--t1)}
/* MALÉ TLAČÍTKO (revize bod 79, 5. 10. 2026) — řádkové akce v seznamech a kartách. Dřív si každé
   nastavovalo velikost samo (inline 3–5 px paddingu, různé písmo); teď jedna třída, jedna velikost.
   Kombinuje se s btn-ghost / btn-sec / btn-primary, stojí ZA nimi, takže velikost přebije. */
.btn-sm{font-size:var(--fs-label);padding:4px 10px;border-radius:8px}
/* Tlačítko zapsané jako odkaz `<a>` se nepodtrhává a vypadá stejně jako `<button>` (27. 9. 2026 —
   podtržené „Klient →" v záznamu o jednání). Platí pro celou aplikaci. */
a.btn-primary,a.btn-sec,a.btn-ghost,a.btn-primary:hover,a.btn-sec:hover,a.btn-ghost:hover{text-decoration:none}
a.btn-primary,a.btn-sec,a.btn-ghost{display:inline-flex;box-sizing:border-box}
/* Růžové "zpět" tlačítko — původně jen "Zpět na poradce" (výstup z pohledu klienta zpět na
   poradcovský účet, _Layout.cshtml), uživatel chtěl stejný vzhled i pro "Zpět na Osoby" (Osoba
   detail, Šanon — filtr podle osoby), aby si oba vizuálně ladily (2026-07-06). */
.btn-pink-back{display:flex;align-items:center;gap:5px;background:rgba(var(--accent-rgb),.15);
  color:var(--fs-pink);border:1px solid rgba(var(--accent-rgb),.3);border-radius:8px;padding:5px 12px;
  font-size:12px;font-weight:500;text-decoration:none;cursor:pointer;font-family:inherit;
  transition:opacity .12s}
.btn-pink-back:hover{opacity:.8}
/* 2026-07-30 — šipky zpět V RÁMU appky jsou JEN IKONY: popisek cíle nese `title` (nastavuje ho
   `_setBackLabel`/`_syncBackArrow`), text v `.dyn-back-label` zůstává v DOM pro čtečky. Jediná
   šipka s viditelným textem je „Zpět na Poradce" v horní liště — má text přímo v elementu, ne
   v `.dyn-back-label`, takže se jí tohle pravidlo netýká. */
.dyn-back-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.btn-pink-back .ti{font-size:14px}
/* Ikonová šipka je čtvercová, ne pilulka s textem. */
.btn-pink-back:has(> .dyn-back-label:only-of-type),.js-back-arrow,.btn-back-ikona{padding:5px 8px}
/* AKČNÍ IKONY V ŘÁDKU (16. 10. 2026, Mojmír: „na NTB strašně malé… distribuci máme 45+"): 20 px
   a plocha pro klik 28 px — vejde se do `--sl-ikona` (32 px), šířky sloupců se nemění. */
.icon-edit,.icon-del,.icon-info{background:none;border:none;cursor:pointer;padding:4px;display:inline-flex;
  align-items:center;justify-content:center;font-size:20px;flex-shrink:0;line-height:1;transition:opacity .12s}
/* CRM Fáze D+ — Zprávy (messenger dvoupanel). */
.zpr-wrap{display:flex;height:calc(100vh - 180px);min-height:420px;border:1px solid var(--b1);border-radius:14px;overflow:hidden;background:var(--bg1)}
.zpr-list{flex:0 0 300px;border-right:1px solid var(--b1);overflow-y:auto;background:var(--bg2)}
/* Postranní panel Messengeru = hledání + seznam. Šířku/rámeček přebírá panel, vnitřní
   .zpr-list už jen scrolluje (klientská verze bez hledání používá .zpr-list napřímo). */
.zpr-side{flex:0 0 300px;min-width:0;border-right:1px solid var(--b1);background:var(--bg2);display:flex;flex-direction:column;min-height:0}
.zpr-side .zpr-list{flex:1 1 auto;border-right:none;background:none;min-height:0}
.zpr-list-item{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--b1);transition:background .1s}
.zpr-list-item:hover{background:var(--bg1)}
.zpr-list-item.on{background:var(--bg1);box-shadow:inset 3px 0 0 var(--fs-pink)}
.zpr-main{flex:1;display:flex;flex-direction:column;min-width:0}
.zpr-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--t3);font-size:var(--fs-body)}
.zpr-thread-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--b1);flex-shrink:0}
.zpr-thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:9px}
.zpr-composer{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-top:1px solid var(--b1);flex-shrink:0}
.zpr-readonly{display:flex;align-items:flex-start;gap:8px;padding:12px 14px;border-top:1px solid var(--b1);flex-shrink:0;color:var(--t3);font-size:var(--fs-body-sm);line-height:1.5}
.zpr-readonly i{font-size:15px;flex:0 0 auto;margin-top:1px}
.zpr-readonly a{color:var(--fs-pink);font-weight:500}
.zpr-input-row{display:flex;align-items:flex-end;gap:8px}
.zpr-input-row textarea{flex:1;background:var(--bg2);border:1px solid var(--b2);border-radius:18px;padding:9px 15px;font-size:12.5px;color:var(--t1);font-family:inherit;resize:none;outline:none;line-height:1.5;max-height:120px;box-sizing:border-box}
.zpr-send{border-radius:50%;width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.row-actions img{display:block}
/* ── SDÍLENÉ OVLÁDACÍ PRVKY VE VIZUÁLU APLIKACE (30. 9. 2026, audit ve WebKitu G1–G9) ─────────
   Safari kreslí zaškrtávátka, pole pro soubor a datum systémově a barvy aplikace ignoruje;
   Chrome je z velké části respektuje, proto se to v náhledu neukázalo. Platí pro celou
   aplikaci (holver i Studio) — barvy jen z tokenů, takže holverový vzhled je dostane sám. */
/* BUŇKA S AKCEMI. `<td class="row-actions">` — flex by z buňky udělal blok, přestala by být
   buňkou tabulky a ikona by ujela k hornímu okraji řádku. Buňka zůstává buňkou, obsah se
   řadí vedle sebe a svisle na střed (formulář s košem je jinak blok a spadl by pod tužku). */
td.row-actions{display:table-cell;vertical-align:middle;text-align:right;white-space:nowrap}
td.row-actions>*{vertical-align:middle}
td.row-actions>form{display:inline-block}
td.row-actions>*+*{margin-left:4px}
/* OKNO PŘES OBRAZOVKU. Overlay roluje sám a okno uvnitř je na středu, jen když se vejde —
   `safe center` ho u delšího obsahu srovná nahoru, takže nadpis jde vždycky doscrollovat
   (holé `center` ho vytlačilo nad horní okraj, kam posun nedosáhne). Starší prohlížeč
   `safe` nezná a zůstane u `flex-start` — nahoře, ale celé. `display` řídí inline styl
   (skryto) a JS (`style.display='flex'`), třída ho nenastavuje. */
.dp-okno{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);overflow-y:auto;
  align-items:flex-start;align-items:safe center;justify-content:center;justify-content:safe center;overscroll-behavior:contain}
/* ZAŠKRTÁVÁTKO A PŘEPÍNAČ. Vlastní vzhled: rámeček `--b3`, vybrané = výplň akcentem a značka
   v `--on-accent` (v holveru limetka s tmavou značkou, ve světlém olivová s bílou). */
input[type="checkbox"],input[type="radio"]{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  box-sizing:border-box;border:1.5px solid var(--b3);background:var(--bg1);border-radius:4px;
  display:inline-grid;place-content:center;vertical-align:-3px;cursor:pointer;flex-shrink:0;
  transition:background .12s,border-color .12s}
input[type="radio"]{border-radius:50%}
input[type="checkbox"]:hover,input[type="radio"]:hover{border-color:var(--fs-pink)}
input[type="checkbox"]:checked,input[type="radio"]:checked,input[type="checkbox"]:indeterminate{background:var(--fs-pink);border-color:var(--fs-pink)}
input[type="checkbox"]:checked::before{content:"";width:8px;height:4px;border:solid var(--on-accent);
  border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
input[type="checkbox"]:indeterminate::before{content:"";width:8px;height:2px;background:var(--on-accent)}
input[type="radio"]:checked::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--on-accent)}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(var(--accent-rgb),.3)}
input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:.45;cursor:default}
/* POLE PRO SOUBOR. `enhanceFileInputs` (studio.js) vedle pole postaví tlačítko `.btn-sec`
   s českým textem a název vybraného souboru; samotné pole zůstává ve formuláři (odesílá se,
   hlásí `required`), jen neviditelně. Pravidlo pro tlačítko prohlížeče je záloha pro pole,
   které se obalit nestihlo. */
.file-pick{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;position:relative;vertical-align:middle}
.file-pick>.btn-sec{flex:0 0 auto;height:34px;box-sizing:border-box;padding-top:0;padding-bottom:0;white-space:nowrap}
.file-pick-nazev{font-size:12px;color:var(--t1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-pick-nazev.prazdne{color:var(--t3)}
.file-pick:has(>input:disabled)>.btn-sec{opacity:.5;cursor:default}
.file-pick>input[type="file"]{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;padding:0;border:0}
input[type="file"]::-webkit-file-upload-button{font:inherit;font-size:12px;color:var(--t1);background:var(--bg2);border:1px solid var(--b2);border-radius:8px;padding:6px 12px;margin-right:10px;cursor:pointer}
input[type="file"]::file-selector-button{font:inherit;font-size:12px;color:var(--t1);background:var(--bg2);border:1px solid var(--b2);border-radius:8px;padding:6px 12px;margin-right:10px;cursor:pointer}
/* DATUM. Písmo a číslice jako zbytek formuláře. Prázdné pole Safari vyplňuje DNEŠKEM
   (šedě, ale čte se jako hodnota) — dokud v poli není hodnota ani kurzor, jeho text se
   nekreslí. Chrome i Firefox místo toho ukazují „dd.mm.rrrr", to lež není, proto jen WebKit
   (`-apple-system-body` zná jen on). Skrývá se průhledností, ne barvou: číslice prázdných
   dílů mají v Safari vlastní barvu zástupného textu a barvu rodiče nedědí (ověřeno snímkem). */
input[type="date"]{font-family:inherit;font-variant-numeric:tabular-nums}
input[type="date"]::-webkit-datetime-edit{padding:0}
input[type="date"]::-webkit-date-and-time-value{text-align:left}
@supports (font:-apple-system-body) and (not (-moz-appearance:none)){
  input[type="date"].input-empty:not(:focus)::-webkit-datetime-edit{opacity:0}
}
/* ODKAZ BEZ TŘÍDY. Výchozí modrá a fialová „navštívená" prohlížeče do aplikace nepatří —
   odkaz je akce, nese akcent. `:where` = nulová váha, takže každá třída s vlastní barvou
   (tlačítko, ikona, položka menu) vyhraje. */
:where(a){color:var(--fs-pink);text-decoration:none}
:where(a:not([class]):hover){text-decoration:underline}
/* ŠTÍTKY SEKTORŮ A REGULACE + BARVY GRAFŮ ANALYTIKY (30. 9. 2026, G7/G8). Dřív pevné hexy
   v C# (paleta Studia i v holveru, ve světlém motivu kontrast textu štítku 1,8 : 1). C# teď
   píše `var(--sek-…)` / `var(--kat-…)`, podklad štítku dělá `color-mix` z téže barvy (18 %).
   Každá čtveřice je vybraná na kontrast textu k podkladu štítku ≥ 4,5 : 1. Holver: odstíny
   z palety manuálu (Riptide, Raspberry, Slate), limetka ne — ta je barva akcí. Kategorická
   paleta: barva odlišuje druh, nenese význam „dobře / špatně". Grafy analytiky nesou třídy
   `an-*` a pevný hex v atributu; tisková karta (bez studio.css) proto zůstává, jak byla. */
:root{
  --sek-poj:#34d399;--sek-pen:#a78bfa;--sek-inv:#60a5fa;--sek-banka:#facc15;--sek-stav:#4ade80;--sek-leas:#fb923c;--sek-ocp:#f472b6;
  --kat-poj:#C77DDB;--kat-inv:#42A5F5;--kat-zsu:#F5A623;--kat-pen:#3DD68C;--kat-obec:#3fb5b5;
  --graf-a:#2196F3;--graf-b:#3DD68C;--graf-st:#E5342A;--graf-kv-ok:#34C759;--graf-kv-pozor:#E8830C}
body.light{
  --sek-poj:#065F46;--sek-pen:#6D28D9;--sek-inv:#1D4ED8;--sek-banka:#854D0E;--sek-stav:#166534;--sek-leas:#9A3412;--sek-ocp:#BE185D;
  --kat-poj:#7B1FA2;--kat-inv:#0D47A1;--kat-zsu:#8A5A00;--kat-pen:#166534;--kat-obec:#115E59}
body.skin-holver{
  --sek-poj:#FF6FA8;--sek-pen:#8FEDD3;--sek-inv:#7FC8E8;--sek-banka:#F2C46D;--sek-stav:#C3B4F0;--sek-leas:#F5A06B;--sek-ocp:#B8D4DE;
  --kat-poj:#FF6FA8;--kat-inv:#7FC8E8;--kat-zsu:#F2C46D;--kat-pen:#8FEDD3;--kat-obec:#A3B1B6;
  --graf-a:#8FEDD3;--graf-b:#7A8C92;--graf-st:#F9348A;--graf-kv-ok:#8FEDD3;--graf-kv-pozor:#F2C46D}
body.skin-holver.light{
  --sek-poj:#B0155E;--sek-pen:#0E6B55;--sek-inv:#185D75;--sek-banka:#8A5A00;--sek-stav:#5B3FA8;--sek-leas:#A8481A;--sek-ocp:#3F5E6B;
  --kat-poj:#B0155E;--kat-inv:#185D75;--kat-zsu:#8A5A00;--kat-pen:#0E6B55;--kat-obec:#4E5B60;
  --graf-a:#12876B;--graf-b:#7A8C92;--graf-st:#D4206F;--graf-kv-ok:#12876B;--graf-kv-pozor:#B26A00}
/* ZVÝRAZNĚNÁ HODNOTA (G11). Hodnota není akce: ve Studiu ji nese akcent (růžová), v holveru
   by to byla limetka — barva tlačítek — a na černé by se četla jako výzva ke kliknutí. Holver
   zvýrazňuje hodnotu plnou barvou textu (a tučností u prvku). Token se deklaruje na body,
   ať se `var(--t1)` vyhodnotí v motivu, který na body platí. */
:root{--hodnota:#E91E8C}
body.skin-holver{--hodnota:var(--t1)}
svg .an-a{fill:var(--graf-a)} svg .an-b{fill:var(--graf-b)} svg .an-st{fill:var(--graf-st)}
svg .an-a-cara{stroke:var(--graf-a)} svg .an-kv-ok{fill:var(--graf-kv-ok)} svg .an-kv-pozor{fill:var(--graf-kv-pozor)}
.an-a-bg{background:var(--graf-a)!important} .an-b-bg{background:var(--graf-b)!important} .an-st-bg{background:var(--graf-st)!important}
/* Holver značka "h" jako malá ikona: asymetrický tvar má opticky těžiště níž než geometrický střed
   boxu, takže i po flex-vystředění vypadá "nízko" — proto JAKO JEDINÁ dostává drobný posun nahoru.
   Nikde jinde translateY nepoužívat (font ikony ho nepotřebují). height/width sjednoceno tady. */
.holver-ico{height:17px;width:auto;flex-shrink:0;transform:translateY(-2px)}
/* 2026-07-08 — inline-flex, ne flex: samotné tlačítko musí být na řádku vedle sousedního (bez
   obalového flex divu, typicky v holé <td>/<form style="display:inline">, viz Nástroje/Produkty/
   Instituce), flex by ho udělalo blokovým a další tlačítko by spadlo pod něj — zjištěno a
   opraveno 2026-07-08 (Nástroje), platí ale plošně napříč appkou. */
.icon-edit{color:var(--gr)}
.icon-del{color:var(--rd)}
/* Tlačítko "přidat záznam" (Zdroje — Příjmy/Výdaje) — větší a zelené, ať je na první pohled
   jasné, že se sem dá něco přidat (dřív stejná tlumená velikost/barva jako edit/del ikony
   vedle jednotlivých řádků, "zaniklo to", 2026-07-06). */
.icon-add{background:none;border:none;cursor:pointer;color:var(--gr);font-size:24px;padding:2px;
  display:flex;align-items:center;line-height:1;transition:opacity .12s}
.icon-add:hover{opacity:.75}
/* "Co kdyby" posuvník na kartě cíle/rezervy (2026-07-12) — accent-color pokrývá dráhu i palec
   nativního range inputu v obou tématech (color-scheme na :root/body.light řeší zbytek),
   žádné vlastní pseudo-elementy nejsou potřeba. */
.wi-slider{width:100%;accent-color:var(--fs-pink);cursor:pointer;height:18px;margin:0;display:block}
/* Zvětšený nadpis karty (Zdroje — Příjmy/Výdaje) a řádky uvnitř, aby obsah nezanikal vedle
   zbytku stránky (2026-07-06) — modifikátor k `.ct`, ne změna základní třídy (ta se používá
   na desítkách jiných menších karet v appce, kde je současná velikost správná). */
/* Nadpis karty/záznamu — jméno cíle, Příjmy/Výdaje na Zdrojích, Přebytek/Nedostatek — jedna
   proměnná (--fs-section-title), aby šly příště doladit najednou, ne po jednom. `.sec-title`
   pro samostatný text (bez ikony), `.ct-lg` jako modifikátor k `.ct` (ikona+text v `.ch` hlavičce
   karty) — obě čtou stejnou proměnnou, takže zůstávají vizuálně identické. */
.sec-title{font-size:var(--fs-section-title);font-weight:600;color:var(--t1)}
.ct-lg{font-size:var(--fs-section-title);font-weight:600}
.rz-row{font-size:var(--fs-body)}
/* Modrá — vyhrazeno pro akce, které volají vnější/API zdroj dat (cenová mapa, budoucí Holver
   apod.), ať je vizuálně na první pohled jasné, že tlačítko sahá mimo appku, ne jen edituje lokální pole. */
.icon-info{color:#2196F3}
.icon-edit:hover,.icon-del:hover,.icon-info:hover{opacity:.7}
/* Jednotný vzor "sekce s nadpisem" pro edit formuláře v celé appce (poprvé sjednoceno na detailu
   osoby, 2026-07-06) — nadpis (ikona+text) vždy stejnou mezerou k prvnímu poli, pole uvnitř
   sekce vždy stejnou mezerou k sobě navzájem. Mezera MEZI sekcemi (jiný koncept, ne pole téže
   sekce) se řeší samostatně přes `.det-block` (oddělovací linka), ne přes tento gap — jinak by
   se mezery sčítaly a sekce by opticky "plavaly" v nekonzistentních vzdálenostech od nadpisu.
   Použít vždy, když formulář má víc než jednu logickou skupinu polí pod jedním nadpisem. */
.det-sec-title{font-size:12px;font-weight:500;color:var(--t2);margin-bottom:8px;display:flex;align-items:center;gap:4px}
.det-sec-title i{font-size:var(--fs-body)}
/* Akce vpravo v nadpisu sekce (historie + Změnit). Výška nula, ať tlačítko nezvedne nadpis —
   jinak se pole levé a pravé půlky formuláře rozjedou o 19 px (28. 9. 2026). */
.sec-akce{margin-left:auto;display:flex;align-items:center;gap:8px;height:0;overflow:visible}
.det-sec-body{display:flex;flex-direction:column;gap:8px}
.det-block{border-top:1px solid var(--b1);padding-top:14px;margin-top:14px}
/* Neaktivní varianta koše (hlavní kontakt domácnosti nelze smazat) — vizuálně zůstává na svém
   místě pro symetrii řádku, jen bílá/tlumená a bez kurzoru, ať je jasné, že akce není k dispozici. */
.icon-del.icon-del-disabled{color:var(--t3);cursor:default}
.icon-del.icon-del-disabled:hover{opacity:1}
/* Klikací fotka majetku — overlay "změnit" se ukáže při hoveru (celá plocha), "odebrat" je
   trvale malé × v rohu, jen když foto existuje. */
.asset-photo-box .asset-photo-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:transparent;font-size:20px;transition:background .15s,color .15s}
.asset-photo-box:hover .asset-photo-overlay{background:rgba(0,0,0,.45);color:#fff}
.asset-photo-box .asset-photo-remove{position:absolute;top:3px;right:3px;width:18px;height:18px;
  border-radius:50%;background:rgba(0,0,0,.55);border:none;cursor:pointer;color:#fff;
  font-size:11px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.asset-photo-box:hover .asset-photo-remove{opacity:1}
/* Tenčí linka: skryjeme glyf z ikonového fontu a nahradíme SVG maskou s obtahem 1.7 (dřív 1.3 — na displeji
   notebooku byla tužka a koš skoro nečitelné, Mojmír 16. 10. 2026) */
.icon-edit i.ti-pencil,.icon-del i.ti-trash{
  display:inline-block;width:1em;height:1em;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
}
.icon-edit i.ti-pencil::before,.icon-del i.ti-trash::before{content:'';}
.icon-edit i.ti-pencil{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}
.icon-del i.ti-trash{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}
.card{background:var(--bg1);border:1px solid var(--b1);border-radius:12px;padding:16px;
  transition:background .25s}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
/* Titulek karty patří VEDLE své ikony, ne na druhý konec hlavičky. `space-between` výš je kvůli
   kartám, které mají vpravo ještě hodnotu nebo tlačítko — jenže u hlavičky složené jen z ikony
   a titulku roztáhlo obojí k okrajům a název karty se octl v pravém rohu. `margin-right:auto`
   drží titulek u ikony a případný třetí prvek odsune doprava, takže obě varianty sedí. */
.ch > .ct{margin-right:auto}
.ch > .ct-ico + .ct{margin-left:8px}
.ct{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--t1)}
.ct i{font-size:14px;color:var(--t3)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* KARTY V ŘÁDKU: STEJNĚ ŠIROKÉ A STEJNĚ VYSOKÉ (10. 10. 2026, uživatel). Řádek karet je 1, 2 nebo
   4 STEJNÉ sloupce — `1fr` bez `minmax(0,…)` nechá širší obsah sloupec roztáhnout (přehled
   prodejce: 415 × 707 px). Rámy s výčtem v jednom řádku mají stejnou výšku: kde je víc, ten se
   natáhne, kde míň, zůstane volné místo. Karta uvnitř obalu (dotahovaný blok `data-lazy-url`)
   vyplní celou buňku a v bloku `.vblocks` se natáhne poslední rám. Řádek karet se proto
   nezarovnává `align-items:start`. */
.row2>div>.card:only-child,.mets>div>.met:only-child{height:100%;box-sizing:border-box}
.row2>.vblocks>.vblock:last-child{flex:1 1 auto}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
/* Zásobník dlaždic (2026-07-30) — jedna mřížka pro celý poradcovský dashboard, ať si uživatel
   může dlaždice libovolně poskládat. Šířka podle katalogu: 1 = číslo, 2 = karta, 4 = graf. */
.dash-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* Dlaždice v jednom řádku dashboardu jsou stejně vysoké (10. 10. 2026) — karta v obalu vyplní buňku. */
.dash-grid>div>:is(.card,.met):only-child{height:100%;box-sizing:border-box}
.dash-grid > .sp2{grid-column:span 2}
.dash-grid > .sp4{grid-column:span 4}
.dash-grid > * > .card{margin-bottom:0}
.dash-grid > *{min-width:0}
@media(max-width:1100px){
  .dash-grid{grid-template-columns:repeat(2,1fr)}
  .dash-grid > .sp4{grid-column:span 2}
}
@media(max-width:700px){
  .dash-grid{grid-template-columns:1fr}
  .dash-grid > .sp2,.dash-grid > .sp4{grid-column:span 1}
}
/* Nabídka dlaždic v modalu — vybrané nahoře (s pořadím a šipkami), zbytek jako zásobník. */
.tile-pick{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--b1);
  border-radius:9px;background:var(--bg2);margin-bottom:6px}
.tile-pick .tp-main{flex:1;min-width:0}
.tile-pick .tp-label{font-size:12.5px;color:var(--t1)}
.tile-pick .tp-hint{font-size:10.5px;color:var(--t3);line-height:1.45}
.tile-pick .tp-size{font-size:var(--fs-label);color:var(--t3);border:1px solid var(--b1);border-radius:20px;
  padding:2px 7px;flex-shrink:0}
.tile-pick button{background:none;border:1px solid var(--b1);border-radius:7px;color:var(--t2);
  cursor:pointer;font-size:14px;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.tile-pick button:hover{color:var(--fs-pink);border-color:var(--fs-pink)}
.tile-pick button:disabled{opacity:.3;cursor:default}
.tile-group-title{font-size:10.5px;font-weight:600;color:var(--t3);text-transform:uppercase;
  letter-spacing:.5px;margin:14px 0 6px}
.mets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.met{background:var(--bg1);border:1px solid var(--b1);border-radius:12px;padding:13px 15px;
  transition:background .25s}
.ml{font-size:10.5px;color:var(--t3);margin-bottom:5px}
.mv{font-size:19px;font-weight:600;color:var(--t1)}.nt{color:var(--t3)}
.pill,.badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;display:inline-flex;align-items:center}
.ph2{background:rgba(var(--accent-rgb),.15);color:var(--fs-pink)}
.pw{background:var(--amd);color:var(--am)}
.pg{background:var(--grd);color:var(--gr)}
.pr{background:var(--rdd);color:var(--rd)}
.pn{background:rgba(135,188,209,.15);color:#87BCD1}
/* STAV V SEZNAMU = KOLEČKO (12. 10. 2026). Název stavu je v nápovědě, barvy mají v celé aplikaci
   týž význam (Services/Tecka.cs). Kdy kolečko a kdy pilulka s textem: docs/VZHLED.md §2. */
.tecka{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;vertical-align:middle;background:var(--t3)}
.tecka.t-ok{background:var(--gr)}
.tecka.t-pozor{background:var(--am)}
.tecka.t-chyba{background:var(--rd)}
.tecka.t-nove{background:#87BCD1}   /* jako info: barva značky (růžová ve Studiu) se pletla s červenou */
.tecka.t-info{background:#87BCD1}
.tecka.t-vyp{background:var(--t3)}
/* Pilulka jako tlačítko (např. „360" v Mých klientech) — vzhled pilulky, chování tlačítka. */
button.pill{border:0;cursor:pointer;font-family:inherit}
button.pill:hover{filter:brightness(1.15)}

/* ÚLOHY NA POZADÍ — řádek úlohy. Stavěno ze stejných dílů jako zbytek aplikace, ne ručně:
   radius 12 px jako celá card family, JEDNA velikost písma v bloku (význam nese barva, viz
   generální pravidlo) a stav je štítek `.badge`, ne obarvené slovo. Do 20. 9. 2026 to byl
   ručně stylovaný blok se třemi velikostmi (12,5 / 11 / 11 px) a radiusem 9 px — a protože
   se tentýž blok kreslí i v `studio.js`, byly ty odchylky rovnou dvě. */
.job-row{border:1px solid var(--b1);border-radius:12px;padding:10px 12px;background:var(--bg2)}
.job-row-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.job-title{font-size:var(--fs-body);color:var(--t1);font-weight:500}
.job-msg{font-size:var(--fs-body);color:var(--t3);margin-top:4px}
.job-bar{height:6px;background:var(--bg1);border-radius:4px;margin-top:8px;overflow:hidden}
.job-bar>i{display:block;height:100%;transition:width .3s}
.job-bar-gr>i{background:var(--gr)}
.job-bar-rd>i{background:var(--rd)}
.job-bar-am>i{background:var(--am)}
.job-bar-pink>i{background:var(--fs-pink)}
.job-bar-n>i{background:var(--t3)}
.goal{margin-bottom:12px}.goal:last-child{margin-bottom:0}
.ptab{font-size:10.5px;padding:3px 8px;border-radius:6px;cursor:pointer;color:var(--t3);
  background:transparent;border:none;font-family:inherit;transition:all .12s}
.ptab.on{background:rgba(var(--accent-rgb),.15);color:var(--fs-pink);font-weight:500}
.tabs-row{display:flex;gap:3px;background:var(--bg1);border:1px solid var(--b1);
  border-radius:10px;padding:4px;width:fit-content}
/* SEGMENTOVANÝ PŘEPÍNAČ uvnitř karty/okna (VZHLED §5): 12px, 6px 14px, radius 8. Aktivní = třída `on`. */
.tab-btn{font-size:12px;padding:6px 14px;border-radius:8px;border:none;background:none;cursor:pointer;
  color:var(--t2);font-family:inherit;font-weight:500}
.tab-btn.on{background:var(--fs-pink);color:var(--on-accent)}
/* FILTRY — fpill musí mít stejný přímý rodič */
/* Filtr nad seznamem — GENERÁLNÍ: pilulky VŽDY začínají u levého okraje stránky (žádný levý margin),
   spodní mezera 10px. Nepřidávat inline margin, který by pilulky posunul (viz Smlouvy bug 2026-07-27). */
/* PILULKY SE OD NADPISU ODDĚLUJÍ — nesmí se do něj vlepit (21. 9. 2026). `.ph` nemá spodní
   mezeru, takže filtr hned pod podnadpisem `.ps` na něm doslova seděl. Mezera patří do
   TŘÍDY, ne inline na jednotlivé stránky — pořadí nadpis → podnadpis → pilulky → hledání
   je generální pravidlo aplikace a musí vypadat stejně všude. */
.filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.fpill{font-size:var(--fs-body-sm);padding:5px 12px;border-radius:20px;border:1px solid var(--b2);
  background:transparent;color:var(--t2);cursor:pointer;font-family:inherit;transition:all .12s}
.fpill.on{background:rgba(var(--accent-rgb),.15);color:var(--fs-pink);
  border-color:rgba(var(--accent-rgb),.3);font-weight:500}
.fpill:hover:not(.on){background:var(--bg2);color:var(--t1)}
/* VÝBĚR OBDOBÍ — jedna sdílená komponenta pro celou aplikaci: dvě rolety vedle sebe, NEJDŘÍV
   ROK, PAK MĚSÍC (uživatel 27. 9. 2026). Obě rolety mají VŠUDE STEJNOU PEVNOU ŠÍŘKU — v řádku
   hledání, ve filtru analytiky i ve formuláři; nepřizpůsobují se sloupci. Nová roleta období
   dostane třídu `of-rok` / `of-mesic`, žádnou vlastní šířku. */
.obdobi-filtr{display:flex;gap:6px;flex:none}
.ctrl-select.of-rok{width:84px !important;flex:0 0 84px;min-width:0}
.ctrl-select.of-mesic{width:118px !important;flex:0 0 118px;min-width:0}
/* Rozsah dat (od–do) v řádku hledání — dvě pole vedle sebe, stejně jako rolety období (Kniha pohybů). */
.ctrl-input.kniha-datum{flex:1 1 0;min-width:0;width:auto}
/* ŘÁDEK HLEDÁNÍ NAD SEZNAMEM — pole je přesně široké jako sloupec pod ním (27. 9. 2026).
   `.hledani` = nad MŘÍŽKOVÝM seznamem, jehož řádky mají mezeru 10 px a okraj 14 px (Prodejci,
   Konta, Legal…): stejná šablona, stejná mezera, stejný okraj + 1 px rámeček karty.
   `.hledani-tbl` = nad TABULKOU `.tbl`: šablona = procenta z `<colgroup>`, pole začíná na levé
   hraně sloupce a končí 10 px před pravou. V obou případech jedno pole = jeden sloupec, žádné
   `grid-column:span`. */
.hledani{display:grid;gap:10px;padding:0 15px;margin-bottom:8px;align-items:center}
.hledani>*{min-width:0;width:100%;margin:0 !important;box-sizing:border-box}
/* PRVNÍ POLE ZAČÍNÁ U LEVÉHO OKRAJE STRÁNKY, jako na všech ostatních seznamech (generální
   pravidlo o seznamech). Mřížka má kvůli sloupcům okraj 15 px, první pole ho proto přetáhne
   doleva a končí na konci svého sloupce; další pole zůstávají nad svými sloupci. */
.hledani>:first-child{margin-left:-15px !important;width:calc(100% + 15px)}
.hledani-tbl{display:grid;padding:0;margin-bottom:8px;align-items:center}
/* JEDNA MEZERA 16 px: podnadpis → pilulky → hledání → seznam (uživatel 27. 9. 2026, „všude").
   Přímo na stránce ji dává mezera `.page`/`.std-page`, takže řádky samy žádný okraj nemají; v
   odloženém těle stránky nebo ve formuláři hledání mezera stránky není a řádek má 16 px sám.
   `!important` přebíjí staré inline `margin-bottom:8px` u řádků hledání. */
.hledani,.hledani-tbl,.hledani-radek,.an-filtr{margin-bottom:16px !important}
/* FILTR ANALYTIKY = MŘÍŽKA KARET POD NÍM (12. 10. 2026): čtyři stejné sloupce s mezerou jako
   `.mets`, rolety vyplní svůj sloupec; rok + měsíc drží standardní šířku v prvním sloupci. */
.an-filtr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:center}
.an-filtr>select,.an-filtr>details,.an-filtr>.an-dvojice{width:100%;min-width:0}
.an-filtr>details>summary{width:100%;box-sizing:border-box}
.an-dvojice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.an-dvojice>input{width:100%;min-width:0}
.an-popis{font-size:12px;color:var(--t3);text-align:right;min-width:0}
.an-pod{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:16px}
@media(max-width:1100px){.an-filtr{grid-template-columns:repeat(2,minmax(0,1fr))}}
.page>.hledani,.page>.hledani-tbl,.page>.hledani-radek,.page>.filter-row,
.std-page>.hledani,.std-page>.hledani-tbl,.std-page>.hledani-radek,.std-page>.filter-row{margin-top:0 !important;margin-bottom:0 !important}
.hledani-tbl>*{min-width:0;margin:0 10px 0 0 !important;box-sizing:border-box}
/* PSANÍ DO HLEDÁNÍ NESMÍ PŘEPOČÍTAT SEZNAM POD NÍM (28. 9. 2026). Pole má pevnou výšku i šířku
   (mřížka), takže mu jde vzít vliv na okolí: každý znak pak přepočítá jen samotné pole, ne stránku
   s tisícovkou řádků. Hledá se dál na Enter (pravidlo 20). */
.hledani>input,.hledani-tbl>input{contain:size layout style}
/* Bordered "druhý rámeček" pro seznamy bez záložek (Osoby, Šanon). Filtruje se pilulkami nahoře
   (.filter-row/.fpill), sjednoceně u klienta i poradce — Šanon dřív míval rejstříkové „taby"
   (.sanon-tab*), zrušeny 2026-08-10 kvůli shodě s poradcovským seznamem Smluv. */
.sec-frame{border:1px solid var(--b2);border-radius:12px;background:var(--bg1);
  padding:18px;display:flex;flex-direction:column;gap:10px}
/* PORTFOLIO — grafy jako čtvercové dlaždice, VŽDY 2 na šířku stránky (2026-07-06 — dřív
   auto-fit s minmax(260px) napasoval 3-4 dlaždice na širokou obrazovku, uživatel chtěl pevně 2,
   ne "kolik se vejde"). Pod 640px (mobil) spadne na 1 sloupec, ať se dlaždice nezmenší k nečitelnosti. */
/* Dlaždice Portfolia jsou od 2026-07-06 OBDÉLNÍKY (poloviční výška čtverce, rozděleno
   horizontálně) — dřív čtverec (aspect-ratio:1) zabíral zbytečně mnoho výšky u historického
   grafu i koláčů, uživatel chtěl kompaktnější "na půl". Kompozice portfolia (dle cenného
   papíru/teritoria/třídy aktiv) prošla od té doby ještě 2 redesignmi (koláč → horizontální
   pruhy → svislý barevně rozpadlý sloupec, viz `.bar-list`/`.bar-row` a inline markup v
   Index.cshtml) — `.pf-tile-pie`/`.pf-pie-legend*` třídy z mezikroku byly už nepoužívané,
   smazány 2026-07-06 při čištění kódu před uploadem na GitHub. */
/* Pokyny (Portfolio, klient) — tabulkové zobrazení transakce (2026-07-10, uživatel: "zobrazit
   lépe, více tabulkově, v pomyslných sloupcích") — nahrazuje dřívější flex-wrap řádek se štítky
   před každou hodnotou. Sloupce fixní šířkou (appka to má i jinde v appce — Produkty/Instituce),
   `.pf-ord-row` sdílí STEJNÝ `grid-template-columns` jako hlavička, ať appka nemusí ladit dva
   nezávislé výčty šířek. `overflow-x:auto` na obalu (níž) místo zmenšování obsahu na užší
   obrazovce. */
/* 2026-07-12 — doplněn 11. sloupec (ikony tužka/koš), min-width zvýšeno o jeho šířku + gap. */
/* 2026-07-12 — poslední sloupec (ikony tužka/koš) byl pevných 64px, a všech 11 sloupců grid je
   fixní px bez jediného `fr` — grid proto skutečnou šířku karty vůbec nevyplnil (zbylo prázdné
   místo vpravo) a ikony seděly uprostřed toho volného místa, ne u pravého okraje, jak appka má
   na ostatních tabulkách (Osoby/Uživatelé apod. mají poslední sloupec `fr`/`var(--col-icons-2)`
   uvnitř jinak flexibilní `grid-template-columns`, takže se stejný problém tam nevyskytuje).
   Poslední sloupec je teď `1fr` — vyplní zbývající prostor, ikonový `<div>` uvnitř má už dřív
   `justify-content:flex-end`, takže ikony teď doopravdy sedí u pravého okraje tabulky. */
/* 12. 10. 2026 — Zbývá („3,1349 z 3,1349") se do 84 px nevešlo a přepisovalo Hodnotu: 84 → 120, Typ 84 → 70. */
.pf-ord-grid{display:grid;grid-template-columns:74px 70px 90px 84px 96px 120px 100px 100px 130px 80px 1fr;gap:8px;min-width:1032px}
.pf-ord-hdr{font-size:9.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--t3);padding:0 0 6px;border-bottom:1px solid var(--b2)}
.pf-ord-hdr>div,.pf-ord-row>div{display:flex;align-items:center}
.pf-ord-row{font-size:12px;padding:7px 0;border-bottom:1px solid var(--b1)}
.pf-ord-num{justify-content:flex-end;text-align:right}
/* 2026-07-19 (T9 bod 4, à la Monery) — Výkonnost pozic + Realizované obchody na Portfoliu */
/* 9 sloupců (2026-07-21) — bez „Kupní hodnoty" a bez krátkých období; poslední sloupce v `fr`,
   aby se tabulka vešla na šířku obrazovky bez vodorovného posuvníku. */
.pf-perf-grid{display:grid;grid-template-columns:minmax(120px,1.6fr) minmax(70px,.9fr) minmax(90px,1.1fr) minmax(105px,1.3fr) minmax(62px,.8fr) minmax(62px,.8fr) minmax(80px,1fr) minmax(70px,.9fr) minmax(72px,.9fr);gap:8px;align-items:center}
.pf-perf-grid>span{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-perf-grid>span:first-child{text-align:left}
.pf-perf-hdr{font-size:9.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--t3);padding:0 0 6px;border-bottom:1px solid var(--b2)}
.pf-perf-row{font-size:12px;padding:7px 0;border-bottom:1px solid var(--b1);color:var(--t1)}
/* Rizika a krytí (editor obchodu, záložka) — 2026-07-11, stejný tabulkový vzor jako appka
   zavedla u Pokynů (`.pf-ord-*`) o kus výš — appka sjednocuje seznamy napříč aplikací na
   "hlavička + řádky se stejnou šířkou sloupců", ne inline text s dvojtečkami. */
.cov-grid{display:grid;grid-template-columns:1.4fr 1.4fr 1fr 40px;gap:8px}
.cov-hdr{font-size:9.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--t3);padding:0 0 6px;border-bottom:1px solid var(--b2)}
.cov-hdr>div,.cov-row>div{display:flex;align-items:center}
.cov-row{font-size:12px;padding:7px 0;border-bottom:1px solid var(--b1)}
.pf-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.pf-tiles{grid-template-columns:1fr}}
/* T39 — jedna mřížka konfigurovatelných dlaždic Portfolia: půlené dlaždice (grafy/rozpady) +
   full-width přes obě půlky (KPI pás, tabulka Detail). Pořadí řídí uživatel (PortfolioCatalog). */
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:start}
.pf-grid > .pf-span{grid-column:1 / -1}
.pf-grid > *{min-width:0}
@media (max-width:640px){.pf-grid{grid-template-columns:1fr}.pf-grid > .pf-span{grid-column:1}}
/* Pevná výška, ne `aspect-ratio` (2026-07-07, uživatel: "grafy na stránce portfolio musí být
   stejně vysoké") — `aspect-ratio:2` na historii vs. `aspect-ratio:auto`+`min-height:180px` na
   rozpadech dávalo dvě různé výšky podle šířky sloupce/obsahu. Jedna pevná hodnota platí pro
   VŠECH 6 dlaždic (historie + 5 rozpadů) bez ohledu na obsah. */
.pf-tile{height:280px;display:flex;flex-direction:column;overflow:hidden}
.pf-tile-chart{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
/* Rozpad portfolia jako tabulka: graf / legenda / částka / % (2026-07-12, uživatel: "v podstatě
   šablona tabulky, kde v prvním sloupci graf, ve druhém legenda, ve třetím částky a čtvrtém
   procenta"). Nahrazuje dřívější "jeden svislý vícebarevný sloupec + textová legenda" (appka to
   měla ve 4 nezávislých C# implementacích — Index.cshtml ×2/PfCompositionTileHtml+
   AdvCompositionTileHtml, _NeedReportBody.cshtml/RenderVerticalComposition, LifePlan.cshtml/
   StackedColumnHtml — appka nemá jak sdílet Razor kód mezi appkou a PDF výstupy, ale sdílením
   TĖCHTO tříd napříč všemi čtyřmi appka zaručí, že se jakákoli budoucí vizuální úprava propíše
   všude najednou, i když C# kód sám zůstává duplicitní). Každá kategorie (země/třída aktiv/typ
   nástroje/...) je teď VLASTNÍ řádek s malým vodorovným pruhem místo úseku sdíleného sloupce. */
/* Struktura portfolia (Index.cshtml PfCompositionTileHtml) + Zdroje/Portfolio v PDF
   (StackedColumnHtml) — svislý barevně rozpadlý sloupec + legenda vpravo (2026-07-13 vráceno,
   uživatel: "sloupcový graf jako v PDF" — appka byla mezitím omylem přepsaná na vodorovné pruhy).
   `.lp-bar-*` prefix = PDF varianta (světlý motiv), `.bar-*` = živá appka; sdílená definice. */
.lp-bar-list,.bar-list{display:flex;flex-direction:column;gap:8px}
.lp-bar-row,.bar-row{display:flex;align-items:center;gap:10px;font-size:12px}
.lp-bar-row .lbl,.bar-row .lbl{flex:0 0 140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1);font-weight:500}
.lp-bar-row .val,.bar-row .val{flex-shrink:0;min-width:44px;text-align:right;font-weight:600;color:var(--t2)}
/* Krátké zvýraznění právě uložené/upravené karty (Šanon je jeden dlouhý seznam bez stránkování —
   bez tohoto by nová karta zapadla uprostřed a vypadalo by to, že se uložení nezdařilo). */
.sm-card-flash{animation:smCardFlash 2.2s ease-out}
@keyframes smCardFlash{
  0%{box-shadow:0 0 0 3px var(--fs-pink);background:rgba(var(--accent-rgb),.1)}
  100%{box-shadow:0 0 0 0 transparent;background:transparent}
}
/* Pozadí — bílá (var(--bg1)) je zavedená konvence pro VŠECHNY formulářové prvky v appce (uživatel:
   "bílou máme na všech ostatních formulářích, mělo by to být jednotné", 2026-07-06). Oprava z
   téhož dne šla omylem opačným směrem (sladila `.ctrl-select` na šedou `.ob-input`, ne naopak) —
   správně je to `.ob-input`, který má být bílý jako zbytek appky, ne `.ctrl-select`/`.ctrl-input`
   šedé. Viz oprava `.ob-input` níže. */
.ctrl-select,.ctrl-input{height:34px;box-sizing:border-box;background:var(--bg1);border:1px solid var(--b2);
  border-radius:8px;padding:0 10px;font-size:12px;color:var(--t1);outline:none;font-family:inherit}
/* 2026-09-30 — SAFARI KRESLÍ `appearance:auto` JAKO SYSTÉMOVÉ ŠEDÉ TLAČÍTKO a barvy appky ignoruje
   (Chrome je respektuje, proto se to v Preview neukázalo). Vlastní vzhled + šipka jako obrázek;
   seznam se stejně otevírá vlastní roletou (enhanceSelects). Šipka má neutrální šedou, sedí
   na tmavý i světlý podklad. */
/* 30. 9. 2026 — šipka má 10 px, odsazení 20 px jí stačí (dřív 28 px useklo popisek úzkých rolet
   v řádku hledání). Trojtečku Chrome u rolety nakreslí, Safari ji ignoruje a text jen ořízne
   PŘED šipkou — nevejde-li se popisek, je úzký sloupec hledání (šablona sloupců stránky). */
.ctrl-select{cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:20px;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A939B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:10px 6px}
.ctrl-input::placeholder{color:var(--t3)}
.ctrl-input:focus,.ctrl-select:focus{border-color:var(--fs-pink);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.15)}
/* 2026-07-09 — appka má desítky <input type="number"> napříč aplikací (převážně částky v Kč,
   ale i ks/roky/procenta) — nativní spinner šipky appka nikde nechce, u částky nikdo po korunách
   neklikne na +/-. Globální pravidlo pro VŠECHNY number inputy, ne per-pole — nová budoucí
   number input je automaticky bez šipek, nic dalšího není potřeba dodělávat. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield}
/* 2026-07-05: nativní OTEVŘENÁ nabídka <select> se v Safari na macOS řídí systémovým Light/Dark
   Mode vzhledem, ne CSS appky (color-scheme na ni nemá spolehlivý vliv) — proto "divná bílá
   roleta" uprostřed tmavé appky, i po nastavení color-scheme:dark výše. Řešení: JS (`enhanceSelects`
   v studio.js) přebírá otevření nabídky úplně — potlačí nativní popup a vykreslí vlastní seznam
   pod selectem, stylovaný stejně jako zbytek appky. ZAVŘENÝ select se nemění (jeho vzhled včetně
   zvolené hodnoty appka už stylovala správně, to nikdy nebyl problém) — jen OTEVŘENÝ seznam je
   teď 100 % v naší režii, funguje identicky ve všech prohlížečích. */
.csel-list{position:fixed;background:var(--bg1);border:1px solid var(--b2);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);max-height:260px;overflow-y:auto;z-index:3000;padding:4px;
  overscroll-behavior:contain;width:max-content;max-width:min(420px,calc(100vw - 16px));box-sizing:border-box}
/* GENERÁLNÍ PRAVIDLO (2026-08-02): rozbalená roleta, která se nevejde celá, MUSÍ mít VIDITELNÝ
   posuvník — jinak uživatel neví, že pod okrajem jsou další položky. macOS overlay scrollbary se
   schovávají, dokud se neposouvá, proto se barví explicitně přes `scrollbar-color` (palec/dráha).
   POZOR: `scrollbar-width` ani `scrollbar-color` se sem NESMÍ psát přímo — jakmile je Chrome
   vidí, PŘESTANE ctít `::-webkit-scrollbar` a posuvník spadne na 2px systémový overlay, který
   se navíc schovává (ověřeno měřením). Proto webkit napřímo a standardní vlastnost jen jako
   fallback pro prohlížeče bez webkit pseudo-elementů (Firefox).
   Platí pro VŠECHNY rolety: appka je vykresluje jedním mechanismem (`enhanceSelects` →
   `.csel-list`), takže tenhle jeden styl je pokrývá všechny. */
.csel-list::-webkit-scrollbar{width:10px}
.csel-list::-webkit-scrollbar-track{background:var(--bg2);border-radius:6px}
.csel-list::-webkit-scrollbar-thumb{background:var(--t3);border-radius:6px;min-height:34px}
.csel-list::-webkit-scrollbar-thumb:hover{background:var(--t2)}
@supports not selector(::-webkit-scrollbar){
  .csel-list{scrollbar-color:var(--t3) var(--bg2)}
}
/* GENERÁLNÍ PRAVIDLO (2026-08-08): posuvník VŽDY viditelný, ne macOS overlay jen na hover. Platí pro
   CELOU appku — každý scroll-kontejner (overflow:auto/scroll) dostane stálý posuvník. Styluje se
   VÝHRADNĚ ::-webkit-scrollbar; scrollbar-width/color jen ve @supports fallbacku pro Firefox (jinak
   Chrome shodí posuvník na 2px overlay — viz .csel-list past výše). Nový scroll-kontejner nic navíc
   nepotřebuje. */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg2);border-radius:8px}
::-webkit-scrollbar-thumb{background:var(--t3);border-radius:8px;min-height:34px;border:3px solid var(--bg2);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--t2);background-clip:padding-box}
::-webkit-scrollbar-corner{background:var(--bg2)}
@supports not selector(::-webkit-scrollbar){*{scrollbar-color:var(--t3) var(--bg2)}}
.csel-item{padding:7px 11px;font-size:12px;color:var(--t1);cursor:pointer;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csel-item:hover{background:var(--bg2)}
.csel-item.sel{color:var(--fs-pink);font-weight:500}
.csel-item.dim{color:var(--t3)}
/* VÍCEVÝBĚR (W18, 30. 9. 2026) — roleta se zaškrtávátky, kde SF má vícenásobný výběr (Kategorie
   a Stav obchodu v seznamu obchodů, `filterCategory`/`filterStage`). Zavřená vypadá jako
   `.ctrl-select` s počtem vybraných, otevřená jako `.csel-list`. Hledá se až při zavření
   (studio.js `_vicevyber`), ať jde vybrat víc položek bez překreslení seznamu po každé. */
.vicevyber{position:relative;min-width:0}
.vicevyber>summary{list-style:none;display:block;line-height:32px}
.vicevyber>summary::-webkit-details-marker{display:none}
.vicevyber-panel{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;max-width:min(420px,calc(100vw - 16px));box-sizing:border-box;
  background:var(--bg1);border:1px solid var(--b2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);
  max-height:260px;overflow-y:auto;z-index:3000;padding:4px;overscroll-behavior:contain}
.vicevyber-panel label{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:12px;color:var(--t1);
  cursor:pointer;border-radius:6px;white-space:nowrap}
.vicevyber-panel label:hover{background:var(--bg2)}
/* Karta producenta — řádek ve výběru (segment, producent). Barva, ne velikost. */
#page-analytika-producenti tr.pp-vybrany td{background:rgba(var(--accent-rgb),.12);color:var(--t1)}
/* Stránkování seznamu (jejich `enhancedTable`: „Stránka", „Na stránku"). */
.strankovani{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;font-size:12px;color:var(--t2)}
.strankovani .ctrl-input{width:64px}
.strankovani .ctrl-select{width:76px}
.csel-item.dim.sel{color:var(--fs-pink)}

/* 2026-07-25: dělení řádku VŽDY dělitelné 2 (2/4/6/8 sloupců), nikdy 3/5. Grid řádky
   doplňujících údajů jsou v HTML 1fr 1fr (poloviny). align-items:end = pole (input/select)
   navazuje na spodní hraně i když je label vlevo 2řádkový a vpravo 1řádkový → levá a pravá
   půlka řádkově sedí. */
#cw-extra-fields [data-group] > div[style*="grid"]{align-items:end}
/* 2026-07-27: totéž pro VŠECHNY field-páry v editoru smlouvy (záložka Parametry) — levý editbox
   musí lícovat s pravým i když se popisek vlevo/vpravo zalomí na jiný počet řádků (uživatel to
   opakovaně reklamoval: „řádek editboxu nalevo navazuje na editbox napravo"). Cílí jen field
   řádky (gap:12px), NE vnější 2-sloupcový grid sekcí (gap:0 24px, ten má align-items:start). */
#obchod-tab-parametry div[style*="grid-template-columns:1fr 1fr;gap:12px"]{align-items:end}
.csel-group-label{padding:6px 11px 3px;font-size:9.5px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.4px}
/* 2026-07-05: prázdné date/number inputy nesmí vypadat, jako by v nich byla zapsaná hodnota.
   color-scheme:dark (viz obecné pravidlo výše) přinutí prohlížeč vykreslit i nevyplněné
   "dd. mm. rrrr"/"0" segmenty stejně světlým textem jako reálně zadanou hodnotu, takže prázdné
   pole na první pohled vypadá vyplněné. :placeholder-shown NEfunguje na date/number inputy bez
   explicitního atributu placeholder (jejich "dd.mm.rrrr" hint není CSS placeholder, je to jen
   nativní vykreslení prázdného widgetu) — proto značíme prázdnost přes třídu `.input-empty`,
   nastavenou při renderu (Razor `value.HasValue`) a odstraněnou při `onchange`. `markEmptyInputs()`
   v studio.js navíc jednou při načtení stránky doplní tuto třídu i tam, kde se to řeší jen na
   `value=""` bez ruční Razor podmínky, ať se pravidlo neobchází při přidávání nových polí. */
/* 30. 9. 2026 — bez `opacity`: ztlumilo celé pole i s rámečkem a podkladem, takže prázdné datum
   vypadalo jako zakázané pole jiné barvy než sousední `.ctrl-input`. Ztlumí se jen text. */
.input-empty{color:var(--t3) !important}
/* Viditelné zvýraznění prázdného povinného pole při pokusu o odeslání (2026-07-06) — dřív se
   appka u drobných rychlo-formulářů (Rizika a krytí) spoléhala na tichou nativní HTML5 validaci
   prohlížeče (required), která se snadno přehlédne v kompaktním inline řádku a vypadá, jako by
   tlačítko "nedělalo nic". Třída se nastaví/odstraní v JS při pokusu o přidání řádku. */
.input-empty-error{border-color:var(--rd) !important;box-shadow:0 0 0 1px var(--rd)}
/* KANBAN — grid 5 sloupců na PLNOU šířku stránky (minmax(0,1fr) proti přetečení dlouhým obsahem) */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
#clients-grid{display:flex;flex-direction:column}
/* AKCE-ROW pro stránku akčního plánu */
.action-item-row{display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--b1);border-radius:12px;margin-bottom:10px;background:var(--bg1);transition:border-color .2s}
.action-item-row:hover{border-color:var(--b2)}
/* 2026-07-22 — poradcovský Akční plán má přes 120 nálezů napříč klienty; tam je řádek POLOŽKA
   SEZNAMU, ne karta. U klienta zůstává velký (má jich pár a jsou pro něj hlavní obsah stránky). */
#page-adv-akce .action-item-row{align-items:center;gap:10px;padding:8px 12px;margin-bottom:5px}
#page-adv-akce .action-item-icon{width:28px;height:28px;border-radius:8px;font-size:14px}
#page-adv-akce .action-item-body{margin-bottom:0}
#page-adv-akce .action-priority{margin-bottom:2px}
.action-item-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
/* OCHRANA — semafor po rizicích, řádek na subjekt (osoba/rezerva/majetek) */
.prot-list{display:flex;flex-direction:column}
.prot-row{display:flex;align-items:center;gap:18px;padding:17px 6px;border-bottom:1px solid var(--b1);flex-wrap:wrap}
.prot-row:last-child{border-bottom:none}
.prot-who{display:flex;align-items:center;gap:12px;width:190px;flex-shrink:0}
/* Zvětšeno 2026-07-06 na stejnou vizuální váhu jako karty Příjmy/Výdaje na Zdrojích (uživatel:
   "u Ochrany bych zvětšil osoby na stejnou velikost") — sdílené `.prot-*` třídy platí pro Osoby
   i Majetek na této stránce, obojí tedy zůstává vzájemně konzistentní. */
.prot-avatar{width:40px;height:40px;border-radius:10px;background:rgba(var(--accent-rgb),.12);color:var(--fs-pink);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.prot-who-name{font-size:15px;font-weight:500;color:var(--t1)}
.prot-who-role{font-size:var(--fs-body-sm);color:var(--t3)}
.prot-risks{display:flex;gap:10px;flex-wrap:wrap;flex:1;min-width:280px}
.prot-risk{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;cursor:default;position:relative}
.prot-risk-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;transition:background .2s,color .2s}
.prot-risk-pct{font-size:11px;font-weight:700}
.prot-risk-label{font-size:9.5px;color:var(--t3);text-align:center;line-height:1.15}
.prot-overall{width:58px;text-align:right;font-size:var(--fs-stat);font-weight:700;flex-shrink:0}
/* Vlastní (ne-nativní) tooltip u ikon rizik na Ochraně — appka nativní title="..." dřív měla
   funkční, ale nenápadný a malý; uživatel chtěl vizuálně dotáhnout do appky, ne jen spoléhat na
   OS tooltip. `.prot-risk-tip` je skrytá karta uvnitř `.prot-risk` (position:relative), zobrazí
   se na hover přes čisté CSS (žádný JS) — stejný "karta appky" vzhled jako `.card`. */
.prot-risk-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--bg1);border:1px solid var(--b1);border-radius:10px;padding:10px 14px;
  min-width:170px;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;
  transition:opacity .15s,transform .15s;z-index:50;text-align:left}
.prot-risk:hover .prot-risk-tip{opacity:1;transform:translateX(-50%) translateY(0)}
.prot-risk-tip-name{font-size:12.5px;font-weight:600;color:var(--t1);margin-bottom:6px;white-space:nowrap}
.prot-risk-tip-row{display:flex;justify-content:space-between;gap:14px;font-size:var(--fs-body-sm);padding:2px 0}
.prot-risk-tip-row span:first-child{color:var(--t3)}
.prot-risk-tip-row span:last-child{font-weight:600;color:var(--t1)}
.prot-risk-tip:after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--b1)}
/* 2026-07-08 — obecný jednořádkový stylovaný hint (appka má tenhle vzor už u .prot-risk-tip,
   tady je zjednodušená varianta bez tabulky uvnitř — jen celý text na jednom řádku). Používat
   místo nativního title="..." kdekoli appka zkracuje text elipsou a chce hint ve vlastním
   vizuálu, ne v OS tooltipu. `.hint-wrap` (position:relative, NE overflow:hidden — to má jen
   vnitřní `.truncate` element, jinak by hint byl useknutý) obaluje zkrácený text + `.hint-tip`. */
.hint-wrap{position:relative}
.hint-tip{position:absolute;top:calc(100% + 6px);left:0;background:var(--bg1);border:1px solid var(--b1);
  border-radius:8px;padding:7px 12px;white-space:nowrap;font-size:12px;font-weight:500;color:var(--t1);
  box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .12s;z-index:80}
.hint-wrap:hover .hint-tip{opacity:1}
/* 2026-07-31 — GENERÁLNÍ: hint je VŽDY ve vizuálu aplikace, nikdy nativní OS tooltip.
   `title="…"` je v appce na stovkách míst (ikony v seznamech, tlačítka, zkrácené texty) a
   prohlížeč ho kreslí systémovým bublinou, která nemá s appkou nic společného. `#app-tip`
   je jeden sdílený plovoucí hint (position:fixed mimo overflow karet, jako `#pf-hist-tip`),
   který JS naplní z `title` kteréhokoli prvku — viz `_initAppTooltips` ve studio.js.
   Vzhled je shodný s `.hint-tip`, aby nevznikly dva různé hinty. */
#app-tip{position:fixed;z-index:3000;display:none;pointer-events:none;background:var(--bg1);
  border:1px solid var(--b1);border-radius:8px;padding:7px 12px;max-width:280px;
  font-size:12px;font-weight:500;color:var(--t1);line-height:1.4;
  box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* 2026-07-25 — nápověda „i" u pole / nadpisu formuláře. Konvence: label je KRÁTKÝ (ideálně
   jednoslovný), delší vysvětlení NEpíšeme do formuláře jako text — dáme za label tohle kolečko
   a vysvětlení je v .hint-tip na najetí. `body.no-hints` (přepínač v Nastavení) je skryje pro
   uživatele, kteří appku znají. */
/* ── JEDNOTNÁ TABULKA SEZNAMU ──────────────────────────────────────────────────────────────
   Vzhled, který mají Instituce/Produkty/Nástroje. Do 2026-08-05 se opisoval inline do každé
   tabulky, takže seznamy uvnitř detailů (produkty instituce) skončily jako skládané karty bez
   hlavičky a bez řazení. Nová tabulka VŽDY `class="tbl"` — ne kopie stylů. Viz docs/VZHLED.md. */
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-body);table-layout:fixed}
table.tbl thead tr{background:var(--bg2);border-bottom:2px solid var(--b1)}
table.tbl th{padding:10px 14px;text-align:left;font-weight:500;color:var(--t2);font-size:12px}
/* Audit ve WebKitu 1. 10. 2026: v holverových seznamech se záhlaví zalamovalo na dva řádky
   („Datum podpisu", „Datum registrace", „Odeslat dokument k el. podpisu") a hlavička byla
   vyšší než u sousedních seznamů. Záhlaví je jeden řádek; co se nevejde, ořízne se. */
.skin-holver table.tbl th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Prázdný stav v tabulce („Žádné záznamy.") je řádek jako každý jiný — 47 px. Vnitřní odsazení
   z inline stylu ho natahovalo na 51–59 px. Jen vystředěná buňka přes celý řádek, tedy hláška. */
table.tbl tbody td[colspan][style*="text-align:center"]{padding-top:0!important;padding-bottom:0!important}
/* ── DVĚ TABULKY, OBĚ PEVNÁ VÝŠKA (uživatel 2026-08-06) ───────────────────────────────────────
   A) hlavní text + podtitul (řádky s avatarem) = 57 px  → viz `.list-a` níž
   B) jen hlavní text (datová tabulka .tbl)     = 47 px  → tady
   Pevná výška zabíjí kolísání (obsah se nezalomí, přeteklé se ořízne) i to, že se řádek liší
   podle počtu řádků. Výška má přednost před vnitřním odsazením, proto číselníky (vlastní 9px
   v buňkách) i provizní tabulky (.tbl 15px) skončí stejně vysoké. */
table.tbl td{padding:0 14px;color:var(--t1);overflow:hidden}
table.tbl tbody tr{border-bottom:1px solid var(--b1);height:47px}
/* Druhý řádek buňky (12. 10. 2026) — údaj, který patří k hlavnímu (Id k číslu smlouvy, poskytovatel
   k produktu, vlastník k prodejci). Menší a tlumený, vejde se do pevné výšky řádku 47 px. */
.bunka-pod{font-size:var(--fs-label);color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
/* Řádky rodiny A (avatar + jméno/podtitul) = 57 px pevně, nezávisle na obsahu.
   box-sizing:border-box → 57 px je CELÁ výška včetně spodního rámečku (jinak by rámeček přidal
   1 px a řádky by kolísaly 57/58 podle zaokrouhlení). */
/* JEDEN SEZNAM NAPŘÍČ APLIKACÍ (uživatel 27. 9. 2026: „tabulky se seznamem musí být napříč celou
   aplikací stejné"). Dvě rodiny (lidé 57 px s verzálkovou hlavičkou × data 47 px) skončily —
   mřížkové seznamy mají řádek i hlavičku jako tabulka `.tbl`: řádek 47 px, hlavička na pruhu
   `--bg2` se spodní čarou 2 px, písmo 12 px / 500 / `--t2`, bez verzálek. Hlavička mřížky nese
   třídu `.seznam-hlava`; `!important` přebíjí staré inline styly buněk. */
.osoby-row,.cl-row,.prodejci-row:not(.prodejci-head),
.penezenky-row:not(.penezenky-head),.hjednani-row:not(.hjednani-head),.hparovani-row:not(.hparovani-head),.uz-row,
.pskup-row:not(.pskup-head),.jednani-row,
.obchod-list-row{height:47px;box-sizing:border-box;overflow:hidden}
.seznam-hlava{background:var(--bg2) !important;border-bottom:2px solid var(--b1) !important;border-top:none !important;height:auto !important}
.seznam-hlava>*{font-size:12px !important;font-weight:500 !important;color:var(--t2) !important;
  text-transform:none !important;letter-spacing:normal !important;padding-top:10px !important;padding-bottom:9px !important}
.prodejci-head.seznam-hlava,.penezenky-head.seznam-hlava,.hjednani-head.seznam-hlava,.hparovani-head.seznam-hlava,
.pskup-head.seznam-hlava{padding-top:0 !important;padding-bottom:0 !important}
.list-person{padding:0 !important}
/* STŘÍDÁNÍ POZADÍ ŘÁDKŮ = třída `.pruh`, kterou přiděluje studio.js (`_pruhy`) jen VIDITELNÝM
   řádkům a přepočítá ji po filtrování, řazení i dotažení seznamu. CSS `nth-child(even)` počítalo
   i řádky schované filtrem, takže po hledání se pruhy rozsypaly (uživatel 27. 9. 2026). */
table.tbl tbody tr.pruh,.osoby-row.pruh,.cl-row.pruh,.prodejci-row.pruh,.penezenky-row.pruh,
.hjednani-row.pruh,.hparovani-row.pruh,.uz-row.pruh,.pskup-row.pruh,.jednani-row.pruh,
.obchod-list-row.pruh{background:var(--bg2)}
/* První řádek pod hlavičkou bez horní čáry — jinak se sečte s 2px čarou hlavičky (tabulka ji tam nemá). */
.prodejci-row:first-child,.penezenky-row:first-child,.hjednani-row:first-child,.hparovani-row:first-child,
.pskup-row:first-child{border-top:none}
table.tbl tbody tr:last-child{border-bottom:none}
table.tbl .num{text-align:right;white-space:nowrap}

/* ── DVĚ RODINY SEZNAMŮ, KAŽDÁ UVNITŘ SHODNÁ (2026-08-06, po revizi s uživatelem) ──────────
   ETALON je řádek Osoby u poradce: 57 px, kolečko s iniciálami + jméno nad podtitulem, písmo 14.
   Do 2026-08-06 jsem holver a číselníky stlačil na 40 px / 13 px — to bylo špatně (uživatel:
   „40px je málo, měníš to špatným směrem"). Vrácení k etalonu:
     • LIDÉ (Osoby, Klienti, Prodejci, Peněženky) — řádek s avatarem, ~57 px, hlavička VERZÁLKAMI.
     • DATA (Instituce/Produkty/Nástroje/provizní tabulky, Sortiment) — plochý řádek, ~46 px,
       hlavička větami (tabulkový styl). Číselníky nemají koho zobrazit avatarem, tak zůstávají
       ploché, ale pohodlné — ne stlačené.
   Hlavička lidských mřížek = etalon Osoby: verzálky 11 px, 600, průhledné pozadí. */
.cl-grid-hdr,.prodejci-row.prodejci-head,.penezenky-row.penezenky-head,.hjednani-row.hjednani-head,.hparovani-row.hparovani-head,
.pskup-row.pskup-head{
  border-bottom:1px solid var(--b1);font-size:11px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;color:var(--t3)}
.list-person{display:flex;align-items:center;gap:12px;padding:11px 0;min-width:0}
.list-person .lp-name{font-size:var(--fs-body);font-weight:500;color:var(--t1)}
.list-person .lp-sub{font-size:11px;color:var(--t3)}
/* Zebra jako u tabulky. `:not(.hidden)` se neřeší — stránkování řádky skrývá přes `display`,
   takže po odfiltrování se pruhy přepočítají samy podle pořadí v DOM. */
/* Střídání pozadí viz `.pruh` u JEDNOHO SEZNAMU výš. */

/* Identifikátor (ISIN, IČO, ID prodejce, číslo smlouvy) — stejné písmo jako zbytek aplikace,
   jen s pevnou šířkou číslic, aby se kódy pod sebou zarovnaly. Strojopis (font-family:monospace)
   se do aplikace NEHODÍ: prohlížeč sáhne po systémovém Courieru, který má jiný duktus i výšku
   než zbytek stránky a v tabulce působí jako cizí prvek. */
.id-cell{font-variant-numeric:tabular-nums;letter-spacing:.03em;color:var(--t3)}
/* DOSLOVNÝ KÓD — klíč konfigurace, název souboru, párovací a záložní kód k opsání. Jediné místo,
   kde strojopis do aplikace patří: je to citace, ne data. Identifikátory (ISIN, IČO, ID prodejce)
   sem NEPATŘÍ — ty mají `.id-cell` s písmem aplikace. */
.code-literal{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* MATICE POJISTITELNOSTI — rolety uvnitř tabulky. Jsou `no-enhance` (nativní, protože jich je
   na stránce přes osm set a vlastní roleta by stránku zahltila), ale VÝŠKU mají jako každé jiné
   pole v aplikaci: 34 px. Do 16. 9. 2026 měly inline 30 px a byly jediná pole v administraci,
   která se rozcházela s ostatními. Vzhled je tady, ne v atributu `style` u každé buňky. */
.diag-m-cell,.diag-m-all{width:100%;height:34px;font-size:11px;border-radius:6px}
.diag-m-cell{background:var(--bg1);color:var(--t1);border:1px solid var(--b1)}
.diag-m-all{background:var(--bg2);color:var(--t2);border:1px dashed var(--b1)}

.hint-i{position:relative;display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;
  border-radius:50%;border:1px solid var(--t3);color:var(--t3);font-size:var(--fs-label);font-style:normal;font-weight:600;
  line-height:1;cursor:pointer;flex-shrink:0;user-select:none;
  /* Kolečko je vyšší než řádek popisku (12px), takže bez úpravy by řádek narostlo a POSUNULO pole
     pod ním; v gridu, kde jeden popisek hint má a sousední ne, se tím rozjedou celé sloupce.
     Záporné okraje to srovnají — ale samy o sobě spolknou i spodní mezeru popisku a kolečko se
     pak dotýká editboxu (přesně to uživatel 2026-08-05 reklamoval).
     Trojice velikost 13px + `vertical-align:top` + `-2px` je jediná kombinace, kde vyjde obojí:
     popisek s hintem i bez něj má 12px (nulový posun sloupců) a k poli zůstanou 3px. Ověřeno
     měřením; kdo sem sáhne, ať si to přeměří znovu. */
  vertical-align:top;margin:-2px 0 -2px 5px}
.hint-i:hover,.hint-i.open{border-color:var(--fs-pink);color:var(--fs-pink)}
.hint-i .hint-tip{white-space:normal;width:230px;line-height:1.45;font-weight:400;text-transform:none;letter-spacing:normal}
/* 2026-07-27 — hint se ukáže na hover (desktop) i na KLIK (`.open`, JS ho „připne", funguje i na
   dotyku). `.hint-left` (JS ho přidá u „i" blízko pravého okraje) otevře bublinu doleva, ať nepřeteče. */
.hint-i:hover .hint-tip,.hint-i.open .hint-tip{opacity:1;pointer-events:auto}
.hint-i.hint-left .hint-tip{left:auto;right:0}
body.no-hints .hint-i{display:none}
/* 2026-07-09 — nahrazuje .hint-wrap/.hint-tip pro tabulkové buňky: uživatel nahlásil, že plovoucí
   tooltip pod textem působí "trhaně" a zbytečně se ukazuje i u textu, který se vůbec nezkrátil.
   Nový vzor: `<td class="hover-expand"><span class="truncate">…</span></td>` — při najetí myší se
   ZKRÁCENÝ text (appka to ověří JS, `scrollWidth>clientWidth`, třída `.is-overflowing` se přidá
   jen tehdy) "vysune" doprava přes sousední sloupce, ne dolů jako samostatná bublina — barvu pozadí
   appka převezme živě z řádku (`--hov-bg`, JS), aby seděla i na zebra pruhované liché řádky.
   DRUHÁ oprava téhož dne — první verze dávala `.truncate` `position:absolute`, což ho vyjme z
   normálního toku `<td>` (tabulkové buňky mají default `vertical-align:middle`, ale absolutně
   pozicovaný prvek na to nedbá a přilepí se na `top:0` padding boxu) — u řádku vyššího než jeden
   řádek textu to vizuálně "vyzdvihlo" text nahoru a zasahovalo do řádku NAD (přesně nahlášený
   bug). Oprava: `position:relative` (zůstává v normálním toku, beze změny vlastní pozice — jen
   založí stacking context pro `z-index`, aby se vykreslil NAD obsahem sloupců napravo ve STEJNÉM
   řádku, ne nad/pod jiný řádek). `overflow:visible` na samotném `<td>` při hoveru dovolí obsahu
   přetéct mimo buňku vodorovně (jinak by ho oříznul vlastní `overflow:hidden`). */
/* 2026-07-09 — obecné klikací řazení nadpisů sloupců (viz sortRows() v studio.js), platí pro
   libovolný seznam v appce s hlavičkou (tabulka i CSS grid). Hover jen jemně naznačí klikatelnost,
   ".sort-ind" (▲/▼) appka doplní/smaže přímo do textu nadpisu přes JS, ne přes CSS ::after — jinak
   by šipka zůstávala i po přeuspořádání na jiný sloupec. */
.sortable-th:hover{background:rgba(255,255,255,.05)}
.sort-ind{color:var(--fs-pink);font-size:var(--fs-label)}
.hover-expand{position:relative;overflow:hidden}
.hover-expand>.truncate{display:block}
.hover-expand.is-overflowing:hover{overflow:visible}
.hover-expand.is-overflowing:hover>.truncate{position:relative;z-index:60;
  overflow:visible;text-overflow:clip;white-space:nowrap;background:var(--hov-bg,var(--bg1));
  padding-right:14px;box-shadow:8px 0 14px -8px rgba(0,0,0,.5);border-radius:0 6px 6px 0}
/* TŘETÍ oprava téhož mechanismu (2026-07-09) — text se sice nezvedal, ale sousední buňka
   (další sloupec vpravo) měla svůj VLASTNÍ obsah vykreslený AŽ PO naší buňce (`<tr>` maluje děti
   v pořadí zdrojového kódu), takže `z-index:60` na `.truncate` samo o sobě nic nezajistilo —
   z-index řadí jen prvky uvnitř TÉŽE stacking context, a bez ní se hoistuje výš, kde ho stejně
   překreslí normální (nepozicovaný) obsah pozdějšího sourozence. `isolation:isolate` na `<tr>`
   založí stacking context přesně na úrovni řádku — teprve v ní z-index mezi sourozeneckými `<td>`
   skutečně rozhodne, kdo je nahoře.
   ČTVRTÁ oprava téhož dne — uživatel nahlásil "kliknu do vyhledávacího pole a 3 sekundy čekám,
   než se to vůbec projeví". Root cause: `tr:has(.hover-expand)` byl generický selektor bez
   omezení na konkrétní tabulku — appka má VŠECHNY `.page` (i neaktivní) po celou dobu v DOM
   najednou, takže prohlížeč tuhle (notoricky drahou) `:has()` klauzuli musel přepočítávat proti
   VŠEM `<tr>` v CELÉM dokumentu (Produkty 6085 + Nástroje 3157 + Instituce 77 řádků najednou,
   i když jen jedna stránka je zrovna vidět) — a dělal to při KAŽDÉM stylovém přepočtu, tedy i při
   prostém kliknutí/fokusu na input (fokus měnící `:focus` stav vyvolá style recalc). Scoping na
   konkrétní `#tbody-id tr:has(...)` (viz historie) pomohl jen částečně — `:has()` je drahý sám o
   sobě bez ohledu na to, jak úzký je jeho scope, a 6085/3157 řádků je pořád hodně řádků k
   přepočítání při každém stylovém recalcu. **PÁTÁ oprava (definitivní)** — `:has()` úplně
   zbytečný: KAŽDÝ `<td>` v těchto 3 tabulkách má `.hover-expand` bezpodmínečně (žádný řádek bez
   něj neexistuje), takže "řádek obsahující .hover-expand" je vždy identické s "každý řádek
   tabulky" — `:has()` tu nikdy nic nerozlišoval. Nahrazeno přímým selektorem na existující třídu
   řádku (`.prod-row`/`.instr-row`/`.inst-row`, appka je má z jiného důvodu — `sortRows()`), který
   prohlížeč umí vyhodnotit bez nutnosti scanovat/sledovat potomky. Při zavádění `.hover-expand`
   na DALŠÍ budoucí tabulku: pokud řádek MÁ vlastní stabilní třídu, použít stejný přímý vzor; jen
   pokud by `.hover-expand` bylo na řádku PODMÍNĚNÉ (ne every `<td>`), by `:has()` dávalo smysl —
   a i pak jen scoped na `#tbody-id`, nikdy jako holé `tr:has(...)`. */
.prod-row,.instr-row,.inst-row,.holver-row{isolation:isolate}
/* KLIENTI GRID */
.cl-grid-hdr,.cl-row{display:grid;grid-template-columns:var(--cl-cols);width:100%;min-width:780px}
.cl-grid-hdr{/* vzhled hlavičky je společný, viz `.cl-grid-hdr,.prodejci-head,…` u `.tbl` */}
.cl-row{border-bottom:1px solid var(--b1);transition:background .1s}
.cl-row:last-child{border-bottom:none}
.cl-row:hover{background:var(--bg2)}
/* 360 KARTA */
#card360{display:grid;grid-template-columns:268px 1fr;height:100%;overflow:hidden}
.card-tabs{display:flex;border-bottom:1px solid var(--b1);background:var(--bg1);
  flex-shrink:0;overflow-x:auto}
.ctab{padding:13px 15px;font-size:12px;color:var(--t2);cursor:pointer;
  border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;flex-shrink:0}
.ctab.on{color:var(--fs-pink);border-bottom-color:var(--fs-pink);font-weight:500}
/* DĚLICÍ LISTY ŠANONU (detail prodejce, 28. 9. 2026). Každý oddíl má vlastní ouško se zaoblenými
   horními rohy, zavřené listy leží „vzadu" (tmavší podklad), otevřený list je vpředu a splývá
   s plochou pod ním — přerušuje dělicí čáru, takže je vidět, který oddíl je otevřený. */
.card-tabs.listy{background:none;gap:4px;padding:0 2px;margin:14px 0 16px;border-bottom:1px solid var(--b2);overflow:visible}
.card-tabs.listy .ctab{padding:9px 18px;background:var(--bg2);color:var(--t3);border:1px solid var(--b1);
  border-bottom:0;border-radius:10px 10px 0 0;margin-bottom:0;position:relative;top:1px}
.card-tabs.listy .ctab:hover{color:var(--t1)}
.card-tabs.listy .ctab.on{background:var(--bg0);color:var(--t1);font-weight:600;border-color:var(--b2);
  box-shadow:inset 0 2px 0 var(--fs-pink);border-bottom:1px solid var(--bg0)}
.card-pane{display:none;flex-direction:column;gap:14px}.card-pane.on{display:flex}
@media(max-width:1100px){.mets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.action-priority{font-size:9.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:10px;margin-bottom:5px;display:inline-block}
.action-item-body{font-size:var(--fs-body-sm);color:var(--t2);line-height:1.55;margin-bottom:8px}
/* RESPONSIVITA */
@media(max-width:1200px){.row3{grid-template-columns:1fr 1fr}}
@media(max-width:1100px){.mets{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 2026-07-21 — .mets responzivitu měl odjakživa, dvousloupcové .row2/.row23 ne: pod ~900px
   PŘETÉKALY vodorovně (obsah utekl mimo #main, text se ořízl). Zalomení na jeden sloupec je
   správnější než scrollbar. Nad 900px se nic nemění, takže desktop layout zůstává beze změny. */
@media(max-width:900px){.row2{grid-template-columns:1fr}}
/* .mets padá na 2 sloupce pod 1100px — dashboardový pás musí padnout se stejným prahem,
   jinak by lícování skončilo dřív než dlaždice. */

/* ── KALKULAČKA AUTOPOJIŠTĚNÍ (#page-kalkulator) ──
   Nezávislé na .kalk-* výše (Radimův engine na pojistné krytí, viz DOMYSLET.md) —
   vlastní prefix ap- podle CLAUDE.md, ať je jasně vidět, že jde o jinou věc. */
.ap-field {display:flex;flex-direction:column;gap:5px}
.ap-label {font-size:var(--fs-label);color:var(--t3);font-weight:400}
.ap-err {font-size:12px;color:var(--rd);background:var(--rdd);border-radius:9px;padding:10px 14px;margin-bottom:16px}
.ap-quote-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:14px}
@media(max-width:1200px){.ap-quote-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.ap-quote-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ap-quote-grid{grid-template-columns:1fr}}
.ap-quote-card {display:flex;flex-direction:column}
.ap-quote-card-best {border-color:var(--gr)}
.ap-quote-price {font-size:var(--fs-stat);font-weight:600;color:var(--t1)}
.ap-quote-price-unit {font-size:11px;color:var(--t3);font-weight:400;margin-left:3px}
.ap-quote-annual {font-size:var(--fs-body-sm);color:var(--t3);margin-top:2px}
.ap-disclaimer {font-size:11px;color:var(--t3);margin-top:2px}
.ap-provider-errors {font-size:12px}

/* Sidebar logo */
.sb-logo-wrap{padding:12px 9px 28px;flex-shrink:0;overflow:hidden}
/* 2026-07-11 — levý okraj menu byl příliš natěsno k levému okraji appky (7px) — uživatel:
   "dej mi celé to levé menu trochu více od levého okraje... předpokládám, že to bude v celé
   aplikaci" — zvýšeno na 18px, platí plošně pro VŠECHNY role (Klient/Poradce/Admin/Auditor),
   appka tu nemá žádnou per-roli variantu paddingu. */
/* `min-height:0` je nutné — flex položka se jinak nesmrskne pod výšku svého obsahu (implicitní
   min-height:auto) a dlouhé menu vytlačí patičku sidebaru pod jeho spodní hranu. */
.sb-menu-scroll{flex:1;min-height:0;overflow-y:auto;padding:12px 7px 10px 18px}
#sidebar .nb{margin-top:auto;padding-top:8px;border-top:1px solid var(--b1)}
/* #right-panel/#role-bar/#main shell — jediná definice je v bloku „Shell" níž (2026-07-23,
   sjednoceno: gap:8px a right-panel flex:1 byly dřív rozprostřené mezi dvěma bloky). */
body.light #role-bar{border-bottom-color:rgba(27,44,94,.15)}
.ob-step{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 8px;border-radius:7px;transition:all .15s;flex-shrink:0}
.ob-input{height:34px;background:var(--bg1);border:1.5px solid var(--b2);border-radius:8px;padding:8px 12px;font-size:12.5px;color:var(--t1);font-family:inherit;outline:none;transition:border-color .15s;width:100%;box-sizing:border-box}
textarea.ob-input{height:auto}
.ob-input:focus{border-color:var(--fs-pink)}
.ob-input::placeholder{color:var(--t3);opacity:.4}
/* Notifikace */
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--bg1);border:1px solid var(--b1);border-radius:12px;cursor:pointer;transition:all .15s}
.notif-item:hover{border-color:var(--b2);background:var(--bg2)}

/* ══ STUDIO KLIENT — CSS ══ */
/* iOS toggle */
.ios-toggle{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.ios-toggle input{display:none}
.ios-track{width:44px;height:26px;background:var(--bg3);border-radius:13px;transition:background .2s;flex-shrink:0;position:relative}
.ios-thumb{position:absolute;left:3px;top:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.ios-toggle input:checked ~ .ios-track{background:var(--fs-pink)}
.ios-toggle input:checked ~ .ios-thumb{left:21px}

/* Shell */
#shell{display:grid;grid-template-columns:240px 1fr;position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden}
#sidebar{background:var(--bg1);border-right:1px solid var(--b1);padding:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
#right-panel{display:flex;flex-direction:column;overflow:hidden;min-width:0;flex:1}
#role-bar{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;flex-shrink:0;padding:0 20px;gap:8px;height:70px;border-bottom:2px solid rgba(255,255,255,.15);background:var(--bg1)}
/* Plovoucí hlášky (chyby, varování) sedí v pravém DOLNÍM rohu. Nahoře překrývaly ovládání —
   nejdřív přepínač motivu, zvonek a odhlášení, po posunu pod lištu zase akční tlačítko stránky
   („Nový klient"). Dole je volno na každé obrazovce appky a je to obvyklé místo pro toasty
   (2026-08-04). Jediná definice pozice: toasty z JS i bannery z TempData ji sdílejí. */
.app-float-msg{position:fixed;bottom:20px;right:20px;z-index:3000}
#main{overflow-y:auto;flex:1;background:var(--bg0);min-height:0;
  /* Místo pro posuvník je vyhrazené vždy (28. 9. 2026): jinak krátký seznam (filtr Ukončení)
     posuvník ztratí, obsah se o jeho šířku roztáhne a sloupce při přepínání filtrů skáčou. */
  scrollbar-gutter:stable}
.sb-logo-wrap{padding:12px 9px 28px;flex-shrink:0;overflow:hidden}
/* `min-height:0` je nutné — flex položka se jinak nesmrskne pod výšku svého obsahu (implicitní
   min-height:auto) a dlouhé menu vytlačí patičku sidebaru pod jeho spodní hranu. */
.sb-menu-scroll{flex:1;min-height:0;overflow-y:auto;padding:12px 7px 10px 18px}
/* 2026-08-02 — regulatorní vymezení, viditelné na každé obrazovce. Tlumené: má být k dispozici,
   ne křičet. `flex-shrink:0` drží řádek dole i u dlouhého menu. */
.sb-legal{flex-shrink:0;display:block;padding:10px 16px 14px;border-top:1px solid var(--b1);
  font-size:var(--fs-label);line-height:1.5;color:var(--t3);text-decoration:none}
.sb-legal:hover{color:var(--t2)}
/* Verze aplikace — jediný zdroj pravdy je ReleaseNotes.Current (např. „0.9.8"), NE název gitového
   tagu („v0.9.8"). Diskrétně vpravo dole pod právním vymezením. */
.sb-version{flex-shrink:0;padding:0 16px 12px;font-size:var(--fs-label);color:var(--t3);text-align:right;opacity:.75}

/* RC validace */
.rc-input{padding-right:36px}
.rc-icon{display:none}
.rc-icon.ok{display:block;color:var(--gr)}
.rc-icon.err{display:block;color:var(--rd)}
.rc-error{font-size:var(--fs-body-sm);color:var(--rd);margin-top:6px;padding:8px 12px;background:var(--rdd);border-radius:8px;display:flex;align-items:center;gap:6px}
.rc-error::before{content:"\26A0";font-size:14px}

/* Stránkovatelné seznamy — pevné šířky sloupců, aby neuskakovaly mezi stránkami stránkování */
:root{
  /* 2026-07-12 — appka měla dřív šířku "sloupce s ikonami"/"sloupce s pilulkou role" jako
     natvrdo vepsané číslo v KAŽDÉ `--X-cols` proměnné zvlášť (žádný sdílený zdroj pravdy) —
     přesně tenhle rozpor appku appce shodil na Osobách (pilulka "Partner / manžel(ka)"
     zasahovala do ikon, appka to opravila zvlášť, ne systémově). Appka appce zavádí 2 pojmenované
     proměnné pro NEJČASTĚJŠÍ opakující se typy sloupců — appka je používá u NOVÝCH sloupců stejného
     typu, existující tabulky appka nepřepisuje naslepo (appka to udělá tabulku po tabulce, s
     živým ověřením, ne jedním hromadným search&replace — riziko vizuální regrese na tabulce,
     kterou appka teď nemá otevřenou v prohlížeči, je appce zbytečné).
     appka VĚDOMĚ nesjednocuje sloupce s JINÝM obsahem (např. `--uz-cols` poslední sloupec je
     seznam badge rolí, ne 2 ikony — jiný typ obsahu, jiná potřebná šířka, appka by to tokenem
     jen matoucně přejmenovala, ne sjednotila). appka taky nechává BEZE ZMĚNY tabulky používající
     jiný sizing mechanismus (`<colgroup>` v %, appka Produkty/Nástroje/Instituce — appka to nemíchá
     s px-based grid systémem, byl by to jiný refaktor). */
  /* ŠÍŘKA SLOUPCE PODLE DRUHU OBSAHU (13. 10. 2026, docs/VZHLED.md §2 „Šířky sloupců").
     Změřeno nad 55 seznamy: e-mail měl 136–332 px, telefon 132–140 px a potřebuje 160. Seznam
     si šablonu skládá z těchto šířek; pružný je jediný sloupec — hlavní identita řádku
     (--sl-identita). Řádek hledání nad seznamem používá tutéž šablonu. */
  --sl-identita: minmax(220px,1.5fr);
  --sl-text: minmax(160px,1fr);        /* doplňkový text (poznámka, popis, varianta) — dělí se o zbytek s identitou */
  --sl-email: 240px;
  --sl-tel: 160px;
  --sl-kod: 120px;
  --sl-kod-produktu: 170px;    /* kód produktu (KOOP_Flexi, NNPS_PP/DPS) — delší než identifikátor */
  --sl-datum: 100px;
  --sl-obdobi: 88px;
  --sl-castka: 130px;
  --sl-pct: 80px;
  --sl-pocet: 72px;
  --sl-stav: 56px;           /* jen kolečko, název stavu v nápovědě */
  --sl-stav-datum: 150px;    /* kolečko + datum („do 31. 12. 2026") */
  --sl-instituce: 160px;     /* značka instituce, plný název v nápovědě */
  --sl-pilulky: 200px;       /* pilulky na jeden řádek, co se nevejde → „+N" (.pilulky) */
  --sl-ciselnik: 120px;
  --sl-ciselnik-siroky: 180px;  /* delší číselník: sektor instituce, druh dokumentu, formulář smlouvy */
  --sl-ikona: 32px;          /* akce: počet ikon × tahle šířka (tlačítko 28 px + mezera) */
  --col-icons-2: 72px;    /* 2 akční ikony (tužka+koš), viz Osoby */
  --col-pill-role: 135px; /* pilulka role/status s nejdelším známým textem ("Hlavní kontakt") */

  /* 2026-07-12 — Domácnost/E-mail byly `160px 1fr` — na širokém main (1360px+) to nechávalo
     celý přebytek v JEDNOM sloupci (E-mail vycházel na >500px prázdného místa kolem krátkého
     textu), zatímco Role zůstala nalepená na ikony bez odstupu. Přepnuto na dva `fr` sloupce,
     ať se přebytek rozpočítá rovnoměrně mezi Domácnost i E-mail/telefon, ne jen do jednoho. */
  --osoby-cols: 280px 90px 1.15fr 1.3fr var(--col-pill-role) var(--col-icons-2);
  /* 2026-07-12 — přestavěno na Obchod/Osoba/Instituce/Platba/Hodnota/Status + ikony (dřív
     samostatné Klient+Pojištěný sloupce byly skoro vždy identický text — sloučeno do jednoho
     "Osoba" sloupce), Osoba+Instituce na `fr`, ať se volný prostor rozpočítá mezi obě, ne
     nahodile do jednoho jako u --osoby-cols výš. */
  --obchod-list-cols: 280px 1fr 1fr 110px 120px 56px var(--col-icons-2);
  /* Šanon klienta (revize bod 77) — tytéž sloupce jako poradcovský seznam, akcí je víc
     (počet dokumentů, holver, tužka, koš), proto širší poslední sloupec. */
  --sanon-cols: 280px 1fr 1fr 110px 120px 56px 128px;
  /* Ústřední seznam záznamů o jednání (page-adv-jednani): Klient, Obchod, Typ, Stav, Datum, akce. */
  --jednani-cols: 1.5fr 1.5fr 140px 130px 110px 110px;
  /* 2026-07-09 — přidán Mobil (příprava na dvoufaktorové ověřování — appka potřebuje mít
     telefonní číslo uživatele viditelné/dohledatelné, ne teprve dodělávat sloupec až bude
     2FA reálně zapojené). `PhoneNumber` je vestavěné pole `IdentityUser`, appka ho dřív nikde
     nezobrazovala — žádná migrace, sloupec v `AspNetUsers` existuje od začátku. */
  /* 7 sloupců: Jméno · E-mail · Mobil · Iniciály · Role · Předplatné · akce (reset 2FA).
     Poslední dva jsou pevné — akční sloupec nesmí přetéct do Role (zavedené pravidlo pro
     akční sloupce seznamů), sloupec Předplatné nese pilulku stavu, datum a tlačítko. */
  /* Prodejci holveru — pevné šířky, aby sloupce při filtrování/řazení nepodskakovaly podle
     délky obsahu na dané stránce (stejný důvod jako u --uz-cols / --osoby-cols). */
  --provradky-cols: 17% 15% 9% 10% 12% 12% 19% 6%;
  --listiny-cols: 12% 17% 19% 9% 12% 14% 12% 5%;
  --lradky-cols: 14% 16% 12% 10% 42% 6%;
  --ulohy-cols: 30% 12% 30% 12% 7% 9%;
  --kniha-cols: 22% 10% 22% 13% 13% 20%;
  /* poslední sloupec je akční (sankce) — pevná šířka, ať se řádek nerozjede podle obsahu */
  --penezenky-cols: 118px minmax(0,1fr) 140px 140px 130px 150px 110px 70px;
  /* Povinná dokumentace a její párování — sloupce jako u holvera (`povMeetingsTable`,
     `meetingRecordsTable`) */
  --hjednani-cols: 130px minmax(0,1fr) 120px 130px minmax(0,1fr) 145px 110px minmax(0,1fr) 44px;
  --hparovani-cols: 130px minmax(0,1fr) minmax(0,1fr) 130px 140px 120px minmax(0,1fr) 100px 90px 70px;
  --sortiment-cols: 1fr 240px 160px 96px;
  --prodejci-cols: 118px minmax(220px,1.4fr) 132px minmax(160px,1fr) 78px 118px 96px;
  /* Pohled prodejce/manažera — skupina (lidé) a obchody (data). */
  --pskup-cols: 110px minmax(150px,1.2fr) 64px 68px 92px 120px 128px 150px;
  --uz-cols: var(--sl-identita) var(--sl-email) var(--sl-tel) var(--sl-pilulky) var(--sl-stav-datum) calc(3 * var(--sl-ikona) + 32px);
  /* 2026-07-12 — appka měla `.cl-grid-hdr,.cl-row` grid-template-columns napsané natvrdo v
     pravidle níž (ne přes proměnnou), takže filtr-řádek nad seznamem "Moji klienti" neměl s čím
     se přesně srovnat — appka ho tam dřív ani neměla. Vytažením do proměnné appka umožňuje
     filtr-řádku sdílet STEJNÝ grid, stejný princip jako `--uz-cols` výše. */
  --cl-cols: minmax(140px,1.8fr) minmax(110px,1.4fr) minmax(80px,1.1fr) minmax(46px,.55fr) minmax(90px,1fr) minmax(46px,.6fr) 56px 236px;
}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.instr-title-link{cursor:pointer}
.instr-title-link:hover{color:var(--fs-pink);text-decoration:underline}
.osoby-row{display:grid;grid-template-columns:var(--osoby-cols);border-bottom:1px solid var(--b1);align-items:center}
.osoby-row:last-child{border-bottom:none}
.osoby-row:hover{background:var(--bg2)}
.osoby-row>div,.obchod-list-row>div,.uz-row>div{min-width:0}
.uz-row{display:grid}
.prodejci-row{display:grid;grid-template-columns:var(--prodejci-cols);align-items:center;gap:10px;
  padding:0 14px;border-top:1px solid var(--b1);font-size:var(--fs-body)}
.prodejci-head{border-top:none;padding:10px 14px}
.prodejci-head .sortable-th{cursor:pointer}
/* Pohled prodejce/manažera — skupina je LIDSKÝ seznam (57 px, avatar). */
.pskup-row{display:grid;grid-template-columns:var(--pskup-cols);align-items:center;gap:10px;
  padding:0 14px;border-top:1px solid var(--b1);font-size:var(--fs-body)}
.pskup-head{border-top:none;padding:10px 14px;height:auto}
.pskup-head .sortable-th{cursor:pointer}
.pskup-row>div{min-width:0}
/* Prodejci: dva pohledy na táž data. V plochém seznamu se řadí podle sloupců, ve stromu podle
   nadřízených — stejné řádky i výška, liší se jen pořadí a odsazení ID (viz Outlook: podle data
   × podle vlákna). Chevron je proto jen ve stromu; v seznamu by nedával smysl. */
.prodejci-id{display:flex;align-items:center;gap:6px}
.hier-chev{font-size:14px;color:var(--t3);transition:transform .15s;width:14px;flex:0 0 14px;cursor:pointer}
.hier-chev-empty{width:14px;flex:0 0 14px}
#prodejci-list:not(.strom) .hier-chev,#prodejci-list:not(.strom) .hier-chev-empty{display:none}
/* CESTA STRUKTUROU — odsazení po úrovních skončilo 2026-08-06 (mělo v CSS jen čtyři stupně a
   u deseti úrovní nad sebou nedávalo smysl). Místo něj se ukazují přímí podřízení jednoho člověka
   a nad seznamem stojí cesta zpátky. */
.prodejci-cesta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.cesta-uzel{background:none;border:none;cursor:pointer;color:var(--t2);font-size:12.5px;
  padding:3px 8px;border-radius:7px;font-family:inherit}
.cesta-uzel:hover{background:var(--bg2);color:var(--t1)}
.cesta-uzel.on{color:var(--t1);font-weight:500}
.cesta-sip{font-size:12px;color:var(--t3)}
.penezenky-row{display:grid;grid-template-columns:var(--penezenky-cols);align-items:center;gap:10px;
  padding:0 14px;border-top:1px solid var(--b1);font-size:var(--fs-body)}
.penezenky-head{border-top:none;padding:10px 14px}
.penezenky-head .sortable-th{cursor:pointer}
.hjednani-row{display:grid;grid-template-columns:var(--hjednani-cols);align-items:center;gap:10px;
  padding:0 14px;border-top:1px solid var(--b1);font-size:var(--fs-body)}
.hjednani-head{border-top:none;padding:10px 14px}
/* Záhlaví jedním řádkem (audit 1. 10. 2026: „Název povinné dokumentace" se lámal na dva). */
.hjednani-head>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Portál prodejce — akce `povMeetingsTable` (Otevřít, Vytvořit z šablony, Klonovat, Dokument, Smazat). */
.pov-portal{--hjednani-cols: 130px minmax(0,1fr) 120px 130px minmax(0,1fr) 145px 110px minmax(0,1fr) 150px}
.hjednani-head .sortable-th{cursor:pointer}
.hparovani-row{display:grid;grid-template-columns:var(--hparovani-cols);align-items:center;gap:10px;
  padding:0 14px;border-top:1px solid var(--b1);font-size:var(--fs-body)}
.hparovani-head{border-top:none;padding:10px 14px}
.hparovani-head .sortable-th{cursor:pointer}

.obchod-list-row{display:grid;grid-template-columns:var(--obchod-list-cols);border-bottom:1px solid var(--b1);align-items:center}
.obchod-list-row.sanon-row{grid-template-columns:var(--sanon-cols)}
.jednani-row{display:grid;grid-template-columns:var(--jednani-cols);border-bottom:1px solid var(--b1);align-items:center}
.obchod-list-row:last-child{border-bottom:none}
.obchod-list-row:hover{background:var(--bg2)}
.goal-obchody-list.open{max-height:400px!important;padding-top:0!important}
.asset-obchody-list.open{max-height:400px!important;padding-top:8px!important}

/* Stránkování seznamů */
.pg-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 0;margin-top:4px}
.pg-nav .btn-sec{padding:6px 10px;font-size:var(--fs-body)}
.pg-nav .btn-sec:disabled{opacity:.35;cursor:default}
.pg-info{font-size:12px;color:var(--t3);white-space:nowrap}

/* Politika — náhled referenčního dokumentu (markdown přes marked.js) */
.policy-doc-preview h1{font-size:19px;margin:0 0 14px;color:var(--t1)}
.policy-doc-preview h2{font-size:16px;margin:22px 0 10px;color:var(--t1);border-top:1px solid var(--b1);padding-top:16px}
.policy-doc-preview h2:first-child{border-top:none;padding-top:0;margin-top:0}
.policy-doc-preview h3{font-size:var(--fs-section-title);margin:16px 0 8px;color:var(--fs-pink)}
.policy-doc-preview h4{font-size:var(--fs-body);margin:18px 0 8px;color:var(--t1);border-top:1px solid var(--b1);padding-top:14px}
.policy-doc-preview h4:first-of-type{border-top:none;padding-top:0;margin-top:0}
.policy-doc-preview h5{font-size:12px;margin:12px 0 6px;color:var(--fs-pink)}
.policy-doc-preview p{margin:0 0 10px}
.policy-doc-preview ul,.policy-doc-preview ol{margin:0 0 10px;padding-left:22px}
.policy-doc-preview li{margin-bottom:6px}
.policy-doc-preview hr{border:none;border-top:1px solid var(--b1);margin:14px 0}
.policy-doc-preview strong{color:var(--t1)}
.policy-doc-preview em{color:var(--t2)}
/* TABULKA V DOKUMENTU VYPADÁ JAKO KAŽDÁ JINÁ TABULKA (16. 9. 2026). Vzniká z markdownu, takže
   jí nejde dát `class="tbl"` — pravidla se proto opisují sem, ne aby se vymýšlel druhý vzhled.
   Do té doby měla plnou mřížku a hlavičku verzálkami s prostrkáním, tedy přesně ten dialekt,
   kterým se dvě tabulky vedle sebe rozejdou do dvou různých aplikací. Řádek si výšku řídí
   obsahem (je to text dokumentu, ne datový seznam), zbytek je shodný s `table.tbl`. */
.policy-doc-preview table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:var(--fs-body)}
.policy-doc-preview th,.policy-doc-preview td{padding:8px 14px;text-align:left;vertical-align:top}
.policy-doc-preview thead tr{background:var(--bg2);border-bottom:2px solid var(--b1)}
.policy-doc-preview th{color:var(--t2);font-weight:500;font-size:12px}
.policy-doc-preview tbody tr{border-bottom:1px solid var(--b1)}
.policy-doc-preview tbody tr:last-child{border-bottom:none}
.policy-doc-preview tbody tr:nth-child(even){background:var(--bg2)}
.policy-doc-preview td{color:var(--t1)}

/* 2026-07-10 — klient "jen na čtení" (Household.ClientCanEdit=false), viz CLAUDE.md.
   Appka jedním pravidlem ztlumí přidávací/mazací/ukládací prvky napříč celou stránkou, ne ručně
   133 jednotlivých tlačítek — server (Services/HouseholdAccessService) zápis stejně blokuje,
   tohle je jen vizuální signál, aby klient neklikal naslepo do formulářů, které appka beztak
   odmítne. `.icon-edit` (tužka) VĖDOMĖ NENÍ v tomto seznamu — appka ji používá i jako navigaci
   DO detailu (smlouva/osoba/majetek), ne jen jako editaci samotnou; detail appka klientovi dál
   ukáže k prohlédnutí, jen samotné "Uložit" uvnitř (`form button[type=submit]`) zůstává ztlumené.*/
/* Štítky v horní liště — „Jen ke čtení" (Features:ReadOnly) a „Ukázka" (demo náhled, T32).
   2026-07-31: dřív to byly bannery nad obsahem uvnitř #main; uživatel to zamítl (v záhlaví těla
   aplikace nemají hlášky co dělat — stejné pravidlo jako u read-only klienta 2026-07-10, kde
   banner nahradil zámek u jména). Vysvětlení nese hint ve vizuálu aplikace, ne systémová bublina. */
/* Tvar a velikost jako tlačítko vedle (`.btn-pink-back`): stejné rohy, odsazení a písmo, takže
   štítek a tlačítko v liště mají stejnou výšku (12. 10. 2026, dřív kulatá pilulka). */
.rb-tag{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:8px;font-size:12px;font-weight:500;white-space:nowrap;cursor:default;
  font-family:inherit;line-height:normal;
}
.rb-tag .ti{font-size:var(--fs-body)}
/* Tlačítko v liště vedle štítku a „Zpět" (Jako manažer / Jen prodejce) — tatáž výška a rohy. */
.btn-sec.rb-btn{padding:5px 12px;border-radius:8px;font-size:12px;line-height:normal}
.btn-sec.rb-btn .ti{font-size:var(--fs-body)}
.rb-tag-ro{background:rgba(245,166,35,.14);border:1px solid var(--am);color:var(--am)}
.rb-tag-demo{background:rgba(var(--accent-rgb),.12);border:1px solid var(--fs-pink);color:var(--fs-pink)}
/* Označení instance (Features:InstanceLabel). Tlumené schválně — není to varování jako „Jen ke
   čtení" nebo „Ukázka", jen informace, kde uživatel je; křiklavá barva by ty dva přebila. */
.rb-tag-instance{background:var(--bg2);border:1px solid var(--b1);color:var(--t2)}
.rb-tag-tip{
  position:absolute;top:calc(100% + 8px);right:0;z-index:300;
  background:var(--bg1);border:1px solid var(--b1);border-radius:8px;
  padding:8px 11px;width:240px;white-space:normal;font-size:var(--fs-body-sm);font-weight:400;color:var(--t2);line-height:1.5;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .12s,transform .12s;
}
.rb-tag:hover .rb-tag-tip{opacity:1;transform:translateY(0)}
/* Přepínač „holver | Studio" (30. 9. 2026) — holverový prodejce přechází mezi holverovou stranou
   a Studiem. Aktivní strana je vyplněná akcentem; ten nese vzhled té strany (skin-holver na holverové). */
.rb-prepinac{display:inline-flex;border:1px solid var(--b1);border-radius:999px;overflow:hidden;background:var(--bg2)}
.rb-prepinac a{padding:5px 14px;font-size:var(--fs-body-sm);font-weight:500;color:var(--t2);text-decoration:none;white-space:nowrap}
.rb-prepinac a:hover{color:var(--t1)}
.rb-prepinac a.on{background:var(--fs-pink);color:var(--on-accent);cursor:default}

body.client-readonly #main .btn-primary,
body.client-readonly #main .icon-add,
body.client-readonly #main .icon-del,
body.client-readonly #main form button[type="submit"]{
  opacity:.35;pointer-events:none;cursor:not-allowed
}
/* 2026-07-22 — read-only klient nesmí ani ROZEPSAT pole nebo rozbalit roletu (uživatel: "žádné
   z polí by nemělo mít možnost editace, ani ukázat obsah rolety"). Platí jen pro pole UVNITŘ
   <form> (tedy ta, co něco ukládají) — vyhledávání v seznamech, filtrovací pilulky, posuvník
   „co kdyby" a přepínače období grafu jsou mimo formuláře a zůstávají funkční, jsou to nástroje
   ČTENÍ. Klávesnici (Tab + psaní) tohle samo neuhlídá, proto navíc JS applyClientReadOnly()
   nastavuje readonly/disabled — CSS je vizuální signál, JS skutečný zámek. */
body.client-readonly #main form input,
body.client-readonly #main form select,
body.client-readonly #main form textarea,
body.client-readonly #main [id$="-modal"] input,
body.client-readonly #main [id$="-modal"] select,
body.client-readonly #main [id$="-modal"] textarea,
body.client-readonly #main [id$="-overlay"] input,
body.client-readonly #main [id$="-overlay"] select,
body.client-readonly #main [id$="-overlay"] textarea,
body.client-readonly #main #cw-instrument-select,
body.client-readonly #main #cw-instrument-search{
  opacity:.6;pointer-events:none;cursor:not-allowed
}
/* 2026-07-28 — VÝJIMKA ze read-only zámku: bezpečnostní nastavení ÚČTU (2FA, karta `.js-ro-allow`
   v Nastavení). Není to editace dat domácnosti, takže si ho read-only klient nastavit SMÍ —
   jinak by si nemohl zapnout ochranu vlastního účtu jen proto, že mu poradce zamkl úpravy dat
   (VIZE_2FA.md §12/8). Musí být i tady, nejen v applyClientReadOnly(): pravidla výše tlumí
   tlačítka přes pointer-events, takže samotná JS výjimka by na klik nestačila. */
body.client-readonly #main .js-ro-allow .btn-primary,
body.client-readonly #main .js-ro-allow .btn-sec,
body.client-readonly #main .js-ro-allow .btn-ghost,
body.client-readonly #main .js-ro-allow .icon-del,
body.client-readonly #main .js-ro-allow form button[type="submit"],
body.client-readonly #main .js-ro-allow form input,
body.client-readonly #main .js-ro-allow form select,
body.client-readonly #main .js-ro-allow form textarea{
  opacity:1;pointer-events:auto;cursor:pointer
}
body.client-readonly #main .js-ro-allow form input{ cursor:text }

/* 2026-07-14 — pojistný engine, Politika: kompaktní popisky/inputy parametrů státních dávek */
.sb-lbl{font-size:10.5px;color:var(--t3);display:block;margin-bottom:4px;line-height:1.3}
.sb-in{width:100%;box-sizing:border-box}

/* 2026-07-18 — CRM Fáze A (DOMYSLET T19): popisek pole v modalu + poradcovský feed „Diář". */
.fl{font-size:var(--fs-body-sm);color:var(--t3);display:block;margin-bottom:5px}
.feed-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--b1)}
.feed-row:last-child{border-bottom:none}
.feed-ico{font-size:20px;flex-shrink:0;width:24px;text-align:center}
.feed-main{flex:1;min-width:0}
.feed-title{font-size:var(--fs-section-title);font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-sub{font-size:var(--fs-body-sm);color:var(--t3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-date{font-size:12px;font-weight:500;white-space:nowrap;flex-shrink:0}
.feed-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.feed-act{background:none;border:none;cursor:pointer;padding:5px;font-size:18px;line-height:1;display:inline-flex}
.feed-act:hover{opacity:.7}

/* 2026-07-18 — CRM Fáze B (DOMYSLET T19): kanban pipeline leadů. */
.kanban-col{background:var(--bg2);border-radius:12px;padding:8px}
.kanban-col.drag-over{outline:2px dashed var(--fs-pink);outline-offset:-2px}
.kanban-col-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600;color:var(--t1);padding-top:6px;margin-bottom:8px}
.kanban-count{background:var(--bg1);border:1px solid var(--b1);border-radius:20px;padding:1px 8px;font-size:11px;color:var(--t2)}
.kanban-col-body{display:flex;flex-direction:column;gap:7px;min-height:52px}
/* Karta drží stejnou výšku napříč sloupcem: řádky se vykreslují i prázdné (min-height),
   dlouhá hodnota se zkrátí místo zalomení a akce se drží u spodní hrany. */
.kanban-card{background:var(--bg1);border:1px solid var(--b1);border-radius:10px;padding:8px 10px;cursor:grab;display:flex;flex-direction:column}
.kanban-card:active{cursor:grabbing}
.kanban-card.dragging{opacity:.4}
.kanban-card-name{font-size:var(--fs-body);font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kanban-card-sub{font-size:11px;color:var(--t3);margin-top:3px;min-height:15px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kanban-card-sub i{vertical-align:-1px;margin-right:2px}
.kanban-card-actions{display:flex;gap:4px;justify-content:flex-end;margin-top:auto;padding-top:6px}
.kanban-empty{font-size:11px;color:var(--t3);text-align:center;padding:16px 0;border:1px dashed var(--b1);border-radius:8px}

/* 2026-07-18 — CRM Fáze C (DOMYSLET T19): výkonové dlaždice. */
.vk-tile{background:var(--bg1);border:1px solid var(--b1);border-radius:12px;padding:16px 18px}
.vk-l{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.3px}
.vk-v{font-size:24px;font-weight:600;color:var(--t1);margin-top:4px}
.vk-sub{font-size:11px;color:var(--t3);margin-top:2px}

/* Příležitosti (opportunity engine) — řádek nad termínem smlouvy: co s tím + kolik je v hře.
   Vzor převzatý z .feed-row (Aktivity), jen s dvěma číselnými sloupci navíc. */
.opp-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--b1)}
.opp-row:last-child{border-bottom:none}
.opp-ico{font-size:20px;flex-shrink:0;width:24px;text-align:center}
.opp-title{font-size:var(--fs-section-title);font-weight:500;color:var(--t1);display:flex;align-items:center;gap:7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp-sub{font-size:11px;color:var(--t3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp-dot{margin:0 5px;color:var(--t3)}
.opp-reason{font-size:var(--fs-body-sm);color:var(--t2);margin-top:4px}
.opp-val{flex:0 0 130px;text-align:right}
.opp-amount{font-size:var(--fs-section-title);font-weight:600;color:var(--t1)}
.opp-vlabel{font-size:var(--fs-label);color:var(--t3);margin-top:1px}
.opp-when{flex:0 0 108px;text-align:right;font-size:12px;font-weight:500}
/* Akční sloupec PEVNĚ (konvence „akční sloupec seznamu = pevná šířka"): bez toho měl řádek
   s tlačítkem „Převzít"/„Úkol" 107 px a řádek jen s ikonou 29 px, takže se částka i termín
   posouvaly o ~78 px řádek od řádku a sloupce nelícovaly (nahlásil uživatel 2026-07-31). */
.opp-row .row-actions{flex:0 0 116px;justify-content:flex-end}

/* „Co kdyby" blok u grafu v detailu cíle (posuvník + živá čárkovaná křivka). */
.wi-box{margin-top:12px;padding-top:10px;border-top:1px solid var(--b1)}
/* Forecast provizí — hlavička sloupce v rozpadu po smlouvách */
.fc-h{font-size:10.5px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.4px}

/* Vstup podle zařízení (viz „Vyfoť smlouvu"): na počítači se smlouva nahrává jako PDF/sken,
   na mobilu se fotí. Přepíná CSS podle typu ukazovacího zařízení, ne JS — jinak by text
   tlačítka po načtení problikl (viz pravidlo o server-side/CSS výchozím stavu).
   BEZ KONZUMENTA OD 9. 8. 2026: tlačítko ze Smluv zmizelo (klient smlouvy nepořizuje), ale
   `importContractPhoto` i `OnPostImportContractPhotoAsync` zůstaly jako rezerva pro budoucí
   poradcovský single-PDF import — viz komentář v `_Obchody.cshtml`. Patří k nim, nemazat zvlášť. */
.only-touch{display:none}
@media (pointer: coarse){
  .only-touch{display:inline}
  .only-pointer{display:none}
}
/* „Klient si to nepřeje řešit" (2026-07-30) — doporučení zůstane vidět, ale šedě a přeškrtnuté;
   do pokrytí se nepočítá. Minimalisticky: žádný text navíc, jen slovo „neřešit" místo procenta. */
.prot-off{opacity:.5}
.prot-off .prot-risk-label,.prot-off .prot-risk-pct{text-decoration:line-through}

/* Karta „Co se změnilo" — bloky se stejnými sloupci; podřádek je odsazený a tlumený,
   ať je na první pohled vidět, co ke komu patří. */
/* ── ŠABLONA HODNOTOVÉHO ŘÁDKU ──────────────────────────────────────────────────────
   Všechny řádky v jednom bloku mají STEJNOU výšku i stejné sloupce; význam nese BARVA
   (a nanejvýš tučnost), NIKDY velikost písma — jinak se řádky rozjedou a blok vypadá
   roztřepeně. Podřazená hodnota = tlumená barva + odsazení, ne menší písmo. */
.vrow{display:flex;align-items:baseline;gap:10px;padding:4px 0;font-size:var(--fs-body);line-height:1.5}
.vrow>span:first-child,.vrow>b:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrow>span:last-child,.vrow>b:last-child{white-space:nowrap;text-align:right}
.vrow-main{color:var(--t2)}
.vrow-main>span:last-child,.vrow-main>b:last-child{color:var(--t1);font-weight:500}
.vrow-sub{color:var(--t3);padding-left:12px;border-left:2px solid var(--b1);margin-left:2px}
.vrow-sub>span:last-child{color:var(--t3)}
.vrow-hero>span:last-child,.vrow-hero>b:last-child{font-weight:600}
.vblocks{display:flex;flex-direction:column;gap:10px}
.vblock{background:var(--bg2);border-radius:10px;padding:8px 12px}
.vhead{font-size:var(--fs-label);color:var(--t3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}

.chg-hero{display:flex;padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid var(--b1)}
.chg-goal{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:var(--fs-body);line-height:1.5}
.chg-goal-name{flex:1;min-width:0;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chg-goal-bar{flex:0 0 54px;height:4px;border-radius:999px;background:var(--b1);overflow:hidden}
.chg-goal-bar>span{display:block;height:100%;border-radius:999px}
.chg-goal-pct{flex:0 0 46px;text-align:right;font-weight:600}
.chg-goal-d{flex:0 0 56px;text-align:right}

/* Životní osa (T62, 2026-08-25) — vertikální časová osa milníků domácnosti */
.osa-wrap{position:relative;margin-top:4px}
.osa-item{position:relative;padding-left:38px;padding-bottom:14px}
.osa-item::before{content:"";position:absolute;left:12px;top:2px;bottom:0;width:2px;background:var(--b1)}
.osa-item:last-child::before{display:none}
.osa-dot{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;background:var(--bg2);border:2px solid var(--b2);z-index:1}
.osa-now{padding-bottom:14px}
.osa-now .osa-dot{background:var(--fs-pink);border-color:var(--fs-pink)}
.osa-now-label{display:flex;align-items:center;height:26px;font-size:12px;font-weight:700;color:var(--fs-pink)}
.osa-card{background:var(--bg1);border:1px solid var(--b1);border-radius:12px;padding:11px 14px;display:flex;align-items:flex-start;gap:12px}
.osa-card-main{flex:1;min-width:0}
.osa-year{font-size:11px;color:var(--t3);font-weight:600}
.osa-label{font-size:var(--fs-body);color:var(--t1);font-weight:600;margin-top:1px}
.osa-note{font-size:var(--fs-body-sm);color:var(--t3);margin-top:3px;line-height:1.4}
.osa-impact{font-size:var(--fs-body-sm);font-weight:600;margin-top:4px}
.osa-fut .osa-dot{opacity:.7;border-style:dashed}
.osa-fut .osa-card{border-style:dashed}

/* Kalkulačky (T60-C) — sandbox „co kdyby", SPA sekce se standardním vizuálem */
.kalk-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.kalk-row label{font-size:12.5px;color:var(--t2);flex:1;min-width:0}
.kalk-unit{position:relative;flex:0 0 auto}
.kalk-unit input{width:150px;text-align:right;padding-right:32px}
.kalk-unit::after{content:attr(data-u);position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--t3);pointer-events:none}
.kalk-out{margin-top:14px;padding-top:14px;border-top:1px solid var(--b1)}
.kalk-lbl{font-size:10.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.4px}
.kalk-big{font-size:24px;font-weight:800;letter-spacing:-.4px;margin-top:2px}
.kalk-note{font-size:12px;color:var(--t2);line-height:1.45;margin-top:8px}
.kalk-note b{font-weight:700}
.kalk-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;margin:10px 0 8px;background:var(--b1)}
.kalk-bar>div{height:100%}

/* Tisk: příručky/průvodce (Manual*, Start*, ProvizniList) jsou na OBRAZOVCE tmavé (default :root),
   ale při TISKU musí být na bílém papíře — vynutíme světlé tokeny jen v @media print. Report rodina
   (LifePlan/Protection, body.light) tím zůstává světlá i v tisku. SPA se netiskne. (2026-08-26) */
@media print {
  :root {
    --bg0:#F3F5FA; --bg1:#FFFFFF; --bg2:#EEF1F8; --bg3:#E3E8F2;
    --b1:rgba(27,44,94,.07); --b2:rgba(27,44,94,.13); --b3:rgba(27,44,94,.22);
    --t1:#0F1A3A; --t2:#3E5080; --t3:#7B90B8;
    --gr:#1A9E5E; --grd:#1A9E5E12; --am:#C47D0A; --amd:#C47D0A12; --rd:#D93F3F; --rdd:#D93F3F12;
    color-scheme: light;
  }
}

/* Snímky obrazovek v průvodcích (Start, StartPoradce) existují ve dvou verzích. Pořizovaly se
   dřív jen ve světlém režimu, takže na tmavé stránce z nich bylo devět bílých obdélníků —
   uživatel to reklamoval 27. 8. 2026. Pravidlo je stejné jako u zbytku: obrazovka drží motiv
   aplikace, tisk je vždy světlý. Proto se nedá vystačit s jedním souborem a přepíná se CSS,
   ne skriptem — tisk musí dostat světlou verzi bez ohledu na to, v jakém motivu se stránka
   načetla. Nový snímek proto vždy pořizuj v OBOU režimech (viewport 1200x640 @2x). */
.qs-shot .qs-light{display:none}
body.light .qs-shot .qs-light{display:block}
body.light .qs-shot .qs-dark{display:none}
@media print{
  .qs-shot .qs-dark{display:none !important}
  .qs-shot .qs-light{display:block !important}
}

/* Obal obsahu SAMOSTATNÉ stránky (mimo SPA) — jeden pro všechny, ať jsou stránky stejné.
   Do 27. 8. 2026 měla každá z 22 provozních stránek (Deníky, Segmentace VZ, Směrnice, Storna…)
   vlastní .xx-wrap s vlastní max-width — devět různých hodnot mezi 760 a 980 px, vycentrovaných.
   Obsah se tím na širokém okně POSOUVAL doprava a nerostl, zatímco v aplikaci drží levý okraj
   a roztahuje se: naměřeno na 1680 px obsah SPA 1388 px od x=266, samostatná stránka 900 px
   od x=390. Při přechodu z menu to viditelně odskočilo.
   Pravidlo je proto shodné s .page (22px 26px, plná šířka) — jen s vyšším spodním odsazením,
   protože samostatná stránka scrolluje sama a nemá pod sebou rám aplikace.
   NOVÁ samostatná stránka bere tuhle třídu; NEZAKLÁDAT si vlastní obal s max-width. */
.std-page{width:100%; box-sizing:border-box; padding:22px 26px 60px;
          display:flex; flex-direction:column; gap:16px}

/* ZÁZNAM O JEDNÁNÍ (27. 9. 2026) — hlavní stránka i pět formulářů kroků sdílí jednu hlavičku
   a jednu lištu kroků (`_ZaznamRamec`). Lišta má vzhled průvodce novým klientem: číslo v kolečku,
   spojnice, aktivní krok růžově; hotový krok nese zelenou fajfku místo čísla, takže je z lišty
   vidět, co v jednání ještě chybí. Každý krok je odkaz — pořadí je doporučené, ne vynucené. */
.zj-kroky{display:flex;align-items:center;gap:0;background:var(--bg1);border:1px solid var(--b1);
  border-radius:12px;padding:12px 14px;overflow-x:auto}
.zj-krok{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--t3);
  text-decoration:none;padding:5px 8px;border-radius:8px;white-space:nowrap;flex-shrink:0;transition:background .15s}
.zj-krok:hover{background:var(--bg2);color:var(--t1)}
.zj-krok-n{width:24px;height:24px;border-radius:50%;background:var(--bg3);color:var(--t3);display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.zj-krok.hotovo{color:var(--t2)}
.zj-krok.hotovo .zj-krok-n{background:var(--grd);color:var(--gr)}
.zj-krok.ted{color:var(--fs-pink)}
.zj-krok.ted .zj-krok-n{background:var(--fs-pink);color:var(--on-accent)}
.zj-spoj{flex:1;min-width:10px;height:1px;background:var(--b1);margin:0 4px}
/* Lišta kroku = patička průvodce jako všude v aplikaci (nový klient, Finanční mapa): čára nad
   lištou, vlevo obrysové „Zpět", vpravo „Uložit" a hlavní „Pokračovat". Názvy kroků do tlačítek
   nepatří — kam se jde, ukazuje lišta kroků nahoře. */
.zj-akce{display:flex;align-items:center;gap:10px;border-top:1px solid var(--b1);padding-top:16px}
.zj-akce .zj-vpravo{margin-left:auto;display:flex;gap:10px}
/* Formulář kroku: skupiny polí jsou karty pod sebou se stejnou mezerou jako rám stránky. */
.zj-form{display:flex;flex-direction:column;gap:16px}
.zj-form fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:16px}
/* Detail obchodu v portálu (A3.24) — `formDynamicAgreement` v režimu view: pole zamčená, bez tlačítek. */
fieldset.ho-jen-cteni{border:0;margin:0;padding:0;min-width:0}
fieldset.ho-jen-cteni[disabled] button{display:none}
.rp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end;margin-bottom:14px}
.rp-grid:last-child,.rp-riziko:last-child,.rp-produkt:last-child,.rp-nastroj:last-child{margin-bottom:0}
.rp-full{grid-column:1 / -1}
.rp-riziko{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end;margin-bottom:14px}
.rp-produkt,.rp-nastroj{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:end;margin-bottom:14px}
.rp-lab{display:block;font-size:var(--fs-label);color:var(--t2);margin-bottom:4px}
/* Pole kroku vyplní celý svůj sloupec — jinak zůstane v poloviční mřížce úzký ostrůvek
   a sloupce pod sebou nelícují. Platí i pro obal vlastní rolety (enhanceSelects). */
.zj-form .ctrl-input,.zj-form .ctrl-select{width:100%;box-sizing:border-box}
.rp-odvozene{height:34px;display:flex;align-items:center;font-size:var(--fs-body);color:var(--t2);border-bottom:1px solid var(--b1)}
.rp-vyber{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.rp-vyber label{display:flex;align-items:center;gap:6px;font-size:var(--fs-body)}
.zj-badge{font-size:11px;padding:2px 9px;border-radius:20px;display:inline-block;background:var(--bg2);color:var(--t2);white-space:nowrap}
/* KARTA S ŘÁDKY (27. 9. 2026). Uživatel: řádky přes celou šířku stránky („popisek vlevo, stav
   o metr dál vpravo") vypadaly amatérsky. Karty se proto kladou po dvou vedle sebe a řádek je
   položka seznamu: pevná výška, tenká dělicí linka, hodnota u pravého okraje POLOVIČNÍ karty.
   Řádek-odkaz má šipku a zvýrazní se pod myší. */
.zj-dvojice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
@media(max-width:900px){.zj-dvojice{grid-template-columns:minmax(0,1fr)}.zj-aktivita-radek{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.zj-seznam{display:flex;flex-direction:column;margin-top:4px}
.zj-radek{display:flex;align-items:center;gap:10px;min-height:42px;padding:4px 0;border-top:1px solid var(--b1);
  font-size:var(--fs-body);color:var(--t2);text-decoration:none;box-sizing:border-box}
.zj-radek:first-child{border-top:0}
.zj-radek .zj-hodnota{margin-left:auto;color:var(--t1);font-weight:500;text-align:right;white-space:nowrap}
.zj-radek.pod{min-height:30px;padding-left:34px;border-top:0;color:var(--am)}
a.zj-radek{margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:8px;transition:background .15s}
a.zj-radek + a.zj-radek{border-top-left-radius:0;border-top-right-radius:0}
a.zj-radek:hover{background:var(--bg2);color:var(--t1)}
a.zj-radek .ti-chevron-right{color:var(--t3);font-size:15px}
.zj-radek .zj-krok-n{width:24px;height:24px}
.zj-radek.hotovo .zj-krok-n{background:var(--grd);color:var(--gr)}
.zj-akcni{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.zj-badge.draft{background:var(--amd);color:var(--am)}
.zj-badge.locked{background:var(--grd);color:var(--gr)}
.zj-badge.cancelled{background:var(--bg2);color:var(--t3)}

/* Překryv při pomalém přechodu stránky (přepnutí do/z holver agendy, uzávěrka). Vzhled je z tokenů
   appky — tmavý/světlý motiv i barva se řídí zbytkem. Skrytý defaultně, ukazuje ho showNavOverlay(). */
#nav-overlay{
  position:fixed;inset:0;z-index:4000;display:none;
  align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--bg1) 82%, transparent);
  backdrop-filter:blur(3px);
}
#nav-overlay.show{display:flex}
.nav-overlay-box{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  background:var(--bg2);border:1px solid var(--b1);border-radius:12px;
  padding:28px 40px;box-shadow:0 20px 60px rgba(0,0,0,.4);
  color:var(--t1);font-size:var(--fs-body);font-weight:500;
}
.nav-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--b1);border-top-color:var(--fs-pink);
  animation:navspin .7s linear infinite;
}
@keyframes navspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nav-spinner{animation-duration:2s}}

/* Zástupce formuláře mimo dosah Safari AutoFillu (viz _odlehcitFormulare ve studio.js). Nese
   tytéž atributy i děti jako <form>, jen výchozí zobrazení formuláře musí dostat odsud. */
fs-form{display:block}

/* Holveroví klienti (28. 9. 2026) — dlouhá záhlaví („Nadcházející výročí") se v úzkém sloupci zkrátí, nepřetečou do souseda. */
#holver-klienti-table thead th{overflow:hidden;text-overflow:ellipsis}

/* MŮJ TÝM v detailu prodejce (holverův lwc/brokerMyTeam, 28. 9. 2026) — strom struktury k dnešku.
   Řádek 36 px, odsazení podle hloubky nese inline padding-left; metatext „ID => role" tlumeně. */
.tym-strom{padding:8px 16px}
.tym-deti{list-style:none;margin:0;padding:0}
.tym-uzel.sbaleno > .tym-deti{display:none}
.tym-radek{display:flex;align-items:center;gap:8px;min-height:36px;min-width:0}
.tym-radek a{color:var(--t1);text-decoration:none;min-width:0}
.tym-radek a:hover{color:var(--fs-pink)}
.tym-radek.vybrany a{color:var(--hodnota);font-weight:600}
.tym-sipka{width:16px;flex:0 0 16px;color:var(--t3);cursor:pointer;text-align:center}
.tym-meta{color:var(--t3);white-space:nowrap}

/* ── B-opravy (30. 9.) — místní vizuální opravy holverové části (audit ve WebKitu, oddíl B) ──
   Dluhy: roleta Stav („Nevyřešené") se do sloupce Vyřešeno (8 %) nevešla; šablona řádku
   hledání se musí shodovat s <colgroup> v _HolverDluhyTelo.cshtml. */
:root{ --dluh-cols:14% 17% 13% 11% 10% 23% 12%; }
/* Nástěnka příležitostí (B15): sloupec, nad kterým se táhne karta. */
.pril-nad{outline:2px dashed var(--fs-pink);outline-offset:-2px}

/* Karta klienta v backoffice (12. 10. 2026): první nadpis záložky bez horní mezery — bloky si ji
   nesou samy (margin-top:22px inline), u prvního v záložce by odsadila obsah od lišty záložek. */
.hk-zalozka > .det-sec-title:first-child { margin-top: 0 !important; }

/* PILULKY V BUŇCE SEZNAMU — vždy JEDEN řádek (13. 10. 2026). Zalomená pilulka se v řádku 47 px
   schovala a druhou roli nebylo vidět. Co se nevejde, nahradí pilulka „+N" s výpisem v nápovědě
   (studio.js `_pilulkyPlus`, přepočítá se při změně šířky i u řádků dotažených za běhu). */
.pilulky{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;overflow:hidden;min-width:0}
.pilulky>*{flex-shrink:0;white-space:nowrap}
.pilulky>.pilulky-plus{background:var(--bg3);color:var(--t2)}

/* ŠTÍTEK V BUŇCE SEZNAMU SE NEZALAMUJE (13. 10. 2026, VZHLED §2). Zalomený štítek se v řádku 47 px
   schoval (Sektor, Kategorie, Stav). Delší text se ořízne; celý je v nápovědě buňky nebo štítku. */
.tbl td .badge,.tbl td .pill,.seznam-hlava ~ * .badge{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}