* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #BA7517;
  --primary-dark: #854F0B;
  --primary-light: #FAEEDA;
  --primary-border: #FAC775;
  --bg: #FDFDFE;       /* skoro bílé — žádný teplý nádech */
  --surface: #FFFFFF;
  --surface-2: #F7F8FA; /* jemně světlejší než předtím, neutrální */
  --text: #2C2C2A;
  --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);
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg);
}

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 */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: var(--surface); border-radius: 16px; padding: 32px; max-width: 400px; width: 100%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); }
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 600; margin-bottom: 12px;
}
.login-logo h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.login-logo p { color: var(--text-2); font-size: 13px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.login-form input { padding: 12px 14px; border: 1px solid var(--border-2); border-radius: var(--radius-md); }
.login-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.1); }
.error-msg { color: var(--danger-text); font-size: 13px; padding: 8px 12px; background: var(--danger-bg); border-radius: var(--radius-sm); }

/* HLAVNÍ LAYOUT */
.admin-app { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }

/* SIDEBAR */
.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 20px 12px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
/* 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: 8px; flex: 1 1 auto; min-height: 0; }
/* Každý nav-item se rovnoměrně rozdělí přes dostupnou výšku, žádný scroll */
.sidebar-nav .nav-item { flex: 1 1 0; min-height: 38px; }

/* 📌 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 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-pin:hover {
  background: var(--surface-2);
  border-color: var(--primary-border);
  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);
  border-color: var(--primary);
  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; }

/* 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;
  }
  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: 36px !important;
    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;
  }
  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(-1px);
}
.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; }
.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-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  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;
  max-width: 100%;
  box-sizing: border-box;
}
.topbar > .topbar-user    { justify-self: start; min-width: 0; }
.topbar > .topbar-search  { justify-self: stretch; }
.topbar > .topbar-actions { justify-self: end; min-width: 0; }
@media (max-width: 1100px) {
  .topbar { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 900px) {
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas: "user actions" "search search";
    row-gap: 8px;
  }
  .topbar > .topbar-user    { grid-area: user; }
  .topbar > .topbar-actions { grid-area: actions; }
  .topbar > .topbar-search  { grid-area: search; }
}
.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; }

/* =========================================================
   🎁 PACKAGE BADGES v topbaru — malé čtverečky pro aktivní balíčky
   ========================================================= */
.topbar-pkg-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--border-2, #d8d2c4);
  flex-wrap: wrap;
  max-width: 100%;
}
.topbar-pkg-badges:empty {
  display: none;
}
.pkg-badge-square {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e8e8ed);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  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: 17px;
  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);
}
/* Dark theme */
html.theme-dark .pkg-badge-square,
html.dark .pkg-badge-square {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
html.theme-dark .pkg-badge-square:hover,
html.dark .pkg-badge-square:hover {
  background: var(--pkg-color, var(--primary));
}
/* Mobile — kompaktnější */
@media (max-width: 768px) {
  .topbar-pkg-badges {
    margin-left: 6px;
    padding-left: 6px;
    gap: 3px;
  }
  .pkg-badge-square {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
  .pkg-badge-icon { font-size: 15px; }
  .pkg-badge-tooltip { display: none; }
}

.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 */
.dph-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.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; }
  .dph-card-sazba { font-size: 15px; }
  .dph-card-meta { font-size: 11px; }
  .dph-card-actions button { font-size: 11px; padding: 5px 6px; min-height: 30px; }
}

/* 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 create) — 2-řádkový card s inputy uvnitř info bloku */
.obj-polozka-row.obj-polozka-edit {
  align-items: start;
  padding: 10px 12px;
}
.obj-polozka-row.obj-polozka-edit .obj-polozka-img { margin-top: 4px; }
.obj-polozka-row.obj-polozka-edit .obj-polozka-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.obj-polozka-name-input {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px !important;
  width: 100%;
  height: 32px;
  box-sizing: border-box;
}
.obj-polozka-zdroj {
  font-size: 11px;
  color: var(--text-3);
}
.obj-polozka-edit-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.obj-polozka-jed {
  width: 56px !important;
  font-size: 12px !important;
  padding: 4px 6px !important;
  height: 28px;
  text-align: center;
}
.obj-polozka-cena-input {
  width: 80px !important;
  font-size: 12px !important;
  padding: 4px 6px !important;
  height: 28px;
  text-align: right;
}
.obj-polozka-dph {
  width: 70px !important;
  font-size: 12px !important;
  padding: 4px 6px !important;
  height: 28px;
}
.obj-polozka-row.obj-polozka-edit .obj-polozka-qty { align-self: center; }
.obj-polozka-row.obj-polozka-edit .obj-polozka-cena { align-self: center; }

/* 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) */
.obj-doc-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  background: #F7F8FA;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.obj-doc-actions .btn-secondary,
.obj-doc-actions a.btn-secondary {
  font-size: 13px;
  padding: 8px 10px;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  min-width: 0;
  word-break: break-word;
}
@media (max-width: 700px) {
  .obj-doc-actions { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; }
  .obj-doc-actions .btn-secondary,
  .obj-doc-actions a.btn-secondary {
    font-size: 13px;
    padding: 12px 8px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.25;
  }
  /* 3 tlačítka v 2-col gridu — třetí přes celou šíři */
  .obj-doc-actions > *:nth-child(3):last-child { grid-column: 1 / -1; }
}

/* 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: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* (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; }
@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; } }
@media (max-width: 700px)  { .dashboard-recent-row { grid-template-columns: 1fr; gap: 10px; align-items: stretch; } }

.recent-card {
  border-top: 4px solid transparent;
  position: relative;
  padding: 12px 14px;
}
.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); }
.recent-icon-btn.recent-icon-email {
  background: #F5DDB5;
  color: #5C3608;
  border-color: rgba(92, 54, 8, 0.5);
}
.recent-icon-btn.recent-icon-email .recent-icon-em {
  filter: contrast(1.15) saturate(1.3);
}

/* 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;
  opacity: 0.55;
}
.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; }

.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) — stejný "corner" pattern */
.btn-icon-corner {
  background: var(--surface-2);
  border: 1.5px solid var(--border-2);
  color: var(--text);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  filter: contrast(1.1) saturate(1.2);   /* aby emoji obálka byla výraznější */
  transition: all 0.18s ease;
}
.btn-icon-corner:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: scale(1.05);
  filter: contrast(1.15) saturate(1.3);
}
.btn-icon-corner:active { transform: scale(0.96); }
@media (max-width: 700px) {
  .btn-icon-corner { width: 36px; height: 36px; font-size: 15px; }
  /* Form-actions na mobilu má column-reverse + width:100% pro vše —
     pro icon-corner to zrušíme a posuneme do rohu vedle koše */
  .form-actions .btn-icon-corner {
    width: 36px !important;
    align-self: flex-start;
    margin-left: 2px;
  }
}

/* 📨🗑️ Řá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); }
.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; }
}

/* 🗂️ Záložky Nastavení */
.nastaveni-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nastaveni-tab {
  flex: 1;
  min-width: max-content;
  padding: 12px 18px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-align: center;
  font-family: inherit;
}
.nastaveni-tab:hover:not(.active) {
  background: var(--surface);
  color: var(--text);
}
.nastaveni-tab.active {
  background: var(--surface);
  color: var(--primary-dark);
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(186, 117, 23, 0.18);
  font-weight: 700;
}
.nastaveni-tab-content {
  /* aby přechod mezi tabami vypadal hladce */
  animation: nastaveniTabIn 0.18s ease-out;
}
@keyframes nastaveniTabIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Mobil: záložky horizontální scroll, menší font */
@media (max-width: 700px) {
  .nastaveni-tabs {
    padding: 3px;
    gap: 2px;
  }
  .nastaveni-tab {
    padding: 10px 12px;
    font-size: 13px;
    flex: 0 0 auto;
  }
}
html.dark .nastaveni-tabs { background: var(--surface-2); border-color: rgba(255,255,255,0.08); }
html.dark .nastaveni-tab.active { background: var(--surface); color: var(--primary); }
.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: 28px; color: var(--text-3); padding: 0 4px; line-height: 1; }
.modal-close:hover { color: var(--text); }
.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;
}
.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) {
  /* 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: 65%;
    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;
  }
  .sidebar-logo .topbar-datum-svatek .dt-line-svatek {
    font-size: 9.5px;
    opacity: 0.85;
  }
  .sidebar-logo .topbar-datum-svatek .dt-svatek-name {
    font-weight: 600;
  }

  /* 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; }
  .page-head .btn-primary {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    color: white !important;
    font-size: 15px;
    padding: 14px 16px;
    display: block;
    flex-basis: 100%;        /* vlastní řádek */
    margin-top: 10px;        /* mezera od sekundárních tlačítek (Tisk, Export, Import) */
  }
  /* Sekundární tlačítka v page-head (Tisk/Export/Import) — full width, vlastní řádek */
  .page-head .btn-secondary {
    flex: 1 1 calc(50% - 4px);    /* 2 sloupce vedle sebe */
    min-width: 0;
    font-size: 14px;
    padding: 10px 12px;
  }

  /* 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%;
  }
  .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: 18px;
    word-break: break-word;
  }

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

/* 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); }
.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);
}

/* === 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 — taby období + graf + dashboard layout
   ========================================================= */
.period-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.period-tab {
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.period-tab:hover {
  background: var(--surface-2);
  border-color: var(--primary-border);
}
.period-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.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);
}

/* MOBILE: period-taby zalomit do gridu, žádný horizontal scroll */
@media (max-width: 700px) {
  .period-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding-bottom: 0;
    overflow: visible;
  }
  .period-tab {
    padding: 9px 6px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 38px;
    text-align: center;
  }
  /* "Vlastní" — 5. tab — zabírá celou šíři pokud lichý počet */
  .period-tabs .period-tab:nth-child(5):nth-last-child(1) { grid-column: 1 / -1; }

  /* Š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;
  grid-template-columns: repeat(auto-fit, minmax(200px, 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;
}
/* 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; }
}

/* 🔢 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; }

/* 📱 Na mobilu: schovat text, zobrazit jen číslo + ? — klik otevře modal s nápovědou */
@media (max-width: 700px) {
  .st-step-hint {
    display: inline-flex;
    width: auto;
    gap: 6px;
    padding: 5px 10px;
    margin: 6px 6px 0 0;
    border-left-width: 3px;
    font-size: 13px;
  }
  .st-step-hint .st-step-text { display: none; }
  .st-step-hint .st-step-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    border-radius: 50%;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
  }
  .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;
}
.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 — 1 sloupec na mobilu */
  .reorder-cards,
  div[style*="grid-template-columns:repeat(3"] {
    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: 24px; }
  /* 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 */
  .quick-period-row { flex-wrap: wrap; gap: 4px; }
  .quick-period-row .period-tab { flex: 1 1 calc(33.33% - 4px); font-size: 11px; padding: 6px; }

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

/* ===================================================================
   💾 ZÁLOHY TABULKA — desktop styling + mobilní karty
   =================================================================== */
.zalohy-table .zaloha-cell-when { white-space: nowrap; }
.zalohy-table .zaloha-vytvoril { font-size: 10px; color: var(--text-3); margin-top: 2px; }
.zalohy-table .zaloha-actions {
  text-align: right;
  white-space: nowrap;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.zalohy-table .zaloha-btn {
  font-size: 11px;
  padding: 4px 10px;
  white-space: nowrap;
  text-decoration: none;
}
.zalohy-table .zaloha-btn-del { color: #B91C1C; }

@media (max-width: 700px) {
  /* Schovat metadata buňky — uživatel chce vidět jen datum a popis */
  .zalohy-table .zaloha-col-hide { display: none !important; }
  /* Karta zálohy je teď úsporná */
  .zalohy-table tbody tr {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .zalohy-table .zaloha-cell-when {
    white-space: nowrap;
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    font-size: 12px;
    color: var(--text-3);
  }
  .zalohy-table .zaloha-cell-when::before { display: none; }
  .zalohy-table .zaloha-cell-when strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
  }
  .zalohy-table .zaloha-vytvoril { display: none; }
  /* Popis (label zálohy) — hlavní info */
  .zalohy-table tbody tr td:nth-of-type(3) {
    padding: 0 !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
  }
  .zalohy-table tbody tr td:nth-of-type(3)::before { display: none; }
  /* Akce — kompaktní, vedle sebe */
  .zalohy-table .zaloha-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
  }
  .zalohy-table .zaloha-btn {
    flex: 1 1 calc(33.333% - 4px);
    font-size: 12px;
    padding: 8px 6px;
    text-align: center;
    min-width: 0;
    border-radius: 8px;
  }
}

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

  /* Dashboard recent — 2 sloupce */
  .dashboard-recent-row { grid-template-columns: 1fr 1fr !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(--surface); color: var(--primary); border-color: var(--primary-border); }

/* 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-prodejna, html.dark .btn-prodejna,
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);
}

/* 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;
  font-size: 14px !important;
  padding: 0 4px !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 {
  border: 1px solid #808080 !important;
  border-radius: 0 !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 ── už v light, ale pojistka aby active byla čitelná ── */
html.theme-dark .nastaveni-tab.active,
html.dark .nastaveni-tab.active {
  background: var(--surface) !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary-border, rgba(216, 153, 64, 0.40)) !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 (Rozvozy → DL atd.)
   ========================================================= */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.btn-back:hover {
  background: var(--primary-light, rgba(216, 153, 64, 0.10));
  border-color: var(--primary, #BA7517);
  color: var(--primary-dark, #854F0B);
  transform: translateX(-2px);
}
.btn-back-arrow {
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}
@media (max-width: 600px) {
  .btn-back-lbl { display: none; }
  .btn-back { padding: 8px 10px; }
  .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; }
html.density-compact .nav-item { padding: 12px 14px; font-size: 16px; }
html.density-compact .nav-icon { font-size: 19px; }
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; }
html.density-compact .period-tab { padding: 8px 14px; font-size: 13px; min-height: auto; }
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 .nastaveni-tab { padding: 8px 14px; font-size: 12px; }
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; }
html.density-spacious .nav-item { padding: 20px 22px; font-size: 20px; }
html.density-spacious .nav-icon { font-size: 26px; }
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; }
html.density-spacious .period-tab { padding: 14px 22px; font-size: 15px; min-height: 52px; }
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 .nastaveni-tab { padding: 14px 22px; font-size: 15px; }
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; }
html.density-extreme .period-tab { padding: 18px 28px; font-size: 17px; min-height: 60px; font-weight: 700; }
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 .nastaveni-tab { padding: 18px 26px; font-size: 17px; }
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(-1px);
  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-3);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 14px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
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 */
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);
}

/* 🥈 Online B2B — premium stříbrno-černý "Chrome" button (Apple aluminum) */
html.theme-apple .btn-prodejna {
  /* Stříbrný highlight nahoře → kov uprostřed → tmavá ocelová dole */
  background: linear-gradient(
    180deg,
    #f5f5f7 0%,
    #d8d8dc 18%,
    #98989d 50%,
    #48484a 82%,
    #1c1c1e 100%
  );
  border: 1px solid #1c1c1e;
  color: #1c1c1e;
  border-radius: 980px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,    /* horní leskla hrana */
    0 -1px 0 rgba(0,0,0,0.5) inset,          /* spodní temná hrana */
    0 1px 0 rgba(255,255,255,0.6),           /* outer top reflection */
    0 2px 6px rgba(0,0,0,0.28),
    0 1px 2px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}
/* Specular highlight (chrome sheen) na horní polovině */
html.theme-apple .btn-prodejna::before {
  content: '';
  position: absolute;
  inset: 1px 1px 50% 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.08) 100%);
  border-radius: 980px 980px 0 0;
  pointer-events: none;
}
/* Pravý okraj — jemný stříbrný highlight (jako broušený hliník) */
html.theme-apple .btn-prodejna::after {
  content: '';
  position: absolute;
  inset: 6px 1px 6px auto;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.4), transparent);
  pointer-events: none;
}
html.theme-apple .btn-prodejna:hover {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #e5e5ea 18%,
    #aeaeb2 50%,
    #5a5a5c 82%,
    #2c2c2e 100%
  );
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -1px 0 rgba(0,0,0,0.55) inset,
    0 1px 0 rgba(255,255,255,0.75),
    0 4px 14px rgba(0,0,0,0.35),
    0 2px 4px rgba(0,0,0,0.22);
}
html.theme-apple .btn-prodejna:active {
  background: linear-gradient(
    180deg,
    #d8d8dc 0%,
    #98989d 35%,
    #48484a 75%,
    #1c1c1e 100%
  );
  transform: translateY(0);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.45) inset,
    0 1px 2px rgba(0,0,0,0.18);
}
html.theme-apple .btn-prodejna .btn-prodejna-icon,
html.theme-apple .btn-prodejna .btn-prodejna-label,
html.theme-apple .btn-prodejna .btn-prodejna-label-short,
html.theme-apple .btn-prodejna .btn-prodejna-arrow {
  position: relative;
  z-index: 1;
}
html.theme-apple .btn-prodejna .btn-prodejna-icon {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5));
}
html.theme-apple .btn-prodejna .btn-prodejna-arrow {
  color: #1c1c1e;
  font-weight: 800;
}

/* 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 */
html.theme-apple .modal-close {
  line-height: 1;
  font-weight: 300;
  /* SF Pro × glyph je lehčí — fontweight 300 vypadá lépe */
}

/* Nav-item — ikona perfektně zarovnaná s textem */
html.theme-apple .nav-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
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);
}

/* Period-tabs samostatné mimo segmented container — pill shape */
html.theme-apple .period-tabs {
  display: inline-flex;
  background: rgba(118, 118, 128, 0.12);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 14px;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}
html.theme-apple .period-tabs .period-tab {
  background: transparent !important;
  border: none !important;
  color: var(--text-2);
}
html.theme-apple .period-tabs .period-tab.active {
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
              0 2px 6px rgba(0, 0, 0, 0.08) !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 — responzivní zalomení do víc řádků
   Místo horizontálního scrollu (uživatel ho nevidí) zalomíme
   taby do víc řádků na úzkém okně nebo při velkém density.
   ========================================================= */
.nastaveni-tabs {
  flex-wrap: wrap;        /* zalomit do víc řádků pokud se nevejdou */
  overflow-x: visible;     /* žádný horizontální scroll */
}
.nastaveni-tab {
  /* min-width: max-content; — odstraněno, aby tab mohl shrinkovat */
  min-width: auto;
  flex: 0 0 auto;          /* tab má jen svou potřebnou šířku, nezvětšuje se */
}

/* Spacious + extreme density nebo úzké okno — kompaktnější taby ať se vejdou */
@media (max-width: 1280px) {
  .nastaveni-tab {
    padding: 10px 14px;
    font-size: 13px;
  }
  html.density-spacious .nastaveni-tab { padding: 12px 16px; font-size: 14px; }
  html.density-extreme .nastaveni-tab { padding: 14px 18px; font-size: 15px; }
}

/* Extreme density — vždy víc řádků, lepší tap targets */
html.density-extreme .nastaveni-tabs {
  gap: 6px;
  padding: 6px;
}

/* Apple téma — segmented control look stále funguje při wrap */
html.theme-apple .nastaveni-tabs {
  flex-wrap: wrap;
}

/* =========================================================
   🎯 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ů)
   ========================================================= */

/* Spacious density — cards na všem mimo velkých monitorů */
@media (max-width: 1700px) {
  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;
  }
}

/* Extreme density — cards skoro vždy (kromě 4K monitorů 2200px+) */
@media (max-width: 2200px) {
  html.density-extreme .desktop-only-block {
    display: none !important;
  }
  html.density-extreme .mobile-only-block {
    display: block !important;
  }
  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;
  }
}

/* Pro spacious/extreme zachovat agresivní breakpointy z dřívější */
@media (max-width: 1700px) {
  html.density-spacious .desktop-only-block.wide-table-block {
    display: none !important;
  }
  html.density-spacious .mobile-only-block.wide-table-block {
    display: block !important;
  }
}
@media (max-width: 2200px) {
  html.density-extreme .desktop-only-block.wide-table-block {
    display: none !important;
  }
  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;
  }
}

/* =========================================================
   🍞 TOAST NOTIFICATIONS — pro pro UX (nahradí alert())
   ========================================================= */
.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;
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.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 LOADING BAR — globální progress indikátor
   ========================================================= */
.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;
}
@keyframes top-progress-shine {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* =========================================================
   🪐 EMPTY STATES — Apple-style první spuštění
   ========================================================= */
.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;
}
@keyframes es-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.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;
}

/* =========================================================
   ⌘K COMMAND PALETTE — Linear/Notion-style universal search
   ========================================================= */
.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);
}
html.theme-dark .cmdk { background: rgba(40,40,42,0.98); color: #f5f5f7; border-color: rgba(255,255,255,0.08); }
.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));
}
html.theme-dark .cmdk-item.is-active, html.theme-dark .cmdk-item:hover {
  background: rgba(255,255,255,0.08);
}
.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;
}
html.theme-dark .cmdk-footer { background: rgba(0,0,0,0.2); }
html.theme-dark .cmdk-footer kbd { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); }

/* =========================================================
   💀 SKELETON LOADERS — shimmer placeholders
   ========================================================= */
.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;
}
html.theme-dark .skel { background: linear-gradient(90deg, #2c2c2e, #3a3a3c, #2c2c2e); background-size: 200% 100%; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.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 DIALOG — Apple-style replacement for native confirm()
   ========================================================= */
.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;
}

/* =========================================================
   🔍 ⌘K Trigger button v topbaru
   ========================================================= */
/* Search wrapper — sits in the center column of the topbar grid */
.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;
}

.btn-cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--surface-2, #f5f5f7);
  border: 1px solid var(--border, #e8e8ed);
  border-radius: 10px;
  color: var(--text-3, #86868b);
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.btn-cmdk-trigger:hover {
  background: var(--surface, #fff);
  border-color: var(--primary, #BA7517);
  color: var(--text-1, #1d1d1f);
  box-shadow: 0 2px 6px rgba(186, 117, 23, 0.12);
  transform: translateY(-1px);
}
.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;
  }
  .topbar-search .btn-cmdk-trigger {
    width: auto;
    padding: 7px 10px;
  }
  .btn-cmdk-label, .btn-cmdk-kbd { display: none; }
}
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
   ========================================================= */
.btn-notif {
  position: relative;
  background: var(--surface-2, #f5f5f7);
  border: 1px solid var(--border, #e8e8ed);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 17px;
  transition: all 0.12s;
  padding: 0;
}
.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; }

.notif-panel {
  position: fixed;
  top: 60px;
  right: 16px;
  width: min(420px, calc(100vw - 32px));
  max-height: 70vh;
  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, #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;
}
.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: 12px 16px;
  border-bottom: 1px solid var(--border, #e8e8ed);
}
.notif-head h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.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); }
.notif-list { overflow-y: auto; flex: 1; padding: 6px 8px; }
.notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
}
.notif-item:hover { background: var(--surface-2, #f5f5f7); }
.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;
}
html.theme-dark .notif-panel { background: #1c1c1e; border-color: rgba(255,255,255,0.1); color: #f5f5f7; }
html.theme-dark .notif-item:hover { background: rgba(255,255,255,0.06); }

/* =========================================================
   📊 DASHBOARD CHARTS — SVG sparklines + bars
   ========================================================= */
.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-bars { display: flex; align-items: flex-end; gap: 4px; height: 80px; padding-top: 8px; }
.chart-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--primary, #BA7517), #FFC966);
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 4px;
  transition: opacity 0.15s;
}
.chart-bar:hover { opacity: 0.85; }
.chart-bar-label {
  position: absolute;
  bottom: -22px;
  left: 0; right: 0;
  font-size: 10px;
  color: var(--text-3);
  text-align: center;
}
.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;
}
.chart-bar:hover .chart-bar-value { opacity: 1; }

/* =========================================================
   📜 ACTIVITY LOG
   ========================================================= */
.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 — floating action bar + queue panel
   ========================================================= */
.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; }
html.theme-dark .print-queue-panel { background: #1c1c1e; border-color: rgba(255,255,255,0.1); color: #f5f5f7; }
html.theme-dark .pq-item:hover { background: rgba(255,255,255,0.06); }
html.theme-dark .pq-foot { background: rgba(0,0,0,0.2); }

/* =========================================================
   ⌨️ KEYBOARD SHORTCUTS CHEATSHEET
   ========================================================= */
.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;
}
html.theme-dark .kbd-cheat { background: #1c1c1e; color: #f5f5f7; }
html.theme-dark .kbd-keys kbd { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #f5f5f7; }

/* =========================================================
   ✏️ INLINE EDITING — click cell → edit
   ========================================================= */
.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);
}

/* =========================================================
   🌙 DARK MODE POLISH — pro všechny nové komponenty
   ========================================================= */
html.theme-dark .toast {
  background: rgba(28,28,30,0.96);
  color: #f5f5f7;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}
html.theme-dark .toast-close { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
html.theme-dark .toast-close:hover { background: rgba(255,255,255,0.15); }
html.theme-dark .confirm-overlay { background: rgba(0,0,0,0.65); }
html.theme-dark .confirm-card { background: #1c1c1e; color: #f5f5f7; box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
html.theme-dark .confirm-msg { color: rgba(245,245,247,0.75); }
html.theme-dark .confirm-actions button { background: rgba(255,255,255,0.06); color: #f5f5f7; border-color: rgba(255,255,255,0.12); }
html.theme-dark .confirm-actions button:hover { background: rgba(255,255,255,0.12); }
html.theme-dark .empty-state-pro {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  border-color: rgba(255,255,255,0.1);
}
html.theme-dark .empty-state-pro .es-msg { color: rgba(245,245,247,0.65); }
html.theme-dark .skel { background: linear-gradient(90deg, #2c2c2e, #3a3a3c, #2c2c2e); background-size: 200% 100%; }
html.theme-dark .skel-card { background: #1c1c1e; border-color: rgba(255,255,255,0.08); }
html.theme-dark .top-progress { background: rgba(255,255,255,0.04); }
html.theme-dark .cmdk { background: rgba(28,28,30,0.98); color: #f5f5f7; border-color: rgba(255,255,255,0.08); }
html.theme-dark .cmdk-search-row { border-bottom-color: rgba(255,255,255,0.08); }
html.theme-dark .cmdk-hint { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
html.theme-dark .cmdk-shortcut { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }
html.theme-dark .cmdk-footer { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.08); }
html.theme-dark .cmdk-footer kbd { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: #f5f5f7; }
html.theme-dark .chart-card { background: #1c1c1e; border-color: rgba(255,255,255,0.08); }
html.theme-dark .activity-item { border-color: rgba(255,255,255,0.06); }
html.theme-dark .activity-item:hover { background: rgba(255,255,255,0.04); }
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-trigger:hover { background: rgba(255,255,255,0.12); }
html.theme-dark .pkg-card { background: #1c1c1e; }
html.theme-dark .lang-card { background: #1c1c1e; }
html.theme-dark .inline-edit:hover { background: rgba(255,255,255,0.06); }

/* =========================================================
   📱 RESPONSIVE ENHANCEMENTS — full sale-ready polish
   Cíl: lepší UX na mobile/tablet (touch targets, layout, bottom nav)
   ========================================================= */

/* Touch-friendly minimum target velikosti na mobile */
@media (max-width: 768px) {
  .btn-primary, .btn-secondary, .btn-danger,
  .nav-item, .period-tab, .nastaveni-tab,
  button:not(.icon-only):not(.btn-cmdk-trigger):not(.pkg-badge-square):not(.modal-close) {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Větší písmo do inputů aby iOS nezvětšoval */
  input, textarea, select {
    font-size: 16px !important;
  }
  /* Modaly fullscreen na mobile */
  .modal-card {
    margin: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
  }
  .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Tabulky → karty na mobile (pokud nejsou už card mode) */
  table.table:not(.table-keep-mobile) thead {
    display: none;
  }
  table.table:not(.table-keep-mobile) tbody tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--surface);
  }
  table.table:not(.table-keep-mobile) tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    padding: 4px 0;
    text-align: right;
  }
  table.table:not(.table-keep-mobile) tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-3);
    text-align: left;
    margin-right: 8px;
  }
  /* Form grids → 1 sloupec */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  /* Page head — kompaktnější */
  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
  }
  .page-head h1.page-title {
    font-size: 22px;
  }
  .page-sub {
    font-size: 12px;
  }
  /* Sticky topbar na mobile */
  .topbar {
    padding: 12px 14px !important;
  }
}

/* Tablet portrait — 2 sloupce form, mezistav */
@media (min-width: 768px) and (max-width: 1024px) {
  .form-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .form-grid .full {
    grid-column: 1 / -1;
  }
}

/* 📱 BOTTOM NAVIGATION — pro mobile (skryje sidebar) */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 50;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}
.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) {
  .bottom-nav { display: block; }
  .sidebar { display: none !important; }
  .main-wrap {
    margin-left: 0 !important;
    padding-bottom: 70px;
  }
  body.sidebar-pinned .topbar {
    padding-bottom: 12px;
  }
}
html.theme-dark .bottom-nav,
html.dark .bottom-nav {
  background: #1c1c1e;
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* Pull-to-refresh indikátor (volitelný, jen vizuální) */
.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);
}

/* Plovoucí FAB pro hlavní akci na mobile */
.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; }
}

/* Tablet landscape — 3-column dense layout */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .main-content {
    padding: 14px 20px;
  }
  .card-block {
    padding: 14px 16px;
  }
}

/* Lepší scrollování v tabulkách */
.table-wrap {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.table-wrap > table > tbody > tr {
  scroll-snap-align: start;
}

/* Lepší focus pro klávesnici (a11y) */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(186, 117, 23, 0.4);
  outline-offset: 2px;
}

/* Skip-link pro screen readery */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--primary);
  color: #fff;
  padding: 10px 16px;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}