/* Ported verbatim from packages/ui/reference/screens/_ds/segment-screen.css — do not hand-edit; re-sync from DS. */
/* ============================================================
   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.
   ============================================================ */
/* NOTE: global resets (*, html, body, #root) from the DS source are intentionally
   dropped here — the app's own shell owns those. Component classes only below. */
.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; /* ds-ok: hodnota DS zdroje _ds/segment-screen.css */
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--accent);
}
.brand .lg .ti {
  font-size: 16px;
}
.brand .nm {
  font: var(--h2);
  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: var(--p);
  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; /* ds-ok: hodnota DS zdroje _ds/segment-screen.css */
  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; /* ds-ok: záměrná hodnota mimo škálu (věrný DS port) */
}

/* ============ 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: 1;
  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;
}

/* ============================================================
   A master „Tabulkový výpis" — tři zóny baru (DS list-view.html).
   Identita (.sgb-id + .sgb-count) · filtry (.sgb-tools) · akce (.sgb-actions).
   Bar je JEDNA komponenta (SegmentScreen) — úprava tady se propíše do všech výpisů.
   ============================================================ */
.sgb-count {
  flex: none;
  font: 600 12px var(--font-mono);
  color: var(--fg-secondary);
  background: var(--active-surface);
  border-radius: var(--radius-pill);
  padding: 1px var(--sp-3);
}
/* svislý oddělovač skupin (1px · 20px) */
.sgb-top .tdiv {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 var(--sp-1);
  flex: none;
}
/* filtry (střed) — vyplní volný prostor, akce pak odtlačí doprava */
.sgb-tools {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
/* akce (vpravo) */
.sgb-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  margin-left: auto;
}
/* fulltext hledání v baru */
.sgb-search {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 30px;
  min-width: 200px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-100);
  box-shadow: var(--shadow-xs);
  color: var(--fg-muted);
}
.sgb-search .ti {
  font-size: 15px;
  color: var(--fg-secondary);
  flex: none;
}
.sgb-search input {
  flex: 1;
  min-width: 80px;
  border: 0;
  outline: none;
  background: transparent;
  font: 400 13px var(--font-sans);
  color: var(--fg);
}
.sgb-search input::placeholder {
  color: var(--fg-muted);
}
/* tichý ovládací chip (stav / Řadit / Filtr) — rounded-rect, hairline, chevron */
.sgb-ctl {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-100);
  box-shadow: var(--shadow-xs);
  font: 500 12px var(--font-sans);
  color: var(--ink-700);
  cursor: pointer;
  white-space: nowrap;
}
.sgb-ctl:hover {
  background: var(--surface-75);
}
.sgb-ctl .ti {
  font-size: 14px;
  color: var(--fg-secondary);
}
.sgb-ctl .k {
  color: var(--fg-muted);
}
.sgb-ctl .v {
  color: var(--ink-900);
  font-weight: 600;
}
.sgb-ctl .chev {
  font-size: 14px;
  color: var(--fg-muted);
}
.sgb-ctl.on {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.sgb-ctl.on .ti,
.sgb-ctl.on .k,
.sgb-ctl.on .chev {
  color: var(--accent-ink);
}
.sgb-ctl .badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--sp-1);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font: 600 10px var(--font-display);
}

/* saved chrome */
.sgb-saved {
  flex: none;
  min-width: 0;
  padding: var(--sp-5) 20px; /* ds-ok: hodnota DS zdroje _ds/segment-screen.css */
  display: flex;
  flex-direction: column;
  gap: 20px; /* ds-ok: hodnota DS zdroje _ds/segment-screen.css */
  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);
}
/* ds-ok: DS zdroj má /1.6 natvrdo (off-token); držíme type token --p (1.5) */
.sov-desc {
  margin: 0;
  max-width: 820px;
  font: var(--p);
  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-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  --ck-w: 36px;
}
.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; /* ds-ok: hodnota DS zdroje _ds/segment-screen.css */
}
.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: var(--overline);
  color: var(--fg-muted);
}
.sgb-menu-pop button:disabled {
  opacity: 0.4;
  cursor: default;
}
.sgb-menu-pop button:disabled:hover {
  background: transparent;
}

/* cells */
.cell-id {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.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);
}
.cell-v {
  font: var(--p);
  color: var(--fg);
}
/* Klikací buňka (SegCol.link) — např. firma → detail firmy. Accent + podtržení na hover. */
.cell-link {
  font: var(--p);
  color: var(--accent);
  text-decoration: none;
}
.cell-link:hover {
  text-decoration: underline;
}
.cell-mono {
  font: 500 13px var(--font-mono);
  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; /* ds-ok: hodnota DS zdroje _ds/segment-screen.css */
  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); /* ds-ok: DS bonita ink-mix kotva */
}
.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: var(--mono);
  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);
}
/* global `.btn` removed — now aliased to the canonical `.acrm-btn` in ds.css
   (single source of truth). Only the contextual layout rule below remains. */
.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: var(--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: var(--small);
  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: var(--p);
  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, 0.28), 0 8px 22px -8px rgba(16, 19, 28, 0.13),
    0 0 0 1px rgba(18, 22, 31, 0.05);
  --ov-scrim: rgba(22, 24, 30, 0.07);
  --ov-scrim-dim: rgba(20, 22, 28, 0.3);
}
[data-theme='dark'] {
  --overlay-shadow:
    0 28px 72px -16px rgba(0, 0, 0, 0.72), 0 8px 22px -8px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.07);
  --ov-scrim: rgba(0, 0, 0, 0.48);
  --ov-scrim-dim: rgba(0, 0, 0, 0.66);
}
@keyframes ovScrim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ovRise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.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 0.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 0.16s cubic-bezier(0.4, 0, 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: var(--h2);
  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; /* ds-ok: hodnota DS zdroje _ds/segment-screen.css */
}
.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: var(--overline);
  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: var(--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: var(--p);
  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, 0.82);
  background: rgba(255, 255, 255, 0.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 0.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 0.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: var(--h2);
  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: var(--p);
  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 aliased to canonical .acrm-input in ds.css (drifted def removed). */
/* 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 200: portálovaný do document.body, musí být NAD overlay scrimem (z90) */
.segpick-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
  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 {
  /* prettier-ignore */
  background: conic-gradient(from 135deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e); /* ds-ok: gradient stops (color wheel) */
}
.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` mód (gate ruling 6.7.26) ============
   Publikováno upstream do DS `_ds/segment-screen.css` (6.7.26).
   Embedded tabulka bez segment chrome: žádný frozen sloupec / select-all /
   ⋮ menu / add-column; hlavička řadí klikem. */
.table-wrap.lite .sgb-table thead th {
  /* mimo .sgb není --sgb-top-h — lepí se k hornímu okraji scroll containeru */
  top: 0;
}
.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 {
  /* bez kebabu není potřeba rezerva vpravo */
  padding-right: 0;
}

/* AddToListDialog — řádky ručních listů (Přidat do seznamu) */
.atl-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--fg);
}
.atl-row:hover {
  background: var(--surface-75);
}
.atl-row:disabled {
  opacity: 0.6;
  cursor: default;
}
.atl-ic {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--fg-on-accent);
  flex: none;
}
.atl-txt {
  flex: 1;
  min-width: 0;
}
.atl-name {
  display: block;
  font: var(--cell);
  font-weight: 600;
}
.atl-sub {
  display: block;
  font: var(--overline);
  color: var(--fg-muted);
}
.atl-on {
  color: var(--positive);
}