/* ═══════════════════════════════════════════
   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:30% 10% 9% 12.75% 12.75% 12.75% 12.75%;
  --sort-cols:42% 30% 14% 14%;
  --nero-cols:9% 15% 16% 18% 12% 8% 22%;
  --dluh-cols:15% 20% 17% 11% 9% 11% 17%;
  --storno-cols:13% 16% 14% 10% 10% 10% 14% 13%;
  --vyj-cols:20% 20% 15% 11% 11% 15% 8%;
  --pozad-cols:11% 16% 26% 18% 12% 9% 8%;

  --fs-navy:#1B2C5E;--fs-pink:#E91E8C;--fs-pink3:#fce4f1;
  --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 */
  --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;
}
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:17px;
  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}
.ni.active{background:rgba(233,30,140,.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)}
.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(233,30,140,.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:#fff;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:#fff}
.zpr-unread{background:var(--fs-pink);color:#fff;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:11.5px;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}
.modal-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{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)}
/* 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(233,30,140,.15);
  color:var(--fs-pink);border:1px solid rgba(233,30,140,.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{padding:5px 8px}
.icon-edit,.icon-del,.icon-info{background:none;border:none;cursor:pointer;padding:2px;display:inline-flex;
  align-items:center;font-size:17px;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-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(233,30,140,.15);color:var(--fs-pink);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.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:13px}
.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:11.5px;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}
/* 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:13px}
.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}
/* Sankce není ani úprava (zelená), ani smazání (červená): je to POSTIH, a než ho někdo uloží,
   nic se neděje. Tlumená barva sedí na obojí — nekřičí u každého řádku, že je něco špatně,
   a přitom netvrdí, že je všechno v pořádku. */
.icon-sankce{color:var(--t3)}
.icon-sankce:hover{color:var(--am);opacity:1}
.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 tenkým obtahem (stroke-width 1.3) */
.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.3' 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.3' 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.3' 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.3' 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:1fr 1fr;gap:14px}
.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,1fr);gap:10px;align-items:start}
.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:10px;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,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(233,30,140,.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}
.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(233,30,140,.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}
/* 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). */
.filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.fpill{font-size:11.5px;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(233,30,140,.15);color:var(--fs-pink);
  border-color:rgba(233,30,140,.3);font-weight:500}
.fpill:hover:not(.on){background:var(--bg2);color:var(--t1)}
/* 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. */
.pf-ord-grid{display:grid;grid-template-columns:74px 84px 90px 84px 96px 84px 100px 100px 130px 80px 1fr;gap:8px;min-width:1010px}
.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(233,30,140,.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}
.ctrl-select{cursor:pointer;appearance:auto}
.ctrl-input::placeholder{color:var(--t3)}
.ctrl-input:focus,.ctrl-select:focus{border-color:var(--fs-pink);box-shadow:0 0 0 2px rgba(233,30,140,.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}
/* 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)}
.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í. */
.input-empty{color:var(--t3) !important;opacity:.7}
/* 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(233,30,140,.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:11.5px;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:17px;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:11.5px;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:13px;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}
/* ── 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}
/* Řá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í). */
.osoby-row:not(.osoby-head),.cl-row,.prodejci-row:not(.prodejci-head),
.penezenky-row:not(.penezenky-head),.ba-row:not(.ba-head),.uz-row:not(.uz-head),
.pskup-row:not(.pskup-head),
.obchod-list-row{height:57px;box-sizing:border-box;overflow:hidden}
table.tbl tbody tr:last-child{border-bottom:none}
table.tbl tbody tr:nth-child(even){background:var(--bg2)}
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,.ba-row.ba-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)}
.ba-row.ba-head>div{padding:10px 16px;cursor:pointer}
.ba-row.ba-head>div:last-child{cursor:default}
/* Avatar v řádku lidského seznamu — jako u Osoby: 34px kolečko s iniciálami. */
.list-avatar{width:34px;height:34px;border-radius:9px;background:var(--bg3);color:var(--t2);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11px;flex-shrink:0}
.list-person{display:flex;align-items:center;gap:12px;padding:11px 0;min-width:0}
.list-person .lp-name{font-size:13px;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. */
#prodejci-list .prodejci-row:nth-child(even),
#pskup-list .pskup-row:nth-child(even),
#pobch-list .pobch-row:nth-child(even),
#clients-grid .cl-row:nth-child(even){background:var(--bg2)}

/* 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);font-size:12px}
/* 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}

.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:10px;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:10px}
.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}
.card-pane{display:none;flex-direction:column;gap:14px}.card-pane.on{display:flex}
@media(max-width:1100px){.mets{grid-template-columns:repeat(2,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:11.5px;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,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:11.5px;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)}
.notif-panel{position:fixed;top:73px;right:16px;width:360px;background:var(--bg1);border:1px solid var(--b2);border-radius:13px;box-shadow:0 8px 32px rgba(0,0,0,.4);z-index:500;display:none}
.notif-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--b1)}
.notif-panel-list{max-height:380px;overflow-y:auto;padding:8px}
.notif-panel-item{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border-radius:9px;cursor:pointer;transition:background .12s}
.notif-panel-item:hover{background:var(--bg2)}
.notif-panel-footer{padding:10px 16px;border-top:1px solid var(--b1);text-align:center}

/* ══ 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}
.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:10px;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:10px;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:11.5px;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). */
  --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 100px var(--col-icons-2);
  /* 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: 18% 16% 10% 10% 13% 13% 20%;
  --listiny-cols: 26% 14% 12% 16% 18% 14%;
  /* poslední sloupec je akční (sankce) — pevná šířka, ať se řádek nerozjede podle obsahu */
  --penezenky-cols: 1fr 140px 140px 130px 150px 110px 70px;
  --sortiment-cols: 1fr 240px 160px 96px;
  --prodejci-cols: 118px minmax(150px,1.1fr) 150px 132px minmax(160px,1fr) 78px 118px 44px;
  /* Pohled prodejce/manažera — skupina (lidé) a obchody (data). */
  --pskup-cols: 110px minmax(150px,1.2fr) 64px 68px 92px 120px 128px 150px;
  --pobch-cols: 150px minmax(170px,1.4fr) minmax(130px,1fr) 100px 110px;
  --uz-cols: 200px 1fr 140px 62px 172px 210px 60px;
  --ba-cols: 220px 120px 160px 140px 220px;
  /* 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) minmax(78px,.8fr) 190px;
}
.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,.ba-row>div{min-width:0}
.uz-row,.ba-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:13px}
.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), obchody DATOVÝ (46 px). */
.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:13px}
.pobch-row{display:grid;grid-template-columns:var(--pobch-cols);align-items:center;gap:10px;
  padding:0 14px;border-top:1px solid var(--b1);font-size:13px;height:46px;box-sizing:border-box}
.pskup-head,.pobch-head{border-top:none;padding:10px 14px;height:auto}
.pskup-head .sortable-th,.pobch-head .sortable-th{cursor:pointer}
.pskup-row>div,.pobch-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:13px}
.penezenky-head{border-top:none;padding:10px 14px}
.penezenky-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: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:13px}
.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:13.5px;margin:16px 0 8px;color:var(--fs-pink)}
.policy-doc-preview h4{font-size:13px;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)}
.policy-doc-preview table{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:12.5px}
.policy-doc-preview th,.policy-doc-preview td{border:1px solid var(--b1);padding:8px 10px;text-align:left;vertical-align:top}
.policy-doc-preview th{background:var(--bg2);color:var(--t2);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px}

/* 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. */
.rb-tag{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:500;white-space:nowrap;cursor:default;
}
.rb-tag .ti{font-size:14px}
.rb-tag-ro{background:rgba(245,166,35,.14);border:1px solid var(--am);color:var(--am)}
.rb-tag-demo{background:rgba(233,30,140,.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:11.5px;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)}

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:11.5px;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:13.5px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-sub{font-size:11.5px;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:13px;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:13.5px;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:11.5px;color:var(--t2);margin-top:4px}
.opp-val{flex:0 0 130px;text-align:right}
.opp-amount{font-size:13.5px;font-weight:600;color:var(--t1)}
.opp-vlabel{font-size:10px;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). */
.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:13px;color:var(--t1);font-weight:600;margin-top:1px}
.osa-note{font-size:11.5px;color:var(--t3);margin-top:3px;line-height:1.4}
.osa-impact{font-size:11.5px;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}

/* POSTUP UZÁVĚRKY — pět kroků měsíce v jednom pruhu (viz _AdvUzaverky).
   Uzávěrka se dělá jednou za měsíc a ne najednou: mezi příkazem do banky a tím, že peníze
   odejdou, je den. Pracovník proto nepotřebuje průvodce, ale postup, který si pamatuje, kde
   skončil — hotové kroky ztlumené s datem, ten na řadě zvýrazněný. Nic to neblokuje. */
.krok-pruh{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.krok{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;line-height:1;
      padding:4px 7px;border-radius:7px;white-space:nowrap;border:1px solid transparent}
.krok i{font-size:12px}
.krok-hotovo{background:var(--bg2);color:var(--t3)}
.krok-ted{background:rgba(229,24,122,.10);color:var(--fs-pink);border-color:rgba(229,24,122,.28);font-weight:600}
.krok-ceka{background:transparent;color:var(--t3);opacity:.45}
