/* =========================================================================
   PALETTE / DESIGN TOKENS  - from index-palette.html (same system)
   ========================================================================= */
:root{
  --bg:#f4f5f9; --surface:#ffffff; --surface-2:#fafbfd; --rail:#141829;
  --ink:#1a1f36; --ink-2:#5b637a; --ink-3:#9aa1b4; --ink-4:#bcc2d2;
  --line:#e9ebf3; --line-2:#dde0ec;
  --accent:#5b5bf0; --accent-ink:#4040d8; --accent-soft:#ececfe; --accent-soft-2:#f5f5ff;
  --c-nabidky:#5b5bf0; --c-zakazky:#e0a008; --c-faktury:#1f9d6b;
  --c-sklad:#0ea5b5; --c-stroje:#8b5cf6; --c-reporty:#e0526a; --c-lide:#5b5bf0;
  --c-statistiky:#0f8fa8; --c-logy:#7c8299;
  --c-firmy:#3b6fb0; --c-system:#6b7280; --c-objednavky:#c2571e; --c-expedice:#b0468c;
  /* Pokladna sells what Finance invoices — one colour for the pair, kept as its own token
     so the section can still be re-coloured on its own later. */
  --c-pokladna:var(--c-faktury);
  --ok:#1f9d6b; --ok-soft:#e6f6ef;
  /* Green of the assistant confirmation button; the topnav waiting state borrows it so both read as the same prompt. */
  --ai-confirm:#2e7d32;
  --warn:#b9770a; --warn-soft:#fbf0d6;
  /* Grain gets its own token: it is not a warning and not a section, so borrowing
     --warn or a --c-* would misstate what the colour means. Lives here, not on .sviz —
     a legend drawn outside the picture needs the same colour. */
  --sviz-grain:#eab308;
  --danger:#e05260; --danger-soft:#fdecee;
  --r-sm:7px; --r:11px; --r-lg:15px;
  --sh-1:0 1px 2px rgba(20,24,54,.05),0 1px 1px rgba(20,24,54,.04);
  --sh-2:0 4px 16px rgba(20,24,54,.08),0 1px 3px rgba(20,24,54,.05);
  --sh-pop:0 18px 50px rgba(20,24,54,.2);
  --t:140ms cubic-bezier(.4,0,.2,1);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
/* Global tooltip — body-level, never clipped, sits above everything, no shadow. */
.indi-tip{position:fixed;z-index:2147483000;max-width:260px;background:#141829;color:#eef1ff;font-size:11.5px;line-height:1.45;font-weight:500;padding:9px 11px;border-radius:8px;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s ease,transform .12s ease;text-transform:none;letter-spacing:normal;white-space:normal}
.indi-tip.show{opacity:1;transform:none}
/* The (i) affordance that opens one — a help mark, never a control. */
.tip{display:inline-grid;place-items:center;width:15px;height:15px;color:var(--ink-3);cursor:help;vertical-align:-3px;margin-left:3px}
.tip svg{width:100%;height:100%}

*{box-sizing:border-box}
html,body{height:100%}
html{scrollbar-gutter:stable}
/* Per-user magnification of the whole shell (topnav > Zobrazení). `zoom` is the only scaling
   that leaves fixed positioning and hit-testing intact; the price is that geometry read from
   JS comes back multiplied, which Indigo.zoom in indigo.js converts back to CSS pixels. */
html{zoom:var(--ui-zoom,1)}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
/* Placeholders sit one step lighter than muted text (--ink-4, not --ink-3) — at --ink-3
   an empty field reads like a filled one. Applies to every field type, Choices included. */
input::placeholder,textarea::placeholder{color:var(--ink-4);opacity:1}
.choices__placeholder{color:var(--ink-4);opacity:1}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}

/* =========================================================================
   SHARED AVATAR - same for menu and table, supports initials or photo
   ========================================================================= */
/* Per-record color comes in via the --av-bg custom property (data → CSS, no inline style rules). */
.avatar{border-radius:9px;flex:0 0 auto;display:grid;place-items:center;position:relative;
  font-weight:700;color:#fff;letter-spacing:.02em;overflow:hidden;background:var(--av-bg,var(--accent))}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.avatar.sm{width:30px;height:30px;font-size:11px}
.avatar.md{width:36px;height:36px;font-size:13px}

/* =========================================================================
   SHELL - topnav + left menu (light)
   ========================================================================= */
/* z-index 10000: the topnav is the stacking context for the AI chat + notif popups,
   which must sit above page overlays (Choices/flatpickr dropdowns use 9999). */
.topnav{position:fixed;top:0;left:0;right:0;height:54px;z-index:10000;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 16px 0 0}
.tn-brand{width:212px;flex:0 0 212px;display:flex;align-items:center;padding-left:18px}
.tn-brand .tn-logo{height:17px;width:auto;display:block}
.tn-crumb{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;color:var(--ink-2)}
.tn-crumb .sep{color:var(--ink-3)}
.tn-crumb .here{color:var(--accent-ink);background:var(--accent-soft);padding:2px 8px;border-radius:6px;font-size:12px}
.topnav .grow{flex:1}
.omni{position:relative;display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line-2);border-radius:22px;padding:8px 16px;color:var(--ink-3);font-size:13px;font-weight:500;width:min(560px,40vw);min-width:280px;transition:var(--t)}
/* Horní pole zvýrazněné (fialový ring), když je asistent OTEVŘENÝ — jako ostatní aktivní pole. */
.omni.active{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.omni .sp{color:var(--accent);display:flex}.omni .sp svg{width:16px;height:16px}
.omni input{flex:1;border:0;outline:0;background:transparent;font-size:13px;color:var(--ink);font-weight:500;min-width:0}
.omni input::placeholder{color:var(--ink-4);font-weight:500}
.omni kbd{font:inherit;font-size:11px;background:var(--surface);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px}
.tico{position:relative;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;transition:var(--t);border:0;background:transparent}
.tico:hover{background:var(--bg);color:var(--ink)}
.tico svg{width:19px;height:19px}
.tico .badge{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:1.5px solid var(--surface)}
.tico-wrap{position:relative;display:inline-flex}
.tn-actions{display:flex;align-items:center;gap:2px;padding-right:6px}

.side{position:fixed;top:54px;left:0;bottom:0;width:212px;z-index:50;background:var(--surface);border-right:1px solid var(--line);color:var(--ink-2);display:flex;flex-direction:column}
.nav{padding:12px 12px 6px;display:flex;flex-direction:column;gap:1px;flex:1;overflow:auto}
.nav .sec{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:11px 12px 4px}
.nav a{display:flex;align-items:center;gap:11px;padding:7px 12px;border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;font-weight:500;font-size:13.5px;transition:var(--t);position:relative}
.nav a:hover{background:var(--bg);color:var(--ink)}
/* Active item wears its own section color (--sc): text + icon + bar + soft tint all match. Falls back to accent for sections without a color (e.g. Přehled). */
.nav a.active{background:color-mix(in srgb,var(--sc,var(--accent)) 10%,var(--surface));color:var(--sc,var(--accent-ink))}
.nav a::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--sc,transparent);opacity:.4;transition:var(--t)}
.nav a:hover::before{opacity:.85}
.nav a.active::before{opacity:1}
.nav a>svg:first-child{width:18px;height:18px;flex:0 0 18px;color:var(--sc,#9499bf)}
.nav .chev{margin-left:auto;width:14px;height:14px;flex:0 0 14px;color:var(--ink-3);transition:transform var(--t)}
.nav a.open .chev{transform:rotate(90deg)}
/* Small "work in progress" tag pinned to the right of a nav label (e.g. Mockup). */
.nav a .nav-badge{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sc,var(--accent-ink));background:color-mix(in srgb,var(--sc,var(--accent)) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--sc,var(--accent)) 26%,var(--surface));padding:1px 6px;border-radius:20px;flex:0 0 auto}
.submenu{display:none;flex-direction:column;gap:1px;margin:1px 0 3px}
.submenu.open{display:flex}
.submenu a{padding:6px 12px 6px 41px;font-size:12.5px;color:var(--ink-2);font-weight:500}
.submenu a:hover{color:var(--ink)}
/* Submenu items wear the group's section colour too (--sc is set on the .submenu itself,
   since it is a sibling of the group link and would not inherit it). */
.submenu a.active{color:var(--sc,var(--accent-ink));background:color-mix(in srgb,var(--sc,var(--accent)) 10%,var(--surface))}
/* The left bar stays a marker of the open child — quiet on hover, full on the active one. */
.submenu a::before{opacity:0}
.submenu a:hover::before{opacity:.5}
.submenu a.active::before{opacity:1}
.grow{flex:1}
.side .foot{padding:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:6px}
.side .foot .user{flex:1;min-width:0}
/* Logging out sits next to the profile, quiet until hovered - it is a rare, one-way action. */
.side .signout{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--ink-3);transition:var(--t)}
.side .signout svg{width:17px;height:17px}
.side .signout:hover{background:var(--danger-soft);color:var(--danger)}
.side .user{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-sm);transition:var(--t);cursor:pointer}
.side .user:hover{background:var(--bg)}
.side .user.active{background:var(--accent-soft)}
.side .user .nm{font-size:12.5px;color:var(--ink);font-weight:600;line-height:1.2;min-width:0}
.side .user .nm small{display:block;color:var(--ink-3);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.content{margin:54px 0 0 212px;padding:24px 24px 70px}
/* The inner column every page lines up on. It is carried by the auto side margins, so a
   direct child of .content must never set a margin shorthand with fixed sides (margin:0 0 16px
   and friends) — that wipes them and the block hugs the left while the rest of the page stays
   centred. Write margin:0 auto 16px, or wrap the page body in one element and space inside it. */
.content>*{max-width:1480px;margin-left:auto;margin-right:auto}

/* =========================================================================
   PAGE HEAD - title + actions (generic for every CRUD section)
   ========================================================================= */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
/* Rozestup mezi bloky stránky (kartami, panely) drží kontejner, ne jednotlivé bloky —
   per-blok margin se při každé nové kartě zapomene a stránka se slepí. */
.page-stack{display:flex;flex-direction:column;gap:18px}
.page-stack .page-head{margin-bottom:0}

/* Lišta záložek (Indigo.tabs) — primitivum, ne kopie v každé sekci: stránka, která
   záložky má, potřebuje stejnou lištu, stejné odsazení i stejný aktivní stav. */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:11px 15px;font-weight:600;font-size:13.5px;color:var(--ink-2);border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:0;cursor:pointer;white-space:nowrap;transition:var(--t)}
.tab svg{width:16px;height:16px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.tab .tcount{font-size:11px;font-weight:700;color:var(--ink-2);background:var(--bg);padding:1px 7px;border-radius:20px}
.tab.active .tcount{color:var(--accent-ink);background:var(--accent-soft)}
/* Panel patřící k záložce: schovaný, dokud není jeho záložka otevřená. */
.panel{display:none}
.panel.active{display:block}

/* `hidden` musí schovat i prvek, který si nese vlastní display (.btn, .mail-meta) —
   jinak atribut mlčky nefunguje a JS „skrytí" nic neudělá. */
[hidden]{display:none!important}
.page-title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:11px}
/* Section colour lands here via --sc (set on the icon in the page view) — the page icon
   is the only in-section chrome that wears it; everything else stays accent. */
.page-title .pt-ico{width:32px;height:32px;border-radius:9px;background:color-mix(in srgb,var(--sc,var(--accent)) 14%,#fff);color:var(--sc,var(--accent-ink));display:grid;place-items:center}
.page-title .pt-ico svg{width:19px;height:19px}
.page-sub{margin:4px 0 0 43px;color:var(--ink-2);font-size:13px}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);padding:9px 14px;font-weight:600;font-size:13px;line-height:1;transition:var(--t);white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn:not(:disabled):hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft-2)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:not(:disabled):hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:not(:disabled):hover{background:var(--danger);border-color:var(--danger);color:#fff;filter:brightness(.94)}
/* Disabled — the system had no such state, so a button waiting for input looked ready to
   click. Hover belongs to enabled buttons only (see the :not(:disabled) on each variant). */
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.sm{padding:6px 10px;font-size:12px}
.btn.icon{padding:6px;width:32px;justify-content:center}
.btn.active{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
/* Busy button — label swapped for a spinner, so the width never jumps mid-request.
   Colours come from --spin-* (defaults suit a filled button); pair with disabled. */
.is-busy{position:relative;color:transparent!important}
.is-busy>*{visibility:hidden}
/* inset+margin:auto centers it exactly; the spin animation owns transform, and pseudo
   elements are outside the global box-sizing reset, hence the explicit border-box. */
.is-busy::after{content:"";position:absolute;inset:0;width:16px;height:16px;margin:auto;box-sizing:border-box;border-radius:50%;
  border:2px solid var(--spin-track,rgba(255,255,255,.4));border-top-color:var(--spin-ink,#fff);animation:indiSpin .7s linear infinite}

/* Section-coded button — an action/link pointing at ANOTHER section carries style="--sc:var(--c-xxx)".
   The target section's colour plus a section-coloured hover echo the nav coding, so a button reads as
   "this leads to <section>". Where the button has an icon, the icon itself carries the colour — it is
   the stronger, more legible mark; the left bar is only the fallback for text-only buttons, so the two
   never stack. Mirrors .act.line from the offers mockup (docs/prototype/index.html). */
/* `.btn` first in the selector on purpose: `.btn.sm` also sets `padding` and outweighed a
   bare `.btn-sec:not(...)`, so the size modifier put the text back under the bar. */
.btn.btn-sec:not(:has(svg)){position:relative;padding-left:19px}
.btn.btn-sec:not(:has(svg))::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--sc,var(--accent))}
.btn-sec svg{color:var(--sc,var(--accent))}
.btn-sec:not(:disabled):hover{border-color:var(--sc,var(--accent));color:var(--sc,var(--accent-ink));background:var(--surface-2)}

/* Input with a trailing unit suffix — shared control (e.g. mm, g/m², Kč, %).
   Canonical way to attach a unit to an input; do NOT put units in placeholders.
   One unified bordered box; the unit is quiet inline text on the right (no chip,
   no divider) — same look as .ctrl-suf on the calculations page. */
.with-suf{display:inline-flex;align-items:center;gap:8px;width:100%;padding:0 11px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);transition:var(--t)}
.with-suf:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.with-suf input{flex:1;width:auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;
  color:var(--ink);padding:8px 0;box-shadow:none!important;font-variant-numeric:tabular-nums}
.with-suf .suf{flex:0 0 auto;color:var(--ink-3);font-size:12px;font-weight:600;white-space:nowrap}

/* =========================================================================
   FORM FIELDS — the one definition of a labelled input in the backend

   This lives here because .with-suf and .with-btn above already assume it
   (`.ctrl.with-btn` wraps the ARES button). It used to be missing, so every
   section wrote its own .ffield/.ctrl and they drifted to four heights
   (38/40/42/44), three radii and four paddings — a field looked different
   depending on which screen it was on.

   The size is the one the rest of the backend already draws: .with-suf is
   38px and .btn is ~36px, so a field is 38px too and a form reads as one
   family with the buttons next to it. (The big forms used to sit at 44px
   because they copied each other, not because 44 was the standard.)

   Size is carried by CUSTOM PROPERTIES on the field, not by copied rules:
   a section that genuinely needs a different control overrides --fld-* on
   its own container and stays in this system.
   Never redeclare .ctrl/.ffield in a section stylesheet.

   The height is on the BOX (min-height), never on the input's padding — the
   old "padding makes the height" coupling meant every variant (unit suffix,
   ARES button, textarea) had to re-fight the padding to keep the same box.
   ========================================================================= */
.ffield{--fld-h:38px;--fld-r:var(--r-sm);--fld-fs:13.5px;--fld-px:11px;
  display:flex;flex-direction:column;gap:7px;min-width:0}
.ffield.full{grid-column:1 / -1}
.ffield>label:not(.swtog){font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:4px}
.ffield>label.swtog{align-self:flex-start}
.ffield>label .req,.req{color:var(--danger)}
.ffield .hint{font-size:11.5px;color:var(--ink-3);font-weight:500}
.ffield .hint.err{color:var(--danger)}
.ffield .hint.ok{color:var(--ok)}
.ffield .hint.warn{color:var(--warn);font-weight:600}

/* Two-column field grid — the default layout of every backend form. */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr}}

/* The control box. Standalone defaults match a field, so a .ctrl outside a
   .ffield (an inline row in a detail card) is the same size. */
.ctrl{display:flex;align-items:center;min-height:var(--fld-h,38px);border:1px solid var(--line-2);
  border-radius:var(--fld-r,7px);background:var(--surface);transition:var(--t);overflow:hidden}
.ctrl:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ctrl input,.ctrl select{border:0;outline:0;background:transparent;padding:0 var(--fld-px,11px);
  font:inherit;font-size:var(--fld-fs,13.5px);color:var(--ink);width:100%;min-width:0}
/* A textarea grows, so it is the one control that keeps vertical padding. */
.ctrl textarea{border:0;outline:0;background:transparent;padding:9px var(--fld-px,11px);
  font:inherit;font-size:var(--fld-fs,13.5px);color:var(--ink);width:100%;resize:vertical}
/* Quiet inline unit (no chip, no divider) — same look as .with-suf. */
.ctrl .unit{padding-right:var(--fld-px,11px);color:var(--ink-3);font-size:12px;font-weight:600;white-space:nowrap;display:flex;align-items:center}
.ctrl:has(.unit) input{padding-right:6px}
/* .ctrl.with-suf: the box draws the padding, so the input adds none. */
.ctrl.with-suf{padding:0 var(--fld-px,11px)}
.ctrl.with-suf input{padding:0}

/* Stand-alone textarea field (no .ctrl wrapper). */
.ffield .ta{border:1px solid var(--line-2);border-radius:var(--fld-r,7px);background:var(--surface);
  padding:9px var(--fld-px,11px);font:inherit;font-size:var(--fld-fs,13.5px);color:var(--ink);
  resize:vertical;min-height:84px;transition:var(--t)}
.ffield .ta:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* A select, a date and a unit field must be the same box as a plain input —
   this is what every section kept re-deriving by hand. Scoped to .ffield so
   the compact Choices used by table filters and inline editors is untouched. */
.ffield .choices{margin-bottom:0}
.ffield .choices__inner{min-height:var(--fld-h,38px);padding:0 30px 0 var(--fld-px,11px);
  font-size:var(--fld-fs,13.5px);border-radius:var(--fld-r,7px);display:flex;align-items:center}
.ffield .choices__list--single .choices__item{font-size:var(--fld-fs,13.5px)}
/* A bare date input draws the field box itself (flatpickr-indigo.css gives it one). */
.ffield>.flatpickr-input,.ffield>label+.flatpickr-input{height:var(--fld-h,38px);
  border-radius:var(--fld-r,7px);padding:0 var(--fld-px,11px);font-size:var(--fld-fs,13.5px);width:100%}
/* Inside a .ctrl the box is already drawn, so the date input has to give its own up —
   otherwise the two stack into a box-in-a-box and the field reads as a heavy border. */
.ctrl .flatpickr-input,.ctrl input.flatpickr-input{height:auto;border:0;background:transparent;
  border-radius:0;box-shadow:none;padding:0 var(--fld-px,11px);font-size:var(--fld-fs,13.5px)}
.ctrl .flatpickr-input:focus,.ctrl .flatpickr-input.active{border:0;box-shadow:none}
.ffield .with-suf{min-height:var(--fld-h,38px);border-radius:var(--fld-r,7px);padding:0 var(--fld-px,11px)}
.ffield .with-suf input{padding:0;font-size:var(--fld-fs,13.5px)}

/* -------------------------------------------------------------------------
   INVALID STATE — one look for "this input is wrong", wherever it happens.

   Put `is-invalid` on the control itself (.ctrl, a bare input/select/textarea)
   or on anything wrapping it (.ffield, .field, a row): the marker cascades, so
   a section never has to know which of the two shapes it is dealing with. The
   red survives focus — a field that turns accent-blue the moment it is clicked
   would hide the very thing it is complaining about.

   Say WHY next to it: `.hint.err` under a .ffield, or `.fld-err` anywhere else.
   A red box with no sentence leaves the operator guessing what to change.

   The colours are !important, which is the one place in this file that earns it:
   a dozen page stylesheets draw their own control and Choices boxes with deeper
   selectors than any state layer can reasonably out-specify, and a validation
   mark that loses that race on some pages is worse than none at all.
   ------------------------------------------------------------------------- */
.is-invalid.ctrl,.is-invalid .ctrl,
.is-invalid.ta,.is-invalid .ta,
.is-invalid>input,.is-invalid>select,.is-invalid>textarea,
input.is-invalid,select.is-invalid,textarea.is-invalid,
.is-invalid .choices__inner,.is-invalid.choices .choices__inner{
  border-color:var(--danger)!important;background:var(--danger-soft)!important}
.is-invalid.ctrl:focus-within,.is-invalid .ctrl:focus-within,
.is-invalid.ta:focus,.is-invalid .ta:focus,
input.is-invalid:focus,select.is-invalid:focus,textarea.is-invalid:focus,
.is-invalid .choices.is-focused .choices__inner,.is-invalid .choices.is-open .choices__inner{
  border-color:var(--danger)!important;box-shadow:0 0 0 3px var(--danger-soft)!important}
.fld-err{font-size:11.5px;font-weight:600;color:var(--danger);line-height:1.35}

/* =========================================================================
   EUDR ORIGIN BLOCK — shared by every dialog that books a goods receipt
   (the warehouse movement modal and the stocking dialog on a purchase order).
   The origin lives on the SUPPLIER, so a receipt states it as one read-only
   line and only a delivery that genuinely differs reveals the fields to
   override it. .no-eudr on the dialog hides the whole part for a card the
   regulation does not cover; the JS of each dialog owns that class.
   ========================================================================= */
.no-eudr .eudr-field{display:none}
/* Why a supplier blocks (or merely warns about) an intake, stated on open/pick. */
.eudr-warn{font-size:11.5px;font-weight:600;line-height:1.45;border-radius:var(--r-sm);padding:8px 11px}
.eudr-warn.is-block{color:var(--danger);background:var(--danger-soft,var(--accent-soft))}
.eudr-warn.is-warn{color:var(--warn-ink,var(--ink-2));background:var(--warn-soft,var(--surface-2))}
.eudr-origin{display:grid;gap:6px;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;background:var(--surface-2)}
.eo-head{display:flex;align-items:center;gap:8px}
.eo-label{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.eo-label .eudr{font-size:9.5px;color:var(--accent-ink);background:var(--accent-soft);border-radius:4px;padding:1px 5px;letter-spacing:.02em}
/* Which supplier the stated origin comes from — the order dialog has no supplier picker. */
.eo-from{font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.eo-edit{margin-left:auto;border:0;background:none;padding:0;font-size:11px;font-weight:600;color:var(--accent-ink);cursor:pointer}
.eo-edit:hover{text-decoration:underline}
.eo-read{font-size:12.5px;font-weight:600;color:var(--ink)}
.eo-read.is-empty{font-weight:500;color:var(--ink-3)}
.eo-fields{margin-top:2px}
/* ARES lookup button sitting inside an IČ control (.ctrl.with-btn wraps input + button).
   Quiet accent chip that fills on hover; stretches to the control height minus a 4px
   inset, so the same button fits controls of different heights. */
.with-btn{padding-right:4px}
.ares-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;align-self:stretch;margin:4px 0;
  padding:0 11px;border:0;border-radius:7px;background:var(--accent-soft);color:var(--accent-ink);
  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.03em;cursor:pointer;transition:var(--t)}
.ares-btn svg{width:13px;height:13px}
.ares-btn:hover{background:var(--accent);color:#fff}
.ares-btn:disabled{cursor:default}
.ares-btn:disabled:not(.is-busy){opacity:.55}
.ares-btn.is-busy{opacity:.75}


/* =========================================================================
   CARD + TOOLBAR
   ========================================================================= */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.card-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.card-title{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:9px}
/* Zkratka k akci u nadpisu sekce (např. „+ nová") — form nesmí rozbít řádek. */
.page-title .inline-form{display:inline-flex}
.card-title .count{font-size:11px;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);padding:2px 8px;border-radius:20px}
.card-actions{margin-left:auto;display:flex;align-items:center;gap:7px}
.card-body{padding:18px 20px}
.card-lead{margin:0 0 12px;color:var(--ink-2)}

.tb-search{position:relative;display:flex;align-items:center}
.tb-search svg{position:absolute;left:10px;width:15px;height:15px;color:var(--ink-3);pointer-events:none}
.tb-search input{width:210px;border:1px solid var(--line-2);border-radius:20px;background:var(--bg);padding:7px 12px 7px 32px;font-size:12.5px;color:var(--ink);outline:0;transition:var(--t)}
.tb-search input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft);width:240px}
.tb-search input::placeholder{color:var(--ink-4)}

.dd-anchor{position:relative}
.dd-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:236px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-pop);z-index:40;padding:6px;display:none}
.dd-anchor.open .dd-pop{display:block;animation:rise .12s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dd-title{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700;padding:8px 10px 6px}

/* Columns manager (toggle visibility + drag & drop order) */
.dd-cols-list{display:flex;flex-direction:column;gap:1px}
.dd-col-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);cursor:pointer;user-select:none;transition:background .12s}
.dd-col-item:hover{background:var(--bg)}
.dd-col-item.dragging{opacity:.45;background:var(--accent-soft-2)}
.dd-col-drag{color:var(--ink-3);display:flex;flex-shrink:0;cursor:grab;padding:2px}
.dd-col-drag svg{width:14px;height:14px;fill:currentColor}
.dd-col-item:hover .dd-col-drag{color:var(--ink-2)}
.dd-col-label{flex:1;font-size:13px;color:var(--ink);white-space:nowrap}
.dd-col-item.off .dd-col-label{color:var(--ink-3)}
.dd-switch{width:32px;height:18px;position:relative;flex:0 0 32px;pointer-events:none}
.dd-switch .track{position:absolute;inset:0;background:var(--accent);border-radius:20px;transition:var(--t)}
.dd-switch .track::after{content:"";position:absolute;top:2px;left:16px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:var(--t)}
.dd-col-item.off .dd-switch .track{background:var(--line-2)}
.dd-col-item.off .dd-switch .track::after{left:2px}
/* Frozen column: stays first, so it keeps the handle's slot but not its grip. */
.dd-col-drag.is-fixed{width:18px}
.dd-foot{border-top:1px solid var(--line);margin-top:6px;padding:7px 4px 2px;display:flex;justify-content:flex-end}
.dd-reset{border:0;background:none;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink-3);padding:4px 6px;border-radius:var(--r-sm);transition:var(--t)}
.dd-reset:hover{color:var(--accent-ink);background:var(--accent-soft)}
/* Portaled to <body> — .card clips its overflow, so an in-place popover is cut off. */
.dd-pop.is-portaled{position:fixed;right:auto;top:auto;display:block;overflow-y:auto;z-index:9999;animation:rise .12s ease}
.indi-cols .dd-cnt{font-size:11px;font-weight:700;padding:1px 6px;border-radius:20px;background:var(--accent-soft);color:var(--accent-ink)}

/* =========================================================================
   CELL FORMATTERS (pills, avatar, mono, actions)
   ========================================================================= */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;line-height:1.3}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.pill-ok{color:#0d7a4f;background:var(--ok-soft)}
.pill-danger{color:#b23b48;background:var(--danger-soft)}
.pill-off{color:#6b7280;background:#eef0f5}
.pill-warn{color:var(--warn);background:var(--warn-soft)}
.pill-neutral{color:var(--ink-2);background:var(--bg)}
.pill-accent{color:var(--accent-ink);background:var(--accent-soft)}
.pill-tag{color:var(--pc,var(--ink-2));background:color-mix(in srgb,var(--pc,var(--ink-2)) 12%,#fff)}

/* Shared custom checkbox — system-wide standard (label>input+span pattern).
   Use: <label class="flagtog"><input type="checkbox"><span></span> Text</label> */
.flagtog{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);font-weight:500;cursor:pointer;user-select:none}
.flagtog input{position:absolute;opacity:0;width:0;height:0}
.flagtog>input+span{width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:5px;background:var(--surface);display:inline-grid;place-items:center;transition:var(--t);flex:0 0 auto}
.flagtog>input+span::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent);transform:scale(0);transition:transform var(--t)}
.flagtog input:checked+span{border-color:var(--accent)}
.flagtog input:checked+span::after{transform:scale(1)}
.flagtog:has(input:focus-visible)>span{box-shadow:0 0 0 3px var(--accent-soft)}
.flagtog.disabled{color:var(--ink-3);cursor:not-allowed}
.flagtog.disabled input{cursor:not-allowed}

/* Shared toggle switch — the loud sibling of .flagtog, for on/off settings that
   carry weight on their own (access, unlimited spend) rather than sitting in a
   row of checkboxes. Use:
   <label class="swtog"><input type="checkbox"><span class="swtog-tr"></span><span class="swtog-tx">Text</span></label> */
.swtog{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none;line-height:1.2}
.swtog input{position:absolute;opacity:0;width:0;height:0}
.swtog-tr{width:42px;height:24px;border-radius:99px;background:var(--line-2);position:relative;transition:var(--t);flex:0 0 42px}
.swtog-tr::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:var(--t)}
.swtog input:checked+.swtog-tr{background:var(--accent)}
.swtog input:checked+.swtog-tr::after{transform:translateX(18px)}
.swtog:has(input:focus-visible)>.swtog-tr{box-shadow:0 0 0 3px var(--accent-soft)}
.swtog:has(input:disabled){color:var(--ink-3);cursor:not-allowed}
.swtog:has(input:disabled)>.swtog-tr{opacity:.5}
/* Compact variant — switches sitting under a field or inside a dense detail row. */
.swtog.sm{gap:8px;font-size:13px}
.swtog.sm>.swtog-tr{width:34px;height:20px;flex-basis:34px}
.swtog.sm>.swtog-tr::after{width:14px;height:14px}
.swtog.sm input:checked+.swtog-tr::after{transform:translateX(14px)}

.cell-emp{display:flex;align-items:center;gap:11px;min-width:0}
.emp-tx{min-width:0}
.emp-name{font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-mail{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.cell-mono{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.cell-muted{color:var(--ink-3)}
.cell-date{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.cell-strong{font-weight:600;color:var(--ink)}
.cell-num{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* Item cell (name + subtitle) and number/unit accents — shared table primitives:
   every list that renders an item row uses them, so they belong here, not in one
   page's stylesheet (the pricelist detail rendered them unstyled while they lived
   in backend.depot.index.css). */
.cell-item{display:flex;flex-direction:column;gap:1px;min-width:0}
.ci-name{font-weight:600;color:var(--ink);font-size:13.5px;overflow:hidden;text-overflow:ellipsis}
.ci-sub{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.strong{font-weight:700;color:var(--ink)}
.u{color:var(--ink-3);font-weight:500}
.warn-num{color:var(--warn);font-weight:700}
/* Panel header inside a card (title left, actions right) — used by the item detail,
   the pricelist detail and the calculations pages. */
.panel-tools{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.panel-tools .pt-title{font-weight:600;font-size:13.5px}
.panel-tools .pt-title .cell-muted{font-weight:500}
.panel-tools .pt-r{margin-left:auto;display:flex;gap:7px;align-items:center}

/* inline row actions - directly available buttons */
.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;width:100%}
.ra-btn{width:30px;height:30px;border-radius:7px;border:1px solid transparent;background:transparent;display:grid;place-items:center;color:var(--ink-3);transition:var(--t)}
.ra-btn:hover{background:var(--bg);color:var(--accent-ink);border-color:var(--line-2)}
.ra-btn svg{width:16px;height:16px}
.ra-btn.danger:hover{background:var(--danger-soft);color:var(--danger);border-color:transparent}

/* empty state */
.tbl-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:46px 24px;color:var(--ink-3)}
.tbl-empty .te-ico{width:52px;height:52px;border-radius:14px;background:var(--bg);display:grid;place-items:center;color:var(--ink-3);margin-bottom:10px}
.tbl-empty .te-ico svg{width:26px;height:26px}
.tbl-empty .te-t{font-weight:600;font-size:14px;color:var(--ink-2)}
.tbl-empty .te-d{font-size:12.5px}

/* toast (demo feedback only) */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--rail);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:500;box-shadow:var(--sh-pop);opacity:0;pointer-events:none;transition:var(--t);z-index:12000;display:flex;align-items:center;gap:9px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .toast-ico{display:inline-flex;flex:0 0 auto}
.toast .toast-ico svg{width:16px;height:16px;color:#8fe3bf}
.toast.error .toast-ico svg{color:#ff9b9b}

/* =========================================================================
   CONFIRM MODAL (Indigo.confirm) — reusable dialog
   ========================================================================= */
.indi-modal-back{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px;background:rgba(20,24,54,.34);opacity:0;transition:opacity var(--t)}
.indi-modal-back.show{opacity:1}
.indi-modal{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-pop);padding:20px;transform:translateY(10px) scale(.98);transition:transform var(--t)}
.indi-modal-back.show .indi-modal{transform:translateY(0) scale(1)}
.indi-modal .im-title{font-weight:700;font-size:15px;color:var(--ink)}
.indi-modal .im-text{margin-top:7px;color:var(--ink-2);font-size:13px;line-height:1.5}
.indi-modal .im-actions{margin-top:18px;display:flex;justify-content:flex-end;gap:8px}
/* Findings the operator is confirming — one line each, never a paragraph to decode. */
.indi-modal .im-list{margin:10px 0 0;padding:10px 12px;list-style:none;display:flex;flex-direction:column;gap:6px;
  background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 22%,transparent);border-radius:8px}
.indi-modal .im-list li{position:relative;padding-left:14px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.indi-modal .im-list li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--warn)}

/* =========================================================================
   TABULATOR - indigo theme (aipost theme adapted to the palette)
   ========================================================================= */
.tabulator{border:none;background:var(--surface);font-family:var(--font);font-size:13px;color:var(--ink-2);border-radius:0;transform:none!important;overflow:hidden}
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-header-contents{overflow:hidden!important;width:100%}
.tabulator .tabulator-tableholder{overflow:auto!important;background:var(--surface)}

.tabulator .tabulator-header{background:var(--surface-2);border-bottom:1px solid var(--line);border-top:none;color:var(--ink-2);font-weight:700}
.tabulator .tabulator-header .tabulator-col{background:transparent;border-right:none;padding:0;transition:background .12s}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:12px 16px}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;padding:0}
.tabulator .tabulator-header .tabulator-col:hover{background:transparent!important}
.tabulator .tabulator-col.tabulator-sortable{cursor:pointer}
.tabulator .tabulator-col .tabulator-col-resize-handle,.tabulator-col-resize-guide{display:none!important;pointer-events:none!important;width:0!important;visibility:hidden!important}

.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter{right:10px;padding:4px;border-radius:4px}
.tabulator .tabulator-col-sorter .tabulator-arrow{border:none!important;width:11px!important;height:11px!important;margin:0!important;background:var(--ink-3);opacity:.5;transition:background .12s,opacity .12s;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 15 12 20 17 15'/><polyline points='7 9 12 4 17 9'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 15 12 20 17 15'/><polyline points='7 9 12 4 17 9'/></svg>");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}
.tabulator .tabulator-col[aria-sort="ascending"] .tabulator-arrow,
.tabulator .tabulator-col[aria-sort="descending"] .tabulator-arrow{background:var(--accent);opacity:1}
.tabulator .tabulator-col[aria-sort="ascending"] .tabulator-arrow{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>")}
.tabulator .tabulator-col[aria-sort="descending"] .tabulator-arrow{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}

/* Header filter row (input and choices) */
.tabulator .tabulator-header .tabulator-header-filter{padding:0!important;margin:8px 0 0 0!important;width:100%!important}
.tabulator .tabulator-header .tabulator-header-filter input{padding:6px 10px!important;font-size:12px;font-family:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:6px;width:100%!important;height:30px;box-sizing:border-box!important;transition:border-color .12s,box-shadow .12s}
.tabulator .tabulator-header .tabulator-header-filter input::placeholder{color:var(--ink-4)}
.tabulator .tabulator-header .tabulator-header-filter input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tabulator[data-filters="hidden"] .tabulator-header-filter{display:none!important}
.tabulator[data-filters="hidden"] .tabulator-col .tabulator-col-content{padding-bottom:12px}

/* Body - rows */
.tabulator .tabulator-row{background:var(--surface);border-bottom:none;cursor:pointer}
.tabulator .tabulator-row:not(:first-child){box-shadow:inset 0 1px 0 var(--line)}
.tabulator .tabulator-row.tabulator-row-even{background:var(--surface)}
.tabulator .tabulator-row:hover{background:var(--surface-2)}
.tabulator .tabulator-row .tabulator-cell{border-right:none;padding:10px 16px;font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center}
.tabulator .tabulator-row .tabulator-cell.no-click{cursor:default}
.tabulator .tabulator-row .tabulator-cell:focus{outline:none}

/* Footer / pagination */
.tabulator .tabulator-footer{background:var(--surface-2);border-top:1px solid var(--line);padding:0;color:var(--ink-3);font-size:12px}
.tabulator .tabulator-footer .tabulator-footer-contents{padding:10px 16px!important;display:flex!important;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tabulator .tabulator-footer .tabulator-page-counter{color:var(--ink-3);font-size:12px;margin-right:auto}
.tabulator .tabulator-footer .tabulator-paginator{display:flex!important;align-items:center;gap:8px;flex:0 0 auto!important;margin-left:auto!important;color:var(--ink-3)}
.tabulator .tabulator-footer .tabulator-paginator>label{color:var(--ink-3);font-size:12px;font-weight:500;margin-right:4px}
.tabulator .tabulator-footer .tabulator-page-size{padding:5px 26px 5px 10px;font-size:12px;font-family:inherit;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink-2);appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1b4' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 6px center;background-size:12px;cursor:pointer}
.tabulator .tabulator-footer .tabulator-page-size:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tabulator .tabulator-footer .tabulator-pages{display:inline-flex;gap:2px;margin:0 4px}
.tabulator .tabulator-footer .tabulator-page{min-width:28px;height:28px;padding:0 10px;margin:0;font-size:12px;font-weight:500;border:none;border-radius:6px;background:transparent;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;transition:all .12s}
.tabulator .tabulator-footer .tabulator-page:hover:not(.disabled):not(.active){background:var(--line);color:var(--ink)}
.tabulator .tabulator-footer .tabulator-page.active{background:var(--accent);color:#fff}
.tabulator .tabulator-footer .tabulator-page.disabled{opacity:.35;color:var(--ink-3);background:transparent}

.tabulator .tabulator-placeholder{color:var(--ink-3)}
.tabulator .tabulator-placeholder .tabulator-placeholder-contents{color:var(--ink-3);font-weight:500}
/* Tabulator dává prázdnému stavu inline šířku celé tabulky (součet sloupců). U širokých
   tabulek je to víc než viditelná plocha, čímž vynutí vodorovný posuvník — ten změní výšku,
   Tabulator na to reaguje překreslením, prázdný stav se vykreslí znovu a vznikne nekonečná
   smyčka (RangeError: Maximum call stack size exceeded; tabulka pak zůstane viset prázdná).
   Držíme prázdný stav v šířce viditelné plochy; sticky ho nechá vidět i po odscrollování. */
.tabulator .tabulator-placeholder{width:auto!important;position:sticky;left:0}

/* =========================================================================
   CHOICES.JS - indigo theme (aipost theme adapted to the palette)
   ========================================================================= */
.choices{margin-bottom:0;font-size:13px;font-family:var(--font)}
.choices:focus{outline:none}
/* A select BEFORE Choices takes it over (page load, a modal opening, a tab switching in)
   is drawn as the very same box, chevron included. Enhancement then swaps one identical
   looking control for another instead of flashing a native one for a frame. Selects that
   opt out of Choices keep the styling — that is the backend's select look either way. */
select:not(.choices__input){-webkit-appearance:none;appearance:none;width:100%;min-height:34px;
  padding:6px 30px 6px 10px;font-family:var(--font);font-size:13px;color:var(--ink);background-color:var(--surface);
  border:1px solid var(--line-2);border-radius:6px;outline:0;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px}
select:not(.choices__input):focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
select:not(.choices__input)[multiple]{background-image:none;padding-right:10px}
.choices__inner{min-height:34px;padding:6px 30px 6px 10px;font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:6px;transition:border-color .12s,box-shadow .12s}
.choices.is-focused .choices__inner,.choices.is-open .choices__inner{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);border-radius:6px!important}
.choices__input{background:transparent!important;color:var(--ink);font-size:12px}
.choices__list--single{padding:0}
.choices__list--single .choices__item{font-size:13px;color:var(--ink)}
/* Vertically center the single-select value — the vendor CSS adds an asymmetric
   padding-bottom on select-one, which otherwise pushes the text up off-center. */
/* Vertical padding off + flex centering: the value sits dead center whatever height a
   page gives the control (the vendor pads select-one asymmetrically, and a fixed
   padding-bottom here pushed the text down in every form that raised the height). */
.choices[data-type*="select-one"] .choices__inner{display:flex;align-items:center;padding-top:0;padding-bottom:0}
.choices[data-type*="select-one"]::after{content:''!important;border:none!important;width:12px;height:12px;right:10px;top:50%;margin-top:-6px;background:var(--ink-3);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
  transition:transform .15s;pointer-events:none}
.choices.is-open::after{transform:rotate(180deg)}
/* Multiselect: brand chips instead of the vendor's teal pills. Kept solid accent
   so the vendor's white remove-cross stays readable. No arrow on select-multiple,
   so the inner needs no room reserved on the right. */
.choices[data-type*="select-multiple"] .choices__inner{padding:5px 8px 2px;cursor:text}
.choices__list--multiple .choices__item{background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:6px;padding:4px 9px;font-size:12px;font-weight:600;margin:0 4px 3px 0;word-break:normal}
.choices__list--multiple .choices__item.is-highlighted{background:var(--accent-ink);border-color:var(--accent-ink)}
.choices__list--multiple .choices__item[data-deletable]{padding-right:6px}
.choices[data-type*="select-multiple"] .choices__button{border-left-color:rgba(255,255,255,.45);margin:0 0 0 7px;padding-left:12px;opacity:.8}
.is-disabled .choices__list--multiple .choices__item{background:var(--ink-3);border-color:var(--ink-3)}
.choices__list--dropdown,.choices__list[aria-expanded]{border:none;border-radius:10px;box-shadow:0 0 0 1px var(--line-2),var(--sh-pop);background:var(--surface);margin-top:4px;padding:6px;z-index:60;overflow:hidden}
.choices__list--dropdown.is-active,.choices__list[aria-expanded="true"]{animation:choicesFade .12s ease-out}
@keyframes choicesFade{from{opacity:0}to{opacity:1}}
.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{max-height:280px;padding:0}
/* Dropdown search box: give it its own bordered box + gap so it never overlaps the options (global, not modal-only). */
.choices__list--dropdown .choices__input,.choices__list[aria-expanded] .choices__input{display:block;width:100%;margin:0 0 6px;padding:8px 10px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface)!important;font-size:12.5px;box-sizing:border-box}
.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{padding:7px 10px;font-size:13px;font-weight:400!important;color:var(--ink-2);border-radius:6px;text-align:left!important;white-space:nowrap;transition:background .12s,color .12s}
.choices__list--dropdown .choices__item--selectable[aria-selected="true"]{background:var(--accent-soft);color:var(--accent-ink)}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background:var(--accent-soft-2);color:var(--accent-ink)}
.choices__list--dropdown .choices__item--selectable::after{display:none}
.choices__placeholder{color:var(--ink-4);opacity:1}
.choices__list--dropdown:not(.is-portaled),.choices__list[aria-expanded]:not(.is-portaled){width:auto!important;min-width:100%!important;max-width:360px}
/* Compact variant for Tabulator filters */
.tabulator .tabulator-header-filter .choices{margin:0!important;width:100%}
/* Header filters run a shorter control — the pre-enhancement box has to match that one. */
.tabulator .tabulator-header-filter select:not(.choices__input){min-height:30px;height:30px;padding:5px 26px 5px 10px;font-size:12px;background-position:right 8px center;background-size:10px 10px}
.tabulator .tabulator-header-filter .choices__inner{min-height:30px;height:30px;padding:5px 26px 5px 10px;font-size:12px;background:var(--surface);text-align:left;font-weight:400;display:flex;align-items:center}
.tabulator .tabulator-header-filter .choices__list--single{text-align:left;padding:0}
.tabulator .tabulator-header-filter .choices__list--single .choices__item,
.tabulator .tabulator-header-filter .choices .choices__placeholder{font-size:12px;font-weight:400;text-align:left;color:var(--ink-4)}
.tabulator .tabulator-header-filter .choices[data-type*="select-one"]::after{width:10px;height:10px;right:8px;margin-top:-5px}
/* Choices.js as a Tabulator inline cell editor (IChoices.editor) — never a native
   select. Matches the accent-focus box of standard inline inputs; dropdown portaled. */
.indi-cell-choices{width:100%}
.indi-cell-choices .choices{margin:0;width:100%}
.indi-cell-choices .choices__inner{min-height:32px;height:32px;padding:5px 26px 5px 10px;font-size:13px;background:var(--surface);border:1px solid var(--accent);border-radius:6px;box-shadow:0 0 0 3px var(--accent-soft);display:flex;align-items:center;text-align:left}
.indi-cell-choices .choices__list--single{padding:0}
.indi-cell-choices .choices__list--single .choices__item{font-size:13px;font-weight:400;color:var(--ink);text-align:left}
.indi-cell-choices .choices[data-type*="select-one"]::after{width:10px;height:10px;right:10px;margin-top:-5px}

/* Portaled (floating) dropdown - escapes the overflow:hidden header */
.choices__list--dropdown.is-portaled,.choices__list[aria-expanded].is-portaled{width:auto!important;white-space:nowrap}
.choices__list--dropdown.is-portaled .choices__list{max-height:320px;overflow-y:auto}

/* =========================================================================
   RESPONSIVE — tablet & mobile
   Drawer sidebar (off-canvas + backdrop), compact topnav, fluid tables.
   ========================================================================= */

/* Hamburger — desktop-hidden; revealed at the drawer breakpoint below. */
.tn-burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;margin-left:8px;flex:0 0 auto;border:0;background:transparent;border-radius:9px;color:var(--ink-2);transition:var(--t)}
.tn-burger svg{width:22px;height:22px}
.tn-burger:hover{background:var(--bg);color:var(--ink)}

/* Backdrop only materialises at mobile widths (kept display:none otherwise). */
.side-backdrop{display:none}
/* Animate the drawer slide; harmless on desktop where transform stays none. */
.side{transition:transform .24s cubic-bezier(.4,0,.2,1)}

/* Reclaim width early: drop the breadcrumb, shrink the omnibox before the drawer kicks in. */
@media (max-width:1100px){
  .tn-crumb{display:none}
  .omni{width:min(420px,34vw)}
}

@media (max-width:900px){
  .tn-burger{display:inline-flex}
  .topnav{padding-right:8px}
  .tn-brand{width:auto;flex:0 0 auto;padding-left:10px}
  .tn-actions{margin-left:auto}

  .side{width:min(272px,82vw);transform:translateX(-100%);box-shadow:var(--sh-pop)}
  .side.open{transform:translateX(0)}
  .content{margin-left:0}

  .side-backdrop{display:block;position:fixed;inset:54px 0 0 0;z-index:45;background:rgba(20,24,54,.42);opacity:0;pointer-events:none;transition:opacity .24s}
  .side-backdrop.show{opacity:1;pointer-events:auto}

  body.nav-open{overflow:hidden}      /* lock page scroll while the drawer is open */
}

@media (max-width:640px){
  .content{padding:16px 14px 64px}
  .page-head{margin-bottom:14px}
  .page-title{font-size:19px}
  .page-title .pt-ico{width:28px;height:28px}
  .page-sub{margin-left:0}            /* drop the icon-aligned indent on small screens */
  .page-actions{width:100%}
  .page-actions .btn{flex:1 1 auto;justify-content:center}

  /* Toolbar: title on its own row, actions wrap below, search spans full width. */
  .card-head{flex-wrap:wrap;padding:12px 14px}
  .card-actions{margin-left:0;width:100%;flex-wrap:wrap}
  .tb-search{flex:1 1 100%}
  .tb-search input,.tb-search input:focus{width:100%}

  /* Universal Tabulator mobile rhythm — horizontal scroll is already handled
     by the columns' minWidths (fitColumns overflows → tableholder scrolls). */
  .tabulator .tabulator-tableholder{-webkit-overflow-scrolling:touch}
  .tabulator .tabulator-row .tabulator-cell{padding:10px 13px}
  .tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding:10px 13px}

  /* Footer: counter to its own centered row, paginator compact with larger touch targets. */
  .tabulator .tabulator-footer .tabulator-footer-contents{padding:9px 12px!important;gap:8px}
  .tabulator .tabulator-footer .tabulator-page-counter{order:2;width:100%;margin:0;text-align:center}
  .tabulator .tabulator-footer .tabulator-paginator{order:1;margin:0 auto!important;flex-wrap:wrap;justify-content:center}
  .tabulator .tabulator-footer .tabulator-page{min-width:32px;height:32px}
}

/* =========================================================================
   FLASH MESSAGES (addition to the prototype)
   ========================================================================= */
.flash{border-radius:var(--r);padding:11px 15px;font-size:13px;font-weight:500;margin-bottom:16px;border:1px solid transparent}
.flash-ok{background:var(--ok-soft);color:#166b4c;border-color:#bfe8d6}
.flash-err{background:var(--danger-soft);color:#a5313d;border-color:#f5cdd2}

/* =========================================================================
   TOPNAV — AI omnibox (search + assistant)
   ========================================================================= */
.omni .sp svg{width:16px;height:16px}
/* Stav asistenta nese ikona v liště, se zavřeným i otevřeným panelem:
   běh = otáčející se jiskra, čekání na potvrzení = zelená bublina. */
.omni .sp .sp-wait{display:none}
.omni.ai-busy .sp .sp-ai{animation:omniWork 1.4s linear infinite}
.omni.ai-wait .sp{color:var(--ai-confirm)}
.omni.ai-wait .sp .sp-ai{display:none}
.omni.ai-wait .sp .sp-wait{display:block}
@keyframes omniWork{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.omni.ai-busy .sp .sp-ai{animation-duration:4s}}
.omni-pop{position:absolute;top:calc(100% + 9px);left:0;right:0;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-pop);display:none;flex-direction:column;max-height:62vh;overflow:hidden;z-index:120;cursor:default}
.omni-pop.open{display:flex;animation:rise .12s ease}
/* AI omnibox vycentrovaný nad OBSAHOVOU plochou (vpravo od menu 212px → střed 50vw+106px).
   Roztažený chat (JS) se centruje na stejný střed, takže input i panel drží jednu osu. */
.omni{position:absolute;left:calc(50vw + 106px);top:50%;transform:translate(-50%,-50%)}

/* Kompaktní drobečková navigace: plná → jen „Zpět" → skrytá (aby nekolidovala s omniboxem). */
.tn-crumb-compact{display:none;align-items:center;gap:5px;font-weight:600;font-size:13px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.tn-crumb-compact svg{width:16px;height:16px}

/* =========================================================================
   AI omnibox — responsive geometry. Placed AFTER the absolute-centered base
   rule so these win on source order.
   • The dropdown chat keeps a minimum width, centered on the field (so it may
     be wider than the field on both sides).
   • Once the sidebar hides, field + chat center on the screen.
   • When the chat no longer fits centered (min width + safety), the field
     collapses to a blue icon button among the right-hand actions; the chat
     then spans the full width, and the expand toggle makes it full height.
   ========================================================================= */

/* Dropdown: centered on the field. `100%` = the field width, so the chat matches the field
   until the field shrinks below CHAT_MIN; below that the dropdown holds CHAT_MIN — deliberately
   wider than the field to stay readable — but never past the viewport. */
.omni-pop{left:50%;right:auto;transform:translateX(-50%);width:clamp(520px,100%,calc(100vw - 24px))}
/* Open animation must NOT touch transform (we use translateX(-50%) to center) —
   the shared `rise` keyframe animates transform and would drop the centering
   mid-animation, making the panel jump / fly off-screen. Fade opacity only. */
@keyframes omniFade{from{opacity:0}to{opacity:1}}
.omni-pop.open{animation:omniFade .12s ease}

/* Center the field WITHOUT a transform. A transformed ancestor becomes the
   containing block for position:fixed descendants — that trapped the expanded
   panel inside the field's box and flung it off-screen on desktop. left/right +
   auto margins center it over the content area (212px menu → right edge) instead. */
.omni{left:212px;right:0;top:8px;bottom:auto;transform:none;margin:0 auto;width:min(560px,40vw)}

/* The breadcrumb sits in flow while the omnibox floats centered above it, so it
   must be capped to end a gap short of the omni's left edge (= 50vw+106 − omniW/2).
   The current-page pill ellipsizes; the leading crumbs stay intact. Only relevant
   >1300px (below that the compact "Zpět" link replaces the full breadcrumb). */
.tn-crumb{max-width:calc(50vw - 130px - min(560px, 40vw) / 2);min-width:0;overflow:hidden}
.tn-crumb > span{flex-shrink:0}
.tn-crumb .here{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Expanded (⤢): large panel centered over the content area (right of the 212px menu). */
.omni-pop.expanded{position:fixed;top:64px;left:calc(50vw + 106px);right:auto;transform:translateX(-50%);
  width:min(900px,calc(100vw - 260px));height:84vh;max-height:84vh}
/* Let the message list fill the expanded panel (overrides the JS inline cap). */
.omni-pop.expanded .op-msgs{max-height:none!important}

@media (max-width:900px){
  /* No sidebar → center over the full bar (left:0;right:0 + auto margins from base).
     min-width:0 overrides the base 280px so the field can't grow into the logo. */
  .omni{left:0;right:0;width:min(320px,40vw);min-width:0}
  .omni-pop.expanded{left:50vw;width:min(900px,calc(100vw - 40px))}
}

@media (max-width:700px){
  /* Field would start crowding the logo → collapse to a blue icon button by the actions.
     Both .grow spacers must be hidden: with flex-grow present, the grows eat the free
     space before margin-left:auto can, leaving the button stuck in the middle. */
  .topnav .grow{display:none}
  .omni{position:static;transform:none;left:auto;top:auto;flex:0 0 auto;margin:0 0 0 auto;
    width:36px;height:36px;min-width:0;padding:0;justify-content:center;cursor:pointer;
    background:var(--accent);border-color:var(--accent);border-radius:9px}
  .omni .sp{color:#fff}
  .omni .sp svg{width:18px;height:18px}
  .omni input,.omni kbd{display:none}
  .omni:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
  .omni:focus-within{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .omni.active{background:var(--accent-ink);border-color:var(--accent-ink)}   /* open state */
  /* Collapsed button is solid blue — a green icon on it would be unreadable, so the whole button turns green.
     Placed after .omni.active so the waiting state survives the panel being open. */
  .omni.ai-wait{background:var(--ai-confirm);border-color:var(--ai-confirm)}
  .omni.ai-wait:hover{background:var(--ai-confirm);border-color:var(--ai-confirm)}
  .omni.ai-wait .sp{color:#fff}
  .tn-actions{margin-left:6px}      /* small gap next to the button */

  /* Chat full-width (field is static → the pop anchors to the fixed topnav). */
  .omni-pop{left:8px;right:8px;transform:none;width:auto}
  /* Expanded → full screen. Top matches the collapsed panel (no margin jump);
     bottom:8px fills down to the edge without a height calc. */
  .omni-pop.expanded{position:fixed;top:63px;left:8px;right:8px;bottom:8px;transform:none;width:auto;
    height:auto;max-height:none}
}
.tn-crumb-compact:hover{color:var(--accent-ink)}
@media (max-width:1300px){ .tn-crumb{display:none} .tn-crumb-compact{display:inline-flex} }
@media (max-width:900px){ .tn-crumb-compact{display:none} }

/* AI asistent — ovládací prvky (hover/focus přes třídy, ne inline). */
.op-hbtn{font-size:12px;padding:3px 9px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink-2);cursor:pointer;transition:var(--t)}
.op-hbtn:hover{background:var(--bg);border-color:var(--ink-3);color:var(--ink)}
/* Toggle stav (Historie / Roztažení aktivní) — modré podbarvení. */
/* Ovládání v hlavičce panelu — layout patří sem, ne do inline stylů v JS. */
.op-head-row{display:flex;align-items:center}
.op-head-ctrls{margin-left:auto;display:inline-flex;gap:6px}
/* Stop = ikona; zobrazuje se jen když běh probíhá (hidden řídí JS). */
.op-openlog{display:inline-grid;place-items:center;padding:3px 7px}
.op-openlog svg{width:13px;height:13px;display:block}
.op-openlog:hover{color:var(--accent-ink);border-color:var(--accent)}
.op-refresh-btn{margin-top:7px}
/* Nabídky v průběhu konverzace (obnovit stránku, navázat spojení, vypnout potvrzování)
   nesou tlačítko pod textem — proto odsazení shora u všeho, co v bublině následuje. */
.op-reconnect .op-hbtn,.op-errmsg .op-hbtn{margin-top:7px}
/* Potvrzování předem běží dál a musí být vidět, ne splynout s odpověďmi. */
/* Trvalý stav konverzace, ne odpověď asistenta — proto ne bublina, ale tichý proužek
   přes celou šířku. Odlišuje ho tón podkladu, ne pruh po straně. */
.op-autoapprove{align-self:stretch;max-width:100%;display:flex;align-items:center;gap:10px;
  background:var(--warn-soft);color:var(--warn);border-radius:9px;padding:8px 11px;font-size:12px;line-height:1.45}
.op-autoapprove-t{flex:1 1 auto}
.op-autoapprove .op-hbtn{flex:none}
.op-hbtn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.op-hbtn.active:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
/* „Píše…" — animace tří teček. */
/* Bublina průběhu: tečky + seznam kroků, které asistent právě dělá. */
.op-progress{display:flex;flex-direction:column;gap:6px}
.op-steps:empty{display:none}
.op-step{font-size:11.5px;line-height:1.5;color:var(--ink-2);padding-left:14px;position:relative}
.op-step::before{content:"";position:absolute;left:3px;top:7px;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.55}
.op-typing{display:inline-flex;gap:4px;align-items:center;padding:1px 0}
.op-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);display:inline-block;animation:op-blink 1.2s infinite ease-in-out both}
.op-typing i:nth-child(2){animation-delay:.16s}
.op-typing i:nth-child(3){animation-delay:.32s}
@keyframes op-blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.op-inputrow{display:flex;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid var(--line)}
/* Vyšší specificita (.omni input …) přebíjí základní `.omni input{border:0}`. */
.omni input.op-chat-input{flex:1;border:1px solid var(--line-2);border-radius:8px;padding:8px 11px;font:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);outline:0;transition:var(--t)}
.omni input.op-chat-input::placeholder{color:var(--ink-4)}
.omni input.op-chat-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.op-send{border:0;background:var(--accent);color:#fff;border-radius:8px;padding:8px 13px;cursor:pointer;font-size:14px;line-height:1;transition:var(--t)}
.op-send:hover{filter:brightness(.93)}
/* Za běhu je z tlačítka Stop — jiná barva i tvar, aby se odeslání a zastavení nepletlo. */
.op-send.stop{background:var(--danger);display:inline-grid;place-items:center;padding:9px 13px}
.op-send.stop svg{width:13px;height:13px;display:block}
.op-confirm{margin:8px 6px 0 0;padding:5px 13px;border-radius:7px;cursor:pointer;font:inherit;font-size:13px;transition:var(--t)}
.op-confirm-yes{border:1px solid var(--ai-confirm);background:var(--ai-confirm);color:#fff}
.op-confirm-yes:hover{filter:brightness(.93)}
.op-confirm-no{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2)}
.op-confirm-no:hover{background:var(--bg)}
/* „Potvrdit vše" je širší závazek než „Potvrdit", proto nesmí být nápadnější než ono:
   obrys místo plochy. Stojí za .op-confirm-yes, aby ho přebilo. */
.op-confirm-all{border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.op-confirm-all:hover{border-color:var(--accent);color:var(--accent-ink);filter:none}

/* Historie — zobrazí se místo konverzace (plná výška), konverzace jako labely/chipy. */
.op-history{flex:1;min-height:0;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:16px;background:var(--surface)}
.op-hist-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.op-hist-head .op-hist-sec-title{margin-bottom:0}
.op-hist-manage{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink-2);text-decoration:none;text-transform:uppercase;letter-spacing:.04em;transition:var(--t)}
.op-hist-manage svg{width:13px;height:13px}
.op-hist-manage:hover{color:var(--accent)}
.op-hist-sec-title{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700;margin-bottom:7px}
.op-hist-list{display:flex;flex-direction:column;gap:6px}
/* =========================================================================
   SECTION TABS - shared segmented tabs (sklad, statistiky, ...)
   ========================================================================= */
.seg-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;align-items:flex-end}
.seg-tab{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border:0;background:none;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--t)}
.seg-tab svg{width:16px;height:16px}
.seg-tab:hover{color:var(--ink)}
.seg-tab.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.seg-tab .cnt{font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;background:var(--bg);color:var(--ink-3)}
.seg-tab.active .cnt{background:var(--accent-soft);color:var(--accent-ink)}
.seg-tab.warn.active{color:var(--warn);border-bottom-color:var(--warn)}
.seg-tab.warn.active .cnt{background:var(--warn-soft);color:var(--warn)}

/* Štítek s použitým modelem pod odpovědí (docs/05 §8.2). Zatím SKRYTÝ — samotný název
   tieru uživateli nic neříkal; vrátit, až ponese srozumitelnou informaci (cena/důvod). */
.op-tier{display:none;align-self:flex-start;font-size:10.5px;letter-spacing:.02em;color:var(--ink-3);padding:0 2px;margin-top:-4px}
.op-tier.forced{color:var(--accent-ink);font-weight:600}
.op-hist-empty{color:var(--ink);font-size:12.5px;padding:2px}
.op-hist-empty.error{color:var(--danger)}
.op-hist-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink);text-decoration:none;transition:var(--t)}
.op-hist-item:hover{border-color:var(--accent);background:var(--accent-soft-2)}
.op-hist-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.op-hist-time{font-size:11px;color:var(--ink-3);flex:0 0 auto;font-variant-numeric:tabular-nums}
.op-head{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:600;font-size:12.5px;color:var(--ink-2)}
.op-head .bot{width:22px;height:22px;border-radius:6px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:0 0 22px}
.op-head .bot svg{width:13px;height:13px}
.op-msgs{flex:1;overflow:auto;padding:13px;display:flex;flex-direction:column;gap:10px}
.op-msgs .msg{max-width:88%;padding:9px 12px;border-radius:13px;font-size:13px;line-height:1.5}
.op-msgs .msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.op-msgs .msg.bot{align-self:flex-start;background:var(--bg);color:var(--ink);border-bottom-left-radius:4px}
.op-msgs .msg.error{color:var(--danger)}
/* Odkaz v odpovědi asistenta (renderRich) — sdílené s přepisem konverzace v Logách. */
.ai-link{color:var(--accent);font-weight:600;text-decoration:underline}
.ai-link:hover{filter:brightness(.9)}
.op-foot{display:flex;align-items:center;gap:10px;padding:8px 13px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-3)}
.op-foot-hint{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Daily AI spend gauge — bottom-right of the chat; fill width from the --pct hook, no amount shown. */
.op-usage{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
/* Own [hidden] rule — the class above would otherwise win over the UA default. */
.op-usage[hidden]{display:none}
/* Unlimited accounts have no gauge to fill, only the mark. */
.op-usage-inf{display:none;font-size:15px;line-height:1;font-weight:700;color:var(--ink-3)}
.op-usage.unlim .op-usage-bar{display:none}
.op-usage.unlim .op-usage-inf{display:inline-block}
.op-usage.unlim .op-usage-pct{color:var(--ink-3);font-weight:600}
.op-usage-bar{width:72px;height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.op-usage-bar i{display:block;height:100%;width:var(--pct,0%);border-radius:99px;background:var(--accent);transition:width .3s ease}
.op-usage-pct{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-2)}
.op-usage.warn .op-usage-bar i{background:#e0a008}
.op-usage.full .op-usage-bar i{background:#e0526a}
.op-usage.full .op-usage-pct{color:#e0526a}

/* =========================================================================
   AI ODPOVĚDI — Markdown (renderRich) + vizualizační bloky (view.* nástroje)
   Sdílené třemi místy: sbalený panel (.omni-pop), roztažený panel
   (.omni-pop.expanded) a přepis konverzace v Logách (.conv-chat).
   Základ = úsporná varianta pro úzký panel; plné zobrazení dole přebíjí.
   ========================================================================= */
/* --- Markdown ------------------------------------------------------------ */
.ai-p{margin:0 0 6px}
.ai-p:last-child{margin-bottom:0}
.ai-h{font-weight:700;color:var(--ink);margin:10px 0 5px;line-height:1.3}
.ai-h:first-child{margin-top:0}
.ai-h1{font-size:1.18em}
.ai-h2{font-size:1.1em}
.ai-h3{font-size:1.02em}
.ai-h4{font-size:1em;color:var(--ink-2)}
.ai-ul,.ai-ol{margin:4px 0 6px;padding-left:18px}
.ai-ul{list-style:disc}
.ai-ol{list-style:decimal}
.ai-ul li,.ai-ol li{margin:2px 0}
.ai-ul .ai-ul,.ai-ol .ai-ol,.ai-ul .ai-ol,.ai-ol .ai-ul{margin:2px 0 0}
.ai-hr{border:0;border-top:1px solid var(--line-2);margin:9px 0}
.ai-quote{margin:6px 0;padding:2px 0 2px 10px;border-left:3px solid var(--line-2);color:var(--ink-2)}
.ai-code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 4px}
.ai-pre{margin:7px 0;padding:9px 11px;background:var(--rail);color:#eef1ff;border-radius:var(--r-sm);overflow-x:auto;max-width:100%}
.ai-pre code{font-family:var(--mono);font-size:12px;line-height:1.5;white-space:pre}
/* Tabulka (Markdown i view.table) nikdy nesmí roztáhnout panel → vlastní scroll. */
.ai-tw{max-width:100%;overflow-x:auto;margin:7px 0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.ai-tbl{border-collapse:collapse;width:100%;font-size:12px;line-height:1.45}
.ai-tbl th,.ai-tbl td{padding:6px 9px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.ai-tbl th{background:var(--surface-2);color:var(--ink-2);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0}
.ai-tbl tbody tr:last-child td{border-bottom:0}
.ai-tbl tbody tr:hover td{background:var(--accent-soft-2)}
.ai-ta-c{text-align:center!important}
.ai-ta-r{text-align:right!important;font-variant-numeric:tabular-nums}

/* --- Bloky (společný rámec) ---------------------------------------------- */
.op-msgs .msg.ai-blocks{max-width:100%;width:100%;align-self:stretch;background:transparent;padding:0}
.ai-block{margin:8px 0;padding:10px 11px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-1)}
.ai-block:first-child{margin-top:0}
.ai-block:last-child{margin-bottom:0}
.ai-b-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:7px}
.ai-b-note{font-size:11.5px;color:var(--ink-3);margin-top:6px}
.ai-block-table .ai-tw{margin:0}
/* Přenos filtru do skutečné tabulky sekce (server ověřil, že ji filtr pokryje). */
.ai-open-tbl{margin-top:8px;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;font:inherit;font-size:12px;font-weight:600;
  color:var(--accent);background:var(--accent-soft-2);border:1px solid var(--accent-soft);border-radius:7px;cursor:pointer;transition:var(--t)}
.ai-open-tbl:hover{background:var(--accent-soft);border-color:var(--accent)}
.ai-open-tbl:disabled{opacity:.55;cursor:default}

/* --- KPI dlaždice (view.stats) ------------------------------------------- */
.ai-block-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.ai-stat{padding:8px 10px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);min-width:0}
.ai-stat-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:700;margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-stat-value{font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.ai-stat-unit{font-size:11px;font-weight:600;color:var(--ink-3);margin-left:4px}
.ai-stat-trend{font-size:11px;font-weight:600;margin-top:2px;color:var(--ink-2)}
.ai-trend-up{color:var(--ok)}
.ai-trend-down{color:var(--danger)}

/* --- Grafy (indigo.charts.js) -------------------------------------------- */
.ai-chartbox{max-width:100%;overflow-x:auto}
.ic{width:100%;position:relative}
/* Interaktivita: značky reagují na hover, zoom/pan jen v rozšířeném zobrazení. */
.ic [data-tip]{cursor:pointer}
.ic .ic-bar,.ic .ic-dot,.ic .ic-slice{transition:opacity var(--t)}
.ic:hover .ic-bar,.ic:hover .ic-dot,.ic:hover .ic-slice{opacity:.82}
.ic .ic-bar:hover,.ic .ic-dot:hover,.ic .ic-slice:hover{opacity:1}
.ic .ic-dot:hover{r:5.5}
.ic-panning{cursor:grabbing}
.ic-zoomed{cursor:grab}
.ic-reset{display:none;position:absolute;top:0;right:0;font:inherit;font-size:11px;padding:3px 9px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink-2);cursor:pointer;transition:var(--t)}
.ic-reset:hover{background:var(--bg);color:var(--ink)}
.ic-zoomed .ic-reset{display:block}
.ic-svg{display:block;width:100%;height:auto;max-height:220px;overflow:visible}
.ic-pie .ic-svg,.ic-donut .ic-svg{max-width:230px;margin:0 auto}
.ic-grid{stroke:var(--line);stroke-width:1}
.ic-axis{stroke:var(--line-2);stroke-width:1.5}
.ic-tick{fill:var(--ink-3);font-size:11px;font-family:var(--font)}
.ic-bar{transition:opacity var(--t)}
.ic-bar:hover,.ic-slice:hover{opacity:.82}
.ic-line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ic-slice{stroke:var(--surface);stroke-width:1.5}
.ic-center-value{fill:var(--ink);font-size:22px;font-weight:700;font-family:var(--font)}
.ic-center-label{fill:var(--ink-3);font-size:11px;font-family:var(--font)}
.ic-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:11.5px;color:var(--ink-2)}
.ic-leg{display:inline-flex;align-items:center;gap:5px;min-width:0}
.ic-leg-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.ic-leg-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
/* Paleta řad: sekční tokeny → graf sedí do zbytku systému a drží se jedné sady barev. */
.ic-c1{fill:var(--accent);stroke:var(--accent)}
.ic-c2{fill:var(--c-sklad);stroke:var(--c-sklad)}
.ic-c3{fill:var(--c-zakazky);stroke:var(--c-zakazky)}
.ic-c4{fill:var(--c-faktury);stroke:var(--c-faktury)}
.ic-c5{fill:var(--c-stroje);stroke:var(--c-stroje)}
.ic-c6{fill:var(--c-reporty);stroke:var(--c-reporty)}
.ic-c7{fill:var(--c-firmy);stroke:var(--c-firmy)}
.ic-c8{fill:var(--ink-2);stroke:var(--ink-2)}
i.ic-c1{background:var(--accent)}
i.ic-c2{background:var(--c-sklad)}
i.ic-c3{background:var(--c-zakazky)}
i.ic-c4{background:var(--c-faktury)}
i.ic-c5{background:var(--c-stroje)}
i.ic-c6{background:var(--c-reporty)}
i.ic-c7{background:var(--c-firmy)}
i.ic-c8{background:var(--ink-2)}
.ic-dot{stroke:var(--surface);stroke-width:1.5}

/* --- Plné zobrazení: roztažený panel + přepis konverzace ------------------ */
.omni-pop.expanded .ai-tbl,.conv-chat .ai-tbl{font-size:13px}
.omni-pop.expanded .ai-tbl th,.omni-pop.expanded .ai-tbl td,.conv-chat .ai-tbl th,.conv-chat .ai-tbl td{padding:8px 12px}
.omni-pop.expanded .ai-tbl td,.conv-chat .ai-tbl td{white-space:normal}
.omni-pop.expanded .ic-svg,.conv-chat .ic-svg{max-height:340px}
.omni-pop.expanded .ic-pie .ic-svg,.omni-pop.expanded .ic-donut .ic-svg,
.conv-chat .ic-pie .ic-svg,.conv-chat .ic-donut .ic-svg{max-width:320px}
.omni-pop.expanded .ai-block,.conv-chat .ai-block{padding:14px 16px}
.omni-pop.expanded .ai-stat-value,.conv-chat .ai-stat-value{font-size:21px}
.conv-chat .msg.ai-blocks{max-width:100%}

/* =========================================================================
   TOPNAV — notifications
   ========================================================================= */
.notif-pop{position:absolute;top:calc(100% + 8px);right:0;width:344px;max-width:calc(100vw - 28px);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-pop);z-index:130;display:none;overflow:hidden}
.notif-pop.open{display:block;animation:rise .12s ease}
.notif-head{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);font-weight:600;font-size:13.5px}
.notif-head .nh-clear{margin-left:auto;font-size:12px;font-weight:600;color:var(--accent-ink);background:0;border:0;cursor:pointer}
.notif-head .nh-clear:hover{color:var(--accent)}
.notif-list{max-height:min(60vh,440px);overflow:auto}
.notif-item{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:var(--t)}
.notif-item:hover{background:var(--surface-2)}
.notif-item:last-child{border-bottom:0}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 8px;margin-top:5px}
.notif-item.read .notif-dot{background:var(--line-2)}
.notif-tx{min-width:0}
.notif-tx .nt{font-weight:600;font-size:13px;color:var(--ink)}
.notif-tx .nd{font-size:12px;color:var(--ink-2);margin-top:1px}
.notif-tx .nm{font-size:11px;color:var(--ink-3);margin-top:3px}
.notif-empty{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:12.5px}
/* Mobile: span full viewport width (like the assistant panel) so the page edge can't clip it. */
@media (max-width:700px){
  .notif-pop{position:fixed;top:62px;left:8px;right:8px;width:auto;max-width:none}
}

/* =========================================================================
   TOPNAV - Zobrazení (per-user look of the shell)
   ========================================================================= */
.view-pop{position:absolute;top:calc(100% + 8px);right:0;width:328px;max-width:calc(100vw - 28px);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-pop);z-index:130;display:none;overflow:hidden}
.view-pop.open{display:block;animation:rise .12s ease}
.view-head{padding:13px 16px;border-bottom:1px solid var(--line);font-weight:600;font-size:13.5px}
.view-row{display:flex;align-items:center;gap:14px;padding:14px 16px}
.view-tx{min-width:0;flex:1}
.view-lbl{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.view-sub{display:block;font-size:11.5px;color:var(--ink-2);margin-top:2px;line-height:1.4}
/* Stepper: one bordered box, the value between the two buttons. */
.zoomctl{flex:0 0 auto;display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.zbtn{width:30px;height:30px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-2);cursor:pointer;transition:var(--t)}
.zbtn svg{width:14px;height:14px}
.zbtn:hover:not(:disabled){background:var(--bg);color:var(--ink)}
.zbtn:disabled{color:var(--ink-4);cursor:default}
/* The value is typed as well as stepped, so it is an input with a quiet % after it. */
.zval{display:flex;align-items:center;gap:2px;height:30px;padding:0 7px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.zval input{width:30px;border:0;background:0;padding:0;text-align:right;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);appearance:textfield}
.zval input:focus{outline:0}
.zval input::-webkit-outer-spin-button,.zval input::-webkit-inner-spin-button{appearance:none;margin:0}
.zval .zsuf{font-size:12.5px;color:var(--ink-3)}
.view-foot{padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-2)}
.view-reset{background:0;border:0;padding:0;font-size:12px;font-weight:600;color:var(--accent-ink);cursor:pointer}
.view-reset:hover{color:var(--accent)}
.view-reset:disabled{color:var(--ink-4);cursor:default}
@media (max-width:700px){
  .view-pop{position:fixed;top:62px;left:8px;right:8px;width:auto;max-width:none}
}

/* =========================================================================
   TABULATOR — loading overlay (dimmed background + blur + spinner)
   Tabulator uses an "alert" layer (.tabulator-alert / .tabulator-alert-msg).
   ========================================================================= */
.tabulator{position:relative}
.tabulator .tabulator-alert{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:40}
.tabulator .tabulator-alert .tabulator-alert-msg{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;color:inherit!important;font-size:inherit!important;font-weight:400!important;max-width:none!important}
.indi-load{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:20px 26px}
.indi-load .indi-spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent);animation:indiSpin .7s linear infinite}
.indi-load .indi-txt{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.indi-load.err{border-color:#f5cdd2}
.indi-load.err .indi-txt{color:var(--danger)}
@keyframes indiSpin{to{transform:rotate(360deg)}}

/* =========================================================================
   EMPLOYEE CELL — pending invitation (missing name)
   ========================================================================= */
.emp-name.is-invited{color:var(--ink-2);font-weight:600}
.emp-sub{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.emp-sub svg{width:11px;height:11px;flex:0 0 11px;color:var(--ink-3)}
.emp-sub.invited{color:var(--warn)}
.emp-sub.invited svg{color:var(--warn)}

/* =========================================================================
   SHEETVIZ — the shared naskládání illustration (indigo.sheetviz.js).
   Colours live here, never on the SVG nodes, so one theme change moves every
   place that draws a sheet.
   ========================================================================= */
.sviz{display:flex;flex-direction:column;gap:8px}
.sviz-svg{display:block;width:100%;height:auto}
.sviz-sheet{fill:var(--surface);stroke:var(--line-2);stroke-width:1.2}
.sviz-piece{fill:var(--accent-soft);stroke:var(--accent);stroke-width:.9}
.sviz-piece.is-off{fill:var(--bg);stroke:var(--line-2);stroke-width:.7}
.sviz-piece.sviz-dense{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1}
/* No outline: the hatch marks the offcut out on its own, and a stroke on top of it draws
   an edge along the grid that reads as a stray line the legend accounts for nothing. */
.sviz-waste{stroke:none}
.sviz-hatch-bg{fill:var(--surface-2)}
.sviz-hatch-line{stroke:var(--line-2);stroke-width:3.4}
.sviz-margin{fill:var(--surface-2)}
.sviz-usable{fill:var(--surface);stroke:var(--line-2);stroke-width:.7;stroke-dasharray:3 2}
/* Šipka náběžné hrany - jediná značka, která říká, jak arch leží ve stroji. */
.sviz-feed{fill:var(--accent);opacity:.8}
.sviz-sw.is-feed{background:var(--accent);opacity:.8;border:0;clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}
.sviz-grain{stroke:var(--sviz-grain);stroke-width:.5;opacity:.6}
.sviz-score{stroke:var(--ink);stroke-width:.9;stroke-dasharray:4 3;opacity:.6}
.sviz-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;font-weight:600;color:var(--ink-3)}
.sviz-li{display:inline-flex;align-items:center;gap:5px}
.sviz-sw{width:11px;height:11px;border-radius:2px;flex:0 0 11px}
.sviz-sw.is-piece{background:var(--accent-soft);border:1px solid var(--accent)}
.sviz-sw.is-off{background:var(--bg);border:1px solid var(--line-2)}
.sviz-sw.is-waste{background:repeating-linear-gradient(45deg,var(--surface-2) 0 3px,var(--line-2) 3px 6px);border:1px solid var(--line-2)}
.sviz-sw.is-margin{background:var(--surface-2);border:1px dashed var(--line-2)}
.sviz-sw.is-grain{background:none;border:0;border-left:2px solid var(--sviz-grain);border-radius:0;width:9px;flex-basis:9px;opacity:.6}
.sviz-sw.is-score{background:none;border:0;border-left:2px dashed var(--ink);border-radius:0;width:9px;flex-basis:9px;opacity:.6}
/* Rozestup mezi produkty: mezera, kterou nechává naskládání. Kreslí se, protože je to
   nastavení, ne prázdný papír - jinak by jediné číslo, které rozšiřuje každou mřížku,
   nebylo v obrázku vidět. */
.sviz-gutter{fill:var(--accent);opacity:.16}
.sviz-sw.is-gutter{background:var(--accent);opacity:.3;border:1px solid var(--accent)}
/* Najetí na legendu ztlumí všechno kromě té části, kterou položka pojmenovává. Pravidla
   musí mít stejnou specifičnost a rozhodovat pořadím - se `:not()` v prvním z nich by
   ztlumení přebilo i to, co se má rozsvítit. Arch je podklad a neztlumí se nikdy, bez něj
   by zvýrazněný kus visel v prázdnu. */
.sviz[data-hl] [data-part]{opacity:.07;transition:opacity .12s ease}
.sviz[data-hl] [data-part="sheet"]{opacity:1}
.sviz[data-hl="piece"] [data-part="piece"],
.sviz[data-hl="off"] [data-part="off"],
.sviz[data-hl="waste"] [data-part="waste"],
.sviz[data-hl="margin"] [data-part="margin"],
.sviz[data-hl="feed"] [data-part="feed"],
.sviz[data-hl="score"] [data-part="score"]{opacity:1}
/* Rozestup i dráha jsou samy o sobě průsvitné, takže se při zvýraznění musí zesílit, jinak
   je ztlumené okolí neodliší. */
.sviz[data-hl="gutter"] [data-part="gutter"]{opacity:.6}
.sviz[data-hl="grain"] [data-part="grain"]{opacity:1;stroke-width:.9}
.sviz-li{cursor:default}