/* ============================================================
   Datamart — Segment screen + DataTable (shared component styles)
   ONE table engine, reused across entities (Lidé, Firmy, …) with
   different columns + data. Pairs with _ds/segment-screen.js.
   Load AFTER colors_and_type.css.
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font-sans); color: var(--fg); background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv05" 1, "cv08" 1, "ss01" 1; font-variant-numeric: tabular-nums; }
#root { height: 100vh; overflow: hidden; }
.ti { display: inline-flex; line-height: 1; font-size: 16px; }
.app { display: flex; flex-direction: column; height: 100vh; }

/* ---- global bar ---- */
.gbar { height: 50px; flex: none; display: grid; align-items: center; grid-template-columns: var(--sidebar-w) 1fr var(--sidebar-w); gap: var(--sp-4); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); justify-self: start; }
.brand .lg { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: #fff; background: var(--accent); }
.brand .lg .ti { font-size: 16px; }
.brand .nm { font: 600 15px var(--font-display); color: var(--ink-900); letter-spacing: -0.01em; }
.gsearch { justify-self: center; width: 100%; max-width: 640px; display: flex; align-items: center; gap: var(--sp-3); height: 34px; padding: 0 var(--sp-4); background: var(--surface-100); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--fg-muted); box-shadow: var(--shadow-xs); }
.gsearch .ph { flex: 1; text-align: center; font: 400 13px var(--font-sans); color: var(--fg-muted); }
.gsearch kbd { font: 600 11px var(--font-mono); color: var(--fg-muted); background: var(--surface-75); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px var(--sp-2); }
.gright { justify-self: end; }
.icobtn { width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--fg-secondary); cursor: pointer; border: 1px solid transparent; background: transparent; }
.icobtn:hover { background: var(--hover-surface); }
.icobtn .ti { font-size: 18px; }

.body { flex: 1; display: flex; min-height: 0; }
/* ---- sidebar ---- */
.sidebar { width: var(--sidebar-w); flex: none; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: var(--sp-3) var(--sp-3); gap: 1px; overflow-y: auto; }
.nav-row { display: flex; align-items: center; gap: var(--sp-3); height: var(--row-h-nav); padding: 0 var(--sp-3); border-radius: var(--radius-md); font: 500 13px var(--font-sans); color: var(--ink-700); cursor: pointer; }
.nav-row .ti { font-size: 16px; color: var(--ink-500); flex: none; }
.nav-row:hover { background: var(--hover-surface); }
.nav-row.active { background: var(--active-surface); color: var(--ink-900); }
.nav-row.active .ti { color: var(--ink-700); }
.nav-row .chev { margin-left: auto; font-size: 14px; color: var(--fg-muted); }
.sub { display: flex; align-items: center; gap: var(--sp-3); height: var(--row-h-nav); padding: 0 var(--sp-3) 0 var(--sp-4); border-radius: var(--radius-md); font: 500 13px var(--font-sans); color: var(--ink-700); cursor: pointer; }
.sub:hover { background: var(--hover-surface); }
.sub.active { background: var(--active-surface); color: var(--ink-900); }
.sub .wand { width: 18px; height: 18px; display: grid; place-items: center; color: var(--accent-violet); flex: none; }
.sub .wand .ti { font-size: 15px; }
.sub .sg { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: #fff; flex: none; }
.sub .sg .ti { font-size: 11px; }
.sub .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sub .x { margin-left: auto; font-size: 13px; color: var(--fg-muted); }

/* error region (failed load) — centered in the scroll surface */
.sgb-state { flex: 1; min-height: 0; display: grid; place-items: center; padding: 56px 20px; }

/* ============ the 2D scroll surface ============ */
.sgb { --sgb-top-h: 46px; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; background: transparent; position: relative; }
.sgb::-webkit-scrollbar { width: 11px; height: 11px; }
.sgb::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-sm); border: 3px solid transparent; background-clip: content-box; }
.sgb::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); background-clip: content-box; }
.sgb::-webkit-scrollbar-track, .sgb::-webkit-scrollbar-corner { background: transparent; }

/* header (sticky top, z6) */
.sgb-top { position: sticky; top: 0; left: 0; z-index: 6; flex: none; display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--bg-canvas); }
.sgb-id { flex: none; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.sgb-id .seg-ic { width: 26px; height: 26px; border-radius: var(--radius-sm); display: grid; place-items: center; color: #fff; flex: none; }
.sgb-id .seg-ic .ti { font-size: 15px; }
.sgb-id .seg-ic.lead { background: transparent; color: var(--ink-700); }
.sgb-id .seg-ic.lead .ti { font-size: var(--ico-md); }
.sgb-title { font: 600 14px var(--font-display); color: var(--fg); letter-spacing: -0.01em; white-space: nowrap; }

/* saved chrome */
.sgb-saved { flex: none; min-width: 0; padding: var(--sp-5) 20px; display: flex; flex-direction: column; gap: 20px; border-bottom: 1px solid var(--border); }
.sov-group { display: flex; flex-direction: column; gap: var(--sp-3); }
.sov-label { display: flex; align-items: center; gap: var(--sp-3); font: 600 11px var(--font-sans); color: var(--fg-muted); }
.sov-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.sov-desc { margin: 0; max-width: 820px; font: 400 13px/1.6 var(--font-sans); color: var(--fg); }

/* fchip — label │ value */
.fchip { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-100); }
.fchip .lab { display: flex; align-items: center; padding: 0 var(--sp-4); font: 500 13px var(--font-sans); color: var(--fg-secondary); white-space: nowrap; }
.fchip .val { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); font: 500 13px var(--font-display); color: var(--ink-900); border-left: 1px solid var(--border); letter-spacing: -0.01em; white-space: nowrap; }
.fchip.up { background: var(--positive-subtle); border-color: color-mix(in srgb, var(--positive) 35%, transparent); }
.fchip.up .lab, .fchip.up .val { color: var(--positive-ink); }
.fchip.up .val { border-left-color: color-mix(in srgb, var(--positive) 22%, transparent); }
.fchip-ic { font-size: 14px; color: var(--fg-muted); flex: none; }
.fchip.up .fchip-ic { color: var(--positive-ink); }
.fchip-dots { display: inline-flex; align-items: center; gap: var(--sp-2); }
.fchip-dots .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--line-300); }
.fchip-dots .dot.on { background: var(--ink-500); }

/* ============ table (the reusable DataTable) ============ */
.table-wrap { overflow: visible; flex: none; }
/* --sgb-id-w = STROP identity (1.) sloupce. Bez něj jediné dlouhé jméno roztáhne
   tabulku (`width: max-content` + `white-space: nowrap`) a odsune ostatní sloupce mimo
   viewport. Zůstává LOKÁLNÍ proměnnou enginu vedle --ck-w, ne tokenem foundations:
   identity sloupec má v systému jediného konzumenta (tuhle tabulku) a šířky komponent
   drží DS u enginů (--ck-w, --dlg-label-w, --sml-page-w); ve foundations je z šířek jen
   --sidebar-w, což je míra shellu. Až strop bude chtít druhá komponenta, povýšení je
   levné — rozebírat foundations token, který si někdo mezitím vzal, není. */
.sgb-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; --ck-w: 36px; --sgb-id-w: 350px; }
.sgb-table th, .sgb-table td { padding: 0 var(--sp-3); height: var(--row-h); text-align: left; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--border), inset -1px 0 0 var(--border); }
.sgb-table thead th { position: sticky; top: var(--sgb-top-h); z-index: 3; background: var(--bg-canvas); font: 500 13px var(--font-sans); color: var(--fg-secondary); }
.sgb-table th.col-ck, .sgb-table td.col-ck { position: sticky; left: 0; z-index: 2; background: var(--bg-canvas); padding-left: var(--sp-4); width: 36px; }
.sgb-table thead th.col-ck + th, .sgb-table tbody td.col-ck + td { position: sticky; left: var(--ck-w); z-index: 2; background: var(--bg-canvas); }
.sgb-table thead th.col-ck, .sgb-table thead th.col-ck + th { z-index: 4; }
.sgb-table tbody tr.sgb-rowclick { cursor: pointer; }
.sgb-table tbody tr.sgb-rowclick:hover td, .sgb-table tbody tr.sgb-rowclick:hover td.col-ck, .sgb-table tbody tr.sgb-rowclick:hover td.col-ck + td { background: var(--hover-surface); }
.sgb-table tbody tr.sgb-rowclick.sel td, .sgb-table tbody tr.sgb-rowclick.sel td.col-ck, .sgb-table tbody tr.sgb-rowclick.sel td.col-ck + td { background: var(--selected); }
.table-wrap.scrolled-x .sgb-table tbody td.col-ck + td, .table-wrap.scrolled-x .sgb-table thead th.col-ck + th { box-shadow: inset 0 -1px 0 var(--border), 9px 0 10px -7px rgba(0,0,0,0.18); }

/* header content */
.sgb-th-col { position: relative; }
.sgb-table thead th .sgb-th-in { display: inline-flex; align-items: center; gap: var(--sp-2); padding-right: 22px; }
.sgb-th-ic { font-size: 14px; color: var(--fg-muted); flex: none; }
.sgb-th-lbl { overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.sgb-th-kebab { width: 20px; height: 20px; position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%); display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--fg-muted); cursor: pointer; opacity: 0; transition: opacity 0.11s ease; }
.sgb-th-col:hover .sgb-th-kebab, .sgb-th-kebab.open { opacity: 1; }
.sgb-th-kebab .ti { font-size: var(--ico-sm); }
.sgb-th-kebab:hover { background: var(--hover-surface); color: var(--fg); }
.sgb-th-kebab.open { background: var(--active-surface); color: var(--fg); }
.sgb-th-add { width: 100%; }
.sgb-addcol { display: inline-flex; align-items: center; gap: var(--sp-2); height: 26px; padding: 0 var(--sp-3); border-radius: var(--radius-sm); border: 0; background: transparent; font: 500 13px var(--font-sans); color: var(--fg-muted); cursor: pointer; }
.sgb-addcol:hover, .sgb-addcol.open { background: var(--hover-surface); color: var(--ink-700); }
.sgb-addcol .ti { font-size: var(--ico-xs); }
/* sort direction marker + inline column rename input */
.sgb-table thead th .sgb-th-sortmark { margin: 0; font-size: 13px; color: var(--accent); flex: none; }
.sgb-th-edit { width: 104px; height: 22px; padding: 0 var(--sp-2); border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface-100); color: var(--fg); font: 600 12px var(--font-sans); outline: none; }
/* add-column menu heading + disabled menu items */
.sgb-addmenu-head { padding: var(--sp-2) var(--sp-3) var(--sp-1); font: 500 11px var(--font-sans); color: var(--fg-muted); }
.sgb-menu-pop button:disabled { opacity: 0.4; cursor: default; }
.sgb-menu-pop button:disabled:hover { background: transparent; }

/* cells */
/* Strop je na OBSAHU buňky, ne na <td>: `max-width` na buňce auto table layout spolehlivě
   nectí. Odečtením vodorovného paddingu <td> (2× --sp-3) vyjde sloupec přesně na --sgb-id-w
   (změřeno: td = 350,0 px, .cell-id = 334 px). Co se nevejde, končí `…` a celé to ukáže
   tooltip na hover — a ten se nasazuje AŽ na mouseenter a JEN když text opravdu přetéká
   (scrollWidth > clientWidth), s textem čteným z DOMu, ne z dat řádku. Obojí je záměr:
   bublina nad krátkým jménem jen opakuje, co je vidět, a u maskované buňky by title z dat
   řádku byl cesta, kterou zdrojová hodnota vyteče.
   ZÁVISLOST NA KONCOVÉM SPACER SLOUPCI (přeměřeno 28. 7. 2026): strop drží v OBOU režimech —
   když tabulka kontejner přetéká i když nepřetéká. Drží ho `<th class="sgb-th-add">`, který
   engine renderuje VŽDY (v `lite` taky — podmíněné je jen tlačítko „Přidat sloupec" uvnitř)
   a který má `width: 100%`, takže spolkne veškeré volné místo z `min-width: 100%`. Na ostatní
   sloupce žádné nezbyde a identity zůstane na stropu. Změřeno na živé appce (/reporty, `lite`,
   dlouhé jméno): protékající režim td = 350,0 px, spacer 16 px; NEprotékající režim
   (wrap 2073 = tabulka 2073) td = 350,0 px, .cell-id = 334 px, spacer 847 px, za výpustkou
   0 px prázdna. Strop se tedy zapínat MÁ i u embedovaných tabulek s pár sloupci.
   ⚠️ Kdo by spacer sloupec zrušil (např. „v lite je stejně prázdný"), rozbije tím strop:
   volné místo by se rozdělilo mezi sloupce, td by se roztáhlo a za výpustkou by zbylo prázdno.
   Auto table layout `max-width` na buňce nectí, takže bez `table-layout: fixed` to CSS neumí
   podmínit — spacer je tu nosný prvek, ne dekorace. */
.cell-id { display: flex; align-items: center; gap: var(--sp-3); max-width: calc(var(--sgb-id-w) - 2 * var(--sp-3)); }
/* Zmenšuje se jen jméno; avatar, logo firmy i vlastní identity mark drží svou velikost. */
.cell-id > *:not(.nm) { flex: none; }
.cell-id.cell-open { cursor: pointer; }
.cell-id.cell-open:hover .nm { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.av { display: grid; place-items: center; line-height: 1; font-family: var(--font-display); font-weight: 600; flex: none; width: 24px; height: 24px; font-size: 10px; color: hsl(var(--av-hue) 52% 42%); background: var(--surface-75); border: 1.5px solid hsl(var(--av-hue) 62% 60%); }
.av.circle { border-radius: 50%; }
.av.square { border-radius: var(--radius-sm); }
.cell-id .nm { font: 500 13px var(--font-sans); color: var(--ink-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-v { font: 400 13px var(--font-sans); color: var(--fg); }
.cell-mono { font: 500 13px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--fg-secondary); }
.cell-bool-on { color: var(--positive); font-size: var(--ico-sm); }
.cell-bool-off { color: var(--ink-300); }
.cell-dots { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cell-dots i { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--line-300); }
.cell-dots i.on { background: var(--ink-400); }
.ck { width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--border-strong); display: grid; place-items: center; background: var(--surface-100); opacity: 0; transition: opacity 0.11s ease; }
tr.sgb-rowclick:hover .ck, tr.sgb-rowclick.sel .ck { opacity: 1; }
.ck.on, .ck.mixed { background: var(--accent); border-color: var(--accent); color: #fff; }
.ck .ti { font-size: 12px; }
/* interactive selection box — the .ck square is the visual; a hidden native input drives a11y/keyboard */
.sgb-ck { position: relative; display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }
.sgb-ck input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.sgb-ck .ck { transition: background 110ms ease, border-color 110ms ease, box-shadow 110ms ease; }
.sgb-ck:hover .ck { border-color: var(--accent); }
.sgb-ck input:focus-visible + .ck { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.sgb-ck-all .ck { opacity: 1; }   /* the header select-all is always visible (data-row boxes appear on hover) */
.grade { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); flex: none; height: 20px; padding: 0 var(--sp-3); border-radius: var(--radius-pill); white-space: nowrap; --gc: var(--bonita-grey); font: 600 11.5px var(--font-display); letter-spacing: 0.01em; line-height: 1; background: color-mix(in srgb, var(--gc) 24%, #fff); color: color-mix(in srgb, var(--gc) 44%, #14100a); }
.grade.green { --gc: var(--bonita-green); } .grade.lime { --gc: var(--bonita-lime); } .grade.amber { --gc: var(--bonita-amber); } .grade.rose { --gc: var(--bonita-rose); } .grade.grey { --gc: var(--bonita-grey); }

/* column kebab menu */
.sgb-menu-scrim { position: fixed; inset: 0; z-index: 40; }
.sgb-menu-pop { position: fixed; z-index: 41; width: max-content; max-width: 244px; padding: var(--sp-2); display: flex; flex-direction: column; gap: 1px; background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.sgb-menu-pop button { display: flex; align-items: center; gap: var(--sp-3); height: 34px; padding: 0 var(--sp-3); border: 0; background: transparent; border-radius: var(--radius-sm); font: 500 13px var(--font-sans); color: var(--fg); cursor: pointer; text-align: left; white-space: nowrap; }
.sgb-menu-pop button:hover { background: var(--hover-surface); }
.sgb-menu-pop button .ti { font-size: var(--ico-sm); color: var(--fg-muted); flex: none; }
.sgb-menu-sep { height: 1px; margin: var(--sp-2) var(--sp-2); background: var(--border); flex: none; }

/* footer + sticky CTA */
.sgb-foot { flex: none; position: sticky; left: 0; z-index: 5; height: 40px; display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4); border-top: 1px solid var(--border); background: var(--bg-canvas); }
.sgb-foot .rng { font: 500 12px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--fg-muted); }
.sgb-stickybar { position: sticky; bottom: 0; left: 0; z-index: 6; flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); background: var(--surface-100); box-shadow: 0 -6px 18px -12px rgba(0,0,0,0.18); }
.sgb-sizeval { display: inline-flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; font: 600 13px var(--font-sans); color: var(--fg-secondary); }
.sgb-sizeval strong { font-weight: 600; font-size: 14px; color: var(--fg); }
.sgb-sizeval .sep { color: var(--fg-muted); }
.sgb-stickybar.selecting .sgb-sizeval strong { color: var(--accent); }
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); height: 30px; padding: 0 var(--sp-4); border-radius: var(--radius-sm); font: 500 13px var(--font-sans); cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.btn .ti { font-size: 16px; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary .ti { color: #fff; }
.btn.ghost { color: var(--fg-muted); }
/* bordered sekundární — port kanonické varianty z src globals.css (.btn.default). Overlay footery ji sdílí místo paralelního .usg-btn.
   ELEVACE: kanon = DS karta Components · Buttons (.btn.default), tedy xs. */
.btn.default { background: var(--surface-100); border-color: var(--border-strong); box-shadow: var(--shadow-xs); color: var(--ink-800); }
.btn.default:hover { background: var(--surface-75); }
[data-theme="dark"] .btn.default { background: var(--surface-50); }
.sgb-top .btn.ghost { margin-left: auto; }

/* ============ builder mode (Průvodce) ============ */
.sgb-filters { flex: none; position: sticky; left: 0; z-index: 30; display: flex; gap: var(--sp-5); align-items: stretch; padding: var(--sp-4); border-bottom: 1px solid var(--border); background: var(--bg-canvas); }
.sgb-tabs { flex: none; width: 216px; display: flex; flex-direction: column; gap: var(--sp-0); padding-right: var(--sp-4); border-right: 1px solid var(--border); }
.sgb-tab { display: flex; align-items: center; gap: var(--sp-3); width: 100%; height: var(--row-h-nav); padding: 0 var(--sp-3); border: 0; background: transparent; border-radius: var(--radius-md); font: 500 13px var(--font-sans); color: var(--ink-700); cursor: pointer; text-align: left; }
.sgb-tab:hover { background: var(--hover-surface); }
.sgb-tab.active { background: var(--active-surface); color: var(--ink-900); }
.sgb-tab .lead { font-size: var(--ico-sm); color: var(--ink-500); flex: none; }
.sgb-tab.active .lead { color: var(--ink-700); }
.sgb-tab .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgb-tab .count { min-width: 18px; height: 18px; padding: 0 var(--sp-2); border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent-ink); font: 600 10px var(--font-display); display: inline-grid; place-items: center; flex: none; }
.sgb-panel { flex: 1; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: var(--sp-4); align-content: start; }
.adr { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end; max-width: 760px; }
.adr-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.adr-grow { flex: 1; min-width: 300px; }
.adr-lbl { font: var(--label); color: var(--fg-secondary); }
.adr-combo { display: flex; align-items: stretch; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-100); }
.adr-combo:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.adr-okoli { position: relative; display: flex; align-items: center; gap: var(--sp-2); flex: none; padding: 0 var(--sp-3); border-left: 1px solid var(--border); color: var(--fg-secondary); font: 500 13px var(--font-sans); cursor: pointer; white-space: nowrap; }
.adr-okoli .ti { font-size: var(--ico-sm); color: var(--fg-muted); }
.adr-okoli .cv { font-size: var(--ico-xs); color: var(--fg-muted); }
.adr-select { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); height: 38px; min-width: 180px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-100); font: 500 13px var(--font-sans); color: var(--fg); cursor: pointer; }
.adr-select .ti { font-size: var(--ico-xs); color: var(--fg-muted); }
/* autocomplete (našeptávač) */
.ac { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.ac-lead { display: grid; place-items: center; padding-left: var(--sp-3); color: var(--fg-secondary); }
.ac-lead .ti { font-size: var(--ico-sm); }
.ac-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; padding: 0 var(--sp-3); font: 500 13px var(--font-sans); color: var(--fg); }
.ac-input::placeholder { color: var(--fg-muted); }
.ac-clear { display: grid; place-items: center; width: 28px; flex: none; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; }
.ac-clear:hover { color: var(--fg); }
.ac-clear .ti { font-size: var(--ico-xs); }
.ac-pop { position: absolute; top: calc(100% + 6px); left: -1px; right: -1px; z-index: 60; margin: 0; padding: var(--sp-2); list-style: none; background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); max-height: 320px; overflow-y: auto; }
.ac-opt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); cursor: pointer; }
.ac-opt > .ti { font-size: var(--ico-sm); color: var(--fg-muted); flex: none; }
.ac-opt.active { background: var(--hover-surface); }
.ac-opt-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ac-opt-txt .nm { font: 600 13px var(--font-sans); color: var(--fg); }
.ac-opt-txt .meta { font: 400 11px var(--font-sans); color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-opt-psc { font: 500 12px var(--font-mono); color: var(--fg-muted); flex: none; }
/* CZ map */
.cz-map { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 540px; }
.cz-map-or { font: 500 12px var(--font-sans); color: var(--fg-muted); margin-top: var(--sp-0); }
.cz-map-svg { width: 100%; height: auto; display: block; }
.cz-region { cursor: pointer; outline: none; }
.cz-region path { fill: var(--surface-75); stroke: var(--border-strong); stroke-width: 0.6; transition: fill 0.12s ease, stroke 0.12s ease; }
.cz-region:hover path { fill: var(--accent-tint); stroke: var(--accent); }
.cz-region.on path { fill: var(--accent); stroke: var(--accent-press); }
.cz-labels { pointer-events: none; }
.cz-labels text { font: 600 4.2px var(--font-sans); fill: var(--fg-secondary); text-anchor: middle; dominant-baseline: central; user-select: none; letter-spacing: 0.1px; }
.cz-labels text.on { fill: #fff; }
.cz-map-foot { display: flex; align-items: center; gap: var(--sp-3); min-height: 22px; }
.cz-map-count { display: inline-flex; align-items: center; gap: var(--sp-2); font: 600 12px var(--font-sans); color: var(--accent-ink); }
.cz-map-count .ti { font-size: var(--ico-xs); color: var(--accent); }
.cz-map-hint { font: 400 12px var(--font-sans); color: var(--fg-muted); }
/* results bar (builder) */
.sgb-resbar { flex: none; position: sticky; left: 0; z-index: 5; display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--bg-canvas); }
.sgb-chips { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sgb-chips .empty { font: 400 13px var(--font-sans); color: var(--fg-muted); }
.sgb-clearall { border: 0; background: transparent; font: 600 13px var(--font-sans); color: var(--accent); cursor: pointer; padding: 0 var(--sp-1); }
.fchip-x { display: grid; place-items: center; width: 30px; flex: none; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--fg-muted); cursor: pointer; }
.fchip-x:hover { background: var(--hover-surface); color: var(--fg); }
.fchip-x .ti { font-size: var(--ico-xs); }
/* locked PII cell */
.cell-lock { display: inline-flex; align-items: center; gap: var(--sp-2); font: 500 13px var(--font-sans); color: var(--fg-muted); }
.cell-lock .ti { font-size: var(--ico-xs); }

/* ============ Unlock-segment overlay — Overlay system (centered purchase confirm) ============ */
/* ===== DS Overlay system (zdroj pravdy: DS karta dialog.html — Dialog system; kit šablona smazána).
   Jeden wash (--ov-scrim), jeden podpisový stín (--overlay-shadow), jeden pohyb
   (ovScrim/ovRise). Sdílí HO KAŽDÝ overlay v appce — unlock (.usg) i save (.dlg). ===== */
:root { --overlay-shadow: 0 24px 64px -16px rgba(16,19,28,.28), 0 8px 22px -8px rgba(16,19,28,.13), 0 0 0 1px rgba(18,22,31,.05); --ov-scrim: rgba(22,24,30,.07); --ov-scrim-dim: rgba(20,22,28,.30); }
[data-theme="dark"] { --overlay-shadow: 0 28px 72px -16px rgba(0,0,0,.72), 0 8px 22px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07); --ov-scrim: rgba(0,0,0,.48); --ov-scrim-dim: rgba(0,0,0,.66); }
@keyframes ovScrim { from { opacity: 0; } to { opacity: 1; } }
@keyframes ovRise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.usg-scrim { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: center; padding: var(--sp-6); background: var(--ov-scrim); animation: ovScrim .12s ease both; }
.usg-shell { width: 452px; max-width: calc(100vw - 48px); max-height: 85vh; display: flex; flex-direction: column; background: var(--surface-100); border-radius: var(--radius-xl); box-shadow: var(--overlay-shadow); overflow: hidden; animation: ovRise .16s cubic-bezier(.4,0,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .usg-scrim, .usg-shell, .dlg-scrim, .dlg { animation: none !important; } }
.usg-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-4); flex: none; border-bottom: 1px solid var(--border); }
/* sdílená header ikona overlayů — PLOCHÁ inline ikona (DS: ikona ≠ dlaždice, žádné pozadí) */
.ov-ic { display: inline-flex; flex: none; color: var(--fg-secondary); }
.ov-ic .ti { font-size: var(--ico-md); }
.usg-tx { display: flex; min-width: 0; flex: 1; }
.usg-t { font: 600 15px var(--font-display); letter-spacing: -0.01em; color: var(--fg); }
.usg-x { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--fg-secondary); cursor: pointer; }
.usg-x:hover { background: var(--hover-surface); }
.usg-x .ti { font-size: var(--ico-sm); }
.usg-body { padding: var(--sp-5); flex: 1; min-height: 0; overflow-y: auto; }
.usg-val { font: 400 13.5px/1.5 var(--font-sans); color: var(--fg); }
.usg-val b { font-weight: 600; }
.usg-list { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin: var(--sp-4) 0 var(--sp-1); }
.usg-item { display: inline-flex; align-items: center; gap: var(--sp-2); font: 500 13px var(--font-sans); color: var(--fg-secondary); }
.usg-item .ti { font-size: var(--ico-sm); color: var(--accent-violet); }
/* receipt — bonita-tiered price breakdown (count × unit = subtotal, then total) */
.usg-receipt { margin-top: 15px; }
.usg-rh, .usg-line, .usg-total { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-1) var(--sp-5); }
.usg-rh { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.usg-rh span { font: 500 11px var(--font-sans); color: var(--fg-muted); }
.usg-rh .c2, .usg-rh .c3, .usg-line .c2, .usg-line .c3, .usg-total .c3 { text-align: right; }
.usg-line { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-100); }
.usg-line .c1 { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.usg-line .c1 .lbl { font: 500 13px var(--font-sans); color: var(--fg); }
.usg-line .c2 { font: 500 12px var(--font-mono); color: var(--fg-secondary); white-space: nowrap; }
.usg-line .c3 { font: 600 13px var(--font-mono); color: var(--ink-900); white-space: nowrap; }
.usg-total { padding-top: var(--sp-4); }
.usg-total .c1 { font: var(--h3); color: var(--ink-900); letter-spacing: -0.01em; }
.usg-total .c3 { font: 600 16px var(--font-mono); color: var(--ink-900); white-space: nowrap; }
.usg-bal { display: flex; align-items: baseline; gap: var(--sp-4); margin-top: var(--sp-4); }
.usg-bal .k { font: 400 13px var(--font-sans); color: var(--fg-secondary); }
.usg-bal .sp { flex: 1; }
.usg-bal .v { font: 600 13px var(--font-mono); color: var(--ink-900); white-space: nowrap; }
.usg-bal .bal-old { color: var(--fg-muted); text-decoration: line-through; }
.usg-bal .bal-arrow { color: var(--fg-muted); margin: 0 var(--sp-2); }
.usg-note { margin-top: var(--sp-4); font: 400 12px/1.45 var(--font-sans); color: var(--fg-muted); }
.usg-foot { flex: none; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-5); border-top: 1px solid var(--border); }
.usg-foot .sp { flex: 1; }
/* footer tlačítka = sdílená DS .btn (.default / .primary), žádný paralelní .usg-btn */
.usg-kbd { font: 500 11px var(--font-mono); color: rgba(255,255,255,.82); background: rgba(255,255,255,.16); border-radius: var(--radius-xs); padding: 1px var(--sp-2); }
/* ===== save-segment dialog — ported 1:1 from src/components (save-segment-dialog.tsx + segment-icon-picker.tsx). NEPŘEPISOVAT vlastní stylistikou. ===== */
@keyframes dlg-spin { to { transform: rotate(360deg); } }
.ti.spin { animation: dlg-spin 0.8s linear infinite; }
/* save dialog = DS Overlay „form" — sdílí wash/stín/pohyb shellu (viz nahoře); head+foot pinned, scrolluje jen body */
.dlg-scrim { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding: 11vh var(--sp-6) var(--sp-6); background: var(--ov-scrim); animation: ovScrim .12s ease both; }
.dlg { width: 480px; max-width: calc(100vw - 48px); max-height: 85vh; overflow: hidden; background: var(--surface-100); border-radius: var(--radius-xl); box-shadow: var(--overlay-shadow); display: flex; flex-direction: column; animation: ovRise .16s cubic-bezier(0.4, 0, 0.2, 1) both; }
.dlg-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5); border-bottom: 1px solid var(--border); flex: none; }
.dlg-head .t { font: 600 15px var(--font-display); color: var(--fg); letter-spacing: -0.01em; min-width: 0; }
.dlg-x { margin-left: auto; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--fg-muted); cursor: pointer; }
.dlg-x:hover { background: var(--hover-surface); color: var(--fg); }
.dlg-x .ti { font-size: var(--ico-sm); }
.dlg-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); }
.dlg-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.dlg-label { display: flex; align-items: center; gap: var(--sp-2); font: var(--label); color: var(--fg-secondary); }
.dlg-label .opt { font-weight: 400; color: var(--fg-muted); }
.dlg-gen { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0; cursor: pointer; border: 0; background: transparent; color: var(--pill-purple-ink); font: 600 12px var(--font-sans); }
.dlg-gen:hover { text-decoration: underline; }
.dlg-gen:disabled { opacity: 0.55; cursor: default; text-decoration: none; }
.dlg-gen .ti { font-size: var(--ico-xs); color: var(--accent-violet); }
.dlg-name-row { display: flex; align-items: center; gap: var(--sp-3); }
.dlg-name-row .sgb-input { flex: 1; min-width: 0; }
.dlg-textarea { height: auto; min-height: 76px; padding: var(--sp-3) var(--sp-4); line-height: 1.5; resize: vertical; }
.dlg-summary { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.dlg-sum-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.dlg-sum-row .k { font: 400 13px var(--font-sans); color: var(--fg-secondary); }
.dlg-sum-row .v { font: 600 13px var(--font-sans); color: var(--fg); }
.dlg-sum-row .v.price { font-weight: 600; }
.dlg-foot { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); flex: none; }
.dlg-foot .btn:disabled { opacity: 0.5; cursor: default; }
/* Klávesová afordance v patičce dialogu (vlevo, `margin-right:auto`) — kanon dialog.html.
   AD 26. 8. 2026: role je NÁPOVĚDA KE ZKRATCE, ne text sdělení. Do tohohle slotu NEPATŘÍ
   potvrzovací otázka ani jiné sdělení; na potvrzení je <Confirm> v TĚLE dialogu. */
.dlg-kbd { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; font: 500 12px var(--font-sans); color: var(--fg-secondary); }
.dlg-kbd kbd, .dlg-kbd .kbd { font: 500 11px var(--font-mono); color: var(--fg-secondary); background: var(--surface-75); border: 1px solid var(--line-200); border-radius: 4px; padding: 1px 5px; }
.sgb-input { width: 100%; height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-100); color: var(--fg); font: 500 13px var(--font-sans); outline: none; }
.sgb-input::placeholder { color: var(--fg-muted); }
.sgb-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
/* segment identity tile — solid --ic-{tone} + white glyph; 20px v navigaci, 40px editovatelný trigger v dialogu */
.seg-ic { display: inline-grid; place-items: center; flex: none; border-radius: var(--radius-sm); color: #fff; }
.seg-ic .ti { color: inherit; }
.seg-ic.blue { background: var(--ic-blue); } .seg-ic.purple { background: var(--ic-purple); } .seg-ic.green { background: var(--ic-green); } .seg-ic.lime { background: var(--ic-lime); } .seg-ic.amber { background: var(--ic-amber); } .seg-ic.rose { background: var(--ic-rose); } .seg-ic.grey { background: var(--ic-grey); }
.segpick { position: relative; flex: none; display: inline-flex; }
.segpick-trigger { width: 26px; height: 26px; padding: 0; border: 0; cursor: pointer; transition: box-shadow 0.12s ease; }
.segpick-trigger .ti { font-size: var(--ico-sm); }
.segpick-trigger:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.segpick-trigger[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--accent); }
/* z-index 101 = kanonická vrstva menu (.acrm-popover): portálovaný do document.body, nad dialogem 80/90 */
.segpick-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 101; /* kanonická vrstva menu (.acrm-popover) */ width: 276px; padding: var(--sp-3); background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
/* grid s rovnoměrnými sloupci — všech 8 barev (7 tónů + custom label) stejně široké a vždy se vejdou */
.segpick-tones { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.segpick-tone { height: 24px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; }
.segpick-tone .dot { width: 18px; height: 18px; border-radius: 50%; transition: box-shadow 0.12s ease; }
.segpick-tone.blue .dot { background: var(--ic-blue); } .segpick-tone.purple .dot { background: var(--ic-purple); } .segpick-tone.green .dot { background: var(--ic-green); } .segpick-tone.lime .dot { background: var(--ic-lime); } .segpick-tone.amber .dot { background: var(--ic-amber); } .segpick-tone.rose .dot { background: var(--ic-rose); } .segpick-tone.grey .dot { background: var(--ic-grey); }
.segpick-tone:hover .dot { box-shadow: 0 0 0 2px var(--surface-100), 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.segpick-tone.on .dot { box-shadow: 0 0 0 2px var(--surface-100), 0 0 0 4px var(--accent); }
/* 8. možnost — vlastní barva přes native color picker */
.segpick-tone.custom { position: relative; }
.segpick-tone.custom .dot { background: conic-gradient(from 135deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e); }
.segpick-tone.custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.segpick-search { display: flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-3); margin-bottom: var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-75); }
.segpick-search .ti { font-size: var(--ico-sm); color: var(--fg-secondary); flex: none; }
.segpick-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 13px var(--font-sans); color: var(--fg); }
.segpick-search input::placeholder { color: var(--fg-muted); }
.segpick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); max-height: 140px; overflow-y: auto; padding: var(--sp-1); margin: -4px; }
.segpick-ic { width: 100%; aspect-ratio: 1; border: 0; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.12s ease; }
.segpick-ic .ti { font-size: var(--ico-sm); }
.segpick-ic:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.segpick-ic.on { box-shadow: 0 0 0 2px var(--accent); }
.segpick-empty { grid-column: 1 / -1; padding: var(--sp-5); text-align: center; font: 400 12px var(--font-sans); color: var(--fg-muted); }
.segpick-more { grid-column: 1 / -1; padding: var(--sp-3) var(--sp-1) var(--sp-0); text-align: center; font: 400 11px var(--font-sans); color: var(--fg-muted); }

/* ============ DataTable `lite` mode (gate ruling 6.7.26) ============
   Embedded tabulka bez segment chrome: žádný frozen identity sloupec / select-all /
   ⋮ column menu / add-column; hlavička řadí klikem (asc → desc → none). Engine
   (React port v appce) přidává prop `lite`, volitelné identity/sel/toggle a
   SegCol.sortVal pro řazení formátovaných buněk. */
.table-wrap.lite .sgb-table thead th { top: 0; } /* mimo .sgb není --sgb-top-h — lepí se ke scroll containeru */
.table-wrap.lite .sgb-table thead th.sgb-th-col { cursor: pointer; user-select: none; }
.table-wrap.lite .sgb-table thead th.sgb-th-col:hover { color: var(--fg); }
.table-wrap.lite .sgb-table thead th .sgb-th-in { padding-right: 0; } /* bez kebabu není potřeba rezerva */

/* ============ souhrnný řádek (summary row) — AD 24. 7. 2026 ============
   Per-sloupcové výpočty pod tabulkou. Technicky <tfoot> téhož .sgb-table, takže se sloupce
   lícují samy (zamrzlá identita + checkbox, hairline mřížka, horizontální scroll). Oddělený
   BĚŽNOU vlasovou linkou --border jako každý řádek — bez zvýraznění. Identity buňka drží
   defaultně počet položek; ostatní sloupce nesou volitelný, type-aware výpočet (počet / součet /
   průměr / medián / …), přepínaný per sloupec. Zapíná se propem `summary` na DataTable.
   Čísla jsou PLNÁ (kanon: v tabulkách nezkracovat na „1,3M"). Není to stránkovací lišta. */
.sgb-table tfoot td { position: sticky; bottom: 0; z-index: 3; height: var(--row-h); padding: 0; background: var(--surface-75); box-shadow: inset 0 1px 0 var(--border), inset -1px 0 0 var(--border); }
.sgb-table tfoot td.col-ck { left: 0; z-index: 5; padding: 0; background: var(--surface-75); }
.sgb-table tfoot td.col-ck + td { position: sticky; left: var(--ck-w); z-index: 5; background: var(--surface-75); }
.table-wrap.scrolled-x .sgb-table tfoot td.col-ck + td { box-shadow: inset 0 1px 0 var(--border), 9px 0 10px -7px rgba(0,0,0,0.18); }
.sgb-sum { display: flex; align-items: center; gap: var(--sp-2); width: 100%; height: var(--row-h); padding: 0 var(--sp-3); border: 0; background: transparent; cursor: pointer; text-align: left; font: 500 13px var(--font-sans); color: var(--fg); }
.sgb-sum:hover { background: var(--hover-surface); }
.sgb-sum.open { background: var(--active-surface); }
.sgb-sum-val { font: 600 13px var(--font-sans); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.sgb-sum-fn { font: 500 12px var(--font-sans); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgb-sum-add { color: var(--fg-muted); }
.sgb-sum-add:hover { color: var(--fg-secondary); }
.sgb-sum-add .ti { font-size: var(--ico-xs); flex: none; }
.sgb-summenu button.sel { color: var(--accent-ink); }
.sgb-summenu button.sel .ti { color: var(--accent); }
.sgb-summenu .sgb-sum-check { margin-left: auto; padding-left: var(--sp-4); color: var(--accent); font-size: var(--ico-sm); flex: none; }
.sgb-summenu .rm { color: var(--critical-ink); }
.sgb-summenu .rm .ti { color: var(--critical); }