/* 🏷️ APPEK_CSS_VERSION = 2.9.60 — bumpuje build-zip.sh, footer ji čte pro ověření deploye */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --appek-css-version: "3.0.425";   /* MUSÍ sedět s APPEK_ADMIN_JS_VERSION — jinak footer varuje. Auto-bumped release.sh od v2.9.224 ([[:space:]] fix) */
  --primary: #BA7517;
  --primary-dark: #854F0B;
  --primary-light: #FAEEDA;
  --primary-border: #FAC775;
  --bg: #FDFDFE;       /* skoro bílé — žádný teplý nádech */
  --surface: #FFFFFF;
  --surface-1: #FFFFFF; /* 🆕 v2.9.223 — alias var(--surface) — admin.js uses --surface-1 v 5 místech */
  --surface-2: #F7F8FA; /* jemně světlejší než předtím, neutrální */
  --text: #2C2C2A;
  --text-1: #1D1D1F;    /* 🆕 v2.9.223 — alias var(--text) (mírně tmavší) — admin.js uses --text-1 v 16 místech */
  --text-2: #5F5E5A;
  --text-3: #888780;
  --border: rgba(0, 0, 0, 0.08);
  --border-2: rgba(0, 0, 0, 0.16);
  --success-bg: #EAF3DE;
  --success-text: #27500A;
  --info-bg: #E6F1FB;
  --info-text: #0C447C;
  --danger-bg: #FCEBEB;
  --danger-text: #A32D2D;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  /* 🆕 v2.9.223 — aliasy pro proměnné používané v admin.js (předtím undefined → fallback transparent) */
  --bg-1: var(--surface);      /* alias — modaly */
  --brand: var(--primary);      /* alias — odkazy, akcenty */
  --surface-3: var(--surface-2); /* alias — input bg na cards */

  /* 🆕 v2.9.244 — FILTER TABS DESIGN TOKENS (DRY — change here, applies everywhere)
     Použito v: .seg-tab, .period-tab, .nastaveni-tab, .vyroba-subtab
     Themes (default/dark/apple) respektují. Win98 má vlastní hardcoded styling. */
  --filter-tab-pad-y:        clamp(8px, 1.4vw, 12px);   /* vertical padding škáluje */
  --filter-tab-pad-x:        clamp(8px, 1.2vw, 14px);   /* horizontal padding škáluje */
  --filter-tab-radius:       10px;
  --filter-tab-gap:          4px;                       /* mezi icon a text */
  --filter-icon-size:        clamp(17px, 2.4vw, 22px);  /* icon škáluje */
  --filter-text-size:        clamp(11px, 1.5vw, 12.5px); /* label škáluje */
  --filter-tab-min-width:    72px;                      /* aby šly do scroll na úzkém */
  --filter-container-pad:    6px;
  --filter-container-radius: 14px;
  --filter-container-gap:    4px;
  --filter-active-bg:        linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  --filter-active-shadow:    0 3px 10px rgba(186, 117, 23, 0.32), inset 0 1px 0 rgba(255,255,255,0.15);
  --filter-hover-bg:         rgba(186, 117, 23, 0.06);
}

/* 🐛 v3.0.45/v3.0.49 fix — body fit-to-screen, žádný horizontální posun prstem.
   v3.0.45: margin:0 + height:100%
   v3.0.49: touch-action + overscroll-behavior !important (defenzivní proti pozdějším override)
            overflow:hidden samo o sobě iOS Safari nestopne pan gesto. */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100vw !important;
  height: 100%;
  touch-action: pan-y !important;          /* jen vertikální scroll */
  overscroll-behavior-x: none !important;  /* žádný horizontal bounce */
}
body {
  /* 🎨 Emoji fonty na konci řetězce — zajistí že 🖨️ ✉️ 📋 atd. se vykreslí jako barevné emoji
     i na systémech, kde základní sans-serif font emoji nemá (např. starší Linux). */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Twemoji Mozilla",
               sans-serif;
  font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg);
}

/* 🖨️ Printer ikona — SVG inline (čtverečky tofu fix, vykreslí všude stejně) */
.icon-printer {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  margin-right: 0.4em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 6 2 18 2 18 9'/><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><rect x='6' y='14' width='12' height='8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* Pokud je ikona uvnitř btn-primary nebo btn-green (bílý text na zeleném/oranžovém pozadí) — invertuj na bílou */
.btn-primary .icon-printer,
.btn-green .icon-printer,
.btn-prodejna .icon-printer {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 6 2 18 2 18 9'/><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><rect x='6' y='14' width='12' height='8'/></svg>");
}
/* Dark mode — invertuj na světlou */
html.theme-dark .icon-printer,
html.dark .icon-printer {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5E5E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 6 2 18 2 18 9'/><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><rect x='6' y='14' width='12' height='8'/></svg>");
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}
.btn-primary, .btn-secondary, .btn-danger {
  -webkit-appearance: none;
  appearance: none;
}
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* LOGIN */
/* 🆕 v2.9.263 — Login screen refresh (Apple/Linear inspired) */
.login-screen {
  min-height: 100vh;
  min-height: 100dvh; /* 🆕 v3.0.296 — iOS dynamická výška */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #FDFDFE 0%, #F7F8FA 50%, rgba(186,117,23,0.04) 100%);
  position: relative;
  overflow: hidden;
}
/* Decorative blurred circles na pozadí */
.login-screen::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(186,117,23,0.10) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.login-screen::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(250,199,117,0.12) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.login-card {
  background: var(--surface);
  border-radius: 18px;
  padding: 36px 32px;
  max-width: 420px;
  width: 100%;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06),
    0 24px 48px rgba(186,117,23,0.08);
  border: 1px solid rgba(0,0,0,0.04);
  position: relative;
  z-index: 1;
  backdrop-filter: saturate(180%);
}
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;                    /* rounded square Apple style, ne kruh */
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(186,117,23,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
  letter-spacing: -0.02em;
}
.login-logo h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.login-logo p {
  color: var(--text-2);
  font-size: 14px;
}
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}
.login-form input {
  padding: 13px 14px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  font-size: 15px;
  transition: all 0.18s ease;
  background: var(--surface);
}
.login-form input:hover { border-color: var(--primary-border); }
.login-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(186, 117, 23, 0.12);
}
.login-form .btn-primary {
  margin-top: 8px;
  padding: 13px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(186,117,23,0.25);
  transition: all 0.18s ease;
}
.login-form .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(186,117,23,0.35);
}
.login-form .btn-primary:active { transform: translateY(0); }
.error-msg {
  color: var(--danger-text);
  font-size: 13px;
  padding: 10px 14px;
  background: var(--danger-bg);
  border-radius: 10px;
  border-left: 3px solid var(--danger-text);
}

/* HLAVNÍ LAYOUT */
/* 🐛 v3.0.45 fix — min-height + height na 100dvh (dynamic viewport — správné na mobilech
   kde browser UI bar zabírá místo). Předtím jen 100vh = pod mobilem chyběl spodní pruh. */
.admin-app { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; min-height: 100dvh; }

/* 🆕 v3.0.100 — ODEPNUTÉ sidebar = static (scrolluje s page).
   PINNED přebije přes line 617+ (position: fixed). */
.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 12px; position: static; min-height: 100vh; align-self: start; }
/* Nav vyplní zbylou výšku — items se nezvětší, jen se neměly přetékat (no scroll) */
.sidebar > .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 12px 20px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.sidebar-logo .logo-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--primary-light); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
.sidebar-logo strong { font-size: 16px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 4px; }
/* 🆕 v3.0.55 — Sidebar full-height flex: nav-items shrinkují aby se vždy vešly,
   nikdy nepřesahují do bottom části kde je sidebar-utils + pin. */
.sidebar-nav .nav-item {
  flex-shrink: 1;        /* mohou se zmenšit pokud potřeba */
  min-height: 36px;      /* minimální tap target */
}
/* Při krátkém viewportu (≤700px) ještě menší nav items */
@media (max-height: 700px) {
  .sidebar-nav { gap: 4px; }
  .sidebar-nav .nav-item { min-height: 32px; padding: 6px 10px; font-size: 13px; }
  .sidebar-nav .nav-item .nav-icon { font-size: 15px; }
}
@media (max-height: 600px) {
  .sidebar-nav { gap: 3px; }
  .sidebar-nav .nav-item { min-height: 28px; padding: 4px 10px; font-size: 12.5px; }
  .sidebar-logo { padding: 0 8px 10px; margin-bottom: 8px; }
  .sidebar-logo .logo-icon { width: 32px; height: 32px; font-size: 14px; }
}
/* 🐛 fix v2.9.304 — `flex: 1 1 0` způsoboval, že když role schová většinu nav-items
   (role='pos' vidí jen 'dashboard'), zbývající jediný item se roztáhl přes celou výšku
   sidebaru a vznikl obrovský oranžový blok. Místo toho: natural sizing + scroll když je
   nav-items moc. Hybridní `flex: 0 1 auto` = nikdy neroste, ale může se zmenšit. */
.sidebar-nav .nav-item { flex: 0 1 auto; min-height: 38px; }

/* 🆕 v3.0.68 — DESKTOP sidebar full-screen flex menu (user: "full screen flex menu allways - na PC!")
   Nav items na desktopu rozdělí celou výšku sidebar rovnoměrně (od shora dolů).
   Safe-guard: max-height aby jednotlivá ikona při role='pos' nepřerostla. */
@media (min-width: 701px) {
  .sidebar-nav .nav-item {
    flex: 1 1 0 !important;
    max-height: 80px;          /* aby pří jednom itemu se nenafoukl absurdně */
  }
}

/* 🆕 v3.0.60 — Sidebar overlay (open) na užším viewportu: nav items shrinkují
   ještě víc aby se VŽDY vešly všechny (user: "musí se tam vejít všechny položky").
   Plus: sidebar-utils sticky bottom — Skrýt/Připnuto vždy viditelné. */
@media (max-height: 800px) {
  .sidebar-nav { gap: 3px !important; }
  .sidebar-nav .nav-item { min-height: 30px !important; padding: 4px 10px !important; font-size: 12.5px !important; line-height: 1.15 !important; }
  .sidebar-nav .nav-item .nav-icon { font-size: 14px !important; }
}
@media (max-height: 500px) {
  .sidebar-nav { gap: 2px !important; }
  .sidebar-nav .nav-item { min-height: 24px !important; padding: 2px 8px !important; font-size: 11.5px !important; }
  .sidebar-nav .nav-item .nav-icon { font-size: 12px !important; }
  .sidebar-logo { padding: 0 6px 6px !important; margin-bottom: 4px !important; }
}
/* Sidebar-utils sticky bottom — jen na DESKTOPU (mobile mode flow naturally) */
@media (min-width: 701px) {
  .sidebar > .sidebar-utils {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    z-index: 2;
  }
}

/* 📌 Pin utility — pod menu, fixuje topbar nahoře při scrollu */
.sidebar-utils {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.sidebar-pin {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.sidebar-pin:hover {
  background: var(--surface-2);
  color: var(--text);
}
.sidebar-pin-icon {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s;
  filter: grayscale(0.4);
  opacity: 0.6;
}
.sidebar-pin .sidebar-pin-label-on  { display: none; }
.sidebar-pin .sidebar-pin-label-off { display: inline; }

body.sidebar-pinned .sidebar-pin {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}
body.sidebar-pinned .sidebar-pin .sidebar-pin-icon {
  transform: rotate(-15deg);
  filter: none;
  opacity: 1;
}
body.sidebar-pinned .sidebar-pin .sidebar-pin-label-on  { display: inline; }
body.sidebar-pinned .sidebar-pin .sidebar-pin-label-off { display: none; }

/* 🆕 v3.0.319→323 — 📌 špendlík nad spodní lištou prohlížeče.
   v319 fixní 1cm fungoval na iPhone 15 (1cm + safe-area 34px = 72px → nad ~44px toolbar),
   NE na SE/mini (safe-area 0 → jen 38px, pod toolbar). v322 (rail height:100svh) byl OMYL —
   na SE uřízl špendlík (overflow:hidden) a na 15 zmenšil margin pod funkční hodnotu.
   v323 = zpět dvh kontejner + margin = max(72px, 1cm + safe-area). 72px = hodnota
   PROKAZATELNĚ funkční na iPhone 15 (v319) — použita jako podlaha pro VŠECHNA zařízení:
     • iPhone 15 (safe 34): max(72, 1cm+34=72) = 72px → beze změny (funkční)
     • iPhone SE (safe 0):  max(72, 1cm+0=38) = 72px → podlaha přebije nulovou safe-area
       (SE má stejný ~44px toolbar ale ŽÁDNÝ home-indicator → 72px s rezervou čistí)
     • notched s větší safe-area: vezme se větší (1cm+safe) → víc prostoru
   max() je klíč: aditivní calc(base+safe) nešel (SE nemá safe-area na přičtení → málo). */
@media (max-width: 700px) {
  .sidebar-utils { margin-bottom: max(72px, calc(1cm + env(safe-area-inset-bottom, 0px))); }
}

/* ↔️ COLLAPSE button — vedle Pin */
.sidebar-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}
.sidebar-collapse:hover {
  background: var(--surface-2);
  border-color: var(--primary-border);
  color: var(--text);
}
.sidebar-collapse-icon {
  font-size: 16px;
  line-height: 1;
  opacity: 0.65;
}
.sidebar-collapse .sidebar-collapse-label-on  { display: none; }
.sidebar-collapse .sidebar-collapse-label-off { display: inline; }
body.sidebar-collapsed .sidebar-collapse {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 600;
}
body.sidebar-collapsed .sidebar-collapse-icon { opacity: 1; }
body.sidebar-collapsed .sidebar-collapse .sidebar-collapse-label-on  { display: inline; }
body.sidebar-collapsed .sidebar-collapse .sidebar-collapse-label-off { display: none; }

/* 📱 Na mobilu skryjeme „Sbalit do ikon" — sidebar-pinned už dělá kompaktní layout
   (vysoká specificita + !important + atribut selector aby ji nepřebila žádná jiná @media nebo theme override) */
@media (max-width: 700px) {
  .sidebar-collapse,
  .sidebar-utils > .sidebar-collapse,
  body .sidebar .sidebar-utils .sidebar-collapse,
  button.sidebar-collapse,
  #sidebar-collapse-btn {
    display: none !important;
  }
}

/* ====================================================================
   📦 SIDEBAR COLLAPSED MODE — JEN DESKTOP (min-width: 701px)
   Na mobilu se ignoruje (mobil má sidebar-pinned pro kompaktní mód).
   ==================================================================== */
@media (min-width: 701px) {
  body.sidebar-collapsed .admin-app {
    grid-template-columns: 84px 1fr;   /* 🆕 v2.9.103 — větší sbalené menu (bylo 72) */
  }
  body.sidebar-collapsed .sidebar {
    width: 84px;                       /* 🆕 v2.9.103 — bylo 72 */
    padding: 12px 6px;
    overflow: hidden;
  }
  /* Logo — jen R, bez textu "Repre pekařství" */
  body.sidebar-collapsed .sidebar-logo {
    flex-direction: column;
    gap: 0;
    padding: 0 0 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    justify-content: center;
  }
  body.sidebar-collapsed .sidebar-logo strong { display: none; }
  body.sidebar-collapsed .sidebar-logo .logo-icon { width: 46px; height: 46px; font-size: 18px; }

  /* Nav items — kostičky 52×52 s ikonami, žádný text */
  body.sidebar-collapsed .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 4px;
    padding: 0;
    margin: 0;
    border: none;
  }
  body.sidebar-collapsed .nav-item {
    width: 100% !important;
    height: 62px !important;             /* 🆕 v2.9.103 — větší kostička (bylo 52) */
    min-height: auto;
    padding: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    gap: 0 !important;
    font-size: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    position: relative;
  }
  body.sidebar-collapsed .nav-item .nav-icon {
    font-size: 28px;                     /* 🆕 v2.9.103 — větší ikona (bylo 22) */
    line-height: 1;
    margin: 0;
  }
  /* Tooltip přes title — browser už handluje, ale přidáme custom popup na hover */
  body.sidebar-collapsed .nav-item::after {
    content: attr(data-page);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(8px, -50%);
    background: #2C2C2A;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 100;
    text-transform: capitalize;
  }
  body.sidebar-collapsed .nav-item:hover::after { opacity: 1; }
  body.sidebar-collapsed .nav-item.active {
    border: 1px solid var(--primary);
    background: var(--primary-light);
  }

  /* Pin + Collapse tlačítka — taky jen ikony */
  body.sidebar-collapsed .sidebar-utils {
    margin-top: 8px;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  body.sidebar-collapsed .sidebar-pin,
  body.sidebar-collapsed .sidebar-collapse {
    width: 100%;
    height: 44px;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;
    border-radius: 10px;
    margin-top: 0;
  }
  body.sidebar-collapsed .sidebar-pin-icon,
  body.sidebar-collapsed .sidebar-collapse-icon { font-size: 18px; opacity: 1; }
  body.sidebar-collapsed .sidebar-pin-label-on,
  body.sidebar-collapsed .sidebar-pin-label-off,
  body.sidebar-collapsed .sidebar-collapse-label-on,
  body.sidebar-collapsed .sidebar-collapse-label-off { display: none !important; }

  /* Kombinace sidebar-pinned + sidebar-collapsed — fixovaný + zúžený */
  body.sidebar-pinned.sidebar-collapsed .sidebar { width: 84px; }
  body.sidebar-pinned.sidebar-collapsed .admin-app { grid-template-columns: 84px 1fr; }
}

/* Při zapnutém pinu — boční menu je pevně fixované (position: fixed) bez scrollu */
body.sidebar-pinned .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  height: 100dvh;                 /* dynamic viewport — bere ohled na iOS toolbar */
  z-index: 40;
  border-right: 2px solid var(--primary-border);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.06);
  overflow: hidden;               /* NO SCROLL — items se rozdělí přes flex */
}
/* Posunout obsah, ať se nepřekrývá s fixovaným sidebarem */
body.sidebar-pinned .admin-app {
  grid-template-columns: 280px 1fr;
}
body.sidebar-pinned .main-wrap {
  grid-column: 2;
}

/* === Připnuté menu na MOBILU — kostičky pod sebou na boku, od shora dolů, fix, no scroll === */
@media (max-width: 700px) {
  body.sidebar-pinned .sidebar {
    width: 56px;                      /* užší — víc místa pro obsah */
    padding: 6px 4px;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  body.sidebar-pinned .admin-app {
    grid-template-columns: 56px 1fr;
  }
  /* V pinned módu na mobilu — sidebar je fixed 56px vlevo, topbar a content musí mít margin-left 56px */
  body.sidebar-pinned .topbar,
  body.sidebar-pinned .main-content {
    margin-left: 56px;
    width: calc(100% - 56px);
  }
  body.sidebar-pinned .sidebar-logo {
    flex-direction: column;
    gap: 0;
    padding: 0 0 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
  }
  body.sidebar-pinned .sidebar-logo strong,
  body.sidebar-pinned .sidebar-logo .topbar-datum-svatek { display: none; }
  body.sidebar-pinned .sidebar-logo .logo-icon { width: 36px; height: 36px; font-size: 15px; }

  /* Nav: kolona kostiček pod sebou, rozdělí výšku rovnoměrně (no scroll)
     PŘEBÍJÍ defaultní mobilní display:grid 3 sloupce z bloku níže */
  body.sidebar-pinned .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: stretch;
    gap: 4px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
  }
  body.sidebar-pinned .nav-item {
    flex: 1 1 0 !important;            /* rozdělí se rovnoměrně */
    aspect-ratio: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;          /* 🆕 v2.9.74 — flex rozdělí výšku → ikony se VŽDY vejdou na výšku displeje */
    max-height: 56px !important;       /* nepřesáhne maximum (vypadá jako kostička) */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 10px !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    white-space: normal !important;
  }
  body.sidebar-pinned .nav-item .nav-icon {
    font-size: 22px;
    line-height: 1;
    margin: 0;
  }
  /* Aktivní kostička */
  body.sidebar-pinned .nav-item.active {
    border-color: var(--primary);
    background: var(--primary-light);
  }

  /* Pin tlačítko — kostička dole, taky se rovnoměrně přizpůsobí */
  body.sidebar-pinned .sidebar-utils {
    margin-top: 4px;
    padding-top: 6px;
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
  }
  body.sidebar-pinned .sidebar-pin {
    width: 100%;
    height: 44px;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;
    border-radius: 10px;
    text-align: center !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  body.sidebar-pinned .sidebar-pin .sidebar-pin-icon {
    font-size: 20px !important;
    line-height: 1;
    display: block;
    margin: 0;
  }
  body.sidebar-pinned .sidebar-pin .sidebar-pin-label-on,
  body.sidebar-pinned .sidebar-pin .sidebar-pin-label-off { display: none !important; }
}
.nav-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F4EC 100%);
  color: var(--text-2);
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.1px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease,
              background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.nav-item:hover {
  background: linear-gradient(180deg, #FFFDF6 0%, #F1EADA 100%);
  border-color: var(--primary-border);
  color: var(--text);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 6px rgba(186, 117, 23, 0.10);
  transform: translateY(-2px); /* v3.0.406 — -2px: okraj polozky nahore mizel (user) */
}
.nav-item:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10) inset,
    0 0 0 rgba(0, 0, 0, 0);
  background: linear-gradient(180deg, #F1EADA 0%, #FFFDF6 100%);
}
.nav-item.active {
  background: linear-gradient(180deg, #FAC775 0%, #BA7517 100%);
  border-color: #854F0B;
  color: #FFFFFF;
  font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 2px 6px rgba(186, 117, 23, 0.30);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.nav-item.active:hover {
  background: linear-gradient(180deg, #FBCC81 0%, #C27D1D 100%);
  border-color: #854F0B;
  transform: translateY(-1px);
}
.nav-item.active:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18) inset,
    0 0 0 rgba(0, 0, 0, 0);
}
.nav-icon {
  font-size: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06));
}
.nav-item.active .nav-icon {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.20));
}

.role-badge { padding: 2px 8px; background: var(--primary-light); color: var(--primary-dark); border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.role-badge.super { background: #BA7517; color: white; }
.btn-link { color: var(--primary); font-size: 13px; padding: 4px 0; }

/* TOPBAR — přes hlavní obsah, hned nad page-head */
.main-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* 🆕 v3.0.296 — iOS: dynamická výška (počítá s URL barem) */
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 14px;        /* víc vzduchu nahoře — tlačítka nejsou nalepené na okraj */
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 100%;
  box-sizing: border-box;
}
.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  flex-wrap: wrap;
  row-gap: 6px;
  line-height: 1.3;
}
.topbar-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border-2, #d8d2c4);
  opacity: 0.55;
  margin: 0 2px;
  flex-shrink: 0;
}
.topbar-datum-svatek {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #854F0B;
  background: linear-gradient(135deg, #FFF8E7 0%, #FAEEDA 100%);
  border: 1px solid #E8C988;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(186, 117, 23, 0.08);
  letter-spacing: 0.1px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.topbar-datum-svatek:hover {
  box-shadow: 0 2px 6px rgba(186, 117, 23, 0.15);
  transform: translateY(-1px);
}
.topbar-datum-svatek strong { color: #5C3608; font-weight: 700; }
.topbar-datum-svatek::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #BA7517;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(186, 117, 23, 0.18);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 2px rgba(186, 117, 23, 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(186, 117, 23, 0.05); }
}
.topbar-user-greet { color: var(--text-3); white-space: nowrap; }
.topbar-user-name { font-weight: 600; color: var(--text-1); white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }

.btn-prodejna {
  position: relative;
  background: linear-gradient(180deg, #34c759 0%, #28a745 45%, #1e8e3e 100%);
  color: #fff !important;
  padding: 11px 18px 11px 16px;
  border: 1px solid #1e8e3e;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 -1px 0 rgba(0, 0, 0, 0.10) inset,
    0 2px 5px rgba(30, 142, 62, 0.25),
    0 6px 14px rgba(30, 142, 62, 0.18);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.btn-prodejna::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}
.btn-prodejna:hover {
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -1px 0 rgba(0, 0, 0, 0.10) inset,
    0 3px 8px rgba(30, 142, 62, 0.35),
    0 10px 22px rgba(30, 142, 62, 0.25);
}
.btn-prodejna:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18) inset,
    0 1px 2px rgba(30, 142, 62, 0.20);
}
.btn-prodejna-icon {
  font-size: 16px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.btn-prodejna-label { position: relative; z-index: 1; }
.btn-prodejna-label-short { display: none; position: relative; z-index: 1; }
.btn-prodejna-arrow {
  font-size: 13px;
  opacity: 0.95;
  transition: transform 0.18s ease;
  display: inline-block;
}
.btn-prodejna:hover .btn-prodejna-arrow { transform: translate(2px, -2px); }

/* === 🖥️ FULLSCREEN BUTTON — neon-blue pill === */
.btn-fullscreen {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF4FF 100%);
  color: #1849A9;
  border: 1px solid #B5D4F4;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-fullscreen:hover {
  background: linear-gradient(180deg, #F7FAFF 0%, #DDE9FA 100%);
  color: #0C447C;
  border-color: #7AA9DC;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 6px rgba(24, 73, 169, 0.18);
}
.btn-fullscreen:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10) inset;
}
.btn-fs-icon-enter,
.btn-fs-icon-exit { font-size: 15px; line-height: 1; }
.btn-fs-icon-exit { display: none; }
html.is-fullscreen .btn-fs-icon-enter { display: none; }
html.is-fullscreen .btn-fs-icon-exit { display: inline; }
/* V plné obrazovce změň pozadí na bordó (sídeji jak při Online prodejně) */
html.is-fullscreen .btn-fullscreen {
  background: linear-gradient(180deg, #FFF3F3 0%, #FCDCDC 100%);
  border-color: #E5B5B5;
  color: #991B1B;
}
/* Mobile compact */
@media (max-width: 700px) {
  .btn-fs-label { display: none; }
  .btn-fullscreen { padding: 8px 12px; }
}

.btn-logout {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1EFE8 100%);
  color: var(--text-2);
  border: 1px solid var(--border-2);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.12s ease, box-shadow 0.18s ease,
              background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-logout:hover {
  background: linear-gradient(180deg, #FFFDF6 0%, #F1EADA 100%);
  color: var(--primary-dark);
  border-color: var(--primary-border);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 6px rgba(186, 117, 23, 0.12);
}
.btn-logout:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10) inset;
}
.btn-logout-icon { font-size: 15px; }

/* DPH KARTY — 2 sloupce vedle sebe i na mobilu */
/* 🆕 v2.9.283 — auto-fit fallback pro úzké šířky (<360px) — nepřetečí */
.dph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  max-width: 100%;
  box-sizing: border-box;
}
.dph-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dph-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.dph-card-nazev {
  font-size: 14px;
  color: var(--text-1);
}
.dph-card-sazba {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}
.dph-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-3);
}
.dph-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.dph-card-actions button {
  flex: 1;
  font-size: 12px;
  padding: 6px 8px;
  min-height: 32px;
}
@media (max-width: 480px) {
  /* Na velmi malých displejích zůstanou 2 sloupce, ale ještě kompaktnější */
  .dph-card { padding: 10px 12px; }
  .dph-card-nazev { font-size: 12px; word-break: break-word; }
  .dph-card-sazba { font-size: 15px; }
  .dph-card-meta { font-size: 11px; }
  .dph-card-actions { flex-wrap: wrap; }
  .dph-card-actions button { font-size: 11px; padding: 5px 6px; min-height: 30px; }
}
/* 🆕 v2.9.283 — Velmi úzké phones (<360px) → 1 sloupec fallback */
@media (max-width: 360px) {
  .dph-grid { grid-template-columns: 1fr; }
}

/* OBJ EDIT MODAL — položky jako řádky */
.obj-polozky-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.obj-polozka-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto 32px;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 0.12s;
}
/* Read-only varianta (DL detail) — bez delete sloupce */
.obj-polozka-row.obj-polozka-readonly {
  grid-template-columns: 44px 1fr auto auto;
}
/* Statické množství — když není editovatelné */
.obj-polozka-qty.obj-polozka-qty-static {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}

/* Editovatelná varianta (Ruční DL/FA/OBJ create) — JEDNOŘÁDKOVÝ card, vše inline */
.obj-polozka-row.obj-polozka-edit {
  align-items: center;
  padding: 8px 12px;
}
.obj-polozka-row.obj-polozka-edit .obj-polozka-img { margin-top: 0; }
.obj-polozka-row.obj-polozka-edit .obj-polozka-info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Zdroj badge (Z katalogu / Volný řádek) — v jednořádkové variantě skryt
   (vizuál se přesouvá do barvy okraje name inputu) */
.obj-polozka-row.obj-polozka-edit .obj-polozka-zdroj { display: none; }

.obj-polozka-name-input {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px !important;
  flex: 1 1 auto;
  min-width: 80px;
  height: 32px;
  box-sizing: border-box;
}
.obj-polozka-edit-row {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}
.obj-polozka-jed {
  width: 52px !important;
  font-size: 12px !important;
  padding: 4px 6px !important;
  height: 32px;
  text-align: center;
}
.obj-polozka-cena-input {
  width: 76px !important;
  font-size: 12px !important;
  padding: 4px 6px !important;
  height: 32px;
  text-align: right;
}
.obj-polozka-dph {
  width: 66px !important;
  font-size: 12px !important;
  padding: 4px 6px !important;
  height: 32px;
}
.obj-polozka-row.obj-polozka-edit .obj-polozka-qty { align-self: center; }
.obj-polozka-row.obj-polozka-edit .obj-polozka-cena { align-self: center; white-space: nowrap; }

/* MOBIL: edit varianta — info zabere víc místa, qty pod info */
@media (max-width: 700px) {
  .obj-polozka-row.obj-polozka-edit {
    grid-template-columns: 36px 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding: 10px 12px;
    position: relative;
  }
  .obj-polozka-row.obj-polozka-edit .obj-polozka-img {
    grid-column: 1; grid-row: 1 / span 2;
    margin-top: 0;
  }
  .obj-polozka-row.obj-polozka-edit .obj-polozka-info {
    grid-column: 2 / -1; grid-row: 1;
    padding-right: 32px;
  }
  .obj-polozka-row.obj-polozka-edit .obj-polozka-qty {
    grid-column: 2; grid-row: 2;
    justify-self: start;
  }
  .obj-polozka-row.obj-polozka-edit .obj-polozka-cena {
    grid-column: 3; grid-row: 2;
    align-self: center;
  }
  .obj-polozka-row.obj-polozka-edit .obj-polozka-del {
    position: absolute;
    top: 6px;
    right: 6px;
  }
  .obj-polozka-name-input { font-size: 13px; height: 30px; }
  .obj-polozka-jed { width: 50px !important; }
  .obj-polozka-cena-input { width: 70px !important; }
  .obj-polozka-dph { width: 64px !important; }
}
.obj-polozka-row:hover { background: #F7F8FA; }
.obj-polozka-img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F7F8FA;
  flex-shrink: 0;
}
.obj-polozka-img img { width: 100%; height: 100%; object-fit: cover; }
.obj-polozka-img-empty { font-size: 22px; opacity: 0.5; }
.obj-polozka-info { min-width: 0; }
.obj-polozka-nazev {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.obj-polozka-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.obj-polozka-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.obj-polozka-qty .qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.obj-polozka-qty .qty-btn:hover { background: var(--primary-light); border-color: var(--primary); }
.obj-polozka-qty .qty-input {
  width: 56px !important;
  text-align: center;
  padding: 4px 6px !important;
  font-weight: 600;
  font-size: 14px;
  height: 28px;
}
.obj-polozka-cena {
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 80px;
}
.obj-polozka-del {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--danger-text);
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.obj-polozka-del:hover {
  background: var(--danger-bg);
  border-color: var(--danger-text);
}

/* Doklady akce — řada tlačítek (Znovu / DL / FA) */
/* 🆕 v3.0.246 — Doklady: sjednocená profi sada tlačítek (label nad, 3 stejné akce) */
.obj-doc-actions-wrap {
  margin-top: 16px;
  padding: 12px 14px;
  background: #F7F8FA;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.obj-doc-actions-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-3); font-weight: 700; margin-bottom: 10px;
}
.obj-doc-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.doc-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: #fff;
  color: var(--text-1); font-size: 13px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.doc-action:hover { border-color: var(--pos-primary, #BA7517); background: #FFFCF7; transform: translateY(-1px); }
.doc-action .doc-action-ic { font-size: 16px; line-height: 1; }
/* primární = hlavní CTA (vystavit fakturu) */
.doc-action-primary {
  background: linear-gradient(180deg, #34C759, #28A745);
  border-color: #1f9d3d; color: #fff;
  box-shadow: 0 1px 3px rgba(40, 167, 69, 0.3);
}
.doc-action-primary:hover { filter: brightness(1.05); border-color: #1f9d3d; background: linear-gradient(180deg, #34C759, #28A745); }
/* hotovo = doklad existuje, otevřít (modrá) */
.doc-action-done {
  background: #EFF6FF; border-color: #B5D4F4; color: #0C447C;
}
.doc-action-done:hover { border-color: #3B82F6; background: #E0EBFF; }
@media (max-width: 700px) {
  .obj-doc-actions { grid-template-columns: 1fr; gap: 8px; }
  .doc-action { min-height: 48px; font-size: 13.5px; }
}

/* MOBIL: položky 2-řádkový kompaktní layout */
@media (max-width: 700px) {
  .obj-polozka-row {
    grid-template-columns: 36px 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding: 8px 10px;
    position: relative;
  }
  .obj-polozka-img { width: 36px; height: 36px; grid-column: 1; grid-row: 1 / span 2; }
  .obj-polozka-info { grid-column: 2; grid-row: 1; padding-right: 32px; }
  .obj-polozka-nazev { font-size: 13px; }
  .obj-polozka-qty { grid-column: 2; grid-row: 2; justify-self: start; }
  .obj-polozka-qty .qty-btn { width: 26px; height: 26px; }
  .obj-polozka-qty .qty-input { width: 44px !important; height: 26px; font-size: 13px; }
  .obj-polozka-cena {
    grid-column: 3; grid-row: 2;
    align-self: center;
    min-width: auto;
    font-size: 13px;
  }
  .obj-polozka-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    font-size: 16px;
  }

  /* Doc actions — 2 sloupce (pravidlo přebírá grid-template-columns z bloku výše) */
  .obj-doc-actions { padding: 10px 12px; }
  .obj-doc-actions .btn-secondary,
  .obj-doc-actions a.btn-secondary {
    font-size: 13px;
    padding: 12px 8px;
    min-height: 48px;
    min-width: 0;
    line-height: 1.25;
  }
}

/* DASHBOARD: Recent řada (3 sloupce vedle sebe — objednávky / DL / faktury) */
.dashboard-recent-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
  align-items: stretch;
}
.dashboard-recent-row > .recent-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Viditelnější jemný černý rámeček + jasně bílé pozadí (světlejší než dashboard bg) */
  background: #FFFFFF;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
html.dark .dashboard-recent-row > .recent-card {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.dashboard-recent-row > .recent-card > .recent-card-head { flex-shrink: 0; }
/* Karta na dashboardu — každý řádek = mini-karta s 3-řádkovým grid layoutem.
   1) Cislo+datum L · Částka R
   2) Odběratel + místo (přes celou šíři)
   3) Stav L · ikony R
*/
.dashboard-recent-row > .recent-card .recent-table {
  margin: 0;
  width: 100%;
}
.dashboard-recent-row > .recent-card .recent-table thead { display: none; }
.dashboard-recent-row > .recent-card .recent-table,
.dashboard-recent-row > .recent-card .recent-table tbody { display: block; }
.dashboard-recent-row > .recent-card .recent-table tbody tr {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: auto;
  column-gap: 10px;
  row-gap: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1.5px solid rgba(0, 0, 0, 0.14);   /* viditelný lehce černý rámeček */
  border-radius: 14px;                       /* výrazněji zaoblené rohy */
  background: #fff;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.dashboard-recent-row > .recent-card .recent-table tbody tr:active {
  transform: scale(0.99);
}
.dashboard-recent-row > .recent-card .recent-table tbody tr:hover {
  background: var(--surface-2);
  border-color: rgba(0, 0, 0, 0.22);
}
/* Žádné vnitřní border mezi buňkami (žádná mřížka) */
.dashboard-recent-row > .recent-card .recent-table tbody tr td {
  border: none !important;
}
html.dark .dashboard-recent-row > .recent-card .recent-table tbody tr {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.12);
}
html.dark .dashboard-recent-row > .recent-card .recent-table tbody tr:hover {
  background: var(--surface-2);
  border-color: rgba(255, 255, 255, 0.20);
}
.dashboard-recent-row > .recent-card .recent-table tbody tr td {
  display: block;
  padding: 0;
  border: none;
  font-size: 12px;
  line-height: 1.3;
}
.dashboard-recent-row > .recent-card .recent-table tbody tr td::before { display: none !important; }

/* (1) Cislo + datum vlevo nahoře */
.dashboard-recent-row > .recent-card .recent-table tbody tr td:nth-child(1) {
  grid-column: 1; grid-row: 1;
  font-weight: 600;
  white-space: normal;        /* 🆕 v3.0.377 — celé číslo dokladu (dřív ellipsis „FA… · …"); číslo + splatnost se zalomí na 2 řádky */
  word-break: break-word;
  min-width: 0;
}
/* (2) Odběratel + místo — přes obě sloupce, druhý řádek */
.dashboard-recent-row > .recent-card .recent-table tbody tr td:nth-child(2) {
  grid-column: 1 / -1; grid-row: 2;
  color: var(--text-2);
  font-size: 11px;
}
/* (3) Stav badge — vlevo dole */
.dashboard-recent-row > .recent-card .recent-table tbody tr td:nth-child(3) {
  grid-column: 1; grid-row: 3;
  align-self: center;
  border-top: 1px dashed var(--border);
  padding-top: 6px !important;
}
/* (4) Částka — vpravo nahoře, výrazná */
.dashboard-recent-row > .recent-card .recent-table tbody tr td:nth-child(4) {
  grid-column: 2; grid-row: 1;
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-1);
  white-space: nowrap;
  align-self: center;
}
/* (5) Akce ikony — vpravo dole */
.dashboard-recent-row > .recent-card .recent-table tbody tr td.recent-actions {
  grid-column: 2; grid-row: 3;
  justify-self: end;
  align-self: center;
  border-top: 1px dashed var(--border);
  padding-top: 6px !important;
}

.dashboard-recent-row > .recent-card .recent-table tbody tr {
  overflow: hidden;
  min-width: 0;
}
.dashboard-recent-row > .recent-card .recent-icon-btn { width: 32px; height: 32px; }
.dashboard-recent-row > .recent-card .recent-icon-em { font-size: 15px; }

/* 🆕 v3.0.131 — Položky objednávky pod adresou (chipy + „+N" pill).
   User: "pod adresou položky z obj — poslední 3 vypsaný a pak +N". */
.dashboard-recent-row > .recent-card .recent-pol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 5px;
  margin-top: 6px;
}
.dashboard-recent-row > .recent-card .recent-pol-item {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-2, #5F5E5A);
  background: var(--surface-2, #F7F8FA);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 7px;
  padding: 1px 7px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-recent-row > .recent-card .recent-pol-more {
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--primary-dark, #854F0B);
  background: var(--primary-light, #FAEEDA);
  border: 1px solid var(--primary-border, #FAC775);
  border-radius: 7px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}
html.dark .dashboard-recent-row > .recent-card .recent-pol-item {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* 🆕 v3.0.133 — Termo-tisk picker popup (výběr tiskárny + formátu z detailu dokladu) */
.termo-pop-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;                 /* nad modal (~1000) */
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: termoPopFade 0.15s ease;
}
@keyframes termoPopFade { from { opacity: 0; } to { opacity: 1; } }
.termo-pop-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.28);
  width: 100%;
  max-width: 380px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: termoPopUp 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes termoPopUp { from { transform: translateY(12px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.termo-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.termo-pop-head strong { font-size: 15px; color: var(--text, #1a1d24); }
.termo-pop-doc {
  font-size: 12px;
  color: var(--text-3, #888);
  font-weight: 600;
}
.termo-pop-close {
  margin-left: auto;
  border: 0;
  background: var(--surface-2, #f0f0f3);
  width: 28px; height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2, #5F5E5A);
  transition: background 0.12s;
}
.termo-pop-close:hover { background: var(--danger-bg, #FCEBEB); color: var(--danger-text, #A32D2D); }
.termo-pop-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px 4px;
}
.termo-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border: 1.5px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 12px;
  background: var(--surface, #fff);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2, #5F5E5A);
  transition: all 0.14s;
}
.termo-mode small { font-size: 9.5px; font-weight: 500; color: var(--text-3, #888); text-transform: none; }
.termo-mode:hover { border-color: var(--primary-border, #FAC775); }
.termo-mode.active {
  border-color: var(--primary, #BA7517);
  background: var(--primary-light, #FAEEDA);
  color: var(--primary-dark, #854F0B);
}
.termo-mode.active small { color: var(--primary-dark, #854F0B); }
.termo-pop-label {
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3, #888);
}
.termo-pop-list {
  padding: 0 12px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.termo-printer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 12px;
  background: var(--surface, #fff);
  cursor: pointer;
  text-align: left;
  transition: all 0.14s;
}
.termo-printer-row:hover:not(:disabled) {
  border-color: var(--primary, #BA7517);
  background: var(--primary-light, #FAEEDA);
  transform: translateX(2px);
}
.termo-printer-row:disabled { opacity: 0.5; cursor: default; }
.termo-printer-row.is-sending { opacity: 0.6; }
.termo-printer-ico { font-size: 20px; flex-shrink: 0; }
.termo-printer-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.termo-printer-name { font-size: 13px; font-weight: 700; color: var(--text, #1a1d24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.termo-printer-sub { font-size: 11px; color: var(--text-3, #888); }
.termo-printer-arrow { font-size: 14px; color: var(--primary, #BA7517); flex-shrink: 0; font-weight: 700; }
html.dark .termo-pop-card { background: var(--surface, #1c1f26); }
html.dark .termo-printer-row, html.dark .termo-mode { background: rgba(255,255,255,0.04); }
/* 🆕 v2.9.117 — všechny ikony v řádku stejně velké; e-mail má jen o kapku
   větší emoji pro jemný důraz, ale box je sjednocený s DL/FA/opakovat */
.dashboard-recent-row > .recent-card .recent-icon-btn.recent-icon-email .recent-icon-em { font-size: 17px; }
@media (max-width: 700px) {
  /* Menší ikony na mobilu (3 ikony se vejdou s odběratelem) */
  .dashboard-recent-row > .recent-card .recent-icon-btn { width: 30px; height: 30px; }
  .dashboard-recent-row > .recent-card .recent-icon-em { font-size: 14px; }
  /* Karty užší, méně paddingu */
  .recent-card { padding: 10px 12px; }
  .dashboard-recent-row > .recent-card .recent-table tbody tr { padding: 8px 10px; }
  /* Odběratel celý — wrappuje, žádný overflow */
  .dashboard-recent-row > .recent-card .recent-table tbody tr td:nth-child(2) {
    overflow: hidden;
    word-break: break-word;
  }
}

@media (max-width: 1200px) {
  .dashboard-recent-row { grid-template-columns: 1fr 1fr; }
  /* 🆕 v3.0.157 — poslední karta sama v řádku (lichá ve 2-kolonách) → roztáhni přes obě, ať nezbývá prázdné místo */
  .dashboard-recent-row > .recent-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px)  { .dashboard-recent-row { grid-template-columns: 1fr; gap: 10px; align-items: stretch; } }

/* 🆕 v3.0.38 — Mobile DL overflow safety net (user reported na mobilu DL přetýkají z přehledu) */
.dashboard-recent-row > .recent-card {
  min-width: 0;       /* Grid item smí shrinkovat pod content-size */
  max-width: 100%;
  overflow: hidden;   /* Nic nepřeteče kartu */
}
.dashboard-recent-row > .recent-card .recent-table tbody tr {
  min-width: 0;       /* Stejně tak řádek-mini-karta */
  max-width: 100%;
}
.dashboard-recent-row > .recent-card .recent-table tbody tr td {
  min-width: 0;
  overflow-wrap: anywhere; /* zalomí dlouhé cislo nebo odběratel */
  word-break: break-word;
}
/* Recent actions: zabal ikony pokud potřeba (mobile small screens) */
.dashboard-recent-row > .recent-card .recent-table tbody tr td.recent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  justify-content: flex-end;
}

.recent-card {
  border-top: 4px solid transparent;
  position: relative;
  padding: 12px 14px;
  min-width: 0;       /* Same safeguard pro recent-card jako standalone class */
}

/* 🆕 v3.0.38 — Sidebar logo (písmeno + brand) clickable → dashboard
   🐛 v3.0.49 fix — odstraněno horizontal margin (způsobovalo 4px overflow na mobilu) */
.sidebar-logo {
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
  border-radius: 10px;
  margin: -4px 0 16px;
  padding: 6px 8px 18px;
  max-width: 100%;
  box-sizing: border-box;
}
.sidebar-logo:hover {
  background: var(--primary-light, rgba(186, 117, 23, 0.08));
}
.sidebar-logo:active {
  transform: scale(0.98);
}
.sidebar-logo .logo-icon {
  cursor: pointer; /* explicit pro `.logo-icon` který je v jiné CSS sekci */
}
.recent-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid;
  flex-wrap: wrap;
}
.recent-card-head h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modrá — objednávky (jemný pastel) */
.recent-card.recent-obj { border-top-color: #3B5BAB; background: linear-gradient(180deg, #F5F8FE 0%, #fff 70px); }
.recent-card.recent-obj .recent-card-head { border-bottom-color: #DCE6F5; }
.recent-card.recent-obj .recent-card-head h3 { color: #2C4685; }

/* Amber — dodací listy (jemnější) */
.recent-card.recent-dl { border-top-color: #C58729; background: linear-gradient(180deg, #FFFAEF 0%, #fff 70px); }
.recent-card.recent-dl .recent-card-head { border-bottom-color: #ECD9B4; }
.recent-card.recent-dl .recent-card-head h3 { color: #8A571A; }

/* Zelená — faktury (jemnější) */
.recent-card.recent-fa { border-top-color: #3D945A; background: linear-gradient(180deg, #F3FAF5 0%, #fff 70px); }
.recent-card.recent-fa .recent-card-head { border-bottom-color: #C8E2D0; }
.recent-card.recent-fa .recent-card-head h3 { color: #1F6A3F; }

/* Action ikony v recent kartách (DL · FA · 🔁 Znovu objednat) */
.recent-icons {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
}
/* Společná velikost a vzhled pro <a>, <span>, <button> ikony */
.recent-icon-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border-radius: 7px;
  text-decoration: none;
  border: 1.5px solid var(--border-2);   /* výraznější rámeček */
  background: #fff;
  cursor: pointer;
  transition: all 0.12s;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: inherit;
  vertical-align: middle;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);  /* jemný oddělovací stín */
}
/* Emoji uprostřed — neutrální vertikální zarovnání */
.recent-icon-em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1;
}

.recent-icon-btn.active.recent-icon-dl { background: #FAEEDA; color: #854F0B; border-color: rgba(133, 79, 11, 0.35); }
.recent-icon-btn.active.recent-icon-fa { background: var(--success-bg); color: var(--success-text); border-color: rgba(39, 80, 10, 0.35); }
.recent-icon-btn.recent-icon-reorder { background: #EFF6FF; color: #1E3A8A; border-color: rgba(30, 58, 138, 0.35); }
/* ✉️ Envelope v dashboard recent — sjednoceno se zelenými ikonkami z modálů */
.recent-icon-btn.recent-icon-email {
  background: #DCFCE7;
  color: #166534;
  border-color: #22863a;
}
.recent-icon-btn.recent-icon-email .recent-icon-em {
  filter: contrast(1.15) saturate(1.4);
  font-size: 17px;            /* mírně větší než výchozí 14px */
}
.recent-icon-btn.recent-icon-email:hover {
  background: #B7F0C8;
  border-color: #15803d;
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(34, 134, 58, 0.20);
}

/* Odběratel v dashboard recent tabulkách — výraznější */
.recent-table .recent-odb { font-size: 13px; }
.recent-table .recent-odb-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
@media (max-width: 700px) {
  .recent-table .recent-odb-name { font-size: 13px; }
}
.recent-icon-btn.disabled {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  cursor: not-allowed;
}
/* 🆕 v2.9.117 — neaktivní DL/FA: místo ztlumení celého tlačítka (opacity 0.55,
   působilo „vybledle") zešedne jen ikona. Box zůstane plný → šedé tlačítko
   sedí v řadě stejně pevně jako barevné aktivní ikony (obj/fa/dl jednotně). */
.recent-icon-btn.disabled .recent-icon-em {
  filter: grayscale(1);
  opacity: 0.45;
}
.recent-icon-btn:hover:not(.disabled) {
  filter: brightness(0.96);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  text-decoration: none;
}

/* Recent table action sloupec na desktopu — vpravo, malé */
.recent-table td.recent-actions { text-align: right; white-space: nowrap; }

/* Mobil: kompaktní 2x2 grid v každém řádku karty (Číslo|Odberatel / Stav|Částka / Ikony přes obě) */
@media (max-width: 700px) {
  .recent-card { padding: 10px 12px; }
  .recent-card-head { margin-bottom: 6px; padding-bottom: 6px; }
  .recent-card-head h3 { font-size: 13px; }
  .recent-card-head .btn-secondary { font-size: 10px !important; padding: 3px 8px !important; min-height: 28px !important; }

  /* Každý řádek (tr) jako mini-karta — 3 řádky:
     1) Číslo+datum LEVÁ  | Akční ikony PRAVÁ
     2) Odběratel (celý, přes obě sloupce)
     3) Stav LEVÁ          | Částka PRAVÁ */
  .recent-card .table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    column-gap: 8px;
    row-gap: 6px;
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
  }
  .recent-card .table tbody tr td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.3;
  }
  .recent-card .table tbody tr td::before { display: none !important; }

  /* (1) Číslo + datum — vlevo nahoře */
  .recent-card .table tbody tr td:nth-child(1) {
    grid-column: 1; grid-row: 1;
    font-weight: 600;
  }
  /* (2) Odběratel CELÝ — přes obě sloupce, druhý řádek, může wrappovat */
  .recent-card .table tbody tr td:nth-child(2) {
    grid-column: 1 / -1; grid-row: 2;
    color: var(--text-2);
    font-size: 12px !important;
    white-space: normal;
    word-break: break-word;
  }
  /* (3) Stav badge — vlevo dole */
  .recent-card .table tbody tr td:nth-child(3) {
    grid-column: 1; grid-row: 3;
    align-self: center;
  }
  /* (4) Částka — vpravo dole, výrazná */
  .recent-card .table tbody tr td:nth-child(4) {
    grid-column: 2; grid-row: 3;
    text-align: right !important;
    font-weight: 700;
    font-size: 14px !important;
    color: var(--text-1);
    align-self: center;
  }
  /* (5) Action ikony — vpravo nahoře (vedle čísla) */
  .recent-card .table tbody tr td.recent-actions {
    grid-column: 2; grid-row: 1;
    text-align: right !important;
  }
  .recent-icon-btn { width: 30px; height: 30px; font-size: 14px; }
}

/* Skrýt položky pro non-super-admin role */
body.role-restricted .admin-only { display: none !important; }

/* MAIN CONTENT */
.main-content { padding: 28px 32px; max-width: 1400px; }
/* 🆕 v3.0.269 — datové SEZNAMY (široké tabulky) vyplní celou šířku monitoru.
   max-width:1400 zůstává pro dashboard/formuláře (čitelnost), ale faktury,
   dodací listy, objednávky, výrobky, suroviny ho zruší → tabulka „flex". */
#content[data-page="faktury"],
#content[data-page="dodaci_listy"],
#content[data-page="objednavky"],
#content[data-page="vyrobky"],
#content[data-page="suroviny"],
#content[data-page="sklad"],
#content[data-page="odberatele"] { max-width: none; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.page-title { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
.page-sub { font-size: 13px; color: var(--text-3); }

.btn-primary { background: var(--primary); color: white; padding: 10px 16px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; transition: background 0.15s; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--surface); color: var(--text); padding: 10px 16px; border-radius: var(--radius-md); font-size: 14px; border: 1px solid var(--border-2); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger-bg); color: var(--danger-text); padding: 10px 16px; border-radius: var(--radius-md); font-size: 14px; }
.btn-danger:hover { background: #F8DCDC; }

/* ✉️ Malé ikonové tlačítko pro odeslání e-mailem (vedle koše) — zelený "send" pattern */
.btn-icon-corner {
  background: #DCFCE7;                    /* světle zelená — odkaz na úspěšnou akci/send */
  border: 1.5px solid #22863a;
  color: #166534;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  filter: contrast(1.1) saturate(1.35);   /* aby emoji obálka byla výraznější + zelenější */
  transition: all 0.18s ease;
}
.btn-icon-corner:hover {
  background: #B7F0C8;
  border-color: #15803d;
  transform: scale(1.08);
  filter: contrast(1.18) saturate(1.45);
  box-shadow: 0 2px 6px rgba(34, 134, 58, 0.25);
}
.btn-icon-corner:active { transform: scale(0.96); }
/* 🆕 v2.9.262 — Mobile touch targets WCAG 2.1 AA (44×44 min) */
@media (max-width: 700px) {
  .btn-icon-corner { width: 44px; height: 44px; font-size: 22px; }
  /* Form-actions ikona vedle koše — také 44 (přístupnost) */
  .form-actions .btn-icon-corner {
    width: 44px !important;
    height: 44px !important;
    align-self: flex-start;
    margin-left: 2px;
  }
  /* Recent doklady icon buttons (Dashboard) — WCAG min */
  .recent-icon-btn { width: 40px !important; height: 40px !important; }
  .dashboard-recent-row > .recent-card .recent-icon-btn {
    width: 40px !important; height: 40px !important;
  }
  /* Table inline action buttons (Upravit/Smazat) — min 40 */
  .table .btn-secondary,
  .table .btn-danger { min-height: 40px; padding: 8px 12px !important; }
  /* Doc-badge — min height pro lepší tap */
  .doc-badge { min-height: 36px; padding: 7px 12px !important; display: inline-flex; align-items: center; }
}

/* 📨🗑️ Řádek s ikonkami ✉️ + 🗑️ v detailu OBJ/DL/FA (a 🗑️ samostatně v dalších modal)
   — drží je VŽDY v jedné řadě, na mobilu rozdělené ✉️ vlevo / 🗑️ vpravo
   (pokud je jen 🗑️, je nalevo — zachová zarovnání jako bývalo) */
.form-actions-icons-row {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 700px) {
  /* Form-actions má column-reverse + width:100% pro children — override:
     ikonový řádek je full-width, ale vnitřní položky zůstanou v řadě,
     rozdělené na dvě strany (justify-content: space-between). */
  .form-actions .form-actions-icons-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px;
    padding: 4px 0;
  }
  /* Když je v řádku jen jedna ikona (jen 🗑️ smazat), zarovnej ji k levému okraji */
  .form-actions .form-actions-icons-row:has(> :only-child) {
    justify-content: flex-start !important;
  }
  /* Vnitřní tlačítka jsou v pevné velikosti (ne 100% width jako default form-actions > *) */
  .form-actions .form-actions-icons-row .btn-icon-corner,
  .form-actions .form-actions-icons-row .btn-danger-corner {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 auto;
    margin: 0 !important;
    align-self: center !important;
    font-size: 18px;
  }
}

/* 🗑️ Malé "smazat" tlačítko do rohu — aby se omylem nekliklo */
.btn-danger-corner {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-3);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.18s ease;
}
.btn-danger-corner:hover {
  opacity: 1;
  background: var(--danger-bg);
  border-color: var(--danger-text);
  color: var(--danger-text);
  transform: scale(1.05);
}
.btn-danger-corner:active {
  transform: scale(0.96);
}
@media (max-width: 700px) {
  .btn-danger-corner {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  /* Na mobilu má form-actions column-reverse + width:100% pro vše —
     u rohového tlačítka to zrušíme a posuneme ho k levému okraji */
  .form-actions .btn-danger-corner {
    width: 32px !important;
    align-self: flex-start;
    margin-left: 2px;
  }
}

/* Velká panelová tlačítka pro výběr cíle slevy */
.cilove-tlacitko {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 18px 14px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  font-family: inherit;
}
.cilove-tlacitko:hover {
  border-color: var(--primary-border);
  background: #F7F8FA;
  transform: translateY(-1px);
}
.cilove-tlacitko.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.15);
}
.cilove-tlacitko.active > div:nth-child(2) {
  color: var(--primary-dark);
}

/* STAT GRID */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-card { background: var(--surface); padding: 16px 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }

/* 🆕 v2.9.242 — Nastavení → Platby: 2-sloupcový grid (4 sekce 2×2 na PC) */
.platby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
@media (max-width: 820px) {
  .platby-grid { grid-template-columns: 1fr; }
}

/* 🆕 v2.9.242 — Dashboard Alerts widget (akce vyžadující pozornost) */
.dash-alerts {
  background: linear-gradient(135deg, #FFF8E5 0%, #FEF3C7 100%);
  /* 🆕 v3.0.55 — dashed border (user: "dej tu linku přerušovanou") */
  border: 2px dashed #FBBF24;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.12);
  position: relative;
  /* 🆕 v3.0.60 — Swipe-to-dismiss support (user: "udelat swipe zavřít do strany").
     touch-action: pan-y → vertikální scroll funguje, horizontální se zachytí pro swipe. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
/* 🆕 v3.0.60 — Swipeable hint na mobilu (malá šipka napravo signaluje swipe-to-dismiss) */
@media (max-width: 700px) {
  .dash-alerts::after {
    content: '⇆';
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-size: 11px;
    color: rgba(133, 79, 11, 0.45);
    pointer-events: none;
    letter-spacing: 1px;
  }
}
.dash-alerts-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #854F0B;
  margin-bottom: 10px;
}
/* 🆕 v3.0.55 — Dismiss button (1h skrytí) */
.dash-alerts-dismiss {
  margin-left: auto;
  width: 28px;
  height: 28px;
  /* 🆕 v3.0.159 — flex-shrink:0 (pevných 28×28) — jinak se na úzkém mobilu zúžil do oválku */
  flex: 0 0 28px;
  border-radius: 50%;
  background: rgba(133, 79, 11, 0.1);
  border: none;
  color: #854F0B;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.dash-alerts-dismiss:hover { background: rgba(133, 79, 11, 0.2); }
.dash-alerts-dismiss:active { transform: scale(0.92); }
.dash-alerts-ico { font-size: 18px; line-height: 1; }
.dash-alerts-count {
  background: #BA7517;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  /* 🆕 v3.0.159 — margin-left:0 (NE auto) → badge zůstane hned u titulku. (Dřív měl auto
     i dismiss → dva auto-marginy si rozdělily volné místo → „1" lítalo doprostřed lišty.) */
  margin-left: 0;
  flex: 0 0 auto;
}
.dash-alerts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}
.dash-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #FBBF24;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
  -webkit-tap-highlight-color: rgba(186, 117, 23, 0.1);
}
.dash-alert:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(251, 191, 36, 0.25);
  border-color: #BA7517;
  background: #FFFCF0;
}
.dash-alert.is-danger { border-color: #FCA5A5; background: #FFF; }
.dash-alert.is-danger:hover { border-color: #DC2626; background: #FFFAFA; box-shadow: 0 3px 10px rgba(220, 38, 38, 0.2); }
.dash-alert-ico { font-size: 20px; line-height: 1; flex-shrink: 0; }
.dash-alert-count {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #854F0B;
  min-width: 32px;
  text-align: center;
  letter-spacing: -0.02em;
}
.dash-alert.is-danger .dash-alert-count { color: #B91C1C; }
.dash-alert-label {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.35;
}
.dash-alert-arrow {
  color: var(--text-3);
  font-size: 16px;
  flex-shrink: 0;
}
.dash-alert:hover .dash-alert-arrow {
  color: var(--primary);
  transform: translateX(3px);
}
@media (max-width: 600px) {
  .dash-alerts { padding: 12px 14px; }
  .dash-alerts-list { grid-template-columns: 1fr; }
  .dash-alert-count { font-size: 20px; min-width: 28px; }
  .dash-alert-label { font-size: 12px; }
}

/* 🆕 v2.9.234 — clickable stat-card (hover lift) — pro Po splatnosti tile */
.stat-card[onclick]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: var(--primary-border);
  cursor: pointer;
}

/* 🆕 v2.9.267 — sparkline jako PODKRES (watermark) pod částkou — Stripe/Linear style.
   Předtím sparkline pod číslem (stat-card column). Nyní je absolutně pozicovaný
   na pozadí karty, číslo + label zůstanou nad ním. Elegantní, méně rušivé. */
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-spark {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;                          /* spodní polovina karty */
  opacity: 0.18;                        /* podkres — sotva viditelný */
  transition: opacity 0.2s ease, height 0.2s ease;
  pointer-events: none;
  line-height: 0;
  z-index: 0;
}
.stat-card:hover .stat-spark {
  opacity: 0.45;                        /* na hover se zvýrazní */
  height: 70%;
}
.stat-spark svg {
  display: block;
  width: 100%;
  height: 100%;                         /* fill celou výšku spark containeru */
}
/* Obsah karty nad podkresem */
.stat-card > .stat-label,
.stat-card > .stat-value,
.stat-card > .stat-sub {
  position: relative;
  z-index: 1;
}

/* 🆕 v3.0.129 — Dashboard stat-grid: PC = 4×1 (jedna řada), mobile = 2×2.
   User: "tohle na pc dej do jednoho řádku a na mobilu do 2".
   DOM pořadí: [Tržby] [Dnes] [Obj] [Splat]
   PC: 4 karet vedle sebe (každá 25%) — Tržby si nechává barvu (oranžový
       gradient + border) jako hierarchy hint, NE přes width.
   Mobile (max-width: 700px): 2×2 grid — [Tržby] [Dnes] / [Obj] [Splat].
   Předtím v2.9.243: 75/25 + 50/50 (Tržby span 3, Obj+Splat span 2). */
.stat-grid-dash {
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-flow: row;
  gap: 12px;
}
.stat-card-trzby {
  grid-column: span 1 !important;   /* 25% — barva drží primary KPI hint */
  background: linear-gradient(180deg, var(--surface) 0%, rgba(186, 117, 23, 0.04) 100%);
  border-color: var(--primary-border);
}
.stat-card-dnes  { grid-column: span 1 !important; }
.stat-card-obj   { grid-column: span 1 !important; }
.stat-card-splat { grid-column: span 1 !important; }
/* Backwards-compat */
.stat-card-wide {
  background: linear-gradient(180deg, var(--surface) 0%, rgba(186, 117, 23, 0.04) 100%);
  border-color: var(--primary-border);
}
/* 🆕 v3.0.147 — FLUID KPI: hodnota škáluje s šířkou KARTY (container query units cqi),
   ne s viewportem. Nepřeteče úzkou kartu (flex/grid) a zase roste při roztažení okna. */
.stat-grid-dash .stat-card { container-type: inline-size; }
.stat-value-lg {
  font-size: clamp(14px, 13cqi, 30px) !important;   /* v3.0.147 — cqi = % šířky karty (dřív 1.8vw = viewport → přetékalo) */
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--primary-dark);
  white-space: nowrap;
}
.stat-grid-dash .stat-value { font-size: clamp(13px, 11cqi, 24px); white-space: nowrap; }
/* Tablet — zachovat 4×1 layout, jen menší fonts */
@media (max-width: 1024px) {
  .stat-grid-dash { gap: 8px; }
  .stat-value-lg { font-size: clamp(14px, 13cqi, 26px) !important; }
}
/* 🆕 v3.0.129 — Mobile 2×2 (user: "na mobilu do 2"). DOM order zachován:
   Row 1: [Tržby] [Dnes]   Row 2: [Obj] [Splat] */
@media (max-width: 700px) {
  .stat-grid-dash {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}
/* Mobile small — kompaktní fonty/padding (zachováno z v2.9.243) */
@media (max-width: 600px) {
  .stat-grid-dash { gap: 6px !important; }
  .stat-grid-dash .stat-card {
    padding: 10px 8px !important;
    overflow: hidden;
  }
  .stat-grid-dash .stat-label {
    font-size: 10px !important;
    line-height: 1.2;
    white-space: normal;
  }
  .stat-grid-dash .stat-value {
    font-size: clamp(12px, 11cqi, 18px) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .stat-grid-dash .stat-value-lg {
    font-size: clamp(13px, 13cqi, 22px) !important;
  }
  .stat-grid-dash .stat-sub {
    font-size: 10px !important;
    line-height: 1.2;
  }
  .stat-grid-dash .stat-spark { display: none; }
}
/* Extra-narrow (<400px) — menší fonts pro 4-col layout */
@media (max-width: 400px) {
  .stat-grid-dash .stat-label {
    font-size: 9px !important;
  }
  .stat-grid-dash .stat-value-lg {
    font-size: clamp(11px, 13cqi, 16px) !important;
  }
}

.stat-label { font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.stat-value { font-size: 24px; font-weight: 600; }
.stat-value.warn { color: var(--danger-text); }
.stat-value.good { color: var(--success-text); }

/* CARDS */
.card-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; }
.card-block h3 { font-size: 15px; font-weight: 500; margin-bottom: 14px; color: var(--text); }
.card-block .empty-state { text-align: center; padding: 32px; color: var(--text-3); font-size: 14px; }

/* TABULKY */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 10px 12px; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.table th.num { text-align: right; }
.table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; transition: background 0.1s; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: none; }
/* Zebra řádkování — každý sudý řádek lehce šedý */
.table tbody tr:nth-child(even) td { background: #F7F8FA; }
/* Hover - výraznější, přebíjí zebru */
.table tbody tr:hover td { background: var(--primary-light) !important; }
.row-clickable { cursor: pointer; }
.table .actions { white-space: nowrap; }
.table .actions button, .table .actions a { margin-left: 4px; }

/* STATUSES */
.status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.status.nova { background: var(--info-bg); color: var(--info-text); }
.status.potvrzena, .status.ve_vyrobe, .status.pripravena { background: var(--primary-light); color: var(--primary-dark); }
.status.dorucena { background: var(--success-bg); color: var(--success-text); }
.status.expedovana { background: var(--info-bg); color: var(--info-text); }
.status.zrusena { background: var(--danger-bg); color: var(--danger-text); }

/* FILTERS */
.filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-input, .filter-select { padding: 8px 12px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; -webkit-appearance: none; appearance: none; box-sizing: border-box; }

/* Wrapper pro Od/Do datumy — vždy 2 sloupce vedle sebe */
.filter-dates-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.filter-dates-row .filter-date-wrap {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.filter-input:focus, .filter-select:focus { outline: none; border-color: var(--primary); }
.filter-input { min-width: 200px; }
.filter-input[type="date"] { color: var(--text); min-height: 36px; }
.filter-date-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: 13px;
  color: var(--text-3);
}
.filter-date-wrap > span {
  font-weight: 500;
  white-space: nowrap;
}
.filter-date-wrap .filter-input {
  border: none;
  background: transparent;
  padding: 8px 4px;
  min-width: 0;
}

/* FORMS */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.form-grid .full { grid-column: 1 / -1; }

/* Tight form-grid: drží 2 sloupce i na mobilu (krátká pole jako IČO/DIČ, Město/PSČ, Hodina/Dni) */
.form-grid-tight { gap: 10px 12px; }

/* Nastavení page: párová sekce — 2 karty vedle sebe na desktopu */
.nastaveni-row {
  display: grid;
  grid-template-columns: 1fr 1fr;          /* výchozí 2 sloupce (Firma, Notifikace, Přístupy…) */
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}
.nastaveni-row > .card-block,
.nastaveni-row > .ns-stack { margin-bottom: 0; height: 100%; display: flex; flex-direction: column; }
.nastaveni-row > .ns-stack > .card-block { height: auto; }

/* Modifier: 3 sloupce — explicitně pro řady kde chceme 3 col (Výroba) */
.nastaveni-row-3col {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Responsive collapse */
@media (max-width: 1100px) {
  .nastaveni-row-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nastaveni-row,
  .nastaveni-row-3col { grid-template-columns: 1fr; }
}

/* 🆕 v2.9.220 — Údržba: 2/3-sloupcový adaptive grid */
.udrzba-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
.udrzba-grid .ug-col { margin: 0; }
.udrzba-grid .ug-wide { grid-column: span 3; }  /* full width na desktopu */
@media (max-width: 1280px) {
  .udrzba-grid { grid-template-columns: repeat(2, 1fr); }
  .udrzba-grid .ug-wide { grid-column: span 2; }
}
@media (max-width: 820px) {
  .udrzba-grid { grid-template-columns: 1fr; }
  .udrzba-grid .ug-wide { grid-column: span 1; }
}

/* 🗂️ Záložky Nastavení — kompletní pravidla přesunuty do unified
   .seg-tabs/.period-tabs/.nastaveni-tabs blok níže (v2.9.244, používá CSS tokens).
   Zde zůstává jen animace + content fade-in. */
.nastaveni-tab-content {
  animation: nastaveniTabIn 0.18s ease-out;
}
@keyframes nastaveniTabIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 🆕 v2.9.244 — FILTER TABS — UNIFIED design (DRY tokens v :root)
   Aplikuje se na všechny filter use-cases:
   .seg-tabs / .vyroba-subtabs / .period-tabs / .nastaveni-tabs
   Pravidla:
   - NIKDY nezalamovat text (white-space: nowrap)
   - Vždy škálovat fonts přes clamp() (větší PC → menší mobile)
   - Container má overflow-x: auto (scroll fallback pokud nevejdou)
   - Buttons flex: 1 1 0 + min-width: token (rovnoměrná distribuce)
   - flex-shrink: 0 na text/icon (nestlačit jednotlivé prvky pod 0)
   - text-overflow: ellipsis (safety pro extrémně dlouhé labely)
   - Themes: default/dark/apple respektují tokens; Win98 má vlastní override.
*/
.vyroba-subtabs, .seg-tabs, .period-tabs, .nastaveni-tabs {
  display: flex;
  gap: var(--filter-container-gap);
  margin-bottom: 20px;
  padding: var(--filter-container-pad);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border-radius: var(--filter-container-radius);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  box-sizing: border-box;
  max-width: 100%;
}
.vyroba-subtab, .seg-tab, .period-tab, .nastaveni-tab {
  flex: 1 1 0;
  min-width: var(--filter-tab-min-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--filter-tab-gap);
  padding: var(--filter-tab-pad-y) var(--filter-tab-pad-x);
  background: transparent;
  border: 0;
  border-radius: var(--filter-tab-radius);
  font-family: inherit;
  font-size: var(--filter-text-size);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  white-space: nowrap;             /* NIKDY nezalamovat */
  overflow: hidden;
  text-overflow: ellipsis;          /* safety pro dlouhé labely */
  text-align: center;
  scroll-snap-align: start;
  position: relative;
  box-sizing: border-box;
}
.vyroba-subtab-icon, .seg-tab-icon, .period-tab-icon {
  font-size: var(--filter-icon-size);
  line-height: 1;
  display: block;
  flex-shrink: 0;
  filter: grayscale(0.15);
  transition: filter 0.18s ease, transform 0.18s ease;
}
.vyroba-subtab-text, .seg-tab-text, .period-tab-text {
  font-size: var(--filter-text-size);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.vyroba-subtab:hover:not(.active),
.seg-tab:hover:not(.active),
.period-tab:hover:not(.active),
.nastaveni-tab:hover:not(.active) {
  background: var(--filter-hover-bg);
  color: var(--text);
}
.vyroba-subtab:hover:not(.active) .vyroba-subtab-icon,
.seg-tab:hover:not(.active) .seg-tab-icon,
.period-tab:hover:not(.active) .period-tab-icon {
  filter: grayscale(0);
  transform: scale(1.05);
}
.vyroba-subtab.active, .seg-tab.active, .period-tab.active, .nastaveni-tab.active {
  background: var(--filter-active-bg);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--filter-active-shadow);
}
.vyroba-subtab.active .vyroba-subtab-icon,
.seg-tab.active .seg-tab-icon,
.period-tab.active .period-tab-icon {
  filter: grayscale(0) brightness(1.05);
  transform: scale(1.08);
}
.vyroba-subtab:focus-visible,
.seg-tab:focus-visible,
.period-tab:focus-visible,
.nastaveni-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Dark theme — respektuje tokens, jen barvy pozadí jemně override */
html.dark .vyroba-subtabs, html.theme-dark .vyroba-subtabs,
html.dark .seg-tabs, html.theme-dark .seg-tabs,
html.dark .period-tabs, html.theme-dark .period-tabs,
html.dark .nastaveni-tabs, html.theme-dark .nastaveni-tabs {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border-color: rgba(255,255,255,0.08);
}
html.dark .vyroba-subtab, html.theme-dark .vyroba-subtab,
html.dark .seg-tab, html.theme-dark .seg-tab,
html.dark .period-tab, html.theme-dark .period-tab,
html.dark .nastaveni-tab, html.theme-dark .nastaveni-tab { color: var(--text-2); }
html.dark .vyroba-subtab.active, html.theme-dark .vyroba-subtab.active,
html.dark .seg-tab.active, html.theme-dark .seg-tab.active,
html.dark .period-tab.active, html.theme-dark .period-tab.active,
html.dark .nastaveni-tab.active, html.theme-dark .nastaveni-tab.active { color: #fff; }
/* Apple theme — jemné akcenty, ale stejný layout */
html.theme-apple .vyroba-subtabs,
html.theme-apple .seg-tabs,
html.theme-apple .period-tabs,
html.theme-apple .nastaveni-tabs {
  border-radius: var(--filter-container-radius);
}
/* Win98 theme — vlastní hardcoded design (user request: nech jak jsou).
   Win98 overrides v admin.css níže (řádek 8487+) zachovány beze změny. */
.form-label { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border-2);
  border-radius: var(--radius-md); background: var(--surface); font-size: 14px;
  transition: all 0.15s;
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--primary-border); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.12); }
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.4; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); flex-wrap: wrap; align-items: center; }
/* Skupina pomocných tlačítek (PDF, ISDOC, Tisk, Znovu objednat…) — desktop: rozplynou se inline */
.form-actions-tools { display: contents; }
.checkbox-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.checkbox-row label { cursor: pointer; }

/* Section header v modalu - jednotný styl */
.modal-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.modal-section-title:first-child { margin-top: 0; }

/* Tabové menu uvnitř modalu */
.modal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1.5px solid var(--border);
  padding: 0;
  flex-wrap: wrap;
}
.modal-tab {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1.5px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.modal-tab:hover { color: var(--text); background: var(--surface-2); border-radius: 6px 6px 0 0; }
.modal-tab.active {
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.modal-tab .badge {
  background: var(--surface-2);
  color: var(--text-3);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.modal-tab.active .badge { background: var(--primary-light); color: var(--primary-dark); }
.modal-tab-right { margin-left: auto; }
@media (max-width: 700px) {
  .modal-tabs {
    flex-wrap: nowrap;          /* nezalomovat na mobilu */
    overflow-x: auto;            /* případně scroll */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* skrýt scrollbar Firefox */
    gap: 2px;
  }
  .modal-tabs::-webkit-scrollbar { display: none; } /* skrýt scrollbar Webkit */
  .modal-tab {
    padding: 9px 10px;
    font-size: 12px;
    gap: 4px;
    flex: 1 1 auto;              /* rovnoměrně rozdělit místo */
    justify-content: center;
    white-space: nowrap;
  }
  .modal-tab .badge {
    padding: 1px 5px;
    font-size: 10px;
  }
  .modal-tab-right { margin-left: 0; }
}
.modal-tab-pane { display: none; }
.modal-tab-pane.active { display: block; }

/* Stat box uvnitř modalu */
.modal-stats-box {
  background: var(--surface-2);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.modal-stats-box > div { min-width: 100px; }
.modal-stats-box .stat-key { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.modal-stats-box .stat-val { font-size: 20px; font-weight: 600; color: var(--text); }

/* DETAIL ROW */
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--border); }
.detail-row:last-child { border-bottom: none; }
.detail-row .label { color: var(--text-3); }
.detail-row .num { font-variant-numeric: tabular-nums; }

/* MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  max-width: 980px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.modal-card.modal-wide { max-width: 1300px; }
.modal-card.modal-wide .modal-body { padding: 32px 40px; font-size: 15px; }
.modal-card.modal-wide h3 { font-size: 17px; margin: 24px 0 12px; }
.modal-card.modal-wide label > span:first-child { font-size: 13px; font-weight: 500; }
.modal-card.modal-wide .input { padding: 12px 16px; font-size: 15px; }
.modal-card.modal-wide select.input { padding: 11px 14px; font-size: 15px; }
.modal-card.modal-wide .table th { padding: 12px 14px; font-size: 13px; }
.modal-card.modal-wide .table td { padding: 14px; font-size: 15px; }
.modal-card.modal-wide .table input.input,
.modal-card.modal-wide .table select.input { padding: 8px 10px !important; font-size: 14px !important; }
.modal-card.modal-wide .form-actions { padding-top: 20px; }
.modal-card.modal-wide .form-actions button { padding: 12px 24px; font-size: 15px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 18px; font-weight: 600; }
.modal-close {
  font-size: 0;             /* schová HTML obsah "×" — nahradíme ho přes ::before kvůli přesnému centrování */
  color: var(--text-2);
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--surface-2);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  line-height: 1;
}
.modal-close::before {
  content: '×';
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  display: block;
  /* × glyph rendrují prohlížeče typicky ~1px nad opticky střed → posuneme dolů */
  transform: translateY(1px);
}
.modal-close:hover {
  color: var(--text);
  background: var(--border);
  transform: scale(1.05);
}
.modal-close:active {
  transform: scale(0.95);
}
.modal-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.30);
}
.modal-body { padding: 24px 28px; overflow-y: auto; }

/* IMAGE UPLOAD */
.image-upload { display: flex; gap: 14px; align-items: flex-start; }
.image-preview { width: 180px; height: 180px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px dashed var(--border-2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-preview-empty { color: var(--text-3); font-size: 48px; }
.image-upload-controls { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.image-upload-controls input[type="file"] { font-size: 12px; width: 100%; }
.image-upload-controls .btn-secondary { align-self: flex-start; width: auto; }
.image-upload-hint { font-size: 12px; color: var(--text-3); }
@media (max-width: 700px) {
  .image-preview { width: 130px; height: 130px; }
  .image-preview-empty { font-size: 36px; }
}

/* POBOČKY */
.pobocky-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.pobocky-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pobocky-count {
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 999px;
}
.pobocky-sub {
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
  line-height: 1.5;
  max-width: 540px;
}
.pobocky-head .btn-primary {
  padding: 10px 18px;
  font-size: 14px;
}

.pobocky-empty {
  background: var(--surface-2);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 56px 24px;
  text-align: center;
}
.pobocky-empty-icon { font-size: 44px; margin-bottom: 14px; opacity: 0.35; }
.pobocky-empty-title { font-size: 16px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.pobocky-empty-sub { font-size: 14px; color: var(--text-3); }

.pobocky-list { display: flex; flex-direction: column; gap: 12px; }

.pobocka-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px 22px;
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pobocka-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.pobocka-card.is-default {
  background: #FFFAF1;
  border-color: #E8C988;
  border-left: 4px solid var(--primary);
  padding-left: 21px;
}
.pobocka-card.is-inactive {
  opacity: 0.55;
  background: var(--surface-2);
}

.pobocka-info { flex: 1; min-width: 0; }
.pobocka-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  line-height: 1.3;
}
.pobocka-star {
  color: #D89A30;
  font-size: 18px;
  line-height: 1;
}
.pobocka-pin {
  font-size: 14px;
  opacity: 0.55;
}
.pobocka-name .vychozi-badge {
  background: var(--primary);
  color: white;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.pobocka-name .vychozi-badge.inactive-badge {
  background: var(--text-3);
}

.pobocka-addr {
  font-size: 14px;
  color: var(--text-2);
  margin-top: 4px;
  line-height: 1.45;
}
.pobocka-meta {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
.pobocka-card.is-default .pobocka-meta { border-top-color: #E8C988; }
.pobocka-meta > span,
.pobocka-meta > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pobocka-link {
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.15s, border-color 0.15s;
}
.pobocka-link:hover {
  color: var(--primary);
  border-bottom-color: currentColor;
}

.pobocka-pokyny {
  margin-top: 10px;
  padding: 9px 12px;
  background: #FFF8E5;
  border-left: 3px solid #E8B547;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #6B4A0A;
}
.pobocka-pokyny-label {
  font-weight: 600;
  margin-right: 6px;
  color: #8B5A0F;
}
.pobocka-pokyny-text {
  white-space: pre-wrap;
}

.pobocka-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.pobocka-actions button {
  padding: 8px 14px;
  font-size: 13px;
  min-height: 36px;
}
.pobocka-actions .btn-icon-only {
  padding: 8px 11px;
  width: 38px;
}

@media (max-width: 700px) {
  .pobocky-head {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
  }
  .pobocky-head .btn-primary { align-self: stretch; }
  .pobocka-card {
    flex-direction: column;
    padding: 16px 18px;
    gap: 14px;
  }
  .pobocka-card.is-default { padding-left: 17px; }
  .pobocka-actions {
    width: 100%;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
    justify-content: flex-end;
  }
  .pobocka-card.is-default .pobocka-actions { border-top-color: #E8C988; }
}

/* POBOČKY + PŘÍSTUP — dvousloupcové uspořádání v detailu odběratele */
.pobocky-pristup-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  align-items: start;
}
.pobocky-col, .pristup-col {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.pristup-col {
  background: #EFF6FF;
  border-color: #B5D4F4;
}
.pp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.pp-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.pp-section-sub {
  font-size: 12px;
  color: var(--text-3);
  margin: 2px 0 0;
}
@media (max-width: 900px) {
  .pobocky-pristup-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* VÝROBNÍ LIST */
.vyroba-mode-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-md); margin-bottom: 20px; max-width: 500px; }
.vyroba-mode-tab { flex: 1; padding: 10px; font-size: 13px; color: var(--text-2); border-radius: var(--radius-sm); font-weight: 500; }
.vyroba-mode-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* =========================================================
   KALENDÁŘ VÝROBY — měsíční přehled s heatmapou
   ========================================================= */
.vy-kalendar { margin-bottom: 14px; }
.vy-kal-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.vy-kal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.vy-kal-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: var(--text);
}
.vy-kal-title strong { color: #BA7517; text-transform: capitalize; }
.vy-kal-nav {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-dark);
}
.vy-kal-nav:hover { background: var(--primary-light); border-color: var(--primary); }

.vy-kal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.vy-kal-dayhead {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 0;
}
.vy-kal-dayhead.weekend { color: #c95c5c; }

.vy-kal-cell {
  aspect-ratio: 1 / 1;
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  font-family: inherit;
  transition: all 0.12s;
  position: relative;
  overflow: hidden;
}
/* 🆕 v3.0.77 — Kompaktní kalendář na desktopu (user: "kalendář daleko menší, kompaktnější")
   Cells max ~70-90px, font menší, vy-kal-card má max-width aby nepřeval celou stránku */
@media (min-width: 1024px) {
  .vy-kal-card {
    max-width: 720px !important;        /* nepřevít celou obrazovku */
    margin: 0 auto !important;
  }
  .vy-kal-cell {
    aspect-ratio: auto !important;
    min-height: 50px !important;
    max-height: 70px !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
  }
  .vy-kal-day-num { font-size: 12px !important; }
  .vy-kal-dayhead { font-size: 10px !important; padding: 3px 0 !important; }
  .vy-kal-grid { gap: 2px !important; }
  .vy-kal-cell .vy-kal-info,
  .vy-kal-cell > div:not(.vy-kal-day-num) {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}
.vy-kal-cell.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}
.vy-kal-cell.weekend { background: #F7F8FA; }
.vy-kal-cell.has-orders {
  background: rgba(186, 117, 23, var(--vy-kal-heat, 0.2));
  border-color: rgba(186, 117, 23, 0.4);
}
.vy-kal-cell.has-orders.weekend {
  background: rgba(186, 117, 23, var(--vy-kal-heat, 0.2));
}
.vy-kal-cell.today {
  border: 2px solid #1E3A8A;
  font-weight: 600;
}
.vy-kal-cell.selected {
  outline: 3px solid #22863a;
  outline-offset: -3px;
  z-index: 1;
}
.vy-kal-cell:hover:not(.empty) {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.vy-kal-day-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1;
}
.vy-kal-cell.weekend .vy-kal-day-num { color: #c95c5c; }
.vy-kal-day-stats {
  margin-top: auto;
  font-size: 9px;
  line-height: 1.2;
}
.vy-kal-day-mn {
  font-size: 12px;
  font-weight: 700;
  color: #854F0B;
  white-space: nowrap;
}
.vy-kal-day-obj {
  font-size: 9px;
  color: #854F0B;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vy-kal-day-empty {
  margin-top: auto;
  font-size: 14px;
  color: var(--text-3);
  text-align: center;
  opacity: 0.4;
}

.vy-kal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text-3);
}
.vy-kal-legenda-item { display: inline-flex; align-items: center; gap: 4px; }
.vy-kal-cell-mini {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  vertical-align: middle;
}
.vy-kal-cell-mini.today { border: 2px solid #1E3A8A; }
.vy-kal-cell-mini.selected { outline: 2px solid #22863a; outline-offset: -2px; }
.vy-kal-cell-mini.has-orders { background: rgba(186, 117, 23, 0.4); border-color: rgba(186, 117, 23, 0.4); }

@media (max-width: 700px) {
  .vy-kal-card { padding: 10px; }
  .vy-kal-title { font-size: 14px; }
  .vy-kal-grid { gap: 2px; }
  .vy-kal-cell { min-height: 48px; padding: 3px; }
  .vy-kal-day-num { font-size: 11px; }
  .vy-kal-day-mn { font-size: 10px; }
  .vy-kal-day-obj { display: none; }
  .vy-kal-dayhead { font-size: 9px; padding: 4px 0; }
  .vy-kal-legenda { font-size: 10px; gap: 8px; }
}

.vyroba-kat-block { margin-bottom: 14px; }
.vyroba-kat-block:last-child { margin-bottom: 0; }
.vyroba-kat-head {
  background: #F7F8FA;
  border-left: 4px solid #BA7517;
  padding: 8px 14px;
  margin: 12px 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: #854F0B;
  border-radius: 0 6px 6px 0;
}
.vyroba-souhrn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
}
.vyroba-ikona {
  font-size: 22px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vyroba-info { flex: 1; min-width: 0; }
.vyroba-name { font-weight: 500; }
.vyroba-cislo { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.vyroba-mnozstvi {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .vyroba-souhrn-row { padding: 8px 10px; gap: 8px; }
  .vyroba-ikona { font-size: 18px; width: 28px; height: 28px; }
  .vyroba-name { font-size: 13px; }
  .vyroba-cislo { font-size: 10px; }
  .vyroba-mnozstvi { font-size: 15px; }
}

.pobocka-rozpis { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 8px; }
.pobocka-rozpis-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.pobocka-rozpis-name { font-weight: 600; }
.pobocka-rozpis-misto { font-size: 13px; color: var(--primary-dark); margin-top: 2px; }
.pobocka-rozpis-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.pobocka-rozpis-cas { background: var(--primary-light); color: var(--primary-dark); padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500; }
.pobocka-rozpis-polozky { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.pobocka-rozpis-pol { font-size: 13px; display: flex; justify-content: space-between; padding: 2px 0; }
.pobocka-rozpis-pol-mn { font-weight: 500; color: var(--primary-dark); }

/* =========================================================
   MOBILE — admin (sidebar → bottom navigation, tabulky → karty)
   ========================================================= */
@media (max-width: 900px) {
  .admin-app { grid-template-columns: 1fr; }
  .form-grid:not(.form-grid-tight) { grid-template-columns: 1fr; }
  /* form-grid-tight zůstává 2 sloupce i na mobilu (krátká pole vedle sebe) */
  .form-grid-tight { gap: 8px 10px; grid-template-columns: 1fr 1fr !important; }
  /* Modal: vstupy nikdy nepřetékají kontejner */
  .modal-card .form-input,
  .modal-card .form-select,
  .modal-card input,
  .modal-card select,
  .modal-card textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Date inputs na mobilu: kompaktní */
  .modal-card input[type="date"] {
    font-size: 12px;
    padding: 6px 4px;
  }
  .main-content { padding: 16px; }
}
@media (max-width: 700px) {
  /* Na nejmenších displejích: 3-sloupcový form-grid-tight → 2 sloupce
     (stejná pole jako VS, datum, stav atd. zůstanou párově) */
  .form-grid-tight[style*="grid-template-columns:1fr 1fr 1fr"],
  .form-grid-tight[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Date inputy ještě menší */
  .modal-card input[type="date"] { font-size: 11px; padding: 5px 4px; }
}

@media (max-width: 700px) {
  /* 📱 MOBIL: pořadí = TOPBAR (sticky nahoře) → SIDEBAR (nav tiles) → CONTENT
     Topbar s B2B/fullscreen/logout buttons je vždy viditelný nahoře. */
  .admin-app {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  .main-wrap {
    display: contents;          /* main-wrap box se rozpustí, jeho děti (topbar + main-content) se stanou flex children .admin-app */
  }
  .topbar {
    order: 1;                   /* PRVNÍ — nad sidebar */
    position: sticky;
    top: 0;
    z-index: 110;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .sidebar {
    order: 2;                   /* DRUHÉ — pod topbar */
    position: static;            /* už není sticky — odscrolluje s contentem (topbar zůstává sticky nahoře) */
    height: auto;
    flex-direction: column;
    padding: 8px 12px;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .sidebar-logo {
    padding: 8px 4px;
    margin-bottom: 0;
    border-bottom: none;
    justify-content: space-between;  /* brand vlevo, datum pill vpravo */
    gap: 8px;
  }
  .sidebar-logo strong { font-size: 14px; }
  .sidebar-logo .logo-icon { width: 32px; height: 32px; font-size: 14px; }
  /* Datum-svátek pill přesunutý do sidebar-logo na mobilu — datum nad svátkem */
  .sidebar-logo .topbar-datum-svatek {
    margin-left: auto;
    padding: 4px 10px;
    max-width: none;         /* 🆕 v3.0.114 — bez maxu, jméno se vždy vejde (Vilém/Valdemar/Vlastimír) */
    width: auto;
    flex-shrink: 0;
    /* 🆕 v3.0.119 — Override base overflow:hidden + ellipsis (line 768) — JINAK truncate "Max..." */
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: right;
    border-radius: 10px;
  }
  .sidebar-logo .topbar-datum-svatek .dt-sep { display: none; }
  .sidebar-logo .topbar-datum-svatek::before { display: none; }

  /* Velikosti jednotlivých částí — datum dominantní */
  .sidebar-logo .topbar-datum-svatek .dt-den {
    font-size: 8.5px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
  }
  .sidebar-logo .topbar-datum-svatek .dt-datum {
    font-size: 12.5px;
    font-weight: 700;
    color: #5C3608;
  }
  /* 🆕 v3.0.59 — Svátek MUSÍ být vidět (vyšší specifita než 18831 override).
     User: "v adminu nevidim svatek jmeno" — root cause: 10px font + low contrast. */
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek .dt-line-svatek,
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek .ts-svatek {
    font-size: 12px !important;
    opacity: 1 !important;
    color: #5C3608 !important;
    display: block !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    overflow: visible !important;          /* 🆕 v3.0.71 — žádný ellipsis na "Valdemar" */
    text-overflow: clip !important;
    max-width: none !important;
  }
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek .dt-svatek-name,
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek .ts-svatek strong {
    font-weight: 800 !important;
    color: #5C3608 !important;
    font-size: 12px !important;
  }

  /* Navigace: 3 sloupce v gridu — všechny položky viditelné */
  .sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    flex: none;
    padding: 8px 0;
    margin: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }
  .nav-item {
    flex: none;
    width: 100%;
    padding: 10px 2px;          /* minimální boční padding aby se text vešel */
    font-size: 14px;            /* zvětšeno z 13px */
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    border-radius: 10px;
    white-space: nowrap;        /* nikdy nezalamovat na 2 řádky */
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
  }
  .nav-icon { font-size: 20px; width: auto; }
  /* Velmi úzký mobil (≤ 380px): zmenši font aby se delší slova vlezla */
  @media (max-width: 380px) {
    .nav-item { font-size: 12px; padding: 8px 1px; }
    .nav-icon { font-size: 18px; }
  }

  /* Topbar — vše v jedné řadě na mobilu (nikdy nezalomit) */
  .topbar {
    padding: 8px 10px;
    gap: 6px;
    position: static;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .topbar-user {
    flex-direction: row;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
    flex-shrink: 1;
    min-width: 0;
  }
  .topbar-user-greet { display: none; }
  .topbar-user-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
  }
  .topbar-sep { display: none; }
  .topbar-actions {
    gap: 12px;           /* ~3mm mezi ikonami */
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  /* Online prodejna — na mobilu jen ikona + krátký label "B2B" */
  .btn-prodejna { padding: 7px 12px; font-size: 14px; gap: 8px; }
  .btn-prodejna-label { display: none; }
  .btn-prodejna-label-short { display: inline; font-weight: 800; letter-spacing: 0.6px; font-size: 14px; }
  .btn-prodejna-arrow { display: none; }
  .btn-prodejna-icon { font-size: 16px; }
  .btn-logout-label { display: none; }
  .btn-logout { padding: 7px 9px; }
  .btn-fs-label { display: none; }
  .btn-fullscreen { padding: 7px 9px; }
  /* Role badge menší */
  .topbar-user .role-badge { font-size: 9px; padding: 2px 5px; }

  /* Hlavní obsah */
  .main-content {
    order: 3;                    /* po topbar a sidebar */
    padding: 12px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* 🆕 v2.9.236 — GLOBÁLNÍ MOBILE SAFETY NET: nikdy nepřetékej viewport */
  #content,
  #content * {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Tabulky / containery které mají overflow-x: auto nesmějí mít max-width fixed */
  #content table.table {
    max-width: 100%;
    table-layout: auto;
  }
  /* Long text → break-word, žádný horizontal scroll */
  #content p, #content span, #content div, #content td, #content h1, #content h2, #content h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  /* Image / canvas / iframe nepřetékat */
  #content img, #content canvas, #content iframe, #content svg, #content video {
    max-width: 100%;
    height: auto;
  }

  /* Page heading menší */
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
  }
  .page-head > * { width: 100%; max-width: 100%; }
  .page-head h1, .page-head .page-title { font-size: 20px; }
  /* 🆕 v2.9.259 — Mobile page-head sekundární kontejner = 3-col grid
     (Tisk/Export/Import + Rozvozy atd. — 3 v řadě, primary 'Nový X' pod tím) */
  .page-head > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100%;
  }
  .page-head .btn-primary,
  .page-head .btn-primary.btn-green {
    grid-column: 1 / -1 !important;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    color: white !important;
    font-size: 15px;
    padding: 14px 16px;
    display: block;
    margin-top: 4px;
  }
  .page-head .btn-secondary,
  .page-head .btn-icon-action {
    flex: none;
    width: auto;
    min-width: 0;
    font-size: 13px;
    padding: 10px 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .page-head .btn-icon-action .btn-icon-action-lbl {
    font-size: 11px;
  }

  /* Stat grid (Dashboard, Faktury, Objednávky souhrn) */
  .stat-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    width: 100%;
    max-width: 100%;
  }
  /* 🆕 v3.0.129 — Dashboard mobile: 2×2 grid (user: "na mobilu do 2").
     Předtím v2.9.243: 75/25 + 50/50 (Tržby span 3). Nyní všechny span 1
     v 2-column gridu → Row 1: [Tržby][Dnes]  Row 2: [Obj][Splat]. */
  .stat-grid-dash {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-grid-dash .stat-card-trzby { grid-column: span 1 !important; }
  .stat-grid-dash .stat-card-dnes  { grid-column: span 1 !important; }
  .stat-grid-dash .stat-card-obj   { grid-column: span 1 !important; }
  .stat-grid-dash .stat-card-splat { grid-column: span 1 !important; }
  .stat-grid-dash .stat-card-wide  { grid-column: span 1 !important; }
  .stat-card {
    padding: 12px;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  .stat-card .stat-label,
  .stat-card .label { font-size: 11px; }
  .stat-card .stat-value,
  .stat-card .value {
    font-size: clamp(13px, 3.8vw, 18px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 🆕 v2.9.236 — stat-value-lg na mobile clamp (Tržby card) */
  .stat-card .stat-value.stat-value-lg,
  .stat-card .stat-value-lg {
    font-size: clamp(18px, 5.5vw, 26px) !important;
  }

  /* Filtry — důležité aby se nepřetekly */
  .filters {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .filters .filter-input,
  .filters .filter-select,
  .filters input,
  .filters select,
  .filters .filter-date-wrap,
  .filters .btn-secondary,
  .filters .btn-primary {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }

  /* TABULKY → karty na mobilu */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td {
    display: block;
    width: 100%;
  }
  .table tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 12px;
  }
  .table tbody tr:nth-child(even) td { background: transparent; }
  .table tbody tr:hover td { background: transparent !important; }
  .table td {
    padding: 4px 0;
    border-bottom: none;
    font-size: 13px;
    text-align: left;
  }
  .table td.num { text-align: left; }
  /* Label před hodnotou (data-label) */
  .table td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
    margin-bottom: 2px;
  }
  /* Buňka bez labelu (akce, tlačítka) — bez "label" hlavičky */
  .table td.td-action::before {
    display: none;
  }
  .table td.td-action {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
  }
  /* Pokud je td-action první nebo druhá buňka v kartě (checkbox sloupec) — bez border-top */
  .table td.td-action:first-child,
  .table td.col-check {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    /* Checkbox umisti vpravo nahoru jako badge */
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto;
    margin: 0;
    padding: 0;
  }
  /* Karta řádku potřebuje position:relative aby checkbox plaval */
  .table tbody tr { position: relative; }
  .table td.td-action a,
  .table td.td-action button {
    display: inline-block;
    margin: 2px 4px 2px 0;
  }
  /* První viditelná buňka (po checkboxu) — výrazná, jako titulek karty */
  .table td:first-child,
  .table td.col-check + td {
    padding-top: 0;
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .table td.col-check { padding-bottom: 0; border-bottom: none; }
  .table td:last-child { padding-bottom: 0; }
  /* Inline form-input v buňkách (např. Graf select v HACCP) — natáhni na celou šířku */
  .table td .form-input,
  .table td select,
  .table td input[type="text"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Cards / panels */
  .card-block {
    padding: 14px;
    margin-bottom: 12px;
  }

  /* 🆕 v2.9.261 — Modal: bottom sheet na mobilu, kompaktní padding (max obsah) */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-card {
    border-radius: 16px 16px 0 0;
    max-height: 95vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;                       /* žádný outer padding — head/body řeší vlastní */
    max-width: 100% !important;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  .modal-card.wide,
  .modal-card.modal-card-wide,
  .modal-card.modal-wide {
    max-width: 100% !important;
  }
  /* Head — kompaktní mobile padding */
  .modal-head {
    padding: 12px 14px !important;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 10;
  }
  .modal-head h2,
  .modal-head h3 { font-size: 16px; }
  /* Body — kompaktní mobile padding (víc místa pro obsah) */
  .modal-body,
  .modal-card.modal-wide .modal-body {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  .modal-close {
    width: 44px;                      /* WCAG 2.1 AA min tap target */
    height: 44px;
    font-size: 0;
  }
  .modal-close::before { font-size: 28px; }

  /* Form actions: tlačítka pod sebou */
  .form-actions {
    flex-direction: column-reverse;
    gap: 8px;
    align-items: stretch;
  }
  .form-actions > div[style*="flex:1"] { display: none; }
  .form-actions > * {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Tools skupina (PDF / ISDOC / Tisk / Znovu objednat) — 2 sloupečky */
  .form-actions-tools {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .form-actions-tools > * {
    width: 100% !important;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Detail řádky */
  .detail-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .detail-row .label { font-size: 12px; flex: 1; }
  .detail-row .num { font-weight: 600; }

  /* Modal stats box: stat boxy nahoře 2 sloupce, tlačítka pod nimi pod sebou */
  .modal-stats-box {
    flex-direction: column;
    gap: 12px !important;
    padding: 12px 14px !important;
  }
  .modal-stats-box > div:not([style*="flex:1"]) {
    min-width: 0;
    flex: 1;
  }
  /* Stat boxy ve dvou sloupcích vedle sebe (Objednávek + Tržba) */
  .modal-stats-box {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* Wrapper s tlačítky → přes celou šířku, vedle sebe */
  .modal-stats-box > div[style*="flex:1"] {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: stretch !important;
    flex-direction: row;
    gap: 6px !important;
  }
  .modal-stats-box > div[style*="flex:1"] button {
    flex: 1;
    font-size: 12px;
    padding: 8px 10px;
    white-space: normal;
    line-height: 1.2;
    min-height: 40px;
  }
  .modal-stats-box .stat-key { font-size: 10px !important; }
  .modal-stats-box .stat-val { font-size: 17px !important; }

  /* Položky objednávky/faktury - menší inputy */
  .table input[type="number"] { width: 60px !important; font-size: 13px; }

  /* Velikost tlačítek pro prst */
  .btn-primary, .btn-secondary, .btn-danger {
    min-height: 38px;
    padding: 8px 14px;
  }

  /* Cílové tlačítka (slevové skupiny) */
  .cilove-tlacitko {
    padding: 12px 8px;
  }

  /* Amber/totální boxy v modálech: na mobilu menší font */
  .modal-card div[style*="background:#FAEEDA"] [style*="font-size:22px"],
  .modal-card div[style*="background:#FAEEDA"] [style*="font-size:18px"] {
    font-size: 17px !important;
  }
  .modal-card div[style*="background:#FAEEDA"] {
    padding: 12px 14px !important;
  }

  /* Status badge ve sloupcích nesmí přerušit layout */
  .status {
    white-space: nowrap;
    display: inline-block;
  }

  /* Doc badges na mobilu: nemají vyskakovat ze sloupce */
  /* Doc badges na mobilu: výrazně větší — touch-friendly */
  .doc-badges-row { flex-wrap: wrap; gap: 6px; }
  .doc-badge {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .doc-badge + .doc-badge { margin-left: 0; }

  /* DL/FA karty na mobilu: 2 tlačítka vedle sebe */
  .dl-card-actions,
  .faktura-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
  }
  .dl-card-actions .doc-badges-row,
  .faktura-card-actions .doc-badges-row {
    display: contents;
  }

  /* Zdroj badges (OBJ/DL/FA/Ruční) — stejný layout jako spodní actions,
     aby texty „OBJ-2026", „Dodací list", „Faktura" i „Ruční" byly zarovnané */
  .faktura-card-zdroj > .doc-badges-row {
    display: contents;       /* inner wrapper se "rozplyne", badges jsou přímými dětmi */
  }
  .dl-card-zdroj,
  .faktura-card-zdroj {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 4px;
    width: 100%;
  }
  .dl-card-zdroj > .doc-badge,
  .faktura-card-zdroj .doc-badge {
    flex: 1 1 0;
    min-width: 0;            /* dovolit shrink u dlouhých čísel */
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 8px;
    min-height: 48px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* OBJ karta: 3 tlačítka — DL + FA velké, Znovu kompaktní s viditelným odsazením */
  .obj-card-doklady {
    display: grid !important;
    grid-template-columns: 1fr 1fr 60px;
    column-gap: 16px;
    row-gap: 8px;
    margin-top: 10px;
    padding: 12px 8px 8px;
    border-top: 1px dashed var(--border);
    align-items: center;
  }
  .dl-card-actions .doc-badge,
  .faktura-card-actions .doc-badge,
  .obj-card-doklady .doc-badge:not(.reorder-icon) {
    flex: 1;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    padding: 16px 8px;
    min-height: 52px;
    box-sizing: border-box;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Reorder ikona — 44×44 v 60px sloupci, vystředěná, výrazný okraj */
  .obj-card-doklady .doc-badge.reorder-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
    justify-self: center;
    margin: 0;
    border-width: 2px;
  }

  /* Form-grid: jednosloupcový layout (přebíjí inline grid styles)
     Vyloučení: form-grid-tight zůstává 2 sloupce — krátká pole jako datum/cena */
  .modal-card div[style*="grid-template-columns:1fr 1fr 1fr"]:not(.form-grid-tight),
  .modal-card div[style*="grid-template-columns: 1fr 1fr 1fr"]:not(.form-grid-tight),
  .modal-card div[style*="grid-template-columns:1fr 1fr"]:not(.form-grid-tight),
  .modal-card div[style*="grid-template-columns: 1fr 1fr"]:not(.form-grid-tight) {
    grid-template-columns: 1fr !important;
  }
  /* form-grid-tight 3-sloupcová → 2 sloupce (vejde se VS+datum vedle sebe) */
  .modal-card .form-grid-tight[style*="grid-template-columns:1fr 1fr 1fr"],
  .modal-card .form-grid-tight[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Reorder karty (3 vedle sebe) v Ručních DL/FA/NO */
  .rf-history > div[style*="grid-template-columns:repeat(3"],
  .rf-history > div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Dlouhé tabulky v modálu: scroll horizontálně místo přetečení */
  .modal-card .card-block {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Topbar role badge nesmí blokovat — wrap pokud potřeba */
  .topbar { row-gap: 6px; }
  .topbar-user { font-size: 12px; }

  /* Avatar v users modálu */
  .modal-card div[style*="border-radius:50%"][style*="width:44px"] {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
}

/* iOS safe areas pro admin */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 700px) {
    .main-content {
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
}

/* DOC BADGES — klikatelné odkazy na DL / faktury / objednávky v tabulkách */
.doc-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.4;
  vertical-align: middle;
}
.doc-badge + .doc-badge { margin-left: 4px; }

.doc-badge.dl { background: #FAEEDA; color: #854F0B; border-color: rgba(133, 79, 11, 0.18); }
.doc-badge.fa { background: var(--success-bg); color: var(--success-text); border-color: rgba(39, 80, 10, 0.18); }
.doc-badge.obj { background: #E0EBFF; color: #1E3A8A; border-color: rgba(30, 58, 138, 0.20); }
.doc-badge.rucni { background: #FBE9D9; color: #854F0B; border-color: rgba(133, 79, 11, 0.18); }

/* 🆕 v3.0.55 — Funkční (clickable <a>) badge má víc důrazu, unavailable je tlumený.
   Předtím vypadaly skoro stejně → user nevěděl které funguje. */
a.doc-badge {
  border-width: 2px !important;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.12s ease;
}
a.doc-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  filter: saturate(1.1);
}
a.doc-badge:active { transform: translateY(0); }
a.doc-badge.dl { background: linear-gradient(135deg, #FBE9D9, #FAEEDA); border-color: #BA7517 !important; color: #6B3D0A; }
a.doc-badge.fa { background: linear-gradient(135deg, #D1FAE5, #BBF7D0); border-color: #10B981 !important; color: #064E3B; }
a.doc-badge.obj { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); border-color: #3B82F6 !important; color: #1E3A8A; }
.doc-badge.unavailable {
  opacity: 0.45 !important;
  filter: grayscale(40%);
  font-weight: 500 !important;
  cursor: not-allowed;
}
.doc-badge.reorder {
  background: #EFF6FF;
  color: #1E3A8A;
  border-color: #B5D4F4;
  cursor: pointer;
  font-family: inherit;
}
.doc-badge.reorder:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  border-color: #1E3A8A;
}
/* Reorder jen-ikona — kompaktnější (čtvercová, 30×30) než ostatní badges, ale s viditelným okrajem */
.doc-badge.reorder-icon {
  padding: 0 !important;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  border-width: 1px;
  flex-shrink: 0;
}

a.doc-badge {
  cursor: pointer;
  transition: all 0.12s ease;
}
a.doc-badge:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
a.doc-badge.dl:hover { border-color: #854F0B; }
a.doc-badge.fa:hover { border-color: var(--success-text); }
a.doc-badge.obj:hover { border-color: #1E3A8A; }

/* DOC BADGES uvnitř desktop tabulek — větší a klikatelnější */
.desktop-only-block .doc-badge {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
  border-width: 1.5px;
}
.desktop-only-block .doc-badge.reorder-icon {
  width: 36px;
  height: 36px;
  font-size: 17px;
}
.desktop-only-block .doc-badges-row { gap: 6px; }

/* DOC BADGE — disabled / není k dispozici */
.doc-badge.unavailable {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed;
  opacity: 0.7;
}
.doc-badge.unavailable:hover {
  filter: none;
  transform: none;
  box-shadow: none;
}

/* DOC BADGES jako "tlačítkový pár" — vedle sebe v action sloupcích */
.doc-badges-row {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================
   PRODUCT CARDS — admin (mobile)
   ========================================================= */
/* Default: zobraz desktop, skryj mobile */
.desktop-only-block { display: block; }
.mobile-only-block { display: none !important; }

/* vyrobky-grid je vždy mobile, skryj na desktopu */
.vyrobky-grid {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.kategorie-grid {
  display: none;
}

.vyrobek-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.vyrobek-card:hover { border-color: var(--primary-border); box-shadow: 0 2px 8px rgba(186, 117, 23, 0.08); }
.vyrobek-card.inactive { opacity: 0.55; }
.vyrobek-card.inactive .vyrobek-card-nazev { text-decoration: line-through; }

.vyrobek-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-2) 0%, #fff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vyrobek-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vyrobek-card-emoji {
  font-size: 56px;
  opacity: 0.9;
  line-height: 1;
}
.vyrobek-card-skryt {
  position: absolute;
  top: 6px; right: 6px;
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.vyrobek-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.vyrobek-card-cislo {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.vyrobek-card-nazev {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}
/* Desktop tabulka — větší název výrobku */
.vyrobek-row-name strong {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1px;
}
.vyrobek-card-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  margin-bottom: 4px;
}
.vyrobek-card-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-dark);
  margin-top: auto;
}
.vyrobek-card-price .dph {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 2px;
}

/* Na mobilu: skryj desktop tabulku, ukaž grid */
@media (max-width: 700px) {
  .desktop-only-block { display: none !important; }
  .mobile-only-block { display: block !important; }
  .vyrobky-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .vyrobky-grid.mobile-only-block,
  .kategorie-grid.mobile-only-block { display: grid !important; }
}

/* Velmi malé telefony */
@media (max-width: 380px) {
  .vyrobky-grid { gap: 6px; }
  .vyrobek-card-body { padding: 8px 10px; }
  .vyrobek-card-nazev { font-size: 15px; }
  .vyrobek-card-price { font-size: 15px; }
  .vyrobek-card-emoji { font-size: 44px; }
}

/* =========================================================
   FILTR KATEGORIÍ — výrobky (grid 3 sloupce, vše vidět)
   ========================================================= */
.kat-filter-wrap {
  margin: 0 0 14px;
}
.kat-filter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
/* Mobile: 2 sloupce + víc breathing room na badge */
@media (max-width: 700px) {
  .kat-filter { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kat-btn { min-height: 88px; padding: 12px 28px 12px 10px; }
  .kat-btn-emoji { font-size: 32px; }
  .kat-btn-name { font-size: 13px; }
  .kat-btn-count {
    top: 6px;
    right: 8px;
    font-size: 10px;
    padding: 2px 7px;
    background: rgba(0,0,0,0.12);
  }
  .kat-btn.active .kat-btn-count { background: rgba(255,255,255,0.28); }
}

.kat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-appearance: none;
  appearance: none;
  min-height: 92px;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}
.kat-btn:hover {
  background: var(--surface-2);
  border-color: var(--primary-border);
  transform: translateY(-1px);
}
.kat-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.kat-btn-emoji {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 2px;
}
.kat-btn-name {
  line-height: 1.2;
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
  max-width: 100%;
}
.kat-btn-count {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.10);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-3);
}
.kat-btn.active .kat-btn-count {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* Na desktopu více sloupců (kategorie se vejdou) */
@media (min-width: 900px) {
  .kat-filter {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* =========================================================
   FAKTURA CARDS — admin (mobile)
   ========================================================= */
.faktura-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.faktura-card:hover {
  border-color: var(--primary-border);
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.08);
}
.faktura-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.faktura-card-cislo {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}
.faktura-card-odb {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}
.faktura-card-misto {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.3;
  margin-top: -2px;
}
.faktura-card-zdroj {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.faktura-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.faktura-card-datum {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.3;
}
.faktura-card-castka {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.faktura-card-actions {
  display: flex;
  justify-content: flex-end;
}
.faktura-card-actions .btn-secondary {
  font-size: 13px;
  padding: 8px 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* =========================================================
   ODBERATEL CARDS — admin (mobile)
   ========================================================= */
.odberatel-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
}
.odberatel-card:hover {
  border-color: var(--primary-border);
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.08);
}
.odberatel-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.odberatel-card-title { flex: 1; min-width: 0; }
.odberatel-card-cislo {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
  margin-bottom: 2px;
}
.odberatel-card-nazev {
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
  letter-spacing: 0.1px;
}
@media (max-width: 700px) {
  .odberatel-card-nazev { font-size: 17px; }
}
/* Desktop tabulka — výraznější název odběratele */
.odberatel-row-name strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1px;
  line-height: 1.3;
}
.odberatel-card-adresa {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.3;
}
.odberatel-link {
  color: var(--text-3);
  text-decoration: none;
}
.odberatel-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}
@media (max-width: 700px) {
  .odberatel-link {
    color: var(--primary-dark);
    font-weight: 500;
  }
}
.odberatel-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.odberatel-card-actions .doc-badge {
  width: 100%;
  font-size: 12px;
  padding: 10px 4px;
  min-height: 44px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}

.odberatel-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-2);
}
.odberatel-card-meta > span {
  display: flex;
  align-items: center;
  gap: 4px;
  word-break: break-word;
}

.odberatel-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.odberatel-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}
.odberatel-stat-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.odberatel-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.odberatel-stat-trzba {
  color: var(--primary-dark);
  font-size: 14px;
  white-space: nowrap;
}

/* =========================================================
   USER CARDS — admin (mobile)
   ========================================================= */
.user-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-tap-highlight-color: transparent;
}
.user-card:hover {
  border-color: var(--primary-border);
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.08);
}

.user-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.user-card-title { flex: 1; min-width: 0; }
.user-card-jmeno {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}
.user-card-vy {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-3);
}
.user-card-email {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 2px;
  word-break: break-word;
}

.user-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.user-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.user-card-prihlaseni {
  font-size: 12px;
  color: var(--text-2);
}
.user-card-smazat {
  font-size: 12px;
  padding: 6px 12px;
  flex-shrink: 0;
}

/* =========================================================
   SLEVOVÁ SKUPINA CARDS — admin (mobile)
   ========================================================= */
.skupina-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-tap-highlight-color: transparent;
}
.skupina-card:hover {
  border-color: var(--primary-border);
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.08);
}
.skupina-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.skupina-card-title {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.skupina-card-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.skupina-card-info { flex: 1; min-width: 0; }
.skupina-card-nazev {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}
.skupina-card-popis {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.4;
}

.skupina-card-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.skupina-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}
.skupina-stat-label {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.skupina-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

.skupina-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.skupina-card-actions button {
  font-size: 12px;
  padding: 7px 14px;
}

/* =========================================================
   KATEGORIE CARDS — admin (mobile)
   ========================================================= */
.kategorie-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.kategorie-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
.kategorie-card:hover {
  border-color: var(--primary-border);
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.08);
}
.kategorie-card.inactive { opacity: 0.55; }

.kategorie-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--surface-2) 0%, #fff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.kategorie-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kategorie-card-emoji {
  font-size: 56px;
  opacity: 0.9;
}
.kategorie-card-poradi {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}
.kategorie-card-skryt {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.kategorie-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kategorie-card-nazev {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}
.kategorie-card-pocet {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* =========================================================
   POLOŽKY TABLE — kompaktní mobile layout (FA, DL, OBJ, RDL, RF, NO)
   Univerzální flex layout — funguje pro 4–7 sloupcových tabulek.
   ========================================================= */
@media (max-width: 700px) {
  .polozky-table thead { display: none; }
  .polozky-table, .polozky-table tbody { display: block; }

  /* Každý řádek = mini-karta s flex-wrap */
  .polozky-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 8px 36px 8px 10px;  /* místo pro × button vpravo nahoře */
    margin-bottom: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    position: relative;
  }
  .polozky-table tbody tr:nth-child(even) td { background: transparent !important; }
  .polozky-table tbody tr:hover td { background: transparent !important; }

  .polozky-table tbody tr td {
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    font-size: 12px;
    vertical-align: middle;
    flex: 0 0 auto;
  }
  .polozky-table tbody tr td::before { display: none !important; }

  /* Název = první td, přes celý první řádek */
  .polozky-table tbody tr td:first-child {
    flex: 1 1 100%;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    word-break: break-word;
    padding-bottom: 4px !important;
    border-bottom: 1px dashed var(--border) !important;
    margin-bottom: 2px !important;
  }
  .polozky-table tbody tr td:first-child img {
    width: 20px !important; height: 20px !important;
    margin-right: 4px !important;
    vertical-align: middle;
  }
  /* Pokud první td obsahuje input (RDL, RF: editable name) — input vyplní šíři */
  .polozky-table tbody tr td:first-child input[type=text],
  .polozky-table tbody tr td:first-child .input {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Inputs/selecty kompaktní */
  .polozky-table input[type=text],
  .polozky-table input[type=number] {
    font-size: 13px !important;
    padding: 4px 6px !important;
    height: 28px;
    width: auto;
  }
  .polozky-table input[type=number] { width: 50px !important; text-align: center; }
  .polozky-table select {
    font-size: 13px !important;
    padding: 4px 6px !important;
    height: 28px;
    width: auto !important;
    min-width: 60px;
    max-width: 80px;
  }

  /* Číselné cely (cena, dph) — šedé */
  .polozky-table tbody tr td.num {
    color: var(--text-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  /* CELKEM = td.num obsahující <strong> — push do pravého kraje, výrazný */
  .polozky-table tbody tr td.num:has(strong) {
    margin-left: auto !important;
    text-align: right;
  }
  .polozky-table tbody tr td.num strong {
    font-weight: 700;
    font-size: 14px;
    color: var(--primary-dark);
  }

  /* SMAZAT tlačítko = × v pravém horním rohu (poslední td obsahující jen button) */
  .polozky-table tbody tr td:last-child:has(> button.btn-danger),
  .polozky-table tbody tr td:last-child:not(.num) {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0 !important;
    flex: none;
  }
  .polozky-table tbody tr td:last-child button.btn-danger,
  .polozky-table tbody tr td:last-child:not(.num) button {
    width: 26px;
    height: 26px;
    min-height: 26px !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    border-radius: 50%;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    box-sizing: border-box;
  }
  .polozky-table tbody tr td:last-child button.btn-danger::before,
  .polozky-table tbody tr td:last-child:not(.num) button::before {
    content: "×";
    font-size: 18px;
    color: var(--danger-text);
    line-height: 1;
    font-weight: 600;
  }
  .polozky-table tbody tr td:last-child button.btn-danger:hover,
  .polozky-table tbody tr td:last-child:not(.num) button:hover {
    background: var(--danger-bg) !important;
    border-color: var(--danger-text) !important;
  }
}

/* =========================================================
   SLEVA (PRAVIDLO) CARDS — admin (mobile)
   ========================================================= */
.sleva-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sleva-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.sleva-card-cil {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.sleva-card-cil-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.sleva-card-cil-info { flex: 1; min-width: 0; }
.sleva-card-cil-nazev {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}
.sleva-card-cil-typ {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sleva-card-x {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.sleva-card-foot {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.sleva-card-hodnota {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sleva-card-hodnota.pct { color: var(--success-text); }
.sleva-card-hodnota.pevna { color: var(--primary-dark); }

.sleva-card-stit {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sleva-card-pozn {
  width: 100%;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.4;
}

/* Cílová tlačítka (Kategorie/Výrobek/Sortiment) na mobilu */
@media (max-width: 700px) {
  /* 3 cílová tlačítka místo 1fr 1fr 1fr radikálně menší padding */
  .cilove-tlacitko {
    padding: 8px 4px !important;
  }
  .cilove-tlacitko > div:first-child {
    font-size: 22px !important;
    margin-bottom: 2px !important;
  }
  .cilove-tlacitko > div:nth-child(2) {
    font-size: 11px !important;
    line-height: 1.2;
  }
  .cilove-tlacitko > div:nth-child(3) {
    display: none;  /* popisek typu "např. Chleba" — na mobilu zbytečný, není místo */
  }

  /* Form-grid s inline 1fr 1fr přebij — na mobilu jeden sloupec
     (ale form-grid-tight zůstává 2 sloupce — krátká pole vedle sebe) */
  .form-grid:not(.form-grid-tight)[style*="grid-template-columns:1fr 1fr"],
  .form-grid:not(.form-grid-tight)[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   DODACÍ LIST — list cards (mobile) + detail link box
   ========================================================= */
.dl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.dl-card:hover {
  border-color: var(--primary-border);
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.08);
}
.dl-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.dl-card-cislo {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}
.dl-card-odb {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}
.dl-card-misto {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.3;
}
.dl-card-zdroj {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.dl-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.dl-card-datum {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.3;
}
.dl-card-castka {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dl-card-actions {
  display: flex;
  justify-content: flex-end;
}
.dl-card-actions .btn-secondary {
  font-size: 13px;
  padding: 8px 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Detail DL — link box (z objednávky / na fakturu) */
.dl-link-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dl-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dl-link-label {
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
  min-width: 100px;
}

/* =========================================================
   ČÍSELNÉ ŘADY — admin Nastavení
   ========================================================= */
.cislovani-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.cislo-rada-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;                 /* grid → garantuje, že stejné řádky napříč kartami */
  grid-template-rows: auto auto auto 1fr;  /* head / fields / nahled / foot vždy na stejné pozici */
  row-gap: 10px;
  transition: border-color 0.3s;
}
.cislo-rada-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  min-height: 22px;
}
.cislo-rada-icon { font-size: 18px; line-height: 1; }

.cislo-rada-fields {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  align-items: end;              /* spodní hrana inputů zarovnaná */
}
.cislo-rada-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cislo-rada-fields .form-label {
  min-height: 16px;              /* labely v jedné výšce i kdyby se text zalomil */
  line-height: 1.2;
  font-size: 12px;
}
.cislo-rada-fields .form-input {
  width: 100%;
  height: 36px;                  /* fixní výška = vždy stejné rozměry */
  box-sizing: border-box;
  padding: 6px 10px;
  font-size: 14px;
}

.cislo-rada-nahled {
  display: flex;                 /* label + code v jednom řádku, vyšší přehlednost */
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  min-height: 36px;              /* stejná výška u všech karet */
}
.cislo-rada-nahled .form-label {
  display: inline-block;
  margin: 0;
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cislo-priste {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
  background: white;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid var(--border);
  margin-left: auto;             /* code u pravého okraje, label vlevo */
}

.cislo-rada-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: end;               /* foot kotvený dole — karty stejně vysoké */
}
.cislo-rada-foot .btn-secondary {
  width: 100%;
  font-size: 13px;
  padding: 8px 12px;
  height: 36px;                  /* stejná výška jako inputy */
}
.cislo-rada-foot small {
  min-height: 14px;              /* prázdný řádek si drží místo, výška karty stejná */
  line-height: 1.2;
}

/* === Suroviny — filter grid (mobile fallback) === */
@media (max-width: 700px) {
  .sur-filter-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Filtr karta — menší padding */
  .sur-filtry { padding: 12px 14px !important; }
  /* Inputy + selecty: rozumnější velikost na mobilu */
  .sur-filtry input.form-input,
  .sur-filtry select.form-input {
    font-size: 16px !important;     /* 16px aby iOS nezoomoval */
    height: 48px !important;
    padding: 10px 14px !important;
  }
  .sur-filtry label {
    font-size: 14px !important;
    padding: 4px 0 !important;
  }
  /* Kategorie pillsy — wrap do více řádků (jako tlačítka), 2 sloupce */
  .sur-filtry > div[style*="flex-wrap:wrap"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    flex-wrap: initial;
  }
  .sur-filtry .period-tab {
    flex: initial;
    font-size: 13px !important;
    padding: 10px 12px !important;
    min-height: 52px !important;
    border-radius: 10px;
    justify-content: flex-start !important;
    text-align: left;
    line-height: 1.2;
    /* zachovat tlačítkový vzhled */
  }
  .sur-filtry .period-tab span[style*="font-size:28px"] {
    font-size: 24px !important;
    flex-shrink: 0;
  }
}

/* === Suroviny — větší tabulka pro lepší čitelnost === */
.sur-table th {
  font-size: 14px;
  padding: 12px 14px;
  font-weight: 600;
}
.sur-table td {
  font-size: 15px;
  padding: 14px;
  line-height: 1.4;
}
.sur-table td strong {
  font-size: 15px;
  font-weight: 700;
}
/* Filtry karta — výraznější */
.sur-filtry {
  border: 1.5px solid var(--border-2);
}

/* 🆕 v3.0.148 — segmentovaný přepínač jednotky ceny (Kč/kg ↔ Kč/g) */
.sur-unit-toggle {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface);
}
.sur-unit-toggle button {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sur-unit-toggle button + button { border-left: 1.5px solid var(--border); }
.sur-unit-toggle button:hover:not(.active) { background: var(--surface-2); }
.sur-unit-toggle button.active { background: var(--primary); color: #fff; }

/* === Searchable VYROBEK PICKER (FA / DL / OBJ) === */
.vp-picker-wrap { position: relative; }
.vp-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1.5px solid var(--primary-border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  z-index: 100;
}
.vp-picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.vp-picker-item:last-child { border-bottom: none; }
.vp-picker-item:hover,
.vp-picker-item.is-active {
  background: var(--primary-light);
}
.vp-picker-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vp-picker-code {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
}
.vp-picker-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vp-picker-jed {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
}
.vp-picker-empty {
  padding: 14px;
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  font-style: italic;
}
.vp-picker-more {
  padding: 8px 14px;
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface-2);
  text-align: center;
  font-style: italic;
}
@media (max-width: 700px) {
  .vp-picker-dropdown { max-height: 280px; }
  .vp-picker-item { padding: 12px 14px; }
  .vp-picker-name { font-size: 15px; }
  .vp-picker-price { font-size: 14px; }
}

/* === Suroviny — IMPORT rychlý zápis === */
.sur-import-table th {
  font-size: 12px;
  padding: 8px 10px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sur-import-table td {
  padding: 6px 8px;
  vertical-align: middle;
}
.sur-import-table .sur-import-inp {
  width: 100%;
  height: 36px;
  padding: 6px 10px;
  font-size: 14px;
  box-sizing: border-box;
}
.sur-import-table .sur-import-inp.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Mobile: jeden sloupec + kompaktní karty (méně výšky, sevřenější) */
@media (max-width: 700px) {
  .cislovani-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cislo-rada-card {
    padding: 10px 12px;
    gap: 6px;
    border-radius: 8px;
  }
  .cislo-rada-head {
    font-size: 13px;
    gap: 6px;
  }
  .cislo-rada-icon { font-size: 16px; }

  /* Pole vedle sebe — 2 sloupce kompaktně */
  .cislo-rada-fields {
    grid-template-columns: 1.4fr 1fr;
    gap: 6px;
  }
  .cislo-rada-fields .form-label {
    font-size: 10px;
    letter-spacing: 0.2px;
  }
  .cislo-rada-fields .form-input {
    padding: 6px 8px;
    font-size: 13px;
    height: 32px;
  }

  /* Náhled „Příští doklad bude" — inline řádek */
  .cislo-rada-nahled {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: 12px;
  }
  .cislo-rada-nahled .form-label {
    display: inline-block;
    margin-bottom: 0;
    font-size: 10px;
    white-space: nowrap;
  }
  .cislo-priste {
    font-size: 12px;
    padding: 2px 6px;
  }

  /* Tlačítko + popisek pod ním */
  .cislo-rada-foot { gap: 2px; }
  .cislo-rada-foot .btn-secondary {
    font-size: 12px;
    padding: 6px 10px;
  }
  .cislo-rada-foot small {
    font-size: 10px !important;
    line-height: 1.2;
  }
}

/* =========================================================
   DASHBOARD — period-tabs (legacy block — kompletní pravidla
   přesunuty do unified .seg-tabs/.period-tabs/.nastaveni-tabs
   v2.9.244 nahoře tohoto souboru, používá CSS tokeny v :root)
   ========================================================= */
/* Žádné period-tab CSS zde — viz unified block "FILTER TABS — UNIFIED"
   v sekci nahoře. Změna stylingu = uprav --filter-* tokeny v :root. */

.period-custom {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  align-items: center;
}
/* GLOBÁLNĚ: všechny date inputy na mobilu — žádný overflow, žádný iOS zoom */
@media (max-width: 900px) {
  input[type="date"] {
    max-width: 100% !important;
    width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px; /* zabraňuje iOS Safari zoomu při focusu */
  }
  /* Speciální kontejner kolem date inputu (Od:/Do: label) — adaptivní */
  .filter-date-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0 !important;
  }
  .filter-date-wrap .filter-input,
  .filter-date-wrap input[type="date"] {
    flex: 1 1 0;
    min-width: 0 !important;
  }
}

@media (max-width: 900px) {
  /* Datum-od + Datum-do vedle sebe (2 sloupce), tlačítko pod nimi přes celou šíř */
  .period-custom {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 8px !important;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .period-custom .filter-date-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    min-width: 0 !important;
    padding: 0 8px;
  }
  .period-custom .filter-date-wrap > span {
    font-size: 11px;
  }
  .period-custom .filter-date-wrap .filter-input,
  .period-custom .filter-input,
  .period-custom input[type="date"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    padding: 6px 2px !important;
    font-size: 13px;
  }
  /* Tlačítko Použít — přes obě sloupce */
  .period-custom .btn-secondary {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.period-range {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 14px;
  background: var(--surface);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: inline-block;
}

/* Stat card s podtitulkem */
.stat-card .stat-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  font-weight: 500;
}
.stat-card.stat-warn {
  border-color: #F8DCDC;
  background: linear-gradient(135deg, #FFF8F8 0%, var(--surface) 100%);
}
.stat-card.stat-warn .stat-value {
  color: var(--danger-text);
}

/* Dashboard řada (top odběratelé / top výrobky vedle sebe) */
.dashboard-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .dashboard-row { grid-template-columns: 1fr; }
}

.dashboard-table tbody tr td {
  padding: 8px 10px;
  font-size: 13px;
}
.dashboard-table tbody tr:hover {
  background: var(--surface-2);
}

/* GRAF */
.chart-container {
  width: 100%;
}
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.chart-bar-wrap {
  flex: 1 1 0;
  min-width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  cursor: help;
}
.chart-bar {
  width: 100%;
  max-width: 36px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: opacity 0.15s;
}
.chart-bar-wrap:hover .chart-bar {
  opacity: 0.85;
}
.chart-bar-label {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 4px;
  white-space: nowrap;
}
.chart-summary {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
}

/* 🆕 v2.9.252 — MOBILE + TABLET filter tabs — CANONICAL (user explicit, NIKDY MĚNIT):
   - Skupina A (period): .period-tabs → 1 ŘÁDEK nowrap shrink (clamp)
   - Skupina B (3-col grid): .seg-tabs / .vyroba-subtabs / .nastaveni-tabs
     **APLIKUJE SE I NA TABLET** (až do 1024px — user: 'i vetších do tabletu')
   - NIKDY pill (border-radius 999px), NIKDY flex-wrap: wrap
   - clamp() škálování pro fonts/icons
   - Všechny themes (default/dark/apple/win98). */

/* ━━━━━ Skupina B → 3-col grid až do TABLET (<1024px) ━━━━━ */
@media (max-width: 1024px) {
  .seg-tabs,
  .vyroba-subtabs,
  .nastaveni-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding: 6px !important;
  }
  .seg-tab,
  .vyroba-subtab,
  .nastaveni-tab {
    flex: none !important;
    min-width: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
    border-radius: var(--filter-tab-radius) !important;
    padding: 10px 8px !important;
    overflow: hidden !important;
    font-size: clamp(11px, 1.4vw, 13px) !important;
  }
  .seg-tab-icon, .vyroba-subtab-icon {
    font-size: clamp(18px, 2.2vw, 22px) !important;
  }
  .seg-tab-text, .vyroba-subtab-text {
    font-size: clamp(11px, 1.4vw, 13px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  /* 🆕 v2.9.253 — Lichý počet (7 Výroba sub-tabů) zůstává span 1 (jen vlevo).
     User: 'tu full row nech jenom button v levo, třeba se tam něco přidá.
     a vypadá to divně.' — žádný full-row span. */
}

/* ━━━━━ MOBILE (<700px) — Skupina A 1 řádek + Skupina B kompaktnější fonts ━━━━━ */
@media (max-width: 700px) {
  /* Skupina A: .period-tabs → 1 řádek nowrap shrink */
  .period-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    padding: 4px !important;
  }
  .period-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
    border-radius: var(--filter-tab-radius) !important;
    padding: 6px 4px !important;
    overflow: hidden !important;
  }
  .period-tab-icon {
    font-size: clamp(14px, 4vw, 18px) !important;
  }
  .period-tab-text {
    font-size: clamp(9px, 2.4vw, 11px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
}
/* 🆕 v3.0.56 — Extreme mobile (≤460px): jen 1. písmena D/T/M/R/V
   🎨 v3.0.58 — Zvětšeno proporcionálně (user: "zvětši ale nedeformat")
   🆕 v3.0.60 — Práh ≤400 → ≤460px (covers iPhone 14 Plus 428, Pro Max 430).
                User: "D..., T..." ellipsis na iPhone — vypnut ellipsis pro 1-letter.
   Funguje napříč všemi theme (žádné theme-specific overrides). */
@media (max-width: 460px) {
  .period-tabs { gap: 5px !important; padding: 5px !important; }
  .period-tab {
    padding: 9px 6px !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-height: 52px;
    overflow: visible !important;       /* zruš overflow:hidden z 700px rule */
  }
  .period-tab-icon { font-size: 19px !important; line-height: 1; }
  .period-tab-text {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
    line-height: 1;
    overflow: visible !important;       /* zruš ellipsis — text "D" se vždy vejde */
    text-overflow: clip !important;
    max-width: none !important;
  }
  /* Skupina B — kompaktnější padding/fonts (grid layout zděděn z 1024px rule) */
  .seg-tabs,
  .vyroba-subtabs,
  .nastaveni-tabs {
    gap: 4px !important;
    padding: 4px !important;
  }
  .seg-tab,
  .vyroba-subtab,
  .nastaveni-tab {
    padding: 8px 6px !important;
    font-size: clamp(9px, 2.4vw, 11px) !important;
  }
  .seg-tab-icon, .vyroba-subtab-icon {
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }
  .seg-tab-text, .vyroba-subtab-text {
    font-size: clamp(9px, 2.4vw, 11px) !important;
  }

  /* Štítky — režimové taby (Exped / Cenovky / Moje / Editor) — 2 sloupce */
  .stitky-rezim-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .stitky-rezim-tabs .period-tab {
    padding: 12px 8px;
    font-size: 13px;
    min-height: 46px;
    white-space: normal;     /* dlouhý popisek se může zalomit do 2 řádků */
    line-height: 1.2;
  }
  .chart-bars { height: 140px; }
  .chart-bar-wrap { min-width: 22px; }
  .chart-bar-label { font-size: 9px; }
}

/* Dashboard 3-sloupcový smrsknutý layout (graf + top odběratelé + top výrobky) */
.dashboard-row-3col {
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) {
  .dashboard-row-3col {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-row-3col > .card-block:first-child {
    grid-column: 1 / -1;  /* graf na celou šířku */
  }
}
@media (max-width: 700px) {
  .dashboard-row-3col {
    grid-template-columns: 1fr;
  }
  .dashboard-row-3col > .card-block:first-child {
    grid-column: auto;
  }
}

/* Smrsknutý card-block */
.dashboard-compact {
  padding: 14px;
}
/* Mobil: dashboard-compact tabulky (top odběratelé/výrobky) malé a kompaktní */
@media (max-width: 700px) {
  .dashboard-compact { padding: 10px 12px; }
  .dashboard-compact h3 { font-size: 13px; margin-bottom: 6px; }
  /* Tabulka uvnitř — řádky NESPRACOVAT na karty, držet jako řádky tabulky */
  .dashboard-compact .table,
  .dashboard-compact .table tbody { display: table !important; width: 100%; }
  .dashboard-compact .table tbody tr {
    display: table-row !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .dashboard-compact .table tbody tr:last-child { border-bottom: none !important; }
  .dashboard-compact .table tbody tr td {
    display: table-cell !important;
    padding: 6px 4px !important;
    border-top: none !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.3;
    vertical-align: middle;
  }
  .dashboard-compact .table tbody tr td::before { display: none !important; }
  .dashboard-compact .table tbody tr td:first-child {
    padding-bottom: 6px !important;
    border-bottom: none !important;
    width: 22px;
    color: var(--text-3);
    font-weight: 600;
  }
  .dashboard-compact .table tbody tr td.num {
    text-align: right !important;
    font-weight: 600;
    white-space: nowrap;
  }
  /* Obrázek u top výrobků */
  .dashboard-compact .table tbody tr td img {
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 4px;
  }
}
.dashboard-compact h3 {
  font-size: 13px;
  margin-bottom: 10px;
}
.dashboard-compact .dashboard-table tbody tr td {
  padding: 6px 8px;
  font-size: 12px;
}
.dashboard-compact .chart-bars {
  height: 130px;
}
.dashboard-compact .chart-bar-label {
  font-size: 9px;
}
.dashboard-compact .chart-summary {
  font-size: 12px;
  margin-top: 8px;
}

/* =========================================================
   QUICK ACTIONS — dashboard zkratky (nová objednávka, faktura, DL...)
   ========================================================= */
.quick-actions {
  display: grid;
  /* 🆕 v3.0.102 — PC = 4 v řadě (Nová obj / Faktura / DL / Výroba).
     Mobile (@max-width: 700px níže) přebije na 2x2 grid. */
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 38px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.quick-actions::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  min-height: 64px;
}
.quick-action-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(186, 117, 23, 0.2);
}
.quick-action-btn:hover .qa-title,
.quick-action-btn:hover .qa-sub {
  color: white;
}

.qa-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: 8px;
  transition: background 0.15s;
}
.quick-action-btn:hover .qa-icon {
  background: rgba(255, 255, 255, 0.2);
}

.qa-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.qa-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  transition: color 0.15s;
}
.qa-sub {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.2;
  transition: color 0.15s;
}

/* Mobile: 2 sloupce */
@media (max-width: 700px) {
  .quick-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .quick-action-btn {
    padding: 12px;
    min-height: 60px;
  }
  .qa-icon { font-size: 22px; width: 36px; height: 36px; }
  .qa-title { font-size: 13px; }
  .qa-sub { font-size: 10px; }
}

/* Velmi malé telefony */
@media (max-width: 380px) {
  .qa-sub { display: none; }
  .quick-action-btn { padding: 10px; min-height: 50px; }
}

/* =========================================================
   DRAG & DROP REORDER (výrobky a další tabulky/seznamy)
   ========================================================= */
.btn-active {
  background: var(--primary) !important;
  color: white !important;
  border-color: var(--primary) !important;
}

.reorder-banner {
  background: linear-gradient(135deg, #FFF8E5 0%, #FAEEDA 100%);
  border: 1px solid var(--primary-border);
  border-left: 4px solid var(--primary);
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-2);
}

/* Tabulka v reorder režimu */
.reorder-table tbody tr {
  cursor: grab;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
  user-select: none;
}
.reorder-table tbody tr:hover {
  background: var(--surface-2);
}
.reorder-table tbody tr.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.reorder-table tbody tr.drag-over {
  background: #FAEEDA;
  box-shadow: inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary);
}
.reorder-table tbody tr.drag-saved {
  animation: dragSavedFlash 0.6s ease-out;
}

@keyframes dragSavedFlash {
  0% { background: #D4F5DD; }
  100% { background: transparent; }
}

.drag-handle {
  font-size: 18px;
  color: var(--text-3);
  text-align: center;
  cursor: grab;
  font-weight: 700;
  letter-spacing: -2px;
  user-select: none;
}
.reorder-table tbody tr:hover .drag-handle {
  color: var(--primary);
}

/* Mobile karty v reorder režimu */
.vyrobek-card.reorder-card {
  cursor: grab;
  position: relative;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
  user-select: none;
}
.vyrobek-card.reorder-card.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.vyrobek-card.reorder-card.drag-over {
  box-shadow: 0 0 0 2px var(--primary), 0 4px 12px rgba(186, 117, 23, 0.3);
  transform: scale(1.02);
}
.vyrobek-card.reorder-card.drag-saved {
  animation: dragSavedFlash 0.6s ease-out;
}
.vyrobek-card-handle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--primary);
  z-index: 2;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Reorder chips — tlačítka v Nové objednávce ukazující předchozí objednávky */
.reorder-chip {
  font-size: 13px;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.reorder-chip:hover {
  background: var(--surface-2);
  border-color: var(--primary-border);
}
.reorder-chip.reorder-chip-active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.reorder-chip.reorder-chip-active strong,
.reorder-chip.reorder-chip-active span {
  color: white !important;
}

/* =========================================================
   FORM — sticky toolbar nahoře v modalu výrobku
   ========================================================= */
/* Horní řádek: obrázek vlevo + tlačítka vpravo */
.vy-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.vy-top-row > .image-upload {
  flex: 1 1 auto;
  min-width: 280px;
}
.vy-modal-toptools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 170px;
  flex-shrink: 0;
}
.vy-modal-toptools .btn-secondary,
.vy-modal-toptools .btn-primary {
  font-size: 13px;
  padding: 8px 14px;
  text-align: center;
}
@media (max-width: 700px) {
  .vy-modal-toptools { width: 100%; }
}

/* Vizuálně oddělené sekce (Cena, Nutriční hodnoty) */
.vy-section-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.vy-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}
/* 🆕 v3.0.343 — titulek sekce ve vršku editoru (sjednocení s boxovanými sekcemi níž) */
.vy-sec-head {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-2);
  letter-spacing: 0.2px;
  margin: 12px 0 -2px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}
.vy-sec-head:first-child { margin-top: 0; }
/* Cena s DPH input — vypadá jako Cena bez DPH */
.vy-cena-sdph { /* dědí styling z .vy-cena-input */ }

/* =========================================================
   FORM — Popis + Složení vedle sebe (úspora místa na výšku)
   ========================================================= */
.vy-popis-sloz-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
.vy-popis-sloz-row > div { display: flex; flex-direction: column; }
.vy-popis-sloz-row textarea { resize: vertical; min-height: 70px; }
@media (max-width: 700px) {
  .vy-popis-sloz-row { grid-template-columns: 1fr; gap: 8px; }
}

/* =========================================================
   FORM — Nutriční hodnoty (compact 4-sloupcový grid, decentní)
   ========================================================= */
.vy-nutr-section { /* dědí styling z .vy-section-box */ }
.vy-nutr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.vy-nutr-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-2);
}
.vy-nutr-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vy-nutr-input {
  display: flex;
  align-items: center;
  gap: 4px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding-right: 6px;
}
.vy-nutr-input .form-input {
  border: none !important;
  background: transparent;
  padding: 5px 6px !important;
  font-size: 13px !important;
  text-align: right;
  width: 100%;
  min-width: 0;
}
.vy-nutr-input .form-input:focus {
  box-shadow: none !important;
}
.vy-nutr-input:focus-within {
  border-color: var(--primary);
}
.vy-nutr-jed {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .vy-nutr-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   FORM — Moje štítek: Prodáváme / Obsah / Přepočet v jednom řádku
   ========================================================= */
.ms-jed-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.3fr;
  gap: 10px;
  align-items: end;
}
.ms-jed-row > div { display: flex; flex-direction: column; }
@media (max-width: 700px) {
  .ms-jed-row { grid-template-columns: 1fr; gap: 8px; }
}

/* HACCP modal sub-tabs */
.haccp-subtabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 0;
  margin-bottom: 0;
}
.haccp-subtabs .period-tab {
  font-size: 13px;
  padding: 8px 14px;
}

/* =========================================================
   VÝROBNÍ KALKULACE — receptura/zdobení layout (CSS grid řádky)
   ========================================================= */
.vk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.vk-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vk-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 100px 80px minmax(0, 1.1fr) 100px 32px;
  gap: 8px;
  align-items: end;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.vk-row.has-problem {
  background: #FEF3C7;
  border-color: #FCD34D;
}
.vk-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vk-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
  font-weight: 600;
}
.vk-row .form-input {
  font-size: 13px;
  padding: 6px 8px;
}
.vk-cell-mn .form-input { text-align: right; }
.vk-info-val {
  font-size: 11px;
  color: var(--text-3);
  padding: 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vk-celkem-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  padding: 6px 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.vk-cell-del {
  align-self: end;
}
.vk-cell-del .btn-danger {
  padding: 7px 10px;
  font-size: 14px;
  height: 33px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vk-row-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #FFF8E5;
  border-radius: 8px;
  font-size: 14px;
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .vk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .vk-row {
    grid-template-columns: 1fr 1fr 32px;
    gap: 6px;
  }
  .vk-cell-sur { grid-column: 1 / -1; }
  .vk-cell-info { grid-column: 1 / 3; }
  .vk-cell-celkem { grid-column: 1 / 3; }
  .vk-cell-del { grid-column: 3; align-self: start; }
  .vk-celkem-val { text-align: left; }
}

/* =========================================================
   QUICK PERIOD CHIPS — rychlé filtry data (DL/FA/OBJ)
   ========================================================= */
.quick-period-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.qp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.qp-chip:hover {
  background: #FFF8E5;
  border-color: var(--primary-light);
  color: var(--text);
}
.qp-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 1px 3px rgba(186,117,23,0.25);
}
.qp-chip.is-active:hover {
  background: var(--primary-dark);
}
.qp-check {
  font-size: 11px;
  opacity: 0.85;
  font-family: monospace;
  width: 12px;
  display: inline-block;
  text-align: center;
}
.qp-chip.qp-clear { margin-left: auto; }
.qp-chip.qp-clear.is-active { background: var(--text); border-color: var(--text); }

@media (max-width: 700px) {
  .qp-chip { font-size: 12px; padding: 5px 10px; }
  .qp-chip.qp-clear { margin-left: 0; }
}

/* =========================================================
   FORM — Číslo / EAN / Obsah — kompaktní 3-sloupcový řádek
   ========================================================= */
.vy-id-row {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 1.3fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 8px;
}
.vy-id-row > div { display: flex; flex-direction: column; min-width: 0; }
.vy-id-row #vy-prepocet {
  font-size: 11px;
  color: var(--primary-dark);
  font-weight: 700;
  margin-top: 4px;
  line-height: 1.2;
}
@media (max-width: 700px) {
  .vy-id-row { grid-template-columns: 1fr 1fr; }
  .vy-id-row > div:nth-child(2) { grid-column: 1 / -1; }
}

/* =========================================================
   FORM — Název / Kategorie / Jednotka / Min. obj. — 4-col řádek
   ========================================================= */
.vy-nazev-row {
  display: grid;
  grid-template-columns: 2.4fr 1.2fr 1.1fr 0.7fr;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}
.vy-nazev-row > div { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 700px) {
  .vy-nazev-row {
    grid-template-columns: 1fr 1fr;
  }
  .vy-nazev-row > div:nth-child(1) { grid-column: 1 / -1; }
}

/* =========================================================
   FORM — Cena výrobku (plain 3-sloupcový řádek, jen cena vyniká)
   ========================================================= */
.vy-cena-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  padding: 0;
  background: transparent;
  border: none;
}
.vy-cena-row > div { display: flex; flex-direction: column; }
.vy-cena-input {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--primary-dark) !important;
  text-align: right;
  letter-spacing: -0.01em;
}
.vy-cena-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.18) !important;
}
@media (max-width: 700px) {
  .vy-cena-row { grid-template-columns: 1fr 1fr; }
  .vy-cena-row > .vy-cena-box { grid-column: 1 / -1; }
  .vy-cena-input { font-size: 18px !important; }
}

/* =========================================================
   EDITOR ŠABLON CENOVEK — drag & drop builder
   ========================================================= */
.ed-toolbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.ed-workarea {
  display: grid;
  grid-template-columns: 200px 1fr 280px;
  gap: 14px;
  align-items: start;
}
.ed-paleta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.ed-paleta-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ed-paleta-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: all 0.1s;
  font-family: inherit;
}
.ed-paleta-item:hover {
  background: #FFF8E5;
  border-color: var(--primary);
  transform: translateX(2px);
}
.ed-canvas-wrap {
  background: #F7F8FA;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 400px;
}
.ed-canvas-info {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 14px;
  text-align: center;
}
.ed-canvas {
  position: relative;
  background: white;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 4px 4px;  /* zhruba 1mm grid při zoom=4 */
}
.ed-canvas.is-fold {
  /* Vizuálně oddělit půlku */
}
.ed-fold-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(220, 38, 38, 0.05),
    rgba(220, 38, 38, 0.05) 6px,
    rgba(220, 38, 38, 0.10) 6px,
    rgba(220, 38, 38, 0.10) 12px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.ed-fold-overlay span {
  background: rgba(220, 38, 38, 0.85);
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
}
.ed-fold-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dashed #dc2626;
  z-index: 2;
  pointer-events: none;
}
.ed-fold-line::after {
  content: '✂ sklad zde';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid #dc2626;
  border-radius: 3px;
}
.ed-canvas-mereni {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
  font-family: monospace;
}
.ed-prvek {
  position: absolute;
  cursor: move;
  user-select: none;
  border: 1px dashed transparent;
  display: flex;
  align-items: center;
  overflow: hidden;
  line-height: 1.1;
}
.ed-prvek:hover {
  border-color: rgba(186, 117, 23, 0.5);
}
.ed-prvek.is-selected {
  border-color: var(--primary);
  border-style: solid;
  box-shadow: 0 0 0 1px var(--primary), 0 2px 8px rgba(186, 117, 23, 0.15);
}
.ed-prvek-txt {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-resize {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--primary);
  bottom: -5px;
  right: -5px;
  cursor: nwse-resize;
  border-radius: 2px;
  border: 1.5px solid white;
}
.ed-props {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.ed-props-empty {
  padding: 30px 10px;
  text-align: center;
}
.ed-props-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
  background: #FFF8E5;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.ed-prop-del {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.ed-prop-group {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.ed-prop-group:last-child { border-bottom: none; }
.ed-prop-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.ed-prop-mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--text-3);
}
.ed-prop-mini > span { font-weight: 500; }
.ed-prop-mini > input,
.ed-prop-mini > select {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: white;
}
.ed-prop-mini > input[type="color"] {
  height: 30px;
  padding: 2px;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .ed-workarea {
    grid-template-columns: 1fr;
  }
  .ed-paleta, .ed-props {
    position: static;
    max-height: none;
  }
  .ed-paleta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
  }
  .ed-paleta-title { grid-column: 1 / -1; }
  .ed-paleta-item { margin-bottom: 0; }
}

/* 🔄 Self-upgrade dropzone */
.upgrade-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 18px;
  background: var(--surface-2);
  border: 2px dashed var(--border-2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.upgrade-dropzone:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
.upgrade-dropzone.is-dragover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: scale(1.01);
  box-shadow: 0 4px 14px rgba(186, 117, 23, 0.18);
}
.upgrade-dropzone-inner {
  text-align: center;
  pointer-events: none;
}
html.theme-dark .upgrade-dropzone, html.dark .upgrade-dropzone {
  background: var(--surface);
  border-color: var(--border-2);
}

/* 📦 Načíst výrobek — custom dropdown s velkými názvy a search */
.vyr-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.12s ease;
}
.vyr-pick-row:hover {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  padding-left: 9px;
}
.vyr-pick-row:active {
  transform: scale(0.99);
}
.vyr-pick-row:last-child { border-bottom: none; }
.vyr-pick-row.is-vybran {
  background: #ECFDF5;       /* světle zelená — již vybrán */
  border-left: 3px solid #22863a;
  padding-left: 9px;
}
.vyr-pick-row.is-vybran:hover {
  background: #D1FAE5;
}
.vyr-pick-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vyr-pick-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.vyr-pick-code {
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}
.vyr-pick-cena {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
}
.vyr-pick-check {
  font-size: 16px;
  font-weight: 700;
  color: #22863a;
  margin-left: 4px;
}

/* 🏷️ Chips řádek vybraných výrobků (Štítky a cenovky — pod konfigurací) */
.st-chips-row { /* container styling inline ve výsledné šabloně */ }
.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
  color: var(--primary-dark);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  max-width: 320px;
  transition: all 0.15s ease;
}
.st-chip:hover {
  background: #FCEFD9;
  border-color: var(--primary);
  box-shadow: 0 1px 3px rgba(186, 117, 23, 0.18);
}
.st-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

/* 🔢 Per-výrobek počet kopií [− N +] uvnitř chipu */
.st-chip-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.st-chip-qty-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--primary-dark);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.st-chip-qty-btn:hover { background: var(--primary-light); }
.st-chip-qty-btn:active { transform: scale(0.9); }
.st-chip-qty-input {
  width: 32px;
  height: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dark);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  -moz-appearance: textfield;     /* hide spin buttons FF */
}
.st-chip-qty-input::-webkit-inner-spin-button,
.st-chip-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.st-chip-qty-input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-radius: 6px;
}

.st-chip-x {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--primary-border);
  color: var(--primary-dark);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}
.st-chip-x:hover {
  background: #FEE2E2;
  border-color: #B91C1C;
  color: #B91C1C;
  transform: scale(1.1);
}
.st-chip-x:active { transform: scale(0.92); }
@media (max-width: 700px) {
  .st-chip { font-size: 11px; max-width: 280px; padding: 3px 3px 3px 8px; gap: 4px; }
  .st-chip-label { max-width: 110px; }
  .st-chip-qty-btn { width: 22px; height: 22px; font-size: 15px; }
  .st-chip-qty-input { width: 28px; height: 22px; }
  .st-chip-x { width: 24px; height: 24px; font-size: 17px; }   /* mobilní touch target */
}

/* 🔢 Step-hint pod každým polem v cenovkách / PDF nabídce — krok postupu */
.st-step-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
  background: linear-gradient(90deg, rgba(186, 117, 23, 0.08), rgba(186, 117, 23, 0.01));
  border-left: 4px solid var(--primary);
  border-radius: 5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.st-step-hint:hover {
  background: linear-gradient(90deg, rgba(186, 117, 23, 0.14), rgba(186, 117, 23, 0.02));
}
.st-step-hint .st-step-num {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.st-step-hint .st-step-text { flex: 1; }
/* ? ikona — zobrazená jen na mobilu */
.st-step-hint .st-step-q { display: none; }
/* PDF nabídka — vyšší kontrast, větší font */
.step-summary { font-size: 14px; }
.step-summary strong { font-size: 15px; }

/* 📱 v2.9.107 — Na mobilu: text VIDITELNÝ a zalamuje se; každá poznámka
   na vlastním řádku, zarovnaná. (Dřív se text skrýval na mini „N ?" badge.) */
@media (max-width: 700px) {
  .st-step-hint {
    display: flex;
    width: auto;
    gap: 8px;
    padding: 7px 11px;
    margin: 8px 0 0;
    border-left-width: 3px;
    font-size: 12.5px;
    align-items: flex-start;
  }
  .st-step-hint .st-step-text {
    display: block;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .st-step-hint .st-step-q { display: none; }
  .st-step-hint .st-step-num {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
  /* Souhrnný panel postupu (PDF nabídka) — schovat na mobilu úplně */
  .step-summary { display: none; }
}
html.dark .st-step-hint {
  background: linear-gradient(90deg, rgba(255, 200, 120, 0.08), transparent);
  color: var(--text-1);
}

/* 🖼️ Mini preview šablony — používá stejné třídy jako tištěná cenovka.
   Renderování přes CSS transform:scale — bude vypadat 1:1 jak tisk. */
.sab-mini-preview { display: inline-block; }
.sab-mini-inner .st-cell-sablona {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #fff;
}
.sab-mini-inner .sab-prvek {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  line-height: 1.15;
  word-break: break-word;
  white-space: nowrap;
}
.sab-mini-inner .sab-prvek b { font-weight: 700; }
.sab-mini-inner .sab-prvek svg { max-width: 100%; max-height: 100%; }
.sab-mini-inner .sab-prvek > div { width: 100%; height: 100%; }
.sab-mini-inner .st-cen-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  padding: 0.6mm 1.5mm;
  font-size: 6.5pt;
  z-index: 2;
}
.sab-mini-inner .sab-fallback {
  background: rgba(255, 255, 255, 0.92);
  font-size: 6pt;
  line-height: 1.2;
}
/* Aby SVG (EAN, čárový kód) vypadaly dobře v miniature */
.sab-mini-inner svg { display: block; }
/* Dark mode: cenovky zůstávají bílé (preview = jak bude vytištěné na papíře) */
html.dark .sab-mini-preview { background: #fff; }
html.dark .sab-mini-inner .st-cell-sablona { color: #1a1a1a; background: #fff; }

/* 🎨 Picker šablony — tlačítko + popover s miniaturami */
.sab-picker-wrap { width: 100%; }
.sab-picker-btn {
  background: var(--surface) !important;
  border: 1.5px solid var(--border-2) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sab-picker-btn:hover {
  border-color: var(--primary-border) !important;
}
.sab-picker-btn.open {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.12) !important;
}
.sab-picker-btn.open .sab-picker-arrow { transform: rotate(180deg); transition: transform 0.15s; }
.sab-picker-arrow { transition: transform 0.15s; display: inline-block; }
.sab-picker-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sab-card {
  font-family: inherit;
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
}
.sab-card:hover {
  border-color: var(--primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.sab-card.is-active {
  background: var(--primary-light) !important;
}
@media (max-width: 700px) {
  .sab-picker-panel {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 8px !important;
    max-height: 70vh !important;
    min-width: auto !important;
  }
}
html.dark .sab-picker-panel { background: var(--surface-2); }
html.dark .sab-card { background: var(--surface-2) !important; }
html.dark .sab-card.is-active { background: rgba(186, 117, 23, 0.18) !important; }

/* Štítky/cenovky — vizuální mřížka pozic na archu */
.st-grid-wrap {
  display: block;
  background: #F7F8FA;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  max-width: 100%;
  overflow-x: auto;
}
.st-grid {
  display: grid;
  gap: 4px;
  width: 100%;
  max-width: 560px;
  /* Aspect ratio A4 portrait = 210/297 ≈ 0.707 */
  aspect-ratio: 210 / 297;
  background: white;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.st-grid-cell {
  background: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.1s;
  min-height: 50px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  position: relative;
}
/* Mini-náhled v buňce — když je nálepka vybraná */
.st-grid-cell.has-preview {
  background: linear-gradient(180deg, #FBFCFD 0%, #FFFFFF 100%);
  border-color: var(--primary);
  border-width: 1.5px;
  color: var(--text);
  padding: 14px 4px 4px;
}
.st-grid-cell.has-preview .st-cell-num {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 9px;
  color: var(--text-3);
  font-weight: 700;
}
.st-grid-cell.has-preview .st-cell-name {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
  text-align: center;
}
.st-grid-cell.has-preview .st-cell-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 2px;
}
.st-grid-cell.has-preview .st-cell-extra {
  font-size: 9px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-top: 1px;
}
.st-grid-cell.has-preview .st-cell-popis {
  font-size: 8px;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.1;
  margin-top: 1px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
  text-align: center;
}
.st-grid-cell.has-preview .st-cell-hmot {
  font-size: 8px;
  color: var(--text-2);
  font-weight: 600;
  margin-top: 1px;
}
.st-grid-cell.has-preview .st-cell-cenakg {
  font-size: 8px;
  color: var(--text-3);
  font-weight: 600;
  margin-top: -1px;
}
.st-grid-cell.has-preview .st-cell-cislo {
  font-size: 7px;
  color: var(--text-3);
  letter-spacing: 0.4px;
  margin-top: 1px;
}
.st-grid-cell.has-preview .st-cell-ean {
  font-size: 7px;
  font-family: monospace;
  color: var(--text-2);
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.st-grid-cell.has-preview .st-cell-alergeny {
  font-size: 7px;
  color: #92400e;
  font-weight: 600;
  margin-top: 1px;
}
.st-grid-cell.has-preview .st-cell-slozeni {
  font-size: 7px;
  color: var(--text-3);
  font-style: italic;
  margin-top: 1px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
.st-grid-cell .st-cell-badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 7px;
  font-weight: 700;
  color: white;
  padding: 2px 5px;
  border-bottom-left-radius: 5px;
  letter-spacing: 0.2px;
  pointer-events: none;
  z-index: 2;
}
.st-grid-cell.has-preview .st-cell-num {
  z-index: 1;
}
/* Indikátor že je použita šablona (jen badge v rohu) */
.st-grid-cell .st-cell-tpl-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 9px;
  opacity: 0.7;
  pointer-events: none;
}

/* Číselný input s +/- tlačítky (Kopií, Od pozice…) */
.st-num-input {
  display: flex;
  align-items: stretch;
  height: 38px;
}
.st-num-input button {
  width: 32px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  user-select: none;
}
.st-num-input button:first-of-type {
  border-radius: 8px 0 0 8px;
  border-right: none;
}
.st-num-input button:last-of-type {
  border-radius: 0 8px 8px 0;
  border-left: none;
}
.st-num-input button:hover {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.st-num-input .form-input {
  flex: 1;
  min-width: 0;
  text-align: center;
  border-radius: 0;
  height: 100%;
  padding: 0 6px;
  font-weight: 600;
  -moz-appearance: textfield;
}
.st-num-input .form-input::-webkit-inner-spin-button,
.st-num-input .form-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
html.dark .st-grid-cell.has-preview {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
}
.st-grid-cell:hover {
  background: #FFF8E5;
  border-color: var(--primary);
  color: var(--text);
}
.st-grid-cell.is-empty {
  background: #f1f1f1;
  color: #ccc;
  border-style: dashed;
}
.st-grid-cell.is-start {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(186, 117, 23, 0.25);
}
/* Když je is-start zároveň has-preview → potlačit amber background, ať je text čitelný.
   Místo toho jen výrazný amber okraj 3px. */
.st-grid-cell.is-start.has-preview {
  background: linear-gradient(180deg, #FBFCFD 0%, #FFFFFF 100%);
  color: var(--text);
  border: 3px solid var(--primary);
  box-shadow: 0 0 0 1px rgba(186, 117, 23, 0.25);
}
.st-grid-info {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Zoom je řešený dynamicky přes inline max-width na .st-grid */
@media (max-width: 700px) {
  .st-grid { max-width: 100%; }
  .st-grid-cell { font-size: 10px; }
}

/* Štítky/cenovky — mobilní řádky pro výběr (kompaktnější než karty) */
.st-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.st-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  min-height: 44px;
}
.st-row:hover { border-color: var(--primary-border); }
.st-row.is-selected {
  background: #FFF8E5;
  border-color: var(--primary);
  border-left-width: 4px;
}
.st-row > input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
  margin: 0;
}
.st-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-row-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.2;
  flex-wrap: wrap;
}
.st-row-nazev {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.st-row-dot { color: var(--text-3); }
.st-row-line2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: var(--text-3);
  align-items: center;
}
.st-row-line2 .status { font-size: 10px; padding: 1px 7px; }

/* Velký název odběratele/pobočky v hlavičkách modálů (Nová obj., Ruční DL/FA) */
.modal-party-name {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
  word-break: break-word;
}
@media (max-width: 700px) {
  .modal-party-name { font-size: 18px; }
}

/* =========================================================
   DOC META ROW — datum vystavení / dodání / poznámka u DL+FA
   ========================================================= */
.doc-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
}
.doc-meta-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.doc-meta-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 7px;
}
.doc-meta-icon { font-size: 16px; opacity: 0.8; }
.doc-meta-req { color: var(--danger); font-weight: 700; margin-left: 1px; }
.doc-meta-hint {
  font-weight: 400;
  color: var(--text-3);
  margin-left: 4px;
  font-size: 13px;
}
.doc-meta-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  padding: 10px 0;
  font-size: 22px;            /* zmenšeno z 28 → 22, datum se vejde i v 3-col layoutu */
  font-weight: 700;
  color: var(--text);
  outline: none;
  font-family: inherit;
  min-width: 0;
  border-bottom: 1.5px solid var(--border);
  transition: border-color 0.15s;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
}
/* Datum input — kompaktnější (nemůže přetékat z buňky) */
.doc-meta-input[type="date"] {
  font-size: 18px;
  letter-spacing: 0;
}
.doc-meta-input:focus {
  border-bottom-color: var(--primary);
}
.doc-meta-input::placeholder {
  font-weight: 400;
  color: var(--text-3);
}
.doc-meta-input[type="date"] {
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.doc-meta-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  filter: invert(40%);
}
.doc-meta-input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

@media (max-width: 700px) {
  .doc-meta-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .doc-meta-field { gap: 3px; }
  .doc-meta-label {
    font-size: 13px;
    font-weight: 500;
  }
  .doc-meta-icon { font-size: 14px; }
  .doc-meta-input {
    font-size: 22px;
    font-weight: 600;
    padding: 8px 0;
    letter-spacing: 0.2px;
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
  }
  /* Sjednocení placeholderu (poznámka) s datumem */
  .doc-meta-input::placeholder {
    font-size: 18px;
    font-weight: 400;
  }
  /* iOS Safari — datum input má svůj vnitřní renderer, musíme zvětšit i jeho */
  .doc-meta-input[type="date"] {
    font-size: 22px !important;
    line-height: 1.3;
  }
  .doc-meta-input[type="date"]::-webkit-date-and-time-value {
    font-size: 22px;
    text-align: left;
    line-height: 1.3;
  }
  .doc-meta-input[type="date"]::-webkit-datetime-edit {
    font-size: 22px;
    padding: 0;
  }
  .doc-meta-input[type="date"]::-webkit-calendar-picker-indicator {
    width: 26px;
    height: 26px;
    opacity: 0.55;
  }
}

/* =========================================================
   HROMADNÝ VÝBĚR OBJEDNÁVEK — checkboxy, lišta, zvýraznění
   ========================================================= */
.table-selectable th.col-check,
.table-selectable td.col-check {
  width: 32px;
  min-width: 32px;
  text-align: center;
  padding: 12px 6px;
  vertical-align: middle;
  border-right: 1px solid transparent;
}
.table-selectable th.col-check {
  background: var(--surface-2);
  padding-top: 8px;
  padding-bottom: 8px;
}
.table-selectable .col-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
  vertical-align: middle;
  margin: 0;
}
/* Diskrétní zvýraznění výběru — krémová a tenký levý pruh */
.table-selectable tr.is-selected td {
  background: #FFF8E5 !important;
}
.table-selectable tr.is-selected td.col-check {
  box-shadow: inset 3px 0 0 var(--primary);
}
.obj-card-check {
  display: flex;
  align-items: center;
  margin-right: 4px;
}
.obj-card-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--primary);
}
.obj-card.is-selected {
  background: #FFF8E5;
  border-color: var(--primary);
  border-left-width: 4px;
}

/* Rezerva dole, když je bulk bar viditelný (class-based — bez :has, spolehlivější) */
body.has-bulk-bar .main-content {
  padding-bottom: 110px;
}
.bulk-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #2C2C2A;
  color: white;
  padding: 12px 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 100;
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
  justify-content: center;
}
.bulk-bar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.bulk-bar-count {
  background: var(--primary);
  color: white;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  min-width: 28px;
  text-align: center;
}
.bulk-bar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bulk-bar-actions button {
  font-size: 13px;
  padding: 8px 14px;
}
/* Specifické pro icon-corner v bulk-baru — drž dimenze + kontrast na tmavém pozadí */
.bulk-bar-actions .btn-icon-corner {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 19px;
  background: #DCFCE7;
  border: 1.5px solid #22863a;
  color: #166534;
}
.bulk-bar-actions .btn-icon-corner:hover {
  background: #B7F0C8;
  border-color: #4ADE80;
}
.bulk-bar-actions .btn-link {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 13px;
}
.bulk-bar-actions .btn-link:hover {
  color: white;
}

@media (max-width: 700px) {
  .bulk-bar {
    bottom: 8px;
    padding: 10px 14px;
    border-radius: 16px;
    gap: 10px;
    width: calc(100vw - 16px);
  }
  .bulk-bar-actions {
    flex: 1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .bulk-bar-actions button { font-size: 12px; padding: 7px 10px; }
}

/* =========================================================
   OBJEDNÁVKY CARDS — admin (mobile)
   ========================================================= */
.obj-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.obj-card:hover {
  border-color: var(--primary-border);
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.08);
}
.obj-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.obj-card-cislo {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}
.obj-card-odb {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}
.obj-card-misto {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.3;
}
.obj-card-doklady {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.obj-card-doklady:empty {
  display: none;
}
.obj-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.obj-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.3;
}
.obj-card-castka {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dark);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   SJEDNOCENÉ STYLY PRO MODÁLNÍ FORMULÁŘE (OBJ, FA, DL)
   ========================================================= */

/* Hlavička modálu — jednotný styl */
.modal-card .form-grid {
  background: #F7F8FA;
  border: 1px solid #E8D5B0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

/* Tabulka položek v modálu */
.modal-card .polozky-table,
.modal-card table {
  font-size: 13px;
}

.modal-card table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  padding: 8px 6px;
  border-bottom: 2px solid var(--border);
}

.modal-card table tbody td {
  padding: 8px 6px;
  vertical-align: middle;
}

.modal-card table tbody tr:hover {
  background: rgba(186, 117, 23, 0.04);
}

/* Souhrn v modálu — zvýraznění */
.modal-card .modal-summary {
  background: var(--surface-2);
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 12px;
}

/* Akční tlačítka modálu — jednotný spodek */
.modal-card .form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* Zelená varianta hlavního tlačítka — moderní POS styl */
.btn-green,
.btn-primary.btn-green,
.modal-card .btn-green {
  position: relative;
  background: linear-gradient(180deg, #34c759 0%, #28a745 45%, #1e8e3e 100%) !important;
  border: 1px solid #1e8e3e !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 -1px 0 rgba(0, 0, 0, 0.10) inset,
    0 2px 5px rgba(30, 142, 62, 0.25),
    0 6px 14px rgba(30, 142, 62, 0.18);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
  overflow: hidden;
}
.btn-green::before,
.btn-primary.btn-green::before,
.modal-card .btn-green::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}
.btn-green:hover,
.btn-primary.btn-green:hover,
.modal-card .btn-green:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -1px 0 rgba(0, 0, 0, 0.10) inset,
    0 3px 8px rgba(30, 142, 62, 0.35),
    0 10px 22px rgba(30, 142, 62, 0.25);
}
.btn-green:active,
.btn-primary.btn-green:active,
.modal-card .btn-green:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18) inset,
    0 1px 2px rgba(30, 142, 62, 0.20);
}
.btn-green:disabled,
.btn-primary.btn-green:disabled {
  background: linear-gradient(180deg, #B8E0C2 0%, #93C5A0 100%) !important;
  border-color: #93C5A0 !important;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: none;
  text-shadow: none;
}

/* Reorder chip tlačítka */
.reorder-chip {
  font-size: 12px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--primary-border) !important;
  background: var(--primary-light) !important;
  transition: all 0.15s;
}
.reorder-chip:hover {
  background: var(--primary) !important;
  color: white !important;
}

/* Přidat položku tlačítko — výrazné */
.modal-card .btn-secondary[onclick*="pridatPolozku"],
.modal-card .btn-secondary[onclick*="rfAddZ"],
.modal-card .btn-secondary[onclick*="rdlAddZ"] {
  background: var(--primary-light);
  border-color: var(--primary-border);
  color: var(--primary-dark);
  font-weight: 600;
}

/* Detail row v modálu */
.modal-card .detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.modal-card .detail-row .label {
  color: var(--text-3);
  font-size: 13px;
}

/* Formulářové sekce v modálu — modrošedé */
.modal-card .form-section-blue {
  background: #F5F8FC;
  border: 1px solid #D8E3EF;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
}

/* =========================================================
   PŘEHLEDNOST FORMULÁŘŮ — JEDNOTKY, INPUTY, TABULKA POLOŽEK
   ========================================================= */

/* Jednotky (ks) ve formuláři — větší a viditelnější */
.modal-card table input[type="text"][style*="width:100%"],
.modal-card table .form-input[type="text"] {
  font-size: 14px !important;
  font-weight: 500;
}

/* Množství input — výraznější */
.modal-card table input[type="number"] {
  font-size: 14px !important;
  font-weight: 600;
  color: var(--primary-dark);
  text-align: center;
}

/* Jednotka text input — min šířka aby bylo vidět "ks" */
.modal-card table td:nth-child(2) input,
.modal-card table td:nth-child(2) .form-input {
  min-width: 40px;
  text-align: center;
  font-weight: 600;
  font-size: 14px !important;
}

/* Cena — výraznější */
.modal-card table td.num strong {
  font-size: 14px;
  color: var(--primary-dark);
}

/* Celkem řádek v souhrnu — větší font */
.modal-card [style*="font-size:16px"],
.modal-card .celkem-row {
  font-size: 18px !important;
}

/* Select DPH — kompaktnější */
.modal-card table select.form-input,
.modal-card table select.input {
  font-size: 13px;
  font-weight: 500;
}

/* Záhlaví tabulky — uppercase, šedé */
.modal-card table thead th {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
  padding: 10px 6px !important;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

/* Řádky položek — lepší padding */
.modal-card table tbody td {
  padding: 10px 6px !important;
  vertical-align: middle;
}

/* Sudé řádky — lehké pozadí */
.modal-card table tbody tr:nth-child(even) {
  background: rgba(186, 117, 23, 0.03);
}

/* Delete tlačítko — červenější */
.modal-card .btn-danger {
  background: #E53E3E;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
}

/* =========================================================
   REORDER KARTY — karty předchozích objednávek ve formulářích
   ========================================================= */
.reorder-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .reorder-cards { grid-template-columns: 1fr; }
}
.reorder-card {
  background: #F7F8FA;
  border: 1px solid #E8D5B0;
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.reorder-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.15);
  transform: translateY(-1px);
}
.rc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.rc-head strong {
  font-size: 13px;
}
.rc-castka {
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 14px;
}
.rc-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 6px;
}
.rc-items {
  list-style: none;
  margin: 0; padding: 0;
  font-size: 11px;
  color: var(--text-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 8px;
}
.rc-items li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 0;
}
.rc-qty {
  font-weight: 700;
  color: var(--primary-dark);
  display: inline-block;
  min-width: 20px;
}
.rc-more {
  color: var(--text-3);
  font-style: italic;
  grid-column: 1 / -1;
}
.rc-btn {
  margin-top: 8px;
  background: var(--primary);
  color: white;
  border-radius: 6px;
  padding: 6px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s;
}
.reorder-card:hover .rc-btn {
  background: var(--primary-dark);
}

/* Online prodejna tlačítko — zelené */
.btn-kasa-green {
  background: #22863a !important;
  border-color: #22863a !important;
  color: white !important;
}
.btn-kasa-green:hover {
  background: #1a6e2e !important;
}

/* Skrýt number spinner šipky v modálech */
.modal-card input[type="number"]::-webkit-inner-spin-button,
.modal-card input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.modal-card input[type="number"] {
  -moz-appearance: textfield;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}

/* Jednotky (ks) viditelněji */
.modal-card table td:nth-child(2) input[type="text"],
.modal-card table td:nth-child(2) .form-input[type="text"] {
  font-weight: 600 !important;
  font-size: 14px !important;
  text-align: center;
  color: var(--text) !important;
}

/* =========================================================
   MOBILNÍ RESPONSIVITA — admin formuláře
   ========================================================= */
@media (max-width: 768px) {
  /* Modal na celou šířku */
  .modal-card, .modal-body {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
  }
  
  /* Tabulka položek — horizontální scroll */
  .modal-card .card-block,
  .modal-body .card-block {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Formulář — vertikální layout (kromě form-grid-tight, která drží 2 sloupce) */
  .modal-card .form-grid:not(.form-grid-tight),
  .modal-body .form-grid:not(.form-grid-tight) {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  /* form-grid-tight zachovává 2 sloupce (IČO/DIČ, Město/PSČ, Email/Telefon vedle sebe) */
  .modal-card .form-grid-tight,
  .modal-body .form-grid-tight {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 10px !important;
  }
  .modal-card .form-grid-tight .full,
  .modal-body .form-grid-tight .full {
    grid-column: 1 / -1;
  }
  
  /* Reorder karty + VŠECHNY inline 2-sloupcové gridy → 1 sloupec na mobilu (v3.0.317 robustní).
     div[style*="grid-template-columns:1fr "] chytne JAKÝKOLI „1fr <Npx>" sidebar (konfigurátory
     dort 1fr 360px / catering 1fr 380px / kalkulace 1fr 320px / 1fr 140px / 1fr 280px …) i 1fr 1fr;
     div[style*="px 1fr"] chytne obrácené (Npx 1fr). form-grid-tight + .modal-card mají vyšší
     specificitu → ponechají si vlastní mobilní pravidla. Řeší přetékání Kalkulace panelu. */
  .reorder-cards,
  .naklad-row,
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns:1fr "],
  div[style*="grid-template-columns: 1fr "],
  div[style*="px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Form actions — vertikální */
  .form-actions {
    flex-direction: column !important;
  }
  .form-actions .btn-primary,
  .form-actions .btn-green {
    width: 100% !important;
    text-align: center;
  }
}

/* =========================================================
   EXPORT VÝROBY — kompaktní tabulka i na mobilu
   ========================================================= */
@media (max-width: 700px) {
  /* Přebij globální převod tabulek na karty */
  .exv-table { display: table !important; width: 100%; font-size: 11px; table-layout: auto; }
  .exv-table thead { display: table-header-group !important; }
  .exv-table tbody { display: table-row-group !important; }
  .exv-table tfoot { display: table-row-group !important; }
  .exv-table tr { display: table-row !important; }
  .exv-table th,
  .exv-table td {
    display: table-cell !important;
    padding: 6px 4px !important;
    border-top: none !important;
    margin: 0 !important;
    font-size: 11px !important;
    text-align: left;
    background: transparent !important;
    line-height: 1.3;
  }
  .exv-table th { font-size: 10px !important; color: var(--text-3); font-weight: 500; background: var(--surface-2) !important; }
  .exv-table td::before { display: none !important; }
  .exv-table tbody tr {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .exv-table .num { text-align: right !important; white-space: nowrap; }

  /* Drobné sloupce na mobilu skrýt — nevejde se */
  .exv-table .exv-col-hide { display: none !important; }
  .exv-table .exv-col-cislo { width: 30px; color: var(--text-3); font-size: 10px !important; }
  .exv-table .exv-col-jed { width: 32px; color: var(--text-3); font-size: 10px !important; }
  .exv-table tfoot tr { background: #FAEEDA !important; }
  .exv-table tfoot td { font-weight: 700; }
}

/* =========================================================
   PIVOT TABULKA — výrobky × dny v měsíci (Excel-like)
   ========================================================= */
.exv-pivot-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.exv-pivot {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  width: auto;
  min-width: 100%;
  font-size: 12px;
}
.exv-pivot th, .exv-pivot td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid #f0eee8;
  white-space: nowrap;
}
.exv-pivot thead th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--text-2);
  font-size: 11px;
  position: sticky;
  top: 0;
  z-index: 1;
}
/* Sticky první sloupec (název) */
.exv-pivot .exv-pivot-name {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
  min-width: 180px;
  max-width: 240px;
  border-right: 2px solid var(--border);
  text-align: left;
  white-space: normal;
}
.exv-pivot thead .exv-pivot-name {
  background: var(--surface-2);
  z-index: 3;
}
.exv-pivot tbody tr:hover .exv-pivot-name { background: #F7F8FA; }
.exv-pivot tbody tr:hover td { background: rgba(255, 249, 240, 0.3); }

.exv-pivot .exv-pivot-day {
  text-align: center !important;
  min-width: 36px;
  padding: 3px 4px;
}
.exv-pivot .exv-pivot-day-num { font-weight: 700; color: var(--text-1); font-size: 12px; }
.exv-pivot .exv-pivot-day-name { font-size: 9px; color: var(--text-3); text-transform: uppercase; }
.exv-pivot .exv-pivot-day.weekend { background: #F7F8FA; }
.exv-pivot .exv-pivot-day.weekend .exv-pivot-day-num { color: #c95c5c; }

.exv-pivot .exv-pivot-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
}
.exv-pivot .exv-pivot-cell.weekend { background: #F7F8FA; }
.exv-pivot .exv-pivot-cell.has-mn { font-weight: 600; color: #854F0B; }
.exv-pivot .exv-pivot-cell:not(.has-mn) { color: var(--border); }

.exv-pivot .exv-pivot-total {
  text-align: right;
  font-weight: 700;
  background: #FAEEDA;
  color: #854F0B;
  border-left: 2px solid var(--border);
  min-width: 60px;
}
.exv-pivot thead .exv-pivot-total { background: #E5C499; }
.exv-pivot .exv-pivot-price {
  text-align: right;
  font-weight: 600;
  background: #FBF3E1;
  color: #6B3F08;
  min-width: 78px;
  white-space: nowrap;
  font-size: 11px;
}
.exv-pivot thead .exv-pivot-price { background: #E5C499; font-weight: 700; font-size: 10px; }
.exv-pivot tfoot td {
  background: #FAEEDA;
  font-weight: 700;
  border-top: 2px solid var(--border);
}
.exv-pivot tfoot .exv-pivot-name {
  background: #FAEEDA;
}

@media (max-width: 700px) {
  .exv-pivot { font-size: 11px; }
  .exv-pivot .exv-pivot-name { min-width: 130px; max-width: 160px; font-size: 11px; }
  .exv-pivot th, .exv-pivot td { padding: 3px 4px; }
  .exv-pivot .exv-pivot-day { min-width: 30px; }
  .exv-pivot .exv-pivot-day-num { font-size: 11px; }
  .exv-pivot .exv-pivot-day-name { font-size: 8px; }
  .exv-pivot .exv-pivot-cell { min-width: 30px; }
  .exv-pivot .exv-pivot-price { min-width: 70px; font-size: 10px; }
}

/* =========================================================
   MOBILNÍ FIX-UP — přetékání, dlouhý obsah, modal padding
   ========================================================= */
@media (max-width: 700px) {
  /* Modal — FIT TO SCREEN: plná výška dynamic viewport, žádné plování
     na iOS Safari (toolbar show/hide), padding pro safe-area (notch / home bar) */
  .modal-overlay {
    padding: 0;
    align-items: stretch;
  }
  .modal-card,
  .modal-card.modal-wide {
    width: 100%;
    max-width: 100% !important;
    /* Fallback pro starší prohlížeče bez dvh */
    height: 100vh;
    max-height: 100vh;
    /* Dynamic viewport — sleduje viditelnou plochu na iOS Safari */
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;        /* scrolluje jen modal-body, head zůstává nahoře */
    overscroll-behavior: contain;  /* zabrání bounce na iOS */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .modal-head {
    padding: 14px 16px;
    flex: 0 0 auto;           /* fixed nahoře */
  }
  .modal-head h2 { font-size: 15px; line-height: 1.3; padding-right: 8px; }
  .modal-close { font-size: 0; width: 48px; height: 48px; }
  .modal-close::before { font-size: 32px; }
  /* Modal body — víc padding nahoru a dolu (nová FA / OBJ / DL) + scrollable */
  .modal-body {
    padding: 22px 16px 28px;
    flex: 1 1 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal-card.modal-wide .modal-body { padding: 22px 16px 28px; font-size: 14px; }
  .modal-card.modal-wide h3 { font-size: 15px; margin: 16px 0 8px; }
  .modal-card.modal-wide .form-actions button { padding: 10px 16px; font-size: 14px; }
  .modal-card.modal-wide .table th,
  .modal-card.modal-wide .table td { padding: 8px; font-size: 12px; }

  /* Form-actions — tlačítka pod sebou na velmi malých displejích */
  .form-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .form-actions button,
  .form-actions a.btn-primary,
  .form-actions a.btn-secondary {
    flex: 1 1 auto;
    min-width: fit-content;
    padding: 9px 12px;
    font-size: 13px;
  }

  /* Page head — tlačítka pod sebou ne sticky */
  .page-head {
    padding: 0;
  }
  .page-head h1, .page-head .page-title { font-size: 18px; }
  .page-head .page-sub { font-size: 12px; }

  /* Card-block — menší padding */
  .card-block { padding: 12px; }

  /* Štítky a chipy — žádné přetékání */
  .doc-badges-row { flex-wrap: wrap; }

  /* Tabulky uvnitř modalu — auto scroll */
  .modal-body table.table {
    display: block;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Bulk-bar fixed — spodní lišta nesmí překryt obsah */
  .bulk-bar {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px 12px 0 0;
  }
  .bulk-bar-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .bulk-bar-actions button { flex: 1 1 calc(50% - 4px); font-size: 12px; padding: 8px 10px; }

  /* Stat-grid: 2 sloupce stačí */
  .stat-grid { grid-template-columns: 1fr 1fr !important; }

  /* Filtr období — spodní lišta — v2.9.245 NIKDY nezalamovat */
  .quick-period-row { flex-wrap: nowrap; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .quick-period-row .period-tab { flex: 1 1 0; }

  /* Doc-badge — menší */
  .doc-badge { font-size: 10px !important; padding: 2px 6px !important; }

  /* Form grids: vždy max-width 100% */
  .form-grid > div, .form-grid > label { min-width: 0; max-width: 100%; }
  .form-grid input, .form-grid select, .form-grid textarea { max-width: 100%; box-sizing: border-box; }

  /* Velké emoji ikony — menší */
  [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 24px !important; }
  [style*="font-size:36px"], [style*="font-size: 36px"] { font-size: 28px !important; }
  [style*="font-size:42px"], [style*="font-size: 42px"] { font-size: 32px !important; }

  /* Welcome screen v editoru štítků */
  .ed-welcome { padding: 12px !important; }
  .ed-welcome > div:nth-child(2) { font-size: 13px !important; }

  /* Náhled HACCP karty — sidebar + obsah pod sebou */
  div[style*="grid-template-columns:280px 1fr"],
  div[style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns:60mm 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Editor štítků workarea — paleta a properties pod sebou */
  .ed-workarea { grid-template-columns: 1fr !important; gap: 10px; }
  .ed-paleta { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 4px; max-height: none; }
  .ed-paleta-item { font-size: 11px; padding: 6px 4px; }

  /* Cilové tlačítko (Slevy modal) */
  .cilove-tlacitko { padding: 12px 8px; }
  .cilove-tlacitko > div:first-child { font-size: 22px !important; }

  /* Toasts (notifikace dole vpravo) — přes celou šíři */
  div[style*="position:fixed"][style*="bottom:24px"][style*="right:24px"] {
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    max-width: none !important;
  }

  /* Šablona štítku (cenovky preview cell) — auto škálování */
  .st-cell { max-width: 100%; }

  /* Ed-canvas overflow */
  .ed-canvas-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Velmi malé displeje (< 480px) */
@media (max-width: 480px) {
  .main-content { padding: 8px; }
  .modal-head { padding: 10px 12px; }
  .modal-body { padding: 12px; }
  .card-block { padding: 10px; }
  .modal-card.modal-wide .modal-body { padding: 12px; }
  .nav-item { font-size: 10px; padding: 8px 2px; }
  .sidebar-logo strong { font-size: 12px; }
}

/* =========================================================
   PRINT — pro export výroby (skryje sidebar, topbar, tlačítka)
   ========================================================= */
@media print {
  .sidebar, .topbar, .no-print, .page-head .btn-secondary, .page-head .btn-primary { display: none !important; }
  .admin-app { display: block !important; }
  .main-wrap, .main-content { padding: 1cm !important; max-width: none !important; }
  body { background: white !important; font-size: 11px; padding: 0; margin: 0; }
  .stat-card { box-shadow: none !important; border: 1px solid #ccc; }
  .table { font-size: 11px; }
  .table th { background: #f5f5f5 !important; }
  .table tfoot { background: #FAEEDA !important; }
  /* Vlastní vnitřní okraje, @page margin 0 → schová URL/datum z hlavičky/patičky */
  @page { size: A4; margin: 0; }
}

/* ===================================================================
   🩺 DIAGNOSTIKA — zabránit přetékání tabulek (API endpointy / Nedávné změny / JS errors / Auth)
   =================================================================== */
#diag-body { min-width: 0; }
#diag-body .card-block {
  min-width: 0;           /* dovol grid položce smrštit se */
  overflow-x: auto;       /* fallback — pokud by tabulka pořád nestihla, scroll uvnitř karty */
}
#diag-body .card-block > table,
#diag-body .card-block table.table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  word-break: break-word;   /* dlouhé cesty se zalomí */
}
#diag-body .card-block table.table th,
#diag-body .card-block table.table td {
  padding: 5px 7px !important;
  vertical-align: top;
  line-height: 1.35;
}
#diag-body .card-block table.table td[style*="font-family:monospace"],
#diag-body .card-block table.table td[style*="font-family: monospace"] {
  word-break: break-all;    /* monospace cesty rozsekej kdekoli */
  font-size: 11px;
}

/* ===================================================================
   💾 ZÁLOHY TABULKA — desktop styling + mobilní karty
   =================================================================== */
.zalohy-table { table-layout: auto; width: 100%; }
.zalohy-table th,
.zalohy-table td {
  padding: 6px 8px !important;     /* kompaktnější než default tabulka */
  vertical-align: middle;
  line-height: 1.3;
}
.zalohy-table .zaloha-cell-when { white-space: nowrap; min-width: 110px; }
.zalohy-table .zaloha-vytvoril { font-size: 10px; color: var(--text-3); margin-top: 1px; }
.zalohy-table .zaloha-meta { display: none; }   /* 🆕 v2.9.113 — typ+velikost: jen na mobilu (na PC jsou sloupce) */
.zalohy-table .zaloha-actions {
  text-align: right;
  white-space: nowrap;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  flex-wrap: nowrap;                /* akce drž v jedné řadě */
  align-items: center;
}
.zalohy-table .zaloha-btn {
  font-size: 11px;
  padding: 4px 8px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 28px;
}
.zalohy-table .zaloha-btn-del { color: #B91C1C; }

/* Desktop střední šířka — schovej Uploads sloupec aby se vešlo bez overflow */
@media (max-width: 1100px) {
  .zalohy-table th:nth-of-type(7),
  .zalohy-table td:nth-of-type(7) { display: none; }   /* Uploads */
}
@media (max-width: 900px) and (min-width: 701px) {
  .zalohy-table th:nth-of-type(4),
  .zalohy-table td:nth-of-type(4),
  .zalohy-table th:nth-of-type(5),
  .zalohy-table td:nth-of-type(5) { display: none; }   /* Tabulek, Záznamů */
}

/* 🆕 v3.0.368 — Desktop: zálohy panel je půl-šířky (~410px vedle Diagnostiky) → 8 sloupců
   přetékalo (horizontální scroll). Kompaktní layout: zůstane Datum (+ typ/velikost v meta pod ním)
   | Popis | Akce jako úzký sloupec ikon (title tooltip). Detaily (tabulek/záznamů) jsou v „ℹ️ Info & CRON". */
@media (min-width: 701px) {
  #ns-zalohy-list { overflow-x: auto; }
  .zalohy-table .zaloha-col-hide { display: none; }              /* Typ/Tabulek/Záznamů/Velikost/Uploads sloupce → do meta */
  .zalohy-table .zaloha-meta { display: block; font-size: 10px; color: var(--text-3); margin-top: 2px; }
  .zalohy-table .zaloha-cell-when { min-width: 92px; }
  .zalohy-table .zaloha-actions { flex-direction: column; gap: 3px; align-items: stretch; }
  .zalohy-table .zaloha-btn { font-size: 0; padding: 4px 6px; }
  .zalohy-table .zaloha-btn::before { content: attr(data-icon); font-size: 14px; }
}

@media (max-width: 700px) {
  /* Schovat metadata — na mobilu jen datum + popis + akce v jednom řádku */
  .zalohy-table .zaloha-col-hide { display: none !important; }
  .zalohy-table thead { display: none; }

  /* Každá záloha je kompaktní vodorovný řádek (NE karta) */
  .zalohy-table { display: block; }
  .zalohy-table tbody { display: block; }
  .zalohy-table tbody tr {
    display: flex;
    flex-wrap: wrap;            /* 🆕 v2.9.113 — radši zalomí akce dolů než přetečení vpravo */
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: transparent;
  }
  .zalohy-table tbody tr:last-child { border-bottom: none; }

  /* Datum vlevo — kompaktní */
  .zalohy-table .zaloha-cell-when {
    display: block;
    flex: 0 0 auto;
    white-space: nowrap;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.25;
  }
  .zalohy-table .zaloha-cell-when::before { display: none; }
  .zalohy-table .zaloha-cell-when strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
  }
  .zalohy-table .zaloha-vytvoril { display: none; }
  /* 🆕 v2.9.113 — typ + velikost zálohy viditelné na mobilu (ať víš, jakou) */
  .zalohy-table .zaloha-meta {
    display: block;
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 1px;
    white-space: nowrap;
  }

  /* Popis (label zálohy) — uprostřed, vezme volný prostor */
  .zalohy-table tbody tr td:nth-of-type(3) {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    border: none !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .zalohy-table tbody tr td:nth-of-type(3)::before { display: none; }

  /* Akce — vpravo, jen ikony bez popisků (pomocí data atributu) */
  .zalohy-table .zaloha-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
  }
  .zalohy-table .zaloha-btn {
    flex: 0 0 auto;
    font-size: 0;             /* schová text */
    padding: 6px 8px;
    width: 32px;
    height: 32px;
    line-height: 1;
    text-align: center;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
  }
  /* Ikony injektneme přes ::before podle data-icon */
  .zalohy-table .zaloha-btn::before {
    content: attr(data-icon);
    font-size: 15px;
    line-height: 1;
    color: var(--text);
  }
  .zalohy-table .zaloha-btn-del::before { color: #B91C1C; }
}

/* ===================================================================
   🔐 PRÁVA V MENU PODLE ROLE — editor v Uživatelé
   =================================================================== */
.role-prava-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.role-prava-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-prava-col.is-readonly {
  opacity: 0.7;
  background: var(--surface-2);
}
.role-prava-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
.role-prava-head strong {
  display: block;
  font-size: 14px;
  color: var(--text-1);
}
.role-prava-head small {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.3;
}
.role-prava-pages {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.role-prava-page {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
  transition: background 0.12s, color 0.12s;
  user-select: none;
}
.role-prava-page input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}
.role-prava-page:hover { background: var(--surface-2); }
.role-prava-page.is-checked {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}
.role-prava-page.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.role-prava-page-icon { font-size: 14px; flex-shrink: 0; }
.role-prava-page-label { flex: 1; }

@media (max-width: 700px) {
  .role-prava-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   🏷️ Statusové štítky v editoru výrobku (Akce / Novinka / Doprodej / Vyprodáno)
   =================================================================== */
.vy-stitky-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}
.vy-stitek-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.vy-stitek-toggle:hover {
  border-color: var(--primary-border);
  box-shadow: 0 2px 6px rgba(186, 117, 23, 0.08);
}
.vy-stitek-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
.vy-stitek-toggle:has(input:checked) {
  border-color: var(--primary);
  background: linear-gradient(135deg, #FBFCFD 0%, #FFF8E7 100%);
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.15);
}
.vy-stitek-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.15s;
}
.vy-stitek-toggle:has(input:checked) .vy-stitek-badge { opacity: 1; }
.vy-stitek-toggle small {
  flex: 1;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.3;
}


/* =========================================================
   📱 LANDSCAPE PHONE + 📲 TABLET — 700-1100 px
   Doplnění chybějících breakpointů — landscape mobil/malý tablet
   padá mimo "mobile" (max 700) a "desktop" (1100+)
   ========================================================= */
@media (min-width: 701px) and (max-width: 1100px) {
  /* Sidebar užší — víc místa pro obsah na landscape mobilu / tabletu */
  .admin-app { grid-template-columns: 220px 1fr; }
  .sidebar { padding: 14px 10px; }
  .sidebar-logo { padding: 0 8px 14px; margin-bottom: 12px; }
  .sidebar-logo strong { font-size: 14px; }
  .sidebar-logo .logo-icon { width: 38px; height: 38px; font-size: 15px; }

  .nav-item {
    font-size: 14px;
    padding: 12px 12px;
    gap: 10px;
  }
  .nav-icon { font-size: 17px; }

  /* Topbar kompaktnější */
  .topbar { padding: 12px 16px; gap: 8px; }
  .topbar-user { gap: 6px; font-size: 13px; }
  .topbar-user-greet { display: none; }                   /* "Vítejte," skrýt */
  .topbar-sep { display: none; }
  .topbar-datum-svatek { font-size: 12px; padding: 4px 10px; }
  .topbar-actions { gap: 6px; }
  .btn-prodejna, .btn-fullscreen, .btn-logout {
    padding: 7px 12px;
    font-size: 13px;
  }

  /* Page-head — flex row */
  .page-head { gap: 10px; }
  .page-head h1, .page-head .page-title { font-size: 22px; }

  /* Modaly — center + max-width místo bottom sheet */
  .modal-overlay { padding: 16px; align-items: center; }
  .modal-card { max-width: 90vw !important; max-height: 92vh; border-radius: 12px; }
  .modal-card.modal-wide { max-width: 95vw !important; }
  .modal-head { padding: 16px 22px; }
  .modal-body { padding: 18px 22px; }

  /* Form-grid 1fr 1fr zůstává */
  .form-grid, .form-grid-tight {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Stat-grid 4 sloupce na tabletu */
  .stat-grid { grid-template-columns: repeat(4, 1fr) !important; }
  /* 🆕 v3.0.161 — ale 4 sloupce dávají smysl JEN pro dashboard (.stat-grid-dash = 4 karty,
     hodnota škáluje přes cqi). Obecné stat-gridy (Objednávky/Faktury = 3 karty, fixní 24px
     hodnota) ve 4 úzkých sloupcích ořezávaly částku („34 268,6…"). Auto-fit + menší hodnota
     → karty dost široké, nic neuteče. Dashboard i .stat-grid-2col beze změny (vyloučeny). */
  .stat-grid:not(.stat-grid-dash):not(.stat-grid-2col) { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; }
  .stat-grid:not(.stat-grid-dash):not(.stat-grid-2col) .stat-value { font-size: 20px; }

  /* Dashboard recent — 2 sloupce */
  .dashboard-recent-row { grid-template-columns: 1fr 1fr !important; }
  /* 🆕 v3.0.157 — poslední lichá karta přes obě kolony (žádné prázdné místo) */
  .dashboard-recent-row > .recent-card:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }

  /* Větší klikatelné prvky pro touch */
  .btn-primary, .btn-secondary { min-height: 40px; padding: 10px 16px; }
  .form-input, .form-select, input.input, select.input { min-height: 40px; }

  /* Tabulky — širší padding pro touch */
  .table th { padding: 10px 12px; font-size: 12px; }
  .table td { padding: 12px; font-size: 14px; }
}

/* Landscape mobil (≤ 900px width + landscape) — speciální úpravy */
@media (max-height: 500px) and (orientation: landscape) {
  /* Sidebar úžeji v landscape mobilu */
  .admin-app { grid-template-columns: 180px 1fr; }
  .sidebar { padding: 8px 6px; }
  .nav-item { padding: 8px 10px; font-size: 13px; min-height: 36px; }
  .nav-icon { font-size: 15px; }
  .sidebar-logo { padding: 0 4px 8px; margin-bottom: 8px; }
  .sidebar-logo strong { display: none; }                /* schovej pekařský */
  .sidebar-logo .logo-icon { width: 32px; height: 32px; font-size: 13px; }

  /* Topbar úsporný */
  .topbar { padding: 8px 12px; }
  .topbar-datum-svatek { display: none; }

  /* Modal — full-height na úzký landscape */
  .modal-card { max-height: 96vh !important; }
  .modal-head { padding: 10px 16px; }
  .modal-body { padding: 12px 16px; }
}

/* === Velká primární tlačítka pro Novou objednávku / fakturu / DL / odběratele / atd. === */
.btn-big-action {
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 14px 24px !important;
  min-height: 52px !important;
  border-radius: 10px !important;
  letter-spacing: 0.2px;
  box-shadow:
    0 2px 5px rgba(186, 117, 23, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
  transition: all 0.15s ease;
}
.btn-big-action.btn-green {
  box-shadow:
    0 2px 5px rgba(30, 142, 62, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.btn-big-action:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 10px rgba(186, 117, 23, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.btn-big-action.btn-green:hover {
  box-shadow:
    0 4px 10px rgba(30, 142, 62, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.btn-big-action:active {
  transform: translateY(0);
}
@media (max-width: 700px) {
  .btn-big-action {
    font-size: 15px !important;
    padding: 14px 18px !important;
    min-height: 54px !important;
    width: 100% !important;
  }
}

/* =============================================================
   🎨 THEME CARDS — výběr vzhledu v Nastavení
   ============================================================= */
.theme-card { transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.theme-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); border-color: var(--primary) !important; }
.theme-card.is-active { box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.15); }

/* =============================================================
   🌙 DARK THEME — kompletní paleta pro tmavý režim
   Aplikuje se na html.dark i html.theme-dark (kompatibilní).
   ============================================================= */
html.theme-dark, html.dark {
  --bg: #1a1a1a;
  --surface: #242424;
  --surface-1: #242424;
  --surface-2: #2e2e2e;
  --text: #e8e8e8;
  --text-1: #f5f5f5;
  --text-2: #c8c8c8;
  --text-3: #999999;
  --border: rgba(255, 255, 255, 0.10);
  --border-2: rgba(255, 255, 255, 0.18);
  --primary: #D89940;
  --primary-dark: #BA7517;
  --primary-light: rgba(216, 153, 64, 0.18);
  --primary-border: rgba(216, 153, 64, 0.40);
  --success-bg: rgba(34, 134, 58, 0.18);
  --success-text: #6dd58a;
  --danger-bg: rgba(220, 38, 38, 0.18);
  --danger-text: #f87171;
  --info-bg: rgba(60, 100, 180, 0.18);
  --info-text: #93c5fd;
  --err: #f87171;
}
html.theme-dark body, html.dark body {
  background: var(--bg);
  color: var(--text);
}
/* Layout */
html.theme-dark .admin-app, html.dark .admin-app { background: var(--bg); }
html.theme-dark .main-wrap, html.dark .main-wrap { background: var(--bg); }
html.theme-dark .main-content, html.dark .main-content { background: var(--bg); color: var(--text); }
html.theme-dark .sidebar, html.dark .sidebar { background: var(--surface); border-right: 1px solid var(--border); }
html.theme-dark .topbar, html.dark .topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
/* Nav-item base — přebíjíme světlý gradient z .nav-item (linear-gradient(180deg, #FFFFFF 0%, #F7F4EC 100%)) */
html.theme-dark .nav-item, html.dark .nav-item {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 1px 2px rgba(0, 0, 0, 0.25) !important;
  text-shadow: none !important;
}
html.theme-dark .nav-item:hover, html.dark .nav-item:hover {
  background: linear-gradient(180deg, var(--surface-2) 0%, rgba(216, 153, 64, 0.10) 100%) !important;
  border-color: rgba(216, 153, 64, 0.40) !important;
  color: var(--text) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 2px 8px rgba(216, 153, 64, 0.18) !important;
}
html.theme-dark .nav-item:active, html.dark .nav-item:active {
  background: linear-gradient(180deg, rgba(216, 153, 64, 0.12) 0%, var(--surface-2) 100%) !important;
}
html.theme-dark .nav-item.active, html.dark .nav-item.active {
  background: linear-gradient(180deg, #D89940 0%, #A36513 100%) !important;
  border-color: #854F0B !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 2px 8px rgba(216, 153, 64, 0.30) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.30) !important;
}
html.theme-dark .nav-item.active:hover, html.dark .nav-item.active:hover {
  background: linear-gradient(180deg, #E5A050 0%, #B27015 100%) !important;
}
html.theme-dark .nav-icon, html.dark .nav-icon {
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.30));
}
html.theme-dark .nav-item.active .nav-icon, html.dark .nav-item.active .nav-icon {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.40));
}

/* Sidebar border-right v darku */
html.theme-dark .sidebar, html.dark .sidebar {
  background: var(--surface) !important;
  border-right-color: var(--border) !important;
}

/* Karty / boxy */
html.theme-dark .card-block, html.dark .card-block { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
html.theme-dark .modal-card, html.dark .modal-card { background: var(--surface); border: 1px solid var(--border); }
html.theme-dark .modal-head, html.dark .modal-head { border-bottom: 1px solid var(--border); }
html.theme-dark .modal-head h2, html.dark .modal-head h2 { color: var(--text); }
html.theme-dark .modal-overlay, html.dark .modal-overlay { background: rgba(0, 0, 0, 0.7); }

/* Formuláře */
html.theme-dark .form-input, html.dark .form-input,
html.theme-dark .form-select, html.dark .form-select,
html.theme-dark .form-textarea, html.dark .form-textarea,
html.theme-dark .filter-input, html.dark .filter-input,
html.theme-dark .filter-select, html.dark .filter-select,
html.theme-dark input[type=text], html.dark input[type=text],
html.theme-dark input[type=number], html.dark input[type=number],
html.theme-dark input[type=email], html.dark input[type=email],
html.theme-dark input[type=password], html.dark input[type=password],
html.theme-dark input[type=search], html.dark input[type=search],
html.theme-dark input[type=date], html.dark input[type=date],
html.theme-dark select, html.dark select,
html.theme-dark textarea, html.dark textarea {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-2);
}
html.theme-dark .form-input::placeholder, html.dark .form-input::placeholder { color: var(--text-3); }
html.theme-dark .form-label, html.dark .form-label { color: var(--text-3); }

/* Tlačítka */
html.theme-dark .btn-secondary, html.dark .btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-2);
}
html.theme-dark .btn-secondary:hover, html.dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary-border);
}

/* Tabulky */
html.theme-dark .table, html.dark .table { color: var(--text); }
html.theme-dark .table thead, html.dark .table thead { background: var(--surface-2); }
html.theme-dark .table th, html.dark .table th { color: var(--text-2); border-bottom: 1px solid var(--border); }
html.theme-dark .table td, html.dark .table td { border-bottom: 1px solid var(--border); }
html.theme-dark .table tr:hover, html.dark .table tr:hover { background: rgba(255, 255, 255, 0.04); }
html.theme-dark .row-clickable:hover, html.dark .row-clickable:hover { background: rgba(216, 153, 64, 0.08); }

/* Taby a pillsy */
html.theme-dark .period-tab, html.dark .period-tab,
html.theme-dark .tab, html.dark .tab,
html.theme-dark .kat-btn, html.dark .kat-btn {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
html.theme-dark .period-tab.active, html.dark .period-tab.active,
html.theme-dark .tab.active, html.dark .tab.active,
html.theme-dark .kat-btn.active, html.dark .kat-btn.active {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary-border);
}

/* Stat cards */
html.theme-dark .stat-card, html.dark .stat-card { background: var(--surface); border: 1px solid var(--border); }
html.theme-dark .stat-value, html.dark .stat-value { color: var(--text); }
html.theme-dark .stat-label, html.dark .stat-label { color: var(--text-3); }

/* Recent cards (dashboard) */
html.theme-dark .recent-card, html.dark .recent-card { background: var(--surface) !important; border: 1px solid var(--border) !important; }
html.theme-dark .recent-card.recent-obj .recent-card-head h3, html.dark .recent-card.recent-obj .recent-card-head h3 { color: #93c5fd; }
html.theme-dark .recent-card.recent-dl .recent-card-head h3, html.dark .recent-card.recent-dl .recent-card-head h3 { color: #fbbf24; }
html.theme-dark .recent-card.recent-fa .recent-card-head h3, html.dark .recent-card.recent-fa .recent-card-head h3 { color: #6dd58a; }

/* Page titles */
html.theme-dark .page-title, html.dark .page-title { color: var(--text); }
html.theme-dark .page-sub, html.dark .page-sub { color: var(--text-3); }

/* Empty state */
html.theme-dark .empty-state, html.dark .empty-state { color: var(--text-3); background: var(--surface-2); }

/* Cenovky preview — VŽDY bílá (papír) i v darku */
html.theme-dark .sab-mini-preview, html.dark .sab-mini-preview { background: #fff !important; border: 1px solid #d4d4d8 !important; }
html.theme-dark .sab-mini-inner .st-cell-sablona, html.dark .sab-mini-inner .st-cell-sablona { background: #fff !important; color: #000 !important; }
html.theme-dark .st-grid-wrap, html.dark .st-grid-wrap { background: #f7f8fa !important; border: 1px solid var(--border) !important; }

/* Login screen */
html.theme-dark .login-screen, html.dark .login-screen {
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
}
html.theme-dark .login-card, html.dark .login-card { background: var(--surface); border: 1px solid var(--border); }
html.theme-dark .login-card h1, html.dark .login-card h1 { color: var(--text); }

/* Filters bar */
html.theme-dark .filters, html.dark .filters { background: var(--surface); border: 1px solid var(--border); }

/* Bulk bar (selection) */
html.theme-dark .bulk-bar, html.dark .bulk-bar { background: var(--surface); border-top: 1px solid var(--border-2); color: var(--text); }

/* Nastavení taby */
html.theme-dark .nastaveni-tabs, html.dark .nastaveni-tabs { background: var(--surface-2); border: 1px solid var(--border); }
html.theme-dark .nastaveni-tab, html.dark .nastaveni-tab { color: var(--text-2); }
html.theme-dark .nastaveni-tab.active, html.dark .nastaveni-tab.active { background: var(--primary); color: #fff; }

/* Step hint */
html.theme-dark .st-step-hint, html.dark .st-step-hint {
  background: linear-gradient(90deg, rgba(216, 153, 64, 0.12), rgba(216, 153, 64, 0.02));
  color: var(--text-2);
  border-left-color: var(--primary);
}

/* Picker panel */
html.theme-dark .sab-picker-panel, html.dark .sab-picker-panel { background: var(--surface) !important; border: 1px solid var(--border) !important; }
html.theme-dark .sab-picker-btn, html.dark .sab-picker-btn { background: var(--surface-2) !important; border-color: var(--border-2) !important; }
html.theme-dark .sab-card, html.dark .sab-card { background: var(--surface-2) !important; border-color: var(--border) !important; }
html.theme-dark .sab-card.is-active, html.dark .sab-card.is-active { background: rgba(216, 153, 64, 0.20) !important; border-color: var(--primary) !important; }

/* Doc badges - tlumené v darku */
html.theme-dark .doc-badge, html.dark .doc-badge { filter: brightness(0.92); }

/* Status badges */
html.theme-dark .status.nova, html.dark .status.nova { background: rgba(60, 100, 180, 0.25); color: #93c5fd; }
html.theme-dark .status.potvrzena, html.dark .status.potvrzena { background: rgba(34, 134, 58, 0.25); color: #6dd58a; }
html.theme-dark .status.ve_vyrobe, html.dark .status.ve_vyrobe { background: rgba(216, 153, 64, 0.25); color: #fbbf24; }
html.theme-dark .status.zrusena, html.dark .status.zrusena { background: rgba(220, 38, 38, 0.25); color: #f87171; }

/* Toolbar buttons (topbar) */
html.theme-dark .icon-btn, html.dark .icon-btn,
html.theme-dark .btn-fullscreen, html.dark .btn-fullscreen,
html.theme-dark .btn-logout, html.dark .btn-logout {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-2);
}

/* 🛒 Online prodejna (zelený košík) — v dark mode zachováme zelený gradient,
   ale text dáme černý pro lepší kontrast/čitelnost (na světle zeleném pozadí
   bílý text na ostrém darku trochu „svítí"). */
html.theme-dark .btn-prodejna, html.dark .btn-prodejna {
  color: #0a0a0a !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30);
  font-weight: 700;
  border-color: #166534;
}
html.theme-dark .btn-prodejna .btn-prodejna-icon,
html.dark .btn-prodejna .btn-prodejna-icon,
html.theme-dark .btn-prodejna .btn-prodejna-arrow,
html.dark .btn-prodejna .btn-prodejna-arrow {
  filter: none;
  color: #0a0a0a;
}

/* ✉️ Envelope ikonka v dark mode — zachovej zelený motiv,
   jen ztmav pozadí a fonta dej světlejší zelený */
html.theme-dark .btn-icon-corner, html.dark .btn-icon-corner {
  background: rgba(34, 134, 58, 0.18);
  border-color: #22863a;
  color: #4ADE80;
}
html.theme-dark .btn-icon-corner:hover, html.dark .btn-icon-corner:hover {
  background: rgba(34, 134, 58, 0.30);
  border-color: #4ADE80;
}

/* Sidebar pin */
html.theme-dark .sidebar-pin, html.dark .sidebar-pin {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* Scrollbar — diskrétní v darku */
html.theme-dark ::-webkit-scrollbar, html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.theme-dark ::-webkit-scrollbar-track, html.dark ::-webkit-scrollbar-track { background: var(--bg); }
html.theme-dark ::-webkit-scrollbar-thumb, html.dark ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
html.theme-dark ::-webkit-scrollbar-thumb:hover, html.dark ::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* =============================================================
   🪟 WINDOWS 98 RETRO THEME
   Aplikuje se na html.theme-win98 — všechny změny pouze vizuální,
   funkčnost zůstává plně zachována. Inspirováno autentickým Win98 UI.
   ============================================================= */
html.theme-win98 {
  /* Override CSS variables */
  --bg: #008080;                /* teal classic desktop pozadí */
  --surface: #C0C0C0;           /* hlavní šedá */
  --surface-1: #C0C0C0;
  --surface-2: #DFDFDF;         /* světlejší šedá */
  --text: #000000;
  --text-1: #000000;
  --text-2: #222222;
  --text-3: #555555;
  --border: #808080;            /* tmavá hrana */
  --border-2: #404040;          /* ještě tmavší */
  --primary: #000080;           /* navy */
  --primary-dark: #000060;
  --primary-light: #E1E1FF;
  --primary-border: #000080;
  --radius-md: 0;
  --radius-lg: 0;
  --success-bg: #DFDFDF;
  --success-text: #006400;
  --danger-bg: #FFE0E0;
  --danger-text: #800000;
  --info-bg: #FFFFD8;
  --info-text: #000080;
}
html.theme-win98 body {
  background: #008080;
  font-family: "MS Sans Serif", Tahoma, "Segoe UI", sans-serif;
  font-size: 13px;
  color: #000;
}
/* Sharp corners VŠUDE */
html.theme-win98 *, html.theme-win98 *::before, html.theme-win98 *::after {
  border-radius: 0 !important;
}
/* Hlavní layout */
html.theme-win98 .admin-app { background: #008080; }
html.theme-win98 .sidebar {
  background: #C0C0C0;
  border-right: 2px solid #404040;
  box-shadow: inset -1px 0 0 #808080;
}
html.theme-win98 .sidebar-logo { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; padding: 8px; }
html.theme-win98 .sidebar-logo strong, html.theme-win98 .sidebar-logo > * { color: #fff !important; }
html.theme-win98 .logo-icon { background: #fff; color: #000080; border: 2px outset #DFDFDF; }
html.theme-win98 .nav-item {
  background: #C0C0C0;
  color: #000;
  border: none;
  border-bottom: 1px solid #808080;
  font-weight: 400;
}
html.theme-win98 .nav-item:hover { background: #000080; color: #fff; }
html.theme-win98 .nav-item.active { background: #000080; color: #fff; font-weight: 700; }
html.theme-win98 .main-wrap { background: #C0C0C0; }
html.theme-win98 .main-content { background: #C0C0C0; }
html.theme-win98 .topbar {
  background: linear-gradient(180deg, #DFDFDF, #C0C0C0);
  border-bottom: 1px solid #808080;
  box-shadow: inset 0 -1px 0 #fff, inset 0 -2px 0 #404040;
}

/* Tlačítka — 3D zkosený Windows look */
html.theme-win98 .btn-primary,
html.theme-win98 .btn-secondary,
html.theme-win98 .btn-green,
html.theme-win98 .btn-danger,
html.theme-win98 button:not(.modal-close):not(.nav-item):not(.tab):not(.kat-btn):not(.period-tab):not(.theme-card):not(.sab-picker-btn):not(.sab-card):not(.sab-picker-arrow) {
  background: #C0C0C0 !important;
  color: #000 !important;
  border: 2px outset #DFDFDF !important;
  border-radius: 0 !important;
  font-family: "MS Sans Serif", Tahoma, sans-serif !important;
  font-weight: 400 !important;
  padding: 4px 14px !important;
  box-shadow: none !important;
  text-transform: none !important;
}
html.theme-win98 .btn-primary { font-weight: 700 !important; }
html.theme-win98 .btn-primary:hover,
html.theme-win98 .btn-secondary:hover,
html.theme-win98 .btn-green:hover {
  background: #C0C0C0 !important;
  filter: none !important;
}
html.theme-win98 .btn-primary:active,
html.theme-win98 .btn-secondary:active,
html.theme-win98 .btn-green:active,
html.theme-win98 button:not(.modal-close):not(.nav-item):active {
  border-style: inset !important;
}
html.theme-win98 .btn-danger { color: #800000 !important; }

/* Velká akční tlačítka (+ Nová) — zachovat funkční velikost, jen styl Win98 */
html.theme-win98 .btn-big-action {
  background: #C0C0C0 !important;
  color: #000 !important;
  border: 2px outset #DFDFDF !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* Formuláře */
html.theme-win98 .form-input,
html.theme-win98 .form-select,
html.theme-win98 .form-textarea,
html.theme-win98 .filter-input,
html.theme-win98 .filter-select,
html.theme-win98 input[type=text],
html.theme-win98 input[type=number],
html.theme-win98 input[type=email],
html.theme-win98 input[type=password],
html.theme-win98 input[type=search],
html.theme-win98 input[type=date],
html.theme-win98 select,
html.theme-win98 textarea {
  background: #fff !important;
  color: #000 !important;
  border: 2px inset #DFDFDF !important;
  border-radius: 0 !important;
  font-family: "MS Sans Serif", Tahoma, sans-serif !important;
  font-size: 13px !important;
  padding: 4px 6px !important;
}
html.theme-win98 .form-label {
  color: #000 !important;
  text-transform: none !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
}

/* Karty / boxy */
html.theme-win98 .card-block {
  background: #C0C0C0 !important;
  border: 2px outset #DFDFDF !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.theme-win98 .modal-card {
  background: #C0C0C0 !important;
  border: 2px outset #DFDFDF !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 #000 !important;
}
html.theme-win98 .modal-head {
  background: linear-gradient(90deg, #000080, #1084d0) !important;
  color: #fff !important;
  border-bottom: none !important;
  padding: 4px 8px !important;
}
html.theme-win98 .modal-head h2 { color: #fff !important; font-size: 14px !important; font-weight: 700 !important; }
html.theme-win98 .modal-close {
  background: #C0C0C0 !important;
  color: #000 !important;
  border: 2px outset #DFDFDF !important;
  border-radius: 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  width: 36px !important;
  height: 36px !important;
}
html.theme-win98 .modal-close:hover {
  background: #C0C0C0 !important;
  transform: none !important;
}
html.theme-win98 .modal-close:active {
  border: 2px inset #DFDFDF !important;
}

/* Tabulky */
html.theme-win98 .table {
  background: #fff !important;
  border: 2px inset #DFDFDF !important;
}
html.theme-win98 .table thead { background: #C0C0C0 !important; }
html.theme-win98 .table th { background: #C0C0C0 !important; color: #000 !important; border-bottom: 2px solid #808080 !important; font-weight: 700 !important; padding: 4px 8px !important; }
html.theme-win98 .table td { border-bottom: 1px solid #DFDFDF !important; padding: 4px 8px !important; }
html.theme-win98 .table tr:hover { background: #DFDFDF !important; }
html.theme-win98 .row-clickable:hover { background: #000080 !important; color: #fff !important; }
html.theme-win98 .row-clickable:hover td { color: #fff !important; }

/* Period taby a kategorie pillsy → klasické Win98 taby */
html.theme-win98 .period-tab,
html.theme-win98 .tab,
html.theme-win98 .kat-btn,
html.theme-win98 .nastaveni-tab {
  background: #C0C0C0 !important;
  color: #000 !important;
  border: 2px outset #DFDFDF !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
}
html.theme-win98 .period-tab.active,
html.theme-win98 .tab.active,
html.theme-win98 .kat-btn.active,
html.theme-win98 .nastaveni-tab.active {
  background: #DFDFDF !important;
  border-style: inset !important;
  font-weight: 700 !important;
}

/* Status badges */
html.theme-win98 .status,
html.theme-win98 .doc-badge {
  background: #C0C0C0 !important;   /* 🆕 v3.0.180 — dřív jen border → barevné varianty (.dl/.fa/.obj) prosvítaly */
  color: #000 !important;
  border: 1px outset #DFDFDF !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 400 !important;
}
html.theme-win98 a.doc-badge:hover { background: #000080 !important; color: #fff !important; }
html.theme-win98 .doc-badge.is-disabled { color: #808080 !important; border-style: inset !important; }

/* Step-hints — Win98 styl (ne gradient) */
html.theme-win98 .st-step-hint {
  background: #FFFFD8 !important;
  border: 1px solid #808080 !important;
  border-left: 3px solid #000080 !important;
  border-radius: 0 !important;
}
html.theme-win98 .st-step-hint .st-step-num {
  background: #000080 !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: 1px 1px 0 #000 !important;
}

/* Picker šablony */
html.theme-win98 .sab-picker-btn { background: #fff !important; border: 2px inset #DFDFDF !important; }
html.theme-win98 .sab-picker-panel { background: #C0C0C0 !important; border: 2px outset #DFDFDF !important; box-shadow: 2px 2px 0 #000 !important; }
html.theme-win98 .sab-card { background: #C0C0C0 !important; border: 2px outset #DFDFDF !important; }
html.theme-win98 .sab-card.is-active { background: #000080 !important; color: #fff !important; border-style: inset !important; }

/* Sidebar + topbar pin button */
html.theme-win98 .sidebar-pin { background: #C0C0C0 !important; border: 2px outset #DFDFDF !important; color: #000 !important; }
html.theme-win98 .btn-prodejna,
html.theme-win98 .btn-fullscreen,
html.theme-win98 .btn-logout {
  background: #C0C0C0 !important;
  color: #000 !important;
  border: 2px outset #DFDFDF !important;
  border-radius: 0 !important;
}

/* Login screen */
html.theme-win98 .login-screen { background: #008080 !important; }
html.theme-win98 .login-card {
  background: #C0C0C0 !important;
  border: 2px outset #DFDFDF !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 #000 !important;
}

/* Scroll-to-top */
html.theme-win98 .scroll-top-btn {
  background: #C0C0C0 !important;
  color: #000 !important;
  border: 2px outset #DFDFDF !important;
  border-radius: 0 !important;
}

/* Bulk bar */
html.theme-win98 .bulk-bar {
  background: #C0C0C0 !important;
  border: 2px outset #DFDFDF !important;
  color: #000 !important;
}

/* Modal overlay */
html.theme-win98 .modal-overlay { background: rgba(0, 0, 0, 0.4); }

/* Cenovky náhled — VŽDY bílá (papír), bez ohledu na téma */
html.theme-win98 .sab-mini-preview { background: #fff !important; border: 1px solid #404040 !important; }
html.theme-win98 .sab-mini-inner .st-cell-sablona { background: #fff !important; color: #000 !important; }

/* Štítky/cenovky grid náhled — bílá */
html.theme-win98 .st-grid-wrap { background: #fff !important; border: 2px inset #DFDFDF !important; }

/* Page titles */
html.theme-win98 .page-title { color: #000 !important; font-weight: 700 !important; }
html.theme-win98 .page-sub { color: #404040 !important; }

/* Stat cards na dashboardu */
html.theme-win98 .stat-card {
  background: #C0C0C0 !important;
  border: 2px outset #DFDFDF !important;
  border-radius: 0 !important;
}
html.theme-win98 .stat-value { color: #000 !important; font-weight: 700 !important; }
html.theme-win98 .stat-label { color: #404040 !important; }

/* Recent cards (dashboard) */
html.theme-win98 .recent-card { background: #C0C0C0 !important; border: 2px outset #DFDFDF !important; border-radius: 0 !important; }
html.theme-win98 .recent-card-head { background: linear-gradient(90deg, #000080, #1084d0) !important; padding: 3px 6px !important; }
html.theme-win98 .recent-card-head h3 { color: #fff !important; font-size: 12px !important; }

/* Win98 — scrollbars (Chromium/WebKit) */
html.theme-win98 ::-webkit-scrollbar { width: 16px; height: 16px; }
html.theme-win98 ::-webkit-scrollbar-track { background: #DFDFDF; }
html.theme-win98 ::-webkit-scrollbar-thumb { background: #C0C0C0; border: 2px outset #DFDFDF; }
html.theme-win98 ::-webkit-scrollbar-button { background: #C0C0C0; border: 2px outset #DFDFDF; height: 16px; width: 16px; }

/* =========================================================
   ODBERATELE — typové pillsy (kategorie) + badge v řádku
   ========================================================= */
.odb-typ-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 12px;
  padding: 4px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.odb-typ-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: inherit;
  min-height: 52px;
  line-height: 1.2;
  letter-spacing: 0.2px;
}
/* Ikona — velká */
.odb-typ-pill-ico {
  font-size: 26px;
  line-height: 1;
  display: inline-block;
}
/* Label */
.odb-typ-pill-lbl {
  font-size: 16px;
  font-weight: 700;
}
.odb-typ-pill:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft, #FCF4E5);
  color: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.12);
}
.odb-typ-pill.is-active {
  background: var(--primary, #BA7517);
  border-color: var(--primary, #BA7517);
  color: #fff;
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.30);
}
.odb-typ-pill-count {
  display: inline-block;
  min-width: 28px;
  padding: 2px 10px;
  background: rgba(0, 0, 0, 0.10);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}
.odb-typ-pill.is-active .odb-typ-pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.odb-typ-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--primary-soft, #FCF4E5);
  border: 1px solid var(--primary-border, #E8D5B0);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-dark, #854F0B);
  letter-spacing: 0.1px;
}
.odb-typ-badge::first-letter {
  font-size: 16px;
  line-height: 1;
}
@media (max-width: 700px) {
  .odb-typ-pills { gap: 8px; padding-bottom: 2px; }
  .odb-typ-pill {
    font-size: 14px;
    padding: 10px 16px;
    min-height: 46px;
    gap: 8px;
  }
  .odb-typ-pill-ico { font-size: 22px; }
  .odb-typ-pill-lbl { font-size: 14px; }
  .odb-typ-pill-count { font-size: 13px; min-width: 24px; padding: 2px 8px; }
}

/* =========================================================
   📋 MOJE ŠTÍTKY — "Vyplnit z výrobku" picker (searchable)
   ========================================================= */
.ms-fill-from-vyrobek-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px dashed var(--primary-border, #E8D5B0);
  border-radius: 8px;
}
.ms-vyr-picker {
  position: relative;
  flex: 1;
  min-width: 240px;
}
.ms-vyr-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
  z-index: 100;
  padding: 4px;
}
.ms-vyr-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  transition: background 0.1s;
  align-items: center;
}
.ms-vyr-item:hover {
  background: var(--primary-light, #FCF4E5);
}
.ms-vyr-item-cislo {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-3);
  text-align: right;
}
.ms-vyr-item-nazev {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-vyr-item-cena {
  font-size: 11px;
  color: var(--primary-dark);
  font-weight: 600;
  white-space: nowrap;
}
.ms-vyr-empty, .ms-vyr-more {
  padding: 10px;
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  font-style: italic;
}
.ms-vyr-current {
  padding: 4px 10px;
  background: var(--success-bg);
  border-radius: 999px;
  font-size: 11px !important;
}
@media (max-width: 600px) {
  .ms-vyr-item { grid-template-columns: 1fr auto; }
  .ms-vyr-item-cislo { display: none; }
}

/* =========================================================
   ❓ FAQ — dvousloupcový layout (více než 2 položky)
   ========================================================= */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.faq-grid > details.card-block {
  margin-bottom: 0 !important;
}
@media (max-width: 900px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   🌙 DARK MODE — patche pro běžné inline styly v modalech
   Řeší: žluté boxy hardcoded #FFF8E7/#FFF8E5/#FEF3C7,
   světle žluté info boxy s #F7F8FA, #fdf5e6, #f5f5f0,
   červené #FCEBEB, sukulent #ECFDF5 atd. — adaptují se v darku.
   ========================================================= */

/* Žluté info/upozornění boxy v inline stylech */
html.theme-dark [style*="background:#FFF8E7"],
html.dark [style*="background:#FFF8E7"],
html.theme-dark [style*="background:#FFF8E5"],
html.dark [style*="background:#FFF8E5"],
html.theme-dark [style*="background:#FEF3C7"],
html.dark [style*="background:#FEF3C7"],
html.theme-dark [style*="background:#FCF4E5"],
html.dark [style*="background:#FCF4E5"],
html.theme-dark [style*="background:#fdf5e6"],
html.dark [style*="background:#fdf5e6"],
html.theme-dark [style*="background:#fffbeb"],
html.dark [style*="background:#fffbeb"],
html.theme-dark [style*="background: #FFF8E7"],
html.dark [style*="background: #FFF8E7"],
html.theme-dark [style*="background:#fff8e7"],
html.dark [style*="background:#fff8e7"] {
  background: rgba(216, 153, 64, 0.12) !important;
  color: var(--text) !important;
  border-color: rgba(216, 153, 64, 0.35) !important;
}

/* Krémové/oranžové boxy */
html.theme-dark [style*="background:#FFF7E6"],
html.dark [style*="background:#FFF7E6"],
html.theme-dark [style*="background:#F7F8FA"],
html.dark [style*="background:#F7F8FA"],
html.theme-dark [style*="background:#f7f8fa"],
html.dark [style*="background:#f7f8fa"],
html.theme-dark [style*="background:#fafaf9"],
html.dark [style*="background:#fafaf9"],
html.theme-dark [style*="background:#F8F9FA"],
html.dark [style*="background:#F8F9FA"],
html.theme-dark [style*="background:#f5f5f0"],
html.dark [style*="background:#f5f5f0"],
html.theme-dark [style*="background:#FAFAF9"],
html.dark [style*="background:#FAFAF9"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* Hardcoded bílé pozadí (nepatřící do "papír cenovky") */
html.theme-dark .modal-card [style*="background:#fff"]:not(.sab-mini-preview):not(.st-cell-sablona):not([style*="background:#ffff"]),
html.dark .modal-card [style*="background:#fff"]:not(.sab-mini-preview):not(.st-cell-sablona):not([style*="background:#ffff"]) {
  background: var(--surface) !important;
}
html.theme-dark .modal-body [style*="background:#fff;"],
html.dark .modal-body [style*="background:#fff;"],
html.theme-dark .modal-body [style*="background: #fff;"],
html.dark .modal-body [style*="background: #fff;"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* Červené warning boxy */
html.theme-dark [style*="background:#FCEBEB"],
html.dark [style*="background:#FCEBEB"],
html.theme-dark [style*="background:#FEE2E2"],
html.dark [style*="background:#FEE2E2"],
html.theme-dark [style*="background:#fef2f2"],
html.dark [style*="background:#fef2f2"] {
  background: rgba(220, 38, 38, 0.15) !important;
  color: var(--text) !important;
  border-color: rgba(220, 38, 38, 0.40) !important;
}

/* Zelené success/info boxy */
html.theme-dark [style*="background:#ECFDF5"],
html.dark [style*="background:#ECFDF5"],
html.theme-dark [style*="background:#D1FAE5"],
html.dark [style*="background:#D1FAE5"],
html.theme-dark [style*="background:#dcfce7"],
html.dark [style*="background:#dcfce7"] {
  background: rgba(34, 134, 58, 0.18) !important;
  color: var(--text) !important;
  border-color: rgba(34, 134, 58, 0.40) !important;
}

/* Modré info boxy */
html.theme-dark [style*="background:#DBEAFE"],
html.dark [style*="background:#DBEAFE"],
html.theme-dark [style*="background:#EFF6FF"],
html.dark [style*="background:#EFF6FF"],
html.theme-dark [style*="background:#EFF8FF"],
html.dark [style*="background:#EFF8FF"] {
  background: rgba(60, 100, 180, 0.18) !important;
  color: var(--text) !important;
  border-color: rgba(60, 100, 180, 0.40) !important;
}

/* Hnědé / oranžové text-barvy v darku → světlejší zlatá */
html.theme-dark [style*="color:#854F0B"],
html.dark [style*="color:#854F0B"],
html.theme-dark [style*="color:#92400e"],
html.dark [style*="color:#92400e"],
html.theme-dark [style*="color:#783F0A"],
html.dark [style*="color:#783F0A"],
html.theme-dark [style*="color:#7C2D12"],
html.dark [style*="color:#7C2D12"] {
  color: var(--primary) !important;
}

/* Tmavé textové barvy → světlé v darku */
html.theme-dark [style*="color:#1a1a1a"],
html.dark [style*="color:#1a1a1a"],
html.theme-dark [style*="color:#111"],
html.dark [style*="color:#111"],
html.theme-dark [style*="color:#222"],
html.dark [style*="color:#222"],
html.theme-dark [style*="color:#333"],
html.dark [style*="color:#333"] {
  color: var(--text) !important;
}

/* Hex border barvy převedené na border-light */
html.theme-dark [style*="border:1px solid #E8D5B0"],
html.dark [style*="border:1px solid #E8D5B0"],
html.theme-dark [style*="border:1px solid #E8C988"],
html.dark [style*="border:1px solid #E8C988"],
html.theme-dark [style*="border:1px solid #F59E0B"],
html.dark [style*="border:1px solid #F59E0B"] {
  border-color: rgba(216, 153, 64, 0.40) !important;
}

/* Nested modaly — vnořená okna (např. v Editoru, HACCP, atd.).
   Pokud se uvnitř modal-body objeví znovu modal-card nebo card-block
   s explicitním background, tady ji znormalizuj. */
html.theme-dark .modal-body .card-block,
html.dark .modal-body .card-block {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

/* Hardcoded "popis: rohový proužek" badge/preset tlačítka — text nech, jen background */
html.theme-dark .badge-pick,
html.dark .badge-pick {
  color: white;
}

/* Detail HACCP, Diagnostika, Údržba — pre / code bloky */
html.theme-dark pre,
html.dark pre {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}
html.theme-dark code,
html.dark code {
  background: var(--surface-2) !important;
  color: var(--primary) !important;
}

/* Linear-gradient pozadí (často v info kartách FAQ a banner) */
html.theme-dark [style*="linear-gradient(135deg,rgba(186,117,23"],
html.dark [style*="linear-gradient(135deg,rgba(186,117,23"] {
  background: linear-gradient(135deg, rgba(216,153,64,0.15), rgba(216,153,64,0.04)) !important;
}

/* Souhrny v iframech (e-mail preview, faktury) ponechte světlý — to je preview tisku */

/* Inputy uvnitř pickeru — opraví focus i v darku */
html.theme-dark .ms-vyr-results,
html.dark .ms-vyr-results {
  background: var(--surface) !important;
  border-color: var(--border-2);
}
html.theme-dark .ms-vyr-current,
html.dark .ms-vyr-current {
  background: rgba(34, 134, 58, 0.25) !important;
  color: var(--success-text) !important;
}

/* Topbar užitečné — datum & svátek, sep */
html.theme-dark .topbar-datum-svatek,
html.dark .topbar-datum-svatek { color: var(--text-2); }
html.theme-dark .topbar-user-greet,
html.dark .topbar-user-greet { color: var(--text-3); }
html.theme-dark .topbar-user-name,
html.dark .topbar-user-name { color: var(--text); }

/* =========================================================
   🌙 DARK MODE — Druhá vlna oprav
   Zálohy, Notifikace, Menu (sidebar), Badges, Modal-taby
   ========================================================= */

/* ── ZÁLOHY ── badges typu (manual/auto/snapshot) s inline barvami */
html.theme-dark [style*="background:#DCFCE7"],
html.dark [style*="background:#DCFCE7"] {
  background: rgba(34, 134, 58, 0.22) !important;
  color: #6dd58a !important;
}
html.theme-dark [style*="background:#DBEAFE"],
html.dark [style*="background:#DBEAFE"] {
  background: rgba(60, 100, 180, 0.22) !important;
  color: #93c5fd !important;
}
html.theme-dark [style*="background:#E5E7EB"],
html.dark [style*="background:#E5E7EB"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-2) !important;
}

/* ── ZÁLOHY ── warning empty box "F7F8FA + E8C988" */
html.theme-dark [style*="border:1px dashed #E8C988"],
html.dark [style*="border:1px dashed #E8C988"] {
  border-color: rgba(216, 153, 64, 0.40) !important;
}

/* ── NOTIFIKACE ── modrý blok "Notifikace pro odběratele" */
html.theme-dark [style*="background:#EFF6FF"][style*="border:1px solid #B5D4F4"],
html.dark [style*="background:#EFF6FF"][style*="border:1px solid #B5D4F4"] {
  background: rgba(60, 100, 180, 0.15) !important;
  border-color: rgba(60, 100, 180, 0.40) !important;
}
html.theme-dark [style*="border:1px solid #B5D4F4"],
html.dark [style*="border:1px solid #B5D4F4"],
html.theme-dark [style*="border:1px solid #D5E5F5"],
html.dark [style*="border:1px solid #D5E5F5"] {
  border-color: rgba(60, 100, 180, 0.35) !important;
}

/* Tmavě modrý text (#0C447C, #1E40AF, #166534, #92400e, #374151, #B91C1C) → světlejší pro dark */
html.theme-dark [style*="color:#0C447C"],
html.dark [style*="color:#0C447C"],
html.theme-dark [style*="color:#1E40AF"],
html.dark [style*="color:#1E40AF"] {
  color: #93c5fd !important;
}
html.theme-dark [style*="color:#166534"],
html.dark [style*="color:#166534"] {
  color: #6dd58a !important;
}
html.theme-dark [style*="color:#B91C1C"],
html.dark [style*="color:#B91C1C"],
html.theme-dark [style*="color:#DC2626"],
html.dark [style*="color:#DC2626"] {
  color: #f87171 !important;
}
html.theme-dark [style*="color:#374151"],
html.dark [style*="color:#374151"],
html.theme-dark [style*="color:#4B5563"],
html.dark [style*="color:#4B5563"] {
  color: var(--text-2) !important;
}

/* Bílé pozadí klíčovým slovem "white" v chipsech a karet */
html.theme-dark [style*="background:white"]:not(.sab-mini-preview):not(.st-cell-sablona),
html.dark [style*="background:white"]:not(.sab-mini-preview):not(.st-cell-sablona),
html.theme-dark [style*="background: white"]:not(.sab-mini-preview):not(.st-cell-sablona),
html.dark [style*="background: white"]:not(.sab-mini-preview):not(.st-cell-sablona) {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* ── MODAL TABS ── aktivní záložka v darku potřebuje světlejší text */
html.theme-dark .modal-tab.active,
html.dark .modal-tab.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}
html.theme-dark .modal-tab .badge,
html.dark .modal-tab .badge {
  background: var(--surface-2);
  color: var(--text-3);
}
html.theme-dark .modal-tab.active .badge,
html.dark .modal-tab.active .badge {
  background: rgba(216, 153, 64, 0.25) !important;
  color: var(--primary) !important;
}
html.theme-dark .modal-tab:hover,
html.dark .modal-tab:hover {
  color: var(--text) !important;
  background: var(--surface-2) !important;
}

/* ── ROLE BADGE (admin v topbaru) ── */
html.theme-dark .role-badge,
html.dark .role-badge {
  background: rgba(216, 153, 64, 0.20) !important;
  color: var(--primary) !important;
}

/* ── SIDEBAR ── nezvýrazněné drobnosti */
html.theme-dark .sidebar-logo,
html.dark .sidebar-logo {
  border-bottom-color: var(--border);
}
html.theme-dark .sidebar-logo strong,
html.dark .sidebar-logo strong {
  color: var(--text);
}
html.theme-dark .sidebar-logo .logo-icon,
html.dark .sidebar-logo .logo-icon {
  background: rgba(216, 153, 64, 0.20);
  color: var(--primary);
}
html.theme-dark .sidebar-utils,
html.dark .sidebar-utils {
  border-top-color: var(--border);
}
html.theme-dark .sidebar-pin,
html.dark .sidebar-pin {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-2);
}
html.theme-dark .sidebar-pin:hover,
html.dark .sidebar-pin:hover {
  background: var(--surface-2);
  color: var(--text);
}
html.theme-dark body.sidebar-pinned .sidebar-pin,
html.dark body.sidebar-pinned .sidebar-pin {
  background: rgba(216, 153, 64, 0.18) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
html.theme-dark body.sidebar-pinned .sidebar,
html.dark body.sidebar-pinned .sidebar {
  border-right-color: rgba(216, 153, 64, 0.40);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
}

/* ── PUSH STATS BOX a další "var(--surface-2)" boxy, které mají hardcoded text-3 ── */
html.theme-dark #push-stats-host,
html.dark #push-stats-host {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border);
}

/* ── EMAIL TEMPLATES KARTY ── (může mít hardcoded #F7F8FA + #ddd border) */
html.theme-dark #email-templates-container > div,
html.dark #email-templates-container > div {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── ZÁLOHA BUTTON-DELETE (#B91C1C text) ── */
html.theme-dark .zaloha-btn-del,
html.dark .zaloha-btn-del {
  color: #f87171 !important;
}

/* ── HEX BORDERS méně časté ── */
html.theme-dark [style*="border:1px solid #ddd"],
html.dark [style*="border:1px solid #ddd"],
html.theme-dark [style*="border:1px solid #DDD"],
html.dark [style*="border:1px solid #DDD"],
html.theme-dark [style*="border:1px solid #ccc"],
html.dark [style*="border:1px solid #ccc"],
html.theme-dark [style*="border:1px solid #e5e7eb"],
html.dark [style*="border:1px solid #e5e7eb"],
html.theme-dark [style*="border:1px solid #d4d4d8"],
html.dark [style*="border:1px solid #d4d4d8"] {
  border-color: var(--border) !important;
}

/* ── BG: nejčastější světle šedé ── */
html.theme-dark [style*="background:#eee"],
html.dark [style*="background:#eee"],
html.theme-dark [style*="background:#EEE"],
html.dark [style*="background:#EEE"],
html.theme-dark [style*="background:#f5f5f5"],
html.dark [style*="background:#f5f5f5"],
html.theme-dark [style*="background:#F5F5F5"],
html.dark [style*="background:#F5F5F5"],
html.theme-dark [style*="background:#f9fafb"],
html.dark [style*="background:#f9fafb"],
html.theme-dark [style*="background:#F9FAFB"],
html.dark [style*="background:#F9FAFB"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* ── FILTERS bar ── */
html.theme-dark .filters .filter-input,
html.dark .filters .filter-input {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

/* ── DASHBOARD karty s gradient backgroundem ── */
html.theme-dark [style*="background:linear-gradient"][style*="rgba(34, 134, 58"],
html.dark [style*="background:linear-gradient"][style*="rgba(34, 134, 58"] {
  background: linear-gradient(135deg, rgba(34, 134, 58, 0.20), rgba(34, 134, 58, 0.05)) !important;
}
html.theme-dark [style*="background:linear-gradient"][style*="rgba(186,117,23"],
html.dark [style*="background:linear-gradient"][style*="rgba(186,117,23"] {
  background: linear-gradient(135deg, rgba(216, 153, 64, 0.15), rgba(216, 153, 64, 0.04)) !important;
}

/* ── INFO BG var(--info-bg) v notifikacích ── už je definovaný, ale ujišťujeme ── */
html.theme-dark [style*="background:var(--info-bg)"][style*="color:var(--info-text)"],
html.dark [style*="background:var(--info-bg)"][style*="color:var(--info-text)"] {
  background: rgba(60, 100, 180, 0.18) !important;
  color: #93c5fd !important;
}

/* ── DETAILS / SUMMARY (FAQ, akordeón) ── */
html.theme-dark details.card-block summary,
html.dark details.card-block summary {
  color: var(--text-1) !important;
}
html.theme-dark details.card-block[open] summary,
html.dark details.card-block[open] summary {
  color: var(--primary) !important;
}

/* ── ČÁROVÉ KÓDY a TYP-IKONY v moje stitky picker (po vybrání zelená "current") ── */
html.theme-dark .ms-fill-from-vyrobek-bar,
html.dark .ms-fill-from-vyrobek-bar {
  background: var(--surface-2) !important;
  border-color: rgba(216, 153, 64, 0.35) !important;
}

/* ── NASTAVENÍ PILLSY ── fill-style aktivní záložky (brown bg, white text), konzistentní s light ── */
html.theme-dark .nastaveni-tab.active,
html.dark .nastaveni-tab.active {
  background: var(--primary) !important;
  color: #fff !important;
  border: 0 !important;
}

/* ── KEYWORD "white" pro borders ── */
html.theme-dark [style*="border:1px solid white"],
html.dark [style*="border:1px solid white"],
html.theme-dark [style*="border:1px solid #FFFFFF"],
html.dark [style*="border:1px solid #FFFFFF"] {
  border-color: var(--border) !important;
}

/* =========================================================
   🌙 DARK MODE — Třetí vlna: kompletní palette overrides
   Pokrývá VŠECHNY zbylé hex kódy v inline stylech.
   ========================================================= */

/* ── BEŽNÉ ZLATÉ/HNĚDÉ POZADÍ (FAEEDA, FFF6E6, FFFAF1, FFFCF1, FFF8E7…) ── */
html.theme-dark [style*="background:#FAEEDA"],
html.dark [style*="background:#FAEEDA"],
html.theme-dark [style*="background:#FFF6E6"],
html.dark [style*="background:#FFF6E6"],
html.theme-dark [style*="background:#FFFAF1"],
html.dark [style*="background:#FFFAF1"],
html.theme-dark [style*="background:#FFFCF1"],
html.dark [style*="background:#FFFCF1"],
html.theme-dark [style*="background:#FFF8E7"],
html.dark [style*="background:#FFF8E7"],
html.theme-dark [style*="background:#FFF8E5"],
html.dark [style*="background:#FFF8E5"],
html.theme-dark [style*="background: #FFF8E5"],
html.dark [style*="background: #FFF8E5"],
html.theme-dark [style*="background:#FEF3C7"],
html.dark [style*="background:#FEF3C7"],
html.theme-dark [style*="background:#fef3c7"],
html.dark [style*="background:#fef3c7"],
html.theme-dark [style*="background:#F4F0E8"],
html.dark [style*="background:#F4F0E8"],
html.theme-dark [style*="background:#F1EFE8"],
html.dark [style*="background:#F1EFE8"] {
  background: rgba(216, 153, 64, 0.10) !important;
  color: var(--text) !important;
  border-color: rgba(216, 153, 64, 0.30) !important;
}

/* ── MODRÉ POZADÍ (E6F1FB, F0F9FF, F4F8FE, F8FAFC…) ── */
html.theme-dark [style*="background:#E6F1FB"],
html.dark [style*="background:#E6F1FB"],
html.theme-dark [style*="background:#F0F9FF"],
html.dark [style*="background:#F0F9FF"],
html.theme-dark [style*="background:#F4F8FE"],
html.dark [style*="background:#F4F8FE"],
html.theme-dark [style*="background:#F8FAFC"],
html.dark [style*="background:#F8FAFC"] {
  background: rgba(60, 100, 180, 0.12) !important;
  color: var(--text) !important;
}

/* ── ZELENÉ POZADÍ (F0FDF4, fafefb) ── */
html.theme-dark [style*="background:#F0FDF4"],
html.dark [style*="background:#F0FDF4"],
html.theme-dark [style*="background:#fafefb"],
html.dark [style*="background:#fafefb"] {
  background: rgba(34, 134, 58, 0.15) !important;
  color: var(--text) !important;
}

/* ── ČERVENÉ POZADÍ FEF2F2 ── */
html.theme-dark [style*="background:#FEF2F2"],
html.dark [style*="background:#FEF2F2"] {
  background: rgba(220, 38, 38, 0.15) !important;
  color: var(--text) !important;
}

/* ── FIALOVÉ POZADÍ (ede9fe) ── */
html.theme-dark [style*="background:#ede9fe"],
html.dark [style*="background:#ede9fe"] {
  background: rgba(124, 58, 237, 0.18) !important;
  color: var(--text) !important;
}

/* ── TMAVÉ POZADÍ #0F172A (slate-900 dark hero) ── nech jak je, vypadá dobře v darku ── */

/* ── SOLID BG: #BA7517 (primary brown), #15803D (forest), #dc2626 (red), #F59E0B (amber) ── 
   Tyto jsou intenzivní barvy - zůstanou na vlastních textech (badges, buttons), ale 
   pokud se objeví na velkých plochách, ztmav je trochu ── */
html.theme-dark [style*="background:#22863a"],
html.dark [style*="background:#22863a"],
html.theme-dark [style*="background:#15803D"],
html.dark [style*="background:#15803D"] {
  /* už dobré v darku, jen text bíle */
  color: #fff !important;
}

/* ── ŠEDÉ TEXTY → text-3 ── */
html.theme-dark [style*="color:#666"],
html.dark [style*="color:#666"],
html.theme-dark [style*="color: #666"],
html.dark [style*="color: #666"],
html.theme-dark [style*="color:#777"],
html.dark [style*="color:#777"],
html.theme-dark [style*="color: #777"],
html.dark [style*="color: #777"],
html.theme-dark [style*="color:#888"],
html.dark [style*="color:#888"],
html.theme-dark [style*="color: #888"],
html.dark [style*="color: #888"],
html.theme-dark [style*="color:#999"],
html.dark [style*="color:#999"],
html.theme-dark [style*="color: #999"],
html.dark [style*="color: #999"],
html.theme-dark [style*="color:#aaa"],
html.dark [style*="color:#aaa"],
html.theme-dark [style*="color:#bbb"],
html.dark [style*="color:#bbb"],
html.theme-dark [style*="color:#ccc"],
html.dark [style*="color:#ccc"],
html.theme-dark [style*="color:#855"],
html.dark [style*="color:#855"] {
  color: var(--text-3) !important;
}

/* ── STŘEDNĚ ŠEDÉ → text-2 ── */
html.theme-dark [style*="color:#555"],
html.dark [style*="color:#555"],
html.theme-dark [style*="color: #555"],
html.dark [style*="color: #555"],
html.theme-dark [style*="color:#444"],
html.dark [style*="color:#444"] {
  color: var(--text-2) !important;
}

/* ── TMAVÉ TEXTY → text ── */
html.theme-dark [style*="color:#2C2C2A"],
html.dark [style*="color:#2C2C2A"],
html.theme-dark [style*="color:#222"],
html.dark [style*="color:#222"] {
  color: var(--text) !important;
}

/* ── HNĚDÉ/ZLATÉ TEXTY → primary v darku ── */
html.theme-dark [style*="color:#854F0B"],
html.dark [style*="color:#854F0B"],
html.theme-dark [style*="color: #854F0B"],
html.dark [style*="color: #854F0B"],
html.theme-dark [style*="color:#BA7517"],
html.dark [style*="color:#BA7517"],
html.theme-dark [style*="color: #BA7517"],
html.dark [style*="color: #BA7517"],
html.theme-dark [style*="color:#b45309"],
html.dark [style*="color:#b45309"],
html.theme-dark [style*="color:#5C3608"],
html.dark [style*="color:#5C3608"] {
  color: var(--primary) !important;
}

/* ── MODRÉ TEXTY → info-text ── */
html.theme-dark [style*="color:#1849A9"],
html.dark [style*="color:#1849A9"],
html.theme-dark [style*="color:#1e40af"],
html.dark [style*="color:#1e40af"] {
  color: #93c5fd !important;
}

/* ── ZELENÉ TEXTY → success-text ── */
html.theme-dark [style*="color:#1A7F37"],
html.dark [style*="color:#1A7F37"],
html.theme-dark [style*="color:#15803D"],
html.dark [style*="color:#15803D"],
html.theme-dark [style*="color:#10B981"],
html.dark [style*="color:#10B981"],
html.theme-dark [style*="color:#065F46"],
html.dark [style*="color:#065F46"] {
  color: #6dd58a !important;
}

/* ── ČERVENÉ TEXTY → danger-text ── */
html.theme-dark [style*="color:#7F1D1D"],
html.dark [style*="color:#7F1D1D"],
html.theme-dark [style*="color:#991B1B"],
html.dark [style*="color:#991B1B"] {
  color: #f87171 !important;
}

/* ── FIALOVÉ → primary ── */
html.theme-dark [style*="color:#5b21b6"],
html.dark [style*="color:#5b21b6"],
html.theme-dark [style*="color:#7c3aed"],
html.dark [style*="color:#7c3aed"] {
  color: #c4b5fd !important;
}

/* ── HARDCODED RGBA fialové (cenovka štítky) ── */
html.theme-dark [style*="rgba(124,58,237"],
html.dark [style*="rgba(124,58,237"] {
  /* už ok */
}

/* ── EMAIL šablony karty s gradient pozadím ── */
html.theme-dark .et-card,
html.dark .et-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html.theme-dark .et-card .et-card-head,
html.dark .et-card .et-card-head {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* ── PROAUTOCOMPLETION INPUTS (search picker results) ── */
html.theme-dark .ms-vyr-item:hover,
html.dark .ms-vyr-item:hover {
  background: rgba(216, 153, 64, 0.15) !important;
  color: var(--text) !important;
}

/* ── BLOK NAPOVEDA (FAQ) — gradient v hlavičce + linka navíc ── */
html.theme-dark .faq-grid details summary,
html.dark .faq-grid details summary {
  color: var(--text-1) !important;
}

/* ── DASHBOARD KARTY — recent-cards mají někdy hardcoded gradient ── */
html.theme-dark [style*="background:linear-gradient"][style*="93c5fd"],
html.dark [style*="background:linear-gradient"][style*="93c5fd"] {
  background: linear-gradient(135deg, rgba(60, 100, 180, 0.20), rgba(60, 100, 180, 0.04)) !important;
}

/* ── CODE / PRE — sjednoceně ── */
html.theme-dark .modal-body code,
html.dark .modal-body code,
html.theme-dark [style*="background:var(--surface-2)"] code,
html.dark [style*="background:var(--surface-2)"] code {
  background: rgba(216, 153, 64, 0.10) !important;
  color: var(--primary) !important;
}

/* ── DETAILS po otevření má jiné pozadí ── */
html.theme-dark details[open].card-block,
html.dark details[open].card-block {
  background: var(--surface) !important;
  border-color: rgba(216, 153, 64, 0.30) !important;
}

/* ── TOPBAR — sjednoceně ── */
html.theme-dark .btn-prodejna,
html.dark .btn-prodejna {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border-2) !important;
}
html.theme-dark .btn-prodejna:hover,
html.dark .btn-prodejna:hover {
  background: rgba(216, 153, 64, 0.15) !important;
  color: var(--primary) !important;
}
html.theme-dark .btn-fullscreen:hover,
html.dark .btn-fullscreen:hover,
html.theme-dark .btn-logout:hover,
html.dark .btn-logout:hover {
  background: rgba(216, 153, 64, 0.12) !important;
}

/* =========================================================
   🛣️ ROZVOZY — quick-access dlaždice na dashboard
   ========================================================= */
.dashboard-rozvozy-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 24px 22px !important;
  background: linear-gradient(135deg, rgba(186, 117, 23, 0.05), rgba(186, 117, 23, 0.01));
  border: 2px solid var(--primary-border, #E8D5B0) !important;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: all 0.18s ease;
  min-height: 160px;
}
.dashboard-rozvozy-tile:hover {
  background: linear-gradient(135deg, rgba(186, 117, 23, 0.15), rgba(186, 117, 23, 0.05));
  border-color: var(--primary, #BA7517) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(186, 117, 23, 0.18);
}
.dashboard-rozvozy-ico {
  font-size: 48px;
  line-height: 1;
}
.dashboard-rozvozy-title {
  font-size: 18px !important;
  font-weight: 700;
  margin: 4px 0 0 !important;
  color: var(--primary-dark);
}
.dashboard-rozvozy-sub {
  font-size: 12px;
  color: var(--text-3);
  margin: 0;
  line-height: 1.4;
}
.dashboard-rozvozy-arrow {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 22px;
  color: var(--primary);
  font-weight: 700;
  transition: transform 0.15s;
}
.dashboard-rozvozy-tile:hover .dashboard-rozvozy-arrow {
  transform: translateX(4px);
}
@media (max-width: 700px) {
  .dashboard-row[style*="2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .dashboard-rozvozy-tile {
    min-height: 120px;
    padding: 18px 18px !important;
  }
  .dashboard-rozvozy-ico { font-size: 38px; }
  .dashboard-rozvozy-title { font-size: 16px !important; }
}

/* Dark theme variant */
html.theme-dark .dashboard-rozvozy-tile,
html.dark .dashboard-rozvozy-tile {
  background: linear-gradient(135deg, rgba(216, 153, 64, 0.10), rgba(216, 153, 64, 0.02)) !important;
  border-color: rgba(216, 153, 64, 0.35) !important;
}
html.theme-dark .dashboard-rozvozy-tile:hover,
html.dark .dashboard-rozvozy-tile:hover {
  background: linear-gradient(135deg, rgba(216, 153, 64, 0.22), rgba(216, 153, 64, 0.08)) !important;
  border-color: var(--primary) !important;
}
html.theme-dark .dashboard-rozvozy-title,
html.dark .dashboard-rozvozy-title {
  color: var(--primary);
}

/* =========================================================
   🔘 BTN-ICON-ACTION — sekundární akční tlačítko s ikonou + popisem
   (Použito v Dodací listy → Rozvozové trasy)
   ========================================================= */
.btn-icon-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1.5px solid var(--primary-border, #E8D5B0);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-icon-action:hover {
  background: var(--primary-light, rgba(216, 153, 64, 0.12));
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.15);
}
.btn-icon-action-ico {
  font-size: 22px;
  line-height: 1;
}
.btn-icon-action-lbl {
  letter-spacing: 0.2px;
}
.btn-rozvozy-action {
  /* Speciální barva pro rozvozy aby vyčnívala */
  background: linear-gradient(135deg, #FCF4E5, #FAEEDA);
  border-color: var(--primary, #BA7517);
}
.btn-rozvozy-action:hover {
  background: linear-gradient(135deg, var(--primary, #BA7517), #A36513);
  color: #fff;
}
.btn-rozvozy-action:hover .btn-icon-action-ico {
  filter: brightness(1.2);
}
@media (max-width: 600px) {
  .btn-icon-action-lbl { display: none; }
  .btn-icon-action { padding: 10px 14px; }
}

/* Dark variants */
html.theme-dark .btn-icon-action,
html.dark .btn-icon-action {
  background: var(--surface-2);
  color: var(--primary);
  border-color: rgba(216, 153, 64, 0.40);
}
html.theme-dark .btn-icon-action:hover,
html.dark .btn-icon-action:hover {
  background: rgba(216, 153, 64, 0.18);
  border-color: var(--primary);
}
html.theme-dark .btn-rozvozy-action,
html.dark .btn-rozvozy-action {
  background: linear-gradient(135deg, rgba(216, 153, 64, 0.20), rgba(216, 153, 64, 0.08)) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
html.theme-dark .btn-rozvozy-action:hover,
html.dark .btn-rozvozy-action:hover {
  background: linear-gradient(135deg, var(--primary), #A36513) !important;
  color: #fff !important;
}

/* =========================================================
   🌙 DARK MODE — Závěrečná všeobsažná vlna
   Cíl: pokrýt VŠECHNY zbylé inline styly skrz široké
   attribute selektory. Použito :is() pro kratší zápis.
   ========================================================= */

/* ── Globální fallback pro všechny inline světlé pozadí ──
   Pokrývá hex s "F", "E", "f", "e" na první/druhé pozici
   (světle béžové, krémové, světle modré, světle zelené...) */
:is(html.theme-dark, html.dark) :is([style*="background:#fa"],[style*="background:#fb"],[style*="background:#fc"],[style*="background:#fd"],[style*="background:#fe"],[style*="background:#ff"],[style*="background: #fa"],[style*="background: #fb"],[style*="background: #fc"],[style*="background: #fd"],[style*="background: #fe"],[style*="background: #ff"],[style*="background:#FA"],[style*="background:#FB"],[style*="background:#FC"],[style*="background:#FD"],[style*="background:#FE"],[style*="background:#FF"]):not(.sab-mini-preview):not(.sab-mini-inner):not(.st-cell-sablona):not([class*="theme-card"]):not([class*="preview"]) {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ── Tmavé texty (cokoliv #0X, #1X, #2X, #3X) → text ── */
:is(html.theme-dark, html.dark) :is([style*="color:#0"],[style*="color:#1"],[style*="color:#2"],[style*="color:#3"],[style*="color: #0"],[style*="color: #1"],[style*="color: #2"],[style*="color: #3"]):not([class*="preview"]):not([class*="theme-card"]) {
  color: var(--text) !important;
}

/* ── Středně tmavé (4X, 5X) → text-2 ── */
:is(html.theme-dark, html.dark) :is([style*="color:#4"],[style*="color:#5"],[style*="color: #4"],[style*="color: #5"]):not([class*="preview"]) {
  color: var(--text-2) !important;
}

/* ── Šedé (6X, 7X, 8X, 9X) → text-3 ── */
:is(html.theme-dark, html.dark) :is([style*="color:#6"],[style*="color:#7"],[style*="color:#8"],[style*="color:#9"],[style*="color: #6"],[style*="color: #7"],[style*="color: #8"],[style*="color: #9"]):not([class*="preview"]) {
  color: var(--text-3) !important;
}

/* ── Velmi tmavé pozadí (#0X) — zachovej ale ujisti že je text bílý ── */
:is(html.theme-dark, html.dark) :is([style*="background:#0F172A"],[style*="background:#000"]) {
  color: #fff !important;
}

/* ── Specifické úložení barev pro známé brand-friendly tokeny ──
   Tyto MUSÍ zůstat tematicky správně (nesmí být generikalizováno na surface-2):
   - #BA7517, #D89940 = primary
   - #22863a, #15803D = success
   - #DC2626, #B91C1C = danger
   - #1849A9, #1e40af = info
   - #7c3aed, #5b21b6 = purple
   Tyhle se na velkých plochách nepoužívají (jen na tlačítkách/badges),
   takže není nutné je dál řešit — výchozí styling buttons/status je už OK.
*/

/* ── Tlačítka s INLINE background: solid color (např. tlačítka v cenovkach) ──
   Pokud má `background:#XX` kde XX je sytá barva (tedy #2X..#8X začínající),
   pak je to badge/tlačítko a má vlastní text — nech to být. Selektor výše
   se týká jen světlých "background pages" (FA-FF). ✓ */

/* ── Konkrétní jemnosti: hr, separátory ── */
:is(html.theme-dark, html.dark) hr {
  border-color: var(--border);
}

/* ── Konkrétní jemnosti: blockquote ── */
:is(html.theme-dark, html.dark) blockquote {
  background: var(--surface-2);
  border-left-color: var(--primary);
  color: var(--text-2);
}

/* ── KBD elementy ── */
:is(html.theme-dark, html.dark) kbd {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 0 var(--border-2);
}

/* ── HOVER stavy v tabulkách s inline pozadím ── */
:is(html.theme-dark, html.dark) .table tr[style*="background:"]:hover {
  filter: brightness(1.15);
}

/* ── Override: kdyby výše bylo příliš agresivní pro PREVIEW elementy ──
   (cenovky/šablony — papírové náhledy by měly zůstat BÍLÉ i v darku) */
:is(html.theme-dark, html.dark) :is(.sab-mini-preview, .sab-mini-inner, .st-cell-sablona, .stitek-preview, .theme-card div[style*="linear-gradient"]) {
  background: initial !important;
  color: initial !important;
}
:is(html.theme-dark, html.dark) .sab-mini-preview {
  background: #fff !important;
}
:is(html.theme-dark, html.dark) .sab-mini-inner .st-cell-sablona {
  background: #fff !important;
  color: #000 !important;
}

/* ── PRINT PREVIEW (iframe — faktury, dodací listy) ── 
   Nikdy nedělej dark uvnitř iframe pro print preview — kdyby to bylo dark,
   tisk by byl bílý na bílém. iframe content má svůj vlastní document.
   Toto je jen safety pro hostitelský element. */
:is(html.theme-dark, html.dark) iframe {
  background: #fff;
}

/* ── INPUT focus pre dark mode ── */
:is(html.theme-dark, html.dark) .form-input:focus,
:is(html.theme-dark, html.dark) .filter-input:focus,
:is(html.theme-dark, html.dark) select:focus,
:is(html.theme-dark, html.dark) textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(216, 153, 64, 0.20);
  background: var(--surface) !important;
}

/* ── DROPDOWN options ve formulářových select ── */
:is(html.theme-dark, html.dark) select option {
  background: var(--surface);
  color: var(--text);
}

/* ── PROGRESS bary ── */
:is(html.theme-dark, html.dark) progress {
  background: var(--surface-2);
}
:is(html.theme-dark, html.dark) progress::-webkit-progress-bar {
  background: var(--surface-2);
}
:is(html.theme-dark, html.dark) progress::-webkit-progress-value {
  background: var(--primary);
}

/* ── A (odkazy v textu) ── */
:is(html.theme-dark, html.dark) a:not([class*="btn-"]):not(.doc-badge):not(.nav-item):not(.modal-tab):not(.period-tab) {
  color: var(--primary);
}
:is(html.theme-dark, html.dark) a:not([class*="btn-"]):not(.doc-badge):not(.nav-item):not(.modal-tab):not(.period-tab):hover {
  color: var(--primary-dark);
  filter: brightness(1.15);
}

/* ── DATALIST a INPUT autofill ── */
:is(html.theme-dark, html.dark) input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--surface-2) inset !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* ── DETAILS - správný styling pro vnitřek ── */
:is(html.theme-dark, html.dark) details > div,
:is(html.theme-dark, html.dark) details > p {
  color: var(--text-2);
}

/* =========================================================
   🌙 DARK MODE — MENU FINÁLNÍ POLISH
   (sidebar pinned state + nav-item gradient overrides)
   ========================================================= */

/* Připnutý sidebar v darku — aktivní kostička má lepší highlight */
html.theme-dark body.sidebar-pinned .nav-item.active,
html.dark body.sidebar-pinned .nav-item.active {
  background: linear-gradient(180deg, #D89940 0%, #A36513 100%) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* Pinned sidebar — připnutý box-shadow v darku tmavší */
html.theme-dark body.sidebar-pinned .sidebar,
html.dark body.sidebar-pinned .sidebar {
  background: var(--surface) !important;
  border-right-color: rgba(216, 153, 64, 0.40) !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.50) !important;
}

/* Topbar v pinned mode — udrží tmavé pozadí */
html.theme-dark body.sidebar-pinned .topbar,
html.dark body.sidebar-pinned .topbar {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}

/* Sidebar logo strong + datum v darku */
html.theme-dark .sidebar-logo strong,
html.dark .sidebar-logo strong { color: var(--text) !important; }
html.theme-dark .sidebar-logo .logo-icon,
html.dark .sidebar-logo .logo-icon {
  background: rgba(216, 153, 64, 0.20) !important;
  color: var(--primary) !important;
}

/* Win98 theme protection — nesmí překrýt pinned sidebar */
html.theme-win98 body.sidebar-pinned .nav-item.active {
  /* nech win98 výchozí — žluté pozadí dle win98 stylu */
}

/* =========================================================
   📚 NASTAVENÍ — vertikální stack uvnitř .nastaveni-row buňky
   (např. Uzávěrka + Šablony e-mailů v jednom sloupci)
   ========================================================= */
.ns-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.ns-stack > .card-block {
  margin-bottom: 0;
  height: auto;            /* override 100% z .nastaveni-row > .card-block */
}

/* Email templates list — kompaktnější varianta pro úzký sloupec */
.ns-stack #email-templates-container > div {
  padding: 8px 10px !important;
  font-size: 12px;
}
.ns-stack #email-templates-container button {
  font-size: 11px !important;
  padding: 4px 8px !important;
}
.ns-stack #email-templates-container .et-tpl-row,
.ns-stack #email-templates-container > .card-block,
.ns-stack #email-templates-container > [class*="row"] {
  flex-wrap: wrap;
  gap: 4px;
}

@media (max-width: 900px) {
  /* Na mobilu se .nastaveni-row sbalí na 1 sloupec — .ns-stack zůstává stack */
  .ns-stack { gap: 12px; }
}

/* =========================================================
   🌙 DARK MODE — CSS CLASS OVERRIDES
   (Hardcoded backgrounds v CSS klasích, ne v inline stylech)
   ========================================================= */

/* 💸 Sazby DPH karty */
html.theme-dark .dph-card,
html.dark .dph-card {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
html.theme-dark .dph-card-nazev,
html.dark .dph-card-nazev {
  color: var(--text) !important;
}
html.theme-dark .dph-card-sazba,
html.dark .dph-card-sazba {
  color: var(--primary) !important;
}
html.theme-dark .dph-card-head,
html.dark .dph-card-head {
  border-bottom-color: var(--border) !important;
}

/* 💾 Zálohy tabulka — zebra striping */
html.theme-dark .table tbody tr:nth-child(even) td,
html.dark .table tbody tr:nth-child(even) td {
  background: var(--surface-2) !important;
}

/* Table thead pozadí */
html.theme-dark .table thead th,
html.dark .table thead th {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
}

/* Bílá pozadí v různých CSS klasích — generic mapping na surface */
html.theme-dark .obj-polozka-row,
html.dark .obj-polozka-row,
html.theme-dark .vy-kal-cell,
html.dark .vy-kal-cell,
html.theme-dark .modal-stats-box,
html.dark .modal-stats-box {
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* Zebra/hover v výrobním kalendáři, objednávkách */
html.theme-dark .obj-polozka-row:hover,
html.dark .obj-polozka-row:hover,
html.theme-dark .vy-kal-cell.weekend,
html.dark .vy-kal-cell.weekend {
  background: var(--surface-2) !important;
}

/* Recent-icon-btn (FAEEDA bg, 854F0B color) */
html.theme-dark .recent-icon-btn.active,
html.dark .recent-icon-btn.active {
  background: rgba(216, 153, 64, 0.20) !important;
  color: var(--primary) !important;
  border-color: rgba(216, 153, 64, 0.35) !important;
}

/* doc-badge ve světlých variantách (FAEEDA bg) */
html.theme-dark .doc-badge.dl:not(.unavailable),
html.dark .doc-badge.dl:not(.unavailable),
html.theme-dark .doc-badge.fa:not(.unavailable),
html.dark .doc-badge.fa:not(.unavailable),
html.theme-dark .doc-badge.obj:not(.unavailable),
html.dark .doc-badge.obj:not(.unavailable) {
  background: rgba(216, 153, 64, 0.18) !important;
  color: var(--primary) !important;
  border-color: rgba(216, 153, 64, 0.30) !important;
}

/* Tabulka řádky v notifikacích / různá místa s F7F8FA */
html.theme-dark [class*="F7F8FA"],
html.dark [class*="F7F8FA"] {
  background: var(--surface-2) !important;
}

/* Fallback pro VŠECHNY CSS classy s "background: #fff" — generikum */
html.theme-dark .card-block > *[style*="background:#fff"],
html.dark .card-block > *[style*="background:#fff"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* Push stats / template list items */
html.theme-dark #email-templates-container > div,
html.dark #email-templates-container > div,
html.theme-dark #email-templates-container > button,
html.dark #email-templates-container > button {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Zaloha button delete — světlejší červená v darku */
html.theme-dark .zalohy-table .zaloha-btn-del,
html.dark .zalohy-table .zaloha-btn-del {
  color: #f87171 !important;
}

/* Generický catch — bílé pozadí v jakékoliv CSS class uvnitř .main-content */
html.theme-dark .main-content :not(.modal-card):not(.modal-overlay):not(iframe)[style="background:#fff"],
html.dark .main-content :not(.modal-card):not(.modal-overlay):not(iframe)[style="background:#fff"] {
  background: var(--surface-2) !important;
}

/* OBJ-edit modal položky řádky */
html.theme-dark .obj-edit-row,
html.dark .obj-edit-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Cenovky form-grid s bílým pozadím */
html.theme-dark .form-grid[style*="background:#fff"],
html.dark .form-grid[style*="background:#fff"] {
  background: transparent !important;
}

/* Velký override — všechny CSS classy které mají hardcoded #fff jako background */
html.theme-dark *:not(iframe):not(.sab-mini-preview):not(.sab-mini-inner):not(.st-cell-sablona):not(.stitek-preview):not(.modal-card),
html.dark *:not(iframe):not(.sab-mini-preview):not(.sab-mini-inner):not(.st-cell-sablona):not(.stitek-preview):not(.modal-card) {
  /* Nevýrazné, nech default */
}

/* Konkrétně známé třídy s #fff bg */
html.theme-dark .recent-card,
html.dark .recent-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* =========================================================
   ← BACK BUTTON — návrat na předchozí sekci
   🎨 v3.0.11 — Vizuálně odlišený od ostatních secondary buttonů
   (jemný modro-šedý nádech + výrazná šipka)
   ========================================================= */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  border: 1.5px solid #93C5FD;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #1E40AF;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(30,64,175,0.08);
}
.btn-back:hover {
  background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
  border-color: #3B82F6;
  color: #1E3A8A;
  transform: translateX(-3px);
  box-shadow: 0 2px 6px rgba(30,64,175,0.18);
}
.btn-back:active { transform: translateX(-1px); }
.btn-back-arrow {
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  transition: transform 0.18s ease;
}
.btn-back:hover .btn-back-arrow { transform: translateX(-2px); }

/* Dark mode varianta */
@media (prefers-color-scheme: dark) {
  body.dark-mode .btn-back,
  .dark-mode .btn-back {
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(37,99,235,0.22));
    border-color: rgba(96,165,250,0.45);
    color: #BFDBFE;
  }
  body.dark-mode .btn-back:hover,
  .dark-mode .btn-back:hover {
    background: linear-gradient(135deg, rgba(59,130,246,0.28), rgba(37,99,235,0.32));
    border-color: rgba(147,197,253,0.6);
    color: #DBEAFE;
  }
}

@media (max-width: 600px) {
  .btn-back-lbl { display: none; }
  .btn-back { padding: 9px 12px; }
  .btn-back-arrow { font-size: 20px; }
}

/* Dark mode */
html.theme-dark .btn-back,
html.dark .btn-back {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text-2);
}
html.theme-dark .btn-back:hover,
html.dark .btn-back:hover {
  background: rgba(216, 153, 64, 0.18);
  border-color: var(--primary);
  color: var(--primary);
}

/* =========================================================
   🔒 CISLO DOKLADŮ — nezalomovat FA-2026-0002, OBJ-…, DL-… atd.
   MINIMALISTICKÝ FIX: pouze `white-space: nowrap`.
   Žádné letter-spacing, tabular-nums, min-width, ellipsis,
   flex-wrap — aby se NIC v současném vzhledu nepřesunulo.
   ========================================================= */

/* Mobilní karty — cislo nezalomuj */
.faktura-card-cislo,
.dl-card-cislo,
.odberatel-card-cislo,
.objednavka-card-cislo {
  white-space: nowrap;
}

/* Desktop tabulky s checkboxem v prvním sloupci (faktury/DL/objednavky/výrobky)
   — strong v druhém sloupci je cislo (FA-…/DL-…/OBJ-…). Nezalomuj. */
.table-selectable td:nth-of-type(2) strong {
  white-space: nowrap;
}

/* (Pozn.: dříve zde byly dva @media bloky které měnily paddingy tabulky
   na laptopech 901–1400px a layout doc-badge buttonů na tabletu pod 900px.
   ODEBRÁNO — uživatel chce, aby se současný vzhled nikde nepřesunul.
   Responzivita zůstává řešena existujícím desktop-only-block /
   mobile-only-block přepnutím + breakpointy v původním CSS.
   Tady necháváme jen cislo nowrap fix výše — ten POUZE brání zalomení,
   nemění rozměry ani layout.) */

/* =========================================================
   📏 DENSITY (HUSTOTA UI) — kompaktní / pohodlné / prostorné
   Mění padding, font-size a gap v klíčových komponentách.
   Aplikuje se přes html.density-{compact|comfortable|spacious}
   ========================================================= */

/* Výchozí (comfortable) hodnoty jsou shodné s existujícím designem */
html { --density-mult: 1; --density-font-mult: 1; }

/* KOMPAKTNÍ — pro zkušené uživatele a malé monitory (víc vidím najednou) */
html.density-compact { --density-mult: 0.75; --density-font-mult: 0.92; }
html.density-compact .card-block { padding: 14px; margin-bottom: 12px; }
html.density-compact .table th { padding: 7px 10px; font-size: 11px; }
html.density-compact .table td { padding: 8px 10px; font-size: 13px; }
html.density-compact .btn-primary,
html.density-compact .btn-secondary,
html.density-compact .btn-danger { padding: 7px 14px; font-size: 13px; }
html.density-compact .form-input,
html.density-compact .form-textarea,
html.density-compact .filter-input,
html.density-compact select.form-input,
html.density-compact textarea.form-input { padding: 7px 10px; font-size: 13px; }
html.density-compact .form-label { font-size: 11px; margin-bottom: 4px; }
/* 🆕 v3.0.70 — User: "Hustota UI - pc boční menu je font při kompaktním větší
   ne pohodlné - otoč to". Compact 16→13px (menší než comfortable 18px), icon 19→16px. */
/* 🆕 v3.0.108 — Density JEN když sidebar NEcollapsed (collapsed musí zůstat 62x62 ikony).
   Předtím v3.0.107 density !important přebil collapsed text-hide → text v rail módu. */
/* 🆕 v3.0.110 — density NEPLATÍ pro sidebar-collapsed AŇI sidebar-pinned (mobil rail = jen ikony) */
html.density-compact body:not(.sidebar-collapsed):not(.sidebar-pinned) .nav-item { padding: 6px 10px !important; font-size: 12px !important; min-height: 32px !important; gap: 8px !important; }
html.density-compact body:not(.sidebar-collapsed):not(.sidebar-pinned) .nav-icon { font-size: 14px !important; }
html.density-comfortable body:not(.sidebar-collapsed):not(.sidebar-pinned) .nav-item { padding: 12px 16px !important; font-size: 14.5px !important; min-height: 48px !important; gap: 12px !important; }
html.density-comfortable body:not(.sidebar-collapsed):not(.sidebar-pinned) .nav-icon { font-size: 18px !important; }
html.density-compact .modal-card { padding: 18px; }
html.density-compact .page-title { font-size: 22px; }
html.density-compact .page-sub { font-size: 13px; }
html.density-compact .stat-card { padding: 12px 14px; }
html.density-compact .stat-value { font-size: 20px; }
html.density-compact .stat-label { font-size: 11px; }
html.density-compact .modal-tab { padding: 9px 14px; font-size: 13px; }
/* 🆕 v2.9.254 — Compact density: filter tabs kompaktnější + text-overflow clip
   (user: 'při nejmenší hustotě UI text vešel pod ikonu celej' — žádný ellipsis) */
html.density-compact .period-tab,
html.density-compact .seg-tab,
html.density-compact .vyroba-subtab,
html.density-compact .nastaveni-tab {
  padding: 6px 4px !important;
  gap: 2px !important;
}
html.density-compact .period-tab-text,
html.density-compact .seg-tab-text,
html.density-compact .vyroba-subtab-text {
  font-size: clamp(10px, 1vw, 11px) !important;
  letter-spacing: -0.03em !important;
  text-overflow: clip !important;   /* žádný ellipsis — celý text */
  overflow: visible !important;
}
html.density-compact .period-tab-icon,
html.density-compact .seg-tab-icon,
html.density-compact .vyroba-subtab-icon {
  font-size: clamp(16px, 1.6vw, 18px) !important;
}
html.density-compact .nastaveni-row { gap: 10px; margin-bottom: 10px; }
html.density-compact .form-grid { gap: 10px; }
html.density-compact .form-grid-tight { gap: 8px; }
html.density-compact .filters { padding: 8px; gap: 6px; }

/* POHODLNÉ — výchozí (žádné změny, jen pojmenování pro UI) */
html.density-comfortable { --density-mult: 1; --density-font-mult: 1; }

/* PROSTORNÉ — pro starší uživatele nebo dotykové displeje */
html.density-spacious { --density-mult: 1.25; --density-font-mult: 1.10; }
html.density-spacious .card-block { padding: 26px; margin-bottom: 20px; }
html.density-spacious .table th { padding: 13px 16px; font-size: 13px; }
html.density-spacious .table td { padding: 16px; font-size: 15px; }
html.density-spacious .btn-primary,
html.density-spacious .btn-secondary,
html.density-spacious .btn-danger { padding: 12px 22px; font-size: 15px; }
html.density-spacious .form-input,
html.density-spacious .form-textarea,
html.density-spacious .filter-input,
html.density-spacious select.form-input,
html.density-spacious textarea.form-input { padding: 12px 14px; font-size: 15px; }
html.density-spacious .form-label { font-size: 13px; margin-bottom: 8px; }
/* 🐛 fix v3.0.165 — spacious nav potřebuje stejný silný selektor + !important jako
   compact/comfortable (ř.11225-11228). Bez toho ho na PC přebije desktop @media
   !important pravidlo (.sidebar-nav .nav-item 12.5px) → menu se při "prostorné"
   hustotě nezvětšilo (uživatel: "font menu se nezvětšuje na pc"). */
html.density-spacious body:not(.sidebar-collapsed):not(.sidebar-pinned) .nav-item { padding: 15px 18px !important; font-size: 17px !important; min-height: 58px !important; gap: 14px !important; }
html.density-spacious body:not(.sidebar-collapsed):not(.sidebar-pinned) .nav-icon { font-size: 22px !important; }
html.density-spacious .modal-card { padding: 28px; }
html.density-spacious .page-title { font-size: 30px; }
html.density-spacious .page-sub { font-size: 16px; }
html.density-spacious .stat-card { padding: 22px 26px; }
html.density-spacious .stat-value { font-size: 30px; }
html.density-spacious .stat-label { font-size: 14px; }
html.density-spacious .modal-tab { padding: 16px 24px; font-size: 16px; }
/* 🆕 v2.9.255 — Spacious density: filter tabs větší padding + text */
html.density-spacious .period-tab,
html.density-spacious .seg-tab,
html.density-spacious .vyroba-subtab,
html.density-spacious .nastaveni-tab {
  padding: 14px 16px !important;
}
html.density-spacious .period-tab-text,
html.density-spacious .seg-tab-text,
html.density-spacious .vyroba-subtab-text {
  font-size: clamp(13px, 1.7vw, 15px) !important;
}
html.density-spacious .period-tab-icon,
html.density-spacious .seg-tab-icon,
html.density-spacious .vyroba-subtab-icon {
  font-size: clamp(22px, 2.6vw, 26px) !important;
}
html.density-spacious .nastaveni-row { gap: 18px; margin-bottom: 18px; }
html.density-spacious .form-grid { gap: 18px; }
html.density-spacious .form-grid-tight { gap: 14px; }
html.density-spacious .filters { padding: 16px; gap: 12px; }
html.density-spacious .faktura-card,
html.density-spacious .dl-card,
html.density-spacious .odberatel-card { padding: 20px; }
html.density-spacious .faktura-card-cislo,
html.density-spacious .dl-card-cislo { font-size: 18px; }
html.density-spacious .doc-badge { font-size: 14px; padding: 8px 14px; min-height: 36px; }


/* Print: vždy comfortable bez ohledu na density (ať tisk vypadá jednotně) */
@media print {
  html.density-compact, html.density-spacious {
    --density-mult: 1; --density-font-mult: 1;
  }
}

/* =========================================================
   🛡️ KOMPATIBILITA SE STARŠÍMI PROHLÍŽEČI
   Fallbacky pro `:has()`, `dvh` a další moderní featury.
   Pokud prohlížeč nepodporuje, layout zůstane funkční.
   ========================================================= */

/* :has() fallback — Firefox ESR < 121 a Safari < 15.4 ho nemají.
   V CSS výše používáme :has() na 4 místech. Tady přidám class-based
   alternativu která se aplikuje vždy (jako safety net).
   Pokud :has() funguje, originální pravidlo má vyšší specifičnost a vyhraje. */
@supports not selector(:has(*)) {
  /* Fallback: ukázat danger button column i bez :has() */
  .polozky-table tbody tr td:last-child {
    text-align: right;
  }
  /* Fallback: vy-stitek-toggle se zobrazí jako normální label */
  .vy-stitek-toggle input:checked + span,
  .vy-stitek-toggle input:checked ~ * {
    color: var(--primary);
    font-weight: 600;
  }
}

/* dvh fallback — Chrome <108, Safari <15.4 ho nemají
   (už máme `height:100vh; height:100dvh;` pattern — to je správné fallback řešení) */

/* aspect-ratio fallback — Chrome <88, Safari <15
   Pokud chybí, použít padding-bottom trick. Naše použití je pro thumby
   takže fallback height 1:1 stačí. */
@supports not (aspect-ratio: 1 / 1) {
  .vyrobky-grid > * {
    height: 200px;          /* fallback square thumbnails */
  }
}

/* color-mix() — pokud bychom někdy použili, není potřeba teď */

/* gap v flexbox fallback — Chrome <84, Safari <14.1
   Některé starší Chrome by mohly mít problém s gap u flex (mají to OK u grid).
   Fallback: použít margin místo gap pro klíčové komponenty. */
@supports not (gap: 8px) {
  .doc-badges-row > * + * { margin-left: 6px; }
  .filters > * + * { margin-left: 8px; }
}

/* Print fallback — :has() v print queries by mohlo zlobit */
@media print {
  @supports not selector(:has(*)) {
    /* nic dalšího — print používá hlavně jednoduché selektory */
  }
}

/* =========================================================
   📊 TABULKY V .card-block — horizontální scroll bez přesunu
   Pokud má tabulka víc sloupců než šířka karty (např. Dodací listy s 11
   sloupci na 1366×768 laptopu), místo aby přetekla, povolí horizontální
   scroll uvnitř karty. Na širokých monitorech se nic nezmění.
   ========================================================= */
.card-block.desktop-only-block {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Vizuální indikátor scrollu — jemný stín na pravém okraji karty
   pokud je obsah seříznutý (CSS scroll-padding hack) */
.card-block.desktop-only-block {
  /* Scrollbar styling — diskrétní */
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.card-block.desktop-only-block::-webkit-scrollbar {
  height: 8px;
}
.card-block.desktop-only-block::-webkit-scrollbar-track {
  background: transparent;
}
.card-block.desktop-only-block::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}
.card-block.desktop-only-block::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}

/* Tabulky se SMRŠŤUJÍ do okna místo přesahovat.
   Žádné min-width — buňky zmenšují padding/font + případně zalomí text.
   Akční sloupec (DL+FA tlačítka) je explicitně úzký. */
.card-block.desktop-only-block > .table {
  width: 100%;
  table-layout: auto;
}

/* Responzivní smrštění tabulek na užším okně */
@media (max-width: 1500px) {
  .card-block.desktop-only-block .table-selectable th,
  .card-block.desktop-only-block .table-selectable td {
    padding: 10px 8px;
    font-size: 12.5px;
  }
  /* Akční sloupec (DL+FA buttony) komprimovat */
  .card-block.desktop-only-block .table-selectable .doc-badges-row {
    gap: 4px;
  }
  .card-block.desktop-only-block .table-selectable .doc-badge {
    font-size: 10.5px;
    padding: 3px 7px;
  }
}
@media (max-width: 1280px) {
  .card-block.desktop-only-block .table-selectable th,
  .card-block.desktop-only-block .table-selectable td {
    padding: 8px 6px;
    font-size: 12px;
  }
  /* Velmi úzké — schovat méně důležité sloupce
     (VS = variabilní symbol, je redundantní s číslem)
     Faktury table má VS na pozici 7 (po col-check, Číslo, Odběratel, Vystaveno, Splatnost = pozice 6) */
  .card-block.desktop-only-block .faktury-table-narrow-hide th:nth-of-type(6),
  .card-block.desktop-only-block .faktury-table-narrow-hide td:nth-of-type(6) {
    display: none;
  }
}

/* =========================================================
   📏 DENSITY — EXTRÉMNÍ (XXL pro slabozraké / dotyk / kiosek)
   Ještě větší než „Prostorné" — pro vážné zrakové potřeby
   nebo pro pekárnu kde se obsluha dotýká screen přes plastovou rukavici.
   ========================================================= */
html.density-extreme { --density-mult: 1.55; --density-font-mult: 1.25; }

html.density-extreme .card-block { padding: 32px; margin-bottom: 26px; }
html.density-extreme .table th { padding: 18px 20px; font-size: 15px; }
html.density-extreme .table td { padding: 22px 20px; font-size: 17px; }
html.density-extreme .btn-primary,
html.density-extreme .btn-secondary,
html.density-extreme .btn-danger {
  padding: 18px 30px;
  font-size: 17px;
  min-height: 56px;          /* touch-friendly */
  font-weight: 700;
}
html.density-extreme .btn-big-action {
  font-size: 22px !important;
  padding: 24px 40px !important;
  min-height: 72px !important;
}
html.density-extreme .form-input,
html.density-extreme .form-textarea,
html.density-extreme .filter-input,
html.density-extreme select.form-input,
html.density-extreme textarea.form-input {
  padding: 16px 18px;
  font-size: 18px;
  min-height: 52px;
}
html.density-extreme .form-label { font-size: 15px; margin-bottom: 10px; font-weight: 600; }
html.density-extreme .nav-item { padding: 26px 26px; font-size: 22px; }
html.density-extreme .nav-icon { font-size: 30px; }
html.density-extreme .modal-card { padding: 36px; }
html.density-extreme .page-title { font-size: 36px; }
html.density-extreme .page-sub { font-size: 18px; }
html.density-extreme .stat-card { padding: 28px 32px; }
html.density-extreme .stat-value { font-size: 38px; }
html.density-extreme .stat-label { font-size: 16px; }
html.density-extreme .modal-tab { padding: 20px 28px; font-size: 18px; }
/* 🆕 v2.9.255 — Extreme density: filter tabs XXL pro slabozraké / kiosek */
html.density-extreme .period-tab,
html.density-extreme .seg-tab,
html.density-extreme .vyroba-subtab,
html.density-extreme .nastaveni-tab {
  padding: 18px 18px !important;
  font-weight: 700 !important;
}
html.density-extreme .period-tab-text,
html.density-extreme .seg-tab-text,
html.density-extreme .vyroba-subtab-text {
  font-size: clamp(15px, 2vw, 17px) !important;
}
html.density-extreme .period-tab-icon,
html.density-extreme .seg-tab-icon,
html.density-extreme .vyroba-subtab-icon {
  font-size: clamp(26px, 3.2vw, 32px) !important;
}
html.density-extreme .nastaveni-row { gap: 24px; margin-bottom: 24px; }
html.density-extreme .form-grid { gap: 24px; }
html.density-extreme .form-grid-tight { gap: 18px; }
html.density-extreme .filters { padding: 20px; gap: 14px; }
html.density-extreme .faktura-card,
html.density-extreme .dl-card,
html.density-extreme .odberatel-card { padding: 24px; }
html.density-extreme .faktura-card-cislo,
html.density-extreme .dl-card-cislo { font-size: 22px; }
html.density-extreme .faktura-card-castka { font-size: 24px; }
html.density-extreme .doc-badge { font-size: 16px; padding: 12px 18px; min-height: 48px; }

/* Checkboxy a radio větší — pro dotykové prsty */
html.density-extreme input[type="checkbox"],
html.density-extreme input[type="radio"] { width: 22px; height: 22px; }

/* Status badges — větší */
html.density-extreme .status,
html.density-extreme .role-badge { font-size: 14px; padding: 6px 14px; }

/* Empty state - velký text */
html.density-extreme .empty-state { font-size: 18px; padding: 40px 24px; }

/* Quick period chips (Dnes / Zítra / kalendář) */
html.density-extreme .quick-period-row > * { font-size: 17px; padding: 14px 22px; }

/* Mobile cards - extrémně velké padding pro pohodlí */
html.density-extreme .obj-card,
html.density-extreme .vyr-card {
  padding: 24px;
}

/* Form grid input rows — větší vertikální mezery */
html.density-extreme .form-grid > * + * { margin-top: 4px; }

/* H3, H4 v karty - větší pro starší zrak */
html.density-extreme .card-block h3 { font-size: 22px; margin-bottom: 16px; }
html.density-extreme .card-block h4 { font-size: 18px; margin-bottom: 12px; }

/* Print: extreme density se ignoruje (už dříve definováno) */
@media print {
  html.density-extreme {
    --density-mult: 1; --density-font-mult: 1;
  }
}

/* =========================================================
   🔧 OPRAVA: Diagnostika se schovává při změně density/transformaci
   Problém: v .nastaveni-row (grid 1fr 1fr) druhá karta (Diagnostika)
   se vytlačuje mimo viewport, když má první karta (Zálohy) širší obsah
   (zalohy-table s mnoha sloupci, zvláště při extrémní hustotě).
   Řešení: omezit minimální šířku grid položek + povolit scroll uvnitř karty.
   ========================================================= */
.nastaveni-row > .card-block,
.nastaveni-row > .ns-stack {
  min-width: 0;             /* prevent grid track from expanding */
  overflow-x: auto;         /* pokud obsah přeteče, scroll uvnitř karty */
}

/* Zálohy/diagnostika obsah - jemný scroll pro tabulky uvnitř */
#ns-zalohy-list,
#ns-diag-summary,
#api-tokens-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
#ns-zalohy-list table {
  min-width: 100%;
}

/* Scrollbar styling — diskrétní (stejně jako v desktop tabulkách) */
.nastaveni-row > .card-block::-webkit-scrollbar,
#ns-zalohy-list::-webkit-scrollbar {
  height: 6px;
}
.nastaveni-row > .card-block::-webkit-scrollbar-thumb,
#ns-zalohy-list::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 3px;
}

/* =========================================================
   🍎 APPLE THEME — clean, minimální, SF Pro, jemné stíny
   Inspirováno macOS / iCloud / Apple Mail vizuálním jazykem.
   Zachovává brand zlatý akcent (#BA7517) ale s Apple-style polish.
   ========================================================= */
html.theme-apple {
  /* Apple palette */
  --bg: #F5F5F7;                /* Apple page background */
  --surface: #FFFFFF;            /* Pure white cards */
  --surface-1: #FFFFFF;
  --surface-2: #FAFAFB;          /* Subtle gray (hover, secondary) */
  --text: #1D1D1F;               /* Apple dark text */
  --text-1: #1D1D1F;
  --text-2: #515154;             /* Secondary text */
  --text-3: #86868B;             /* Tertiary (Apple's gray) */
  --border: #D2D2D7;             /* Apple's border gray */
  --border-2: #C7C7CC;
  --primary: #BA7517;            /* Keep brand gold */
  --primary-dark: #854F0B;
  --primary-light: rgba(186, 117, 23, 0.08);
  --primary-border: rgba(186, 117, 23, 0.30);
  --success-bg: rgba(48, 209, 88, 0.12);
  --success-text: #248A3D;
  --danger-bg: rgba(255, 69, 58, 0.10);
  --danger-text: #C7372F;
  --info-bg: rgba(0, 122, 255, 0.10);
  --info-text: #0071E3;

  /* Apple-style border radius — větší než default */
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 980px;

  /* Apple font stack */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

html.theme-apple body {
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "ss01", "ss02", "kern";
}

/* Layout */
html.theme-apple .admin-app { background: var(--bg); }
html.theme-apple .main-wrap { background: var(--bg); }
html.theme-apple .main-content { background: var(--bg); }

/* Sidebar — clean white with soft shadow */
html.theme-apple .sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
}
html.theme-apple .sidebar-logo {
  border-bottom: 1px solid var(--border);
}
html.theme-apple .sidebar-logo strong {
  font-weight: 600;
  letter-spacing: -0.02em;
}
html.theme-apple .sidebar-logo .logo-icon {
  background: linear-gradient(135deg, #FFB940, #BA7517);
  color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(186, 117, 23, 0.25);
}

/* Nav items — Apple Settings-like rounded cards
   Pozn.: padding/font-size NENASTAVUJEME — vlastní je density (compact/spacious/extreme).
   Apple téma jen přidává vizuální styling (barvy, border-radius, shadow). */
html.theme-apple .nav-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-2);
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
html.theme-apple .nav-item:hover {
  background: var(--surface-2);
  border-color: var(--primary-border);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
html.theme-apple .nav-item.active {
  background: linear-gradient(180deg, #FFC966 0%, #BA7517 100%);
  border-color: #BA7517;
  color: #FFFFFF;
  text-shadow: none;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(186, 117, 23, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
html.theme-apple .nav-icon {
  filter: none;
  /* font-size NESTAVUJEME — owns density */
}

/* Topbar — translucent / frosted */
html.theme-apple .topbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}

/* Karty — větší rounded + jemné stíny */
html.theme-apple .card-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 2px 8px rgba(0, 0, 0, 0.02);
}
html.theme-apple .card-block h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Modal — Apple sheet-style */
html.theme-apple .modal-overlay {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html.theme-apple .modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15),
              0 12px 24px rgba(0, 0, 0, 0.08);
}
html.theme-apple .modal-head h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
html.theme-apple .modal-close {
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  font-weight: 400;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  transition: all 0.18s ease;
}
html.theme-apple .modal-close:hover {
  background: var(--border);
  color: var(--text);
}

/* Buttons — Apple-style rounded with soft shadows */
html.theme-apple .btn-primary {
  background: linear-gradient(180deg, #FFC966 0%, #BA7517 100%);
  border: 1px solid #A36513;
  color: #FFFFFF;
  border-radius: 980px;       /* pill shape */
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 6px rgba(186, 117, 23, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transition: all 0.18s ease;
}
html.theme-apple .btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(186, 117, 23, 0.42),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html.theme-apple .btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

html.theme-apple .btn-primary.btn-green {
  background: linear-gradient(180deg, #34D058 0%, #248A3D 100%);
  border-color: #1F7330;
  box-shadow: 0 2px 6px rgba(36, 138, 61, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

html.theme-apple .btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 980px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.18s ease;
}
html.theme-apple .btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--text-3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html.theme-apple .btn-danger {
  background: linear-gradient(180deg, #FF6961 0%, #C7372F 100%);
  border: 1px solid #A02A22;
  color: #FFFFFF;
  border-radius: 980px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(199, 55, 47, 0.30);
}

/* Form inputs — Apple style with subtle borders */
html.theme-apple .form-input,
html.theme-apple .form-textarea,
html.theme-apple .filter-input,
html.theme-apple input[type=text],
html.theme-apple input[type=email],
html.theme-apple input[type=password],
html.theme-apple input[type=number],
html.theme-apple input[type=search],
html.theme-apple input[type=date],
html.theme-apple select,
html.theme-apple textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  /* font-size NESTAVUJEME — owns density */
  letter-spacing: -0.01em;
  transition: all 0.15s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}
html.theme-apple .form-input:focus,
html.theme-apple .filter-input:focus,
html.theme-apple textarea:focus,
html.theme-apple select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 4px rgba(186, 117, 23, 0.15),
              inset 0 1px 2px rgba(0, 0, 0, 0.02);
}
html.theme-apple .form-label {
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-2);
  /* font-size NESTAVUJEME — owns density */
}

/* Tabulky — Apple Numbers-like */
html.theme-apple .table {
  font-feature-settings: "kern", "tnum";
}
html.theme-apple .table thead {
  background: var(--surface-2);
}
html.theme-apple .table th {
  background: var(--surface-2);
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* font-size NESTAVUJEME — owns density */
  border-bottom: 1px solid var(--border);
}
html.theme-apple .table td {
  border-bottom: 1px solid var(--border);
}
html.theme-apple .table tbody tr:nth-child(even) td {
  background: transparent;   /* clean Apple style, no zebra */
}
html.theme-apple .table tbody tr:hover td {
  background: rgba(186, 117, 23, 0.06) !important;
}

/* Status badges — Apple-style pills (font-size + padding owns density) */
html.theme-apple .status,
html.theme-apple .role-badge {
  border-radius: 980px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
html.theme-apple .status.dorucena {
  background: rgba(48, 209, 88, 0.12);
  color: #248A3D;
}
html.theme-apple .status.zrusena {
  background: rgba(255, 69, 58, 0.12);
  color: #C7372F;
}
html.theme-apple .status.nova {
  background: rgba(0, 122, 255, 0.12);
  color: #0071E3;
}
html.theme-apple .status.potvrzena {
  background: rgba(48, 209, 88, 0.12);
  color: #248A3D;
}
html.theme-apple .status.ve_vyrobe {
  background: rgba(255, 159, 10, 0.12);
  color: #B25000;
}

/* Stat cards — Apple Dashboard style */
html.theme-apple .stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.theme-apple .stat-value {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Period tabs / modal tabs — Apple segmented control */
html.theme-apple .period-tab,
html.theme-apple .modal-tab {
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: all 0.15s ease;
}
html.theme-apple .period-tab.active,
html.theme-apple .modal-tab.active {
  background: var(--surface);
  border-color: var(--primary-border);
  color: var(--primary-dark);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

/* Nastaveni tabs — Apple Preferences-like */
html.theme-apple .nastaveni-tabs {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 4px;
  border: 1px solid var(--border);
}
html.theme-apple .nastaveni-tab {
  border-radius: 8px;
  font-weight: 500;
}
html.theme-apple .nastaveni-tab.active {
  background: var(--surface);
  color: var(--primary-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

/* Doc badges — Apple-style pills (font-size owns density) */
html.theme-apple .doc-badge {
  border-radius: 980px;
  font-weight: 600;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
}

/* Page title */
html.theme-apple .page-title {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
}
html.theme-apple .page-sub {
  color: var(--text-3);
  letter-spacing: -0.005em;
}

/* Filtry bar */
html.theme-apple .filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Checkbox/Radio — Apple-style rounded */
html.theme-apple input[type="checkbox"],
html.theme-apple input[type="radio"] {
  accent-color: var(--primary);
}

/* Login screen — Apple-style sheet */
html.theme-apple .login-screen {
  background: linear-gradient(180deg, #F5F5F7 0%, #E8E8ED 100%);
}
html.theme-apple .login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.10),
              0 12px 24px rgba(0, 0, 0, 0.06);
}
html.theme-apple .login-card h1 {
  font-weight: 700;
  letter-spacing: -0.03em;
}
html.theme-apple .login-logo-icon {
  background: linear-gradient(135deg, #FFC966, #BA7517);
  box-shadow: 0 8px 24px rgba(186, 117, 23, 0.30);
}

/* Topbar buttons — Apple style (BEZ .btn-prodejna — ta zůstává zelená CTA pro konzistenci napříč tématy) */
html.theme-apple .btn-fullscreen,
html.theme-apple .btn-logout {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 980px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.theme-apple .btn-fullscreen:hover,
html.theme-apple .btn-logout:hover {
  background: var(--surface);
  border-color: var(--text-3);
}
/* 🛒 Apple theme — Online prodejna: zachovej zelený gradient + bílý text (CTA výrazné napříč všemi tématy) */
html.theme-apple .btn-prodejna {
  background: linear-gradient(180deg, #34c759 0%, #28a745 45%, #1e8e3e 100%) !important;
  color: #fff !important;
  border: 1px solid #1e8e3e !important;
  font-weight: 600 !important;
  border-radius: 980px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 2px 5px rgba(30, 142, 62, 0.25),
    0 6px 14px rgba(30, 142, 62, 0.18) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
html.theme-apple .btn-prodejna:hover {
  filter: brightness(1.05);
  border-color: #166534 !important;
}

/* Sidebar pin */
html.theme-apple .sidebar-pin {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-2);
}
html.theme-apple body.sidebar-pinned .sidebar-pin {
  background: linear-gradient(180deg, #FFE0A8 0%, #FFC966 100%);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* Scrollbar — Apple minimal */
html.theme-apple ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.theme-apple ::-webkit-scrollbar-track {
  background: transparent;
}
html.theme-apple ::-webkit-scrollbar-thumb {
  background: rgba(60, 60, 67, 0.20);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.theme-apple ::-webkit-scrollbar-thumb:hover {
  background: rgba(60, 60, 67, 0.35);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Cards na dashboardu */
html.theme-apple .recent-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}

/* Empty state */
html.theme-apple .empty-state {
  background: var(--surface-2);
  border-radius: 12px;
  color: var(--text-3);
}

/* Doc-badge dark variants — clean borders */
html.theme-apple .doc-badge.obj {
  background: rgba(0, 122, 255, 0.10);
  color: #0071E3;
}
html.theme-apple .doc-badge.dl {
  background: rgba(255, 159, 10, 0.10);
  color: #B25000;
}
html.theme-apple .doc-badge.fa {
  background: rgba(48, 209, 88, 0.10);
  color: #248A3D;
}
html.theme-apple .doc-badge.rucni {
  background: rgba(142, 142, 147, 0.12);
  color: #515154;
}

/* Print: vždy default styling */
@media print {
  html.theme-apple {
    font-family: Georgia, "Times New Roman", serif !important;
    background: white !important;
  }
}

/* =========================================================
   🍎 APPLE THEME — POLISH PASS
   Vychytávky pro centering, alignment, missing components
   ========================================================= */

/* ── 1. PRECIZNÍ CENTERING ── */
/* Logo icon — perfektně vycentrovat "R" */
html.theme-apple .sidebar-logo .logo-icon,
html.theme-apple .login-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}

/* Modal-close × — perfektní centering pro Apple téma (40 px round button) */
html.theme-apple .modal-close {
  line-height: 1;
  font-weight: 400;
  /* SF Pro × glyph na 40 px tlačítku vypadá pěkně medium-weight */
}

/* Nav-item — ikona perfektně zarovnaná s textem */
html.theme-apple .nav-item {
  display: inline-flex;
  align-items: center;
}
html.theme-apple .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── 2. LOGIN SCREEN — větší polish ── */
html.theme-apple .login-card {
  padding: 40px 36px;
}
html.theme-apple .login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
html.theme-apple .login-logo-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;        /* Apple app icon corner radius */
  font-size: 32px;
  color: #FFFFFF;
}
html.theme-apple .login-logo h1 {
  margin: 0;
  font-size: 22px;
}
html.theme-apple .login-logo p {
  margin: 0;
  color: var(--text-3);
  font-size: 14px;
  letter-spacing: -0.01em;
}
html.theme-apple .login-form label {
  display: block;
  margin-bottom: 14px;
}
html.theme-apple .login-form label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: -0.005em;
}

/* ── 3. PERIOD TABS / QUICK PERIOD ROW — Apple segmented control ── */
html.theme-apple .quick-period-row {
  display: inline-flex;
  background: rgba(118, 118, 128, 0.12);
  border-radius: 10px;
  padding: 3px;
  gap: 0;
  width: fit-content;
}
html.theme-apple .quick-period-row > * {
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-2);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: all 0.15s ease;
  padding: 6px 14px;
}
html.theme-apple .quick-period-row > .active,
html.theme-apple .quick-period-row > [aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 🆕 v2.9.249 — Apple theme .period-tabs override smazán (kolidoval flex-wrap: wrap
   + pill design). Period-tabs nyní řízeny unified blokem nahoře (řádek 1984+).
   Apple-style active glow zachován jen jako jemný shadow tweak. */
html.theme-apple .period-tab.active,
html.theme-apple .seg-tab.active,
html.theme-apple .nastaveni-tab.active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(186, 117, 23, 0.18) !important;
}

/* ── 4. FORM-ACTIONS bar v modalech — Apple sheet-style ── */
html.theme-apple .form-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── 5. MODAL STATS BOX — Apple summary header ── */
html.theme-apple .modal-stats-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
html.theme-apple .modal-stats-box .stat-key {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 4px;
}
html.theme-apple .modal-stats-box .stat-val {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ── 6. BULK-BAR (vybrané položky) — Apple sheet ── */
html.theme-apple .bulk-bar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}
html.theme-apple .bulk-bar-count {
  background: var(--primary);
  color: #FFFFFF;
  border-radius: 980px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: 13px;
}

/* ── 7. RECENT CARDS — colored heads ── */
html.theme-apple .recent-card.recent-obj .recent-card-head h3 {
  color: #0071E3;
}
html.theme-apple .recent-card.recent-dl .recent-card-head h3 {
  color: #B25000;
}
html.theme-apple .recent-card.recent-fa .recent-card-head h3 {
  color: #248A3D;
}
html.theme-apple .recent-card-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

/* ── 8. THEME / DENSITY CARDS — Apple polish ── */
html.theme-apple .theme-card,
html.theme-apple .density-card {
  background: var(--surface) !important;
  border-radius: 14px !important;
  border-width: 2px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.18s ease;
}
html.theme-apple .theme-card:hover,
html.theme-apple .density-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
  border-color: var(--text-3) !important;
}
html.theme-apple .theme-card.is-active,
html.theme-apple .density-card.is-active {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.15),
              0 4px 12px rgba(186, 117, 23, 0.12);
}

/* ── 9. BTN-LINK — Apple link button ── */
html.theme-apple .btn-link {
  color: var(--info-text);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: opacity 0.15s ease;
}
html.theme-apple .btn-link:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* ── 10. INPUT[type=date] — Apple finesse ── */
html.theme-apple input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s;
}
html.theme-apple input[type=date]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* ── 11. CODE / PRE — Apple monospace ── */
html.theme-apple code,
html.theme-apple pre {
  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
  font-size: 0.92em;
  background: rgba(118, 118, 128, 0.12);
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--text);
}
html.theme-apple pre {
  padding: 12px 14px;
  border-radius: 10px;
  overflow-x: auto;
}

/* ── 12. FILTER ROW — alignment ── */
html.theme-apple .filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
html.theme-apple .filter-dates-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
html.theme-apple .filter-date-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── 13. STAT-GRID — Apple Dashboard look ── */
html.theme-apple .stat-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
html.theme-apple .stat-label {
  letter-spacing: -0.005em;
  font-weight: 500;
}
html.theme-apple .stat-value {
  line-height: 1.1;
}

/* ── 14. PAGE HEAD — title + subtitle ── */
html.theme-apple .page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
html.theme-apple .page-head h1.page-title {
  margin: 0 0 4px 0;
  line-height: 1.15;
}
html.theme-apple .page-head .page-sub {
  margin: 0;
  line-height: 1.4;
}

/* ── 15. REORDER CHIP — recent orders pillsy ── */
html.theme-apple .reorder-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.18s ease;
}
html.theme-apple .reorder-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--text-3);
}
html.theme-apple .reorder-chip.reorder-chip-active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* ── 16. SAB-CARD (cenovka picker) — Apple polish ── */
html.theme-apple .sab-card {
  border-radius: 12px !important;
  transition: all 0.18s ease !important;
  background: var(--surface) !important;
}
html.theme-apple .sab-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10) !important;
}
html.theme-apple .sab-card.is-active {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.15),
              0 4px 12px rgba(186, 117, 23, 0.10) !important;
}

/* ── 17. TOPBAR — datum/svatek text ── */
html.theme-apple .topbar-datum-svatek {
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-2);
}
html.theme-apple .topbar-user-name {
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ── 18. DETAILS / SUMMARY (FAQ) — Apple disclosure ── */
html.theme-apple details.card-block {
  transition: all 0.18s ease;
}
html.theme-apple details.card-block summary {
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
  position: relative;
}
html.theme-apple details.card-block summary::-webkit-details-marker {
  display: none;
}
html.theme-apple details.card-block summary::after {
  content: '⌃';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  font-size: 18px;
  color: var(--text-3);
  transition: transform 0.2s ease;
}
html.theme-apple details.card-block[open] summary::after {
  transform: translateY(-50%) rotate(0deg);
}

/* ── 19. ODB-TYP-PILL (odběratele kategorie) — Apple polish ── */
html.theme-apple .odb-typ-pill {
  background: var(--surface);
  border-radius: 980px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.18s ease;
}
html.theme-apple .odb-typ-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
html.theme-apple .odb-typ-pill.is-active {
  background: linear-gradient(180deg, #FFC966 0%, #BA7517 100%);
  border-color: #BA7517;
  box-shadow: 0 4px 12px rgba(186, 117, 23, 0.30),
              inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* ── 20. ROZVOZY TILE na Dashboardu — Apple polish ── */
html.theme-apple .dashboard-rozvozy-tile {
  background: linear-gradient(135deg, #FFF8E5 0%, #FAEEDA 100%) !important;
  border-color: var(--primary) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.18s ease !important;
}
html.theme-apple .dashboard-rozvozy-tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(186, 117, 23, 0.20) !important;
}

/* ── 21. BTN-BACK (Zpět) — Apple style ── */
html.theme-apple .btn-back {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 980px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.theme-apple .btn-back:hover {
  background: var(--surface-2);
  border-color: var(--text-3);
  transform: translateX(-2px);
}

/* ── 22. BTN-ICON-ACTION (Rozvozy v DL header) — Apple polish ── */
html.theme-apple .btn-icon-action {
  background: var(--surface);
  border-radius: 980px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.theme-apple .btn-rozvozy-action {
  background: linear-gradient(180deg, #FFE0A8 0%, #FFC966 100%) !important;
  border-color: #BA7517 !important;
}
html.theme-apple .btn-rozvozy-action:hover {
  background: linear-gradient(180deg, #FFC966 0%, #BA7517 100%) !important;
  color: #FFFFFF !important;
}

/* ── 23. SECTION HEADERS uvnitř karet — Apple style ── */
html.theme-apple .card-block h4 {
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* ── 24. CHECKBOX ROW — Apple list-item style ── */
html.theme-apple .checkbox-row {
  border-radius: 10px;
  transition: background 0.15s ease;
}
html.theme-apple .checkbox-row:hover {
  background: var(--surface-2);
}

/* ── 25. FOCUS RING — Apple consistent across all inputs/buttons ── */
html.theme-apple .btn-primary:focus-visible,
html.theme-apple .btn-secondary:focus-visible,
html.theme-apple .btn-danger:focus-visible,
html.theme-apple .nav-item:focus-visible,
html.theme-apple .btn-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.30);
}

/* ── 26. SELECTION color — Apple blue ── */
html.theme-apple ::selection {
  background: rgba(0, 122, 255, 0.20);
  color: var(--text);
}

/* ── 27. HOVER on rows v tabulkách — smooth ── */
html.theme-apple .table tbody tr {
  transition: background 0.15s ease;
}

/* ── 28. APPLE-STYLE SEPARATOR (HR) ── */
html.theme-apple hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* ── 29. KBD elementy — Apple key cap ── */
html.theme-apple kbd {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 8px;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 12px;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* ── 30. APPLE TOAST NOTIFICATION (bottom-right notifikace) ── */
html.theme-apple [style*="position:fixed"][style*="bottom"][style*="right"] {
  /* notifikace bottom-right získají Apple look automaticky */
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15),
              0 4px 12px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* =========================================================
   📊 TABULKY — agresivní smrštění do okna (Faktury/DL/Objednávky)
   Opravuje overflow tabulek s víc sloupci na užším oknech.
   ========================================================= */

/* Akční sloupec (📄 DL · 💰 FA tlačítka) — přebít inline width:130px */
.card-block.desktop-only-block .table-selectable th:last-child,
.card-block.desktop-only-block .table-selectable td:last-child {
  width: auto !important;
  min-width: 0 !important;
}

/* ZDROJ sloupec (OBJ + DL badges vedle sebe) — STACK vertikálně na užším */
@media (max-width: 1500px) {
  .card-block.desktop-only-block .table-selectable .doc-badges-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px !important;
  }
  /* Faktury action col: ikony pod sebou — širší než ZDROJ ale OK */
  .card-block.desktop-only-block .table-selectable td:last-child .doc-badges-row {
    align-items: flex-end;
  }
}

/* Velmi úzké okno — radikálně šetřit */
@media (max-width: 1280px) {
  /* Tabulka: každý sloupec se zmenší na min-content */
  .card-block.desktop-only-block .table-selectable {
    font-size: 11.5px;
  }
  .card-block.desktop-only-block .table-selectable th,
  .card-block.desktop-only-block .table-selectable td {
    padding: 7px 5px !important;
  }
  /* Doc-badge ještě menší */
  .card-block.desktop-only-block .table-selectable .doc-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
  /* Akční tlačítka 📄 DL · 💰 FA — jen ikona bez textu na úzkém */
  .card-block.desktop-only-block .table-selectable td:last-child .doc-badge {
    padding: 4px 8px !important;
  }
}

/* Pod 1100px — schovat VS sloupec (redundantní s číslem faktury) */
@media (max-width: 1100px) {
  /* Faktury table: VS je 6. col (po check, cislo, odberatel, vystaveno, splatnost) */
  .card-block.desktop-only-block .table-selectable th:nth-of-type(6),
  .card-block.desktop-only-block .table-selectable td:nth-of-type(6) {
    display: none;
  }
}

/* Pod 950px — schovat sloupce POL. + ZDROJ podrobnosti */
@media (max-width: 950px) {
  /* POL = 8. col, ZDROJ = 7. col — ale po skrytí VS jsou posunuté */
  /* Jednodušší: schovat dle obsahu — POL má class .num */
  .card-block.desktop-only-block .table-selectable .num {
    /* zachovat čitelnost čísel */
    font-feature-settings: "tnum";
  }
}

/* DODACÍ LISTY tabulka má ještě víc sloupců — agresivnější smrštění */
@media (max-width: 1500px) {
  /* DL: Pobočka sloupec (col 5) může wrap */
  .card-block.desktop-only-block .table-selectable td {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Aby ZDROJ sloupec měl rozumnou max-width (brání mu rozšířit se) */
.card-block.desktop-only-block .table-selectable .doc-badges-row {
  max-width: 100%;
  flex-wrap: wrap;
}

/* =========================================================
   📊 .col-akce — akční sloupec v Faktury/DL/Objednávky tabulkách
   (předtím inline width:130px, teď responzivní)
   ========================================================= */
.table-selectable th.col-akce,
.table-selectable td.col-akce,
.table-selectable td:last-child {
  width: 1%;                /* shrinks to content */
  white-space: nowrap;
  text-align: right;
}
/* Default — má prostor pro 2 buttony vedle sebe */
@media (min-width: 1501px) {
  .table-selectable th.col-akce {
    min-width: 130px;
  }
}
/* Na užším okně — buttony stack vertikálně, sloupec úzký */
@media (max-width: 1500px) {
  .table-selectable td:last-child .doc-badges-row {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px !important;
  }
  .table-selectable th.col-akce {
    min-width: 80px;
  }
}

/* =========================================================
   🔄 EXTREME density + úzké okno → auto-switch na mobilní karty
   Důvod: na extrémní hustotě jsou cells obří (padding 22px, font 17px),
   tabulka potřebuje 1700px+ pro 11 sloupců. Místo scrollu se přepne
   na karty (perfect pro slabozraké — vertikální stack všech info).
   ========================================================= */
@media (max-width: 1500px) {
  html.density-extreme .desktop-only-block {
    display: none !important;
  }
  html.density-extreme .mobile-only-block {
    display: block !important;
  }
  /* Grid bloky (výrobky, kategorie) zachovat grid */
  html.density-extreme .vyrobky-grid.mobile-only-block,
  html.density-extreme .kategorie-grid.mobile-only-block {
    display: grid !important;
  }
}

/* Density-spacious + extra úzké okno (laptop <1280px) → také karty */
@media (max-width: 1280px) {
  html.density-spacious .desktop-only-block {
    display: none !important;
  }
  html.density-spacious .mobile-only-block {
    display: block !important;
  }
  html.density-spacious .vyrobky-grid.mobile-only-block,
  html.density-spacious .kategorie-grid.mobile-only-block {
    display: grid !important;
  }
}

/* Při extrémní hustotě v kartách udělej je ještě prostornější */
html.density-extreme .faktura-card,
html.density-extreme .dl-card,
html.density-extreme .odberatel-card,
html.density-extreme .obj-card {
  padding: 28px;
  margin-bottom: 18px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.5;
}
html.density-extreme .faktura-card-cislo,
html.density-extreme .dl-card-cislo,
html.density-extreme .odberatel-card-nazev {
  font-size: 24px !important;
  font-weight: 700;
}
html.density-extreme .faktura-card-castka {
  font-size: 28px !important;
}
html.density-extreme .faktura-card-foot .faktura-card-datum span,
html.density-extreme .faktura-card-meta span,
html.density-extreme .odberatel-card-stats {
  font-size: 16px;
}
html.density-extreme .doc-badge {
  font-size: 16px;
  padding: 10px 18px;
  min-height: 48px;
}

/* Density-spacious karty — taky o trochu větší než default */
html.density-spacious .faktura-card,
html.density-spacious .dl-card,
html.density-spacious .odberatel-card,
html.density-spacious .obj-card {
  padding: 20px;
}
html.density-spacious .faktura-card-cislo,
html.density-spacious .dl-card-cislo {
  font-size: 19px !important;
}
html.density-spacious .faktura-card-castka {
  font-size: 22px !important;
}

/* =========================================================
   📑 NASTAVENÍ TABS — v2.9.244 NIKDY nezalamovat (user request)
   Tokens řeší škálování přes clamp() v unified blocku nahoře.
   Container má overflow-x: auto jako fallback pokud se nevejdou.
   ========================================================= */
/* Density override — extreme density potřebuje větší tap targets */
html.density-extreme .nastaveni-tabs {
  gap: 6px;
  padding: 6px;
}
html.density-extreme .nastaveni-tab {
  padding: calc(var(--filter-tab-pad-y) + 4px) calc(var(--filter-tab-pad-x) + 4px);
}

/* =========================================================
   🎯 FINÁLNÍ FIX: Spacious/Extreme density → CARDS dřív
   Předchozí breakpointy (1280/1500) byly moc nízké — table
   pořád přetékala i na 1366×768 laptop. Teď agresivnější:
   - Spacious: cards pod 1700px (laptopy do 17")
   - Extreme: cards pod 2200px (skoro vždy kromě 4K monitorů)
   ========================================================= */

/* 🐛 v3.0.269 — spacious/extreme breakpointy 1700/2200 → 1300. Dřív „skoro
   vždy karty kromě 4K" (komentář to sám přiznával) → na běžných monitorech
   natlačené karty místo tabulek. Sjednoceno na 1300 (tablet) pro všechny
   hustoty; nad 1300 = full-width tabulka (viz #content max-width:none fix). */
@media (max-width: 1300px) {
  html.density-spacious .desktop-only-block,
  html.density-extreme .desktop-only-block {
    display: none !important;
  }
  html.density-spacious .mobile-only-block,
  html.density-extreme .mobile-only-block {
    display: block !important;
  }
  html.density-spacious .vyrobky-grid.mobile-only-block,
  html.density-spacious .kategorie-grid.mobile-only-block,
  html.density-extreme .vyrobky-grid.mobile-only-block,
  html.density-extreme .kategorie-grid.mobile-only-block {
    display: grid !important;
  }
}

/* Bezpečnostní pojistka: vypnout overflow-x scrollbar v případech
   kdy se přepínáme na karty (scrollbar by zbyl po předchozí state) */
html.density-spacious .card-block.desktop-only-block,
html.density-extreme .card-block.desktop-only-block {
  overflow-x: visible;
}

/* =========================================================
   🎯 WIDE-TABLE-BLOCK — Faktury, Dodací listy, Objednávky
   Tyto tabulky mají 10–11 sloupců a v běžných oknech přetékají.
   Řešení: AUTOMATICKY se přepnou na mobilní karty už od 1300 px
   (místo 700 px) bez ohledu na hustotu.
   ========================================================= */

/* Při < 1300 px ihned karty (i v Pohodlném režimu) */
@media (max-width: 1300px) {
  .desktop-only-block.wide-table-block {
    display: none !important;
  }
  .mobile-only-block.wide-table-block {
    display: block !important;
  }
}

/* 🐛 v3.0.269 — breakpointy sníženy z 1700/2200 na 1300: dřív i hustota
   Prostorná/Extrémní házela široké tabulky do karet skoro vždy (i na 1920
   monitoru) → karty natlačené vlevo, prázdno vpravo. Teď tabulka full-width
   na desktopu (>1300) ve VŠECH hustotách; karty jen pod 1300 (tablet/mobil).
   Přetečení řeší overflow-x:auto na .wide-table-block. */
@media (max-width: 1300px) {
  html.density-spacious .desktop-only-block.wide-table-block,
  html.density-extreme .desktop-only-block.wide-table-block {
    display: none !important;
  }
  html.density-spacious .mobile-only-block.wide-table-block,
  html.density-extreme .mobile-only-block.wide-table-block {
    display: block !important;
  }
}

/* Když je viditelná wide-table-block KARTA, vypnout overflow:auto na rodiči
   (jinak by zůstal scrollbar po předchozí tabulce) */
@media (max-width: 1300px) {
  .desktop-only-block.wide-table-block {
    overflow: visible !important;
  }
}
/* ════════════════════════════════════════════════════════════════════
   🎯 APPEK OVERLAY (v2.8.5)
   APPEK-specific styles that reprekv.cz CSS doesn't have.
   Hides: skip-link, bottom-nav. Styles: package-subheader, btn-cmdk-trigger,
   btn-notif, btn-fullscreen, btn-prodejna B2B green pill, btn-logout, role-badge.
   ════════════════════════════════════════════════════════════════════ */

/* Skip-link — only visible when focused (accessibility) */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--primary, #BA7517);
  color: white;
  padding: 12px 20px;
  z-index: 9999;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #FFF;
  outline-offset: 2px;
}

/* Bottom-nav — hidden by default (desktop), shown on mobile bottom */
.bottom-nav { display: none; }

/* 🆕 v3.0.39 — Pocket-ready: ENABLE bottom nav on mobile (real-world mobile UX) */
@media (max-width: 768px) {
  .bottom-nav {
    display: block !important; /* override v2.8.5 hide */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
    /* iOS safe area (home indicator pruh dole) */
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
  html.dark .bottom-nav {
    background: rgba(28, 28, 30, 0.92);
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  /* Spodní clearance obsahu pod fixed nav (72px) I plovoucí FAB (bottom:88px + 56px výška
     = sahá do 144px). v3.0.320 — selektor MUSÍ být main#content (spec 1,0,1) + !important,
     protože tak vyhrává nad floorplan `main#content{padding:var(--fl)}` (20258); slabší
     #content (1,0,0) prohrával → padding zůstával malý a FAB překrýval karty. Tenhle blok
     (≤768) pokrývá pásmo 701-768 kde FAB svítí ale ≤700 blok (ř.~20637) ještě ne. Obě
     pravidla = 150px. + safe-area iOS. Viz sesterské pravidlo v @media(max-width:700px). */
  main#content,
  .main-content {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Notification badge na nav item (např. pending objednávek) */
  .bottom-nav-item {
    position: relative;
    min-height: 56px; /* touch target ≥44px */
  }
  .bottom-nav-item .bn-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 22px);
    background: #DC2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
    animation: bn-badge-pulse 1.4s ease-in-out infinite;
  }
  @keyframes bn-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
  }
  /* Při focus se neonová ringa */
  .bottom-nav-item:active {
    background: rgba(186, 117, 23, 0.08);
  }
}

/* 🆕 v3.0.39 — Context-aware FAB (Floating Action Button) — primary akce per stránka */
.app-fab {
  position: fixed;
  right: 16px;
  bottom: 88px; /* nad bottom-nav (72px nav + 16px margin) */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #BA7517, #854F0B);
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(186, 117, 23, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 91;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  /* iOS safe-area + Android nav */
  margin-bottom: env(safe-area-inset-bottom, 0);
  -webkit-tap-highlight-color: transparent;
}
.app-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(186, 117, 23, 0.5), 0 3px 8px rgba(0, 0, 0, 0.22);
}
.app-fab:active {
  transform: scale(0.96);
}
.app-fab.has-label {
  width: auto;
  padding: 0 22px 0 16px;
  border-radius: 28px;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
}
.app-fab .fab-label {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.app-fab.is-hidden,
.app-fab.is-dismissed {
  display: none;
}
/* Skrýt FAB na desktop (jen mobilní vychytávka) */
@media (min-width: 769px) {
  .app-fab { display: none !important; }
}

/* 🆕 v3.0.39 — PWA install banner */
.pwa-install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0));
  z-index: 95;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border: 1.5px solid #F59E0B;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 32px rgba(245, 158, 11, 0.25), 0 4px 10px rgba(0, 0, 0, 0.08);
  display: none;
  align-items: center;
  gap: 12px;
  animation: pwa-banner-slideup 0.35s ease-out;
}
.pwa-install-banner.show { display: flex; }
@keyframes pwa-banner-slideup {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.pwa-install-banner-icon {
  font-size: 32px;
  flex-shrink: 0;
}
.pwa-install-banner-text {
  flex: 1;
  min-width: 0;
}
.pwa-install-banner-text strong {
  display: block;
  font-size: 13.5px;
  color: #78350F;
  margin-bottom: 2px;
}
.pwa-install-banner-text span {
  font-size: 11.5px;
  color: #92400E;
  line-height: 1.4;
}
.pwa-install-banner-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.pwa-install-banner-actions button {
  border: none;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
}
.pwa-install-banner-actions .pwa-install-yes {
  background: #92400E;
  color: #fff;
}
.pwa-install-banner-actions .pwa-install-no {
  background: rgba(255, 255, 255, 0.6);
  color: #78350F;
}
@media (min-width: 769px) {
  .pwa-install-banner { display: none !important; }
}

/* 🆕 v3.0.39, 🎨 v3.0.41 — Pull-to-refresh indikátor (vylepšeno s opacity + transformami JS-driven) */
.ptr-indicator {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + 8px);
  left: 50%;
  transform: translate(-50%, -100px);
  z-index: 99;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface, #fff);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: opacity 0.18s ease;
  pointer-events: none;
  opacity: 0;
}
.ptr-indicator.visible {
  opacity: 1;
}
.ptr-indicator.refreshing {
  animation: ptr-spin 0.9s linear infinite !important;
  opacity: 1;
}
@keyframes ptr-spin {
  from { transform: translate(-50%, 0) rotate(0deg); }
  to   { transform: translate(-50%, 0) rotate(360deg); }
}

/* 🆕 v3.0.41, 🐛 v3.0.44 fix — OFFLINE BANNER
   z-index 9999 blokoval modal close button (modal=1000). Sníženo na 800 aby
   otevřený modal byl NAD banner. Banner zůstává nad bottom-nav (90) a FAB (91). */
#appek-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border-bottom: 1.5px solid #F59E0B;
  color: #78350F;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.18);
  animation: off-banner-slidedown 0.32s ease-out;
  padding-top: calc(8px + env(safe-area-inset-top, 0));
}
#appek-offline-banner .off-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
  animation: off-dot-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
#appek-offline-banner .off-msg {
  color: #92400E;
  font-weight: 500;
  font-size: 12px;
  flex: 1;
}
#appek-offline-banner.off-fade-out {
  animation: off-banner-slideup 0.4s ease-in forwards;
}
@keyframes off-banner-slidedown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes off-banner-slideup {
  to { transform: translateY(-100%); opacity: 0; }
}
@keyframes off-dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.15); }
}
@media (max-width: 600px) {
  #appek-offline-banner .off-msg { display: none; }
}

/* 🆕 v3.0.41 — QUICK ACTIONS SHEET (long-press na FAB) */
#appek-quick-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
#appek-quick-sheet.show {
  opacity: 1;
  pointer-events: auto;
}
#appek-quick-sheet .qs-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#appek-quick-sheet .qs-sheet {
  position: relative;
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
  margin-bottom: 0;
}
#appek-quick-sheet.show .qs-sheet {
  transform: translateY(0);
}
html.dark #appek-quick-sheet .qs-sheet,
html.theme-dark #appek-quick-sheet .qs-sheet {
  background: #1c1c1e;
  color: #fff;
}
#appek-quick-sheet .qs-handle {
  width: 44px;
  height: 5px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  margin: 0 auto 14px;
}
html.dark #appek-quick-sheet .qs-handle,
html.theme-dark #appek-quick-sheet .qs-handle {
  background: rgba(255, 255, 255, 0.22);
}
#appek-quick-sheet .qs-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3, #6b6b70);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  text-align: center;
}
#appek-quick-sheet .qs-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
#appek-quick-sheet .qs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  background: var(--surface-2, #f5f5f7);
  border: 1px solid var(--border, #e5e5ea);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  color: var(--text-1, #1d1d1f);
  transition: transform 0.12s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
#appek-quick-sheet .qs-item:active {
  transform: scale(0.96);
  background: var(--primary-light, rgba(186, 117, 23, 0.12));
}
html.dark #appek-quick-sheet .qs-item,
html.theme-dark #appek-quick-sheet .qs-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}
#appek-quick-sheet .qs-icon {
  font-size: 32px;
  line-height: 1;
}
#appek-quick-sheet .qs-label {
  font-size: 12.5px;
  text-align: center;
  line-height: 1.2;
}
#appek-quick-sheet .qs-cancel {
  width: 100%;
  padding: 14px;
  background: var(--surface-2, #f5f5f7);
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-2, #6e6e73);
  cursor: pointer;
  font-family: inherit;
}
html.dark #appek-quick-sheet .qs-cancel,
html.theme-dark #appek-quick-sheet .qs-cancel {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
/* Skrýt sheet na desktop (jen mobile UX) */
@media (min-width: 769px) {
  #appek-quick-sheet { display: none !important; }
}

/* 🆕 v3.0.41 — SWIPE-TO-ACTION underlay */
.swipe-underlay {
  border-radius: inherit;
}
.swipe-underlay .swipe-action-right,
.swipe-underlay .swipe-action-left {
  border-radius: inherit;
}

/* 🐛 v3.0.50 REVERT — smazána celá mobile-rail-hidden / nav-item-mob-hide /
   #mobile-rail-restore logika (v3.0.46/47/48). Uživatel reportoval že
   floating ≡ button se zobrazoval i přes login screen + chaos s rail.
   Necháváme jen existující sidebar-pin (📌) jako jediný mobile toggle. */

/* 🐛 v3.0.51 — fix: APPEK B2B text v topbaru na mobilu (sidebar display:contents
   způsobí že sidebar-logo strong flow do parent gridu → zobrazí se jak topbar).
   🆕 v3.0.63 — User: "ten název toho zákazníka při odepnutém menu je kde?"
   → Vrátit brand text v sidebar-logo na unpinned mobile (display: contents bug
   už neexistuje od v3.0.52). V pinned (rail) zůstává hidden (jen ikona).
   V login mode zůstává hidden (sidebar je celý display:none od v3.0.52). */
@media (max-width: 768px) {
  body.sidebar-pinned .sidebar-logo > strong { display: none !important; }
  /* 🆕 v3.0.120 — selector ZÚŽEN na direct child (`.sidebar-logo > strong`),
     předtím chytal i <strong>Maxmilián</strong> ve svátku → ellipsis "Max..."
     User: 'svátek max-width none Vilém se vejde — proč vysvětlení' */
  body:not(.sidebar-pinned) .sidebar-logo > strong {
    display: inline-block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text, #1a1d24) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
    flex-shrink: 1;
  }
}

/* 🐛 v3.0.51 — fix: Floating elementy (FAB, PTR, PWA banner, bottom-nav, offline)
   se zobrazují i přes login screen protože jsou v body (mimo #app div).
   Pravidlo: pokud #app je display:none (= login showing), schovat floating.
   Plus class-based fallback `body.is-login` pro browsery bez :has(). */
body:has(#app[style*="display: none"]) #app-fab,
body:has(#app[style*="display:none"]) #app-fab,
body:has(#app[style*="display: none"]) .ptr-indicator,
body:has(#app[style*="display:none"]) .ptr-indicator,
body:has(#app[style*="display: none"]) #pwa-install-banner,
body:has(#app[style*="display:none"]) #pwa-install-banner,
body:has(#app[style*="display: none"]) #appek-quick-sheet,
body:has(#app[style*="display:none"]) #appek-quick-sheet,
body:has(#app[style*="display: none"]) .bottom-nav,
body:has(#app[style*="display:none"]) .bottom-nav,
body:has(#app[style*="display: none"]) #appek-offline-banner,
body:has(#app[style*="display:none"]) #appek-offline-banner {
  display: none !important;
}
body.is-login #app-fab,
body.is-login .ptr-indicator,
body.is-login #pwa-install-banner,
body.is-login #appek-quick-sheet,
body.is-login .bottom-nav,
body.is-login #appek-offline-banner {
  display: none !important;
}

/* 🐛 v3.0.52 — KRITICKÝ fix: sidebar má `display: contents` na mobilu, což znamená
   že jeho děti FLOWUJÍ DO BODY a obcházejí `#app[display:none]`. Takže sidebar
   nav-items se ukazují přes login screen!
   Fix: explicitně schovat sidebar (a všechny jeho potomky) když je login. */
body.is-login .sidebar,
body.is-login .sidebar *,
body:has(#app[style*="display: none"]) .sidebar,
body:has(#app[style*="display: none"]) .sidebar *,
body:has(#app[style*="display:none"]) .sidebar,
body:has(#app[style*="display:none"]) .sidebar * {
  display: none !important;
}

/* 🧹 v3.0.88 cleanup — REMOVED v3.0.59 "Pin nav-item style with primary gradient"
   block (mobile @≤768px). Conflict s canonical v3.0.85+ pin (krémová tan
   dlaždice DOLE v rail nahrazuje bottom-nav per v3.0.87 invariant).

   ZACHOVÁNO co bylo důležité:
   - sidebar-utils dashed border-top → už v canonical block (line ~20149)
   - skrýt pin na login → už v line 13197+ (body.is-login rules výše)
   - sidebar-collapse hide na mobilu → mobile hide z base rules (line 13088+)
*/
@media (max-width: 768px) {
  /* sidebar-collapse button — schovat na mobilu (jen pro desktop) */
  .sidebar-collapse { display: none !important; }

  /* Skrýt pin na login screen — defenzivní redundance (taky line 13200+) */
  body.is-login .sidebar-pin,
  body:has(#app[style*="display:none"]) .sidebar-pin {
    display: none !important;
  }
}

/* 🆕 v3.0.42 — REST BANNER TABS (velké color-coded banner buttony v Restaurace)
   User: "to horní menu udělej buttony velké bannery až" */
.rest-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.22s ease,
              filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 84px;
  position: relative;
  overflow: hidden;
}
.rest-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.4) 0%, transparent 50%);
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.rest-banner:hover {
  transform: translateY(-3px) scale(1.02);
  filter: saturate(1.1);
}
.rest-banner:active {
  transform: translateY(-1px) scale(1.01);
  transition-duration: 0.06s;
}
.rest-banner.is-active {
  transform: translateY(-2px);
}
.rest-banner.is-active:hover {
  transform: translateY(-5px) scale(1.02);
}
.rest-banner .rb-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.rest-banner.is-active .rb-icon {
  background: rgba(255, 255, 255, 0.22);
}
.rest-banner .rb-text {
  flex: 1;
  min-width: 0;
}
.rest-banner .rb-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rest-banner .rb-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mobile: 2 sloupce, kompaktnější */
@media (max-width: 700px) {
  .rest-banner-tabs {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .rest-banner {
    padding: 14px 12px;
    gap: 10px;
    min-height: 76px;
  }
  .rest-banner .rb-icon {
    width: 40px;
    height: 40px;
  }
  .rest-banner .rb-icon > * {
    font-size: 26px !important;
  }
  .rest-banner .rb-label {
    font-size: 13.5px !important;
  }
  .rest-banner .rb-sub {
    font-size: 10.5px !important;
  }
}
/* Dark mode */
html.dark .rest-banner:not(.is-active),
html.theme-dark .rest-banner:not(.is-active) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f7 !important;
}
html.dark .rest-banner .rb-icon,
html.theme-dark .rest-banner .rb-icon {
  background: rgba(255, 255, 255, 0.1);
}

/* 🆕 v3.0.43 — REST SUB-TABS (mini bannery pod hlavními tabs)
   User: "ty pod tím taky předělej, ted to vypadá nedodělně" */
.rest-subtab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.16s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease, filter 0.16s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 60px;
  position: relative;
  overflow: hidden;
}
.rest-subtab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.36) 0%, transparent 50%);
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.rest-subtab:hover {
  transform: translateY(-2px) scale(1.015);
  filter: saturate(1.1);
}
.rest-subtab:active {
  transform: translateY(0) scale(1);
  transition-duration: 0.06s;
}
.rest-subtab.is-active {
  transform: translateY(-1px);
}
.rest-subtab.is-active:hover {
  transform: translateY(-3px) scale(1.015);
}
.rest-subtab .rsb-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.rest-subtab.is-active .rsb-icon {
  background: rgba(255, 255, 255, 0.22);
}
.rest-subtab .rsb-text { flex: 1; min-width: 0; }
.rest-subtab .rsb-label,
.rest-subtab .rsb-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .rest-subtabs {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .rest-subtab { padding: 10px 12px; gap: 8px; min-height: 56px; }
  .rest-subtab .rsb-icon { width: 32px; height: 32px; }
  .rest-subtab .rsb-icon > * { font-size: 18px !important; }
  .rest-subtab .rsb-label { font-size: 12.5px !important; }
  .rest-subtab .rsb-sub { font-size: 10px !important; }
}
html.dark .rest-subtab:not(.is-active),
html.theme-dark .rest-subtab:not(.is-active) {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f7 !important;
}
html.dark .rest-subtab .rsb-icon,
html.theme-dark .rest-subtab .rsb-icon { background: rgba(255, 255, 255, 0.1); }

/* 🆕 v3.0.43 — REST ZONE TABS (Zahrada/Pergola atd. — pill-shape bannery) */
.rt-zone-tabs {
  padding: 0;
  background: transparent;
}
.rt-zone-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.14s ease, box-shadow 0.2s ease, filter 0.16s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.rt-zone-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.32) 0%, transparent 60%);
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.rt-zone-tab:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
}
.rt-zone-tab:active { transform: translateY(0); }
.rt-zone-tab.is-active { transform: translateY(-1px); }

.rt-zone-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  border: 2px dashed var(--border, #e5e5ea);
  background: transparent;
  color: var(--text-3, #6e6e73);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rt-zone-add:hover {
  border-color: var(--primary, #BA7517);
  color: var(--primary-dark, #854F0B);
}

@media (max-width: 700px) {
  .rt-zone-tab { padding: 8px 14px; }
  .rt-zone-tab .ztb-name { font-size: 13px !important; }
  .rt-zone-tab .ztb-icon { font-size: 16px !important; }
}
html.dark .rt-zone-tab:not(.is-active),
html.theme-dark .rt-zone-tab:not(.is-active) {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f7 !important;
}

.package-subheader {
  display: none;
  align-items: center;
  gap: 18px;
  padding: 16px 24px;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
  border-bottom: 1px solid var(--border, #e8e8ed);
  position: sticky;
  top: 76px;
  z-index: 49;
  flex-wrap: wrap;
}
.package-subheader.show { display: flex; }

/* 🆕 v3.0.106 — Fancy toggle: ▲ + "Skrýt" pill (user: tam má být nápis Skrýt) */
.pkg-subheader-toggle {
  margin-left: auto;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;                /* pill */
  border: 1px solid var(--primary-border, #FAC775);
  background: linear-gradient(180deg, #FFFCF6 0%, #FAEEDA 100%);
  color: var(--primary-dark, #854F0B);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(186,117,23,0.08);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.pkg-subheader-toggle:hover {
  background: linear-gradient(180deg, #FAEEDA 0%, #F4DDB4 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(186,117,23,0.18);
}
.pkg-subheader-toggle .pkg-toggle-arrow {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.pkg-subheader-toggle:hover .pkg-toggle-arrow { transform: translateY(-2px); }
.pkg-subheader-toggle .pkg-toggle-text { display: inline-block; line-height: 1; }
/* Backward compat — pkg-toggle-icon */
.pkg-subheader-toggle .pkg-toggle-icon { display: inline-block; line-height: 1; }
/* Collapsed state — subheader vyšoupnutý pod header */
.package-subheader.is-collapsed {
  display: none !important;
}
/* 🆕 v3.0.96 — Jazyk (handle) — DEFAULT HIDDEN, visible POUZE když collapsed
   Fix: předtím duplicitní display: none + display: inline-flex ve same block →
   druhý overridoval první, handle byl vždy visible. */
/* 🆕 v3.0.112 — Handle in-flow + works v FLEX i GRID parentu
   (mobile main-wrap=display:contents → grid parent, potřeba justify-self).
   Plus density rules dole. */
.pkg-subheader-handle {
  display: none;                 /* DEFAULT skrytý */
  align-self: flex-end;          /* flex column parent (main-wrap default) */
  justify-self: end;             /* grid parent (mobile, kde main-wrap je contents) */
  margin: -1px 24px 6px auto;
  padding: 6px 14px 8px;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
  border: 1px solid var(--border, #e8e8ed);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2, #6e6e73);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.18s ease, background 0.15s ease;
  align-items: center;
  gap: 6px;
}
/* Density-aware scaling (compact menší, spacious větší, extreme největší) */
html.density-compact .pkg-subheader-handle { padding: 4px 10px 5px; font-size: 10.5px; gap: 4px; }
html.density-spacious .pkg-subheader-handle { padding: 8px 18px 10px; font-size: 13px; gap: 8px; }
html.density-extreme .pkg-subheader-handle { padding: 10px 22px 12px; font-size: 14px; gap: 10px; }
html.density-compact .pkg-subheader-toggle { height: 28px; padding: 0 10px; font-size: 11px; }
html.density-spacious .pkg-subheader-toggle { height: 38px; padding: 0 16px; font-size: 13.5px; }
html.density-extreme .pkg-subheader-toggle { height: 42px; padding: 0 20px; font-size: 14.5px; }
.pkg-subheader-handle:hover {
  background: var(--surface, #fff);
  color: var(--text, #1d1d1f);
  transform: translateY(2px);
}
.pkg-handle-arrow {
  font-size: 9px;
  opacity: 0.7;
}
/* Visible POUZE když body má .pkg-subheader-collapsed.
   🆕 v3.0.99 — Přidán #package-subheader ID selector aby vyhrál nad
   #package-subheader.show (line 17472) co má vyšší specificity (1,1,0). */
body.pkg-subheader-collapsed .pkg-subheader-handle {
  display: inline-flex !important;
}
body.pkg-subheader-collapsed #package-subheader,
body.pkg-subheader-collapsed .package-subheader {
  display: none !important;
}
/* Mobile: handle menší margin, toggle pill smaller */
@media (max-width: 700px) {
  .pkg-subheader-handle {
    margin: -1px 12px 6px auto;
    padding: 5px 10px 6px;
    font-size: 11px;
  }
  .pkg-subheader-toggle {
    height: 30px;
    padding: 0 10px;
    font-size: 11.5px;
  }
}
.pkg-sub-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3, #6e6e73);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.topbar-pkg-badges {
  display: inline-flex;
  align-items: center;
  gap: 10px;  /* 🆕 v2.5.5 — fix BUG (bylo 112px → strašlivé mezery mezi balíčky) */
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--border-2, #d8d2c4);
  flex-wrap: wrap;
  max-width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* Velké button-styled balíčky se jménem — stejně velké jako online B2B button */
.pkg-big-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; min-height: 52px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF7F0 100%);
  border: 2px solid var(--pkg-color, var(--gold-1, #BA7517));
  border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: var(--text-1, #1d1d1f);
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  white-space: nowrap;
}
.pkg-big-btn:hover {
  background: linear-gradient(135deg, var(--pkg-color, #BA7517), color-mix(in srgb, var(--pkg-color, #854F0B) 80%, #000));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.pkg-big-btn.is-active {
  background: linear-gradient(135deg, var(--pkg-color, #BA7517), color-mix(in srgb, var(--pkg-color, #854F0B) 80%, #000));
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.pkg-big-icon { font-size: 26px; line-height: 1; }
.pkg-big-label { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; }

@media (max-width: 1100px) {
  .pkg-big-btn { padding: 12px 18px; min-height: 48px; }
  .pkg-big-icon { font-size: 22px; }
  .pkg-big-label { font-size: 14px; }
}
@media (max-width: 900px) {
  /* 🆕 v2.5.5 — Subheader na narrow viewport: kompaktní + horizontal scroll místo wrap */
  .package-subheader {
    top: auto;
    padding: 8px 12px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .pkg-sub-label {
    font-size: 11px;
    flex-shrink: 0;
  }
  .topbar-pkg-badges {
    flex-wrap: nowrap;
    margin-left: 6px;
  }
}
/* 🆕 v2.9.70 — výše doplněny 2 chybějící „}" (.topbar-pkg-badges + @media 900px).
   Bez nich spadl CELÝ zbytek admin.css do @media (max-width:900px) → styly
   (modaly, tlačítka…) se na PC vůbec neaplikovaly. Tohle byl hlavní důvod
   „změny se neprojevují". */

/* === Topbar APPEK-specific buttons === */
.btn-cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(0, 0, 0, 0.5);
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.1px;
}
.btn-cmdk-trigger:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(186, 117, 23, 0.3);
  color: var(--text-1, #1d1d1f);
  box-shadow: 0 4px 16px rgba(186, 117, 23, 0.08);
  transform: translateY(-1px);
}
.btn-cmdk-trigger:focus-visible {
  outline: none;
  border-color: var(--primary, #BA7517);
  box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.15);
}
.btn-cmdk-icon {
  font-size: 14px;
  opacity: 0.8;
  flex-shrink: 0;
}
.btn-cmdk-label {
  font-weight: 500;
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-cmdk-kbd {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e8e8ed);
  border-bottom-width: 2px;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3, #86868b);
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .topbar-search { padding: 0 8px; }
  .topbar-search .btn-cmdk-trigger { max-width: 340px; }
}
@media (max-width: 768px) {
  .topbar-search {
    flex: 0 0 auto;
    padding: 0;
  }
  /* 🆕 v3.0.54 — Search button na mobilu = malé kruhové ikon-only tlačítko
     (předtím to byl 189px široký "prázdný" pill který user nepoznal) */
  .topbar-search .btn-cmdk-trigger {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid transparent;
  }
  .topbar-search .btn-cmdk-trigger:hover,
  .topbar-search .btn-cmdk-trigger:active {
    background: rgba(186, 117, 23, 0.1);
  }
  .btn-cmdk-label, .btn-cmdk-kbd { display: none; }
  .btn-cmdk-icon { font-size: 17px !important; }
}
html.theme-dark .btn-cmdk-trigger { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #f5f5f7; }
html.theme-dark .btn-cmdk-kbd { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); }
html.theme-apple .btn-cmdk-trigger { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

/* =========================================================
   🔔 NOTIFICATIONS BELL + PANEL
   ========================================================= */
/* 🆕 v2.0.94 — Premium notif bell — sjednoceno s ostatními icon buttons */

.btn-notif {
  position: relative;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid transparent;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}
.btn-notif:hover {
  background: rgba(186, 117, 23, 0.08);
  transform: translateY(-1px);
}
.btn-notif:hover {
  background: var(--surface, #fff);
  border-color: var(--text-3, #aaa);
  transform: translateY(-1px);
}
.btn-notif.has-unread .btn-notif-icon {
  animation: bell-shake 0.5s ease-in-out;
}
@keyframes bell-shake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-18deg); }
  40% { transform: rotate(15deg); }
  60% { transform: rotate(-10deg); }
  80% { transform: rotate(6deg); }
}
.btn-notif-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--surface, #fff);
  box-shadow: 0 0 0 1px #ff3b30;
}
html.theme-dark .btn-notif { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
html.theme-dark .btn-notif-badge { border-color: #1d1d1f; }

/* 🆕 v2.9.264 — Notifikace panel refresh (Dashboard alerts style) */
.notif-panel {
  position: fixed;
  top: 60px;
  right: 16px;
  width: min(440px, calc(100vw - 32px));
  max-height: 75vh;
  background: var(--surface, #fff);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.10),
    0 24px 60px rgba(186,117,23,0.12);
  border: 1px solid var(--border, #e8e8ed);
  display: flex;
  flex-direction: column;
  z-index: 10001;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: all 0.18s ease-out;
  overflow: hidden;
}
.notif-panel.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FFF8E7 0%, #FEF3C7 100%);
  border-bottom: 1px solid #FBBF24;
}
.notif-head h3 {
  font-size: 15px;
  font-weight: 700;
  color: #854F0B;
  margin: 0;
  letter-spacing: -0.01em;
}
.notif-head .notif-actions button {
  font-size: 12px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(133,79,11,0.2);
  border-radius: 8px;
  color: #854F0B;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.notif-head .notif-actions button:hover {
  background: #fff;
  border-color: #BA7517;
}
.notif-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.notif-foot {
  padding: 10px 14px;
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.notif-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}

.role-badge { padding: 2px 8px; background: var(--primary-light); color: var(--primary-dark); border-radius: 999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.role-badge.super { background: #BA7517; color: white; }
.active-pkg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  margin-left: 8px;
  background: linear-gradient(135deg, #FFF8E5, #FDE68A);
  color: #854F0B;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #FCD34D;
  transition: all 0.15s;
  white-space: nowrap;
}
.active-pkg-chip:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.nav-item.pkg-item {
  background: linear-gradient(90deg, rgba(255,200,100,0.08), transparent);
  border-left: 2px solid #FCD34D;
}
.nav-item.pkg-item .pkg-badge {
  font-size: 9px;
  font-weight: 700;
  background: #FCD34D;
  color: #854F0B;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: auto;
  letter-spacing: 0.3px;
}
.btn-link { color: var(--primary); font-size: 13px; padding: 4px 0; }

/* TOPBAR — přes hlavní obsah, hned nad page-head */
.main-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* 🆕 v3.0.296 — iOS: dynamická výška (počítá s URL barem) */
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
/* ═══════════════════════════════════════════════════════════════
   🎩 v2.0.94 — PREMIUM TOPBAR  (Apple-style sophistication)
   ─────────────────────────────────────────────────────────────

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.8.6 — APPEK MOBILE FIX (order na flex items + design-system tokens)
   ────────────────────────────────────────────────────────────────────
   Problém v v2.8.5: skip-link, package-subheader, main-content, bottom-nav
   neměly `order` → na mobile flexu se zobrazily PŘED topbar (rozhozené).
   ════════════════════════════════════════════════════════════════════ */

/* Skip-link — vždy ABSOLUTE, mimo flow */
.skip-link {
  position: absolute !important;
  top: -100px !important;
  left: 0 !important;
  z-index: 9999 !important;
  background: var(--primary, #BA7517);
  color: white;
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0 !important;
  outline: 3px solid #FFF;
  outline-offset: 2px;
}

/* 🆕 v3.0.39 — Bottom-nav rule moved to ~line 12495 (one canonical definition).
   🐛 v3.0.44 cleanup — odstraněno duplicitní pravidlo (bylo identical s line 12495) */

/* MOBILE flex order fix */
@media (max-width: 700px) {
  /* topbar=1, sidebar=2, package-subheader=3, main-content=4 */
  .topbar { order: 1 !important; }
  aside.sidebar { order: 2 !important; }
  .package-subheader,
  #package-subheader {
    order: 3 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface-2, #F7F8FA);
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
    flex-wrap: wrap;
  }
  .pkg-sub-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3, #888780);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
  }
  .topbar-pkg-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
  }
  .main-content,
  main#content { order: 4 !important; }
}

/* Package subheader na desktopu — schované pokud prázdné, viditelné jako sticky row pod topbar */
@media (min-width: 701px) {
  .package-subheader,
  #package-subheader {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 24px;
    background: var(--surface-2, #F7F8FA);
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
    position: sticky;
    top: 60px;  /* under topbar */
    z-index: 5;
    flex-wrap: wrap;
  }
  /* Auto-hide pokud prázdné */
  .package-subheader:empty,
  #package-subheader:not(:has(.pkg-badge-square)) {
    display: none;
  }
}

/* 🧹 v3.0.88 cleanup — REMOVED legacy "Pin button gold highlight (Repre style)"
   block. Override pravidla z dávných verzí (FAEEDA background, primary border)
   conflict s canonical v3.0.85+ pin design (krémová tan #F4ECDB dlaždice
   s 📌 + "Připnuto" label DOLE v rail) — viz line ~20160. */

/* Schovat hardcoded version label */
aside.sidebar::after { display: none !important; content: '' !important; }
/* APPEK MISSING COMPONENTS — extracted from backup */
/* 110 selectors to recover */

.nav-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border, #e8e8ed);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-section-title {
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3, #6e6e73);
  font-weight: 700;
  padding: 4px 14px 4px;
  background: linear-gradient(135deg, rgba(186,117,23,0.06), transparent);
  border-radius: 6px;
}

.pkg-badge-square {
  position: relative;
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #fff);
  border: 2px solid var(--border, #e8e8ed);
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 64px;
  line-height: 1;
  padding: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.pkg-badge-square:hover {
  border-color: var(--pkg-color, var(--primary));
  background: var(--pkg-color, var(--primary));
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.pkg-badge-square:hover .pkg-badge-icon {
  filter: brightness(1.1) saturate(1.2);
  transform: scale(1.1);
}

.pkg-badge-square.is-active {
  background: linear-gradient(135deg, var(--pkg-color, #BA7517), var(--pkg-color, #BA7517));
  border-color: var(--pkg-color, var(--primary));
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.pkg-badge-square.is-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  background: var(--pkg-color, var(--primary));
  border-radius: 2px;
}

.pkg-badge-icon {
  font-size: 64px;
  line-height: 1;
  transition: transform 0.15s ease;
  filter: saturate(1.1);
}

.pkg-badge-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #1d1d1f;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.15s ease;
  z-index: 100;
  letter-spacing: 0.2px;
}

.pkg-badge-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: #1d1d1f;
}

.pkg-badge-square:hover .pkg-badge-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
  .topbar-pkg-badges {
    margin-left: 6px;
    padding-left: 6px;
    gap: 3px;
  }
  .pkg-badge-square {
    width: 64px;
    height: 64px;
    font-size: 44px;
    border-radius: 14px;
  }
  .pkg-badge-icon { font-size: 44px; }
  .pkg-badge-tooltip { display: none; }
}

.btn-fs-label { display: none; }

.btn-logout-label { display: none; }

.obj-polozka-zdroj {
  font-size: 11px;
  color: var(--text-3);
}

.settings-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}

.settings-3col > .card-block,
.settings-3col > .int-card {
  margin-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1280px) {
  .settings-3col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  .settings-3col { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Sidebar: kompaktnější horní lišta s drop-down menu */
  .admin-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .sidebar {
    position: sticky;
    top: 0;
    height: auto;
    flex-direction: column;
    padding: 8px 12px;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .sidebar-logo {
    padding: 8px 4px;
    margin-bottom: 0;
    border-bottom: none;
    justify-content: space-between;  /* brand vlevo, datum pill vpravo */
    gap: 8px;
  }
  .sidebar-logo strong { font-size: 14px; }
  .sidebar-logo .logo-icon { width: 32px; height: 32px; font-size: 14px; }
  /* Datum-svátek pill přesunutý do sidebar-logo na mobilu — datum nad svátkem */
  .sidebar-logo .topbar-datum-svatek {
    margin-left: auto;
    padding: 4px 10px;
    max-width: none;         /* 🆕 v3.0.114 — bez maxu, jméno se vždy vejde (Vilém/Valdemar/Vlastimír) */
    width: auto;
    flex-shrink: 0;
    /* 🆕 v3.0.119 — Override base overflow:hidden + ellipsis (line 768) — JINAK truncate "Max..." */
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.2;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    text-align: right;
    border-radius: 10px;
  }
  .sidebar-logo .topbar-datum-svatek .dt-sep { display: none; }
  .sidebar-logo .topbar-datum-svatek::before { display: none; }

  /* Velikosti jednotlivých částí — datum dominantní */
  .sidebar-logo .topbar-datum-svatek .dt-den {
    font-size: 8.5px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
  }
  .sidebar-logo .topbar-datum-svatek .dt-datum {
    font-size: 12.5px;
    font-weight: 700;
    color: #5C3608;
  }
  /* 🆕 v3.0.59 — Svátek MUSÍ být vidět (vyšší specifita než 18831 override).
     User: "v adminu nevidim svatek jmeno" — root cause: 10px font + low contrast. */
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek .dt-line-svatek,
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek .ts-svatek {
    font-size: 12px !important;
    opacity: 1 !important;
    color: #5C3608 !important;
    display: block !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    overflow: visible !important;          /* 🆕 v3.0.71 — žádný ellipsis na "Valdemar" */
    text-overflow: clip !important;
    max-width: none !important;
  }
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek .dt-svatek-name,
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek .ts-svatek strong {
    font-weight: 800 !important;
    color: #5C3608 !important;
    font-size: 12px !important;
  }

  /* Navigace: 3 sloupce v gridu — všechny položky viditelné */
  .sidebar-nav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    flex: none;
    padding: 8px 0;
    margin: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }
  .nav-item {
    flex: none;
    width: 100%;
    padding: 10px 2px;          /* minimální boční padding aby se text vešel */
    font-size: 14px;            /* zvětšeno z 13px */
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    border-radius: 10px;
    white-space: nowrap;        /* nikdy nezalamovat na 2 řádky */
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
  }
  .nav-icon { font-size: 20px; width: auto; }
  /* Velmi úzký mobil (≤ 380px): zmenši font aby se delší slova vlezla */
  @media (max-width: 380px) {
    .nav-item { font-size: 12px; padding: 8px 1px; }
    .nav-icon { font-size: 18px; }
  }

  /* Topbar — vše v jedné řadě na mobilu (nikdy nezalomit) */
  .topbar {
    padding: 8px 10px;
    gap: 6px;
    position: static;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .topbar-user {
    flex-direction: row;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
    flex-shrink: 1;
    min-width: 0;
  }
  .topbar-user-greet { display: none; }
  .topbar-user-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
  }
  .topbar-sep { display: none; }
  .topbar-actions {
    gap: 12px;           /* ~3mm mezi ikonami */
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  /* Online prodejna — na mobilu jen ikona + krátký label "B2B" */
  .btn-prodejna { padding: 7px 12px; font-size: 14px; gap: 8px; }
  .btn-prodejna-label { display: none; }
  .btn-prodejna-label-short { display: inline; font-weight: 800; letter-spacing: 0.6px; font-size: 14px; }
  .btn-prodejna-arrow { display: none; }
  .btn-prodejna-icon { font-size: 16px; }
  .btn-logout-label { display: none; }
  .btn-logout { padding: 7px 9px; }
  .btn-fs-label { display: none; }
  .btn-fullscreen { padding: 7px 9px; }
  /* Role badge menší */
  .topbar-user .role-badge { font-size: 9px; padding: 2px 5px; }

  /* Hlavní obsah */
  .main-content {
    padding: 12px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Page heading menší */
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
  }
  .page-head > * { width: 100%; max-width: 100%; }
  .page-head h1, .page-head .page-title { font-size: 20px; }
  /* 🆕 v2.9.259 — Mobile page-head sekundární kontejner = 3-col grid
     (Tisk/Export/Import + Rozvozy atd. — 3 v řadě, primary 'Nový X' pod tím) */
  .page-head > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100%;
  }
  .page-head .btn-primary,
  .page-head .btn-primary.btn-green {
    grid-column: 1 / -1 !important;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    color: white !important;
    font-size: 15px;
    padding: 14px 16px;
    display: block;
    margin-top: 4px;
  }
  .page-head .btn-secondary,
  .page-head .btn-icon-action {
    flex: none;
    width: auto;
    min-width: 0;
    font-size: 13px;
    padding: 10px 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .page-head .btn-icon-action .btn-icon-action-lbl {
    font-size: 11px;
  }

  /* Stat grid (Dashboard, Faktury, Objednávky souhrn) */
  .stat-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    width: 100%;
    max-width: 100%;
  }
  /* 🆕 v3.0.129 — Dashboard mobile: 2×2 grid (user: "na mobilu do 2").
     Předtím v2.9.243: 75/25 + 50/50 (Tržby span 3). Nyní všechny span 1
     v 2-column gridu → Row 1: [Tržby][Dnes]  Row 2: [Obj][Splat]. */
  .stat-grid-dash {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stat-grid-dash .stat-card-trzby { grid-column: span 1 !important; }
  .stat-grid-dash .stat-card-dnes  { grid-column: span 1 !important; }
  .stat-grid-dash .stat-card-obj   { grid-column: span 1 !important; }
  .stat-grid-dash .stat-card-splat { grid-column: span 1 !important; }
  .stat-grid-dash .stat-card-wide  { grid-column: span 1 !important; }
  .stat-card {
    padding: 12px;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  .stat-card .stat-label,
  .stat-card .label { font-size: 11px; }
  .stat-card .stat-value,
  .stat-card .value {
    font-size: clamp(13px, 3.8vw, 18px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 🆕 v2.9.236 — stat-value-lg na mobile clamp (Tržby card) */
  .stat-card .stat-value.stat-value-lg,
  .stat-card .stat-value-lg {
    font-size: clamp(18px, 5.5vw, 26px) !important;
  }

  /* Filtry — důležité aby se nepřetekly */
  .filters {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .filters .filter-input,
  .filters .filter-select,
  .filters input,
  .filters select,
  .filters .filter-date-wrap,
  .filters .btn-secondary,
  .filters .btn-primary {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }

  /* TABULKY → karty na mobilu */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td {
    display: block;
    width: 100%;
  }
  .table tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 12px;
  }
  .table tbody tr:nth-child(even) td { background: transparent; }
  .table tbody tr:hover td { background: transparent !important; }
  .table td {
    padding: 4px 0;
    border-bottom: none;
    font-size: 13px;
    text-align: left;
  }
  .table td.num { text-align: left; }
  /* Label před hodnotou (data-label) */
  .table td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
    margin-bottom: 2px;
  }
  /* Buňka bez labelu (akce, tlačítka) — bez "label" hlavičky */
  .table td.td-action::before {
    display: none;
  }
  .table td.td-action {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
  }
  /* Pokud je td-action první nebo druhá buňka v kartě (checkbox sloupec) — bez border-top */
  .table td.td-action:first-child,
  .table td.col-check {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    /* Checkbox umisti vpravo nahoru jako badge */
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto;
    margin: 0;
    padding: 0;
  }
  /* Karta řádku potřebuje position:relative aby checkbox plaval */
  .table tbody tr { position: relative; }
  .table td.td-action a,
  .table td.td-action button {
    display: inline-block;
    margin: 2px 4px 2px 0;
  }
  /* První viditelná buňka (po checkboxu) — výrazná, jako titulek karty */
  .table td:first-child,
  .table td.col-check + td {
    padding-top: 0;
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .table td.col-check { padding-bottom: 0; border-bottom: none; }
  .table td:last-child { padding-bottom: 0; }
  /* Inline form-input v buňkách (např. Graf select v HACCP) — natáhni na celou šířku */
  .table td .form-input,
  .table td select,
  .table td input[type="text"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Cards / panels */
  .card-block {
    padding: 14px;
    margin-bottom: 12px;
  }

  /* Modal: bottom sheet na mobilu */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-card {
    border-radius: 16px 16px 0 0;
    max-height: 95vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    max-width: 100% !important;
    width: 100%;
    margin: 0;
  }
  .modal-card.wide,
  .modal-card.modal-card-wide {
    max-width: 100% !important;
  }
  .modal-head h2,
  .modal-head h3 { font-size: 16px; }
  .modal-close {
    width: 40px;
    height: 40px;
    font-size: 0;                /* skryje HTML × — viditelný jen ::before */
  }
  .modal-close::before { font-size: 24px; }

  /* Form actions: tlačítka pod sebou */
  .form-actions {
    flex-direction: column-reverse;
    gap: 8px;
    align-items: stretch;
  }
  .form-actions > div[style*="flex:1"] { display: none; }
  .form-actions > * {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Tools skupina (PDF / ISDOC / Tisk / Znovu objednat) — 2 sloupečky */
  .form-actions-tools {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .form-actions-tools > * {
    width: 100% !important;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Detail řádky */
  .detail-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .detail-row .label { font-size: 12px; flex: 1; }
  .detail-row .num { font-weight: 600; }

  /* Modal stats box: stat boxy nahoře 2 sloupce, tlačítka pod nimi pod sebou */
  .modal-stats-box {
    flex-direction: column;
    gap: 12px !important;
    padding: 12px 14px !important;
  }
  .modal-stats-box > div:not([style*="flex:1"]) {
    min-width: 0;
    flex: 1;
  }
  /* Stat boxy ve dvou sloupcích vedle sebe (Objednávek + Tržba) */
  .modal-stats-box {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* Wrapper s tlačítky → přes celou šířku, vedle sebe */
  .modal-stats-box > div[style*="flex:1"] {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: stretch !important;
    flex-direction: row;
    gap: 6px !important;
  }
  .modal-stats-box > div[style*="flex:1"] button {
    flex: 1;
    font-size: 12px;
    padding: 8px 10px;
    white-space: normal;
    line-height: 1.2;
    min-height: 40px;
  }
  .modal-stats-box .stat-key { font-size: 10px !important; }
  .modal-stats-box .stat-val { font-size: 17px !important; }

  /* Položky objednávky/faktury - menší inputy */
  .table input[type="number"] { width: 60px !important; font-size: 13px; }

  /* Velikost tlačítek pro prst */
  .btn-primary, .btn-secondary, .btn-danger {
    min-height: 38px;
    padding: 8px 14px;
  }

  /* Cílové tlačítka (slevové skupiny) */
  .cilove-tlacitko {
    padding: 12px 8px;
  }

  /* Amber/totální boxy v modálech: na mobilu menší font */
  .modal-card div[style*="background:#FAEEDA"] [style*="font-size:22px"],
  .modal-card div[style*="background:#FAEEDA"] [style*="font-size:18px"] {
    font-size: 17px !important;
  }
  .modal-card div[style*="background:#FAEEDA"] {
    padding: 12px 14px !important;
  }

  /* Status badge ve sloupcích nesmí přerušit layout */
  .status {
    white-space: nowrap;
    display: inline-block;
  }

  /* Doc badges na mobilu: nemají vyskakovat ze sloupce */
  /* Doc badges na mobilu: výrazně větší — touch-friendly */
  .doc-badges-row { flex-wrap: wrap; gap: 6px; }
  .doc-badge {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .doc-badge + .doc-badge { margin-left: 0; }

  /* DL/FA karty na mobilu: 2 tlačítka vedle sebe */
  .dl-card-actions,
  .faktura-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
  }
  .dl-card-actions .doc-badges-row,
  .faktura-card-actions .doc-badges-row {
    display: contents;
  }

  /* Zdroj badges (OBJ/DL/FA/Ruční) — stejný layout jako spodní actions,
     aby texty „OBJ-2026", „Dodací list", „Faktura" i „Ruční" byly zarovnané */
  .faktura-card-zdroj > .doc-badges-row {
    display: contents;       /* inner wrapper se "rozplyne", badges jsou přímými dětmi */
  }
  .dl-card-zdroj,
  .faktura-card-zdroj {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 4px;
    width: 100%;
  }
  .dl-card-zdroj > .doc-badge,
  .faktura-card-zdroj .doc-badge {
    flex: 1 1 0;
    min-width: 0;            /* dovolit shrink u dlouhých čísel */
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 8px;
    min-height: 48px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* OBJ karta: 3 tlačítka — DL + FA velké, Znovu kompaktní s viditelným odsazením */
  .obj-card-doklady {
    display: grid !important;
    grid-template-columns: 1fr 1fr 60px;
    column-gap: 16px;
    row-gap: 8px;
    margin-top: 10px;
    padding: 12px 8px 8px;
    border-top: 1px dashed var(--border);
    align-items: center;
  }
  .dl-card-actions .doc-badge,
  .faktura-card-actions .doc-badge,
  .obj-card-doklady .doc-badge:not(.reorder-icon) {
    flex: 1;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    padding: 16px 8px;
    min-height: 52px;
    box-sizing: border-box;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Reorder ikona — 44×44 v 60px sloupci, vystředěná, výrazný okraj */
  .obj-card-doklady .doc-badge.reorder-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
    justify-self: center;
    margin: 0;
    border-width: 2px;
  }

  /* Form-grid: jednosloupcový layout (přebíjí inline grid styles)
     Vyloučení: form-grid-tight zůstává 2 sloupce — krátká pole jako datum/cena */
  .modal-card div[style*="grid-template-columns:1fr 1fr 1fr"]:not(.form-grid-tight),
  .modal-card div[style*="grid-template-columns: 1fr 1fr 1fr"]:not(.form-grid-tight),
  .modal-card div[style*="grid-template-columns:1fr 1fr"]:not(.form-grid-tight),
  .modal-card div[style*="grid-template-columns: 1fr 1fr"]:not(.form-grid-tight) {
    grid-template-columns: 1fr !important;
  }
  /* form-grid-tight 3-sloupcová → 2 sloupce (vejde se VS+datum vedle sebe) */
  .modal-card .form-grid-tight[style*="grid-template-columns:1fr 1fr 1fr"],
  .modal-card .form-grid-tight[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Reorder karty (3 vedle sebe) v Ručních DL/FA/NO */
  .rf-history > div[style*="grid-template-columns:repeat(3"],
  .rf-history > div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Dlouhé tabulky v modálu: scroll horizontálně místo přetečení */
  .modal-card .card-block {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Topbar role badge nesmí blokovat — wrap pokud potřeba */
  .topbar { row-gap: 6px; }
  .topbar-user { font-size: 12px; }

  /* Avatar v users modálu */
  .modal-card div[style*="border-radius:50%"][style*="width:44px"] {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
}

.toast-host {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  background: #1d1d1f;
  color: #fff;
  padding: 12px 16px 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.22s, transform 0.22s;
  border-left: 4px solid #98989d;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(29,29,31,0.95);
  position: relative;
  overflow: hidden;
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast.is-closing {
  opacity: 0;
  transform: translateX(20px);
}

.toast-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 2px;
}

.toast-msg {
  font-weight: 400;
  font-size: 12.5px;
  color: rgba(255,255,255,0.85);
  word-break: break-word;
}

.toast-close {
  background: rgba(255,255,255,0.1);
  border: none;
  color: rgba(255,255,255,0.7);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.toast-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

.toast::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.4;
  width: 100%;
  transform-origin: left;
  animation: toast-progress var(--toast-duration, 4s) linear forwards;
}

.toast.toast-success { border-left-color: #30D158; }

.toast.toast-success .toast-icon { color: #30D158; }

.toast.toast-error   { border-left-color: #FF453A; }

.toast.toast-error   .toast-icon { color: #FF453A; }

.toast.toast-warn    { border-left-color: #FFD60A; }

.toast.toast-warn    .toast-icon { color: #FFD60A; }

.toast.toast-info    { border-left-color: #0A84FF; }

.toast.toast-info    .toast-icon { color: #0A84FF; }

.top-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10001;
  background: transparent;
  pointer-events: none;
}

.top-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #BA7517, #FFC966, #BA7517);
  background-size: 200% 100%;
  width: 0%;
  transition: width 0.2s ease-out, opacity 0.3s;
  box-shadow: 0 0 8px rgba(186,117,23,0.6);
  animation: top-progress-shine 1.4s linear infinite;
}

.empty-state-pro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 32px;
  background: linear-gradient(180deg, var(--surface-2), transparent);
  border-radius: 16px;
  border: 1px dashed var(--border);
  margin: 14px 0;
}

.empty-state-pro .es-icon {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
  animation: es-bounce 2.4s ease-in-out infinite;
}

.empty-state-pro .es-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--text);
}

.empty-state-pro .es-msg {
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.6;
  max-width: 440px;
  margin: 0 0 22px;
}

.empty-state-pro .es-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.empty-state-pro .es-actions .btn-primary {
  font-size: 15px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 10px;
}

.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,20,22,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10002;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}

.cmdk-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.cmdk {
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  background: rgba(255,255,255,0.98);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 4px 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  transform: translateY(-12px) scale(0.97);
  transition: transform 0.18s ease-out;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.4);
}

.cmdk-overlay.show .cmdk { transform: translateY(0) scale(1); }

.cmdk-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e8e8ed);
}

.cmdk-search-icon { font-size: 18px; opacity: 0.6; }

.cmdk-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 17px;
  font-weight: 500;
  font-family: inherit;
  color: inherit;
}

.cmdk-hint {
  font-size: 11px;
  background: var(--surface-2, #f5f5f7);
  color: var(--text-3, #86868b);
  padding: 4px 8px;
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, monospace;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.cmdk-results { overflow-y: auto; padding: 8px; }

.cmdk-section-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3, #86868b);
  padding: 10px 12px 6px;
  font-weight: 700;
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 14px;
}

.cmdk-item.is-active, .cmdk-item:hover {
  background: linear-gradient(90deg, rgba(186,117,23,0.10), rgba(186,117,23,0.04));
}

.cmdk-icon {
  font-size: 17px;
  width: 26px;
  text-align: center;
  flex-shrink: 0;
}

.cmdk-text { flex: 1; min-width: 0; }

.cmdk-title { font-weight: 600; }

.cmdk-sub { font-size: 11.5px; color: var(--text-3, #86868b); margin-top: 1px; }

.cmdk-shortcut {
  font-size: 10.5px;
  color: var(--text-3, #86868b);
  background: var(--surface-2, #f5f5f7);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
}

.cmdk-empty {
  padding: 30px;
  text-align: center;
  color: var(--text-3, #86868b);
  font-size: 13px;
}

.cmdk-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--border, #e8e8ed);
  font-size: 11px;
  color: var(--text-3, #86868b);
  background: var(--surface-2, #f7f7f9);
}

.cmdk-footer kbd {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--border, #e8e8ed);
  border-bottom-width: 2px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
}

.skel {
  display: block;
  background: linear-gradient(90deg, var(--surface-2, #f0f0f3) 0%, #e0e0e3 50%, var(--surface-2, #f0f0f3) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  min-height: 12px;
}

.skel-table-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 80px 100px 80px;
  gap: 14px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border, #f0f0f3);
}

.skel-table-row .skel { height: 14px; }

.skel-card {
  background: var(--surface, #fff);
  border-radius: 12px;
  border: 1px solid var(--border, #e8e8ed);
  padding: 16px;
  margin-bottom: 10px;
}

.skel-card .skel:nth-child(1) { width: 60%; height: 16px; margin-bottom: 10px; }

.skel-card .skel:nth-child(2) { width: 90%; margin-bottom: 6px; }

.skel-card .skel:nth-child(3) { width: 40%; }

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10003;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}

.confirm-overlay.show { opacity: 1; pointer-events: auto; }

.confirm-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  width: 100%;
  max-width: 420px;
  padding: 24px;
  transform: scale(0.94);
  transition: transform 0.18s;
}

.confirm-overlay.show .confirm-card { transform: scale(1); }

.confirm-icon {
  font-size: 38px;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1;
}

.confirm-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.confirm-msg {
  font-size: 13.5px;
  color: var(--text-2, #424245);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 20px;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: stretch;
}

.confirm-actions button {
  flex: 1;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--border, #d2d2d7);
  background: var(--surface-2, #f5f5f7);
  color: var(--text, #1d1d1f);
  transition: all 0.12s;
}

.confirm-actions button:hover { background: var(--surface, #fff); transform: translateY(-1px); }

.confirm-actions button.confirm-primary {
  background: var(--primary, #0071e3);
  color: #fff;
  border-color: var(--primary, #0071e3);
}

.confirm-actions button.confirm-danger {
  background: #ff3b30;
  color: #fff;
  border-color: #ff3b30;
}

.topbar-search {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: 0 16px;
  width: 100%;
}

.topbar-search .btn-cmdk-trigger {
  width: 100%;
  max-width: 560px;
  justify-content: flex-start;
}

@media (max-width: 1100px) {
  .topbar-search { padding: 0 8px; }
  .topbar-search .btn-cmdk-trigger { max-width: 340px; }
}

@media (max-width: 768px) {
  .topbar-search {
    flex: 0 0 auto;
    padding: 0;
  }
  /* 🆕 v3.0.54 — Search button na mobilu = malé kruhové ikon-only tlačítko
     (předtím to byl 189px široký "prázdný" pill který user nepoznal) */
  .topbar-search .btn-cmdk-trigger {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid transparent;
  }
  .topbar-search .btn-cmdk-trigger:hover,
  .topbar-search .btn-cmdk-trigger:active {
    background: rgba(186, 117, 23, 0.1);
  }
  .btn-cmdk-label, .btn-cmdk-kbd { display: none; }
  .btn-cmdk-icon { font-size: 17px !important; }
}

.notif-actions {
  display: flex;
  gap: 6px;
}

.notif-actions button {
  background: transparent;
  border: none;
  font-size: 11.5px;
  color: var(--text-3, #86868b);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: inherit;
}

.notif-actions button:hover { background: var(--surface-2, #f5f5f7); color: var(--text); }

/* 🆕 v2.9.264 — .notif-list padding override (panel má vlastní) */
.notif-panel .notif-list { padding: 6px 8px; }

.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  margin-bottom: 2px;
  border: 1px solid transparent;
}

.notif-item:hover {
  background: var(--surface-2, #f5f5f7);
  border-color: var(--primary-border);
  transform: translateX(2px);
}

.notif-item.is-unread::before {
  content: '';
  position: absolute;
  top: 14px; left: 4px;
  width: 6px; height: 6px;
  background: #0a84ff;
  border-radius: 50%;
}

.notif-item.is-unread { padding-left: 18px; }

.notif-item.sev-error::before { background: #ff3b30; }

.notif-item.sev-warn::before  { background: #ffd60a; }

.notif-item.sev-success::before { background: #30d158; }

.notif-icon { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 1px; }

.notif-body { flex: 1; min-width: 0; }

.notif-title { font-weight: 600; font-size: 13px; }

.notif-msg { font-size: 11.5px; color: var(--text-3, #86868b); margin-top: 1px; line-height: 1.4; word-break: break-word; }

.notif-time { font-size: 10.5px; color: var(--text-3, #86868b); margin-top: 3px; }

.notif-del {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-3); font-size: 14px; opacity: 0;
  width: 22px; height: 22px; border-radius: 4px;
  transition: opacity 0.1s, background 0.1s;
}

.notif-item:hover .notif-del { opacity: 1; }

.notif-del:hover { background: var(--surface, #fff); color: #ff3b30; }

.notif-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-3, #86868b);
  font-size: 13px;
}

.notif-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
}

.notif-item.is-grouped {
  background: linear-gradient(180deg, rgba(186,117,23,0.05), rgba(186,117,23,0.02));
  border-left: 3px solid rgba(186,117,23,0.4);
}

.notif-item.is-grouped:hover {
  background: linear-gradient(180deg, rgba(186,117,23,0.1), rgba(186,117,23,0.04));
}

.notif-count-badge {
  display: inline-block;
  background: #BA7517; color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 1px 7px; border-radius: 999px;
  margin-left: 6px; vertical-align: middle;
  min-width: 18px; text-align: center;
}

.notif-expand-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 14px; color: var(--text-3);
  padding: 0 4px; margin-left: 4px;
  border-radius: 4px; vertical-align: middle;
}

.notif-expand-btn:hover { background: var(--surface-2); color: var(--text-1); }

.notif-child {
  font-size: 12px;
  background: var(--surface-2, #f5f5f7);
  border-radius: 6px;
  margin-bottom: 4px;
  padding: 8px 10px !important;
  gap: 8px;
}

.notif-child .notif-icon { font-size: 12px; color: var(--text-3); }

.notif-child .notif-title { font-weight: 500; font-size: 12px; }

.chart-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e8e8ed);
  border-radius: 14px;
  padding: 16px 18px;
  transition: box-shadow 0.15s;
}

.chart-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.06); }

.chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }

.chart-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--text-3); margin: 0; }

.chart-big-value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }

.chart-delta { font-size: 12px; font-weight: 600; margin-left: 6px; }

.chart-delta.up   { color: #30d158; }

.chart-delta.down { color: #ff3b30; }

.chart-svg { width: 100%; height: 60px; overflow: visible; }

.chart-svg .area { fill: url(#chart-grad); opacity: 0.18; }

.chart-svg .line { fill: none; stroke: var(--primary, #BA7517); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.chart-svg .dot  { fill: var(--primary, #BA7517); }

.chart-bar-value {
  position: absolute;
  top: -18px;
  left: 0; right: 0;
  font-size: 10px;
  color: var(--text-2);
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}

.activity-item:hover { background: var(--surface-2); }

.activity-icon { font-size: 16px; line-height: 1.4; flex-shrink: 0; width: 24px; text-align: center; }

.activity-text { flex: 1; min-width: 0; }

.activity-who { font-weight: 600; }

.activity-action { color: var(--text-2); }

.activity-detail { color: var(--text-3); font-size: 11.5px; margin-top: 1px; }

.activity-time { font-size: 11px; color: var(--text-3); white-space: nowrap; }

.print-queue-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  background: linear-gradient(135deg, #BA7517, #FFC966);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(186,117,23,0.45), 0 2px 6px rgba(0,0,0,0.15);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.22s ease-out;
}

.print-queue-fab.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.print-queue-fab:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 26px rgba(186,117,23,0.55), 0 4px 10px rgba(0,0,0,0.18);
}

.print-queue-fab .pq-badge {
  background: #fff;
  color: #BA7517;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 800;
}

.print-queue-panel {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: min(420px, calc(100vw - 48px));
  max-height: 60vh;
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 4px 20px rgba(0,0,0,0.1);
  border: 1px solid var(--border);
  z-index: 9001;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  pointer-events: none;
  transition: all 0.18s;
}

.print-queue-panel.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.pq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.pq-head h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; }

.pq-list { overflow-y: auto; padding: 8px; flex: 1; }

.pq-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  transition: background 0.1s;
}

.pq-item:hover { background: var(--surface-2); }

.pq-icon { font-size: 16px; line-height: 1; }

.pq-info { flex: 1; min-width: 0; }

.pq-title { font-weight: 600; }

.pq-sub { font-size: 11.5px; color: var(--text-3); }

.pq-remove {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 14px;
  width: 24px; height: 24px;
  border-radius: 4px;
  transition: all 0.1s;
}

.pq-remove:hover { background: var(--danger-bg); color: var(--danger-text); }

.pq-foot {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 14px 14px;
}

.pq-foot button { flex: 1; }

.kbd-cheat-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 10004;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}

.kbd-cheat-overlay.show { opacity: 1; pointer-events: auto; }

.kbd-cheat {
  background: var(--surface, #fff);
  border-radius: 18px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  transform: scale(0.95);
  transition: transform 0.18s;
}

.kbd-cheat-overlay.show .kbd-cheat { transform: scale(1); }

.kbd-cheat-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kbd-cheat-head h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }

.kbd-cheat-body { padding: 18px 22px; overflow-y: auto; }

.kbd-section { margin-bottom: 18px; }

.kbd-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 700;
  margin-bottom: 8px;
}

.kbd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border);
}

.kbd-row:last-child { border: none; }

.kbd-keys { display: inline-flex; gap: 4px; }

.kbd-keys kbd {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  min-width: 22px;
  text-align: center;
}

.inline-edit {
  cursor: pointer;
  position: relative;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.1s;
  border: 1px dashed transparent;
}

.inline-edit:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.inline-edit:hover::after {
  content: '✏️';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0.6;
}

.inline-edit.is-editing {
  background: var(--surface);
  border: 1px solid var(--primary);
  padding: 0;
}

.inline-edit input {
  width: 100%;
  padding: 4px 6px;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: inherit;
}

.inline-edit-spinner {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-3);
}

.bottom-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  transition: color 0.15s;
  -webkit-tap-highlight-color: rgba(186, 117, 23, 0.1);
}

.bottom-nav-item .bn-icon {
  font-size: 22px;
  margin-bottom: 2px;
  line-height: 1;
}

.bottom-nav-item.is-active {
  color: var(--primary);
}

.bottom-nav-item.is-active .bn-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 1px 2px rgba(186, 117, 23, 0.3));
}

@media (max-width: 768px) {
  /* 🆕 v3.0.39 — bottom-nav povolen (display:block !important; nastaveno výše v Pocket-ready bloku) */
  /* 🆕 v2.9.72 — ODSTRANĚN konkurenční „úzký 60px rail" design sidebaru.
     Kolidoval s cílovým chováním mobilu (výchozí = buttony nahoře přes
     flex-order, připnuto = kostičky na boku) a hlavně SKRÝVAL špendlík
     (.sidebar-pin display:none). Mobilní menu teď řeší jen bloky
     „MOBILE flex order" + „Připnuté menu na MOBILU" (@media max-width:700px).
     Na mobilu je jen JEDNO tlačítko — špendlík; collapse (◀) zůstává skrytý. */
  body.sidebar-pinned .topbar {
    padding-bottom: 12px;
  }
  /* Topbar — kompaktnější padding na mobile */
  .topbar {
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  /* Topbar greeting — schovej "Vítejte" text na úzkém */
  .topbar-user .greeting-text { display: none; }
  /* Tvé balíčky chip row — full width pod topbar */
  .topbar-packages, .packages-bar {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

.ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 14px 14px;
  font-size: 13px;
  z-index: 100;
  transition: transform 0.3s ease;
  pointer-events: none;
}

.ptr-indicator.is-pulling {
  transform: translateX(-50%) translateY(0);
}

.fab-mobile {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 84px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(186, 117, 23, 0.4);
  cursor: pointer;
  font-size: 26px;
  z-index: 49;
  display: none;
  align-items: center;
  justify-content: center;
}

.fab-mobile.is-visible {
  display: flex;
}

@media (min-width: 769px) {
  .fab-mobile { display: none !important; }
}

.table-wrap {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.table-wrap > table > tbody > tr {
  scroll-snap-align: start;
}

.haccp-sheet-wrap {
  background: #f5f5f0;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.haccp-sheet {
  max-width: 210mm;
  margin: 0 auto;
  padding: 18mm 18mm;
  background: #fff;
  min-height: 297mm;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 11pt;
  line-height: 1.55;
  color: #000;
}

.haccp-sheet .haccp-doc-head {
  border-bottom: 2px solid #BA7517;
  padding-bottom: 6mm;
  margin-bottom: 6mm;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.haccp-sheet .haccp-doc-head .firma {
  font-size: 9pt;
  color: #666;
  line-height: 1.3;
}

.haccp-sheet .haccp-doc-head .firma strong {
  color: #000;
  font-size: 10pt;
}

.haccp-sheet .haccp-doc-head .doc-meta {
  text-align: right;
  font-size: 9pt;
  color: #666;
}

.haccp-sheet .haccp-doc-kategorie {
  font-size: 10pt;
  color: #854F0B;
  text-transform: uppercase;
  letter-spacing: 1pt;
  font-weight: 600;
  margin-bottom: 1mm;
}

.haccp-sheet .haccp-doc-title {
  font-size: 18pt;
  font-weight: 700;
  color: #000;
  margin-bottom: 6mm;
  font-family: 'Times New Roman', Georgia, serif;
  line-height: 1.2;
}

.haccp-sheet .obsah {
  font-size: 11pt;
  line-height: 1.6;
  outline: none;
  font-family: 'Times New Roman', Georgia, serif;
  color: #000;
  min-height: 200mm;
}

.haccp-sheet .obsah:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(186, 117, 23, 0.2);
  border-radius: 4px;
}

.haccp-sheet .obsah h1 {
  font-size: 18pt;
  margin-top: 6mm;
  margin-bottom: 3mm;
  color: #854F0B;
  font-weight: 700;
  font-family: 'Times New Roman', Georgia, serif;
}

.haccp-sheet .obsah h2 {
  font-size: 16pt;
  margin-top: 6mm;
  margin-bottom: 3mm;
  color: #854F0B;
  font-weight: 700;
  font-family: 'Times New Roman', Georgia, serif;
}

.haccp-sheet .obsah h3 {
  font-size: 13pt;
  margin-top: 5mm;
  margin-bottom: 2mm;
  color: #000;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1mm;
  font-weight: 700;
  font-family: 'Times New Roman', Georgia, serif;
}

.haccp-sheet .obsah h4 {
  font-size: 11.5pt;
  margin-top: 4mm;
  margin-bottom: 1mm;
  color: #000;
  font-weight: 700;
  font-family: 'Times New Roman', Georgia, serif;
}

.haccp-sheet .obsah p {
  margin-bottom: 3mm;
  color: #000;
}

.haccp-sheet .obsah ul,
.haccp-sheet .obsah ol {
  margin: 2mm 0 3mm 8mm;
}

.haccp-sheet .obsah li {
  margin-bottom: 1mm;
}

.haccp-sheet .obsah dl {
  margin: 2mm 0 3mm 4mm;
}

.haccp-sheet .obsah dt {
  font-weight: 700;
  margin-top: 2mm;
}

.haccp-sheet .obsah dd {
  margin-left: 4mm;
  margin-bottom: 1mm;
}

.haccp-sheet .obsah table {
  width: 100%;
  border-collapse: collapse;
  margin: 3mm 0;
  font-size: 10pt;
}

.haccp-sheet .obsah th,
.haccp-sheet .obsah td {
  border: 0.4mm solid #999;
  padding: 2mm 3mm;
  vertical-align: top;
  text-align: left;
}

.haccp-sheet .obsah th {
  background: #f5f5f0;
  font-weight: 600;
}

.haccp-sheet .obsah strong {
  color: #000;
}

.haccp-sheet .obsah em {
  color: #444;
}

.haccp-sheet .obsah hr {
  border: none;
  border-top: 1px dashed #999;
  margin: 3mm 0;
}

.haccp-sheet .haccp-doc-foot {
  margin-top: 8mm;
  padding-top: 6mm;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  font-size: 8.5pt;
  color: #666;
}

.haccp-doc-toolbar input.form-input:focus {
  outline: 2px solid rgba(186, 117, 23, 0.3);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .haccp-sheet {
    padding: 12mm 10mm;
    min-height: auto;
    font-size: 11pt;
  }
  .haccp-sheet-wrap {
    padding: 8px;
  }
}

@media (max-width: 1280px) {
  /* Svátek info " · 🎉 Nataša" — schovat (zachovat jen datum "pondělí · 18.5.") */
  .topbar-datum-svatek .ts-svatek { display: none !important; }
  /* "Vítejte," — schovat (only name + role) */
  .topbar-user-greet { display: none; }
  /* Search keep button, schovat full label */
  .topbar-search .btn-cmdk-label { display: none; }
  .topbar > .topbar-search { max-width: 200px; }
  /* B2B label switch to short */
  .btn-prodejna-label { display: none; }
  .btn-prodejna-label-short { display: inline-block; }
  /* Fullscreen + Logout: hide labels, keep icons */
  .btn-fullscreen .btn-fs-label,
  .btn-logout .btn-logout-label { display: none; }
}

@media (max-width: 1024px) {
  .topbar { padding: 10px 16px; gap: 8px; }
  /* 🆕 v3.0.178 — datum/svátek úplně skrytý na ≤1024px (user: display:none, ne 📅 kolečko) */
  .topbar-datum-svatek { display: none; }
  /* Role badge — show as compact */
  .role-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  /* Search → icon only button */
  .topbar > .topbar-search { max-width: 44px; }
  .topbar-search .btn-cmdk-trigger {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .topbar-search .btn-cmdk-kbd { display: none; }
  /* Separator hide */
  .topbar-sep { display: none; }
  /* Notif badge still visible */
  /* B2B short label only */
  .btn-prodejna { padding: 8px 12px; }
}

/* 🆕 v2.9.71 — blok @media(min-width:1024px) ODSTRANĚN.
   Byl to MRTVÝ kód (zaseknutý uvnitř rozbitého @media 900px — viz oprava
   závorek v2.9.70). Po opravě ožil a ROZBIL MENU: `.sidebar{min-width:240px}`
   přebíjelo sbalený režim (72px) → sidebar přetékal přes obsah, menu uskakovalo.
   Kanonický layout menu je výš: .admin-app grid + body.sidebar-collapsed
   (kostičky 72px) + body.sidebar-pinned (fixní na boku). */

.megamenu-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.megamenu-panel {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  max-width: 720px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  margin-top: 20px;
  position: relative;
}

.megamenu-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.megamenu-close:hover { background: rgba(0, 0, 0, 0.1); }

.megamenu-title {
  font-size: 16px; font-weight: 700;
  margin: 0 0 16px;
  padding-right: 40px;
}

.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.megamenu-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  background: linear-gradient(135deg, #FFFFFF, #FAF7F0);
  border: 1.5px solid #E8D5B0;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1f;
  min-height: 88px;
  transition: all 0.15s;
}

.megamenu-tile:hover {
  background: linear-gradient(135deg, #FFF8E7, #FAEEDA);
  border-color: #BA7517;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(186, 117, 23, 0.15);
}

.megamenu-tile-icon {
  font-size: 32px;
  line-height: 1;
}

.megamenu-tile.active {
  background: linear-gradient(135deg, #BA7517, #854F0B);
  color: #fff;
  border-color: transparent;
}

.btn-fs-label, .btn-logout-label {
  display: inline !important;
  font-size: 13.5px !important;
}

/* ════════════════════════════════════════════════════════════════════
   🏷️ APP VERSION FOOTER — fixed bottom, subtle
   ════════════════════════════════════════════════════════════════════ */
.app-version-footer {
  position: fixed;
  bottom: 4px;
  right: 8px;
  font-size: 10px;
  color: var(--text-3, #888780);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  opacity: 0.6;
  user-select: none;
  letter-spacing: 0.3px;
}
.app-version-footer:hover { opacity: 1; }
@media (max-width: 700px) {
  .app-version-footer {
    bottom: 2px;
    right: 4px;
    font-size: 9px;
    padding: 1px 6px;
  }
}
html.theme-dark .app-version-footer,
html.dark .app-version-footer {
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.6);
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.8.8 — TWEAKS:
   1. Nav tile buttons MENŠÍ (mobile 3-col grid, snížit min-height)
   2. Period filter (Dnes/Týden/Měsíc) jako horizontální pill row
   ════════════════════════════════════════════════════════════════════ */

/* MOBILE: nav-item tiles menší (54px místo 64px) */
@media (max-width: 700px) {
  body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item,
  body:not(.sidebar-pinned) .sidebar-nav .nav-item {
    min-height: 54px !important;
    padding: 8px 4px !important;
    font-size: 13px !important;
    gap: 3px !important;
  }
  body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item .nav-icon,
  body:not(.sidebar-pinned) .sidebar-nav .nav-icon {
    font-size: 18px !important;
  }
}

/* 🆕 v2.9.248 — STARÝ PILL OVERRIDE ODSTRANĚN (user 3× řekl 'nechci ovály')
   Tento blok přepisoval moje unified tokens border-radius 999px (pill) a
   flex-wrap: wrap. Smazáno definitivně — pravidla v unified blocku nahoře
   (řádek 1984+) + mobile override (řádek 5128+) řídí celý styling. */


/* ════════════════════════════════════════════════════════════════════
   🎯 v2.8.9 — HACCP DOCUMENTS RESPONSIVE + COMPLETE
   ────────────────────────────────────────────────────────────────────
   HACCP doc editor používá inline-style 280px+1fr grid pro sidebar+editor.
   Na mobilu (≤700px) potřebuje 1-col layout.
   ════════════════════════════════════════════════════════════════════ */

/* HACCP doc page — sidebar + editor grid na mobilu = column */
@media (max-width: 900px) {
  /* HACCP page main wrapper — najdi grid s 280px sidebar */
  div[style*="grid-template-columns:280px 1fr"],
  div[style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  /* HACCP sidebar — full width above editor on mobile */
  .haccp-doc-main {
    margin-top: 14px !important;
  }
  /* HACCP sheet — kompaktní padding na mobile */
  .haccp-sheet {
    padding: 12mm 8mm !important;
    min-height: auto !important;
    font-size: 11pt !important;
  }
  .haccp-sheet-wrap {
    padding: 8px !important;
  }
}

/* Compact HACCP toolbar na mobile */
@media (max-width: 700px) {
  .haccp-doc-toolbar {
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .haccp-doc-toolbar > div {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* HACCP sub-tabs — horizontal scrollable na mobile */
  .haccp-subtabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
  }
}

/* HACCP DARK theme — sheet stays bílý pro print parity */
html.theme-dark .haccp-sheet-wrap,
html.dark .haccp-sheet-wrap {
  background: #2a2a2a;
  border-color: #444;
}
html.theme-dark .haccp-sheet,
html.dark .haccp-sheet {
  background: #fff !important;
  color: #000 !important;
}
html.theme-dark .haccp-sheet .obsah,
html.dark .haccp-sheet .obsah {
  color: #000 !important;
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.1 — TOPBAR LAYOUT (3-section: user | center | actions)
   ────────────────────────────────────────────────────────────────────
   Repre style: levo data + jméno, střed 🔔+🔍, vpravo B2B/FS/Logout
   ════════════════════════════════════════════════════════════════════ */

.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.topbar-center {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  max-width: 480px;
  margin: 0 auto;
}

/* Search button - jemný pill */
.topbar-center .btn-cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 14px;
  background: var(--surface-2, #F7F8FA);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 999px;
  color: var(--text-3, #888780);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 360px;
  text-align: left;
}
.topbar-center .btn-cmdk-trigger:hover {
  background: var(--surface, #fff);
  border-color: var(--primary-border, #FAC775);
  color: var(--text-2, #5F5E5A);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.topbar-center .btn-cmdk-icon {
  font-size: 14px;
  opacity: 0.7;
  flex-shrink: 0;
}
.topbar-center .btn-cmdk-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-center .btn-cmdk-kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--text-3, #888780);
  flex-shrink: 0;
}

/* Notification bell — kulaté tlačítko */
.topbar-center .btn-notif {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.topbar-center .btn-notif:hover {
  background: var(--surface-2, #F7F8FA);
  border-color: var(--primary-border, #FAC775);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.topbar-center .btn-notif-icon {
  font-size: 18px;
  line-height: 1;
}
.topbar-center .btn-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border-radius: 999px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface, #fff);
  line-height: 1;
  box-shadow: 0 1px 3px rgba(220,38,38,0.4);
}
.btn-notif.has-unread .btn-notif-icon {
  animation: bellShake 1.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-10deg); }
  20%, 40% { transform: rotate(10deg); }
  50% { transform: rotate(0); }
}

/* Mobile — schovat search label, jen ikonu */
@media (max-width: 900px) {
  .topbar-center {
    max-width: none;
    gap: 6px;
  }
  .topbar-center .btn-cmdk-trigger {
    padding: 8px 12px;
  }
  .topbar-center .btn-cmdk-kbd {
    display: none;
  }
}
@media (max-width: 700px) {
  .topbar-center {
    order: 3;
    flex: 1 1 100%;
    margin: 6px 0 0;
    max-width: none;
  }
  .topbar-center .btn-cmdk-trigger {
    flex: 1 1 auto;
    padding: 7px 12px;
    font-size: 12px;
  }
  .topbar-center .btn-cmdk-label {
    font-size: 12px;
  }
  .topbar-center .btn-notif {
    width: 34px;
    height: 34px;
  }
  .topbar-center .btn-notif-icon {
    font-size: 16px;
  }
}

/* Topbar-actions: B2B + FS + Logout vpravo */
.topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.2 — HACCP NÁHLED FIX (force Times New Roman + A4 visible)
   ────────────────────────────────────────────────────────────────────
   User: "tisk ano náhled ne" — preview v editoru má vypadat jak PDF
   ════════════════════════════════════════════════════════════════════ */

/* Force HACCP sheet styling s vyšší specificitou */
.haccp-doc-main .haccp-sheet-wrap,
.haccp-doc-main > .haccp-sheet-wrap {
  background: #f5f5f0 !important;
  padding: 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  max-height: 75vh !important;
  overflow-y: auto !important;
}

.haccp-doc-main .haccp-sheet,
.card-block .haccp-sheet,
aside + main .haccp-sheet,
.haccp-sheet {
  display: block !important;
  max-width: 210mm !important;
  margin: 0 auto !important;
  padding: 18mm 18mm !important;
  background: #fff !important;
  min-height: 297mm !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
  font-family: 'Times New Roman', Georgia, serif !important;
  font-size: 11pt !important;
  line-height: 1.55 !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* All children inherit Times New Roman */
.haccp-sheet *,
.haccp-sheet *::before,
.haccp-sheet *::after {
  font-family: 'Times New Roman', Georgia, serif !important;
  color: #000;
}

/* Brown line under header */
.haccp-sheet .haccp-doc-head {
  border-bottom: 2px solid #BA7517 !important;
  padding-bottom: 6mm !important;
  margin-bottom: 6mm !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
}
.haccp-sheet .haccp-doc-head .firma { font-size: 9pt !important; color: #666 !important; line-height: 1.3 !important; }
.haccp-sheet .haccp-doc-head .firma strong { color: #000 !important; font-size: 10pt !important; }
.haccp-sheet .haccp-doc-head .doc-meta { text-align: right !important; font-size: 9pt !important; color: #666 !important; }

/* Category pill */
.haccp-sheet .haccp-doc-kategorie {
  font-size: 10pt !important;
  color: #854F0B !important;
  text-transform: uppercase !important;
  letter-spacing: 1pt !important;
  font-weight: 600 !important;
  margin-bottom: 1mm !important;
}

/* Title 18pt bold */
.haccp-sheet .haccp-doc-title {
  font-size: 18pt !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin-bottom: 6mm !important;
  line-height: 1.2 !important;
}

/* Obsah - body */
.haccp-sheet .obsah {
  font-size: 11pt !important;
  line-height: 1.6 !important;
  color: #000 !important;
  min-height: 200mm !important;
  outline: none !important;
}
.haccp-sheet .obsah:focus {
  box-shadow: inset 0 0 0 1px rgba(186, 117, 23, 0.2) !important;
  border-radius: 4px !important;
}
.haccp-sheet .obsah h1 { font-size: 18pt !important; margin-top: 6mm !important; margin-bottom: 3mm !important; color: #854F0B !important; font-weight: 700 !important; }
.haccp-sheet .obsah h2 { font-size: 16pt !important; margin-top: 6mm !important; margin-bottom: 3mm !important; color: #854F0B !important; font-weight: 700 !important; }
.haccp-sheet .obsah h3 { font-size: 13pt !important; margin-top: 5mm !important; margin-bottom: 2mm !important; color: #000 !important; border-bottom: 1px solid #ddd !important; padding-bottom: 1mm !important; font-weight: 700 !important; }
.haccp-sheet .obsah h4 { font-size: 11.5pt !important; margin-top: 4mm !important; margin-bottom: 1mm !important; color: #000 !important; font-weight: 700 !important; }
.haccp-sheet .obsah p { margin-bottom: 3mm !important; }
.haccp-sheet .obsah ul,
.haccp-sheet .obsah ol { margin: 2mm 0 3mm 8mm !important; }
.haccp-sheet .obsah li { margin-bottom: 1mm !important; }
.haccp-sheet .obsah dl { margin: 2mm 0 3mm 4mm !important; }
.haccp-sheet .obsah dt { font-weight: 700 !important; margin-top: 2mm !important; }
.haccp-sheet .obsah dd { margin-left: 4mm !important; margin-bottom: 1mm !important; }
.haccp-sheet .obsah table { width: 100% !important; border-collapse: collapse !important; margin: 3mm 0 !important; font-size: 10pt !important; }
.haccp-sheet .obsah th,
.haccp-sheet .obsah td { border: 0.4mm solid #999 !important; padding: 2mm 3mm !important; vertical-align: top !important; text-align: left !important; }
.haccp-sheet .obsah th { background: #f5f5f0 !important; font-weight: 600 !important; }
.haccp-sheet .obsah strong { color: #000 !important; font-weight: 700 !important; }
.haccp-sheet .obsah em { color: #444 !important; font-style: italic !important; }
.haccp-sheet .obsah hr { border: none !important; border-top: 1px dashed #999 !important; margin: 3mm 0 !important; }

/* Footer */
.haccp-sheet .haccp-doc-foot {
  margin-top: 8mm !important;
  padding-top: 6mm !important;
  border-top: 1px solid #ccc !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 8.5pt !important;
  color: #666 !important;
}

/* Mobile compact */
@media (max-width: 700px) {
  .haccp-sheet {
    padding: 8mm 6mm !important;
    min-height: auto !important;
    font-size: 10.5pt !important;
  }
  .haccp-doc-main .haccp-sheet-wrap {
    padding: 8px !important;
    max-height: 70vh !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.3 — TOPBAR LAYOUT FIX (search alone center, notif right)
   ════════════════════════════════════════════════════════════════════ */

/* Topbar 3-section layout */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 24px !important;
}

/* topbar-user: date pill + greeting + name + role */
.topbar-user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
.topbar-user .topbar-datum-svatek {
  flex-shrink: 0 !important;
}

/* topbar-center: SEARCH ALONE, centered */
.topbar-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}
/* Žádné notif v centeru */
.topbar-center .btn-notif { display: none !important; }

/* topbar-actions: notif + B2B + FS + Logout */
.topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}
/* Notif má extra margin-right (separator) */
.topbar-notif-spaced,
.topbar-actions .btn-notif {
  margin-right: 12px !important;
  position: relative !important;
}
/* Visual separator po notif tlačítku */
.topbar-actions .btn-notif::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: var(--border-2, rgba(0,0,0,0.16));
  opacity: 0.5;
}

/* Notif button styling — kulaté */
.topbar-actions .btn-notif {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, rgba(0,0,0,0.08)) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}
.topbar-actions .btn-notif:hover {
  background: var(--surface-2, #F7F8FA) !important;
  border-color: var(--primary-border, #FAC775) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}
.topbar-actions .btn-notif-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}
.topbar-actions .btn-notif-badge {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  min-width: 18px !important;
  height: 18px !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: white !important;
  border-radius: 999px !important;
  padding: 0 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--surface, #fff) !important;
  line-height: 1 !important;
  box-shadow: 0 1px 3px rgba(220,38,38,0.4) !important;
}

/* Search pill v centeru */
.topbar-center .btn-cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 14px;
  background: var(--surface-2, #F7F8FA);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 999px;
  color: var(--text-3, #888780);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  max-width: 360px;
  text-align: left;
}
.topbar-center .btn-cmdk-trigger:hover {
  background: var(--surface, #fff);
  border-color: var(--primary-border, #FAC775);
  color: var(--text-2, #5F5E5A);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.topbar-center .btn-cmdk-icon { font-size: 14px; opacity: 0.7; flex-shrink: 0; }
.topbar-center .btn-cmdk-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-center .btn-cmdk-kbd {
  display: inline-flex; align-items: center; padding: 2px 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px; color: var(--text-3, #888780);
  flex-shrink: 0;
}

/* Sidebar logo: pouze logo + brand, BEZ datum pill (datum je v topbar) */
/* v2.9.71 — odstraněn mrtvý @media(min-width:901px) blok (oživený opravou závorek). */

/* Mobile: schovat label search, kompaktnější */
@media (max-width: 900px) {
  .topbar-center { max-width: none; }
  .topbar-center .btn-cmdk-kbd { display: none; }
  .topbar-center .btn-cmdk-trigger { padding: 8px 12px; }
  /* Topbar overflow protection */
  .topbar { padding: 10px 14px !important; gap: 8px !important; flex-wrap: wrap !important; }
}
@media (max-width: 700px) {
  .topbar-center {
    order: 99;
    flex: 1 1 100%;
    margin: 6px 0 0;
    max-width: none;
  }
  .topbar-center .btn-cmdk-trigger { padding: 7px 12px; font-size: 12px; }
  .topbar-actions .btn-notif { margin-right: 8px !important; width: 34px !important; height: 34px !important; }
  .topbar-actions .btn-notif::after { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.5 — MENU TILES MENŠÍ (match reprekv reference)
   User screenshot: 3-col grid, ~80px height, kompaktní
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item,
  body:not(.sidebar-pinned) .sidebar-nav .nav-item {
    min-height: 76px !important;        /* bylo 54px, ale s celým textem to chce víc */
    padding: 10px 4px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    gap: 4px !important;
    font-weight: 600 !important;
  }
  body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item .nav-icon,
  body:not(.sidebar-pinned) .sidebar-nav .nav-icon {
    font-size: 22px !important;
    margin-bottom: 2px !important;
  }
  /* Sidebar padding kompaktnější — víc místa pro grid */
  aside.sidebar {
    padding: 10px 14px !important;
  }
  body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav {
    gap: 8px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.7 — VNITŘNÍ TECHNICKÁ KARTA (vyrobek_haccp.php) 1:1
   ────────────────────────────────────────────────────────────────────
   Mirror styling z api/vyrobek_haccp.php — pro print preview v editoru
   nebo embed v adminu.
   ════════════════════════════════════════════════════════════════════ */

/* Wrapper pro print preview embed */
.haccp-card-preview {
  background: #f5f5f0;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border, #e8e8ed);
  max-height: 75vh;
  overflow-y: auto;
}
.haccp-card-preview .page {
  max-width: 210mm;
  margin: 0 auto 16px;
  padding: 18mm 18mm;
  background: #fff;
  min-height: 297mm;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 11pt;
  line-height: 1.45;
  color: #000;
}

/* Title + sekce */
.haccp-card-preview .haccp-title,
.haccp-title {
  font-size: 14pt;
  font-weight: 700;
  margin-bottom: 14mm;
  padding-bottom: 3mm;
  font-family: 'Times New Roman', Georgia, serif;
}
.haccp-card-preview .haccp-section,
.haccp-section {
  font-size: 12pt;
  font-weight: 700;
  margin-bottom: 6mm;
  padding-bottom: 1mm;
  font-family: 'Times New Roman', Georgia, serif;
}

/* Tabulka s labely + hodnotami */
.haccp-card-preview table.haccp-tbl,
table.haccp-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11pt;
  margin-bottom: 8mm;
  font-family: 'Times New Roman', Georgia, serif;
}
table.haccp-tbl td {
  border: 0.4mm solid #000;
  padding: 2.5mm 4mm;
  vertical-align: top;
}
table.haccp-tbl td.label {
  width: 42%;
  font-weight: 600;
  background: #FAFAFA;
}
table.haccp-tbl td.value {
  font-weight: 400;
}
table.haccp-tbl td.value.empty {
  color: #999;
  font-style: italic;
}

/* Block s nadpisem + textem (na podtitulky pod sekcí) */
.haccp-block {
  margin-bottom: 6mm;
}
.haccp-block-title {
  font-weight: 600;
  margin-bottom: 1mm;
}
.haccp-block-text {
  padding: 2mm 0;
  border-bottom: 0.3mm solid #999;
}

/* Footer */
.haccp-foot {
  margin-top: 14mm;
  display: flex;
  justify-content: space-between;
  font-size: 9pt;
  color: #555;
  border-top: 1px solid #ccc;
  padding-top: 4mm;
}

/* Postup — kroky s číslem + popisem, CCP zvýrazněn */
.postup-list {
  display: flex;
  flex-direction: column;
  gap: 3mm;
}
.postup-step {
  display: flex;
  gap: 5mm;
  padding: 3mm 4mm;
  background: #FAFAFA;
  border-left: 0.6mm solid #BA7517;
  border-radius: 0 1mm 1mm 0;
}
.postup-step.is-ccp {
  background: #FEE2E2;
  border-left-color: #dc2626;
}
.postup-num {
  font-weight: 700;
  font-size: 11pt;
  color: #BA7517;
  flex-shrink: 0;
  width: 8mm;
}
.postup-step.is-ccp .postup-num {
  color: #dc2626;
}
.postup-body {
  flex: 1;
}
.postup-nazev {
  font-weight: 600;
  font-size: 11pt;
  margin-bottom: 0.5mm;
}
.postup-popis {
  font-size: 10pt;
  color: #555;
}
.postup-ccp {
  background: #dc2626;
  color: #fff;
  font-size: 8pt;
  padding: 0.5mm 2mm;
  border-radius: 1mm;
  margin-left: 2mm;
  font-weight: 700;
  letter-spacing: 0.3pt;
}

/* Flow diagram — Vstupy → Postup */
.flow-diagram {
  display: grid;
  grid-template-columns: 60mm 1fr;
  gap: 8mm;
  margin: 6mm 0 8mm;
  align-items: start;
}
.flow-col-title {
  font-size: 9.5pt;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.6pt;
  padding-bottom: 1.5mm;
  border-bottom: 0.4mm solid #999;
  margin-bottom: 3mm;
}
.flow-inputs-col {
  display: flex;
  flex-direction: column;
  gap: 1.6mm;
}
.flow-input-box {
  display: flex;
  align-items: center;
  gap: 2mm;
  background: #FFF8E7;
  border: 0.3mm solid #BA7517;
  border-radius: 1.5mm;
  padding: 1.6mm 2.5mm;
  font-size: 9pt;
  line-height: 1.2;
}
.flow-input-num {
  font-weight: 700;
  color: #BA7517;
  min-width: 6mm;
  font-size: 8.5pt;
  text-align: right;
}
.flow-input-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3mm;
  min-width: 0;
}
.flow-input-name {
  color: #000;
  font-size: 9pt;
  line-height: 1.2;
}
.flow-input-target {
  font-size: 7.5pt;
  color: #854F0B;
  font-style: italic;
  line-height: 1.15;
}
.flow-input-arrow {
  color: #BA7517;
  font-weight: 700;
  font-size: 11pt;
  margin-left: 1mm;
  line-height: 1;
}
.flow-steps-col {
  display: flex;
  flex-direction: column;
  gap: 0.8mm;
}
.flow-step {
  display: flex;
  align-items: center;
  gap: 3mm;
  background: #F4F0E8;
  border: 0.4mm solid #BA7517;
  border-left: 1mm solid #BA7517;
  border-radius: 1.5mm;
  padding: 2.5mm 4mm;
}
.flow-step.is-ccp {
  background: #FEE2E2;
  border-color: #dc2626;
  border-left-color: #dc2626;
}
.flow-step-num {
  font-weight: 700;
  color: #BA7517;
  min-width: 7mm;
  font-size: 11pt;
}
.flow-step.is-ccp .flow-step-num {
  color: #dc2626;
}
.flow-step-name {
  flex: 1;
  font-size: 10pt;
  font-weight: 600;
}
.flow-ccp-badge {
  background: #dc2626;
  color: #fff;
  font-size: 7.5pt;
  padding: 0.5mm 2mm;
  border-radius: 1mm;
  font-weight: 700;
  letter-spacing: 0.4pt;
}
.flow-arrow-down {
  text-align: center;
  font-size: 13pt;
  color: #BA7517;
  line-height: 0.7;
  margin-left: 7mm;
  height: 3.5mm;
}

/* Tabulka kritických bodů (HACCP analýza nebezpečí) */
table.haccp-kb {
  width: 100%;
  border-collapse: collapse;
  font-size: 10pt;
}
table.haccp-kb th {
  background: #FAFAFA;
  font-weight: 600;
  font-size: 10pt;
  text-align: left;
  padding: 3mm 3mm;
  border: 0.4mm solid #000;
}
table.haccp-kb td {
  font-size: 10pt;
  padding: 2.5mm 3mm;
  border: 0.4mm solid #000;
  vertical-align: top;
}

/* Separator mezi kartami při hromadném tisku */
.haccp-card-separator {
  height: 0;
  page-break-before: always;
}

/* Mobile compact */
@media (max-width: 700px) {
  .haccp-card-preview .page {
    padding: 12mm 8mm;
    min-height: auto;
    font-size: 10.5pt;
  }
  .flow-diagram {
    grid-template-columns: 1fr;
    gap: 4mm;
  }
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.10 — SEARCH POSITION + NOTIF BELL COLOR-ONLY
   User: "vyhledávání skáče někde mimo, notifikace odeber počet"
   ════════════════════════════════════════════════════════════════════ */

/* Skryj všechny notif-badge počty — jen barva ikony */
.btn-notif-badge,
.topbar-center .btn-notif-badge,
.topbar-actions .btn-notif-badge,
#notif-badge {
  display: none !important;
}

/* Default: bell šedý/text-3 */
.btn-notif .btn-notif-icon,
.topbar-actions .btn-notif .btn-notif-icon {
  filter: grayscale(0.4);
  opacity: 0.65;
  transition: all 0.2s ease;
}

/* Has-unread: bell zezlátne (gold) + výrazný */
.btn-notif.has-unread,
.topbar-actions .btn-notif.has-unread {
  background: linear-gradient(135deg, #FFF3D6, #FCE5B5) !important;
  border-color: #E8B855 !important;
  box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.1), 0 1px 4px rgba(186, 117, 23, 0.2) !important;
}
.btn-notif.has-unread .btn-notif-icon,
.topbar-actions .btn-notif.has-unread .btn-notif-icon {
  filter: none;
  opacity: 1;
  color: #BA7517;
  animation: bellShake 1.2s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-12deg); }
  20%, 40% { transform: rotate(12deg); }
  50%, 100% { transform: rotate(0); }
}

/* ─── Search button position fix ─────────────────────────────────── */

/* Topbar-center: search KOMPAKTNĚJŠÍ + nepřetékající */
/* v2.9.71 — odstraněn mrtvý @media(min-width:901px) topbar-center blok (oživený opravou závorek). */

/* Tablet 701-900px: search kompaktní + flex shrink povolen */
@media (min-width: 701px) and (max-width: 900px) {
  .topbar-center {
    flex: 1 1 auto !important;
    max-width: 280px !important;
    margin: 0 8px !important;
  }
  .topbar-center .btn-cmdk-trigger {
    padding: 7px 12px !important;
    font-size: 12px !important;
    width: 100% !important;
  }
  .topbar-center .btn-cmdk-kbd { display: none !important; }
  .topbar-center .btn-cmdk-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Mobile ≤700px: search celá šíře pod topbar (řádek samostatný) */
@media (max-width: 700px) {
  .topbar-center {
    order: 99 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    max-width: none !important;
    padding: 0 4px !important;
  }
  .topbar-center .btn-cmdk-trigger {
    width: 100% !important;
    padding: 8px 14px !important;
  }
  .topbar-center .btn-cmdk-kbd { display: none !important; }
}

/* Cmdk overlay — vždy nad VŠÍM (z-index priority) */
.cmdk-overlay {
  z-index: 10002 !important;
}
.cmdk {
  position: relative;
  z-index: 10003;
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.12 — LANG DROPDOWN v admin topbar
   ════════════════════════════════════════════════════════════════════ */
.lang-dropdown-wrap {
  position: relative;
  display: inline-block;
  margin-right: 8px;
}
.topbar-actions .lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text, #1d1d1f);
  transition: all 0.15s ease;
  height: 38px;
  white-space: nowrap;
}
.topbar-actions .lang-trigger:hover {
  background: var(--surface-2, #FFF8E5);
  border-color: var(--primary-border, #FAC775);
  box-shadow: 0 2px 6px rgba(186,117,23,0.12);
}
.lang-trigger-flag {
  font-size: 18px;
  line-height: 1;
}
.lang-trigger-code {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.lang-trigger-arrow {
  font-size: 10px;
  opacity: 0.55;
  transition: transform 0.18s ease;
}
.lang-trigger[aria-expanded="true"] .lang-trigger-arrow {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.04);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 1000;
  animation: langMenuOpenAdm 0.15s ease-out;
}
.lang-menu.show {
  display: flex;
}
@keyframes langMenuOpenAdm {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-opt {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--text, #1d1d1f);
  text-align: left;
  transition: all 0.12s ease;
  width: 100%;
}
.lang-opt:hover {
  background: var(--surface-2, #FFF8E5);
  border-color: var(--primary-border, #FAC775);
}
.lang-opt.is-active {
  background: var(--primary-light, #FFF8E5);
  border-color: var(--primary, #BA7517);
  font-weight: 600;
  color: var(--primary-dark, #854F0B);
}
.lang-opt .lang-flag {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.lang-opt .lang-name {
  flex: 1;
}

/* Mobile compact */
@media (max-width: 700px) {
  .topbar-actions .lang-trigger {
    padding: 7px 10px;
    height: 34px;
  }
  .lang-trigger-flag { font-size: 16px; }
  .lang-trigger-code { display: none; }
  .lang-menu { right: -8px; min-width: 200px; }
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.15 — MODAL CLOSE: jen ÚPLNĚ JEDNO × (skrýt HTML, ukázat ::before)
   ════════════════════════════════════════════════════════════════════ */
.modal-close,
button.modal-close {
  font-size: 0 !important;        /* skryje HTML "×" — nahrazeno ::before */
  text-indent: 0 !important;
  letter-spacing: 0 !important;
}
.modal-close::before {
  content: '×' !important;
  font-size: 32px !important;
  line-height: 1 !important;
  display: block !important;
  font-weight: 300 !important;
  transform: translateY(1px);
}

/* Mobile compact */
@media (max-width: 700px) {
  .modal-close::before { font-size: 28px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.17 — LANG DROPDOWN NUCLEAR FAILSAFE
   User: items rozházené v topbaru → position:absolute nebyl aplikován
   ════════════════════════════════════════════════════════════════════ */

/* Wrapper musí být relative — anchor pro absolute menu */
.lang-dropdown-wrap {
  position: relative !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Menu — ABSOLUTNĚ pozicované floating panel */
.lang-menu,
.topbar-actions .lang-menu,
#adm-lang-menu,
#lang-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 180px !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, rgba(0,0,0,0.12)) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.06) !important;
  padding: 6px !important;
  flex-direction: column !important;
  gap: 2px !important;
  z-index: 9999 !important;
  display: none;   /* default — JS toggluje */
}

/* Show state — vynucené přes class + inline style flag */
.lang-menu.show,
#adm-lang-menu.show,
#lang-menu.show {
  display: flex !important;
}

/* Opt buttons — vždy full-width row */
.lang-opt {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  background: none !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 14px !important;
  text-align: left !important;
  color: var(--text, #1d1d1f) !important;
  transition: all 0.12s ease !important;
}
.lang-opt:hover {
  background: var(--surface-2, #FFF8E5) !important;
  border-color: var(--primary-border, #FAC775) !important;
}
.lang-opt.is-active {
  background: var(--primary-light, #FFF8E5) !important;
  border-color: var(--primary, #BA7517) !important;
  font-weight: 600 !important;
  color: var(--primary-dark, #854F0B) !important;
}
.lang-opt .lang-flag {
  font-size: 20px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.lang-opt .lang-name {
  flex: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.19 — TVÉ BALÍČKY: velké 100px tiles s labelem
   User: "tvé balíčky dej nad přehled a zvětši ikony na 100px"
   ════════════════════════════════════════════════════════════════════ */

/* Sub-header — sticky NAD content (přirozené DOM pořadí: topbar → packages → content) */
#package-subheader,
.package-subheader {
  display: none;                           /* default — JS přidá .show když má balíčky */
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  background: var(--surface-2, #F7F8FA);
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
  position: relative;
  z-index: 5;
  flex-wrap: wrap;
  /* NO order — necháme přirozené DOM pořadí, jinak by se to pohybovalo divně */
}
#package-subheader.show,
.package-subheader.show {
  display: flex !important;
}
.pkg-sub-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3, #888780);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 38px;                       /* center vertically vs 100px tiles */
}

/* Container pro tiles */
.topbar-pkg-badges,
#topbar-package-badges {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* BIG 100px tiles s labelem */
.pkg-badge-square {
  position: relative;
  width: 100px !important;
  height: 100px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: var(--surface, #fff) !important;
  border: 2px solid var(--border, #e8e8ed) !important;
  border-radius: 18px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  padding: 8px !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
.pkg-badge-square:hover {
  border-color: var(--pkg-color, var(--primary)) !important;
  background: linear-gradient(180deg, #FFFDF6 0%, #F1EADA 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0,0,0,0.04) !important;
}
.pkg-badge-square.is-active {
  background: linear-gradient(180deg, #FAC775 0%, #BA7517 100%) !important;
  border-color: #854F0B !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.pkg-badge-icon {
  font-size: 44px !important;
  line-height: 1 !important;
  display: block !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06));
}
.pkg-badge-square:hover .pkg-badge-icon {
  transform: scale(1.08);
  transition: transform 0.2s ease;
}
.pkg-badge-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  color: var(--text-2, #5F5E5A) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 90% !important;
  letter-spacing: 0.1px !important;
}
.pkg-badge-square.is-active .pkg-badge-label {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.pkg-badge-square:hover .pkg-badge-label {
  color: var(--primary-dark, #854F0B) !important;
}
/* Schovej legacy tooltip */
.pkg-badge-tooltip { display: none !important; }

/* Mobile responsive — slightly smaller na malých displejích */
@media (max-width: 700px) {
  #package-subheader,
  .package-subheader {
    padding: 10px 12px;
    gap: 10px;
  }
  .pkg-sub-label {
    padding-top: 0;
    align-self: center;
    width: 100%;
  }
  .pkg-badge-square {
    width: 90px !important;
    height: 90px !important;
    border-radius: 16px !important;
  }
  .pkg-badge-icon {
    font-size: 40px !important;
  }
  .pkg-badge-label {
    font-size: 10.5px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.21 — DROPDOWN flag-only + CMDK overlay fix + NOTIF no counter
   ════════════════════════════════════════════════════════════════════ */

/* === LANG DROPDOWN: items JEN s vlajkami (label schovaný) === */
.lang-menu .lang-opt .lang-name {
  display: none !important;
}
.lang-menu .lang-opt {
  width: 56px !important;
  height: 48px !important;
  padding: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
}
.lang-menu .lang-opt .lang-flag {
  font-size: 28px !important;
  margin: 0 !important;
}
/* Menu = grid 3-col vlajek */
.lang-menu,
#adm-lang-menu,
#lang-menu {
  display: none;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  min-width: 200px !important;
  padding: 8px !important;
}
.lang-menu.show,
#adm-lang-menu.show,
#lang-menu.show {
  display: grid !important;
}

/* === NOTIF: count badge VŽDY schovaný — jen barva ikony === */
.btn-notif-badge,
#notif-badge,
.topbar-actions .btn-notif-badge,
.topbar-center .btn-notif-badge {
  display: none !important;
}

/* Default: bell šedý */
.btn-notif .btn-notif-icon,
#btn-notifications .btn-notif-icon {
  filter: grayscale(0.4);
  opacity: 0.6;
  transition: all 0.2s ease;
}
/* Has-unread: bell zezlátne + shake */
.btn-notif.has-unread,
#btn-notifications.has-unread {
  background: linear-gradient(135deg, #FFF3D6, #FCE5B5) !important;
  border-color: #E8B855 !important;
  box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.12), 0 1px 4px rgba(186, 117, 23, 0.2) !important;
}
.btn-notif.has-unread .btn-notif-icon,
#btn-notifications.has-unread .btn-notif-icon {
  filter: none;
  opacity: 1;
  animation: bellShakeV21 1.5s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes bellShakeV21 {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-10deg); }
  20%, 40% { transform: rotate(10deg); }
  50%, 100% { transform: rotate(0); }
}

/* === CMDK overlay — MUSÍ být fixed full-screen modal === */
.cmdk-overlay,
#cmdk-overlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(20, 20, 22, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 10002 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 12vh !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.cmdk-overlay.show,
#cmdk-overlay.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.cmdk {
  position: relative !important;
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: 100% !important;
  max-height: 75vh !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: translateY(-12px) scale(0.97);
  transition: transform 0.18s ease-out;
  z-index: 10003 !important;
}
.cmdk-overlay.show .cmdk { transform: translateY(0) scale(1); }

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.22 — Padding mezi 🔔 a vlajky + dropdown labels OFF (bulletproof)
   ════════════════════════════════════════════════════════════════════ */

/* Padding mezi lang dropdown wrap a notif/B2B */
.topbar-actions .lang-dropdown-wrap {
  margin-right: 12px !important;
  padding-right: 4px !important;
  border-right: 1px solid var(--border-2, rgba(0,0,0,0.10)) !important;
}
.topbar-actions .btn-notif {
  margin-left: 4px !important;
}

/* DROPDOWN — jen vlajky, žádný text label (bulletproof) */
.lang-menu .lang-opt .lang-name,
#adm-lang-menu .lang-opt .lang-name,
#lang-menu .lang-opt .lang-name {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  font-size: 0 !important;
  opacity: 0 !important;
}

/* Menu = grid 3-col jen vlajek (force again) */
.lang-menu,
#adm-lang-menu,
#lang-menu {
  display: none;
}
.lang-menu.show,
#adm-lang-menu.show,
#lang-menu.show {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  padding: 10px !important;
  min-width: 220px !important;
}

.lang-menu .lang-opt {
  width: auto !important;
  min-width: 56px !important;
  height: 52px !important;
  padding: 8px 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: 0 !important;
}
.lang-menu .lang-opt .lang-flag {
  font-size: 32px !important;
  line-height: 1 !important;
  margin: 0 !important;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.04));
}
.lang-menu .lang-opt:hover .lang-flag {
  transform: scale(1.1);
  transition: transform 0.15s;
}

/* Mobile compact */
@media (max-width: 700px) {
  .topbar-actions .lang-dropdown-wrap {
    margin-right: 8px !important;
    padding-right: 4px !important;
  }
  .lang-menu .lang-opt {
    height: 46px !important;
  }
  .lang-menu .lang-opt .lang-flag {
    font-size: 28px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   🎯 v2.9.23 — TVÉ BALÍČKY: nuclear failsafe (no absolute, no order conflicts)
   ════════════════════════════════════════════════════════════════════ */

/* Subheader vždy POD topbar, NAD content. Žádný position:absolute. */
#package-subheader,
.package-subheader {
  position: relative !important;
  position: static !important;            /* žádný floating */
  display: none;
  width: 100%;
  margin: 0;
  padding: 14px 24px;
  background: var(--surface-2, #F7F8FA);
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
  z-index: auto !important;
  order: 0 !important;                    /* default flex order — přirozený */
  flex-shrink: 0 !important;
}
#package-subheader.show,
.package-subheader.show {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

/* Tiles container */
#topbar-package-badges,
.topbar-pkg-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  flex: 1 1 auto !important;
}

/* 100px tile — bulletproof */
.pkg-badge-square {
  position: relative !important;
  width: 100px !important;
  height: 100px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px !important;
  background: var(--surface, #fff) !important;
  border: 2px solid var(--border, #e8e8ed) !important;
  border-radius: 18px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 0 !important;             /* reset — labels uvnitř použijí svou velikost */
  flex-shrink: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: all 0.2s ease !important;
}
.pkg-badge-square:hover {
  transform: translateY(-2px) !important;
  border-color: var(--primary-border, #FAC775) !important;
  background: linear-gradient(180deg, #FFFDF6 0%, #F1EADA 100%) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.10) !important;
}
.pkg-badge-square.is-active {
  background: linear-gradient(180deg, #FAC775 0%, #BA7517 100%) !important;
  border-color: #854F0B !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(186, 117, 23, 0.35) !important;
}
.pkg-badge-icon {
  font-size: 44px !important;
  line-height: 1 !important;
}
.pkg-badge-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  color: var(--text-2, #5F5E5A) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.pkg-badge-square.is-active .pkg-badge-label { color: #fff !important; }
.pkg-badge-tooltip { display: none !important; }

/* Mobile */
@media (max-width: 700px) {
  #package-subheader,
  .package-subheader {
    padding: 10px 12px;
    gap: 10px;
  }
  .pkg-badge-square {
    width: 90px !important;
    height: 90px !important;
  }
  .pkg-badge-icon { font-size: 40px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   APPEK v2.9.23 — LANG DROPDOWN: FLAGS-ONLY (FINAL FIX)
   ═══════════════════════════════════════════════════════════════════
   Labels (.lang-name) jsou ODSTRANĚNY z HTML, takže žádné spany
   k schování. Tento blok jen styluje samotné buttony jako kompaktní
   mřížku 5 vlajek vedle sebe (PC i mobil identický layout).
   ═══════════════════════════════════════════════════════════════════ */

/* Bezpečnostní pojistka — pokud by někde zbyl .lang-name span, schovej */
.lang-menu .lang-name,
#adm-lang-menu .lang-name,
#lang-menu .lang-name,
.lang-opt .lang-name {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -99999px !important;
  pointer-events: none !important;
}

/* v2.9.24 — flags-only menu sloupcový layout (vlajky POD SEBOU) */
.lang-menu.lang-menu--flags-only,
#adm-lang-menu.lang-menu--flags-only,
#lang-menu.lang-menu--flags-only {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 10050 !important;
  display: none !important;
  flex-direction: column !important;          /* COLUMN — pod sebou */
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  padding: 6px !important;
  background: var(--card, #fff) !important;
  border: 1px solid var(--border, #E8E1CF) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  min-width: 0 !important;
  width: auto !important;
  white-space: nowrap !important;
}

.lang-menu.lang-menu--flags-only.show,
#adm-lang-menu.lang-menu--flags-only.show,
#lang-menu.lang-menu--flags-only.show,
.lang-menu.lang-menu--flags-only[aria-hidden="false"],
#adm-lang-menu.lang-menu--flags-only[aria-hidden="false"],
#lang-menu.lang-menu--flags-only[aria-hidden="false"] {
  display: flex !important;
}

/* Jednotlivá vlajka — čtvercové tlačítko */
.lang-opt.lang-opt--flag-only {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.lang-opt.lang-opt--flag-only:hover {
  background: var(--bg-soft, #FAF6EC) !important;
  border-color: var(--border, #E8E1CF) !important;
  transform: scale(1.08) !important;
}

.lang-opt.lang-opt--flag-only.is-active,
.lang-opt.lang-opt--flag-only[aria-selected="true"] {
  background: linear-gradient(180deg, #FAC775 0%, #BA7517 100%) !important;
  border-color: #854F0B !important;
  box-shadow: 0 2px 6px rgba(186, 117, 23, 0.35) !important;
}

/* Theme overrides */
html.theme-dark .lang-menu.lang-menu--flags-only,
html.theme-dark #adm-lang-menu.lang-menu--flags-only,
html.theme-dark #lang-menu.lang-menu--flags-only {
  background: #1f1f1f !important;
  border-color: #3a3a3a !important;
}
html.theme-dark .lang-opt.lang-opt--flag-only:hover {
  background: #2a2a2a !important;
  border-color: #4a4a4a !important;
}

/* Mobil — stejný layout, jen menší vlajky */
@media (max-width: 700px) {
  .lang-menu.lang-menu--flags-only,
  #adm-lang-menu.lang-menu--flags-only,
  #lang-menu.lang-menu--flags-only {
    right: 0 !important;
    left: auto !important;
    padding: 5px !important;
    gap: 3px !important;
  }
  .lang-opt.lang-opt--flag-only {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 20px !important;
  }
}

/* Velmi úzký mobil — ještě o trochu menší */
@media (max-width: 380px) {
  .lang-opt.lang-opt--flag-only {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 18px !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   APPEK v2.9.26 — Padding 0,5 cm mezi 🔔 a vlajky + hide fullscreen na mobilu
   ═══════════════════════════════════════════════════════════════════ */

/* Padding 0,5 cm (cca 19 px) mezi lang dropdown a notif/B2B */
.topbar-actions .lang-dropdown-wrap {
  margin-right: 0.5cm !important;
  padding-right: 0.25cm !important;
  border-right: 1px solid var(--border-2, rgba(0,0,0,0.10)) !important;
}
.topbar-actions .btn-notif {
  margin-left: 0.25cm !important;
}

/* Skryj tlačítko "Celá obrazovka" na mobilu (<= 700 px = mobil/tablet portrait) */
@media (max-width: 700px) {
  .btn-fullscreen,
  #fullscreen-btn {
    display: none !important;
  }
}

/* Trošku užší padding na velmi malém mobilu */
@media (max-width: 380px) {
  .topbar-actions .lang-dropdown-wrap {
    margin-right: 0.35cm !important;
    padding-right: 0.15cm !important;
  }
  .topbar-actions .btn-notif {
    margin-left: 0.15cm !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   APPEK v2.9.27 — Package badges: 150px PC, force-visible na mobilu
   ═══════════════════════════════════════════════════════════════════ */

/* PC — 150px tile (default, > 700 px) */
.pkg-badge-square {
  width: 150px !important;
  height: 150px !important;
  border-radius: 22px !important;
  padding: 12px !important;
  gap: 10px !important;
}
.pkg-badge-icon  { font-size: 64px !important; }
.pkg-badge-label { font-size: 14px !important; }

/* Mobil — package-subheader FORCE visible (přebije display:none default) */
@media (max-width: 700px) {
  #package-subheader,
  .package-subheader {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    background: var(--surface-2, #F7F8FA) !important;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)) !important;
  }
  #topbar-package-badges,
  .topbar-pkg-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    flex: 1 1 100% !important;
    justify-content: center !important;
  }
  /* Mobil tile — menší ale stále čitelné */
  .pkg-badge-square {
    width: 110px !important;
    height: 110px !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }
  .pkg-badge-icon  { font-size: 46px !important; }
  .pkg-badge-label { font-size: 12px !important; }
}

/* Velmi úzký mobil (<380 px) — 3 ve sloupci se musí vejít */
@media (max-width: 380px) {
  .pkg-badge-square {
    width: 96px !important;
    height: 96px !important;
  }
  .pkg-badge-icon  { font-size: 40px !important; }
  .pkg-badge-label { font-size: 11px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   APPEK v2.9.32 — Padding ze stran pro vlajky + notifikace (PC)
   ═══════════════════════════════════════════════════════════════════ */

/* PC (> 700 px) — padding 80 px kolem celé skupiny vlajky + 🔔 (v2.9.40) */
@media (min-width: 701px) {
  /* Před vlajkami zleva + mezi vlajkami a 🔔 + za 🔔 — všechno 80 px */
  .topbar-actions .lang-dropdown-wrap {
    margin-left: 80px !important;
    padding-left: 20px !important;
    margin-right: 80px !important;
    padding-right: 20px !important;
    border-left: 1px solid var(--border-2, rgba(0,0,0,0.10)) !important;
  }
  .topbar-actions .btn-notif {
    margin-right: 80px !important;
    padding-right: 20px !important;
    border-right: 1px solid var(--border-2, rgba(0,0,0,0.10)) !important;
  }
}

/* Středně široký mobil / malý tablet (700-1100 px) — kompromis 30 px */
@media (max-width: 1100px) and (min-width: 701px) {
  .topbar-actions .lang-dropdown-wrap {
    margin-left: 30px !important;
    padding-left: 10px !important;
    margin-right: 30px !important;
    padding-right: 10px !important;
  }
  .topbar-actions .btn-notif {
    margin-right: 30px !important;
    padding-right: 10px !important;
  }
}

/* Na mobilu (<= 700 px) NO extra side padding — topbar je úzký */
@media (max-width: 700px) {
  .topbar-actions .lang-dropdown-wrap {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
  }
  .topbar-actions .btn-notif {
    margin-right: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   ✨ APPEK v2.9.46 — FINAL padding pro .lang-dropdown-wrap (PC)
   Tento blok je úplně poslední — vyhraje díky CSS cascade.
   ═════════════════════════════════════════════════════════════════ */

/* PC velký monitor (≥1101 px) — 80 px vzdušnost */
/* v2.9.71 — odstraněn mrtvý @media(min-width:1101px) blok s 80px mezerami
   kolem jazyka/notifikací v topbaru (oživený opravou závorek). */

/* Tablet / menší laptop (701–1100 px) — 50 px kompromis */
@media (min-width: 701px) and (max-width: 1100px) {
  .topbar-actions .lang-dropdown-wrap {
    margin-left: 50px !important;
    margin-right: 50px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
  }
  .topbar-actions .btn-notif {
    margin-left: 0 !important;
    margin-right: 50px !important;
    padding-right: 14px !important;
    border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
  }
}

/* Mobil (≤700 px) — bez paddingu */
@media (max-width: 700px) {
  .topbar-actions .lang-dropdown-wrap {
    margin-left: 0 !important;
    margin-right: 6px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  .topbar-actions .btn-notif {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    border-right: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   ✨ v2.9.56 — Modal close × — křížek ZE DVOU ČAR (matematicky přesný)
   Žádný × glyph (font metrics rozhazují centrování). Místo toho dvě
   absolutně pozicované čáry přes střed → vždy dokonale uprostřed.
   ═════════════════════════════════════════════════════════════════ */

.modal-close,
button.modal-close {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  font-size: 0 !important;            /* skryje HTML „×" obsah */
  line-height: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* Křížek = dvě čáry, každá vycentrovaná přes přesný střed tlačítka */
.modal-close::before,
.modal-close::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 17px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
}
.modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Mobile — menší kolečko, kratší čáry */
@media (max-width: 700px) {
  .modal-close,
  button.modal-close {
    width: 40px !important;
    height: 40px !important;
  }
  .modal-close::before,
  .modal-close::after {
    width: 15px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   🚀 v2.9.53 — HEADER REDESIGN: Aplikace dropdown + facelift
   3 křiklavé barevné piluly (B2B/POS/FP) → 1 čistý dropdown
   ═════════════════════════════════════════════════════════════════ */

/* ─── Aplikace dropdown trigger ──────────────────────────────── */
.tb-apps-wrap {
  position: relative;
  display: inline-block;
}
.tb-apps-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  background: linear-gradient(180deg, #2DA84A 0%, #1F8C3B 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(31,140,59,0.25);
}
.tb-apps-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(31,140,59,0.40);
}
.tb-apps-btn:active { transform: translateY(0); }
.tb-apps-ico { font-size: 15px; line-height: 1; }
.tb-apps-arr {
  font-size: 10px;
  opacity: 0.85;
  transition: transform 0.15s ease;
}
.tb-apps-btn[aria-expanded="true"] .tb-apps-arr { transform: rotate(180deg); }

/* ─── Aplikace dropdown menu ─────────────────────────────────── */
.tb-apps-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--border, #E8E1CF);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.06);
  padding: 8px;
  z-index: 10060;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.tb-apps-menu.show {
  display: flex;
  animation: tbAppsMenuIn 0.16s ease-out;
}
@keyframes tbAppsMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tb-app-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.12s ease;
}
.tb-app-item:hover { background: var(--bg-soft, #FAF6EC); }

.tb-app-ico {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 20px;
  flex-shrink: 0;
}
.tb-app-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.tb-app-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1d1d1f);
}
.tb-app-sub {
  font-size: 11.5px;
  color: var(--text-3, #888);
}
.tb-app-arr {
  font-size: 14px;
  color: var(--text-3, #aaa);
  flex-shrink: 0;
}
.tb-app-item:hover .tb-app-arr { color: var(--primary, #BA7517); }

/* ─── Fullscreen jako jen ikona (text schovaný) ──────────────── */
.btn-fullscreen.tb-icon-only .btn-fs-label {
  display: none !important;
}
.btn-fullscreen.tb-icon-only {
  width: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ─── Dark theme ─────────────────────────────────────────────── */
html.theme-dark .tb-apps-menu,
html.dark .tb-apps-menu {
  background: #1f1f1f;
  border-color: #3a3a3a;
}
html.theme-dark .tb-app-item:hover,
html.dark .tb-app-item:hover { background: #2a2a2a; }
html.theme-dark .tb-app-name,
html.dark .tb-app-name { color: #f5f5f7; }

/* ─── Mobil — Aplikace dropdown ──────────────────────────────── */
@media (max-width: 700px) {
  .tb-apps-btn {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }
  .tb-apps-lbl { display: none; }   /* na mobilu jen 🚀 ikona + šipka */
  .tb-apps-menu {
    min-width: min(280px, calc(100vw - 24px));
    right: -4px;
  }
}

/* ═════════════════════════════════════════════════════════════════
   📱 v2.9.54 — MOBILNÍ HEADER — FINAL bulletproof (přebíjí vše předchozí)
   Jeden kompaktní řádek, nic se nezalamuje, jen ikony.
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Topbar = JEDEN řádek, žádné zalamování */
  .topbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 10px !important;
    row-gap: 0 !important;
    overflow: visible !important;
  }

  /* Datum / „Vítejte" / jméno / role — na mobilu schované
     (datum se zobrazuje v sidebar-logo přes presunoutDatumDleZarizeni) */
  .topbar .topbar-user { display: none !important; }

  /* SEARCH — vyplní střed, kompaktní */
  .topbar .topbar-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    order: 0 !important;
    justify-content: stretch !important;
  }
  .topbar-center .btn-cmdk-trigger {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
  .topbar-center .btn-cmdk-kbd { display: none !important; }
  .topbar-center .btn-cmdk-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* AKCE — kompaktní ikony, žádné zalamování, žádné velké marginy */
  .topbar .topbar-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Aplikace — jen 🚀 ikona (čtverec) */
  .tb-apps-wrap { flex: 0 0 auto !important; }
  .tb-apps-btn {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 10px !important;
  }
  .tb-apps-lbl, .tb-apps-arr { display: none !important; }
  .tb-apps-ico { font-size: 17px !important; }
  /* Apps menu — fixní pozice ať se vejde do viewportu */
  .tb-apps-menu, #tb-apps-menu {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: -4px !important;
    left: auto !important;
    min-width: 0 !important;
    width: min(300px, calc(100vw - 20px)) !important;
  }

  /* Vlajky — kompaktní, bez marginu/borderu */
  .topbar-actions .lang-dropdown-wrap {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  .topbar-actions .lang-trigger {
    height: 40px !important;
    padding: 0 8px !important;
    gap: 3px !important;
  }
  .lang-trigger-code { display: none !important; }   /* jen vlajka, bez "CS" */

  /* Notifikace — kompaktní ikona */
  .topbar-actions .btn-notif {
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Fullscreen — schovaný na mobilu */
  .topbar #fullscreen-btn,
  .topbar .btn-fullscreen { display: none !important; }

  /* Logout — jen ikona ↩ */
  .topbar .btn-logout {
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .topbar .btn-logout .btn-logout-label { display: none !important; }

  /* Update pill — kompaktní (jen ikona) pokud se zobrazí */
  .topbar #update-pill {
    flex: 0 0 auto !important;
    padding: 0 8px !important;
    height: 40px !important;
  }
  .topbar #update-pill #update-pill-text { display: none !important; }
}

/* Velmi úzký mobil (≤380 px) — ještě těsnější */
@media (max-width: 380px) {
  .topbar {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    gap: 4px !important;
    padding: 0 8px !important;
  }
  .topbar-center .btn-cmdk-trigger { height: 38px !important; font-size: 12px !important; }
  .tb-apps-btn,
  .topbar-actions .btn-notif,
  .topbar-actions .lang-trigger,
  .topbar .btn-logout { width: 36px !important; height: 36px !important; }
}

/* ═════════════════════════════════════════════════════════════════
   🔔 v2.9.59 — Notifikace v kroužku + B2B samostatné tlačítko
   ═════════════════════════════════════════════════════════════════ */

/* ─── Notifikace 🔔 — kruhové tlačítko (kroužek) ─────────────── */
.topbar-actions .btn-notif,
#btn-notifications {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--surface-2, #F7F8FA) !important;
  border: 1px solid var(--border, rgba(0,0,0,0.10)) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.topbar-actions .btn-notif:hover,
#btn-notifications:hover {
  background: var(--surface, #fff) !important;
  border-color: var(--primary-border, #FAC775) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px) !important;
}
.topbar-actions .btn-notif .btn-notif-icon,
#btn-notifications .btn-notif-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}
/* Badge v kroužku — pravý horní roh */
.topbar-actions .btn-notif .btn-notif-badge,
#btn-notifications .btn-notif-badge {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
}
/* Stav "má nepřečtené" — barevný kroužek */
.topbar-actions .btn-notif.has-unread,
#btn-notifications.has-unread {
  background: linear-gradient(180deg, #FFF5DC, #FAE3B8) !important;
  border-color: var(--primary, #BA7517) !important;
}

/* ─── B2B — samostatné tlačítko s paddingem ──────────────────── */
.tb-b2b-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  background: linear-gradient(180deg, #2DA84A 0%, #1F8C3B 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(31,140,59,0.25);
  flex-shrink: 0;
}
.tb-b2b-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(31,140,59,0.40);
  color: #fff;
}
.tb-b2b-btn:active { transform: translateY(0); }
.tb-b2b-ico { font-size: 15px; line-height: 1; }
.tb-b2b-arr { font-size: 11px; opacity: 0.85; }

/* Aplikace dropdown — odliš barvou od B2B (modrá) ať nesplývají */
.tb-apps-btn {
  background: linear-gradient(180deg, #5B6CF0 0%, #4F46E5 100%) !important;
  box-shadow: 0 2px 6px rgba(79,70,229,0.25) !important;
}
.tb-apps-btn:hover {
  box-shadow: 0 4px 12px rgba(79,70,229,0.40) !important;
}

/* Konzistentní gapy v topbar-actions */
.topbar-actions {
  gap: 8px !important;
}

/* Mobil — B2B jen ikona (čtverec), gapy menší */
@media (max-width: 700px) {
  .tb-b2b-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
  }
  .tb-b2b-lbl, .tb-b2b-arr { display: none; }
  .tb-b2b-ico { font-size: 17px; }
  .topbar-actions .btn-notif,
  #btn-notifications { width: 38px !important; height: 38px !important; }
}

/* ████████████████████████████████████████████████████████████████████
   🧹 APPEK v2.9.63 — TOPBAR CLEAN — JEDEN finální blok
   Nahrazuje ~24 naskládaných v2.x bloků. Tento je POSLEDNÍ v souboru
   → vyhrává v CSS kaskádě. applyTopbarSpacing JS zrušeno (no-op).
   ████████████████████████████████████████████████████████████████████ */

/* ─── Topbar kontejner ──────────────────────────────────────── */
.topbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--border, #E8E1CF) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  flex-wrap: nowrap !important;
}

/* Levá zóna — datum / svátek / jméno */
.topbar-user {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--text-2, #5F5E5A) !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}

/* Střed — search */
.topbar-center {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  min-width: 0 !important;
}

/* Pravá zóna — akce */
.topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}

/* ─── Vlajky (jazyk) ────────────────────────────────────────── */
.topbar-actions .lang-dropdown-wrap {
  position: relative !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  flex-shrink: 0 !important;
}

/* ─── Notifikace 🔔 — KROUŽEK ───────────────────────────────── */
.topbar-actions .btn-notif,
#btn-notifications {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: var(--surface-2, #F7F8FA) !important;
  border: 1px solid var(--border, #E8E1CF) !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}
.topbar-actions .btn-notif:hover,
#btn-notifications:hover {
  background: #fff !important;
  border-color: var(--primary-border, #FAC775) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px) !important;
}
.topbar-actions .btn-notif .btn-notif-icon,
#btn-notifications .btn-notif-icon { font-size: 18px !important; line-height: 1 !important; }
.topbar-actions .btn-notif .btn-notif-badge,
#btn-notifications .btn-notif-badge {
  position: absolute !important; top: -3px !important; right: -3px !important;
}
.topbar-actions .btn-notif.has-unread,
#btn-notifications.has-unread {
  background: linear-gradient(180deg, #FFF5DC, #FAE3B8) !important;
  border-color: var(--primary, #BA7517) !important;
}

/* ─── B2B — zelené tlačítko ─────────────────────────────────── */
.tb-b2b-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 40px !important;
  padding: 0 16px !important;
  background: linear-gradient(180deg, #2DA84A 0%, #1F8C3B 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(31,140,59,0.25) !important;
}
.tb-b2b-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(31,140,59,0.40) !important; color: #fff !important; }
.tb-b2b-ico { font-size: 15px !important; }
.tb-b2b-arr { font-size: 11px !important; opacity: 0.85 !important; }

/* ─── Aplikace — modré tlačítko ─────────────────────────────── */
.tb-apps-wrap { position: relative !important; display: inline-block !important; flex-shrink: 0 !important; }
.tb-apps-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 40px !important;
  padding: 0 14px !important;
  background: linear-gradient(180deg, #5B6CF0 0%, #4F46E5 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(79,70,229,0.25) !important;
}
.tb-apps-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(79,70,229,0.40) !important; }
.tb-apps-ico { font-size: 15px !important; }
.tb-apps-arr { font-size: 10px !important; opacity: 0.85 !important; }

/* ─── Fullscreen + Logout — ikona/pill ──────────────────────── */
.topbar .btn-fullscreen {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: var(--surface-2, #F7F8FA) !important;
  border: 1px solid var(--border, #E8E1CF) !important;
  flex-shrink: 0 !important;
}
.topbar .btn-fullscreen .btn-fs-label { display: none !important; }
.topbar .btn-logout {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  background: var(--surface-2, #F7F8FA) !important;
  border: 1px solid var(--border, #E8E1CF) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.topbar .btn-logout:hover { background: #FDE3E3 !important; border-color: #E5B5B5 !important; }

/* @keyframes pro update pill (přesunuto z index.html) */
@keyframes pulseUpd {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); box-shadow: 0 4px 14px rgba(34,197,94,0.5); }
}

/* ─── MOBIL ≤700px — kompaktní jeden řádek ──────────────────── */
@media (max-width: 700px) {
  .topbar {
    gap: 8px !important;
    padding: 0 10px !important;
    height: 56px !important;
  }
  .topbar .topbar-user { display: none !important; }     /* datum/jméno → sidebar-logo */
  .topbar .topbar-center { flex: 1 1 auto !important; min-width: 0 !important; }  /* search se klidně smrští */
  .topbar-actions { gap: 16px !important; }               /* 🆕 v2.9.108 — větší mezery mezi ikonami */
  /* Vše jako kompaktní ikony 38×38 */
  .topbar-actions .btn-notif, #btn-notifications,
  .topbar .btn-fullscreen { width: 38px !important; height: 38px !important; }
  /* 🆕 v2.9.106 — košík ukazuje „B2B" i na mobilu (místo pouhé ikony) */
  .tb-b2b-btn {
    width: auto !important; padding: 0 10px !important; gap: 5px !important; justify-content: center !important;
  }
  .tb-b2b-lbl { display: inline-block !important; font-size: 12px !important; font-weight: 700 !important; }
  .tb-b2b-arr { display: none !important; }
  /* 🆕 v2.9.106 — vlajka/jazyk na mobilu SKRYTÁ (přepínání jen na PC + v Nastavení) */
  .topbar .lang-dropdown-wrap { display: none !important; }
  /* 🆕 v2.9.64 — Aplikace dropdown (🚀 raketka) SKRYTÝ na mobilu */
  .tb-apps-wrap, #tb-apps-wrap { display: none !important; }
  .topbar .btn-logout { width: 40px !important; padding: 0 !important; justify-content: center !important; }
  .topbar .btn-logout .btn-logout-label { display: none !important; }
  .topbar .btn-fullscreen { display: none !important; }
  .lang-trigger-code { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   🎯 APPEK v2.9.66 — MODAL CENTERED (canonical, poslední slovo)
   Modal je vždy přesně uprostřed obrazovky — PC, tablet i mobil.
   Ruší konflikt 3 starých bottom-sheet @media bloků (~2814/~7451/~12696),
   které modal na tabletu 701–768 px lepily ke spodní hraně. Tenhle blok
   je POSLEDNÍ v souboru → vyhrává v kaskádě.
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
}
.modal-card {
  margin: auto !important;
  height: auto !important;
  max-height: 92vh !important;
  border-radius: var(--radius-lg) !important;
}
@media (max-width: 700px) {
  .modal-overlay { padding: 12px !important; }
  .modal-card { max-height: 90vh !important; border-radius: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   🎯 APPEK v2.9.244 — Nastavení-taby + filtr odběratelů
   v2.9.244: nastaveni-tabs nyní řízeny unified .seg-tabs blok nahoře
   (DRY tokeny). Zde zůstává jen .odb-typ-pills override (jiný UI prvek).
   ═══════════════════════════════════════════════════════════════ */
.odb-typ-pills {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 8px !important;
  overflow: visible !important;
}
.odb-typ-pill {
  width: auto !important;
  min-width: 0 !important;
  justify-content: center !important;
}
@media (max-width: 700px) {
  .odb-typ-pills  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   📱 APPEK v2.9.76 — MOBILNÍ ROZLOŽENÍ (canonical, poslední slovo)
   Výchozí mobil — pruhy odshora dolů:
     1) hledání  2) logo (firma + svátek)  3) menu tlačítka
     4) špendlík  5) Tvé balíčky  6) obsah
   Princip: main-wrap i sidebar = display:contents → jejich děti se stanou
   přímými grid-items .admin-app a srovnají se přes `order`.
   Připnuté menu (body.sidebar-pinned) = box na boku — toho se to NETÝKÁ.
   🆕 v3.0.105 — REVERT na 700px (v3.0.104 900px rozbil sidebar scroll v range 700-900,
   user: "menu zase nescroluje, co si zapsal s viewportem si něco rozbil") */
@media (max-width: 700px) {
  .main-wrap { display: contents !important; }
  body:not(.sidebar-pinned) .sidebar { display: contents !important; }
  body:not(.sidebar-pinned) .admin-app {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* 🆕 v2.9.82 — datum/svátek je uvnitř „APPEK Demo" banneru (viz níž),
     ne samostatný proužek. Skryj jen nefunkční ikonu kalendáře. */
  #topbar-datum-svatek::before { display: none !important; }

  body:not(.sidebar-pinned) .sidebar-logo      { order: 1 !important; }
  /* 🆕 v3.0.134 — 20px padding pod blok search + pod menu buttony (user request) */
  body:not(.sidebar-pinned) .topbar            { order: 2 !important; margin-bottom: 20px !important; }
  body:not(.sidebar-pinned) .sidebar-nav       { order: 3 !important; padding: 4px 12px !important; box-sizing: border-box !important; margin-bottom: 20px !important; }
  body:not(.sidebar-pinned) .sidebar-utils     { order: 4 !important; margin-top: 0 !important; } /* v3.0.134 — nav už dává 20px margin-bottom, neduplikuj 12px (collapsed pills mód má vyšší specificitu, zůstává 24px) */
  body:not(.sidebar-pinned) .package-subheader,
  body:not(.sidebar-pinned) #package-subheader {
    order: 5 !important;
    /* 🆕 v2.9.84 — oddělovač sekce mezi „Připnout menu" a „Tvé balíčky" */
    border-top: 1px dashed var(--border) !important;
    margin-top: 8px !important;
    padding-top: 12px !important;
  }
  body:not(.sidebar-pinned) .main-content,
  body:not(.sidebar-pinned) main#content       { order: 6 !important; }
  /* 🆕 v3.0.128 — DVA TABY na dashed lince utils.border-top
     User: "udělej dvě ouška, jedno připnout menu a druhý balicky, jako taby
            přilepené na té přerušované lince nad nima. jedno na pravo a
            druhý na levou stěnu".

     Plán:
     - sidebar-utils: tenký proužek s dashed border-top + extra margin-top
       pro místo na tabs nad. position: relative pro pin child.
     - sidebar-pin (uvnitř utils): malý pill TAB vlevo, position: absolute,
       top: 0 (= dashed line), left: 16, translateY(-50%) = STŘED na lince.
     - pkg-subheader-handle (sibling utils v admin-app gridu):
       grid-row: 4/5 overlay s utils (stejná cellka), justify-self: end
       (vpravo), align-self: start, margin-top match utils, translateY(-50%).
       = STŘED na stejné dashed lince. */
  body:not(.sidebar-pinned).pkg-subheader-collapsed .sidebar-utils {
    grid-row: 4 / 5 !important;
    grid-column: 1 / 2 !important;
    position: relative !important;             /* containing block pro absolute pin */
    margin-top: 24px !important;               /* prostor pro tabs nad utils */
    padding: 0 !important;                     /* žádné padding — tenký proužek */
    min-height: 8px !important;                /* jen pro dashed line viditelnost */
    background: transparent !important;
    border-top: 1px dashed var(--border) !important;
    flex: 0 0 auto !important;
  }

  /* 🆕 v3.0.130 — UNIFIED PILL DESIGN (UI/UX Pro Max rules)
     User: "tyhle dve tlacitka udelaj vzhledově stejně, nějak hezky".
     Oba pills (pin LEFT + handle RIGHT) mají IDENTICKOU geometrii/typo/barvy/effects.
     Společné CSS proměnné níže = single source of truth pro oba taby.

     UI/UX rules applied:
     §2 touch-target: výška 32px + padding 14px → hit area ≥44pt
     §4 state-clarity: hover (primary-light bg) ≠ idle ≠ active (scale 0.97)
     §6 weight-hierarchy: 700 bold + letter-spacing 0.6px
     §7 duration-timing: 150ms cubic transitions (transform/opacity only)
     §7 scale-feedback: scale(0.97) on :active = tactile press feedback */
  body:not(.sidebar-pinned).pkg-subheader-collapsed .sidebar-utils > .sidebar-pin,
  body:not(.sidebar-pinned).pkg-subheader-collapsed .pkg-subheader-handle {
    /* Geometry — identická pro oba */
    height: 32px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    /* Typography — identická pro oba */
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    line-height: 1 !important;
    /* Color — token-driven, identická pro oba */
    color: var(--text-2, #5F5E5A) !important;
    background: var(--surface, #FFFFFF) !important;
    border: 1px solid var(--border, rgba(0,0,0,0.08)) !important;
    /* Shadow elevation — subtle, identická pro oba */
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06) !important;
    /* Layout — identická */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    text-align: center !important;
    /* Transition tokens — identická micro-interaction rhythm */
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 5 !important;
  }
  /* Hover state — brand hint (primary tokens) */
  body:not(.sidebar-pinned).pkg-subheader-collapsed .sidebar-utils > .sidebar-pin:hover,
  body:not(.sidebar-pinned).pkg-subheader-collapsed .pkg-subheader-handle:hover {
    border-color: var(--primary-border, #FAC775) !important;
    background: var(--primary-light, #FAEEDA) !important;
    color: var(--primary-dark, #854F0B) !important;
    box-shadow: 0 1px 2px rgba(186,117,23,0.08), 0 6px 16px rgba(186,117,23,0.12) !important;
  }
  /* Active state — tactile press */
  body:not(.sidebar-pinned).pkg-subheader-collapsed .sidebar-utils > .sidebar-pin:active,
  body:not(.sidebar-pinned).pkg-subheader-collapsed .pkg-subheader-handle:active {
    transform: scale(0.97) !important;
  }
  /* PIN TAB pozicování (vlevo) */
  body:not(.sidebar-pinned).pkg-subheader-collapsed .sidebar-utils > .sidebar-pin {
    position: absolute !important;
    top: 0 !important;
    left: 16px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  body:not(.sidebar-pinned).pkg-subheader-collapsed .sidebar-utils > .sidebar-pin:active {
    transform: translateY(-50%) scale(0.97) !important;   /* combine translate + scale */
  }
  /* BALÍČKY TAB pozicování (vpravo, grid-row overlap s utils) */
  body:not(.sidebar-pinned).pkg-subheader-collapsed .pkg-subheader-handle {
    order: 4 !important;
    grid-row: 4 / 5 !important;
    grid-column: 1 / 2 !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 24px 16px 0 0 !important;
    transform: translateY(-50%) !important;
    position: relative !important;
  }
  body:not(.sidebar-pinned).pkg-subheader-collapsed .pkg-subheader-handle:active {
    transform: translateY(-50%) scale(0.97) !important;
  }
  /* Hide ▼ arrow z balíčky pillu — vizuální parita s pin pillem (oba jsou prosté toggles, ne dropdown) */
  body:not(.sidebar-pinned).pkg-subheader-collapsed .pkg-subheader-handle .pkg-handle-arrow {
    display: none !important;
  }

  /* 🆕 v2.9.82 — „APPEK Demo" = širší/vyšší BANNER: logo+firma vlevo,
     datum+svátek vpravo (datum sem připíná JS presunoutDatumDleZarizeni). */
  body:not(.sidebar-pinned) .sidebar-logo {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    /* 🆕 v2.9.93 — větší padding dole pod „APPEK Demo" bannerem */
    padding: 11px 16px 14px !important;
    min-height: 58px !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  body:not(.sidebar-pinned) .sidebar-logo .logo-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
  }
  body:not(.sidebar-pinned) .sidebar-logo strong {
    font-size: 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* datum + svátek = vpravo v banneru, DVOUŘÁDEK (datum / svátek), šedý chip
     🆕 v3.0.73 — User: "valdemar tam přád neni" — parent ořezával text via overflow:hidden
                  + max-width 70%. Změna: content-sized chip + visible overflow. */
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-left: auto !important;
    gap: 1px !important;
    padding: 5px 11px !important;
    width: auto !important;
    min-width: 0 !important;           /* 🆕 bylo 146px — chip se zmenší pokud je málo místa */
    max-width: none !important;        /* 🆕 bylo 70% — nech růst jak potřeba */
    font-size: 10px !important;
    line-height: 1.35 !important;
    background: var(--surface-2) !important;
    border: none !important;
    border-radius: 9px !important;
    color: var(--text-2) !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: visible !important;      /* 🆕 bylo hidden — nech "Valdemar" vidět */
    flex-shrink: 0 !important;
  }
  /* datum = 1. řádek, svátek = 2. řádek (override skrytí .ts-svatek z @media 1280) */
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek .dt-line-datum,
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek .ts-svatek {
    display: block !important;
    white-space: nowrap !important;
  }
  body:not(.sidebar-pinned) .sidebar-logo .topbar-datum-svatek strong { font-weight: 700 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   📱 APPEK v2.9.78 — PŘIPNUTÉ MENU NA MOBILU (canonical)
   Rail fixně vlevo · obsah vpravo v pořadí: hledání → balíčky → stránka.
   Ikony railu: flex rozdělí výšku → VŠECHNY se vejdou na displej.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  body.sidebar-pinned .admin-app {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Rail = fixně vlevo */
  body.sidebar-pinned .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 56px !important;
    height: 100dvh !important;
    z-index: 50 !important;
  }
  /* Obsah vpravo od railu — pořadí: 1) datum 2) balíčky 3) hledání 4) stránka */
  body.sidebar-pinned #topbar-datum-svatek,
  body.sidebar-pinned .topbar,
  body.sidebar-pinned .package-subheader,
  body.sidebar-pinned #package-subheader,
  body.sidebar-pinned .main-content,
  body.sidebar-pinned main#content {
    margin-left: 56px !important;
    width: auto !important;
  }
  body.sidebar-pinned #topbar-datum-svatek { order: 1 !important; }
  body.sidebar-pinned .topbar { order: 2 !important; }
  body.sidebar-pinned .package-subheader,
  body.sidebar-pinned #package-subheader { order: 3 !important; }
  /* 🆕 v3.0.181 — collapsed „🎁 BALÍČKY" handle měl default order:0 → lepil se NA STROP
     (nad topbar/B2B). Order 3 = pod topbar (jako na tabletu). */
  body.sidebar-pinned .pkg-subheader-handle { order: 3 !important; }
  body.sidebar-pinned .main-content,
  body.sidebar-pinned main#content { order: 4 !important; }

  /* ⬇ Vzhled IKON railu řeší samostatný blok „v2.9.94 PŘIPNUTÝ RAIL · IKONY"
     na konci souboru — jediný zdroj pravdy, ať se to neřeší na 5 místech. */
}

/* ═══════════════════════════════════════════════════════════════
   📱 APPEK v2.9.80 — IKONY BALÍČKŮ NA MOBILU (canonical)
   Balíčky = malé ikonky v JEDNÉ řadě, no-wrap (když je jich víc,
   řada se vodorovně roluje). Bez textového popisku.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .topbar-pkg-badges {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .pkg-badge-square {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px !important;
    border-width: 1.5px !important;
    font-size: 26px !important;
    flex-shrink: 0 !important;
  }
  .pkg-badge-icon { font-size: 26px !important; }
  .pkg-badge-label { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   🏷️ APPEK v2.9.82 — PATIČKA (verze + provozní info pro nás)
   ═══════════════════════════════════════════════════════════════ */
.appek-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  padding: 16px 20px;
  /* 🆕 v3.0.158 — sticky-footer: .main-wrap je flex-column min-height:100vh, takže
     margin-top:auto vytlačí patičku vždy na spodek viewportu (na krátkých stránkách
     už nevisí uprostřed). Min mezera nahoře přes border-top + padding. */
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text-3);
}
.appek-footer .af-cell { white-space: nowrap; }
.appek-footer strong { color: var(--text); font-weight: 700; }
.appek-footer .af-link { color: var(--primary-dark, #854F0B); text-decoration: none; font-weight: 600; }
.appek-footer .af-link:hover { text-decoration: underline; }
.appek-footer .af-ok  { color: #15803d; font-weight: 700; }
.appek-footer .af-bad { color: #b91c1c; font-weight: 700; }

@media (max-width: 700px) {
  body:not(.sidebar-pinned) .appek-footer { order: 7 !important; }
  body.sidebar-pinned .appek-footer {
    order: 5 !important;
    margin-left: 56px !important;
    width: auto !important;
  }
  .appek-footer { margin-top: 0; padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   📱 APPEK v2.9.92 — mobil: search ZPĚT bez barvy, namodralé je POLE
   (pruh topbaru) pod datumem+svátkem; aktivní rail = stejná stopa
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* 🆕 v2.9.99 — search pozadí = pozadí STRÁNKY (var(--bg)) → search
     vypadá jako „výřez do stránky"; theme-aware (Apple/Win98/Dark…) */
  .topbar-center .btn-cmdk-trigger {
    background: var(--bg) !important;
    border-color: var(--border) !important;
  }

  /* 🆕 v2.9.99 — topbar VIDITELNÝ + theme-aware: pruh var(--surface-2)
     (ne natvrdo modrá #EEF4FC, ta nešla s themes) + jasně viditelný
     jemný stín → je vidět, ale „nekončí natvrdo". Platí pro obě polohy
     menu (nahoře i na boku). */
  .topbar {
    background: var(--surface-2) !important;
    height: auto !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* ⬇ aktivní ikona railu → samostatný blok „v2.9.94 PŘIPNUTÝ RAIL · IKONY" */
}

/* 🆕 v2.9.90 — Od/Do datumová pole na Objednávkách/DL/Fakturách SKRYTÁ.
   Datumové filtrování řeší horní filtr (Dnes/Týden/Měsíc/Vlastní…).
   Inputy zůstávají v DOM (skryté) — horní filtr je používá jako úložiště. */
.filter-dates-row--off { display: none !important; }

/* 🧹 v3.0.88 cleanup — REMOVED v2.9.94 "PŘIPNUTÝ RAIL · IKONY" block (50px tiles
   s border-bottom + 42px icons + opacity 0.5).
   Nahrazeno canonical v3.0.85+ blokem dále (line ~20023 "Rail mode v3.0.67/87
   KOMPLETNÍ PŘEPIS") který má jiný finální design (48px transparent + gold tint
   active + 28px ikony). v2.9.94 design už neplatí — user "dobrý díky" v3.0.87. */

/* ═══════════════════════════════════════════════════════════════
   🎯 APPEK v2.9.96 — MODAL: VÝŠKA + ROLOVÁNÍ (canonical, poslední slovo)
   ───────────────────────────────────────────────────────────────
   Doplňuje v2.9.66 (centrování). v2.9.66 dal kartě height:auto, jenže
   .modal-body zůstal flex:1 1 0 (basis 0) → v auto-výšce karty se body
   složil na pár px → modal byl „uříznutý" (jen hlavička + proužek
   obsahu) a vypadal posunutý dolů.
   Fix: karta = svislý flex (hlavička fix + body roluje); body má
   flex-basis auto + min-height:0 → karta = hlavička + obsah, nejvýš
   90vh; při přetečení roluje POUZE body, hlavička zůstává nahoře.
   Platí pro VŠECHNA modal okna (celá appka sdílí jeden #modal).
   ═══════════════════════════════════════════════════════════════ */
.modal-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: 90vh !important;   /* fallback pro prohlížeče bez dvh */
  max-height: 90dvh !important;  /* moderní — sleduje viditelnou plochu */
  overflow: hidden !important;   /* roluje jen body, karta drží zaoblení */
}
.modal-head {
  flex: 0 0 auto !important;     /* hlavička fixní nahoře, neroluje, nemizí */
}
.modal-body {
  flex: 1 1 auto !important;     /* basis = obsah; smrští se, až karta narazí na strop */
  min-height: 0 !important;      /* KLÍČOVÉ — povolí smrštění flex-itemu → body roluje */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* ═══════════════════════════════════════════════════════════════
   📱 APPEK v2.9.97 — MODAL NA MOBILU = CELÁ OBRAZOVKA (canonical)
   ───────────────────────────────────────────────────────────────
   Na PC zůstává modal plovoucí vycentrovaný (v2.9.96). Na mobilu
   (≤700px) se roztáhne přes celou obrazovku — velké formuláře
   (nová objednávka / faktura / DL) mají maximum místa.
   Hlavička drží nahoře, body roluje (flex z v2.9.96 platí dál).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .modal-card,
  .modal-card.modal-wide {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;       /* fallback bez dvh */
    max-height: 100vh !important;
    height: 100dvh !important;      /* moderní — sleduje viditelnou plochu */
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   📏 APPEK v2.9.98 — HUSTOTA UI: MENU ROSTE (canonical, poslední slovo)
   ───────────────────────────────────────────────────────────────
   „Prostorné" a „Extrémní" zvětšují menu. Pravidla pro menu sice
   existovala (~ř.10182 / 10368), ale přebíjely je specifičtější
   pravidla menu (v2.9.5 atd. s !important) → menu se nezvětšovalo.
   Tady to přebíjíme zpět: vyšší specificita + !important + konec
   souboru. Výchozí (comfortable) ani Kompaktní se NEMĚNÍ. Připnutý
   rail se taky nemění (úmyslně kompaktní režim ikon).
   ═══════════════════════════════════════════════════════════════ */

/* ── PC sidebar — DENSITY FONT RAMP (v3.0.175) ──────────────────────────
   User: „hustota UI boční menu PC — font se nemění, jen extrém funguje."
   Příčina: jen spacious/extreme měly dedikovaná .sidebar-nav pravidla (vysoká
   specificita → vyhrála), compact/comfortable měly jen .nav-item (ř.11225/11227)
   a na některých breakpointech je přebilo base `.sidebar-nav .nav-item`.
   Fix: všechny 4 úrovně mají dedikované pravidlo + ROVNOMĚRNÝ ramp 12/15/19/23,
   ať je každý krok jasně vidět. */
/* ── KOMPAKTNÍ ─────────────────────────────────────────────────── */
html.density-compact body:not(.sidebar-pinned) .sidebar-nav .nav-item {
  padding: 7px 12px !important;
  font-size: 12px !important;
}
html.density-compact body:not(.sidebar-pinned) .sidebar-nav .nav-icon {
  font-size: 16px !important;
}
/* ── POHODLNÉ (výchozí) ────────────────────────────────────────── */
html.density-comfortable body:not(.sidebar-pinned) .sidebar-nav .nav-item {
  padding: 11px 16px !important;
  font-size: 15px !important;
}
html.density-comfortable body:not(.sidebar-pinned) .sidebar-nav .nav-icon {
  font-size: 20px !important;
}
/* ── PROSTORNÉ ─────────────────────────────────────────────────── */
html.density-spacious body:not(.sidebar-pinned) .sidebar-nav .nav-item {
  padding: 16px 20px !important;
  font-size: 19px !important;
}
html.density-spacious body:not(.sidebar-pinned) .sidebar-nav .nav-icon {
  font-size: 25px !important;
}
/* ── EXTRÉMNÍ ──────────────────────────────────────────────────── */
html.density-extreme body:not(.sidebar-pinned) .sidebar-nav .nav-item {
  padding: 22px 24px !important;
  font-size: 23px !important;
}
html.density-extreme body:not(.sidebar-pinned) .sidebar-nav .nav-icon {
  font-size: 30px !important;
}

/* MOBIL — dlaždice menu (3-sl. grid) rostou do VÝŠKY, ne do šířky.
   🆕 v2.9.100 — selektor MUSÍ obsahovat „aside.sidebar nav.sidebar-nav",
   jinak ho přebije pravidlo v2.9.5 (specificita 0,4,3 > naše 0,4,2)
   → proto extreme předtím s mobilním menu vůbec nehnul.
   min-height (ne height) → nic nepřetéká, dlaždice se roztáhne. */
@media (max-width: 700px) {
  html.density-spacious body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item {
    min-height: 100px !important;
    padding: 14px 5px !important;
    font-size: 15px !important;
  }
  html.density-spacious body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item .nav-icon {
    font-size: 28px !important;
  }
  html.density-extreme body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item {
    min-height: 124px !important;
    padding: 18px 6px !important;
    font-size: 17px !important;
  }
  html.density-extreme body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item .nav-icon {
    font-size: 34px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   📏 APPEK v2.9.100 — HUSTOTA: PC SBALENÉ MENU (jen ikony) ROSTE
   ───────────────────────────────────────────────────────────────
   PC sbalený sidebar = kostičky 62×62 jen s ikonou (bez textu) — výchozí.
   Při Prostorné / Extrémní se ikony i kostičky ještě zvětší a sidebar se
   rozšíří, aby se vešly. Sbalený sidebar je jen na PC (≥701px).
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 701px) {
  /* ── PROSTORNÉ ── */
  html.density-spacious body.sidebar-collapsed .admin-app {
    grid-template-columns: 96px 1fr !important;
  }
  html.density-spacious body.sidebar-collapsed .sidebar { width: 96px !important; }
  html.density-spacious body.sidebar-collapsed .nav-item {
    height: 72px !important;
    min-height: 72px !important;
  }
  html.density-spacious body.sidebar-collapsed .nav-item .nav-icon {
    font-size: 32px !important;
  }
  /* ── EXTRÉMNÍ ── */
  html.density-extreme body.sidebar-collapsed .admin-app {
    grid-template-columns: 112px 1fr !important;
  }
  html.density-extreme body.sidebar-collapsed .sidebar { width: 112px !important; }
  html.density-extreme body.sidebar-collapsed .nav-item {
    height: 84px !important;
    min-height: 84px !important;
  }
  html.density-extreme body.sidebar-collapsed .nav-item .nav-icon {
    font-size: 40px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   🎁 APPEK v2.9.101 — „TVÉ BALÍČKY" SKRYTÉ, KDYŽ NENÍ AKTIVNÍ BALÍČEK
   ───────────────────────────────────────────────────────────────
   Na mobilu pravidlo „FORCE visible" (~ř.16285) drželo subheader
   viditelný i prázdný. Tady ho schováme, když uvnitř není žádná
   .pkg-badge-square (= žádný aktivní balíček). Na PC to už řeší
   pravidlo na ~ř.12211.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  #package-subheader:not(:has(.pkg-badge-square)) {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   📏 APPEK v2.9.101 — EXTRÉMNÍ HUSTOTA: BLOKY POD SEBE NA MOBILU
   ───────────────────────────────────────────────────────────────
   V extrémní hustotě jsou karty tak velké, že 2-sloupcové mřížky
   se na mobilu nevejdou do okna → skládáme je do JEDNOHO sloupce
   (statistické karty + dlaždice rychlých akcí).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  html.density-extreme .stat-grid,
  html.density-extreme .quick-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   🏷️ APPEK v2.9.103 — ŠTÍTKY: ZAROVNANÝ MOBILNÍ LAYOUT
   ───────────────────────────────────────────────────────────────
   1) Režimové taby (Cenovky / Moje / Editor / Expediční) — na mobilu
      🆕 v2.9.106: flex-wrap — tlačítka mají přirozenou šířku a ZALAMUJE
      se ŘÁDEK (div), ne text uvnitř buttonu. Desktopový flex:1 mezerník
      + svislý oddělovač skryté.
   2) Řádek Kopií / Od pozice / 🎨 Design cenovky — desktopová mřížka
      130px 130px 1fr na mobilu přetékala („Design cenovky" uříznuté)
      → Kopií + Od pozice vedle sebe, Design cenovky na vlastní řádek.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* 1) režimové taby = flex-wrap, zalamuje se řádek (ne button) */
  .stitky-rezim-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  /* flex:1 mezerník + svislý oddělovač (desktop-only) pryč */
  .stitky-rezim-tabs > span { display: none !important; }
  .stitky-rezim-tabs .period-tab {
    flex: 0 1 auto !important;   /* přirozená šířka — nezužuje, neroztahuje */
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* 2) 🆕 v2.9.108 — Kopií / Od pozice / Design / Načíst z produktu:
     na mobilu VŠE pod sebou (1 sloupec) → nic nepřetéká vpravo z okna.
     Dřív 1fr 1fr → stepper „Od pozice" + tlačítko se ořezávaly. */
  .st-cfg-grid {
    grid-template-columns: 1fr !important;
  }
  .st-cfg-grid > div {
    min-width: 0 !important;   /* grid item se smrští → žádný „blowout" */
  }
  /* search „Načíst z produktu" — input se smrští, ne 220px napevno */
  #st-vyrobek-search { min-width: 0 !important; }
}

/* ═══ 🔴 v2.9.120 — tečka „doklad upraven po vytvoření" (obj/fa/dl seznamy) ═══ */
.upraveno-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0322d;
  vertical-align: middle;
  margin-left: 5px;
  flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════
   🆕 v2.9.270 — Kategorie surovin editor (3-col grid)
   ═════════════════════════════════════════════════════════════════ */
.kats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}
.kat-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kat-card:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(186,117,23,0.12);
}
.kat-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kat-emoji-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, background 0.15s ease;
}
.kat-emoji-btn:hover {
  background: #FFF8F0;
  transform: scale(1.05);
}
.kat-emoji-btn:active { transform: scale(0.95); }
.kat-card .kat-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 10px;
  height: 40px;
}
.kat-card .kat-kw {
  font-size: 12px;
  line-height: 1.4;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  min-height: 60px;
  resize: vertical;
}
.emoji-pick {
  font-size: 26px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.emoji-pick:hover {
  background: #FFF8F0;
  border-color: var(--primary);
  transform: scale(1.1);
}
.emoji-pick.is-active {
  background: var(--primary-light);
  border-color: var(--primary);
}

/* 🆕 v2.9.282/285 — Dashboard period tabs: full label desktop / short mobile
   FORCE !important + vyšší specificita protože ostatní .seg-tab pravidla
   mohou kolidovat (v2.9.282 fix neúčinkoval kvůli media query order). */
div.seg-tabs.period-tabs-obdobi span.seg-text-short { display: none !important; }
div.seg-tabs.period-tabs-obdobi span.seg-text-full { display: inline !important; }
@media (max-width: 700px) {
  div.seg-tabs.period-tabs-obdobi span.seg-text-full { display: none !important; }
  div.seg-tabs.period-tabs-obdobi span.seg-text-short { display: inline !important; }
}

/* Mobile — 2 col then 1 col */
@media (max-width: 768px) {
  .kats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .kats-grid { grid-template-columns: 1fr; }
}

/* 🆕 v2.9.270 — Provoz widget tiles (Dashboard restaurace) */
.provoz-tile:hover {
  background: rgba(255,255,255,0.08) !important;
  transform: translateY(-1px);
}
.provoz-tile:active { transform: translateY(0); }

/* 🆕 v2.9.273 — Sklady karta klikací (celá karta = otevřít detail skladu) */
.sklad-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.sklad-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(186,117,23,0.12), 0 0 0 1px rgba(186,117,23,0.06);
  transform: translateY(-2px);
}
.sklad-card:hover .sklad-card-arrow {
  transform: translateX(4px);
  color: var(--primary);
}
.sklad-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(186,117,23,0.08);
}
.sklad-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.sklad-card.is-inactive:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}
.sklad-card.is-inactive .sklad-card-arrow { display: none; }

/* 🆕 v2.9.277 — Porovnání skladů pivot tabulka mobile responsive */
.porov-table-wrap {
  scrollbar-width: thin;
}
.porov-table-wrap::-webkit-scrollbar {
  height: 8px;
}
.porov-table-wrap::-webkit-scrollbar-track {
  background: var(--surface-2);
  border-radius: 4px;
}
.porov-table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}
.porov-table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}
@media (max-width: 768px) {
  .porov-table { font-size: 12px !important; }
  .porov-table th,
  .porov-table td { padding: 6px 8px !important; }
  .porov-table th { font-size: 10px !important; }
  .porov-scroll-hint { animation: porov-pulse 2s ease-in-out infinite; }
}
@keyframes porov-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* 🎨 v3.0.21 — Floor plan tile animace */
.rt-table-tile:hover:not(.is-edit) {
  transform: scale(1.04) translateY(-2px);
  z-index: 10;
}
.rt-table-tile.is-pulsing {
  animation: rt-tile-pulse 3s ease-in-out infinite;
}
@keyframes rt-tile-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(234,88,12,0.32), 0 1px 0 rgba(255,255,255,0.7) inset, 0 -4px 8px rgba(0,0,0,0.06) inset; }
  50%      { box-shadow: 0 6px 18px rgba(234,88,12,0.45), 0 0 0 8px rgba(234,88,12,0.06), 0 1px 0 rgba(255,255,255,0.7) inset, 0 -4px 8px rgba(0,0,0,0.06) inset; }
}

/* 🆕 v3.0.40 — Modern 2026 tile polish: subtle surface texture + premium hover */
.rt-tile-modern {
  position: relative;
  overflow: hidden;
}
/* Subtle "table surface" overlay — top highlight + bottom shadow simulating real tabletop */
.rt-tile-modern::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 90%, rgba(0,0,0,0.08) 0%, transparent 50%);
  mix-blend-mode: overlay;
  opacity: 0.7;
}
/* Subtle inner ring (suggests rim/edge of table) */
.rt-tile-modern::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.rt-tile-round::before {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.5) 0%, transparent 45%),
    radial-gradient(circle at 65% 75%, rgba(0,0,0,0.1) 0%, transparent 45%);
}
.rt-tile-modern:hover:not(.is-edit) {
  transform: translateY(-3px) scale(1.03);
  filter: saturate(1.08);
  z-index: 10;
}
.rt-tile-modern:active {
  transform: translateY(-1px) scale(1.01);
  transition: transform 0.06s ease;
}
/* Decorative tiles (stromky/parkety/fontany) — bez interakce, jen vizuální */
.rt-decor {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.rt-decor::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25) 0%, transparent 60%);
}
@keyframes rt-status-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(234,88,12,0.7); }
  50%      { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(234,88,12,0); }
}

/* 🎨 v3.0.24 — Tile delete button jen na hover (méně vizuálního šumu) */
.rt-table-tile:hover .rt-tile-del,
.rt-tile-del:hover { opacity: 1 !important; }

/* Touch devices: vždy zobraz (no hover) */
@media (hover: none) {
  .rt-tile-del { opacity: 1 !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   📱 v3.0.28 — MOBILE SAFETY NET (sidebar-pinned + small viewports)
   Cíl: žádné karty nepřesáhnou viewport. Globálně + per-component fixy.
   ════════════════════════════════════════════════════════════════════════════ */

/* Globální safety — nikdy nikdy horizontální scroll na <body> */
@media (max-width: 700px) {
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* Main content musí umět shrinknout pod své child elementy */
  main#content, .main-content, .main-wrap { min-width: 0; max-width: 100%; }

  /* Page head — buttony nesmí přetékat */
  .page-head { flex-wrap: wrap !important; gap: 8px !important; }
  .page-head > div { min-width: 0 !important; max-width: 100% !important; }
  .page-head .btn-primary, .page-head .btn-secondary, .page-head .btn-back {
    font-size: 13px !important;
    padding: 8px 12px !important;
    flex-shrink: 0;
  }

  /* Filters bar — wrap aggressively */
  .filters { flex-wrap: wrap !important; gap: 6px !important; }
  .filters .filter-input, .filters .filter-select {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Stat grid — single column na úzkém viewportu (kromě dashboard který je 2×2) */
  /* 🆕 v3.0.129 — :not(.stat-grid-dash) aby dashboard pravidlo (2 cols) neztratilo souboj o source order */
  /* 🆕 v3.0.138 — .stat-grid-2col vyloučen z 1-sloupce → na mobilu 2×2 (user: "4 řady dej do 2") */
  .stat-grid:not(.stat-grid-dash):not(.stat-grid-2col) { grid-template-columns: 1fr !important; gap: 10px !important; }
  .stat-grid.stat-grid-2col { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* Card-block — žádný overflow přes okraje */
  .card-block { max-width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Tables — wrapper s horizontal scroll (ne overflow z body) */
  .table { font-size: 12px; }
  .table th, .table td { padding: 8px 6px !important; }

  /* Grid layouts s minmax(260px,1fr) → shrink to 1 column */
  [style*="minmax(260px"], [style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="minmax(220px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Hero cards v Restaurace → 2-col grid na mobilu */
  [style*="minmax(220px,1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

/* Sidebar-pinned rail = ještě užší viewport pro content */
@media (max-width: 700px) {
  body.sidebar-pinned main#content,
  body.sidebar-pinned .main-content {
    /* Rail 56px + safety padding */
    max-width: calc(100vw - 56px) !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important;
    overflow-x: hidden !important;
  }
  /* Modal nesmí přesáhnout viewport */
  body.sidebar-pinned .modal-content, .modal-content {
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto !important;
  }
  /* Hero karty (Restaurace) — single column na phone, scrollable horizontally na narrow */
  body.sidebar-pinned [style*="minmax(220px,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* Ultra-narrow phones (iPhone SE, malé Androidy) */
@media (max-width: 380px) {
  .page-title { font-size: 18px !important; }
  .page-sub { font-size: 12px !important; }
  .btn-primary, .btn-secondary { font-size: 12px !important; padding: 7px 10px !important; }
  .stat-card { padding: 12px !important; }
  .stat-value { font-size: 22px !important; }
  /* Sidebar rail menší aby zbylo víc pro content */
  body.sidebar-pinned .sidebar { width: 48px !important; }
  body.sidebar-pinned main#content, body.sidebar-pinned .main-content {
    max-width: calc(100vw - 48px) !important;
    padding: 10px 8px !important;
  }
}

/* Touch-friendly minimums (44px target) */
@media (hover: none) and (pointer: coarse) {
  button:not(.pos-tab-h), .btn-primary, .btn-secondary, .btn-back,
  .nav-item, input[type="checkbox"], input[type="radio"] {
    min-height: 40px;
  }
  /* Pro tabulkové akce zachovat smaller */
  td button, th button { min-height: 32px !important; }
}

/* Horizontal scroll wrapper pro long content (tabs, chips) */
.h-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  display: flex;
  gap: 6px;
}
.h-scroll::-webkit-scrollbar { height: 4px; }
.h-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; }

/* ════════════════════════════════════════════════════════════════════════════
   💻 v3.0.30 — MACBOOK 13 (1280-1440px) — kompaktnější layout
   Cíl: data se nelámou, vše vidět bez horizontálního scrollu.
   ════════════════════════════════════════════════════════════════════════════ */

/* Mid-narrow (1100-1366px) — typický MacBook 13 */
@media (min-width: 1024px) and (max-width: 1366px) {
  /* Sidebar užší — 240px (z 280) → +40px pro content
     🆕 v3.0.101 — body:not() (třída je na BODY ne .admin-app, jinak rule platí pořád = collapsed grid nesedí) */
  body:not(.sidebar-collapsed) .admin-app { grid-template-columns: 240px 1fr !important; }
  .sidebar { padding: 16px 10px !important; }
  .sidebar-logo { padding: 0 8px 16px !important; }
  .sidebar-logo strong { font-size: 14px !important; }
  .nav-item { font-size: 13px !important; padding: 8px 10px !important; }
  .nav-icon { font-size: 16px !important; }

  /* Main content — tightnut padding */
  .main-content { padding: 20px 22px !important; max-width: none !important; }
  .page-head { margin-bottom: 14px !important; }
  .page-title { font-size: 22px !important; }
  .page-sub { font-size: 12px !important; }

  /* Cards/grids — kompaktnější gaps */
  .stat-grid { gap: 10px !important; }
  .stat-card { padding: 14px 16px !important; }
  .stat-value { font-size: 24px !important; }

  /* Tables — menší font + padding pro fit */
  .table { font-size: 13px; }
  .table th, .table td { padding: 8px 10px !important; }

  /* Filters — wrap krásně do řádku */
  .filters { gap: 8px !important; }
  .filters .filter-input { min-width: 180px; }
}

/* MacBook 13 Air (1280×800) — ještě užší */
@media (min-width: 1024px) and (max-width: 1280px) {
  /* Hero karty 2 sloupce místo 4 (place 220px minmax) */
  [style*="minmax(220px,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Restaurace Provoz hub cards: 2-col na 1280 */
  .provoz-tile { padding: 10px 12px !important; }
  .provoz-tile strong { font-size: 20px !important; }

  /* Tabs — menší padding (více se vejde do řady) */
  .nastaveni-tab { padding: 8px 12px !important; font-size: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   🎈 v3.0.32 — FLUID RESPONSIVE SYSTEM (balónek, který obepíná obrazovku)
   Místo fixních breakpoints → clamp() pro plynulé škálování.
   Aplikace se sama nafoukne nebo splaskne podle viewportu.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Fluid size system — clamp(min, fluid via vw, max) */
  /* 🆕 v3.0.35 — Lift fluid mins (uživatelská zpětná vazba: "menu se zmenšilo")
     Zachovává fluid škálování, ale "default" velikost je větší — ne pod žádnou hodnotou */
  --fl-sidebar:    clamp(220px, 18vw, 300px);    /* min 220 (čitelné), max 300 */
  --fl-content-px: clamp(14px, 2.4vw, 36px);     /* main padding horizontal */
  --fl-content-py: clamp(14px, 2.2vw, 30px);     /* main padding vertical */
  --fl-card-px:    clamp(14px, 2vw, 26px);       /* card padding */
  --fl-card-py:    clamp(14px, 1.8vw, 24px);
  --fl-gap-sm:     clamp(8px, 0.9vw, 14px);
  --fl-gap-md:     clamp(12px, 1.4vw, 20px);
  --fl-gap-lg:     clamp(16px, 2vw, 28px);
  --fl-h1:         clamp(20px, 2.4vw, 30px);     /* page title — větší */
  --fl-h2:         clamp(17px, 1.8vw, 22px);
  --fl-h3:         clamp(15px, 1.5vw, 18px);
  --fl-body:       clamp(14px, 1.1vw, 16px);     /* body — čitelnější */
  --fl-small:      clamp(12px, 0.95vw, 14px);    /* small */
  --fl-stat-num:   clamp(22px, 2.6vw, 34px);
  --fl-btn-pad:    clamp(10px, 1.1vw, 14px);
  --fl-btn-px:     clamp(14px, 1.6vw, 22px);
  --fl-radius:     clamp(10px, 0.9vw, 14px);
  /* Sidebar-specific tokens */
  --fl-nav-fz:     clamp(13px, 1.15vw, 15px);    /* nav-item font */
  --fl-nav-pad:    clamp(9px, 1vw, 12px);        /* nav-item padding */
  --fl-nav-icon:   clamp(16px, 1.4vw, 19px);     /* nav icon font */
  --fl-logo-text:  clamp(14px, 1.25vw, 17px);    /* sidebar logo strong */
  --fl-logo-icon:  clamp(38px, 3.4vw, 46px);     /* sidebar logo icon */
}

/* === Body & global resets pro fluid layout === */
/* 🐛 v3.0.49 — odstraněno redundantní overflow-x (už je nahoře s !important).
   Necháváme jen font-size override pro fluid body text. */
body { font-size: var(--fl-body); }

/* === Admin app grid fluid === */
/* 🆕 v3.0.103 — body:not() (třída je na BODY ne .admin-app) — jinak selector vždy true */
body:not(.sidebar-pinned):not(.sidebar-collapsed) .admin-app {
  grid-template-columns: var(--fl-sidebar) 1fr;
}

/* === Sidebar fluid (v3.0.35 — větší defaults) === */
.sidebar { padding: clamp(14px, 1.8vw, 22px) clamp(8px, 1.1vw, 14px); }
.sidebar-logo { padding: 0 clamp(8px, 1vw, 14px) clamp(14px, 1.6vw, 22px); gap: clamp(8px, 0.9vw, 12px); }
.sidebar-logo .logo-icon {
  width: var(--fl-logo-icon);
  height: var(--fl-logo-icon);
  font-size: clamp(15px, 1.5vw, 19px);
}
.sidebar-logo strong { font-size: var(--fl-logo-text); }
.nav-item {
  padding: var(--fl-nav-pad) clamp(10px, 1.1vw, 14px);
  font-size: var(--fl-nav-fz);
  gap: clamp(8px, 0.9vw, 12px);
  font-weight: 600;
}
.nav-icon { font-size: var(--fl-nav-icon); }

/* === Main content fluid === */
.main-content {
  padding: var(--fl-content-py) var(--fl-content-px);
  max-width: min(100vw, 1600px); /* fluid cap, ne tvrdé 1400 */
}
main#content { padding: var(--fl-content-py) var(--fl-content-px); }

/* === Page head fluid === */
.page-head {
  margin-bottom: var(--fl-gap-md);
  gap: var(--fl-gap-sm);
  flex-wrap: wrap;
}
.page-title { font-size: var(--fl-h1); letter-spacing: -0.01em; }
.page-sub { font-size: var(--fl-small); }

/* === Card-block fluid === */
.card-block {
  padding: var(--fl-card-py) var(--fl-card-px);
  border-radius: var(--fl-radius);
  margin-bottom: var(--fl-gap-md);
}

/* === Stat grid — fluid auto-fit === */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--fl-gap-sm);
  margin-bottom: var(--fl-gap-md);
}
.stat-card {
  padding: clamp(10px, 1.4vw, 18px) clamp(12px, 1.6vw, 20px);
  border-radius: var(--fl-radius);
}
.stat-label { font-size: var(--fl-small); }
.stat-value { font-size: var(--fl-stat-num); font-weight: 800; }

/* === Buttons fluid === */
.btn-primary, .btn-secondary {
  padding: var(--fl-btn-pad) var(--fl-btn-px);
  font-size: var(--fl-small);
  border-radius: var(--fl-radius);
  white-space: nowrap;
}
.btn-back { padding: var(--fl-btn-pad) var(--fl-btn-px); font-size: var(--fl-small); }

/* === Tables fluid === */
.table { font-size: var(--fl-small); }
.table th, .table td {
  padding: clamp(7px, 0.9vw, 11px) clamp(6px, 0.9vw, 12px);
}

/* === Filters fluid === */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-gap-sm);
}
.filter-input, .filter-select {
  flex: 1 1 min(100%, 200px);
  padding: var(--fl-btn-pad) clamp(10px, 1.3vw, 16px);
  font-size: var(--fl-small);
  border-radius: var(--fl-radius);
}

/* === Universal grid auto-fit pattern (přepíše inline minmax) === */
[data-fluid-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gmin, 220px)), 1fr));
  gap: var(--fl-gap-md);
}

/* === Modals fluid === */
.modal-content {
  padding: var(--fl-card-py) var(--fl-card-px);
  max-width: min(92vw, 720px);
  margin: clamp(20px, 4vh, 60px) auto;
  border-radius: var(--fl-radius);
}

/* === Nastaveni tabs fluid === */
.nastaveni-tab {
  padding: clamp(7px, 0.95vw, 10px) clamp(10px, 1.3vw, 16px);
  font-size: var(--fl-small);
  border-radius: var(--fl-radius);
}
.nastaveni-tabs {
  gap: clamp(4px, 0.6vw, 8px);
  margin-bottom: var(--fl-gap-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* === Sidebar pinned mobile — fluid rail === */
@media (max-width: 700px) {
  body.sidebar-pinned .sidebar { width: clamp(44px, 14vw, 56px) !important; }
  body.sidebar-pinned main#content,
  body.sidebar-pinned .main-content {
    margin-left: clamp(44px, 14vw, 56px) !important;
    max-width: calc(100vw - clamp(44px, 14vw, 56px)) !important;
    padding: var(--fl-content-py) var(--fl-content-px) !important;
  }
}

/* === Container queries fallback (postupné nasazení per komponentu) === */
@supports (container-type: inline-size) {
  .main-content { container-type: inline-size; container-name: main; }
}

/* === Cleanup: některé tvrdé !important pravidla z předchozích vrstev === */
@media (min-width: 1024px) and (max-width: 1366px) {
  /* v3.0.30 MacBook 13 override je teď zbytečný — fluid clamp řeší
     🆕 v3.0.101 — body:not() (třída je na BODY ne .admin-app) */
  body:not(.sidebar-collapsed) .admin-app {
    grid-template-columns: var(--fl-sidebar) 1fr !important;
  }
}

/* 🎨 v3.0.33 — Table action modal: skryj text labelů na úzkém viewportu */
@media (max-width: 480px) {
  .rt-modal-act-lbl { display: none; }
}

/* ═════════════════════════════════════════════════════════════════
   📱 v3.0.61 — 3 mobile fixy (user feedback k v3.0.60):
   1. Pin v rail módu zakrytý bottom-nav → padding-bottom na sidebar
   2. Unpinned: nav buttony nestrečnou celou výšku → grid-auto-rows: 1fr + min-height na sidebar
   3. Připnout button přes celé okraje → margin-inline + max-width
   ═════════════════════════════════════════════════════════════════ */

/* === Rail mode (pinned) — v3.0.67 KOMPLETNÍ PŘEPIS ===
   🆕 v3.0.67 — User: "chci to menu jak bylo ne oválky! mobil boční menu jak bylo
                       ikony a pod nimi špendlík!"
   Pin teď v NATURAL flow POD ikonami (ne floating gold pill).
   Sidebar height calc(100dvh - 76px) = stop nad bottom-nav (72 + 4px gap).
   Sidebar-utils s pinem = vždy viditelný protože sidebar nepřesahuje pod bottom-nav. */
@media (max-width: 1100px) {
  /* Rail sidebar — dojed PŘESNĚ k bottom-nav (žádný gap)
     🆕 v3.0.71 — User: "tohle dojed dolu, ale špendlík nej kde je, jen ten přechod
                  at tam neni." Bottom: 72px = výška bottom-nav, žádný 4px gap. */
  /* 🆕 v3.0.87 — V pinned mode bottom-nav ZMIZÍ (pin v rail nahradí bottom-nav) */
  body.sidebar-pinned .bottom-nav,
  body.sidebar-pinned .bottom-nav-grid,
  body.sidebar-pinned nav.bottom-nav {
    display: none !important;
  }
  body.sidebar-pinned .main-wrap,
  body.sidebar-pinned main#content,
  body.sidebar-pinned .main-content {
    padding-bottom: 0 !important;
  }
  body.sidebar-pinned .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;           /* 🆕 v3.0.87 — až dolů (bottom-nav je hidden) */
    height: 100dvh !important;      /* full viewport height */
    width: 56px !important;
    padding: 6px 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
    /* 🆕 v3.0.86 — SOLID background přes celý rail (user: "prosvítá text nad pinem a vedle loga") */
    background: var(--surface, #fff) !important;
    opacity: 1 !important;
    isolation: isolate !important;
  }
  body.sidebar-pinned .sidebar-logo {
    flex: 0 0 auto !important;
    background: var(--surface, #fff) !important;
    position: relative !important;
    z-index: 2 !important;
  }
  /* Nav uprostřed — scrollable */
  body.sidebar-pinned .sidebar-nav {
    flex: 0 0 auto !important;           /* 🆕 v3.0.81 — nav natural size, neroste */
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: stretch !important;
    padding: 4px 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* 🆕 v3.0.69 — POLISH (user: "tohle srovnej, udělej krásný. button efekt pod A
                   smaž, zvětši ikony, dole nedojetý přechod u špendlíku")
     Nav-items v railu = TRANSPARENT (žádné bílé pill backgroundy + border-bottom),
     ikony 28px (větší), active = subtle gold tint, pin area = elegantní fade. */
  body.sidebar-pinned .sidebar-nav .nav-item {
    flex: 0 0 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;          /* žádný bílý pill */
    box-shadow: none !important;
    font-size: 0 !important;
    transition: background 0.18s ease !important;
  }
  /* Aktivní item = subtle gold tint na celé dlaždici + ikona plně sytá */
  body.sidebar-pinned .sidebar-nav .nav-item.active {
    background: linear-gradient(90deg, rgba(186,117,23,0.12) 0%, rgba(186,117,23,0.04) 100%) !important;
    box-shadow: inset 3px 0 0 var(--primary, #BA7517) !important;
  }
  body.sidebar-pinned .sidebar-nav .nav-item:hover:not(.active) {
    background: rgba(0,0,0,0.035) !important;
  }
  /* Ikony — větší, ztlumené, na aktivní plně syté */
  body.sidebar-pinned .sidebar-nav .nav-item .nav-icon {
    font-size: 28px !important;                  /* zvětšeno z 22px */
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    opacity: 0.55 !important;
    transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: block !important;
  }
  body.sidebar-pinned .sidebar-nav .nav-item.active .nav-icon {
    opacity: 1 !important;
    transform: scale(1.08) !important;
    filter: drop-shadow(0 2px 4px rgba(186,117,23,0.35)) !important;
  }
  body.sidebar-pinned .sidebar-nav .nav-item:hover:not(.active) .nav-icon {
    opacity: 0.85 !important;
  }

  /* === ŠPENDLÍK V RAIL — KRÉMOVÁ DLAŽDICE s 📌 nahoře + "Připnuto" pod
     🆕 v3.0.82 — User nákres: vertikální tile s ikonou + textem, pozice DOLE
     v rail (nad bottom-nav), samostatná oddělená dlaždice s dashed border nad. */
  body.sidebar-pinned .sidebar-utils {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;    /* sloupec: dashed line + pin */
    justify-content: flex-end !important; /* pin DOLE */
    align-items: center !important;
    flex: 1 1 auto !important;
    padding: 0 4px 0 !important;          /* 🆕 v3.0.87 — žádný padding-bottom (pin lepí na bottom-nav) */
    margin-top: 0 !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 5 !important;
  }
  /* Čárkovaná čára TĚSNĚ NAD PINEM */
  body.sidebar-pinned .sidebar-utils::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 0 !important;
    border-top: 1px dashed var(--border, #d0c8b5) !important;
    margin: 0 auto 8px !important;
    flex: 0 0 auto !important;
  }
  /* 🆕 v3.0.89 — User: "krémovou smaž, dej transparent" — pin bez rámečku/pozadí */
  body.sidebar-pinned .sidebar-pin {
    position: static !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;    /* IKONA NAHOŘE, TEXT POD */
    width: 44px !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 56px !important;
    padding: 6px 4px 5px !important;
    margin: 8px 0 0 !important;
    background: none !important;          /* 🆕 v3.0.89 — transparent (user) */
    border-color: transparent !important; /* 🆕 v3.0.89 */
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;               /* 🆕 v3.0.89 — bílý text */
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    cursor: pointer !important;
  }
  body.sidebar-pinned .sidebar-pin:hover {
    background: rgba(255,255,255,0.08) !important;   /* jemný hover */
  }
  body.sidebar-pinned .sidebar-pin .sidebar-pin-icon {
    font-size: 20px !important;
    line-height: 1 !important;
    transform: rotate(-15deg);
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));  /* shadow aby ikona vyniklа na transparent */
  }
  /* "Připnuto" label POD ikonou */
  body.sidebar-pinned .sidebar-pin .sidebar-pin-label-on {
    display: block !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
    color: #fff !important;                /* 🆕 v3.0.89 — bílý */
    text-shadow: 0 1px 2px rgba(0,0,0,0.35); /* readability na transparent bg */
    text-align: center !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
  body.sidebar-pinned .sidebar-pin .sidebar-pin-label-off {
    display: none !important;
  }
  /* Fallback */
  body:not(.sidebar-pinned) .sidebar-pin .sidebar-pin-label-on {
    display: none !important;
  }

  /* Nav od shora dolů — žádné border, čisté */
  body.sidebar-pinned .sidebar-nav .nav-item {
    border: 0 !important;
    border-bottom: 0 !important;
  }
  body.sidebar-pinned .sidebar-logo {
    padding: 8px 4px 8px !important;
    border-bottom: 0 !important;
  }
  body.sidebar-pinned .sidebar-logo::after { display: none !important; }
  body.sidebar-pinned .sidebar-logo .logo-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
}

/* === Bottom-nav grid REVERT na 5 sloupců (v3.0.75 — pin pryč z bottom-nav) === */
.bottom-nav-grid {
  grid-template-columns: repeat(5, 1fr) !important;
}

/* === REVERTED v3.0.65: nav buttons full-height stretching ===
   User: "pořád jsou ty buttony hrozně vysoké na mobilu dej je jak byly. a nejde scrolovat."
   v3.0.61 fix dělal sidebar min-height: calc(100dvh - 56px) → sidebar zabíral celou
   obrazovku, content až pod ním → muselo se scrollovat 100dvh než user viděl obsah.
   REVERT na auto-height sidebar + original 64px buttony. */
@media (max-width: 700px) {
  body:not(.sidebar-pinned) .sidebar {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 12px !important;
  }
  body:not(.sidebar-pinned) .sidebar-nav {
    grid-auto-rows: auto !important;
    flex: none !important;
    align-content: start !important;
  }
  body:not(.sidebar-pinned) .sidebar-nav .nav-item {
    min-height: 64px !important;
    height: auto !important;
    flex: none !important;
    font-size: 14px !important;
  }
  body:not(.sidebar-pinned) .sidebar-nav .nav-item .nav-icon {
    font-size: 20px !important;
  }
  /* Scroll fix: garantuj vertical scroll na body/html */
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
  }
  /* Padding-bottom na main-content aby content nebyl zakryt bottom-nav (72px) ANI plovoucím
     FABem (bottom:88px + 56px = do 144px). v3.0.320: 88px → 150px, jinak poslední karty
     (např. "Akce vyžadující pozornost") mizely pod FABem. Sesterské pravidlo v
     @media(max-width:768px) pokrývá pásmo 701-768. + safe-area iOS. */
  .main-content, main#content {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* === FIX #3: Pin "Připnout menu" button — gaps po stranách ===
   User: "připnout button ne úlně do okrajů ten button vycentrovat a dát gapy po stranách"
   Margin-inline 16px + max-width tak aby tlačítko nevypadalo přitisknuté k okrajům. */
@media (max-width: 700px) {
  body:not(.sidebar-pinned) .sidebar-utils {
    padding-inline: 16px !important;  /* gap od okraje sidebar contaneru */
    padding-block: 14px 10px !important;
    flex: 0 0 auto !important;
  }
  body:not(.sidebar-pinned) .sidebar-pin {
    width: auto !important;            /* zruš 100% width */
    max-width: 100% !important;
    margin-inline: 0 !important;
    border-radius: 12px !important;
    justify-content: center !important;  /* centruj obsah */
    gap: 8px !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   🧹 v3.0.95 ROLLBACK — VŠECHNY PC sidebar/menu/density modifikace
   zakomentované per user: "vrat PC menu jak bylo. mobil zakomentuj nesahat.
   na pc to oprav jak to má být".

   Zakomentované bloky (původně lines 20223-20401):
   - v3.0.82 — DESKTOP RAIL sidebar-pinned >1101px full-flex
   - v3.0.86 — DEFENZIVNÍ NON-PINNED full-flex desktop
   - v3.0.91 — DENSITY-AWARE EXCEPTION Spacious/Extreme
   - v3.0.93 — NUCLEAR DENSITY OVERRIDE specificity (0,5,3)
   - v3.0.94 — PIN + SIDEBAR-UTILS HIDE na desktopu

   Důvod: každá density vypadala jinak, kombinace 5 layered fixů kolidovalo.
   Návrat na stav PŘED v3.0.82 = původní rules (line 244, 249, 272, 277-282,
   287-291, 11251 atd.) řídí PC sidebar samy.

   MOBILE bloky (v3.0.85+ pin, v3.0.67 rail @max-width:1100px) ZACHOVÁNY —
   nesahat dokud user neřekne.

   Pokud user chce vrátit, uncomment.
   ═════════════════════════════════════════════════════════════════ */
/*
@media (min-width: 1101px) {
  body.sidebar-pinned .sidebar > .sidebar-nav,
  body.sidebar-pinned .sidebar-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  body.sidebar-pinned .sidebar-nav .nav-item {
    flex: 1 1 0 !important;
    min-height: 32px !important;
    max-height: 64px !important;
    height: auto !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  body.sidebar-pinned .sidebar-nav .nav-item .nav-icon {
    font-size: 16px !important;
  }
}

@media (min-width: 701px) {
  body:not(.sidebar-pinned) .sidebar {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  body:not(.sidebar-pinned) .sidebar > .sidebar-logo {
    flex: 0 0 auto !important;
  }
  body:not(.sidebar-pinned) .sidebar > .sidebar-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    justify-content: stretch !important;
  }
  body:not(.sidebar-pinned) .sidebar-nav > .nav-item {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }
  body:not(.sidebar-pinned) .sidebar > .sidebar-utils {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    position: static !important;
  }
}

@media (min-width: 701px) {
  html.density-spacious body:not(.sidebar-pinned) .sidebar > .sidebar-nav,
  html.density-extreme body:not(.sidebar-pinned) .sidebar > .sidebar-nav {
    overflow-y: auto !important;
    justify-content: flex-start !important;
  }
  html.density-spacious body:not(.sidebar-pinned) .sidebar-nav > .nav-item,
  html.density-extreme body:not(.sidebar-pinned) .sidebar-nav > .nav-item {
    flex: 0 0 auto !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }
}

html.density-extreme body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-height: 84px !important;
  max-height: none !important;
  height: auto !important;
  padding: 26px 26px !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
}
html.density-extreme body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item .nav-icon {
  font-size: 30px !important;
}
html.density-spacious body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-height: 68px !important;
  max-height: none !important;
  height: auto !important;
  padding: 20px 22px !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
}
html.density-spacious body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item .nav-icon {
  font-size: 26px !important;
}
html.density-compact body:not(.sidebar-pinned) aside.sidebar nav.sidebar-nav .nav-item {
  display: flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
}

@media (max-height: 800px) {
  html.density-extreme body:not(.sidebar-pinned) .sidebar-nav .nav-item,
  html.density-spacious body:not(.sidebar-pinned) .sidebar-nav .nav-item {
    min-height: 68px !important;
    padding: 20px 22px !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
}

@media (min-width: 701px) {
  .sidebar-utils,
  .sidebar-pin,
  .sidebar-collapse {
    display: none !important;
  }
}
*/

/* ═════════════════════════════════════════════════════════════════
   🆕 v3.0.84 — ADMIN FLOOR-CANVAS AUTO-FIT v2 (per architecture-critic redo)
   Předchozí v3.0.83 (stepped ladder) měl 3 fatal bugs:
     1. transform: scale() nezmenší layout box → mezera pod canvasem
     2. ladder ignoroval canvas_w (škáloval per container width, ne per zdroj)
     3. edit-mode overflow:hidden klipoval drag tiles

   v3.0.84 design:
     - Wrap má aspect-ratio: canvas_w/canvas_h → height = scaled.height (žádný gap)
     - Single fluid calc scale(100cqi / canvas_w_px) → pokrývá VŠECHNY canvas_w
     - Edit mode: zachovaný scale, JS drag handler dělí deltaX/Y scale faktorem
       (viz admin.js rtTableDragStart/Move v3.0.84)
     - CSS vars --canvas-w-num/--canvas-h-num/--canvas-w-px set inline z admin.js
   ═════════════════════════════════════════════════════════════════ */
.rt-canvas-wrap {
  container-type: inline-size;
  width: 100%;
  /* aspect-ratio drží height = scaled canvas height (žádná dolní mezera) */
  aspect-ratio: var(--canvas-w-num, 800) / var(--canvas-h-num, 500);
  overflow: hidden;
  margin: 14px auto;
  background: #FAFAF8;
  border: 2px solid var(--border, #E5E7EB);
  border-radius: 12px;
  position: relative;
}
/* Edit mode = dashed orange border (signalizuje editaci) */
.rt-canvas-wrap:has(> .rt-canvas.is-edit) {
  border-style: dashed;
  border-color: #F59E0B;
}
.rt-canvas {
  transform-origin: top left;
  /* Single-calc fluid scale — fits canvas to wrap (works for ANY canvas_w from DB) */
  transform: scale(calc(100cqi / var(--canvas-w-px, 800px)));
  transition: transform 0.18s ease;
}
/* Fallback pro browsers bez @container support (Firefox <110, Safari <16) */
@supports not (container-type: inline-size) {
  .rt-canvas-wrap { overflow: auto; aspect-ratio: auto; }
  .rt-canvas { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   🆕 v3.0.109 — VIEWPORT 701-1023px (úzký PC, MacBook 13 narrow, iPad land.)
   User: "přidej viewport at nerozhodíš zbytek a nastyluj to"
   NEZASAHUJE do mobile (≤700), full PC (≥1024), pinned/collapsed override pravidel.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 701px) and (max-width: 1023px) {
  /* Sidebar: menší padding + font aby se text vešel bez truncation */
  body:not(.sidebar-collapsed):not(.sidebar-pinned) .sidebar-nav .nav-item {
    padding: 8px 10px;
    font-size: 12.5px;
    gap: 8px;
    min-height: 38px;
  }
  body:not(.sidebar-collapsed):not(.sidebar-pinned) .sidebar-nav .nav-item .nav-icon {
    font-size: 15px;
  }
  body:not(.sidebar-collapsed):not(.sidebar-pinned) .sidebar-logo strong {
    font-size: 13px;
  }
  /* Quick actions: 2x2 (4 v řadě moc úzké v 880px content) */
  .quick-actions { grid-template-columns: 1fr 1fr; }
  /* Card numbers: nowrap + menší font aby se vešly */
  .dashboard-recent-row .recent-table tbody tr td:nth-child(1),
  .dashboard-recent-row .recent-card .recent-table td:first-child {
    font-size: 12px;
    white-space: nowrap;
  }
  /* Topbar kompaktnější */
  .topbar { gap: 8px; }
  .topbar-search .btn-cmdk-trigger { max-width: 200px; }
}

/* 🐛 fix v3.0.169 — připnutý rail (≤1100px, 56px): text loga „APPEK B2B" + label
   špendlíku „Připnuto/Připnout" přetékaly úzký rail (uživatel: „přetáká text u loga
   a špendlíku — dej display none v tomhle breakpointu"). Rail je 56px až do 1100px
   (nad ním sidebar 280px plný → text se ukáže správně). Vysoká specificita + late
   pořadí, ať přebije zobrazovací pravidlo (ř.356 ukazuje label od 701px). Jen ikony. */
@media (max-width: 1100px) {
  html body.sidebar-pinned .sidebar .sidebar-logo strong,
  html body.sidebar-pinned .sidebar .sidebar-pin .sidebar-pin-label-on,
  html body.sidebar-pinned .sidebar .sidebar-pin .sidebar-pin-label-off,
  html body.sidebar-pinned .sidebar .sidebar-collapse-label-on,
  html body.sidebar-pinned .sidebar .sidebar-collapse-label-off {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   🧭 v3.0.170 — PINNED: TĚLO MUSÍ KOPÍROVAT ŠÍŘKU RAILU (konec „odskoku")
   Root cause (zjištěno měřením v Preview):
   Pinned sidebar je position:fixed s PEVNOU šířkou — 56px (≤1100) / 280px (>1100).
   Grid sloupec .admin-app se ale řídil JINAK: 280px base (ř.541) + fluidní
   var(--fl-sidebar) v pásmu 1024–1366 (ř.20324). Proto:
     • ≤1100px → grid rezervoval 280px pro 56px rail → MEZERA ~224px (nahlášený bug)
     • 1101–1555px → grid (fluid ~220–280) < sidebar 280 → obsah PODtékal o ~50px
   Fix: grid sloupec teď přesně sleduje skutečnou šířku fixního railu.
   Pinned+collapsed >1100 (84px) necháváme — tam grid i sidebar už 84px sedí. */
@media (max-width: 1100px) {
  html body.sidebar-pinned .admin-app { grid-template-columns: 56px 1fr !important; }
}
@media (min-width: 1101px) {
  html body.sidebar-pinned:not(.sidebar-collapsed) .admin-app { grid-template-columns: 280px 1fr !important; }
}

/* 🆕 v3.0.179 — výběr na mobilních kartách DL/FA → hromadný export + e-mail (jako desktop) */
.doc-card-check { display: inline-flex; align-items: center; margin-right: 8px; flex-shrink: 0; }
.doc-card-check input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--primary); margin: 0; }
.dl-card.is-selected, .faktura-card.is-selected {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--primary-light, #FFF8E5);
}

/* 🪟 v3.0.180 — WIN98: doplnění zbylých tenkých míst (user: "všechno nalezené") */
/* Barevná CTA, co nejsou <button> (a.tb-b2b-btn) → win98 šedé tlačítko */
html.theme-win98 .tb-b2b-btn,
html.theme-win98 a.btn-green {
  background: #C0C0C0 !important;
  color: #000 !important;
  border: 2px outset #DFDFDF !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
html.theme-win98 .tb-b2b-btn:active { border-style: inset !important; }
/* Restaurace — floor deska (teal jako win98 desktop) + dlaždice stolů */
html.theme-win98 .rt-canvas,
html.theme-win98 .rt-canvas-wrap { background: #008080 !important; border: 2px inset #DFDFDF !important; }
html.theme-win98 .rt-table-tile,
html.theme-win98 .rt-tile-modern {
  background: #C0C0C0 !important;
  color: #000 !important;
  border: 2px outset #DFDFDF !important;
  box-shadow: none !important;
}
/* Datum/svátek pill (zobrazený >1024px) */
html.theme-win98 .topbar-datum-svatek {
  background: #C0C0C0 !important;
  color: #000 !important;
  border: 1px inset #DFDFDF !important;
  box-shadow: none !important;
}
/* Period-tabs kontejner → win98 zapuštěný panel */
html.theme-win98 .period-tabs { background: #C0C0C0 !important; border: 2px inset #DFDFDF !important; }

/* ═══════════════════════════════════════════════════════════════
   🆕 v3.0.188 — Výroba→Suroviny: hustota UI + okraje + zarovnání
   Filtry měly inline font-size:18px;height:56px → přebíjely html.density-*.
   Inline odstraněn v JS (renderSuroviny) → .form-input teď poslouchá hustotu.
   Tady jen: lehký dolní + pravý okraj obsahu (scoped přes :has) a zarovnání.
   ═══════════════════════════════════════════════════════════════ */
main#content:has(.sur-filtry) {
  padding-right: calc(var(--fl-content-px) + 10px);
  padding-bottom: calc(var(--fl-content-py) + 24px);
}
/* filtry stejně vysoké (search + 2 selecty), density řídí font/padding */
.sur-filter-grid { align-items: stretch; }
.sur-filtry .sur-group-toggle { padding-inline: 6px; }
/* Pozn.: filtry teď používají standardní .form-input → dědí app-wide density chování
   jako zbytek aplikace (dřív je inline 56px/18px od density odstřihl). */

/* ⚡ v3.0.252 — ODLEHČENÝ REŽIM (volba výkonu v Nastavení → body.perf-lite).
   Opt-in (výchozí VYPNUTO) — vypne drahé efekty (animace, stíny, blur) pro svižnost
   na slabších zařízeních / starších mobilech. Bez třídy = NULOVÝ dopad na výchozí vzhled. */
body.perf-lite *,
body.perf-lite *::before,
body.perf-lite *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0ms !important;
  transition-duration: 0.001ms !important;   /* 0.001ms (ne 0) → transitionend eventy stále fungují */
  transition-delay: 0ms !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
}
body.perf-lite { scroll-behavior: auto !important; }
/* zachovej viditelnost fokusu (a11y) i v lite režimu, i když jinak rušíme box-shadow */
body.perf-lite *:focus-visible { box-shadow: 0 0 0 2px var(--primary, #BA7517) !important; }

/* 🆕 v3.0.296 — MOBIL FIX: balíčková lišta („🎁 TVÉ BALÍČKY") NIKDY nepřeteče viewport.
   #package-subheader (flex row: label / řada karet / toggle) necháme WRAPOVAT na řádky,
   ale samotnou řadu karet .topbar-pkg-badges roztáhneme na 100 % vlastní řádek a uděláme
   z ní jednořádkový swipe-scroll (overflow-x:auto) — karty se nesmršťují ani nepřetékají
   stránku. (Dřív měl wrapper max-width:none → karty přetékaly přes pravý okraj iPhonu;
   pozor: nowrap na CELÉM wrapperu rozdrtí řadu karet, label sežere šířku — proto cílíme
   jen .topbar-pkg-badges.) Poslední v souboru + #id & !important → vyhraje nad staršími bloky. */
@media (max-width: 700px) {
  #package-subheader,
  #package-subheader.show,
  .package-subheader.show {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #package-subheader .topbar-pkg-badges,
  .package-subheader .topbar-pkg-badges {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none;
  }
  #package-subheader .topbar-pkg-badges::-webkit-scrollbar { display: none; }
  #package-subheader .pkg-badge-square,
  .package-subheader .pkg-badge-square {
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }
}

/* 🆕 v3.0.317 — TABLET (701–860px): datové tabulky → karty i na portrait tabletu.
   Dřív portrait iPad (768px) dostával desktop tabulky v ~530px ploše (vedle 220px sidebaru)
   → přetékaly. Scoped breakpoint → desktop (>860) i mobil (≤700, vlastní pravidlo) nedotčeny.
   data-label nastavuje labelizeTables() v admin.js nezávisle na breakpointu. */
@media (min-width: 701px) and (max-width: 860px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tbody tr { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; padding: 12px; }
  .table td { padding: 4px 0; border-bottom: none; font-size: 13px; text-align: left; }
  .table td::before { content: attr(data-label); display: block; font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500; margin-bottom: 2px; }
  .table td.td-action::before { display: none; }
  .table td.td-action { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
}

/* ═══════════════════════════════════════════════════════════════════
   📌 v3.0.320 — Pinned mód: clearance pod plovoucím FABem
   ───────────────────────────────────────────────────────────────────
   V sidebar-pinned módu (rail + špendlík) je bottom-nav skrytý, takže
   pravidlo na ř.~20400 nuluje content padding-bottom (`...0 !important`,
   spec 1,1,1). JENŽE plovoucí FAB "Nová objednávka" (.app-fab, bottom:88px
   + 56px výška = sahá do 144px) svítí na VŠECH šířkách ≤768 i v pinned módu
   → bez clearance překrýval spodní karty ("Akce vyžadující pozornost" atd.).
   Tenhle override má STEJNOU specificitu (1,1,1) + !important a je POZDĚJI
   ve zdroji → vyhraje nad nulujícím pravidlem, ale jen ≤768 (kde FAB svítí).
   Na 769-1100 pinned (FAB skrytý) zůstává 0. Viz [[appek-mobile-ios-bugs]]. */
@media (max-width: 768px) {
  body.sidebar-pinned main#content,
  body.sidebar-pinned .main-content {
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 🆕 v3.0.366 — Sidebar logo (A APPEK B2B) = JEN logo, NE tlačítko.
   User feedback: „ten appek button pod nápisem udělat neviditelný i po najetí myší;
   při hoveru na Dashboard mizí okraj." Příčina: .sidebar-logo měl :hover krémové pozadí
   (vyplnilo prázdný padding pod textem → vypadalo jak prázdné tlačítko) + border-bottom čáru.
   Řešení: žádné hover pozadí, žádný okraj, kompaktní. Klik na logo → Přehled ZŮSTÁVÁ funkční.
   🐛 v3.0.372 — scope ROZŠÍŘEN i na PŘIPNUTÝ sidebar (user měl pinned → fix se předtím neaplikoval = „appek button" zůstal; jen .sidebar-collapsed = ikona-rail zůstává mimo). */
body:not(.sidebar-collapsed) .sidebar-logo {
  border-bottom: none !important;
  padding-bottom: 6px !important;
}
.sidebar-logo:hover { background: transparent !important; }
.sidebar-logo:active { transform: none !important; }

/* ═══════════════════════════════════════════════════════════════
   🆕 v3.0.378 — Mobilní UX dotažení (z UX auditu): tap targety ≥40px
   + truncation. Override mobilních pravidel (mobile-only, !important).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* #1 bulk-select checkbox — z 16px na ≥40px terč (blokovalo hromadné označení pro tisk/export/e-mail) */
  .table-selectable td.col-check,
  .table-selectable th.col-check { padding: 10px !important; }
  .table-selectable td.col-check input,
  .table-selectable th.col-check input { width: 24px !important; height: 24px !important; }
  /* #2 ± množstevní tlačítka v modálech (objednávka / ruční FA / DL) — z 26px na 40px */
  .obj-polozka-qty .qty-btn { width: 40px !important; height: 40px !important; }
  /* #3 mazací × u položek — z 26px na 40px (destruktivní akce, mis-tap při scrollu) */
  .polozky-table tbody tr td:last-child button.btn-danger,
  .polozky-table tbody tr td:last-child:not(.num) button { width: 40px !important; height: 40px !important; min-height: 40px !important; }
  /* #4 modal vodorovný scroll (jinak globální overflow-x:hidden ořízne široký obsah) */
  .modal-body { overflow-x: auto !important; }
  /* #5 názvy výrobků v dashboard recent kartách — zalomit místo ellipsis ořezu */
  .dashboard-recent-row > .recent-card .recent-pol-item { white-space: normal !important; max-width: 100% !important; }
  /* #8 zvoneček notifikací — z 34px na 40px */
  .btn-notif { width: 40px !important; height: 40px !important; }
}

/* =========================================================
   📱 v3.0.390 — MODAL OKNA na úzkých telefonech (≤480px, iPhone SE 375px)
   Inline grid-template-columns v obsahu modalu se na desktopu nedaly přebít
   media-query třídou → modaly (faktura, objednávka…) přetékaly vpravo
   (částky/data/chipy uříznuté). Tady je srazíme na 1 sloupec s !important.
   ========================================================= */
@media (max-width: 900px) {
  /* FLUIDNĚ: sloupce se samy zalomí dle dostupné šířky (žádný pevný device breakpoint).
     minmax(min(100%,200px),1fr) → na úzkém telefonu 1 sloupec, na širším 2–3, kdekoliv. */
  #modal-body [style*="grid-template-columns"],
  #modal-body .form-grid,
  #modal-body .form-grid-tight,
  #modal-body [class*="form-grid"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
  }
  #modal-body .form-input,
  #modal-body input,
  #modal-body select { max-width: 100% !important; box-sizing: border-box !important; }
  #modal-body { overflow-wrap: anywhere; }
}

/* =========================================================
   📱 v3.0.391 — čísla dokladů v přehledech = JEDNA ŘÁDKA (no-wrap)
   Dlouhá POS-/OBJ- čísla se dřív lámala přes víc řádků (zděděný
   word-break:break-word z rodičovské karty). nowrap to přebije všude.
   ========================================================= */
.obj-card-cislo, .faktura-card-cislo, .dl-card-cislo,
.vyrobek-card-cislo, .odberatel-card-cislo,
.dashboard-recent-row .recent-table td:first-child > strong:first-child {
  white-space: nowrap !important;
  word-break: keep-all !important;
}