/* ============================================================
   Svět IT — úkolovník (AI redesign)
   Design system: tokens, light/dark, login/2FA
   ============================================================ */

/* ============================================================ TOKENS */
:root {
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --radius:       14px;
  --radius-sm:    10px;
  --radius-lg:    10px;
  --radius-field:  6px;
  --density: 1;

  --accent:        #009bdf;
  --accent-strong: color-mix(in oklch, #009bdf, black 18%);
  --accent-soft:   color-mix(in oklch, #009bdf 14%, white);
  --accent-fg:     #ffffff;

  --ok:         oklch(0.62 0.15 142);
  --ok-soft:    oklch(0.95 0.06 142);
  --warn:       oklch(0.70 0.13 75);
  --warn-soft:  oklch(0.95 0.06 85);
  --danger:     oklch(0.58 0.16 25);
  --danger-soft:oklch(0.95 0.05 25);
  --info:       oklch(0.62 0.11 235);
  --info-soft:  oklch(0.95 0.04 235);

  --speed: 0.18s;
  --ease:  cubic-bezier(0.4, 0.1, 0.2, 1);
}

/* ============================================================ LIGHT THEME */
[data-theme="light"] {
  --bg:          oklch(0.986 0.005 92);
  --bg-2:        oklch(0.969 0.006 92);
  --surface:     oklch(1 0 0);
  --surface-2:   oklch(0.977 0.004 92);
  --rail:        oklch(0.225 0.045 258);
  --rail-fg:     oklch(0.86 0.02 250);
  --rail-muted:  oklch(0.62 0.025 252);
  --rail-active: oklch(0.32 0.055 258);
  --border:        oklch(0.91 0.004 92);
  --border-strong: oklch(0.85 0.005 92);
  --text:   oklch(0.26 0.038 262);
  --text-2: oklch(0.45 0.03 262);
  --muted:  oklch(0.585 0.022 262);
  --shadow-sm: 0 1px 2px oklch(0.32 0.04 262 / 0.06), 0 1px 3px oklch(0.32 0.04 262 / 0.05);
  --shadow-md: 0 6px 18px oklch(0.32 0.04 262 / 0.09), 0 2px 5px oklch(0.32 0.04 262 / 0.05);
  --shadow-lg: 0 22px 54px oklch(0.26 0.05 262 / 0.18), 0 5px 14px oklch(0.26 0.04 262 / 0.09);
}

/* ============================================================ DARK THEME */
[data-theme="dark"] {
  --bg:          oklch(0.17 0.012 252);
  --bg-2:        oklch(0.20 0.013 252);
  --surface:     oklch(0.215 0.014 252);
  --surface-2:   oklch(0.245 0.015 252);
  --rail:        oklch(0.155 0.013 252);
  --rail-fg:     oklch(0.88 0.01 250);
  --rail-muted:  oklch(0.60 0.015 250);
  --rail-active: oklch(0.28 0.02 252);
  --border:        oklch(0.30 0.014 252);
  --border-strong: oklch(0.38 0.016 252);
  --text:   oklch(0.94 0.006 250);
  --text-2: oklch(0.74 0.01 250);
  --muted:  oklch(0.60 0.012 250);
  --accent:        color-mix(in oklch, #009bdf, white 18%);
  --accent-strong: color-mix(in oklch, #009bdf, white 28%);
  --accent-soft:   color-mix(in oklch, #009bdf 20%, oklch(0.20 0.013 252));
  --ok-soft:    oklch(0.30 0.05 155);
  --warn-soft:  oklch(0.33 0.06 80);
  --danger-soft:oklch(0.32 0.06 25);
  --info-soft:  oklch(0.30 0.05 235);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 18px 48px oklch(0 0 0 / 0.55);
}

/* ============================================================ VISUAL VARIANTS */
[data-variant="soft"] {
  --radius:       18px;
  --radius-sm:    13px;
  --radius-lg:    14px;
  --radius-field:  9px;
}
[data-variant="contrast"] {
  --radius:       7px;
  --radius-sm:    5px;
  --radius-lg:    6px;
  --radius-field: 3px;
}
[data-variant="contrast"][data-theme="light"] {
  --bg:     oklch(0.955 0.004 248);
  --border: oklch(0.88 0.006 248);
}

/* ============================================================ BASE */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
  padding: 0;
  margin: 0;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
/* Stejná modrá v obou režimech — --accent-soft v tmavém je namíchaná do tmavého pozadí (dobrá
   pro jemné odznaky), ale jako výběr textu kurzorem by skoro splynula s černou. */
::selection { background: color-mix(in oklch, #009bdf 14%, white); color: #0a2540; }

/* ============================================================ UTILITIES */
.ico  { width: 18px; height: 18px; flex-shrink: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-feature-settings: normal; }

.tone-ok      { background: var(--ok-soft);      color: var(--ok); }
.tone-warn    { background: var(--warn-soft);     color: oklch(0.55 0.13 65); }
.tone-danger  { background: var(--danger-soft);   color: var(--danger); }
.tone-info    { background: var(--info-soft);     color: var(--info); }
.tone-accent  { background: var(--accent-soft);   color: var(--accent-strong); }
.tone-neutral { background: var(--surface-2);     color: var(--text-2); }
[data-theme="dark"] .tone-warn { color: var(--warn); }

/* ============================================================ SCROLLBARS */
*::-webkit-scrollbar       { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  height: 38px; padding: 0 17px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; border: 1px solid transparent;
  transition: all var(--speed) var(--ease); white-space: nowrap;
}
.btn .ico { width: 17px; height: 17px; }
.btn:active { transform: translateY(0.5px); }
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; box-shadow: none; }

.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-strong); }

.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }

.btn-subtle { background: var(--surface-2); color: var(--text-2); }
.btn-subtle:hover { background: var(--border); color: var(--text); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.93); }
.btn-del:hover { background: var(--danger-soft); color: var(--danger); }
.btn.approve-yes { background: var(--ok); color: #fff; }
.btn.approve-yes:hover { filter: brightness(0.95); }
.btn.approve-no { background: var(--danger-soft); color: var(--danger); border-color: transparent; width: 32px; padding: 0; }
.btn.approve-no:hover { background: var(--danger); color: #fff; }

.btn-sm { height: 32px; padding: 0 13px; font-size: 12.5px; border-radius: 999px; }
.btn-icon-only { padding: 0; width: 38px; }
.btn-icon-only.btn-sm { width: 32px; }

/* ============================================================ FOCUS */
.btn:focus-visible,
.icon-btn:focus-visible,
.user-btn:focus-visible,
.nav-item:focus-visible,
.tab:focus-visible,
.qa-pill:focus-visible,
.action-bar-mine:focus-visible,
.seg button:focus-visible,
.triseg button:focus-visible,
.select-trigger:focus-visible,
.pager button:focus-visible,
.chip-opt:focus-visible,
.step-btn:focus-visible,
.crumb-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-item:focus-visible { outline-offset: -2px; }

/* ============================================================ FILTERBAR */
.filterbar {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
/* Create/add button — accent pill style (used in filterbar or entity-header-actions) */
.filterbar > a.btn, .filterbar > .btn,
.entity-header-actions > a.btn, .entity-header-actions > .btn {
  align-self: flex-end; flex-shrink: 0;
  background: var(--accent) !important; border-color: var(--accent) !important;
  color: #fff !important; font-size: 13px !important; font-weight: 600 !important;
  border-radius: 999px !important; padding: 0 18px !important; height: 38px;
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  box-shadow: none !important; white-space: nowrap;
}
.filterbar > a.btn:hover,
.entity-header-actions > a.btn:hover { background: color-mix(in oklab, var(--accent) 82%, #000) !important; border-color: color-mix(in oklab, var(--accent) 82%, #000) !important; }

/* entity-header-actions: create button wrapper — sits above filterbar */
/* Default (non-tabbed): renders as row above filterbar */
.entity-header-actions {
  display: flex; justify-content: flex-end; align-items: center; margin-bottom: 8px;
}
/* Tabbed context: absolutely positioned do tab řady relativně k vstack.gap-3 */
/* right: 44px = místo pro help trigger (? ikona ~36px + 8px mezera); bez help trigger: right: 0 */
.tab-content .vstack.gap-3 { position: relative; }
.tab-content .entity-header-actions {
  position: absolute; top: -43px; left: 0; right: 44px; height: 43px; margin: 0;
  display: flex; justify-content: flex-end; align-items: center;
  z-index: 10; pointer-events: none;
}
.tab-content .entity-header-actions > * { pointer-events: all; }
.tab-content .entity-header-actions:empty { display: none; }
/* Bez help triggeru: button může jít až k pravému okraji */
.tab-content .vstack.gap-3:not(:has(.help-trigger)) .entity-header-actions { right: 0; }
/* Mezera mezi tab řadou a filterbar kartou */
.tab-content .filterbar { margin-top: 12px; }

/* ButtonGroupAjaxChoice (Vše/Ano/Ne) — global triseg style across entire app */
/* :not(nobr > .btn-group) vylučuje action buttons v řádcích tabulky */
.btn-group:has(.btn-outline-secondary, .btn-info):not(nobr > .btn-group) {
  display: inline-flex !important; gap: 3px !important; padding: 3px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: calc(var(--radius-field) + 3px) !important;
  height: 38px !important; background: var(--surface-2) !important;
  box-shadow: inset 0 1px 2px color-mix(in oklch, var(--text) 6%, transparent) !important;
  align-items: center !important;
}
.btn-group:has(.btn-outline-secondary, .btn-info):not(nobr > .btn-group) .btn {
  border: none !important; background: transparent !important;
  color: var(--muted) !important; font-size: 13px !important; font-weight: 600 !important;
  padding: 0 14px !important; border-radius: var(--radius-field) !important;
  cursor: pointer !important; box-shadow: none !important;
  height: 30px !important; min-width: 0 !important;
  display: inline-flex !important; align-items: center !important; line-height: 1 !important;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.btn-group:has(.btn-outline-secondary, .btn-info):not(nobr > .btn-group) .btn:hover { color: var(--text) !important; }
/* Active state — semantic colors: Vše(1st)=blue, Ano(2nd)=green, Ne(3rd)=red */
/* YesNoAny enum order: ANY=1, YES=2, NO=3 */
.btn-group:has(.btn-outline-secondary, .btn-info):not(nobr > .btn-group) .btn.btn-info,
.btn-group:has(.btn-outline-secondary, .btn-info):not(nobr > .btn-group) .btn.btn-success,
.btn-group:has(.btn-outline-secondary, .btn-info):not(nobr > .btn-group) .btn.btn-danger {
  color: #fff !important;
  box-shadow: 0 1px 2px color-mix(in oklch, var(--text) 22%, transparent) !important;
}
.btn-group:has(.btn-outline-secondary, .btn-info):not(nobr > .btn-group) .btn:nth-child(1).btn-info { background: var(--accent) !important; }
.btn-group:has(.btn-outline-secondary, .btn-info):not(nobr > .btn-group) .btn:nth-child(2).btn-info { background: var(--ok) !important; }
.btn-group:has(.btn-outline-secondary, .btn-info):not(nobr > .btn-group) .btn:nth-child(3).btn-info { background: var(--danger) !important; }
/* YesNoCheckBox (Ano/Ne přepínač) — jiná knihovna než ButtonGroupAjaxChoice výše,
   aktivní tlačítko má natvrdo .btn-success (Ano) / .btn-danger (Ne), nikdy .btn-info. */
.btn-group:has(.btn-outline-secondary, .btn-info):not(nobr > .btn-group) .btn.btn-success { background: var(--ok) !important; }
.btn-group:has(.btn-outline-secondary, .btn-info):not(nobr > .btn-group) .btn.btn-danger { background: var(--danger) !important; }

/* Selects inside filterbar → ctrl style */
.filterbar select {
  height: 38px; padding: 0 30px 0 11px;
  border-radius: var(--radius-field); border: 1px solid var(--border) !important;
  background-color: var(--surface-2) !important; color: var(--text) !important;
  font-size: 13.5px !important; outline: none; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important;
  cursor: pointer; min-width: 140px;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.filterbar select:focus {
  border-color: var(--accent) !important; background-color: var(--surface) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* Date picker inputs inside filterbar → ctrl style */
.filterbar input[type="text"].ctrl,
.filterbar .ctrl { min-width: 120px; }

/* ============================================================ INPUTS */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-label { font-size: 11.5px; font-weight: 600; color: var(--text-2); }

.ctrl {
  height: 38px; padding: 0 11px; border-radius: var(--radius-field); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 13.5px; outline: none;
  transition: all var(--speed) var(--ease); min-width: 150px;
}
.ctrl:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
select.ctrl {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;
}
textarea.ctrl { min-height: 84px; padding: 9px 11px; resize: vertical; line-height: 1.5; width: 100%; }

/* ============================================================ FORM SECTIONS (Úkol formulář) */
.form-section { margin-bottom: 26px; }
.form-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent-strong); margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.form-section-title .ico { width: 14px; height: 14px; flex: none; }
.form-section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.form-section--highlight {
  background: var(--ok-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px;
}
.form-section--highlight-info {
  background: var(--info-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px;
}
/* EditHodinyPanel ("Čas a výjezd") brings its own raw Bootstrap .card + bg-info-subtle box.
   Standalone (e.g. Outsourcing event form) that's fine, but nested inside this highlight it
   doubled up into a card-in-a-card with two different blues. Flatten it into the outer card
   instead of touching the shared template, which other forms embed on its own. */
.form-section--highlight-info .hodiny-panel.card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.form-section--highlight-info .hodiny-panel .card-body.bg-info-subtle {
  background: transparent !important;
  padding: 0 !important;
}
/* Quick-offset chips — "+3dny/+7dní/+14dní" (Termín, AddSubtractTime — plain BootstrapAjaxLink
   Type.Default, carries Bootstrap .btn/.btn-default we override rather than extend, hence
   !important throughout, same recipe as the favorites redesign above). */
.qo-chip.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  border-radius: 99px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 11px !important;
  height: auto !important;
  box-shadow: none !important;
  margin-right: 6px;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.qo-chip.btn:hover {
  background: var(--accent-soft) !important;
  border-color: color-mix(in oklch, var(--accent) 35%, transparent) !important;
  color: var(--accent-strong) !important;
}

/* Quick-offset chips — EditHodinyPanel ("Čas a výjezd"): -15/30/60min (.minus), +15/30/60min
   (.plus), and the "set to a specific value" links (=15min/konec předch. záznamu/setToLast, new
   .set class added below since they previously had none). Replaces the panel's own hardcoded
   inline <style> (#85144b/#3D9970) with design-system tokens. Links are BootstrapAjaxLink
   Type.Outline_Secondary — same !important-heavy override as .qo-chip above. */
.hodiny-panel a.minus,
.hodiny-panel a.plus,
.hodiny-panel a.set {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 99px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 2px 9px !important;
  height: auto !important;
  box-shadow: none !important;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.hodiny-panel a.minus { color: var(--danger) !important; }
.hodiny-panel a.plus  { color: var(--ok) !important; }
.hodiny-panel a.set   { color: var(--muted) !important; }
.hodiny-panel a.minus:hover { background: var(--danger-soft) !important; border-color: color-mix(in oklch, var(--danger) 35%, transparent) !important; }
.hodiny-panel a.plus:hover  { background: var(--ok-soft) !important; border-color: color-mix(in oklch, var(--ok) 35%, transparent) !important; }
.hodiny-panel a.set:hover   { background: var(--surface-2) !important; border-color: var(--border-strong) !important; color: var(--text-2) !important; }
.hodiny-quick-row { flex-wrap: wrap; row-gap: 6px; margin-top: 4px; }
.hodiny-quick-row > div { display: flex; flex-wrap: wrap; gap: 5px; }
/* "=20min/=30min/=45min/=60min" (Do řádek) — 4 chipy, po odebrání =15min je řadíme 2×2 místo
   volného flex-wrapu, který by je mohl rozhodit nerovnoměrně (např. 3+1). */
.hodiny-quick-row .hodiny-set-group { display: grid !important; grid-template-columns: repeat(2, auto); gap: 5px !important; }

.form-row { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.form-row:last-child { margin-bottom: 0; }
.form-row > label { font-size: 13.5px; font-weight: 600; color: var(--text-2); padding-top: 9px; }
.form-row > label .req,
.req { color: var(--danger); margin-left: 2px; }
/* Wicket-Bootstrap auto-generuje label.required se <span>*</span> u povinných polí */
label.required span { color: var(--danger); margin-left: 2px; }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.form-control-wide { width: 100%; }
.chip-pick { display: flex; gap: 7px; flex-wrap: wrap; }
.meta-line {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; color: var(--muted); margin-bottom: 18px;
}
.meta-line b { color: var(--text-2); font-weight: 600; }
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; gap: 7px; margin-bottom: 14px; }
  .form-row > label { padding-top: 0; }
}

/* ============================================================ SEARCH */
/* Design system .search wrapper (used in prototype JSX) */
.search {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-field); padding: 0 12px; height: 38px; width: 280px;
  color: var(--muted); transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.search:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input { border: none; background: transparent; outline: none; color: var(--text); font-size: 13.5px; width: 100%; }
.search input::placeholder { color: var(--muted); }
.search kbd {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
}

/* SearchPanel renders Bootstrap form.m-0 > div.input-group → override to .search appearance */
/* Targets ALL SearchPanel instances across the app */
form.m-0 {
  display: inline-flex;    /* don't create full-width block */
  align-items: stretch;
}
form.m-0 .input-group {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  background: var(--surface-2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-field) !important;
  height: 38px !important;
  min-width: 200px;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
form.m-0 .input-group:focus-within {
  border-color: var(--accent) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
/* Icon wrapper */
form.m-0 .input-group-text {
  background: transparent !important;
  border: none !important;
  padding: 0 6px 0 12px !important;
  color: var(--muted) !important;
  font-size: 15px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
/* Text input */
form.m-0 .input-group .form-control {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 13.5px !important;
  padding: 0 8px 0 0 !important;
  height: 100% !important;
  flex: 1 !important;
  min-width: 100px !important;
  outline: none !important;
  border-radius: 0 !important;
}
form.m-0 .input-group .form-control::placeholder { color: var(--muted) !important; }
/* Hide the submit button (Enter still submits) */
form.m-0 .input-group button[type="submit"] { display: none !important; }
/* Erase / clear button → subtle × */
form.m-0 .input-group button[type="button"] {
  background: transparent !important;
  border: none !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  padding: 0 10px !important;
  height: 100% !important;
  cursor: pointer !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 0 !important;
  transition: color var(--speed) var(--ease);
}
form.m-0 .input-group button[type="button"]:hover { color: var(--text) !important; }

/* ============================================================ SELECT (custom dropdown) */
.select { position: relative; }
.select-menu { min-width: 0 !important; }
.select-trigger { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
.select-trigger > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-ph { color: var(--muted); }
.select-caret { margin-left: auto; color: var(--muted); transition: transform var(--speed) var(--ease); flex: 0 0 auto !important; }
.select-trigger.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.select-trigger.open .select-caret { transform: rotate(180deg); }
.select-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.select-opt:hover { background: var(--surface-2); }
.select-opt.on { color: var(--accent-strong); font-weight: 600; background: var(--accent-soft); }
.select-opt .ico { color: var(--accent); flex: 0 0 auto; }

/* ============================================================ PAGER */
.pager { display: flex; align-items: center; gap: 4px; }
.pager button {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600;
  transition: all var(--speed) var(--ease);
}
.pager button:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.pager button.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.pager button:disabled { opacity: 0.4; cursor: default; }

/* Bootstrap .pagination → design system .pager look */
.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pagination .page-item .page-link {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px !important;
  border: 1px solid var(--border) !important; background: var(--surface) !important;
  color: var(--text-2) !important; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--speed) var(--ease); line-height: 1; box-shadow: none !important;
}
.pagination .page-item .page-link:hover { border-color: var(--border-strong) !important; color: var(--text) !important; background: var(--surface) !important; }
.pagination .page-item.active .page-link { background: var(--accent) !important; color: var(--accent-fg) !important; border-color: var(--accent) !important; }
.pagination .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; }

/* ============================================================ BOOL + PRIO */
.bool { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; }
.bool.y { background: var(--ok-soft); color: var(--ok); }
.bool.n { background: var(--danger-soft); color: var(--danger); }
.bool .ico { width: 14px; height: 14px; }

.prio { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.prio .bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 13px; }
.prio .bars i { width: 3px; border-radius: 1px; background: var(--border-strong); }
.prio .bars i.on { background: var(--accent); }
.prio-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--warn); flex-shrink: 0; box-shadow: 0 0 0 3px var(--warn-soft); }
.prio-pick { display: inline-flex; gap: 6px; }
.prio-pick button { width: 42px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); font-size: 14px; font-weight: 700; color: var(--text-2); display: grid; place-items: center; transition: all var(--speed) var(--ease); font-variant-numeric: tabular-nums; }
.prio-pick button:hover { border-color: var(--border-strong); color: var(--text); }
.prio-pick button.on { color: #fff; border-color: transparent; }

/* ============================================================ CHIP-OPT + STEP-BTN */
.chip-opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all var(--speed) var(--ease); }
.chip-opt:hover { border-color: var(--border-strong); color: var(--text); }
.chip-opt.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.chip-opt .ico { width: 14px; height: 14px; }
.step-btn { padding: 5px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); }
.step-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Bootstrap .form-control + .form-select → design system .ctrl look */
/* Globální, beze scope na kontejner — dřív jen .main-content/.tab-content/.ukol-form-modal, takže
   pole uvnitř všech ostatních modálů (editace úkolu, fakturanta, nepřítomnosti, ...) zůstávala
   čistě bílá i v tmavém režimu. :not(.bootstrap-select) vylučuje wrapper <div>, na který
   bootstrap-select.js zkopíruje třídu form-control z originálního <select> — bez toho by dostal
   box i wrapper i toggle uvnitř (dvojitý box). */
.form-control:not(.bootstrap-select),
.form-select:not(.bootstrap-select) {
  height: 38px; padding: 0 11px; border-radius: var(--radius-field) !important;
  border: 1px solid var(--border) !important; background-color: var(--surface-2) !important;
  color: var(--text) !important; font-size: 13.5px; outline: none; box-shadow: none !important;
  transition: all var(--speed) var(--ease);
}
.form-control:not(.bootstrap-select):focus,
.form-select:not(.bootstrap-select):focus {
  border-color: var(--accent) !important; background-color: var(--surface) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important; color: var(--text) !important;
}
textarea.form-control { height: auto; min-height: 84px; padding: 9px 11px; }
/* Needs-not-edit popisky (Label) dostávají od frameworku zároveň .form-control i .form-control-plaintext
   — plaintext musí vyhrát a vypadat jako obyčejný text, ne jako ohraničený input. */
.form-control.form-control-plaintext {
  height: auto !important; padding: 6px 0 !important; border: none !important;
  background: transparent !important; box-shadow: none !important;
}

/* ============================================================ BOOTSTRAP-SELECT OVERRIDES */
/* Agilecoders bootstrap-select toggle → stejný styl jako .form-select / .ctrl */
.bootstrap-select > .dropdown-toggle.btn-outline-secondary {
  height: 38px !important;
  padding: 0 30px 0 11px !important;
  border-radius: var(--radius-field) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  text-align: left;
  display: flex !important;
  align-items: center !important;
  position: relative;
}
/* Otevřený stav — accent border + glow, žádný tmavý fill */
.bootstrap-select.show > .dropdown-toggle.btn-outline-secondary,
.bootstrap-select > .dropdown-toggle.btn-outline-secondary:active {
  background: var(--surface) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  color: var(--text) !important;
}
/* Text uvnitř tlačítka */
.bootstrap-select .filter-option { display: flex; align-items: center; flex: 1; min-width: 0; }
.bootstrap-select .filter-option-inner-inner {
  color: var(--text-2) !important;
  font-size: 13.5px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Skrýt výchozí Bootstrap caret, nahradit SVG chevronem */
.bootstrap-select > .dropdown-toggle.btn-outline-secondary::after {
  content: "" !important;
  position: absolute !important; right: 10px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important; height: 12px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important;
  border: none !important; margin: 0 !important; vertical-align: 0 !important;
}
/* Dropdown menu — bootstrap-select nests a SECOND element also carrying the "dropdown-menu"
   class (.dropdown-menu.inner, the scrollable options list) inside the outer positioned one.
   Styling both the same way stacked two rounded/bordered/shadowed boxes inside each other,
   showing as stray corner artifacts where they didn't quite line up. Style only the outer
   one; the inner one gets no box of its own. */
.bootstrap-select > .dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 4px 16px oklch(0 0 0 / 0.12) !important;
  padding: 6px !important;
}
.bootstrap-select .dropdown-menu.inner {
  border: none !important; box-shadow: none !important; border-radius: 0 !important;
  background: transparent !important; padding: 0 !important;
}
/* Hledací pole */
.bootstrap-select .bs-searchbox { padding: 4px 4px 6px !important; }
.bootstrap-select .bs-searchbox input {
  height: 32px !important; border-radius: var(--radius-field) !important;
  border: 1px solid var(--border) !important; background: var(--surface-2) !important;
  color: var(--text) !important; font-size: 13px !important;
  box-shadow: none !important;
}
.bootstrap-select .bs-searchbox input:focus {
  border-color: var(--accent) !important; background: var(--surface) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
/* Položky v menu */
.bootstrap-select .dropdown-item {
  position: relative !important;
  border-radius: 6px !important; padding: 7px 10px !important;
  font-size: 13.5px !important; color: var(--text) !important; background: transparent !important;
  margin: 2px 0 !important; /* malá mezera mezi položkami, ať probarvené (aktivní) položky nesplývají */
}
.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus { background: var(--surface-2) !important; color: var(--text) !important; }
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item.selected {
  color: var(--accent-strong) !important; font-weight: 600 !important; background: var(--accent-soft) !important;
}
/* bootstrap-select's own checkmark glyph renders inconsistently (crooked/off) in this theme —
   replace with a clean SVG check drawn via mask, colored through background so it stays theme-aware. */
.bootstrap-select .dropdown-item .check-mark {
  position: absolute !important; right: 10px !important; left: auto !important; bottom: auto !important;
  top: 50% !important; margin: 0 !important; transform: translateY(-50%) !important;
  background: var(--accent-strong) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  width: 15px !important; height: 15px !important;
}
/* Akční tlačítka (Vybrat vše / Zrušit výběr) — mezera mezi nimi + roztažené na celou šířku,
   ať šířkou odpovídají seznamu položek pod nimi (bootstrap-select je defaultně spojuje bez mezery). */
.bootstrap-select .bs-actionsbox {
  padding: 0 0 8px !important; margin-bottom: 6px !important; border-bottom: 1px solid var(--border);
}
.bootstrap-select .bs-actionsbox .btn-group { display: flex !important; width: 100% !important; gap: 6px; }
.bootstrap-select .bs-actionsbox .btn {
  flex: 1 1 0; margin: 0 !important;
  border-radius: var(--radius-field) !important; border-color: var(--border) !important;
  background: var(--surface-2) !important; color: var(--text-2) !important; font-size: 12px !important;
  box-shadow: none !important;
}
.bootstrap-select .bs-actionsbox .btn:hover { background: var(--surface) !important; color: var(--text) !important; }

/* ============================================================ TRISEG (Ano / Ne toggle) */
.triseg {
  display: inline-flex; gap: 3px; padding: 3px;
  border: 1px solid var(--border); border-radius: calc(var(--radius-field) + 3px);
  height: 38px; background: var(--surface-2);
  box-shadow: inset 0 1px 2px color-mix(in oklch, var(--text) 6%, transparent);
}
.triseg button {
  border: none; background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 600; padding: 0 14px;
  border-radius: var(--radius-field); cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.triseg button:hover:not(.on) { color: var(--text); }
.triseg button.on {
  background: var(--accent); color: var(--accent-fg);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--text) 22%, transparent);
}
.triseg button.on.ok { background: var(--ok); }
.triseg button.on.no { background: var(--danger); }

/* ============================================================ TABS */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tab {
  padding: 11px 15px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  border: none; background: transparent; position: relative; display: flex; align-items: center; gap: 8px;
  white-space: nowrap; flex: none;
  transition: color var(--speed) var(--ease);
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent); }
.tab.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px; background: var(--accent); border-radius: 2px; }
.tab .cnt { font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--text-2); border-radius: 99px; padding: 1px 7px; }
.tab.on .cnt { background: var(--accent-soft); color: var(--accent-strong); }

/* ============================================================ SUBTABS */
.subtabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.subtab {
  border: none; background: transparent; cursor: pointer;
  padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.subtab:hover { color: var(--text); }
.subtab.on { color: var(--accent-strong); border-bottom-color: var(--accent); }
.subtab .cnt { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-variant-numeric: tabular-nums; }
.subtab.on .cnt { background: var(--accent-soft); color: var(--accent-strong); }

/* ============================================================ SEG (segmented selector) */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-field); overflow: hidden; background: var(--surface-2); }
.seg button { border: none; background: transparent; cursor: pointer; padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; border-right: 1px solid var(--border); }
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent); color: var(--accent-fg); }
.seg .seg-cnt { font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 99px; background: oklch(1 0 0 / 0.22); font-variant-numeric: tabular-nums; }
.seg button:not(.on) .seg-cnt { background: var(--surface); color: var(--muted); }

/* ============================================================ CARD */
.ad-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.ad-card-pad  { padding: 20px; }
.ad-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.ad-card-head h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 9px; }

/* ============================================================ BADGE */
.ad-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 2.5px 9px;
  border-radius: 99px; white-space: nowrap; line-height: 1.4;
}
.ad-badge.ok     { background: var(--ok-soft);     color: var(--ok); }
.ad-badge.warn   { background: var(--warn-soft);   color: oklch(0.52 0.13 60); }
.ad-badge.danger { background: var(--danger-soft); color: var(--danger); }
.ad-badge.info   { background: var(--info-soft);   color: var(--info); }
.ad-badge.neutral{ background: var(--surface-2);   color: var(--text-2); border: 1px solid var(--border); }
.ad-badge.accent { background: var(--accent-soft); color: var(--accent-strong); }
[data-theme="dark"] .ad-badge.warn { color: var(--warn); }

/* ============================================================ TABLE */
.tablewrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl thead th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--muted); padding: 11px 14px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
  background: var(--surface); z-index: 1; user-select: none; position: sticky; top: 0;
}
table.tbl thead tr:first-child th:first-child { border-top-left-radius: var(--radius-lg); }
table.tbl thead tr:first-child th:last-child { border-top-right-radius: var(--radius-lg); }
table.tbl thead th.sortable { cursor: pointer; }
table.tbl thead th.sortable:hover { color: var(--text); }
table.tbl tbody td { padding: calc(11px * var(--density)) 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
table.tbl tbody tr { transition: background var(--speed) var(--ease); cursor: pointer; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr:last-child td { border-bottom: none; }
.cell-strong { font-weight: 600; color: var(--text); }
.cell-id { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.cell-muted { color: var(--muted); }
.cell-num { font-variant-numeric: tabular-nums; text-align: right; }
.row-flex { display: flex; align-items: center; }
.linklike { color: var(--accent); font-weight: 600; }
.linklike:hover { text-decoration: underline; }

/* Bootstrap .table override — resets Bootstrap table to match design system */
.main-content .table,
.tab-content .table,
.ad-card .table {
  width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 0;
  --bs-table-striped-bg: transparent; --bs-table-hover-bg: transparent;
  --bs-table-color: var(--text); --bs-table-bg: transparent;
  --bs-table-accent-bg: transparent;
}
.main-content .table thead th,
.tab-content .table thead th,
.ad-card .table thead th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--muted) !important;
  padding: 11px 14px; border-bottom: 1px solid var(--border) !important;
  border-color: var(--border) !important;
  white-space: nowrap; background: var(--surface) !important;
  user-select: none;
}
.main-content .table tbody td,
.tab-content .table tbody td,
.ad-card .table tbody td {
  padding: calc(11px * var(--density)) 14px;
  border-bottom: 1px solid var(--border) !important;
  border-color: var(--border) !important;
  vertical-align: middle !important; color: var(--text) !important;
  background: transparent;
}
.main-content .table tbody tr,
.tab-content .table tbody tr,
.ad-card .table tbody tr { transition: background var(--speed) var(--ease); }
.main-content .table tbody tr:hover > td,
.tab-content .table tbody tr:hover > td,
.ad-card .table tbody tr:hover > td { background: var(--surface-2) !important; }
.main-content .table tbody tr:last-child td,
.tab-content .table tbody tr:last-child td,
.ad-card .table tbody tr:last-child td { border-bottom: none !important; }
/* remove Bootstrap striped rows — :not(.table-warning) etc. keeps contextual state colors
   (e.g. weekend/holiday columns in KalendarFulfillmentPanel) intact on odd rows instead of
   forcing them transparent too, which was blanking the weekend highlight on odd-positioned rows. */
.main-content .table-striped > tbody > tr:nth-of-type(odd) > *:not(.table-warning):not(.table-danger):not(.table-success):not(.table-info),
.tab-content .table-striped > tbody > tr:nth-of-type(odd) > *:not(.table-warning):not(.table-danger):not(.table-success):not(.table-info),
.ad-card .table-striped > tbody > tr:nth-of-type(odd) > *:not(.table-warning):not(.table-danger):not(.table-success):not(.table-info) {
  --bs-table-accent-bg: transparent; background-color: transparent !important;
}

/* Mezera mezi filterbar kartou a tabulkou — Bootstrap gap-3 (16px) je moc, zkrátit na 8px */
.main-content .vstack.gap-3:has(.filterbar),
.tab-content .vstack.gap-3:has(.filterbar) { gap: 8px !important; }

/* ============================================================ TABLE CARD WRAPPER */
/* div[table-container] přímo obaluje table.table — dostat .card vizuál (border+radius+shadow) */
.main-content div:has(> table.table),
.tab-content div:has(> table.table) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
/* V attention-card (.ad-card) je karta nadřazená — žádná karta uvnitř karty */
.attention-card div:has(> table.table) {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
/* Řádky s barvou klienta (úkoly od externího klienta) — CSS proměnná místo inline background-color */
.table tbody tr.row-klient-color > td {
  background: color-mix(in oklch, var(--row-accent) 12%, var(--surface)) !important;
}
.table tbody tr.row-klient-color:hover > td {
  background: color-mix(in oklch, var(--row-accent) 20%, var(--surface-2)) !important;
}
.table tbody tr.row-klient-color > td:first-child {
  box-shadow: inset 3px 0 0 var(--row-accent);
}

/* ============================================================ TABLE ROW ACTIONS
   <nobr> je unikátní Wicket framework wrapper pro řádkové akce.
   Cíl: btn-subtle btn-sm btn-icon-only — 32×32px kulaté šedé tlačítko, červený hover pro delete. */

/* vstack.gap-3 wrapper (z EntityActionsPanel) se v action buňce stane transparentním */
td .vstack.gap-3:has(> nobr) { display: contents; }

/* nobr = flex řádek zarovnaný vpravo */
nobr {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  white-space: nowrap;
}

/* btn-group unwrap — tlačítka se stanou přímými flex children nobr */
nobr .btn-group { display: contents !important; }

/* Všechna action tlačítka → btn-subtle btn-sm btn-icon-only */
nobr .btn, nobr a.btn {
  height: 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease) !important;
}

/* Hover: všechna action tlačítka */
nobr .btn:hover, nobr a.btn:hover {
  background: var(--border) !important;
  color: var(--text) !important;
}

/* FontAwesome5 ikony uvnitř buttonů (agilecoders: <i class="fas fa-..."> nebo <span class="fas fa-...">) */
nobr .btn i, nobr .btn span.fas, nobr .btn span.far, nobr .btn span.fa, nobr .btn span[class*="fa"] {
  font-size: 14px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  pointer-events: none;
}

/* Delete: červený hover (btn-del efekt) */
nobr .btn-danger:hover, nobr a.btn-danger:hover {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
}

/* ============================================================ NABÍDKY ROW ACTIONS
   Design: edit=subtle (shodné s ostatními sekcemi), copy=subtle, "⋯" dropdown s PDF exporty + delete. */

/* Dropdown trigger: no Bootstrap caret */
.nabidka-row-menu > .btn::after { display: none !important; }

/* Dropdown menu: min-width dle návrhu */
.nabidka-row-menu .dropdown-menu {
  min-width: 210px !important;
  padding: 6px 0 !important;
}
/* "Export" header: uppercase small */
.nabidka-row-menu .dropdown-header {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  padding: 6px 16px 4px !important;
}

/* Dropdown-menu items: reset BootstrapLink btn classes to look like menu items */
.nabidka-row-menu .dropdown-menu a.btn,
.nabidka-row-menu .dropdown-menu a.nabidka-pdf-item.btn {
  background: transparent !important;
  color: var(--text) !important;
  border: none !important;
  border-radius: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  transition: background var(--speed) var(--ease) !important;
}
.nabidka-row-menu .dropdown-menu a.btn:hover,
.nabidka-row-menu .dropdown-menu a.nabidka-pdf-item.btn:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.nabidka-row-menu .dropdown-menu a.btn i[class*="fa"],
.nabidka-row-menu .dropdown-menu a.nabidka-pdf-item.btn i[class*="fa"] {
  font-size: 14px !important;
  width: 16px !important;
  height: auto !important;
  flex-shrink: 0;
  opacity: 0.6;
}
/* Delete item: danger color */
.nabidka-row-menu .dropdown-menu a.btn.btn-danger {
  color: var(--danger) !important;
}
.nabidka-row-menu .dropdown-menu a.btn.btn-danger:hover {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
}
.nabidka-row-menu .dropdown-menu a.btn.btn-danger i[class*="fa"] { opacity: 1; }

/* ============================================================ ATTENTION CARD (dashboard) */
.attention-card { overflow: clip; }
.attention-card .ad-card-head { padding-bottom: 0; border-bottom: none; }
.attention-card .nav-tabs { padding: 0 18px !important; margin-top: 8px; border-bottom: 1px solid var(--border) !important; }
.attention-card .nav-tabs .nav-link.active::after { bottom: -1px; }
.attention-card .entity-header-actions { position: static !important; height: auto !important; margin-bottom: 8px !important; }
.attention-card .tab-content { border-top: none; }

/* Filterbar uvnitř ad-card = průhledný flex, bez vlastního rámečku */
.ad-card .filterbar {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
  margin-bottom: 0 !important;
}

/* ============================================================ LOGIN */
.login-stage {
  position: relative; min-height: 100vh; width: 100%;
  display: grid; place-items: center; padding: 32px 20px;
  background: var(--bg); overflow: hidden;
}

.login-deco {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 92% 8%, oklch(0.55 0.13 224 / 0.10) 0, transparent 42%),
    radial-gradient(circle at 6% 96%, oklch(0.30 0.05 258 / 0.08) 0, transparent 40%),
    radial-gradient(oklch(0.30 0.05 258 / 0.05) 1.3px, transparent 1.4px);
  background-size: auto, auto, 22px 22px;
}
[data-theme="dark"] .login-deco {
  background:
    radial-gradient(circle at 92% 8%, oklch(0.65 0.13 224 / 0.10) 0, transparent 42%),
    radial-gradient(circle at 6% 96%, oklch(0.55 0.08 258 / 0.08) 0, transparent 40%),
    radial-gradient(oklch(0.78 0.05 248 / 0.07) 1.3px, transparent 1.4px);
  background-size: auto, auto, 22px 22px;
}

.login-card {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 38px 38px 26px;
}
@media (prefers-reduced-motion: no-preference) {
  .login-card { animation: ad-pop 0.3s var(--ease); }
}
@keyframes ad-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* registration corner marks */
.login-card::before,
.login-card::after {
  content: "+"; position: absolute; z-index: 2; pointer-events: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 15px; font-weight: 500; line-height: 1;
  color: var(--accent-strong); opacity: 0.5;
}
.login-card::before { top: 13px;    left: 14px; }
.login-card::after  { bottom: 13px; right: 14px; }

.login-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: 26px;
}
.login-logo   { height: 30px; width: auto; display: block; }
.login-suffix {
  font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: -0.2px;
  padding-left: 12px; border-left: 1px solid var(--border-strong);
}

.login-title { font-size: 25px; font-weight: 800; letter-spacing: -0.5px; color: var(--text); display: inline-block; margin: 0; }
.login-sub   { font-size: 13.5px; color: var(--muted); margin-top: 5px; margin-bottom: 24px; }

.login-field {
  display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px;
}
.login-lbl   { font-size: 13px; font-weight: 600; color: var(--text-2); }
.login-input { height: 44px; width: 100%; border-radius: var(--radius-field); font-size: 14.5px; }

.login-remember {
  flex-direction: row; align-items: center;
  justify-content: space-between; gap: 14px; margin-bottom: 8px;
}
.login-remember .triseg { height: 40px; }
.login-remember .triseg button { font-size: 13.5px; padding: 0 18px; }

.login-hint { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 12px; margin-bottom: 22px; }

.login-submit { width: 100%; height: 46px; font-size: 15px; }

/* Wicket FeedbackPanel inside login card */
.login-card .feedbackPanel {
  list-style: none; padding: 10px 14px; margin-bottom: 16px;
  background: var(--danger-soft); color: var(--danger);
  border-radius: var(--radius-field); font-size: 13.5px; font-weight: 500;
}
.login-card .feedbackPanel:empty { display: none; }
.login-card .feedbackPanel li { list-style: none; }

.login-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.login-copy { color: var(--muted); }

/* ============================================================ TWO-FACTOR */
.twofa-card { text-align: center; }
.twofa-card .login-brand { justify-content: center; }
.twofa-card .login-title { margin-bottom: 6px; }

.twofa-msg { margin-bottom: 24px; }

.twofa-idblock {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 16px; margin-bottom: 22px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.twofa-idlabel {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.twofa-id { font-size: 44px; font-weight: 800; letter-spacing: 2px; color: var(--text); line-height: 1; }

.twofa-wait {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 13px; color: var(--muted); margin-bottom: 22px;
}
.twofa-spinner {
  width: 15px; height: 15px; border-radius: 99px; flex-shrink: 0;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .twofa-spinner { animation: twofa-spin 0.8s linear infinite; }
}
@keyframes twofa-spin { to { transform: rotate(360deg); } }

.twofa-alt { font-size: 13.5px; color: var(--text-2); margin-top: 18px; text-align: center; }
.twofa-altbtn {
  display: inline-flex; align-items: center; margin: 0 4px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--accent-strong);
  font-size: 13px; font-weight: 600; vertical-align: middle;
  transition: all var(--speed) var(--ease);
}
.twofa-altbtn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

.otp-row { display: flex; justify-content: center; margin-bottom: 24px; }
.otp-single {
  width: 200px; height: 56px; text-align: center;
  font-size: 22px; font-weight: 700; letter-spacing: 0.25em;
  border: 1px solid var(--border); border-radius: var(--radius-field);
  background: var(--surface-2); color: var(--text); outline: none;
  transition: all var(--speed) var(--ease);
}
.otp-single:focus {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.twofa-cancel {
  background: transparent; border: none; color: var(--muted);
  font-size: 12.5px; font-weight: 600;
}
.twofa-cancel:hover { color: var(--danger); }

/* ============================================================ SIDEBAR (RAIL) */

.rail {
  background: var(--rail);
  color: var(--rail-fg);
  width: var(--rail-w, 248px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid oklch(0 0 0 / 0.15);
  position: sticky;
  top: 0;
  height: 100vh;
  flex-shrink: 0;
  transition: none;
}

.rail-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 17px 18px;
  height: 60px;
  flex-shrink: 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.07);
  overflow: hidden;
}
.brand-logo-wrap { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo { height: 23px; width: auto; display: block; content: url('/img/logo-light.png'); }
[data-theme="dark"] .login-logo { content: url('/img/logo-light.png'); }
.brand-suffix {
  font-size: 14px; font-weight: 600; color: var(--rail-muted);
  white-space: nowrap; padding-left: 11px; margin-left: 1px;
  border-left: 1px solid oklch(1 0 0 / 0.16); letter-spacing: -0.2px;
}

.rail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rail-scroll::-webkit-scrollbar { width: 0; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8.5px 10px; border-radius: var(--radius-sm);
  color: var(--rail-fg); font-size: 14px; font-weight: 500;
  cursor: pointer; position: relative; flex-shrink: 0;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
  white-space: nowrap; overflow: hidden;
}
.nav-item:hover { background: oklch(1 0 0 / 0.06); color: #fff; }
.nav-item.active { background: var(--rail-active); color: #fff; }
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent);
}
/* Expanded but not the current page — just a subtle highlight, no accent bar (that signals "you are here") */
.nav-group-item.expanded > .nav-parent:not(.active) { background: oklch(1 0 0 / 0.06); color: #fff; }

.nav-item .ico { flex-shrink: 0; opacity: 0.8; }
.nav-item:hover .ico,
.nav-item.active .ico,
.nav-group-item.expanded > .nav-parent .ico { opacity: 1; }

.nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: oklch(1 0 0 / 0.14); color: #fff;
  border-radius: 99px; padding: 1px 7px; min-width: 20px; text-align: center;
  flex-shrink: 0;
}

/* Expandable sub-group (nav-group-item) */
.nav-group-item { display: flex; flex-direction: column; flex-shrink: 0; }
.nav-parent { position: relative; }
.nav-chevron {
  margin-left: auto; width: 15px; height: 15px; flex-shrink: 0;
  display: grid; place-items: center; opacity: 0.6;
  transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.nav-chevron .ico { width: 15px; height: 15px; }
.nav-item:hover .nav-chevron { opacity: 0.9; }
.nav-group-item.expanded .nav-chevron { transform: rotate(180deg); }
.nav-sub {
  display: flex; flex-direction: column; gap: 1px;
  /* Line aligned with the center of the parent section's icon (10px padding + 18px/2 icon),
     text aligned with the parent section's label (10px padding + 18px icon + 11px gap = 39px). */
  margin-left: 19px; padding-left: 10px;
  border-left: 1px solid oklch(1 0 0 / 0.12);
  /* height is set inline by JS (to the real content height) so expand/collapse of two
     sections can be perfectly synced — a shared max-height ceiling made a short section
     visually finish long before a tall one, since both traveled toward the same value. */
  height: 0; margin-top: 0; margin-bottom: 0; opacity: 0; overflow: hidden;
  transition: height 0.25s var(--ease), opacity 0.2s var(--ease),
    margin-top 0.25s var(--ease), margin-bottom 0.25s var(--ease);
}
.nav-group-item.expanded .nav-sub {
  margin-top: 2px; margin-bottom: 4px; opacity: 1;
}
.nav-sub-item {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 6.5px 10px; border-radius: var(--radius-sm);
  color: var(--rail-fg); opacity: 0.72; font-size: 13px; font-weight: 500;
  text-decoration: none; white-space: nowrap; overflow: hidden;
  transition: background var(--speed) var(--ease), opacity var(--speed) var(--ease), color var(--speed) var(--ease);
}
.nav-sub-item:hover { opacity: 1; background: oklch(1 0 0 / 0.06); color: #fff; }
.nav-sub-item.active { opacity: 1; color: #fff; font-weight: 600; background: oklch(1 0 0 / 0.05); }
.nav-sub-item .nav-badge { font-size: 10px; padding: 0 6px; min-width: 16px; }

/* Rail footer */
.rail-foot {
  padding: 10px 12px 12px;
  border-top: 1px solid oklch(1 0 0 / 0.08);
  flex-shrink: 0;
}

.rail-foot-btn {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px; border-radius: var(--radius-sm); border: none; background: transparent;
  color: var(--rail-muted); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
  white-space: nowrap; overflow: hidden;
}
.rail-foot-btn:hover { background: oklch(1 0 0 / 0.06); color: #fff; }

/* Brand mark shown when collapsed (favicon-32x32.png) */
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  display: none; flex-shrink: 0; object-fit: contain;
}

/* ---- Collapsed state ---- */
body.rail-collapsed {
  --rail-w: 68px;
}
body.rail-collapsed .nav-label,
body.rail-collapsed .rail-foot-text { display: none; }

body.rail-collapsed .brand-logo-wrap,
body.rail-collapsed .brand-suffix { display: none; }
body.rail-collapsed .brand-mark { display: block; }
body.rail-collapsed .nav-item { justify-content: center; padding: 9px; }
/* Accent bar keeps the same -12px offset as expanded mode (base .nav-item.active::before rule) —
   .rail-scroll's own padding is unchanged between modes, so it still lands flush with the rail's
   true edge instead of floating inset around just the icon. */
body.rail-collapsed .nav-badge { display: none; }
body.rail-collapsed .nav-chevron,
body.rail-collapsed .nav-sub { display: none !important; }

body.rail-collapsed .rail-brand { padding: 17px; justify-content: center; }
body.rail-collapsed .rail-foot-btn { justify-content: center; }
body.rail-collapsed .rail-foot-btn .ico { transform: scaleX(-1); }

/* ============================================================ AUTHENTICATED LAYOUT */
body:has(.rail) {
  display: grid;
  grid-template-columns: var(--rail-w, 248px) minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
  padding-top: 0 !important;
  background: var(--bg);
}
/* Rail: left column, sticky full-height */
body:has(.rail) > aside.rail {
  grid-column: 1;
  grid-row: 1 / span 2;
}
/* .app-main: right column — contains topbar + page content */
body:has(.rail) .app-main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}
/* ============================================================ TOPBAR */
header.topbar {
  height: 60px; flex-shrink: 0;
  display: flex; align-items: center; gap: 14px; padding: 0 24px;
  background: color-mix(in oklch, var(--surface) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
  min-width: 0;
}
.topbar-spacer { flex: 1; min-width: 0; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.crumb-link {
  font: inherit; color: var(--muted); background: none; border: none; padding: 0;
  cursor: pointer; border-radius: 4px; white-space: nowrap;
  transition: color var(--speed) var(--ease); text-decoration: none;
}
.crumb-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.crumb-sep { width: 14px; height: 14px; opacity: 0.5; flex-shrink: 0; }
.crumb .here { color: var(--text); font-weight: 600; }
/* Responsive topbar — hide text labels on smaller screens */
@media (max-width: 1280px) {
  header.topbar { gap: 10px; padding: 0 16px; }
  .tb-new-label { display: none; }
  .btn.tb-new { padding: 0 10px; }
}
@media (max-width: 1100px) {
  .proj-chip-name { display: none; }
  .proj-chip { padding: 0 10px; max-width: unset; }
  .crumb { display: none; }
}
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--text-2);
  display: grid; place-items: center; position: relative; cursor: pointer;
  transition: all var(--speed) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.icon-btn .ico { width: 19px; height: 19px; }
.user-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 38px; padding: 0 10px; border-radius: 99px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: all var(--speed) var(--ease);
}
.user-btn:hover { border-color: var(--border); background: var(--surface-2); }
.uname { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.topbar-avatar-sm {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: var(--accent); color: var(--accent-fg);
  display: grid; place-items: center; font-weight: 800; font-size: 12px; letter-spacing: -0.4px;
}
.tb-chev { width: 15px !important; height: 15px !important; color: var(--muted); transition: transform 0.15s; }
.user-btn[aria-expanded="true"] .tb-chev { transform: rotate(180deg); }
/* ============================================================ TB-NEW DROPDOWN */
.tb-new-menu.dropdown-menu {
  min-width: 230px !important;
  padding: 6px !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  animation: pop var(--speed) var(--ease);
}
.tb-new-menu-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 6px 10px 4px;
}
.tb-new-item {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  color: var(--text) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: background var(--speed) var(--ease) !important;
  white-space: nowrap;
}
.tb-new-item:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.tb-new-item .ico {
  width: 18px !important;
  height: 18px !important;
  opacity: 0.55;
  flex-shrink: 0;
  color: var(--text-2);
  transition: opacity var(--speed) var(--ease);
}
.tb-new-item:hover .ico { opacity: 0.85; }

/* Same "Rychlé přidání" item list, reused as plain modal content (Kalendář — "A co dál?"
   picker) instead of inside the topbar's absolutely-positioned .dropdown-menu. */
.tb-new-panel { display: flex; flex-direction: column; gap: 2px; }
.tb-new-panel .tb-new-menu-label { padding: 0 2px 6px; }

/* User dropdown */
.tb-user-wrap { position: relative; }
.tb-user-menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 244px; z-index: 31; }
.tb-user-menu.open { display: block; animation: pop var(--speed) var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
/* Generic dropdown menu */
.menu {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px;
}
.menu-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px;
  font-size: 13.5px; color: var(--text); cursor: pointer;
  text-decoration: none; border: none; background: none; width: 100%; text-align: left;
  transition: background var(--speed) var(--ease);
}
.menu-item:hover { background: var(--surface-2); }
.menu-item .ico { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.menu-sep { height: 1px; background: var(--border); margin: 5px 0; }
.menu-item.danger { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-soft); }
.menu-item.danger .ico { color: var(--danger); }
/* User card inside dropdown */
.user-card { display: flex; align-items: center; gap: 11px; padding: 6px 10px 10px; }
.user-card-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--accent); color: var(--accent-fg);
  display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: -0.4px;
}
.user-card-name { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; }
.user-card-mail { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Theme toggle icons — CSS hides the irrelevant one */
[data-theme="light"] .ico-sun { display: none; }
[data-theme="dark"] .ico-moon { display: none; }
/* Pohotovost (on-call) pill */
.proj-chip {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; color: var(--text-2); font-weight: 500;
  flex-shrink: 1; min-width: 0; max-width: 180px;
}
.proj-chip .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--ok); flex-shrink: 0; }
.proj-chip-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Server temperature pills (prototype: .temp-pill) */
.temp-group { display: flex; align-items: center; gap: 6px; }
.temp-pill {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 8px 0 5px; border-radius: 7px; cursor: default; outline: none;
  font-size: 12px; line-height: 1;
}
.temp-pill .temp-num {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px;
  font-size: 10.5px; font-weight: 800; color: #fff;
}
.temp-pill .temp-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.temp-pill.tone-ok   { background: var(--ok-soft);     color: color-mix(in oklab, var(--ok) 72%, var(--text)); }
.temp-pill.tone-ok   .temp-num { background: var(--ok); }
.temp-pill.tone-warn { background: var(--warn-soft);   color: color-mix(in oklab, var(--warn) 72%, var(--text)); }
.temp-pill.tone-warn .temp-num { background: var(--warn); }
.temp-pill.tone-danger { background: var(--danger-soft); color: color-mix(in oklab, var(--danger) 72%, var(--text)); }
.temp-pill.tone-danger .temp-num { background: var(--danger); }
.temp-pill.tone-neutral { background: var(--surface-2); color: var(--muted); }
.temp-pill.tone-neutral .temp-num { background: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .temp-pill.tone-warn .temp-num, .temp-pill.tone-danger .temp-num {
    animation: tbadge 1.5s ease-in-out infinite;
  }
}
@keyframes tbadge { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); } }
.temp-tip {
  position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(-3px);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: oklch(0.22 0.02 250); color: #fff; padding: 6px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .14s, transform .14s; z-index: 200;
  box-shadow: var(--shadow-md);
}
.temp-tip b { font-size: 13px; font-weight: 800; display: block; text-align: center; }
.temp-tip::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: oklch(0.22 0.02 250);
}
.temp-pill:hover .temp-tip, .temp-pill:focus .temp-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Main content area — stránka nescrolluje horizontálně, jen obsah uvnitř */
body:has(.rail) .app-main .main-content {
  flex: 1;
  padding: 24px 28px !important;
  max-width: none !important;
  width: 100% !important;
  min-width: 0;
  overflow-x: clip;
}

/* Každý div přímo obalující tabulku scrolluje sám za sebe (platí globálně) */
body:has(.rail) .main-content div:has(> table.table),
body:has(.rail) .main-content .tablewrap { overflow-x: auto; }

/* ============================================================ KALENDÁŘ — FILTR */
.kal-filterbar {
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.kal-filterbar-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent-strong); margin-bottom: 12px;
}
/* Grid instead of flex: technik always renders at full natural size, the type filter
   dropdown just sizes to its own content (no stretching). */
body:has(.rail) .main-content .kal-filter-row {
  display: grid; grid-template-columns: max-content max-content; justify-content: space-between;
  gap: 14px; align-items: flex-start;
}
/* "Nastavit mě" next to the technik select instead of below it. No extra right padding here —
   the card's own padding (.kal-filterbar, 18px) already gives symmetric left/right spacing via
   justify-content: space-between above; adding more just on this side broke that symmetry. */
.technik-row { display: flex; align-items: center; gap: 8px; }
/* Kategorie + Technik selects — a FIXED width (not max-width) instead of sizing to the selected
   text. With auto-sizing, the toggle grew huge with several categories picked and, worse, shrank
   so small with a short value ("Vše") that it overlapped the "Kategorie" label next to it (the
   surrounding Bootstrap col-sm-4/col-sm-8 row has no definite width of its own to split, since it
   sits inside a "max-content" grid cell — it needs the select's own size as an anchor). Long text
   now truncates with an ellipsis (already set up via .filter-option-inner-inner) instead of
   stretching or overlapping. */
.kal-filter-row .bootstrap-select { width: 220px !important; }
/* "Nastavit mě" icon-only button — .btn's default asymmetric padding (0 17px) makes a text-less
   button an oval pill instead of a circle; force it square. */
.technik-row a.btn { width: 38px; padding: 0; flex: none; }
/* Weekly fulfillment table — no hover highlight (each cell contains its own tiny nested
   table for the 3 per-day numbers; the generic row-hover rule was matching that inner
   table's row too, showing a small stray highlight box instead of the whole row). */
.hf-table .table tbody tr:hover > td:not(.table-warning) { background: transparent !important; }
/* Weekly fulfillment — technik multi-select row: right-aligned, capped to a sane width
   instead of the bootstrap-select wrapper stretching to fill the whole row. */
.hf-user-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hf-user-row .bootstrap-select { width: auto !important; max-width: 280px; }

/* ============================================================ KALENDÁŘ — MŘÍŽKA */
.cal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 10px; overflow: hidden;
}

/* --- toolbar (Měsíc/Týden/Den · datum · Nyní · šipky) ---
   FullCalendar injects its own default stylesheet at runtime (client-side, after render()),
   which lands AFTER aidesign.css in the DOM — at equal specificity it wins ties. Every rule
   below needs !important to reliably beat it, not just the ones that visibly clashed. */
.cal-card .fc-toolbar { flex-wrap: wrap; gap: 10px; margin-bottom: 12px !important; }
.cal-card .fc-toolbar-title { font-size: 16px !important; font-weight: 800 !important; letter-spacing: -0.3px; color: var(--text) !important; }
.cal-card .fc-button-group {
  border-radius: var(--radius-field) !important; overflow: hidden;
  border: 1px solid var(--border) !important; background: var(--surface-2) !important;
}
.cal-card .fc-button {
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: var(--muted) !important; font-family: var(--font-ui) !important; font-size: 12.5px !important; font-weight: 600 !important;
  text-transform: none !important; padding: 7px 13px !important; border-radius: 0 !important;
  border-right: 1px solid var(--border) !important; transition: all var(--speed) var(--ease);
}
.cal-card .fc-button-group .fc-button:last-child { border-right: none !important; }
.cal-card .fc-button:hover { color: var(--text) !important; background: transparent !important; }
.cal-card .fc-button-primary:not(:disabled).fc-button-active,
.cal-card .fc-button-primary:not(:disabled):active { background: var(--accent) !important; color: var(--accent-fg) !important; }
.cal-card .fc-button:focus { box-shadow: 0 0 0 2px var(--accent-soft) !important; }
.cal-card .fc-button:disabled { opacity: 0.4 !important; }
/* Nav arrows (prevYear/prev/next/nextYear) — the shared .fc-button-group border/background
   above wasn't rendering for this cluster, so give each icon button its own fully self-contained
   pill (same recipe as .fc-today-button below, which does render) instead of depending on the
   group wrapper for chrome. */
.cal-card .fc-prevYear-button, .cal-card .fc-prev-button,
.cal-card .fc-next-button, .cal-card .fc-nextYear-button {
  width: 30px !important; height: 30px !important; padding: 0 !important; margin: 0 2px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: var(--surface-2) !important; color: var(--text-2) !important;
  border: 1px solid var(--border) !important; border-radius: var(--radius-field) !important;
}
.cal-card .fc-prevYear-button:hover, .cal-card .fc-prev-button:hover,
.cal-card .fc-next-button:hover, .cal-card .fc-nextYear-button:hover {
  background: var(--border) !important; color: var(--text) !important;
}
/* The chevron is an icon-font glyph, not an SVG - its own line-height pushes it off-center
   inside the button's flex box unless reset here. */
.cal-card .fc-prevYear-button .fc-icon, .cal-card .fc-prev-button .fc-icon,
.cal-card .fc-next-button .fc-icon, .cal-card .fc-nextYear-button .fc-icon {
  display: block; line-height: 1 !important; margin: 0 !important;
}
.cal-card .fc-today-button {
  background: var(--surface-2) !important; color: var(--text-2) !important;
  border: 1px solid var(--border) !important; border-radius: 999px !important;
  padding: 7px 14px !important; font-weight: 600 !important;
}
.cal-card .fc-today-button:hover:not(:disabled) { background: var(--border) !important; color: var(--text) !important; }

/* --- day headers (šablona DayHeaderContent.tmpl.js vykresluje .fc-dow / .fc-dnum) --- */
.cal-card .fc-col-header-cell { background: transparent !important; border-color: var(--border) !important; padding: 8px 0; }
.cal-card .fc-col-header-cell-cushion {
  color: var(--text-2) !important; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 0;
}
.cal-card .fc-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted) !important; }
.cal-card .fc-dnum { font-size: 15px; font-weight: 800; color: var(--text) !important; font-variant-numeric: tabular-nums; }
.cal-card .fc-day-today .fc-dow, .cal-card .fc-day-today .fc-dnum { color: var(--accent-strong) !important; }

/* weekend / svátek — barvy z tokenů namísto pevných rgba */
.cal-card .fc-day.weekend.weekend-saturday,
.cal-card .fc-day.weekend.weekend-sunday { background: var(--surface-2); }
.cal-card .fc-day.holiday { background: var(--warn-soft) !important; }

/* mimo pracovní dobu (businessHours 8–17 po–pá) */
.cal-card .fc-non-business { background: color-mix(in oklab, var(--border) 45%, transparent); }
[data-theme="dark"] .cal-card .fc-non-business { background: color-mix(in oklab, var(--bg) 55%, transparent); }

/* mřížka */
.cal-card .fc-scrollgrid,
.cal-card .fc-scrollgrid td,
.cal-card .fc-scrollgrid th,
.cal-card .fc-timegrid-slot { border-color: var(--border); }
.cal-card .fc-scrollgrid { border-radius: var(--radius-sm); overflow: hidden; }
.cal-card .fc-timegrid-slot-label { color: var(--muted); font-size: 11px; }
.cal-card .fc-timegrid-col.fc-day-today,
.cal-card .fc-daygrid-day.fc-day-today { background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }

/* Pracovní doba (8–17) roztáhlejší než mimo ni, jako v návrhu (WORK_H/OFF_H v calendar.jsx) —
   FullCalendar nemá pro tohle nativní nastavení, takže cílíme přímo na řádky slotů podle jejich
   data-time atributu (funguje bez ohledu na slotDuration, protože ^= chytá i půlhodiny). */
.cal-card .fc-timegrid-slot { height: 10px !important; }
.cal-card .fc-timegrid-slot[data-time^="08:"],
.cal-card .fc-timegrid-slot[data-time^="09:"],
.cal-card .fc-timegrid-slot[data-time^="10:"],
.cal-card .fc-timegrid-slot[data-time^="11:"],
.cal-card .fc-timegrid-slot[data-time^="12:"],
.cal-card .fc-timegrid-slot[data-time^="13:"],
.cal-card .fc-timegrid-slot[data-time^="14:"],
.cal-card .fc-timegrid-slot[data-time^="15:"],
.cal-card .fc-timegrid-slot[data-time^="16:"] {
  height: 30px !important;
}

/* "teď" ukazatel */
.cal-card .fc-timegrid-now-indicator-line { border-color: var(--danger); }
.cal-card .fc-timegrid-now-indicator-arrow { border-color: var(--danger); color: var(--danger); }

/* --- záznamy --- */
/* Barvy zůstávají business-specifické (klient/typ, nastavené v Javě) — EventTooltip.tmpl.js
   je jen zpřístupní jako --ev-color, tady je namícháme do plné, syté plochy (podle prototypu
   ukolovnik-aidesign-claudesign/styles.css .cal-ev.ok — 56%/64% mix) místo toho, co posílá
   FullCalendar inline stylem (proto !important). */
.cal-card .fc-event {
  cursor: pointer; overflow: hidden; border-radius: var(--radius-sm) !important;
  border: none !important; border-left: 3px solid var(--ev-color, var(--accent)) !important;
  background: color-mix(in oklab, var(--ev-color, var(--accent)) 56%, var(--surface)) !important;
  color: var(--text) !important; box-shadow: var(--shadow-sm);
  padding: 2px 8px; transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
[data-theme="dark"] .cal-card .fc-event {
  background: color-mix(in oklab, var(--ev-color, var(--accent)) 64%, var(--surface)) !important;
}
.cal-card .fc-event:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cal-card .fc-timegrid-event-harness > .fc-timegrid-event { right: 12px; }
.cal-card .fc-ev-title { font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: normal; }
.cal-card .fc-ev-sub { font-size: 11.5px; font-style: italic; color: var(--text-2); opacity: 0.85; margin-top: 1px; }
.cal-card .fc-daygrid-event .fc-ev-title,
.cal-card .fc-list-event .fc-ev-title { font-size: 13px; }

/* Ne OK záznamy (KlientOutsourcingEvent.complete == false) — světlejší, přerušovaný okraj,
   bez stínu, ztlumený titulek. Server tuto třídu posílá přes FullCalendarEvent.cssClassNames. */
.cal-card .fc-event.cal-notok {
  background: color-mix(in oklab, var(--ev-color, var(--accent)) 15%, var(--surface)) !important;
  border-left-style: dashed !important; box-shadow: none !important;
}
[data-theme="dark"] .cal-card .fc-event.cal-notok {
  background: color-mix(in oklab, var(--ev-color, var(--accent)) 26%, var(--surface)) !important;
}
.cal-card .fc-event.cal-notok .fc-ev-title { color: var(--text-2); }

/* celodenní pruh — stejné zaoblení jako běžné karty, ne plné pilulky */
.cal-card .fc-daygrid-body .fc-event { border-radius: var(--radius-sm) !important; padding: 3px 10px; }

/* Denní přítomnost: chybí technik – pulsující červený okraj */
.cal-card .fc-event-no-technik {
  border: 2px solid var(--danger) !important; box-shadow: 0 0 0 2px var(--danger);
  animation: pulse-no-technik 1.8s ease-in-out infinite;
}
@keyframes pulse-no-technik {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--danger) 70%, transparent); }
  70%  { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* výběr rozsahu tažením (drag-select pro vytvoření záznamu) */
.cal-card .fc-highlight { background: var(--accent-soft) !important; }

/* "Rychlé přidání" popover, umístěný přímo tam, kde tažení skončilo (viz KalendarPanel.java,
   onCalendarRangeSelect) — na rozdíl od .tb-new-menu v topbaru se nespoléhá na Bootstrap
   .dropdown-menu positioning, left/top nastavuje JS podle souřadnic myši. */
.cal-range-popover {
  /* absolute (not fixed): left/top below come from the drag's pageX/pageY, which are
     document-relative and include scroll offset - fixed's viewport-relative coordinates
     would drift once the page is scrolled. */
  display: none; position: absolute; z-index: 1050;
  min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  animation: pop var(--speed) var(--ease);
}
.cal-range-popover.show { display: block; }

/* --- seznamové pohledy (Plán týdne/měsíce/dne) --- */
.cal-card .fc-list { border-color: var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cal-card .fc-list-day-cushion { background: var(--surface-2) !important; color: var(--text); }
.cal-card .fc-list-event:hover td { background: var(--surface-2) !important; }
.cal-card .fc-list-event-dot { border-color: var(--ev-color, var(--accent)) !important; }
.cal-card .fc-list-empty { background: var(--surface); color: var(--muted); }

/* Data tables — always scrollable horizontally, regardless of viewport width.
   Bootstrap's .table-responsive-lg only activates below 992px; this ensures
   wide tables never cause full-page horizontal scroll.
   Bootstrap .col-* items inside a flex-row have min-width: auto (= min-content)
   which lets wide tables expand the entire flex chain — min-width: 0 allows
   the column to shrink so overflow-x: auto on the table container can work. */
.table-responsive-lg { overflow-x: auto; }
body:has(.rail) .main-content .row > * { min-width: 0; }

/* ============================================================ ANON PAGE LAYOUT RESET */
/* Bootstrap header and container overrides for login/2FA pages */
body:has(.login-stage) > header { display: none !important; }
body:has(.login-stage) { padding-top: 0 !important; }
body:has(.login-stage) .main-content { padding: 0 !important; margin: 0 !important; }

/* ============================================================ BRAND UNDERLINE */
/* page-title: SVG z branddetails.js (zachováno pro budoucí použití) */
.page-title.bd-has-uline { position: relative; }
.bd-uline { position: absolute; left: -3px; bottom: 2px; height: 9px; line-height: 0; color: var(--accent); opacity: 0.62; z-index: -1; pointer-events: none; }
.bd-uline svg { display: block; height: 9px; width: 100%; overflow: visible; }

/* login-title: CSS pseudo-element (spolehlivé, nezávisí na načtení fontu) */
.login-title.bd-has-uline { position: relative; }
.login-title .bd-uline { display: none; }
.login-title.bd-has-uline::after {
  content: '';
  position: absolute;
  left: -3px; right: -3px; bottom: 5px;
  height: 7px;
  background: color-mix(in oklch, var(--accent) 55%, transparent);
  pointer-events: none;
  z-index: -1;
}

/* ============================================================ PAGE HEAD */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-head > div:first-child { position: relative; padding-left: 17px; }
.page-title {
  font-size: 27px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--text); display: inline-block; margin: 0;
}
.page-sub { font-size: 14px; color: var(--muted); margin-top: 3px; }
.page-actions { display: flex; align-items: center; gap: 10px; }
.bd-anchor { position: absolute; left: 0; top: 0; bottom: 0; width: 13px; pointer-events: none; }
.bd-anchor .bd-rule {
  position: absolute; left: 0; top: 7px; bottom: 6px;
  width: 1px; background: var(--border-strong);
}
.bd-anchor .bd-plus {
  position: absolute; left: 0.5px; top: -7px; transform: translateX(-50%);
  font-style: normal; font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; line-height: 1; color: var(--accent);
}

/* ============================================================ QUICK ACTIONS / AKČNÍ PRUH */
.action-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 8px 9px;
}
.action-bar-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }

/* qa-pill — obal každé rychlé akce */
.qa-pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 14px 0 8px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  border: 1px solid transparent; background: transparent;
  transition: all var(--speed) var(--ease); white-space: nowrap;
  position: relative; cursor: pointer;
}
.qa-pill:hover { background: var(--surface-2); color: var(--text); }
.qa-pill-ico {
  width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text-2); flex-shrink: 0;
  transition: all var(--speed) var(--ease);
}
.qa-pill:hover .qa-pill-ico { background: var(--accent-soft); color: var(--accent-strong); }
.qa-pill-ico .ico { width: 16px; height: 16px; }
/* Wicket link jako transparentní overlay přes celý pill */
.qa-pill-overlay {
  position: absolute; inset: 0; opacity: 0;
  background: transparent !important; border: none !important;
  box-shadow: none !important; border-radius: inherit;
}

/* Moje úkoly wrapper */
.action-bar-mine {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 38px; padding: 0 14px 0 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: all var(--speed) var(--ease); white-space: nowrap;
  position: relative; cursor: pointer;
}
.action-bar-mine:hover { border-color: var(--border-strong); background: var(--border); }
.action-bar-mine > .ico { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
/* Reset Bootstrap na overlay linku */
.action-bar-mine .qa-pill-overlay { border-radius: 999px; }

/* Badge s počtem (accent barva dle prototypu) */
.cnt-badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-strong);
}

@media (max-width: 720px) {
  .action-bar-actions { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .qa-pill { flex-shrink: 0; }
  .action-bar-mine { margin-left: auto; }
}

/* ============================================================ KPI — Vysvědčení technika */
.between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.muted-sm { font-size: 12.5px; color: var(--muted); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 17px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease); cursor: default;
}
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kpi-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.kpi-ico .ico { width: 18px; height: 18px; }
.kpi-label { font-size: 12.5px; color: var(--text-2); font-weight: 600; line-height: 1.25; }

.kpi-pair { display: flex; align-items: stretch; gap: 0; }
.kpi-cell { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kpi-cell + .kpi-cell { padding-left: 16px; border-left: 1px solid var(--border); }
.kpi-cell-lbl { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.kpi-cell-val { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-cell-prev { color: var(--text-2); }
.kpi-val-warn   { color: oklch(0.55 0.13 65); }
.kpi-val-danger { color: var(--danger); }
[data-theme="dark"] .kpi-val-warn { color: var(--warn); }

.kpi-link {
  position: absolute; inset: 0; border-radius: var(--radius-lg);
  transition: background var(--speed) var(--ease);
}
.kpi-link:hover { background: oklch(0 0 0 / 0.03); }
[data-theme="dark"] .kpi-link:hover { background: oklch(1 0 0 / 0.04); }

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: 1fr; gap: 11px; }
}

/* ---- Nápověda — trigger tlačítko ---- */
/* help-trigger je v samostatném divu (customComponentBeforeContent) v .vstack.gap-3.
   Přesouváme ho do tab řady (top: -43px), nalevo od tlačítka „nový". */
.vstack.gap-3:has(.help-trigger) { position: relative; }
.vstack.gap-3 > div:has(> .help-trigger) {
  position: absolute;
  top: -43px; right: 0;
  width: 44px; height: 43px;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; pointer-events: none;
}
.vstack.gap-3 > div:has(> .help-trigger) > * { pointer-events: all; }
.help-trigger { color: var(--text-2); }
.help-empty  { opacity: 0.45; }

/* ---- Modální okna — globální styl pro holé Bootstrap třídy ---- */
/* Beze scope na konkrétní wrapper třídu — pokrývá VŠECHNA modální okna v appce. Přes 300
   editačních panelů běží přes 1-2 sdílené frameworkové modální třídy (BaseModal/
   BaseEntityEditModal), které samy žádnou CSS třídu nepřidávají, takže dřív dostávaly tenhle
   styl jen ty dva modaly níž (.help-modal, .ukol-form-modal) — všechny ostatní (editace úkolu,
   fakturanta, nepřítomnosti, ...) zůstávaly čistě defaultní Bootstrap, i v tmavém režimu.
   .help-modal/.ukol-form-modal teď jen dolaďují svoje specifika (šířka, popisek) — zbytek barev
   dorazí odsud, jejich vyšší specificita to nijak nerozbije. */
/* !important všude — Bootstrap svůj vlastní modal CSS zjevně dokáže (podobně jako FullCalendar
   jinde v tomhle souboru) přiležitostně vyhrát i nad pozdějším pravidlem stejné specificity
   (jednodušší 1-třídový selektor tady, na rozdíl od .help-modal .modal-content apod. výše, které
   měly specificitu vyšší a vyhrávaly bez toho). */
.modal-content {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
}
.modal-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 12px 16px 14px 22px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}
.modal-title {
  flex: 1 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
}
.modal-header .btn-close {
  width: 34px !important; height: 34px !important;
  border-radius: 9px !important;
  background-color: transparent !important;
  background-size: 14px !important;
  opacity: 0.5 !important;
  transition: background-color var(--speed) var(--ease), opacity var(--speed) var(--ease);
}
.modal-header .btn-close:hover { background-color: var(--surface-2) !important; opacity: 1 !important; }
/* Bootstrap kreslí zavírací "×" jako tmavou SVG ikonu vypálenou do obrázku (ne barvou textu) —
   v tmavém headeru by jinak skoro zmizela. Stejný trik jako Bootstrapí vlastní .btn-close-white. */
[data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; }
.modal-body {
  padding: 20px 24px !important;
  color: var(--text-2) !important;
  max-height: 78vh;
  overflow-y: auto;
  background: var(--bg) !important;
}
.modal-footer {
  padding: 12px 20px !important;
  border-top: 1px solid var(--border) !important;
  background: var(--surface) !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
.modal-footer .btn { border-radius: 999px !important; }

/* Bootstrap .card (raw — starší needit formuláře uvnitř modálů skupinují pole do <fieldset>
   s <legend class="card p-3 bg-light">/<div class="card p-3">, ne .ad-card z dashboardu) —
   sama o sobě čte barvy z vlastních --bs-card-* proměnných, které aidesign.css nikdy nepřepsal,
   takže i s opraveným .modal-content zůstávala uvnitř bílá. .bg-light je samostatná Bootstrap
   utilita se stejným problémem (napevno světlé pozadí bez ohledu na motiv). */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.card-header {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.card-body, .card-footer { color: var(--text) !important; }
.card-footer { background: var(--surface-2) !important; border-top: 1px solid var(--border) !important; }
.bg-light { background-color: var(--surface-2) !important; color: var(--text) !important; }

/* Sticky "Uložit" lišta na dně dlouhých formulářů — main.min.css (starší, needit, načte se PŘED
   aidesign.css) ji kreslí napevno #eee/#777 bez ohledu na motiv. */
.form-with-sticky-form-actions .sticky-form-actions {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
/* Sjednocení zarovnání akčních tlačítek na střed napříč celou appkou (viz plán "Sjednocení
   ukládacích tlačítek"). .container samo o sobě není flex (Bootstrap), takže obsah — ať už je to
   framework SubmitButtonPanel's .btn-toolbar, nebo pár ručně psaných tlačítek (EditUzivatelPanel,
   EditFakturacePanel) — bez tohohle padá doleva / .float-end ho tahá napravo. Jako flex item uvnitř
   tohodle pravidla float přestane platit úplně, což je žádoucí. */
.sticky-form-actions .container {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center;
  gap: 10px;
}

/* Framework default action row (SubmitButtonPanel.html: .btn-toolbar.border.p-3.hstack.gap-3) —
   used automatically by ~41 EntityEditPanel subclasses that don't override
   newFormActionsPlugPanel()/hasStickyFormActions() (Obchodní příležitost, Událost, číselníky…).
   Raw Bootstrap .border/.p-3 today, stretched full-width-but-left-packed. Give it the same card
   language as the rest of the redesign (Termín highlight etc.) and center it. SubmitButtonPanel.java
   already strips the border/p-3 classes itself when it detects a StickyActionsBorderPanel ancestor
   (findParent check), so this never double-boxes inside the Krok 1 sticky bar — no extra flatten
   rule needed here, unlike the Čas a výjezd/EditHodinyPanel nesting fixed earlier. */
.btn-toolbar.border {
  width: fit-content !important;
  max-width: 100%;
  margin: 18px auto !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 14px 20px !important;
  box-shadow: none !important;
}

/* Bare .form-actions with no wrapper at all (admin report panels, MonitoringSettingsPanel,
   EditProjektBudgetRealizatorPanel — never had any styling before, plain Bootstrap block flow,
   left-aligned). :not(.sticky-form-actions) since EditUzivatelPanel/EditFakturacePanel combine
   both classes on the same div (Krok 1 above already owns that case via .sticky-form-actions
   .container). Same card language + centering as Krok 2. */
.form-actions:not(.sticky-form-actions) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 14px 20px !important;
}

/* Bootstrap "-subtle" pozadí (bg-info-subtle apod.) — napevno pastelové, v tmavém režimu
   nepřiměřeně svítí (viz EditHodinyPanel.html "card-body bg-info-subtle" kolem posuvníků času). */
.bg-info-subtle    { background-color: var(--info-soft) !important; color: var(--text) !important; }
.bg-success-subtle { background-color: var(--ok-soft) !important; color: var(--text) !important; }
.bg-warning-subtle { background-color: var(--warn-soft) !important; color: var(--text) !important; }
.bg-danger-subtle  { background-color: var(--danger-soft) !important; color: var(--text) !important; }

/* ---- TinyMCE editor (Popis apod.) — chrome (lišta nástrojů) je normální DOM, jde stylovat;
   samotná editovatelná plocha je uvnitř <iframe>, kam CSS z rodičovské stránky nedosáhne —
   ta se řeší JS content_style při inicializaci (viz TinyMceDarkMode.java). ---- */
/* TinyMCE's "oxide" skin CSS is injected at runtime (after aidesign.css) and reads its own
   --tox-* custom properties, so a single background rule on .tox-editor-header isn't enough —
   its inner wrapper layers (toolbar-overlord, toolbar itself, each group) paint their own
   background on top. Set the CSS variables oxide reads AND make every inner layer transparent,
   so only the outermost header's color shows through. */
.tox.tox-tinymce {
  border-color: var(--border) !important; border-radius: var(--radius-field) !important;
  --tox-toolbar-bg-color: var(--surface-2) !important;
  --tox-editor-header-bg-color: var(--surface-2) !important;
  --tox-statusbar-bg-color: var(--surface-2) !important;
  --tox-statusbar-text-color: var(--muted) !important;
}
.tox .tox-editor-header {
  background: var(--surface-2) !important; border-color: var(--border) !important; box-shadow: none !important;
}
.tox .tox-toolbar-overlord, .tox .tox-toolbar__primary, .tox .tox-toolbar, .tox .tox-toolbar__group {
  background: transparent !important; border-color: var(--border) !important;
}
.tox .tox-tbtn { color: var(--text-2) !important; background: transparent !important; }
.tox .tox-tbtn svg { fill: var(--text-2) !important; }
.tox .tox-tbtn:hover { background: var(--border) !important; }
.tox .tox-statusbar { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--muted) !important; }

/* ---- Nápověda — modal (specifika navíc k .modal-* výše) ---- */
.help-modal .modal-dialog {
  max-width: min(580px, 96vw);
}
.help-modal .modal-header::before {
  content: "Nápověda";
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 4px;
}
.help-modal .modal-body {
  font-size: 14px;
  line-height: 1.75;
  max-height: 65vh;
}
.modal-backdrop.show {
  opacity: 1;
  background-color: oklch(0.15 0.02 250 / 0.42);
  backdrop-filter: blur(1.5px) saturate(0.95);
  -webkit-backdrop-filter: blur(1.5px) saturate(0.95);
}

/* ---- Formulář úkolu — modal (specifika navíc k .modal-* výše) ---- */
.ukol-form-modal .modal-dialog {
  max-width: min(68vw, 1200px);
}
@media (max-width: 900px) {
  .ukol-form-modal .modal-dialog { max-width: 96vw; }
}

/* Obsah nápovědy uvnitř modalu */
.help-view { padding: 0; }
.help-view-label { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.help-view-text { font-size: 14px; line-height: 1.75; color: var(--text-2); }
.help-view-text p { margin-bottom: 10px; }
.help-view-meta { margin-top: 16px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.help-view-files { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================ BOOTSTRAP NAV-TABS OVERRIDE */
/* Reset nav-item.active (rail style) that leaks into Bootstrap tabs */
.nav-tabs .nav-item { background: transparent !important; color: inherit !important; }
.nav-tabs .nav-item::before { display: none !important; }
/* Tab links — match .tab from design system */
.nav-tabs {
  border-bottom: none !important;  /* odebrat horizontální oddělovací čáru */
}
.nav-tabs .nav-link {
  padding: 11px 15px; font-size: 13.5px; font-weight: 600;
  color: var(--muted) !important;
  border: none !important; background: transparent !important;
  border-radius: 0 !important; position: relative; white-space: nowrap;
  transition: color var(--speed) var(--ease);
}
.nav-tabs .nav-link:hover { color: var(--text) !important; }
/* Active tab — accent text + 2.5px bottom line, no fill */
.nav-tabs .nav-link.active {
  color: var(--accent) !important;
  border: none !important; background: transparent !important;
}
.nav-tabs .nav-link.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 2.5px; background: var(--accent); border-radius: 2px;
}
/* Místo pro entity-header-actions + help trigger v pravé části tab řady */
div:has(> div:has(> ul.nav-tabs)):has(> .tab-content) ul.nav-tabs { padding-right: 200px; }
/* Na stránkách s help triggerem je potřeba více místa */
div:has(> div:has(> ul.nav-tabs)):has(.help-trigger) ul.nav-tabs { padding-right: 240px; }
/* Navigation moved to the left rail (RailPanel nav-sub) — hide the top tab strip */
.hide-top-tabnav > ul.nav-tabs { display: none !important; }

/* ============================================================ FILTER TOOLBAR */
/* Bootstrap renders: <thead><tr class="filters-tr table-light"><td class="filter-td"> */
tr.filters-tr { background: var(--surface) !important; }
tr.filters-tr td.filter-td {
  padding: 8px 10px !important;
  vertical-align: middle;
  border-top: none !important;
  border-bottom: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
}
tr.filters-tr td.filter-td:first-child { padding-left: 14px !important; }

/* Create/add button in filter row (EntityCreateButton = btn-success) → accent style */
tr.filters-tr .btn-success,
tr.filters-tr .btn.btn-success {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-size: 13px !important;
  padding: 5px 14px !important;
  height: 34px;
  line-height: 1;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
tr.filters-tr .btn-success:hover { background: color-mix(in oklab, var(--accent) 82%, #000) !important; border-color: color-mix(in oklab, var(--accent) 82%, #000) !important; }
tr.filters-tr .btn-success:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================ TABLE ACTION BUTTONS */
/* Edit (btn-primary) and delete (btn-danger) in data rows → small icon-only */
.table tbody td .btn.btn-primary,
.table tbody td .btn.btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: none !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.table tbody td .btn.btn-primary {
  background: color-mix(in oklch, var(--accent) 10%, transparent) !important;
  color: var(--accent) !important;
}
.table tbody td .btn.btn-primary:hover { background: color-mix(in oklch, var(--accent) 18%, transparent) !important; }
.table tbody td .btn.btn-danger {
  background: color-mix(in oklch, var(--danger) 10%, transparent) !important;
  color: var(--danger) !important;
}
.table tbody td .btn.btn-danger:hover { background: color-mix(in oklch, var(--danger) 18%, transparent) !important; }

/* Spacing between action buttons */
.table tbody td .btn + .btn { margin-left: 3px; }

/* ============================================================ BOOLEAN LABELS */
/* BooleanLabel renders <span class="text-success">Ano</span> or <span class="text-warning">Ne</span> */
/* Map to design system bool indicator: small colored square */
.table td span.text-success,
.table td span.text-warning {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 3px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  vertical-align: middle;
  overflow: hidden;
}
.table td span.text-success { background: var(--ok) !important; color: transparent !important; }
.table td span.text-warning { background: var(--danger) !important; color: transparent !important; }

/* KalendarFulfillmentPanel — real hour numbers, not a BooleanLabel indicator, so they use their
   own classes instead of text-success/text-danger to avoid colliding with the rule above. */
.hf-ok { color: var(--ok) !important; }
.hf-warn { color: var(--danger) !important; }

/* ============================================================ SHOW-ALL / SECONDARY BUTTONS */
/* "Zobrazit vše" — BootstrapAjaxLink(Type.Default) → btn-default/btn-secondary subtle style */
.btn.btn-default, .btn.btn-secondary {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
}
.btn.btn-default:hover, .btn.btn-secondary:hover {
  background: var(--border) !important;
  color: var(--text) !important;
}
/* btn-info outside btn-group (EntitySubmitAndListButton → "Uložit a zpět") */
/* :not() excludes triseg active buttons — those are styled by body:has(.rail) .btn-group .btn.btn-info */
.btn.btn-info:not(.btn-group .btn) {
  background: color-mix(in oklch, var(--accent) 10%, transparent) !important;
  border-color: color-mix(in oklch, var(--accent) 25%, transparent) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
.btn.btn-info:not(.btn-group .btn):hover { background: color-mix(in oklch, var(--accent) 18%, transparent) !important; }

/* ============================================================ TAB COUNT BADGE */
/* AiCountTab renders: "Label<span class="tab-count">N</span>" */
/* Active tab: nav-link.active  |  Inactive: nav-link */
.nav-tabs .nav-link .tab-count {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  background: color-mix(in oklch, var(--text) 10%, transparent);
  color: var(--text-2);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.nav-tabs .nav-link.active .tab-count {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
}

/* ============================================================ FAVORITES ("Oblíbené") SLOT GRID */
/* Framework-rendered (name.berries BaseFavoritesPanel) — no stable id/class on the container or
   on the slot links, so everything here is scoped off the bootstrap-toggle switch, which is the
   only thing in the whole app using data-toggle="toggle". Filled vs. empty slot state is read off
   the framework's own btn-secondary (filled) / btn-link.disabled (empty, "Nenastaveno") classes.
   The card chrome (border/background/heading) lives on the OUTER wrapper (the row's parent), not
   the row itself, so the "Oblíbené" label sits inside the same card as the chips. */
div:has(> div[style*="space-between"]:has([data-toggle="toggle"])) {
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
div:has(> div[style*="space-between"]:has([data-toggle="toggle"]))::before {
  content: "Oblíbené";
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
}
div[style*="space-between"]:has([data-toggle="toggle"]) {
  display: flex !important;
  align-items: center !important;
  gap: 14px;
}
div[style*="space-between"]:has([data-toggle="toggle"]) > div:first-child > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
div[style*="space-between"]:has([data-toggle="toggle"]) .margin10-right {
  margin-right: 0 !important;
  display: flex;
}
div[style*="space-between"]:has([data-toggle="toggle"]) .margin5-left {
  margin-left: 0 !important;
}

/* Filled slot — has a saved value */
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--accent-soft) !important;
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent) !important;
  color: var(--accent-strong) !important;
  border-radius: 99px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  height: 28px !important;
  box-shadow: none !important;
  transition: background var(--speed) var(--ease);
}
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-secondary:hover {
  background: color-mix(in oklch, var(--accent) 24%, var(--accent-soft)) !important;
}
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-secondary .fa-search {
  opacity: 0.6;
  margin-right: 4px;
}

/* Filled slot in remove mode — framework swaps btn-secondary for btn-warning (same solid-yellow
   class the toggle's own "minus" label uses) to cue "click to remove". Same pill shape/size as the
   normal accent chip above, just recolored, so add/remove modes read as one consistent style. */
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-warning {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--warn-soft) !important;
  border: 1px solid color-mix(in oklch, var(--warn) 35%, transparent) !important;
  color: color-mix(in oklab, var(--warn) 65%, var(--text)) !important;
  border-radius: 99px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 0 12px !important;
  height: 28px !important;
  box-shadow: none !important;
  transition: background var(--speed) var(--ease);
}
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-warning:hover {
  background: color-mix(in oklch, var(--warn) 24%, var(--warn-soft)) !important;
}
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-warning .fa-search {
  opacity: 0.6;
  margin-right: 4px;
}

/* Empty slot — ghost placeholder instead of a wall of "Nenastaveno" links. Text stays in the DOM
   (font-size: 0, not display: none) so it's still there for a11y; "+" is a decorative pseudo-element.
   .btn-link is the empty-slot marker regardless of .disabled — the framework only adds .disabled
   while no value is picked in the filter above, and drops it (still same btn-link, no .disabled)
   once something is selected and the slot becomes genuinely clickable to save into. Both must look
   the same "empty" way, just with a stronger invitation to click once it's actually actionable. */
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px dashed var(--border) !important;
  color: transparent !important;
  border-radius: 99px !important;
  font-size: 0 !important;
  padding: 0 14px !important;
  height: 28px !important;
  min-width: 30px;
  opacity: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: relative;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-link::before {
  content: "+";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
}
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-link:not(.disabled) {
  border-style: solid !important;
  border-color: color-mix(in oklch, var(--accent) 35%, transparent) !important;
}
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-link:not(.disabled)::before {
  color: var(--accent);
}
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-link:hover {
  border-color: var(--accent) !important;
  border-style: solid !important;
  background: var(--accent-soft) !important;
}
div[style*="space-between"]:has([data-toggle="toggle"]) a.btn.btn-sm.btn-link:hover::before {
  color: var(--accent-strong);
}
/* Only the first empty slot is worth showing as a standing "+" — the rest are redundant clutter.
   Once it's used, the framework naturally shifts the next empty one into that first position. Needs
   the "of S" nth-child form (Selectors 4) to count only among empty-slot spans, since filled and
   empty spans share the same wrapper markup and can be interleaved in any order. */
div[style*="space-between"]:has([data-toggle="toggle"]) span.margin10-right:has(> a.btn.btn-sm.btn-link):not(:nth-child(1 of span.margin10-right:has(> a.btn.btn-sm.btn-link))) {
  display: none !important;
}

/* Mode switch (bootstrap-toggle plugin) — plus = clicking a slot saves the current value into it,
   minus = clicking a slot clears it. Previous attempt kept restyling the plugin's own nested
   toggle-group/toggle-on/toggle-off/toggle-handle markup, but leftover Bootstrap .btn padding/
   line-height on that inner structure kept leaking through as a pill-within-a-pill. Instead: hide
   all of the plugin's own visual layer completely and paint the switch entirely from the outer
   .toggle div via ::before/::after, using :has(input:checked) for state — the real checkbox stays
   in the DOM (full-size, invisible) so clicks still fire its native change event same as before. */
div[style*="space-between"]:has([data-toggle="toggle"]) .form-check {
  display: flex;
  align-items: center;
  margin: 0;
  min-height: auto;
}
div[style*="space-between"]:has([data-toggle="toggle"]) .form-check-label {
  display: none;
}
.toggle[data-toggle="toggle"] {
  all: unset !important;
  position: relative !important;
  display: inline-flex !important;
  width: 46px !important;
  height: 26px !important;
  border-radius: 99px !important;
  background: var(--accent) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background var(--speed) var(--ease) !important;
}
.toggle[data-toggle="toggle"]:has(input:checked) {
  background: var(--danger) !important;
}
.toggle[data-toggle="toggle"] .toggle-group,
.toggle[data-toggle="toggle"] .toggle-on,
.toggle[data-toggle="toggle"] .toggle-off,
.toggle[data-toggle="toggle"] .toggle-handle {
  display: none !important;
}
.toggle[data-toggle="toggle"] input.form-check-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}
.toggle[data-toggle="toggle"]::before,
.toggle[data-toggle="toggle"]::after {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #fff !important;
  transition: opacity var(--speed) var(--ease) !important;
}
.toggle[data-toggle="toggle"]::before { content: "+"; left: 9px; opacity: 1; }
.toggle[data-toggle="toggle"]::after  { content: "\2212"; right: 8px; opacity: 0.45; }
.toggle[data-toggle="toggle"]:has(input:checked)::before { opacity: 0.45; }
.toggle[data-toggle="toggle"]:has(input:checked)::after  { opacity: 1; }