:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --border: #c9ced6;
  --text: #111827;
  --text-muted: #374151;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --danger: #dc2626;
  --success-bg: #ecfdf5;
  --success-text: #047857;
  --error-bg: #fef2f2;
  --error-text: #b91c1c;
  --badge-ok-bg: #ecfdf5;
  --badge-ok-text: #047857;
  --badge-danger-bg: #fef2f2;
  --badge-danger-text: #b91c1c;
  --badge-muted-bg: #f3f4f6;
  --badge-muted-text: #374151;
  --badge-warning-bg: #fffbeb;
  --row-done-bg: #f0faf4;
  --row-partial-bg: #fff3e6;
  --badge-warning-text: #b45309;
  --badge-gold-bg: #fcd34d;
  --badge-gold-text: #5c3d00;
  --badge-orange-bg: #fdba74;
  --badge-orange-text: #7c2d12;
  --status-running: #2563eb;
  --table-head-bg: #e8ecf1;
  --table-head-border: #c9ced6;
  /* Ряды графиков (проверено dataviz validate_palette: светлая и тёмная поверхность). */
  --series-1: #2a78d6;
  --series-2: #eb6834;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131417;
    --surface: #1a1c20;
    --border: #2a2d33;
    --text: #e5e7eb;
    --text-muted: #8b909a;
    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --danger: #f87171;
    --success-bg: #052e1f;
    --success-text: #34d399;
    --error-bg: #3b0d0d;
    --error-text: #f87171;
    --badge-ok-bg: #052e1f;
    --badge-ok-text: #34d399;
    --badge-danger-bg: #3b0d0d;
    --badge-danger-text: #f87171;
    --badge-muted-bg: #23262d;
    --badge-muted-text: #9ca3af;
    --badge-warning-bg: #3a2a06;
    --row-done-bg: #0f261b;
    --row-partial-bg: #33220f;
    --badge-warning-text: #fbbf24;
    --badge-gold-bg: #854d0e;
    --badge-gold-text: #fde68a;
    --badge-orange-bg: #9a3412;
    --badge-orange-text: #fed7aa;
    --status-running: #3b82f6;
    /* Lighter than --surface on purpose — in a dark UI, "raised" reads as
       lighter, not darker; using --bg here (darker than --surface) would
       make the header look recessed instead of like a header bar. */
    --table-head-bg: #23262d;
    --table-head-border: #383c44;
    --series-1: #3987e5;
    --series-2: #d95926;
  }
}

/* Manual override via the topbar toggle (see themeToggle.js) always wins
   over the OS preference above — :root[data-theme="dark"] has to repeat
   the same values because a plain :root default only applies when nothing
   more specific matches. */
:root[data-theme="dark"] {
  --bg: #131417;
  --surface: #1a1c20;
  --border: #2a2d33;
  --text: #e5e7eb;
  --text-muted: #8b909a;
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --danger: #f87171;
  --success-bg: #052e1f;
  --success-text: #34d399;
  --error-bg: #3b0d0d;
  --error-text: #f87171;
  --badge-ok-bg: #052e1f;
  --badge-ok-text: #34d399;
  --badge-danger-bg: #3b0d0d;
  --badge-danger-text: #f87171;
  --badge-muted-bg: #23262d;
  --badge-muted-text: #9ca3af;
  --badge-warning-bg: #3a2a06;
  --row-done-bg: #0f261b;
  --row-partial-bg: #33220f;
  --badge-warning-text: #fbbf24;
  --badge-gold-bg: #854d0e;
  --badge-gold-text: #fde68a;
  --badge-orange-bg: #9a3412;
  --badge-orange-text: #fed7aa;
  --status-running: #3b82f6;
  --table-head-bg: #23262d;
  --table-head-border: #383c44;
  --series-1: #3987e5;
  --series-2: #d95926;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}

h1 { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
h2 { font-size: 14px; font-weight: 600; margin: 8px 0 10px; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Логотип не сжимается и не переносится: меню переносится само (.topbar__nav). */
.topbar__brand { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; white-space: nowrap; }

.topbar__logo { display: flex; align-items: center; gap: 8px; color: var(--text); }
.topbar__logo:hover { text-decoration: none; }

.topbar__logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

.topbar__logo-word {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--text);
}

.topbar__tagline {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  padding-left: 32px;
}

.topbar__toggle {
  display: none;
  margin-left: auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.topbar__toggle span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.topbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.topbar__panel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  min-width: 0;
}

/* Пунктов много: на экранах уже их суммы меню переносится второй строкой, а не растягивает страницу вбок. */
.topbar__nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.topbar__nav > a,
.topbar__group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}
.topbar__nav > a:hover,
.topbar__group-toggle:hover { color: var(--text); background: var(--bg); text-decoration: none; }

.topbar__group { position: relative; }
.topbar__group-toggle { border: none; background: none; cursor: pointer; font: inherit; }
.topbar__caret { transition: transform 0.15s ease; flex-shrink: 0; }
.topbar__group.is-open .topbar__caret { transform: rotate(180deg); }
.topbar__group.is-open .topbar__group-toggle { color: var(--text); background: var(--bg); }

.topbar__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 20;
}
.topbar__group.is-open .topbar__dropdown { display: flex; flex-direction: column; gap: 2px; }
.topbar__dropdown a { padding: 7px 10px; border-radius: 6px; color: var(--text); }
.topbar__dropdown a:hover { background: var(--bg); text-decoration: none; }

/* Группа из нескольких подразделов (helpers/navMenu.js) — колонки с заголовками, не больше трёх в ряд. */
.topbar__group.is-open .topbar__dropdown--mega { display: grid; gap: 10px 20px; padding: 12px; }
/* Ширина — по колонкам, а не по узкой кнопке группы: иначе длинные пункты наезжают на соседей. */
.topbar__dropdown--mega { width: max-content; max-width: calc(100vw - 16px); }
.topbar__dropdown--cols2 { grid-template-columns: repeat(2, minmax(180px, max-content)); }
.topbar__dropdown--cols3 { grid-template-columns: repeat(3, minmax(180px, max-content)); }
.topbar__section { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topbar__section-title {
  padding: 4px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.topbar__dropdown a { white-space: nowrap; }
.topbar__dropdown a.is-current { color: var(--primary); font-weight: 600; background: color-mix(in srgb, var(--primary) 10%, transparent); }
/* Группа открытой страницы — видно, где находишься. */
.topbar__group.is-active > .topbar__group-toggle { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }

.topbar__tools { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }
.topbar__wms {
  padding: 5px 10px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  color: var(--primary);
  font-weight: 600;
}
.topbar__wms:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); text-decoration: none; }
.topbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-weight: 700;
}
.topbar__icon-btn:hover { color: var(--text); border-color: var(--text-muted); text-decoration: none; }

.topbar__user-toggle { gap: 6px; }
.topbar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.topbar__user-short { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1280px) { .topbar__user-short { display: none; } }
.topbar__dropdown--user { left: auto; right: 0; min-width: 230px; }
.topbar__user-card { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); white-space: normal; }
.topbar__user-card span { color: var(--text-muted); font-size: 12px; }
.topbar__dropdown--user form { margin: 0; }
.topbar__menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.topbar__menu-btn:hover { background: var(--bg); }
.topbar__menu-btn.theme-toggle { width: 100%; height: auto; justify-content: flex-start; border: none; color: var(--text); }

/* Хлебные крошки над заголовком страницы (helpers/navMenu.js → navCrumbs). */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; color: var(--text-muted); }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--primary); }
.crumbs__sep { opacity: 0.6; }
/* Своя ссылка «← …» у страницы (.breadcrumbs — помнит вкладку/шаг списка) — главнее: крошки шапки не дублируем. */
.crumbs:has(~ .breadcrumbs) { display: none; }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__moon { display: none; }
}

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; }
  .topbar__toggle { display: flex; }

  .topbar__panel {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    gap: 8px;
    order: 3;
  }
  .topbar__panel.is-open { display: flex; }
  /* Открытое меню (nav.js): шапка не выше экрана и листается сама, страница под ней — нет. */
  html.is-menu-open { overflow: hidden; }
  html.is-menu-open .topbar { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }

  .topbar__nav { flex-direction: column; align-items: stretch; gap: 2px; }
  .topbar__nav > a, .topbar__group-toggle { justify-content: space-between; width: 100%; }

  .topbar__group { position: static; }
  .topbar__dropdown {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 4px 14px;
    min-width: 0;
  }

  /* Подразделы — подписями внутри открытой группы, без второго уровня раскрытия. */
  .topbar__group.is-open .topbar__dropdown--mega { display: flex; flex-direction: column; gap: 6px; padding: 0 0 4px 14px; width: auto; }
  .topbar__dropdown a { white-space: normal; }

  .topbar__tools {
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .topbar__group--user { flex: 1 0 100%; }
  .topbar__user-short { display: inline; flex: 1; max-width: none; text-align: left; }
  .topbar__dropdown--user { min-width: 0; }

  /* Page headers (title + action buttons/forms) and button rows are a
     plain space-between/row flex on desktop, sized to fit on one line.
     On narrow screens there isn't room for a dynamic title plus several
     buttons, so stack them instead of letting them squeeze each other —
     this only kicks in under the breakpoint, desktop layout is untouched. */
  .page-head, .wbs-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .bl-template-row { flex-wrap: wrap; }
  .bl-template-row select { min-width: 0; }
}

.container { max-width: 960px; margin: 0 auto; padding: 20px; }
.container--wide { max-width: 1280px; }
.container--full { max-width: 1760px; }

.auth-logo {
  max-width: 320px;
  margin: 72px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.auth-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
  line-height: 1;
}

.auth-logo__tagline {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.auth-box {
  max-width: 320px;
  margin: 20px auto 72px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.auth-box h1 { margin-bottom: 16px; }

.auth-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.auth-tabs__btn {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.auth-tabs__btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

.alert { padding: 8px 12px; border-radius: 4px; margin-bottom: 14px; font-size: 13px; }
.alert--success { background: var(--success-bg); color: var(--success-text); }
.alert--error { background: var(--error-bg); color: var(--error-text); }
.alert--warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }

/* «Только просмотр» (users.read_only): сервер и так отклоняет любые изменения
   (middleware/readOnly.js), а здесь прячем их кнопки, чтобы не нажимать
   заведомо запрещённое. Формы фильтров (GET), выход и разрешённые выгрузки
   (data-readonly-allowed) остаются. */
.is-readonly main form[method="post"]:not([data-readonly-allowed]) button,
.is-readonly main form[method="post"]:not([data-readonly-allowed]) input[type="submit"] { display: none; }

.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.page-head h1 { margin: 0; }
/* Мобильное «столбиком» (выше, в @media max-width: 720px) объявлено раньше
   базового .page-head и проигрывало ему align-items — заголовок и кнопки
   центрировались вместо прижатия влево. */
@media (max-width: 720px) {
  .page-head { align-items: flex-start; }
  /* Столбиком блок кнопок сжимается по содержимому, а у .segmented с
     длинными названиями кабинетов (nowrap) оно шире экрана — вся страница
     уезжала вбок. Ограничиваем шириной экрана: переключатель листается сам. */
  .page-head > .head-actions { max-width: 100%; }
}
.inline-rename { flex: 1; min-width: 0; margin-right: 12px; }
.inline-rename h1 .btn--icon { margin-left: 4px; }
.inline-rename input[type="text"] { font-size: 18px; font-weight: 600; width: 100%; max-width: 640px; }
.inline-rename [hidden] { display: none; }

form { max-width: 420px; }

form label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-muted);
}
form label[hidden] { display: none; }

/* Not scoped to `form` — filter bars (e.g. .filters) sit outside a <form>
   since they're plain JS-driven controls, not something that gets submitted. */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}

/* date/time инпуты рисуют встроенный "часы"/"календарь" иконкой самого
   браузера — она берёт цвет текста по умолчанию (чёрный), из-за чего в
   тёмной теме видна плохо; color-scheme подсказывает браузеру перекрасить
   её под тему, не трогая остальной цвет поля. */
input[type="date"],
input[type="time"] {
  color-scheme: light dark;
}

form label.checkbox { display: flex; align-items: center; gap: 6px; }
form label.checkbox input { width: auto; margin: 0; }
/* Выбор из пары вариантов (спорт/техника у возврата) — в одну строку. */
.radio-row { display: flex; gap: 20px; margin-bottom: 12px; }
.radio-row label.checkbox { margin-bottom: 0; font-size: 14px; color: var(--text); }
.custom-pick { display: flex; align-items: center; gap: 8px; }
.custom-pick[hidden] { display: none; }
/* Глобальное select { display: block } перебивает атрибут hidden. */
select[hidden] { display: none; }
.custom-pick input { flex: 1; }

.hint { display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
/* display: block выше перебивал атрибут hidden — строка «ждём КИЗ» на станциях
   упаковки/возвратов была видна всегда. */
.hint[hidden] { display: none; }

.faq-help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
}
.faq-help-link:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }


.faq-article-list { list-style: none; margin: 0 0 16px; padding: 0; }
.faq-article-list li { margin-bottom: 6px; }

.btn {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1.4;
}
/* display выше перебивает атрибут hidden — кнопки, которые скрипт прячет
   (напр. «Завершить сверку короба» у уже сверенного), иначе видны. */
.btn[hidden] { display: none; }

.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); text-decoration: none; }

.btn--secondary { background: transparent; border-color: var(--border); color: var(--text); }
.btn--secondary:hover { border-color: var(--text-muted); text-decoration: none; }

.btn--link { background: none; border: none; padding: 0; color: var(--primary); font-size: 13px; }
.btn--danger { color: var(--danger); }

/* Icon-only button (e.g. the QR-code download button on wbSupplies/index.ejs's
   table, or any partials/icon.ejs-based button — see CLAUDE.md "Repeated
   per-row action: icon, not text") — square hit area sized to the icon, no
   text label, so it doesn't eat table width the way a text link did.
   padding: 0 makes this self-contained with ANY .btn--* color variant
   (primary/secondary/link), not just .btn--link (whose own padding: 0 used
   to be the only thing making the fixed 24px box work). */
.btn--icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; vertical-align: middle; }
.btn--icon svg { display: block; }
.btn--icon + .btn--icon { margin-left: 4px; }
.table__actions { display: flex; align-items: center; gap: 4px; }

/* Disabled buttons used to show a text change ("…"/"Формируется…") as the
   only "busy" cue on a couple of print buttons — now that those are
   icon-only (see above), disabled needs its own visible treatment. */
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* A long raw API error (e.g. WB's per-order JSON payload on a 409) in a
   "Последние действия" table: collapsed to one ellipsized line by default,
   click to expand the full text in a scrollable, wrapped block instead of
   stretching the table or a hover tooltip. */
/* Collapsible "group-title" sections (e.g. «История сканирований») — same
   header look as a plain .group-title h2, just clickable/collapsed by
   default so a long log doesn't push the content below it (filters,
   pagination) out of view. */
.group-details > summary.group-title { cursor: pointer; list-style: revert; }
.group-details > summary.group-title::marker { color: var(--text-muted); }

.error-details { max-width: 360px; }
.error-details summary { cursor: pointer; color: var(--danger); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.error-details[open] summary { white-space: normal; overflow-wrap: anywhere; }
.error-details__full {
  margin: 6px 0 0;
  padding: 8px;
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow-y: auto;
}

.table-scroll { overflow-x: auto; margin-bottom: 20px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.table-scroll .table { margin-bottom: 0; }
.table-scroll::-webkit-scrollbar { height: 10px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* Копия горизонтальной полосы прокрутки над широкой таблицей
   (.table-scroll[data-top-scroll], tableTopScroll.js) — чтобы не листать вниз
   до конца страницы ради сдвига вбок. Без scrollbar-width: с ним Chrome
   берёт системную полосу, а на macOS она скрыта, пока не начнёшь листать. */
.table-scroll-top { overflow-x: auto; overflow-y: hidden; margin-bottom: 2px; }
.table-scroll-top[hidden] { display: none; }
.table-scroll-top > div { height: 1px; }
.table-scroll-top::-webkit-scrollbar { height: 10px; }
.table-scroll-top::-webkit-scrollbar-track { background: var(--table-head-bg); border-radius: 6px; }
.table-scroll-top::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.table-scroll-top::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Tables that scroll internally (their own vertical scrollbar) instead of the whole page —
   used on поставки/упаковка listing and detail tables. Sticky thead keeps column headers
   (and their click-to-filter popovers) visible while scrolling the body. */
.table-scroll--tall { max-height: 65vh; overflow-y: auto; }
/* overflow: hidden у .table (для скругления углов) делает таблицу контейнером
   прокрутки для sticky, и шапка уезжает вместе со строками. Рамка под шапкой —
   тенью: при border-collapse нижняя граница th не едет вместе с липкой ячейкой. */
.table-scroll--tall .table { overflow: visible; }
.table-scroll--tall .table thead th { position: sticky; top: var(--dt-toolbar-h, 0px); z-index: 2; box-shadow: inset 0 -2px 0 var(--table-head-border); }
/* Панель dataTable.js (поиск, «По 50») внутри такой прокрутки липнет вместе
   с шапкой; её высоту dataTable.js кладёт в --dt-toolbar-h — на неё и
   сдвинута липкая шапка. */
.table-scroll--tall > .dt-toolbar { position: sticky; top: 0; z-index: 3; margin: 0; padding-bottom: 8px; background: var(--bg); }
/* Около пяти строк, остальное — прокруткой (история действий поставки). */
.table-scroll--short { max-height: 320px; }
.table__cell--truncate { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.table__cell--nowrap { white-space: nowrap; }
.table__cell--code { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.table th, .table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
.table tr:last-child td { border-bottom: none; }
.table th { position: relative; background: var(--table-head-bg); color: var(--text); font-weight: 600; font-size: 12px; white-space: nowrap; border-bottom: 2px solid var(--table-head-border); }
.table__actions { display: flex; gap: 10px; align-items: center; }
/* На самой <td> flex выбивает ячейку из табличной раскладки — её высота и
   нижняя граница перестают совпадать со строкой, кнопки «съезжают». Ячейка
   остаётся table-cell, кнопки/формы встают в ряд как inline-block. */
td.table__actions { display: table-cell; white-space: nowrap; vertical-align: middle; }
td.table__actions > form { display: inline-block; }
td.table__actions > * { vertical-align: middle; }
td.table__actions > * + * { margin-left: 6px; }
.table tfoot td { background: var(--table-head-bg); font-weight: 600; border-top: 2px solid var(--table-head-border); }

/* Excel-style "click header to filter" — a th wraps its label in a button
   (th-filter__trigger) that opens a small popover (th-filter__popover) with
   either a select or a text input. Wired up by tableHeaderFilters.js;
   see partials/thFilter.ejs for the markup this styles. */
.th-filter__trigger { display: flex; align-items: center; gap: 4px; width: 100%; background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: inherit; color: inherit; text-align: left; cursor: pointer; }
.th-filter__trigger:hover { color: var(--primary); }
.th-filter__caret { font-size: 9px; color: var(--text-muted); }
.th-filter--active .th-filter__trigger, .th-filter--active .th-filter__caret { color: var(--primary); }
.th-filter--active { background: rgba(37, 99, 235, 0.16); }
.th-sort__trigger { display: inline-flex; align-items: center; background: none; border: none; padding: 0; margin: 0 0 0 4px; font-size: 9px; color: var(--text-muted); cursor: pointer; }
.th-sort__trigger:hover { color: var(--primary); }
.th-sort--asc .th-sort__trigger, .th-sort--desc .th-sort__trigger { color: var(--primary); }
.th-filter__popover { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px; min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); padding: 8px; display: flex; flex-direction: column; gap: 6px; font-weight: 400; text-transform: none; white-space: normal; }
.th-filter__popover[hidden] { display: none; }
.th-filter__popover select, .th-filter__popover input[type="text"] { width: 100%; margin: 0; font-size: 13px; }
.th-filter__popover-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* Фильтр-список с галками (partials/checkFilter.ejs) — фильтр столбца в
   духе Excel, но не в <thead>, а в верхней форме фильтров страницы:
   значения там серверные (гонят SQL), а сама таблица под ними может быть
   клиентской (dataTable.js), так что в заголовок его не вставить. Поповер
   открывает тот же tableHeaderFilters.js по data-th-filter-* атрибутам. */
.check-filter { position: relative; display: inline-flex; }
.check-filter__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font: inherit; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; }
.check-filter__trigger:hover { border-color: var(--primary); }
.check-filter__trigger--active { border-color: var(--primary); color: var(--primary); }
.check-filter__label { color: var(--text-muted); }
.check-filter__summary { font-variant-numeric: tabular-nums; }
.check-filter__caret { font-size: 9px; color: var(--text-muted); }
.check-filter__popover { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.check-filter__popover[hidden] { display: none; }
.check-filter__list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.check-filter__row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; font-size: 13px; cursor: pointer; }
.check-filter__row:hover { background: var(--table-head-bg); }
.check-filter__row input { margin: 0; }
.check-filter__text { flex: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.check-filter__count { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.check-filter__row--all { border-bottom: 1px solid var(--border); margin-bottom: 2px; padding-bottom: 6px; }
.check-filter__actions { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }

/* Top-5 packer boards on the dashboard: compact BI-style cards in a row
   (today / yesterday / 7 days) instead of full-width tables stacked one
   under another. 1st place gets a small cup, 2nd/3rd a silver/bronze medal,
   plus a faint matching row tint. */
.kpi-board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-board { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.kpi-board__title { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.kpi-board__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
.kpi-board__head .kpi-board__title { margin: 0; }
.kpi-board__list { list-style: none; margin: 0; padding: 0; }
.kpi-board__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px; border-radius: 5px; font-size: 13px; }
.kpi-board__row .rank-icon { display: inline-block; min-width: 1.6em; margin-right: 5px; font-size: 13px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kpi-board__value { font-weight: 600; }
.kpi-board__link { display: inline-block; margin-top: 8px; font-size: 12px; }
.kpi-board .rank-row--1 { background: rgba(234, 179, 8, 0.12); }
.kpi-board .rank-row--2 { background: rgba(148, 163, 184, 0.14); }
.kpi-board .rank-row--3 { background: rgba(180, 83, 9, 0.12); }

/* Matching page: 3-level header (marketplace/source -> cabinet -> column).
   Each level shades a bit darker toward the top so the grouping reads at a
   glance; col-group-start/col-cabinet-start draw vertical dividers down
   through header and body alike, so wide tables stay easy to trace. */
.table--matching thead tr:nth-child(1) th { background: var(--badge-muted-bg); color: var(--text); font-weight: 700; font-size: 12px; text-transform: none; }
.table--matching thead tr:nth-child(2) th { background: var(--bg); }
.table--matching th.col-group-start, .table--matching td.col-group-start { border-left: 2px solid var(--border); }
.table--matching th.col-cabinet-start, .table--matching td.col-cabinet-start { border-left: 1px dashed var(--border); }

.group-title { color: var(--text-muted); margin: 20px 0 8px; }
.group-title:first-of-type { margin-top: 0; }

.badge { padding: 1px 7px; border-radius: 999px; font-size: 11px; }
.badge--ok { background: var(--badge-ok-bg); color: var(--badge-ok-text); }
.badge--danger { background: var(--badge-danger-bg); color: var(--badge-danger-text); }
.badge--muted { background: var(--badge-muted-bg); color: var(--badge-muted-text); }
.badge--warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
/* Золотой — «наш» КИЗ юрлица с цветом gold (КингПро), см. kizStatusRules.js. */
.badge--gold { background: var(--badge-gold-bg); color: var(--badge-gold-text); }
/* Оранжевый — КИЗ другого юрлица по Честному знаку (проверка «ЭЗ → ЧЗ»). */
.badge--orange { background: var(--badge-orange-bg); color: var(--badge-orange-text); }

/* Сводка статусов проверки КИЗ над таблицей заказов (станции, поставка WB). */
.kiz-summary { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; font-size: 13px; }
.kiz-summary:empty { display: none; }
.kiz-summary .badge { font-size: 12px; padding: 2px 9px; }
.kiz-summary__title { color: var(--text-muted); }
.kiz-summary__alert { flex-basis: 100%; margin: 6px 0 0; }
/* Бейджи КИЗ, которые kizStatusLive.js дописывает в ячейку кода/заказа. */
.kiz-status-slot { display: block; margin-top: 2px; }
.kiz-status-slot:empty { display: none; }
/* Метка источника проверки КИЗ (ЭЗ / ЭЗ → ЧЗ) рядом с бейджем владельца. */
.kiz-source { white-space: nowrap; cursor: help; }
/* КИЗ «Не в обороте …» — цвет владельца остаётся, плюс красная обводка. */
.kiz-badge--out { box-shadow: inset 0 0 0 1.5px var(--badge-danger-text); }
/* Журнал проверок КИЗ: бейдж итога одной строкой, без переносов по словам. */
.kiz-log__result { white-space: nowrap; }

.cards-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cards-grid li { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot--ok { background: var(--badge-ok-text); }
.status-dot--danger { background: var(--badge-danger-text); }
.status-dot--warning { background: var(--badge-warning-text); }
.status-dot--muted { background: var(--badge-muted-text); }
.status-dot--running { background: var(--status-running); animation: status-pulse 1.4s ease-in-out infinite; }

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.task-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.task-row { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }
.task-row__main { display: flex; align-items: center; gap: 10px; }
.task-row__title { display: flex; align-items: baseline; gap: 8px; flex: 1; }
.task-row__title strong { font-weight: 500; font-size: 13px; }
.task-row__meta { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }
.task-row__actions { display: flex; align-items: flex-start; gap: 14px; margin-top: 10px; }
.task-row__actions form { max-width: none; }

.news-feed { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.news-post { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.news-post__date { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.news-post__title { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.news-post__body { margin: 0; line-height: 1.5; white-space: pre-wrap; }
.news-post__actions { display: flex; gap: 12px; margin-top: 12px; font-size: 12px; }
.news-post__actions form { max-width: none; }

.tag { font-size: 11px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; text-transform: uppercase; }
.tag--warn { color: var(--badge-warning-text); border-color: var(--badge-warning-text); text-transform: none; }
.tag--type { color: var(--primary); border-color: var(--primary); text-transform: none; }
.tag--ok { color: var(--badge-ok-text); border-color: var(--badge-ok-text); text-transform: none; }
.tag--danger { color: var(--badge-danger-text); border-color: var(--badge-danger-text); text-transform: none; }

.schedule-form summary { cursor: pointer; font-size: 12px; color: var(--primary); }
.schedule-form form { max-width: none; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.schedule-form__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 8px; font-size: 12px; }
.schedule-form__row label { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--text); font-size: 12px; }
.schedule-form__num { width: 46px; display: inline-block; }
.schedule-form__cron { width: 160px; display: inline-block; }
.schedule-form .hint { margin: 0 0 8px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
/* Строка фильтров тянется на всю ширину страницы, а не в 420px обычной формы. */
form.filters { max-width: none; }
.filters select { width: auto; }
.filters input[type="text"], .filters input[type="date"] { width: auto; }
.filters__label { font-size: 13px; color: var(--text-muted); }

/* Toggle chips for a multi-select filter (e.g. lamodaBatchNew.ejs's "Отгрузить"
   dates) — a row of checkboxes styled as pills, checked state filled with
   --primary. Visually part of .filters, not a separate component. */
.filters__checkboxes { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }

/* Фильтры отчёта в рамке, несколькими строками (fbsOrderLines/index.ejs):
   период + поиск + кнопки сверху, флажки слева и выгрузка справа снизу. */
.filters--panel { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.filters--panel label { margin: 0; }
.filters--panel input, .filters--panel select { margin-top: 0; }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.filters__row--split { justify-content: space-between; }
.filters__field { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.filters__search { flex: 1 1 260px; min-width: 200px; }
.filters__export { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); }

.pagination { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-muted); margin-top: 10px; }
.pagination select { width: auto; }
.pagination a { padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.pagination a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

form.wide-form { max-width: 640px; }
/* A <form> wrapping a selection table (checkbox + table.table-scroll,
   e.g. lamodaBatchNew.ejs, ozonBatchNew.ejs, wbSupplies/show.ejs's "Добавить
   заказы") needs to fill the page's own width, not the 420px default meant
   for small login/settings forms — that global rule was clipping the table
   inside it regardless of how wide the surrounding .container was. */
form.form--table { max-width: none; }

.field-group { border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px 14px; margin-bottom: 16px; }
.field-group legend { font-size: 12px; color: var(--text-muted); padding: 0 4px; }
.field-group label.checkbox { margin-bottom: 8px; }

.map-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.map-row__label { width: 80px; flex-shrink: 0; color: var(--text-muted); }

.code-box { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow-x: auto; white-space: pre; }

/* Номер стикера WB (partA/partB) — как на самой этикетке: первый блок мельче, второй крупнее. */
.sticker-num { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sticker-num__a { font-size: 11px; color: var(--text-muted); }
.sticker-num__b { font-size: 15px; font-weight: 700; }
.map-row label { display: flex; align-items: center; gap: 4px; margin: 0; width: auto; font-size: 12px; color: var(--text); }
.map-row input[type="text"] { width: 180px; display: inline-block; margin: 0; }

.campaign-list { margin-bottom: 14px; }
.campaign-list__label { font-size: 13px; color: var(--text); margin-bottom: 6px; }
.campaign-list__row input[type="text"] { width: 140px; }
.campaign-list__row select { width: auto; margin: 0; }

/* Warehouse priority page: draggable rows for the active list, a plain
   (non-draggable) table below for disabled warehouses. */
.table--reserve-flags { table-layout: fixed; }
.table--reserve-flags td { word-break: break-word; }
.table--reserve-flags .rf-col-flag { width: 200px; text-align: center; }

.table--warehouses .wh-col-drag { width: 24px; text-align: center; color: var(--text-muted); cursor: grab; user-select: none; }
.table--warehouses .wh-col-pos { width: 32px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wh-col-extid { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wh-row[draggable="true"] { cursor: default; }
.wh-row.dragging { opacity: 0.4; }
.wh-row--disabled { color: var(--text-muted); }
.wh-row--disabled .tag { opacity: 0.7; }

.wh-sources-cell { min-width: 220px; }
.wh-sources { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wh-sources li { display: flex; align-items: center; gap: 6px; font-size: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; }
.wh-sources__rank { color: var(--text-muted); min-width: 12px; }
.wh-sources__name { flex: 1; }
.wh-sources__move, .wh-sources__remove { background: none; border: none; padding: 0 2px; color: var(--text-muted); cursor: pointer; font-size: 11px; line-height: 1; }
.wh-sources__move:hover, .wh-sources__remove:hover { color: var(--text); }
.wh-sources__move:disabled { opacity: 0.25; cursor: default; }
.wh-sources__move:disabled:hover { color: var(--text-muted); }
.wh-sources__remove:hover { color: var(--danger); }
.wh-sources__fallback, .wh-sources__below { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); white-space: nowrap; }
.wh-sources input[type="number"].wh-sources__below-input { width: 56px; display: inline-block; margin: 0; padding: 1px 4px; font-size: 12px; text-align: center; }
.fbs-source-form { display: inline; }
.fbs-source-form select { font-size: 12px; max-width: 220px; }
.wh-sources__add { display: flex; align-items: center; gap: 6px; }

.distribution-mode label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin: 0; }
.distribution-mode select { width: auto; margin: 0; }
.table--distribution td, .table--distribution th { text-align: center; }
.table--distribution td:nth-child(1), .table--distribution td:nth-child(2), .table--distribution td:nth-child(3),
.table--distribution th:nth-child(1), .table--distribution th:nth-child(2), .table--distribution th:nth-child(3) { text-align: left; }

.wh-col-minmax { width: 160px; }
.wh-limits-cell { display: flex; align-items: center; gap: 4px; }
.wh-limits-cell input[type="number"] { width: 44px; display: inline-block; margin: 0; padding: 3px 4px; font-size: 12px; text-align: center; }
.wh-limits__sep { color: var(--text-muted); }
.wh-limits-cell--invalid input[type="number"] { border-color: var(--danger); }
.wh-limits-cell--saved input[type="number"] { border-color: var(--badge-ok-text); }

.cabinet-fbo-cell input[type="number"] { width: 60px; display: inline-block; margin: 0; padding: 3px 4px; font-size: 12px; text-align: center; }
.wh-sources__add-select { width: auto; display: inline-block; margin: 0; font-size: 12px; padding: 3px 6px; }

.wbs-row--disabled { color: var(--text-muted); }
.wbs-row--disabled .tag { opacity: 0.7; }
.los-row--partial { background: var(--row-partial-bg); }
.los-row--current { background: var(--badge-warning-bg); }
/* Станции: заказ начат — несобранные строки оранжевым (кроме текущего, он и так
   подсвечен), собранные — зелёным. Порядок правил задаёт приоритет. */
.los-row--done { background: var(--row-done-bg); }
/* Последние 4 цифры кода ScanIt — как на этикетке Ozon: крупно, белым по чёрному. */
.ols-scanit-tail { font-weight: 700; color: var(--surface); background: var(--text); padding: 0 3px; border-radius: 3px; margin-left: 2px; }
/* Станция Спортмастера: панель упаковки — узкое поле веса рядом с подписью. */
.sms-package { margin-bottom: 12px; }
.sms-package label .sms-weight { width: 7em; display: inline-block; margin: 0 0 0 6px; }
.smt-table select { width: auto; min-width: 7em; margin: 0; }
.smt-table input[type="text"], .smt-table input[type="number"] { width: 6em; margin: 0; }
.smt-new input[type="text"], .smt-new input[type="number"] { width: 9em; display: inline-block; margin: 0; }
.wbs-force { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; }
.wbs-force label { display: flex; align-items: center; gap: 6px; margin: 0; }
.wbs-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-top: 16px; }
.wbs-actions label { margin-bottom: 0; }
.wbs-inline-form { display: inline; margin: 0; }

/* Модификатор для форм закрытия нескольких поставок разом (Lamoda/Детский
   мир, .../shipments/index.ejs) — то же содержимое .wbs-actions, но в
   отдельной карточке под таблицей поставок, а не просто рядом с ней: полей
   много (дата/слот/документ/машина), без визуальной рамки они тонут в
   таблице над ними. */
.wbs-actions--panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
/* flex-grow: 0 — иначе последнее поле в неполной строке (типичный случай:
   "Марка машины" одна на строке рядом с кнопкой) растягивается на всё
   оставшееся место вместо того, чтобы остаться того же размера, что и
   остальные поля ряда. */
.wbs-actions--panel label { flex: 0 1 200px; min-width: 140px; max-width: 220px; }
.wbs-actions--panel .hint { flex-basis: 100%; margin-top: 0; }
.wbs-actions--panel button { flex: 0 0 auto; }

/* barcodeLabeling/batch.ejs's label-template picker + preview image, side
   by side on desktop; narrowed on mobile in the @media block above. */
.bl-template-row { display: flex; align-items: center; gap: 12px; }

.ls-scan-box { margin: 20px 0; }
.ls-scan-box input[type="text"] { font-size: 20px; padding: 10px; width: 100%; max-width: 420px; }
.ls-reprint-btn { margin: 8px 0 0 8px; vertical-align: bottom; }
.ls-result { margin-top: 16px; }
.ls-photo { display: block; max-width: 260px; max-height: 260px; margin-top: 12px; border: 1px solid var(--border); border-radius: 6px; }
.ls-photo[hidden] { display: none; }
.pkg-row > .ls-photo { margin-top: 0; align-self: flex-start; }
/* Станция возвратов: фото принятого товара крупнее, чем на станциях оклейки —
   оператору надо сверить вернувшийся товар с карточкой, а не просто заметить. */
.rt-photo { display: block; max-width: min(420px, 100%); max-height: 420px; margin-top: 12px; border: 1px solid var(--border); border-radius: 6px; }
.rt-photo[hidden] { display: none; }
/* Свод возврата: строка-итог артикула над его размерами. */
.table__row--group td { background: var(--table-head-bg); }

/* dataTable.js — search/filter/pagination bar injected above/below a plain
   <table>. Same visual language as .filters (flex row, small gaps). */
.dt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
/* .dt-toolbar input/select — иначе глобальное input[type="text"]/select
   { width: 100% } (специфичнее одного класса) растягивает их на всю строку. */
.dt-toolbar input.dt-toolbar__search { width: auto; min-width: 260px; margin: 0; }
.dt-toolbar select.dt-toolbar__page-size { width: auto; margin: 0; }
.dt-toolbar__count { font-size: 13px; color: var(--text-muted); margin-left: auto; }
.dt-reset { background: none; border: none; padding: 0; color: var(--primary); font-size: 13px; cursor: pointer; }
.dt-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 20px; font-size: 13px; color: var(--text-muted); }
.dt-pagination button { padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); cursor: pointer; }
.dt-pagination button:disabled { opacity: 0.4; cursor: default; }

.bc-thumb { display: block; width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); }
.bc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bc-actions form { margin: 0; }
.bc-help { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); }
.bc-help summary { cursor: pointer; }
.bc-help ul { margin: 8px 0 0; padding-left: 20px; }
.bc-search { max-width: none; }
.bc-search input[type="text"] { width: 320px; }
.bc-table td { vertical-align: middle; }
.bc-table .muted { color: var(--text-muted); }
.bc-nowrap { white-space: nowrap; }
.bc-clip { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.photo-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out; padding: 24px; }
.photo-modal[hidden] { display: none; }
.photo-modal img { max-width: 90vw; max-height: 90vh; border-radius: 8px; }

/* Блокирующее уведомление о дубле КИЗ (station.js/packingStation.js) — тот
   же оверлей, что и .photo-modal, но с карточкой вместо фото и БЕЗ закрытия
   по клику на фон: снять блокировку можно только кнопкой "Понятно" — иначе
   следующий же скан (сканер сам дописывает Enter) молча закрыл бы
   предупреждение, ровно то, что это уведомление обязано не допустить. */
.pk-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.pk-modal[hidden] { display: none; }
.pk-modal__card { background: var(--surface); border-radius: 8px; padding: 24px; max-width: 420px; width: 100%; }
.pk-modal__card h2 { margin-top: 0; color: var(--badge-danger-text); }
.pk-modal__card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 16px 0; font-size: 14px; }
.pk-modal__card dt { color: var(--text-muted); }
.pk-modal__card dd { margin: 0; }

/* Generic popup (data-modal-open/data-modal-close, formHelpers.js) — same
   overlay pattern as .pk-modal/.photo-modal above, but closable by backdrop
   click/Escape since it isn't a blocking warning. */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.modal[hidden] { display: none; }
.modal__card { background: var(--surface); border-radius: 8px; padding: 24px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal__card h2 { margin-top: 0; }

/* Карточка заявки на упаковку (packing/request.ejs): генерация коробов и
   загрузка коробов WB на вкладке «Короба». Страницу открывают и с ТСД
   (коды коробов WB сканируют в поле подряд): всё, по чему тычут пальцем,
   не ниже 36px, строки переносятся, а не уезжают вбок. */
.pr-box-tools { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.pr-generate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: none; margin: 0; }
.pr-generate__label { font-size: 13px; color: var(--text-muted); }
.pr-generate input[type="number"] { width: 80px; margin: 0; }
.pr-generate .hint { flex: 1 1 260px; margin: 0; }
.pr-wb-add { margin: 0; }
.pr-wb-add textarea { font-size: 15px; margin: 0 0 8px; }
.pr-wb-add__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pr-wb-add__row .hint { flex: 1 1 220px; margin: 0; }
@media (max-width: 720px) {
  .pr-box-tools .btn, .print-bar .btn { min-height: 36px; }
  .table__actions .btn--icon { min-width: 36px; min-height: 36px; }
}

/* Форма роли (roles/form.ejs): права группами в колонках. */
.user-form .user-form__narrow { max-width: 460px; }
.user-form .user-form__group { display: inline-block; vertical-align: top; min-width: 220px; margin: 0 24px 10px 0; }
.user-form .user-form__group-title { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }

/* «Принудительно на FBS» / «Не ставить на FBS» (distribution/forceFbs.ejs) */
.force-fbs__group { margin-bottom: 10px; }
.force-fbs__group-title { margin-bottom: 4px; }
.force-fbs__submit { display: flex; gap: 12px; align-items: center; margin: 12px 0; }
.force-fbs__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.force-fbs__chip { display: inline-flex; align-items: center; gap: 6px; max-width: none; margin: 0; padding: 2px 4px 2px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; background: var(--surface); }
.force-fbs__chip-remove { background: none; border: none; padding: 0 4px; cursor: pointer; color: var(--text-muted); font-size: 15px; line-height: 1; }
.force-fbs__chip-remove:hover { color: var(--danger, #dc2626); }

.faq-shot {
  margin: 8px 0 20px;
}
.faq-shot img,
.faq-shot video {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.faq-shot figcaption {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

/* Товарная этикетка: список шаблонов, конструктор, переключатель на станции */
.pl-templates { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.pl-template { width: 260px; }
.pl-template__name { font-weight: 600; margin: 6px 0 2px; }
.pl-preview svg { display: block; width: 100%; height: auto; border: 1px solid var(--border); background: #fff; }
.pl-control select { display: inline-block; width: auto; margin: 0 4px 0 0; }
.pl-control .hint { display: inline; margin-left: 6px; }
.pk-product-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; }
.pk-product-label label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: normal; }
.pk-product-label input[type="checkbox"] { width: auto; margin: 0; }
.pl-control--forced #plMode { outline: 2px solid var(--badge-warning-text); outline-offset: 1px; }

/* Конструктор шаблона товарной этикетки */
.pte-head-actions { display: flex; gap: 8px; }
.pte-name { max-width: 520px; }
.pte-toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 8px 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.pte-toolbar label { margin: 0; }
.pte-toolbar select, .pte-toolbar input[type="number"] { display: inline-block; width: auto; }
.pte-toolbar input[type="number"] { width: 72px; }
.pte-toolbar label.checkbox { display: flex; align-items: center; gap: 4px; padding-bottom: 6px; }
.pte-toolbar__custom { padding-bottom: 6px; }
.pte-toolbar__custom[hidden] { display: none; }
.pte-toolbar__group { display: flex; gap: 4px; }
.pte-toolbar__group .btn { min-width: 36px; font-size: 16px; padding: 4px 8px; }
.pte-palette { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.pte-palette__title { color: var(--text-muted); font-size: 13px; margin-right: 4px; }
.pte-palette__link { margin-left: auto; font-size: 13px; white-space: nowrap; }
.pte-chip { padding: 4px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; }
.pte-chip:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pte-chip:disabled { opacity: 0.45; cursor: default; }

.pte-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .pte-workspace { grid-template-columns: minmax(0, 1fr); } }
.pte-stage-col { min-width: 0; overflow-x: auto; padding: 12px; background: repeating-conic-gradient(var(--bg) 0% 25%, var(--border) 0% 50%) 50% / 16px 16px; border-radius: 6px; }
.pte-stage { position: relative; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); user-select: none; touch-action: none; }
.pte-stage__svg, .pte-stage__svg svg { display: block; width: 100%; height: 100%; }
.pte-stage__overlay { position: absolute; inset: 0; }
.pte-stage__overlay--grid {
  background-image:
    linear-gradient(to right, rgba(37, 99, 235, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.07) 1px, transparent 1px);
  background-size: var(--mm) var(--mm);
}
.pte-stage-col .hint, .pte-stage-col p { background: var(--surface); padding: 2px 6px; border-radius: 4px; display: inline-block; }
.pte-box { position: absolute; box-sizing: border-box; border: 1px dashed rgba(37, 99, 235, 0.55); cursor: move; }
.pte-box--empty { border-color: #9ca3af; background: repeating-linear-gradient(45deg, rgba(156, 163, 175, 0.12) 0 4px, transparent 4px 8px); }
.pte-box--selected { border: 1px solid var(--primary); background-color: rgba(37, 99, 235, 0.06); z-index: 2; }
.pte-box__label { position: absolute; left: -1px; bottom: 100%; padding: 0 4px; font-size: 10px; line-height: 14px; color: #fff; background: var(--primary); white-space: nowrap; opacity: 0; pointer-events: none; }
.pte-box:hover .pte-box__label, .pte-box--selected .pte-box__label { opacity: 1; }
.pte-box--empty .pte-box__label { background: #6b7280; opacity: 1; }
.pte-handle { position: absolute; width: 9px; height: 9px; background: #fff; border: 1px solid var(--primary); box-sizing: border-box; }
.pte-handle--nw { left: -5px; top: -5px; cursor: nwse-resize; }
.pte-handle--n { left: calc(50% - 4px); top: -5px; cursor: ns-resize; }
.pte-handle--ne { right: -5px; top: -5px; cursor: nesw-resize; }
.pte-handle--e { right: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.pte-handle--se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.pte-handle--s { left: calc(50% - 4px); bottom: -5px; cursor: ns-resize; }
.pte-handle--sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.pte-handle--w { left: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.pte-guide { position: absolute; background: #ec4899; pointer-events: none; z-index: 3; }
.pte-guide--x { top: 0; bottom: 0; width: 1px; }
.pte-guide--y { left: 0; right: 0; height: 1px; }
.pte-help { margin-top: 8px; background: var(--surface); padding: 6px 10px; border-radius: 4px; font-size: 13px; }

.pte-side { display: flex; flex-direction: column; gap: 12px; }
.pte-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
.pte-panel h2 { font-size: 14px; margin: 0 0 8px; }
.pte-panel label { margin-bottom: 6px; }
.pte-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.pte-row input[type="text"] { flex: 1; min-width: 140px; margin: 0; }
.pte-props__title { font-weight: 600; margin: 0; }
.pte-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0; }
.pte-field { display: flex; flex-direction: column; font-size: 12px; color: var(--text-muted); margin: 0; }
.pte-field input, .pte-field select, .pte-field textarea { margin-top: 2px; padding: 4px 6px; }
.pte-field--wide { margin: 6px 0; }
.pte-check { font-size: 13px; color: var(--text); }
.pte-check input { width: auto; margin: 0; }
.pte-place-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.pte-place { padding: 2px 8px; min-width: 32px; font-size: 14px; }
.pte-layers { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.pte-layer { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.pte-layer:hover { background: var(--bg); }
.pte-layer--selected { background: rgba(37, 99, 235, 0.1); }
.pte-layer__name { font-weight: 500; white-space: nowrap; }
.pte-layer__value { flex: 1; min-width: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.pte-layer__actions { margin-left: auto; display: flex; gap: 0; }
.pte-icon { padding: 0 5px; font-size: 13px; }

/* Оклейка ШК: выбор этикетки заказа */
.bl-label-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 8px 0 0; }
.bl-label-form label { display: flex; align-items: center; gap: 6px; margin: 0; }
.bl-label-form select { display: inline-block; width: auto; max-width: 420px; margin: 0; }
.bl-label-preview { height: 110px; border: 1px solid var(--border); background: #fff; }

/* Общие мелочи: крошки над заголовком, моноширинные коды/ШК, полоса
   прогресса, вкладки и чипы-фильтры (первое применение — карточка
   поставки упаковки, packing/supply.ejs). */
.breadcrumbs { display: flex; gap: 6px; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.btn--with-icon { display: inline-flex; align-items: center; gap: 6px; }
.btn--with-icon svg { width: 15px; height: 15px; }

.progress { display: block; height: 6px; border-radius: 999px; background: var(--badge-muted-bg); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .3s; }
.progress--done > span { background: var(--badge-ok-text); }
.progress--lg { height: 10px; margin: 10px 0 8px; }

.tabs { display: flex; gap: 2px; margin: 24px 0 14px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs__tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; margin-bottom: -1px; background: none; border: none; border-bottom: 2px solid transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.tabs__tab:hover { color: var(--text); text-decoration: none; }
.tabs__tab.is-active { color: var(--text); border-bottom-color: var(--primary); }
.tabs__count { padding: 1px 8px; border-radius: 999px; background: var(--badge-muted-bg); color: var(--badge-muted-text); font-size: 12px; font-weight: 500; }
.tabs__tab.is-active .tabs__count { background: var(--primary); color: #fff; }
.tabs__count--danger, .tabs__tab.is-active .tabs__count--danger { background: var(--badge-danger-bg); color: var(--badge-danger-text); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.chip span { color: var(--text-muted); font-size: 12px; }
.chip:hover:not(:disabled) { border-color: var(--text-muted); }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip.is-active span { color: rgba(255, 255, 255, .8); }
.chip:disabled { opacity: .45; cursor: default; }

/* Карточка с вкладками: поставка упаковки, возврат (detailTabs.js) */
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.head-actions form { margin: 0; }
.head-actions__sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.meta-list { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 18px; }
.meta-list dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.meta-list dd { margin: 2px 0 0; font-size: 14px; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.stat-card { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: inherit; text-align: left; }
.stat-card--wide { grid-column: span 2; }
.stat-card--done { border-color: var(--badge-ok-text); background: linear-gradient(0deg, var(--badge-ok-bg), var(--surface) 70%); }
.stat-card--link { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.stat-card--link:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(37, 99, 235, .12); }
.stat-card__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.stat-card__value { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-card__of { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.stat-card__pct { margin-left: auto; font-size: 20px; color: var(--primary); }
.stat-card--done .stat-card__pct { color: var(--badge-ok-text); }
.stat-card__sub { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.stat-card__list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.stat-card__list li { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.stat-card__list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-card__list b { font-variant-numeric: tabular-nums; }
.stat-card__more { color: var(--text-muted); font-size: 12px; }

.panel-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ps-add-form { display: flex; align-items: center; gap: 6px; max-width: none; margin: 0; }
.ps-add-form input { margin: 0; }
.ps-add-form input[type="text"] { width: 170px; }
.ps-add-form input[type="number"] { width: 72px; }
.ps-hint { margin: -8px 0 0; }
.table .ps-qty-input { width: 80px; margin: 0; padding: 3px 6px; }
.table td form { margin: 0; }
/* Форма-кнопка рядом со ссылкой в ячейке и поле количества в строке (заявки на коды). */
.inline-form { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.inline-qty input { width: 90px; margin: 0; }
/* Отчёт широкий и листается вбок — строка в одну линию, без переносов. */
.table--fbs-orders td { white-space: nowrap; }
.row-progress { display: flex; align-items: center; gap: 10px; }
.row-progress__num { min-width: 64px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-progress .progress { width: 90px; flex: none; }
.text-muted { color: var(--text-muted); }
.empty-state { padding: 36px 16px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 10px; }
.print-bar { padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.print-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.print-bar label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--text-muted); }
.print-bar select { width: auto; min-width: 180px; margin: 0; }
.check-total { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.rt-plan { margin-top: 16px; }
.rt-plan > summary { list-style: none; }
.rt-plan > summary::-webkit-details-marker { display: none; }
.rt-plan[open] > summary { margin-bottom: 10px; }
.rt-plan form { max-width: 640px; }

@media (max-width: 720px) {
  .stat-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  /* Первая (--wide) — на всю строку, дальше по две; последняя без пары — тоже на всю. */
  .stat-card--wide, .stat-card:last-child:nth-child(even) { grid-column: 1 / -1; }
  .stat-card__value { font-size: 22px; }
  .head-actions__sep { display: none; }
  .ps-add-form { flex-wrap: wrap; }
}

/* Станция упаковки (packing/station.ejs, packingStation.js) — рабочее место
   кладовщика: ПК и ТСД. Поле сканирования крупное, шрифт ≥16px (меньше —
   Android-Chrome зумит страницу при фокусе), кнопки — с запасом под палец. */
.st-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.st-head__supply { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.st-scan { margin: 4px 0 14px; padding: 14px 16px 16px; background: var(--surface); border: 2px solid var(--primary); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.st-scan[data-state="box"] { border-color: var(--text-muted); }
.st-scan[data-state="kiz"] { border-color: var(--badge-warning-text); box-shadow: 0 0 0 4px var(--badge-warning-bg); }
.st-scan.is-unfocused { border-color: var(--danger); box-shadow: 0 0 0 4px var(--badge-danger-bg); }
.st-scan__prompt { margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.st-scan[data-state="kiz"] .st-scan__prompt { color: var(--badge-warning-text); }
.st-scan input.st-scan__input { margin: 0; padding: 12px 14px; font-size: 22px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border-width: 2px; border-radius: 8px; }
.st-scan input.st-scan__input:focus { outline: none; border-color: var(--primary); }
/* Печать недоступна — скан не принимается (stationScan.js, printBlocker). */
input.scan-print-blocked, input.scan-print-blocked:focus { border-color: var(--danger); background: var(--error-bg); }
input.scan-print-blocked::placeholder { color: var(--error-text); opacity: 1; }
.st-scan__unfocused { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--badge-danger-bg); color: var(--badge-danger-text); font-weight: 600; cursor: pointer; }
.st-scan__unfocused[hidden] { display: none; }
.st-kiz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--badge-warning-bg); color: var(--badge-warning-text); font-size: 15px; }
.st-kiz[hidden] { display: none; }
.st-kiz strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.st-kiz__skip { min-height: 40px; padding: 8px 18px; font-size: 15px; }
.st-result-row { display: flex; gap: 12px; align-items: flex-start; }
.st-result-row .st-result { flex: 1; min-width: 0; }
.st-result-row .rt-photo { margin-top: 10px; max-width: min(260px, 100%); max-height: 260px; }
.st-result { margin-top: 10px; }
.st-result[hidden], .st-result__msg[hidden] { display: none; }
.st-result__msg { padding: 12px 14px; border-radius: 8px; font-size: 17px; font-weight: 600; line-height: 1.35; word-break: break-word; }
.st-result__msg--ok { background: var(--success-bg); color: var(--success-text); }
.st-result__msg--error { background: var(--error-bg); color: var(--error-text); }
.st-result__msg--warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.st-result__count { font-size: 30px; font-weight: 800; line-height: 1.1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.st-kiz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Станция возвратов: отметки брак/половинка/распаровка и добавление по артикулу. */
.rt-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.rt-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rt-marks__label { color: var(--text-muted); font-size: 14px; }
.rt-mark { min-height: 40px; }
.rt-mark[aria-pressed="true"] { background: var(--badge-danger-bg); color: var(--badge-danger-text); border-color: currentColor; font-weight: 600; }
.rt-article { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.rt-article[hidden] { display: none; }
.rt-article__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rt-article__row input { flex: 1 1 200px; margin: 0; min-width: 0; }
.rt-article__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.rt-article__sizes[hidden] { display: none; }
.rt-article__sizes .btn { min-width: 56px; min-height: 40px; }
.st-kiz__cancel { padding: 8px 10px; font-size: 15px; }
.st-boxview-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.st-printer { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text-muted); }
.st-printer select { width: auto; min-width: 220px; margin: 0; }
@keyframes st-flash { from { box-shadow: 0 0 0 4px currentColor; } to { box-shadow: 0 0 0 0 transparent; } }
.is-flash { animation: st-flash .6s ease-out; }
.st-box.is-flash { color: var(--primary); }
.st-box.is-flash .stat-card__label, .st-box.is-flash .stat-card__value { color: var(--text); }
.st-box.is-active { border-color: var(--primary); }
.st-box .stat-card__value { color: var(--text); }
.st-newbox { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.st-newbox__print { display: contents; }
.st-newbox .btn { white-space: nowrap; }
.st-newbox input[type="number"] { width: 64px; margin: 0; }
/* Тумблер — общий вид для checkbox.switch. */
input[type="checkbox"].switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 22px; margin: 0; border-radius: 999px; background: var(--border); cursor: pointer; transition: background .15s; }
input[type="checkbox"].switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; }
input[type="checkbox"].switch:checked { background: var(--primary); }
input[type="checkbox"].switch:checked::before { transform: translateX(18px); }
input[type="checkbox"].switch:disabled { opacity: .45; cursor: not-allowed; }
input[type="checkbox"].switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.st-print { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s, background .15s; }
.st-print.is-on { border-color: var(--primary); background: linear-gradient(90deg, rgba(37, 99, 235, .08), var(--surface) 60%); }
.st-label-toggle { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text); cursor: pointer; }
.st-label-toggle__text { display: flex; flex-direction: column; min-width: 200px; line-height: 1.25; }
.st-label-toggle__text strong { font-size: 14px; }
.st-label-toggle__hint { font-size: 12px; color: var(--text-muted); }
.st-print.is-on .st-label-toggle__hint { color: var(--primary); }
select.st-label-template { width: auto; min-width: 200px; margin: 0; }
.st-printers { margin-left: auto; }
.st-printers > summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.st-printers[open] { flex-basis: 100%; margin-left: 0; }
.st-printers__body { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px; }
.st-printers__body label { margin: 0; }
.st-printers__body select { width: auto; min-width: 220px; }
.st-sub { font-size: 11px; color: var(--text-muted); }
.st-time { white-space: nowrap; color: var(--text-muted); font-size: 12px; }
.st-empty { padding: 24px 12px; text-align: center; color: var(--text-muted); }
.st-journal tr.is-new td { animation: st-row .9s ease-out; }
@keyframes st-row { from { background: var(--success-bg); } }
.st-plan tbody.is-todo-only tr[data-done] { display: none; }
.st-plan tr.is-flash td { animation: st-row .9s ease-out; }
.st-plan tr.is-flash { animation: none; }

@media (max-width: 720px) {
  .st-scan { padding: 10px 12px 12px; }
  .st-scan__prompt { font-size: 16px; }
  .st-scan input.st-scan__input { font-size: 18px; }
  .st-result__msg { font-size: 15px; }
  .st-head h1 { font-size: 18px; }
  /* ТСД: что без печати с ПК бесполезно (статус QZ Tray, на станции упаковки —
     и создание коробов), страница помечает классом st-tsd-hide. В приложении
     ТСД с Bluetooth-принтером скрипт станции снимает класс с блока выбора
     принтера и кнопок коробов (tsdPrint.js). На станции возвратов кнопки коробов остаются:
     у склада возвратов короба создаются только со станции. */
  .st-tsd-hide { display: none; }
  .st-journal--returns th:nth-child(4), .st-journal--returns td:nth-child(4),
  .st-journal--returns th:nth-child(5), .st-journal--returns td:nth-child(5),
  .st-boxview th:nth-child(3), .st-boxview td:nth-child(3) { display: none; }
  .st-result-row { flex-direction: column; }
  .st-cards { grid-template-columns: 1fr; }
  .st-cards .stat-card { padding: 10px 12px; }
  .st-cards .stat-card__value { font-size: 20px; margin-top: 2px; }
  .st-cards .stat-card__pct { font-size: 16px; }
  .st-cards .progress--lg { margin: 6px 0 4px; }
  .st-plan [data-plan-done] { display: none; }
  .st-plan .row-progress .progress { width: 56px; }
  .st-journal th:nth-child(4), .st-journal td:nth-child(4) { display: none; }
}
.ps-add-form input.rt-line-input { width: 280px; }
.rt-lines { margin-top: 8px; }

/* Тепловая карта «день недели × час» (partials/heatmap.ejs): яркость ячейки — --heat (0–100%) от --primary поверх фона. */
.heatmap { border-collapse: separate; border-spacing: 2px; font-size: 11px; font-variant-numeric: tabular-nums; width: 100%; min-width: 640px; table-layout: fixed; }
/* Часы делят ширину поровну; подписи дней и «Итого» — узкие колонки по краям. */
.heatmap thead th:first-child { width: 32px; }
.heatmap thead th.heatmap__sum { width: 52px; }
.heatmap th { font-weight: 500; color: var(--text-muted); padding: 2px 4px; text-align: center; }
.heatmap tbody th, .heatmap tfoot th { text-align: left; }
.heatmap td { height: 22px; padding: 0 3px; text-align: center; border-radius: 4px; }
.heatmap__cell { background: color-mix(in srgb, var(--primary, #2563eb) var(--heat), var(--surface)); color: var(--text); }
.heatmap__cell--dark { color: #fff; }
.heatmap__total { color: var(--text-muted); }
.heatmap__legend { display: flex; align-items: center; gap: 8px; margin: 8px 0 20px; font-size: 12px; color: var(--text-muted); }
.heatmap__scale { width: 160px; height: 10px; border-radius: 4px; background: linear-gradient(to right, var(--surface), var(--primary, #2563eb)); border: 1px solid var(--border); }
.filters .pick-input, .pick-input { width: auto; min-width: 260px; }
/* Подробная карта: первая колонка — ФИО, длинное обрезается (полностью — в подсказке). */
.heatmap--staff thead th:first-child { width: 180px; text-align: left; }
.heatmap--staff tbody th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }

/* Упаковка (services/packaging/): чип вида — точка цвета вида из реестра (--pkg-color), «нет замера» — красный. */
.pkg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 12px; white-space: nowrap; border: 1px solid var(--pkg-color, var(--border)); background: color-mix(in srgb, var(--pkg-color, #6b7280) 14%, var(--surface)); color: var(--text); }
.pkg-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pkg-color, #6b7280); flex: none; }
.pkg-chip--missing { --pkg-color: var(--danger); color: var(--danger); font-weight: 600; }
.pkg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pkg-color, #6b7280); flex: none; }

/* Блок упаковки станций (partials/packagingBlock.ejs): фон и рамка 3px — цвет вида; «нет замера» — красный. */
.pkg-block { --pkg-color: var(--text-muted); margin: 0 0 14px; padding: 12px 16px 14px; border: 3px solid var(--pkg-color); border-radius: 12px; background: color-mix(in srgb, var(--pkg-color) 12%, var(--surface)); }
.pkg-block.is-missing { --pkg-color: var(--danger); }
.pkg-block__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 24px; }
.pkg-block__caption { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.pkg-block.is-missing .pkg-block__caption { color: var(--danger); font-size: 18px; }
.pkg-block__type { font-size: 52px; line-height: 1.05; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.pkg-block__product { text-align: right; max-width: 50%; }
.pkg-block__article { font-size: 18px; font-weight: 600; }
.pkg-block__name { color: var(--text-muted); font-size: 14px; }
.pkg-block__meta { margin-top: 6px; font-size: 15px; font-variant-numeric: tabular-nums; }
.pkg-block__edit { margin-top: 10px; }
.pkg-form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
/* display у элементов блока перебил бы атрибут hidden — его скрытие главнее. */
.pkg-block [hidden], .pkg-block[hidden] { display: none !important; }
.pkg-form__fields { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.pkg-form__fields label { margin: 0; flex: 0 1 140px; }
.pkg-form__fields input { font-size: 18px; }
.pkg-form__standard { font-size: 15px; color: var(--text-muted); }
.pkg-form__error { color: var(--danger); font-weight: 600; }
.pkg-form__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pkg-combo { position: relative; max-width: 420px; }
.pkg-combo label { margin: 0; }
.pkg-combo__input { font-size: 18px; width: 100%; }
.pkg-combo__list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 320px; overflow-y: auto; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.pkg-combo__option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; }
.pkg-combo__option.is-active, .pkg-combo__option:hover { background: var(--table-head-bg, var(--bg)); }
.pkg-combo__name { flex: 1; }
.pkg-combo__size, .pkg-combo__empty { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pkg-combo__empty { padding: 6px 10px; }
/* Сообщение станции и блок упаковки — в одну строку, на узком экране друг под другом. */
.pkg-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.pkg-row > .st-result, .pkg-row > .pkg-photo { flex: 0 1 auto; }
.pkg-row > .pkg-block { flex: 1 1 420px; margin: 0; }
@media (max-width: 720px) {
  .pkg-block__type { font-size: 34px; }
  .pkg-block__product { text-align: left; max-width: none; }
}
/* Реестр видов: строка формы в таблице. */
.pkg-types-table input[type="text"], .pkg-types-table input[type="number"] { width: 72px; margin: 0; }
.pkg-types-table input[name="name"] { width: 170px; }
.pkg-types-table select { width: auto; margin: 0; }
.pkg-types-table__name { display: flex; align-items: center; gap: 8px; }
.st-boxtype { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; }
.st-boxtype select { width: auto; margin: 0; }
.pkg-breakdown summary { cursor: pointer; text-decoration: underline dotted; }
.pkg-breakdown .table { margin-top: 4px; font-size: 12px; }
.pkg-mail-head { width: auto; margin-bottom: 8px; }
.pkg-mail-head th { width: 110px; }

/* Комплекты (/admin/kits) */
.kits-help { margin: 0 0 12px; }
.kits-help > summary { cursor: pointer; color: var(--text-muted); }
.kits-status { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 16px 0 0; }
.kits-status .tag { font-size: 12px; padding: 2px 8px; text-transform: none; text-decoration: none; }
.kits-bulk { align-items: center; }
.kits-check { width: 1%; }
.kits-comp { white-space: nowrap; }
.kits-error { max-width: 320px; overflow-wrap: anywhere; }
.kits-muted { color: var(--text-muted); }
.kits-article { white-space: nowrap; }
.kits-article .hint { white-space: normal; }

/* Переключатель-сегменты: взаимоисключающие режимы страницы ссылками (packersReport). */
.segmented { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.segmented__item { padding: 5px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.segmented__item:hover { color: var(--text); text-decoration: none; }
.segmented__item.is-active { background: var(--primary); color: #fff; }
.heatmap-layers { margin-bottom: 4px; }

/* Панель фильтров одной строкой на карточке; поля применяются сразу (data-autosubmit). */
.filters--toolbar { gap: 10px 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.filters--toolbar select, .filters--toolbar input { margin: 0; }
.date-range { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }

/* Отчёт «Продуктивность упаковщиков» */
.pr-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pr-stat { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0; }
.pr-stat__label { font-size: 12px; color: var(--text-muted); }
.pr-stat__value { margin-top: 2px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr-stat__value--text { font-size: 16px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-stat__sub { font-size: 12px; color: var(--text-muted); }
.pr-empty { padding: 24px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 8px; }
.pr-table th, .pr-table td { padding: 8px 8px; }
.pr-table thead th { vertical-align: bottom; line-height: 1.3; }
.pr-table th.num, .pr-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-table td.num { white-space: nowrap; }
.pr-table td.is-zero { color: color-mix(in srgb, var(--text-muted) 50%, transparent); }
/* Сотрудник закреплён слева: при горизонтальной прокрутке видно, чья строка. */
.pr-table .pr-person { position: sticky; left: 0; z-index: 1; min-width: 200px; padding-left: 36px; background: var(--surface); box-shadow: inset -1px 0 0 var(--border); }
.pr-table thead .pr-person, .pr-table tfoot .pr-person { background: var(--table-head-bg); }
.pr-table .pr-rank { position: absolute; left: 6px; width: 24px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pr-table td.pr-person .pr-rank { top: 50%; transform: translateY(-50%); }
.pr-person__name { display: block; font-weight: 600; white-space: nowrap; }
.pr-person__dept { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.pr-table .pr-total-col { min-width: 120px; }
.pr-total { font-weight: 700; }
.pr-bar { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--table-head-bg); overflow: hidden; }
.pr-bar span { display: block; height: 100%; margin-left: auto; border-radius: 2px; background: var(--primary); }
.pr-table .pr-kpi-col { background: var(--table-head-bg); }
.pr-table thead .pr-kpi-col { box-shadow: inset 0 -2px 0 var(--primary); }
.pr-table .pr-top--1 .pr-rank { color: #b45309; font-weight: 700; }
.pr-table .pr-top--2 .pr-rank { color: #64748b; font-weight: 700; }
.pr-table .pr-top--3 .pr-rank { color: #92400e; font-weight: 700; }
.pr-table tbody tr:hover td { background: var(--table-head-bg); }
.pr-table tbody tr:hover td.pr-person { background: var(--table-head-bg); }
.pr-help { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.pr-help summary { cursor: pointer; color: var(--text); font-weight: 500; }
.pr-help ul { margin: 8px 0 0; padding-left: 18px; }
.pr-help li { margin-bottom: 4px; }

/* Телефон: карточки сотрудников вместо таблицы. */
.pr-cards { display: none; list-style: none; margin: 0 0 14px; padding: 0; }
.pr-card { margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.pr-card--total { background: var(--table-head-bg); }
.pr-card__head { display: flex; align-items: center; gap: 10px; }
.pr-card .pr-rank { flex: none; width: 22px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pr-card__who { flex: 1; min-width: 0; }
.pr-card__who .pr-person__name { overflow: hidden; text-overflow: ellipsis; }
.pr-card__total { flex: none; text-align: right; font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pr-card__total small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.pr-card .pr-bar { margin: 8px 0 6px 32px; }
.pr-card__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-left: 32px; font-size: 13px; color: var(--text-muted); }
.pr-card__meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.pr-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; }
.pr-card__grid div { display: flex; justify-content: space-between; gap: 6px; }
.pr-card__grid dt { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-card__grid dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-card__grid .is-zero, .pr-card__grid .is-zero dd { color: color-mix(in srgb, var(--text-muted) 55%, transparent); }
.pr-card.pr-top--1 .pr-rank { color: #b45309; font-weight: 700; }
.pr-card.pr-top--2 .pr-rank { color: #64748b; font-weight: 700; }
.pr-card.pr-top--3 .pr-rank { color: #92400e; font-weight: 700; }
@media (max-width: 720px) {
  .pr-table-wrap { display: none; }
  .pr-cards { display: block; }
  .pr-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-summary .pr-stat:last-child { grid-column: 1 / -1; }
  .pr-stat__value { font-size: 20px; }
  .filters--toolbar > select, .filters--toolbar .pick-input { flex: 1 1 100%; }
  .filters--toolbar .date-range { flex: 1 1 100%; }
  .filters--toolbar .date-range input { flex: 1; min-width: 0; }
}

/* Главная (dashboard.ejs) */
.dash-links { margin: -4px 0 14px; }
.dash-tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dash-tiles .pr-stat__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; }
.dash-delta { font-weight: 600; white-space: nowrap; }
.dash-delta.is-up { color: var(--success-text); }
.dash-delta.is-down { color: var(--error-text); }
.dash-row { display: grid; gap: 12px; margin-bottom: 14px; align-items: start; }
.dash-row--main { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.dash-row--tops { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dash-row .kpi-board { height: 100%; scroll-margin-top: 90px; } /* #tops под липкой шапкой */
.dash-card { min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.dash-card__title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.dash-card__unit { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.dash-card .hint { margin-top: 10px; }
.dash-queue { list-style: none; margin: 0; padding: 0; }
.dash-queue__row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.dash-queue__row:last-child { border-bottom: none; }
.dash-queue__name { font-weight: 500; }
.dash-queue__badges { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.dash-queue__avg { color: var(--text-muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-queue__count { min-width: 3.5em; text-align: right; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-queue__row.is-zero .dash-queue__count, .dash-queue__row.is-zero .dash-queue__name { color: var(--text-muted); font-weight: 400; }
.dash-bars { list-style: none; margin: 0; padding: 0; }
.dash-bars li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 64px; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.dash-bars__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bars__track { height: 10px; }
.dash-bars__track span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--series-1); }
.dash-bars__value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-bars li.is-zero { color: var(--text-muted); }
.dash-bars li.is-zero .dash-bars__value { font-weight: 400; }

/* График по часам (partials/hourChart.ejs + public/js/hourChart.js) */
.hour-chart { position: relative; }
.hour-chart__scroll { overflow-x: auto; scrollbar-width: thin; }
.hour-chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-x pan-y; }
.hour-chart svg:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.hour-chart__legend { display: flex; gap: 16px; list-style: none; margin: 0 0 6px; padding: 0; font-size: 12px; color: var(--text-muted); }
.hour-chart__legend li { display: flex; align-items: center; gap: 6px; }
.hour-chart__key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.hour-chart__key--today { background: var(--series-1); }
.hour-chart__key--yesterday { background: var(--series-2); }
.hour-chart__grid line { stroke: var(--border); stroke-width: 1; opacity: .6; }
.hour-chart__grid text { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.hour-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hour-chart__line--today { stroke: var(--series-1); }
.hour-chart__line--yesterday { stroke: var(--series-2); }
.hour-chart__area { fill: var(--series-1); opacity: .1; }
.hour-chart__dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
.hour-chart__end { fill: var(--text); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hour-chart__cross { stroke: var(--text-muted); stroke-width: 1; }
.hour-chart__hit { fill: transparent; cursor: crosshair; }
.hour-chart__tip { position: absolute; z-index: 5; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); font-size: 12px; pointer-events: none; white-space: nowrap; }
.hour-chart__tip-head { margin-bottom: 3px; color: var(--text-muted); }
.hour-chart__tip-row { display: flex; align-items: center; gap: 6px; }
.hour-chart__tip-row b { font-variant-numeric: tabular-nums; }
.hour-chart__tip-row span:last-child { color: var(--text-muted); }
.hour-chart__table { margin-top: 6px; font-size: 12px; }
.hour-chart__table summary { cursor: pointer; color: var(--text-muted); }
.hour-chart__table .table { margin: 6px 0 0; max-width: 360px; }
.hour-chart__table .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .dash-row--main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-tiles .pr-stat:last-child { grid-column: auto; }
  .dash-bars li { grid-template-columns: 110px minmax(0, 1fr) 56px; }
  /* На телефоне график не ужимается до нечитаемых подписей: шире экрана — прокрутка вбок
     (hourChart.js сам докручивает к текущему часу), подписи крупнее в единицах viewBox. */
  .hour-chart svg { min-width: 520px; }
  .hour-chart__grid text { font-size: 15px; }
  .hour-chart__end { font-size: 16px; }
}

/* Список поставок WB (wbSupplies/index.ejs): вкладки, панель поиска, чипы
   активных фильтров, панель действий над выбранными; на телефоне строки
   таблицы становятся карточками. */
.wbs-tabs { margin: 4px 0 12px; }
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
form.list-toolbar { max-width: none; }
.list-toolbar select { width: auto; margin: 0; }
.search-field { position: relative; flex: 1 1 280px; max-width: 420px; margin: 0; }
.search-field input { margin: 0; height: 34px; padding: 0 34px; border-radius: 8px; -webkit-appearance: none; appearance: none; }
.search-field__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; color: var(--text-muted); pointer-events: none; }
.search-field__icon svg { width: 16px; height: 16px; }
.search-field__kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text-muted); font: 11px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; pointer-events: none; }
.search-field input:focus ~ .search-field__kbd, .search-field input:not(:placeholder-shown) ~ .search-field__kbd { display: none; }
.wbs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; }
.wbs-chips__title { color: var(--text-muted); }
.wbs-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); }
.wbs-chip:hover { border-color: var(--primary); text-decoration: none; }
.wbs-chip svg { width: 14px; height: 14px; }
.wbs-chips__reset { color: var(--text-muted); text-decoration: underline; }
.wbs-table td { vertical-align: top; }
.wbs-col--check { width: 28px; }
.wbs-col--progress { width: 170px; }
.wbs-col--action { width: 40px; }
.wbs-name { font-weight: 600; color: var(--text); }
.cell-sub, .cell-note { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.cell-note { max-width: 280px; }
.cell-note--danger { color: var(--error-text); }
.wbs-row--problem td { background: color-mix(in srgb, var(--error-bg) 50%, var(--surface)); }
.wbs-cell--wb, .wbs-cell--created { white-space: nowrap; }
.cell-progress { display: flex; align-items: center; gap: 8px; min-width: 130px; padding-top: 5px; }
.cell-progress .progress { flex: 1; }
.cell-progress__nums { margin-top: -5px; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-muted { color: var(--text-muted); font-size: 12px; }
.copy-btn { margin-left: 2px; color: var(--text-muted); }
.copy-btn:hover { color: var(--primary); }
.copy-btn.is-copied { color: var(--success-text); }
.copy-btn span { display: inline-flex; }
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn .copy-btn__done, .copy-btn.is-copied .copy-btn__idle { display: none; }
.copy-btn.is-copied .copy-btn__done { display: inline-flex; }
.table .wbs-cell--action { text-align: right; }
.wbs-empty td { padding: 32px 12px; text-align: center; }
.wbs-empty td > * { margin: 0 6px; vertical-align: middle; }
.bulkbar { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; width: fit-content; margin: 0 auto 12px; padding: 8px 8px 8px 16px; border-radius: 10px; background: var(--text); color: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: 13px; }
.bulkbar[hidden] { display: none; }
.bulkbar__clear { background: transparent; color: inherit; opacity: .75; }
.bulkbar .btn--danger { background: var(--danger); border-color: transparent; color: #fff; }
.bulkbar__clear:hover { opacity: 1; }
@media (max-width: 720px) {
  .search-field { flex-basis: 100%; max-width: none; }
  .search-field input { height: 44px; font-size: 16px; }
  .search-field__kbd { display: none; }
  .list-toolbar .segmented__item { display: inline-block; padding: 9px 14px; }
  .list-toolbar select { flex: 1 1 100%; height: 44px; }
  .wbs-tabs .tabs__tab { padding: 10px 12px; }
  .wbs-chip { padding: 7px 8px 7px 12px; }
  .wbs-list .table-scroll { max-height: none; overflow: visible; }
  .wbs-table, .wbs-table tbody { display: block; border: none; background: none; }
  .wbs-table thead, .wbs-table .wbs-cell--check, .wbs-list .bulkbar { display: none; }
  .wbs-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name action" "status status" "cabinet warehouse" "wb created" "progress progress";
    gap: 8px 12px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
  }
  .wbs-table tr.wbs-row--problem { border-color: color-mix(in srgb, var(--error-text) 45%, var(--border)); }
  .wbs-table tr.wbs-empty { display: block; }
  .wbs-table td, .wbs-row--problem td { display: block; padding: 0; border: none; background: none; }
  .wbs-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); }
  .wbs-cell--name { grid-area: name; align-self: center; }
  .wbs-name { font-size: 15px; }
  .wbs-cell--action { grid-area: action; }
  .wbs-cell--action .btn--icon { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; }
  .wbs-cell--status { grid-area: status; }
  .cell-note { max-width: none; }
  .wbs-cell--cabinet { grid-area: cabinet; }
  .wbs-cell--cabinet .cell-sub { display: none; }
  .wbs-cell--warehouse { grid-area: warehouse; text-align: right; }
  .wbs-cell--wb { grid-area: wb; }
  .copy-btn.btn--icon { width: 32px; height: 32px; }
  .wbs-cell--created { grid-area: created; align-self: center; text-align: right; color: var(--text-muted); }
  .wbs-cell--progress { grid-area: progress; }
  .wbs-list + .pagination { flex-wrap: wrap; }
  .wbs-list + .pagination a { padding: 10px 14px; }
  .wbs-list + .pagination select { height: 44px; }
}

/* Страница поставки WB (wbSupplies/show.ejs): шапка с меню «⋯», плитки,
   заказы (на телефоне — карточки), окна переноса/закрытия (на телефоне —
   шторка снизу), лента «История». */
.detail-head { align-items: flex-start; gap: 12px; }
.detail-head .inline-rename { max-width: none; }
/* Заявка на коды (markCodeOrders/show.ejs): поле скана черновика, мини-полосы «получено / напечатано» в строке,
   вкладка печати — выбор строк и настройки слева, файлы печати справа. */
.mco-scan { max-width: 640px; margin: 4px 0 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.mco-scan__form { display: flex; gap: 8px; align-items: center; max-width: none; margin: 0; }
.mco-scan__field.search-field { flex: 1 1 auto; max-width: none; margin: 0; }
.mco-scan__field input { margin: 0; height: 38px; font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mco-scan__form .btn { height: 38px; flex-shrink: 0; }
.mco-scan__field input::placeholder { font-family: inherit; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.mco-scan__bulk { margin-top: 8px; font-size: 13px; }
.mco-scan__bulk summary { cursor: pointer; color: var(--primary); width: max-content; }
.mco-scan__bulk-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: none; margin: 8px 0 0; }
.mco-scan__bulk-form textarea { margin: 0; min-height: 84px; max-height: 240px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mco-upload { margin: 0 0 12px; }
.mco-bar { display: grid; grid-template-columns: 82px minmax(60px, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.mco-bar + .mco-bar { margin-top: 4px; }
.mco-bar__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mco-row--done td { background: var(--row-done-bg); }
.mco-row--gaps td:first-child { box-shadow: inset 3px 0 0 var(--badge-warning-text); }
.mco-print { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.mco-print__form { margin: 0; max-width: none; }
.mco-print__options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0 10px; }
.mco-print__options .checkbox { margin: 0; }
.mco-print__label { color: var(--text-muted); font-size: 13px; }
.mco-print__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mco-print__about { margin-top: 14px; }
.mco-print__about summary { cursor: pointer; color: var(--primary); }
.segmented--radio .segmented__item { position: relative; display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.segmented--radio input { position: absolute; opacity: 0; pointer-events: none; }
.segmented--radio .segmented__item:has(input:checked) { background: var(--primary); color: #fff; }
.segmented--radio .segmented__item:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }
.mco-jobs { display: flex; flex-direction: column; gap: 8px; }
.mco-jobs__title { margin: 0 0 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mco-job { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.mco-job .progress { width: 100%; }
.mco-job .cell-sub { margin: 0; }
.mco-job__head { display: flex; align-items: center; gap: 8px; }
.mco-job__when { font-size: 12px; color: var(--text-muted); }
.stat-card__value--text { font-size: 20px; }
.mco-list-bar { width: 90px; margin-top: 4px; }
.table__row--link { cursor: pointer; }
.table__row--link:hover > td { background: var(--table-head-bg); }
@media (max-width: 720px) {
  .mco-print { grid-template-columns: 1fr; }
}
.detail-status { margin-left: 6px; font-size: 12px; font-weight: 600; vertical-align: middle; }
.detail-meta dd { display: flex; align-items: center; gap: 2px; }
.more-menu { position: relative; }
.more-menu__toggle.btn--icon { width: 32px; height: 30px; }
.more-menu__menu { left: auto; right: 0; min-width: 220px; padding: 6px; gap: 0; }
.more-menu__menu form { margin: 0; max-width: none; }
.more-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.more-menu__item:hover { background: var(--bg); text-decoration: none; }
.more-menu__item svg { width: 16px; height: 16px; color: var(--text-muted); }
.more-menu__item--danger, .more-menu__item--danger svg { color: var(--error-text); }
.detail-stats { margin-bottom: 4px; }
.detail-stats .stat-card--link .stat-card__sub { color: var(--primary); }
.stat-card__kiz { margin: 8px 0 0; }
.stat-card__kiz .kiz-summary__title { display: none; }
.stat-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stat-card__badges .badge { font-size: 12px; padding: 2px 9px; }
.chips--bar { margin-bottom: 10px; }
.wbo-table td { vertical-align: top; }
.wbo-col--check { width: 28px; }
.wbo-id { font-size: 13px; font-weight: 600; }
.wbo-product .tag { margin-left: 4px; }
.wbo-row--cancelled td { color: var(--text-muted); }
.table td.wbo-actions { white-space: nowrap; text-align: right; }
.wbo-cancel { color: var(--error-text); }
.wbo-table tr[hidden] { display: none; }
.modal__card--wide { max-width: 520px; }
.modal__card--wide h2 { margin-bottom: 4px; font-size: 18px; }
.modal__card--wide form { max-width: none; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.choice-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin-top: 12px; }
.choice-card { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 13px; cursor: pointer; }
.choice-card:hover { border-color: var(--text-muted); }
.choice-card:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.choice-card input { width: auto; margin: 2px 0 0; accent-color: var(--primary); }
.choice-list input[type="text"] { margin: 0; height: 36px; }
/* Глобальное input { display: block } перебивает hidden — поле названия
   новой поставки было видно, пока не выбран её вариант. */
.choice-list input[hidden] { display: none; }
.bulkbar .btn { white-space: nowrap; }
.timeline { list-style: none; margin: 0; padding: 4px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.timeline__day { padding: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.timeline > li[hidden] { display: none; }
.tl-ev { display: grid; grid-template-columns: 44px 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); font-size: 13px; }
.tl-ev__time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tl-ev__dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--badge-ok-text); box-shadow: 0 0 0 3px var(--badge-ok-bg); }
.tl-ev--warn .tl-ev__dot { background: var(--badge-warning-text); box-shadow: 0 0 0 3px var(--badge-warning-bg); }
.tl-ev--err .tl-ev__dot { background: var(--badge-danger-text); box-shadow: 0 0 0 3px var(--badge-danger-bg); }
.tl-ev--pending .tl-ev__dot { background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.tl-ev__detail { color: var(--text-muted); }
.tl-ev__result { margin-top: 2px; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.tl-ev--err .tl-ev__result, .tl-ev--err .tl-ev__result summary { color: var(--error-text); }
.tl-ev__result.error-details { max-width: none; }
.tl-ev__skipped { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.tl-ev__skipped summary { cursor: pointer; color: var(--badge-warning-text); }
.tl-ev__who { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 720px) {
  .detail-head .head-actions { width: 100%; }
  .detail-head .head-actions > .btn:first-child { flex: 1; text-align: center; justify-content: center; }
  .detail-head .head-actions .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .more-menu__toggle.btn--icon { width: 44px; height: 44px; }
  .detail-meta { gap: 8px 20px; }
  .chips--bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chips--bar .chip { flex: none; padding: 8px 14px; }
  .wbo-wrap.table-scroll { max-height: none; overflow: visible; }
  .wbo-table, .wbo-table tbody { display: block; border: none; background: none; }
  .wbo-table thead { display: none; }
  .wbo-table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "check order label" "check product sticker" "check reserve kiz" "check reserveno reserveno" "check source actions";
    gap: 6px 10px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
  }
  .wbo-table tr:has(input[name="order_id"]:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
  .wbo-table td { display: block; padding: 0; border: none; }
  .wbo-check { grid-area: check; }
  .wbo-check input { width: 22px; height: 22px; margin: 0; }
  .wbo-order { grid-area: order; align-self: center; }
  .wbo-order .cell-sub { display: none; }
  .wbo-id { font-size: 14px; }
  .wbo-label { grid-area: label; text-align: right; }
  .wbo-label .cell-sub { display: none; }
  .wbo-product { grid-area: product; align-self: center; }
  .wbo-sticker { grid-area: sticker; text-align: right; }
  .wbo-sticker .cell-sub { display: none; }
  .wbo-reserve { grid-area: reserve; }
  .wbo-reserve-no { grid-area: reserveno; font-size: 12px; color: var(--text-muted); }
  .wbo-reserve-no:empty { display: none; }
  .wbo-wrap > .dt-toolbar { position: static; }
  .wbo-kiz { grid-area: kiz; text-align: right; }
  .wbo-source { grid-area: source; align-self: center; font-size: 12px; color: var(--text-muted); }
  .table td.wbo-actions { grid-area: actions; }
  .wbo-actions .btn--icon { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; }
  .wbo-actions .btn--icon + .btn--icon { margin-left: 6px; }
  .modal--sheet { align-items: flex-end; padding: 0; }
  .modal--sheet .modal__card { max-width: none; max-height: 85vh; border-radius: 16px 16px 0 0; padding: 18px 16px 24px; }
  .modal--sheet .modal__actions .btn { flex: 1; min-height: 44px; }
  .choice-card { min-height: 52px; align-items: center; }
  .hide-mobile { display: none; }
  .wbo-wrap ~ .bulkbar { width: auto; gap: 8px; padding-left: 14px; }
  .choice-card input { margin: 0; }
  .choice-list input[type="text"] { height: 44px; font-size: 16px; }
  .timeline { padding: 4px 12px; }
  .tl-ev { grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "dot body time" "dot who who"; gap: 2px 10px; }
  .tl-ev__dot { grid-area: dot; }
  .tl-ev__body { grid-area: body; }
  .tl-ev__time { grid-area: time; }
  .tl-ev__who { grid-area: who; }
}

/* Поставки Ozon (ozonCarriages/index.ejs): этапы-карточки вместо вкладок,
   карточки «К отбору» / строки «Готово к поставке», таблицы → карточки на
   телефоне. */
.pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 16px; }
.pipeline__step { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.pipeline__step:hover { border-color: var(--primary); text-decoration: none; }
.pipeline__step.is-active { border: 2px solid var(--primary); padding: 11px 13px; box-shadow: 0 4px 14px rgba(37, 99, 235, .12); }
.pipeline__step--attention:not(.is-active) { border-color: var(--badge-warning-text); }
.pipeline__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; }
.pipeline__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--badge-muted-bg); color: var(--text-muted); font-size: 12px; font-weight: 700; }
.pipeline__step.is-active .pipeline__num { background: var(--primary); color: #fff; }
.pipeline__label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pipeline__count { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pipeline__sub { font-size: 12px; color: var(--text-muted); }
.empty-note { padding: 28px 16px; border: 1px dashed var(--border); border-radius: 10px; color: var(--text-muted); text-align: center; }
.btn--attention { background: var(--badge-warning-bg); border-color: var(--badge-warning-text); color: var(--badge-warning-text); font-weight: 600; }
.btn--attention:hover { text-decoration: none; filter: brightness(.97); }
.oz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.oz-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.oz-card__meta { font-size: 12px; color: var(--text-muted); }
.oz-card__title { font-size: 15px; }
.oz-card__count { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.oz-card__count span { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.oz-card__action { align-self: flex-start; margin-top: 4px; }
.oz-rows { display: flex; flex-direction: column; gap: 8px; }
.oz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.oz-row--attention { border-color: var(--badge-warning-text); }
.oz-row__main { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oz-row .oz-card__count { min-width: 120px; }
.oz-row__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.oz-row__actions form { margin: 0; }
.oz-table td { vertical-align: top; }
.oz-col--progress { width: 220px; }
.table td.oz-c-actions { white-space: nowrap; text-align: right; }
.oz-c-actions form { display: inline-block; margin: 0 0 0 4px; vertical-align: middle; }
.oz-delete { color: var(--error-text); }
.oz-link { font-weight: 600; color: var(--text); }
.oz-empty td { padding: 28px 12px; text-align: center; color: var(--text-muted); }
.oz-archive-link { margin-top: 16px; }
@media (max-width: 900px) {
  .pipeline { grid-template-columns: repeat(4, minmax(150px, 1fr)); overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 720px) {
  .pipeline { display: flex; margin: 0 -16px 14px; padding: 0 16px 2px; }
  .pipeline__step { flex: none; min-width: 132px; padding: 9px 12px; }
  .pipeline__step.is-active { padding: 8px 11px; }
  .pipeline__count { font-size: 20px; }
  .pipeline__sub, .pipeline__head .badge { display: none; }
  .oz-row .oz-card__count { min-width: 0; }
  .oz-row__actions, .oz-row__actions form, .oz-row__actions .btn { width: 100%; }
  .oz-row__actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .oz-card__action { align-self: stretch; text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .oz-table thead { display: none; }
  .oz-table, .oz-table tbody { display: block; border: none; background: none; }
  .table-scroll:has(.oz-table) { max-height: none; overflow: visible; }
  .oz-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  .oz-table td { display: block; padding: 0; border: none; }
  .oz-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); }
  .oz-table tr.oz-empty { display: block; }
  .oz-c-name { grid-column: 1 / -1; font-size: 15px; }
  .oz-c-cabinet, .oz-c-le, .oz-c-wh { font-size: 13px; color: var(--text-muted); }
  .oz-c-created { color: var(--text-muted); text-align: right; }
  .oz-c-progress, .oz-c-status { grid-column: 1 / -1; }
  .table td.oz-c-actions { grid-column: 1 / -1; display: flex; gap: 8px; text-align: left; }
  .oz-c-actions .btn--primary { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .oz-c-actions .btn--icon { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; }
}

/* Отбор поставки Ozon (labeling/ozonBatchNew.ejs): шаги кабинет → склад →
   отправления, нижняя панель с названием поставки. */
.stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px; }
.stepper__step { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); }
.stepper__step.is-current { border: 2px solid var(--primary); padding: 4px 11px 4px 4px; color: var(--text); }
.stepper__step.is-done { color: var(--text); }
.stepper__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--badge-muted-bg); font-size: 12px; font-weight: 700; }
.stepper__step.is-current .stepper__num { background: var(--primary); color: #fff; }
.stepper__step.is-done .stepper__num { background: var(--badge-ok-text); color: #fff; }
.stepper__label { color: var(--text-muted); }
.stepper__sep { color: var(--text-muted); }
.oz-card--link { color: var(--text); }
.oz-card--link:hover { border-color: var(--primary); text-decoration: none; box-shadow: 0 2px 10px rgba(37, 99, 235, .12); }
.obn-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.obn-toolbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.obn-force { margin: 0; font-size: 13px; color: var(--text); }
.obn-col--check { width: 28px; }
.obn-table td { vertical-align: top; }
.obn-num { font-size: 13px; font-weight: 600; }
.obn-table tr[hidden] { display: none; }
.obn-bar input[type="text"] { width: 220px; margin: 0; height: 32px; border-color: color-mix(in srgb, var(--surface) 30%, transparent); background: color-mix(in srgb, var(--surface) 12%, var(--text)); color: var(--surface); }
@media (max-width: 720px) {
  .stepper__sep { display: none; }
  .stepper__step { width: 100%; }
  .obn-toolbar .chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .obn-toolbar .chip { flex: none; padding: 8px 14px; }
  .obn-table thead { display: none; }
  .obn-table, .obn-table tbody { display: block; border: none; background: none; }
  .table-scroll:has(.obn-table) { overflow: visible; }
  .obn-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "check num" "check lines" "check reserve" "check source"; gap: 4px 10px; margin-bottom: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  .obn-table tr:has(input[name="posting_number"]:checked) { border-color: var(--primary); }
  .obn-table td { display: block; padding: 0; border: none; }
  .obn-c-check { grid-area: check; }
  .obn-c-check input { width: 22px; height: 22px; margin: 0; }
  .obn-c-num { grid-area: num; }
  .obn-c-lines { grid-area: lines; }
  .obn-c-reserve { grid-area: reserve; }
  .obn-c-reserve .cell-sub { display: inline; margin-left: 6px; }
  .obn-c-source { grid-area: source; font-size: 12px; color: var(--text-muted); }
  .obn-bar { flex-wrap: wrap; width: auto; }
  .obn-bar input[type="text"] { flex: 1 1 100%; width: auto; height: 40px; font-size: 16px; }
  .obn-bar .btn--primary { flex: 1; min-height: 40px; }
}

/* Поставка Ozon (ozonCarriages/show.ejs): состав, на телефоне — карточки. */
.ocp-table td { vertical-align: top; }
.ocp-col--check { width: 28px; }
.ocp-num { font-size: 13px; font-weight: 600; }
.ocp-row--unresolved td { background: color-mix(in srgb, var(--badge-warning-bg) 60%, var(--surface)); }
.ocp-table tr[hidden] { display: none; }
.oc-containers { max-width: 140px; }
@media (max-width: 720px) {
  .ocp-table thead { display: none; }
  .ocp-table, .ocp-table tbody { display: block; border: none; background: none; }
  .table-scroll:has(.ocp-table) { max-height: none; overflow: visible; }
  .ocp-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "check num station" "check lines units" "check status status"; gap: 4px 10px; margin-bottom: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  .ocp-table tr.ocp-row--unresolved { border-color: var(--badge-warning-text); }
  .ocp-table tr:has(input[name="exclude_posting_number"]:checked) { border-color: var(--error-text); }
  .ocp-table td, .ocp-row--unresolved td { display: block; padding: 0; border: none; background: none; }
  .ocp-c-check { grid-area: check; }
  .ocp-c-check input { width: 22px; height: 22px; margin: 0; }
  .ocp-c-num { grid-area: num; }
  .ocp-c-station { grid-area: station; text-align: right; }
  .ocp-c-station .cell-sub { display: none; }
  .ocp-c-lines { grid-area: lines; }
  .ocp-c-units { grid-area: units; text-align: right; color: var(--text-muted); }
  .ocp-c-status { grid-area: status; font-size: 12px; color: var(--text-muted); }
  .ocp-c-status .cell-sub { display: inline; margin-left: 6px; }
  .ocp-table td[data-label]::before { content: attr(data-label) ": "; }
}

/* Оклейка КИЗ (productLabeling/*.ejs): список заказов, загрузка, страница
   заказа. Блок станции (.kzo-station) — прежняя разметка станции, здесь
   только рамка вокруг неё. */
.page-head__sub { margin: 4px 0 0; max-width: 720px; }
.list-tabs { margin: 4px 0 12px; }
.kzl-col--progress { width: 240px; }
.kzl-name { font-weight: 600; color: var(--text); }
.kzl-table td, .kzo-table td { vertical-align: top; }
.table td.kzl-c-actions, .table td.kzo-c-actions { white-space: nowrap; text-align: right; }
.kzl-c-actions form { display: inline-block; margin: 0 0 0 4px; }
.kzl-delete { color: var(--error-text); }
.kzl-empty td, .kzo-empty td { padding: 28px 12px; text-align: center; color: var(--text-muted); }
.form-card { max-width: 720px; display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.form-card label { margin: 0; font-weight: 600; color: var(--text); }
.form-card__actions { display: flex; justify-content: flex-end; gap: 8px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form-row label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.drop-zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px; border: 2px dashed var(--border); border-radius: 10px; background: var(--bg); text-align: center; cursor: pointer; }
.drop-zone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.drop-zone.is-over, .drop-zone:hover { border-color: var(--primary); }
.drop-zone.has-file { border-style: solid; border-color: var(--badge-ok-text); }
.drop-zone__title { font-weight: 600; }
.drop-zone__hint { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.kzi-codes { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 400; }
.kzi-help summary { cursor: pointer; color: var(--text-muted); font-size: 13px; }
.kzo-errors summary { cursor: pointer; font-weight: 600; }
.kzo-errors pre { margin: 8px 0 0; max-height: 240px; overflow: auto; }
.kzo-top { display: grid; grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); gap: 12px; align-items: stretch; margin-bottom: 14px; }
.kzo-top--closed { grid-template-columns: minmax(260px, 420px); }
.kzo-top > a.stat-card { color: var(--text); }
.kzo-top > a.stat-card:hover { text-decoration: none; }
.kzo-station { padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.kzo-station > p { margin: 0; }
.kzo-station .ls-scan-box { margin: 10px 0 0; }
.kzo-kiz { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.kzo-c-pos { color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .kzo-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .kzl-table thead, .kzo-table thead { display: none; }
  .kzl-table, .kzl-table tbody, .kzo-table, .kzo-table tbody { display: block; border: none; background: none; }
  .table-scroll:has(.kzl-table), .table-scroll:has(.kzo-table) { overflow: visible; }
  .kzl-table tr, .kzo-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  .kzl-table td, .kzo-table td { display: block; padding: 0; border: none; }
  .kzl-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); }
  .kzl-table tr.kzl-empty, .kzo-table tr.kzo-empty { display: block; }
  .kzl-c-name { grid-column: 1 / -1; font-size: 15px; }
  .kzl-c-progress { grid-column: 1 / -1; }
  .kzl-c-who, .kzl-c-created { font-size: 13px; color: var(--text-muted); }
  .kzl-c-created { text-align: right; }
  .table td.kzl-c-actions { grid-column: 1 / -1; text-align: left; }
  .kzl-c-actions form { margin: 0 8px 0 0; }
  .kzl-c-actions .btn--icon, .kzo-c-actions .btn--icon { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; }
  .kzo-table tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "article size status" "name name name" "kiz kiz kiz" "barcode barcode actions"; }
  .kzo-c-article { grid-area: article; }
  .kzo-c-size { grid-area: size; color: var(--text-muted); }
  .kzo-c-size::before { content: "· "; }
  .kzo-table .pl-status { grid-area: status; text-align: right; }
  .kzo-table .pl-status .cell-sub { display: none; }
  .kzo-c-name { grid-area: name; font-size: 13px; color: var(--text-muted); }
  .kzo-c-kiz { grid-area: kiz; }
  .kzo-kiz { max-width: 100%; }
  .kzo-c-barcode { grid-area: barcode; align-self: center; font-size: 12px; color: var(--text-muted); }
  .kzo-table td.kzo-c-pos { display: none; }
  .table td.kzo-c-actions { grid-area: actions; }
  .kzo-c-actions .btn--icon + .btn--icon { margin-left: 6px; }
  .form-card { padding: 14px; }
  .form-card__actions .btn { flex: 1; min-height: 44px; }
}

/* Поставки Lamoda (lamodaShipments/*.ejs, labeling/lamodaBatchNew.ejs) —
   тот же каркас этапов и карточек, что у Ozon (.pipeline, .oz-*). */
.pipeline--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cell-note--warning { color: var(--badge-warning-text); }
.lm-cutoffs { display: flex; flex-wrap: wrap; gap: 6px; }
.lm-cutoffs .badge { font-size: 12px; padding: 2px 9px; }
.lm-col--check { width: 28px; }
@media (max-width: 900px) {
  .pipeline--3 { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}
@media (max-width: 720px) {
  .lm-open tr { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lm-open .lm-c-check { grid-row: span 2; }
  .lm-open .lm-c-check input { width: 22px; height: 22px; margin: 0; }
  .lm-open .oz-c-name { grid-column: 2 / -1; }
  .lm-open .oz-c-progress, .lm-open .table td.oz-c-actions, .lm-open td.oz-c-actions { grid-column: 1 / -1; }
}
.lbn-cutoffs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.lbn-cutoffs__title { font-size: 13px; color: var(--text-muted); }
.chip--urgent { border-color: var(--error-text); color: var(--error-text); }
.chip--urgent span { color: var(--error-text); }
a.chip:hover { text-decoration: none; }
.obn-c-cutoff { white-space: nowrap; }
@media (max-width: 720px) {
  .lbn-cutoffs .chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .lbn-cutoffs .chip { flex: none; padding: 8px 14px; }
  .obn-table--dated tr { grid-template-areas: "check num" "check lines" "check reserve" "check cutoff" "check source"; }
  .obn-c-cutoff { grid-area: cutoff; font-size: 13px; }
  .obn-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); }
}
.lms-print-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.lms-print-bar select { width: auto; display: inline-block; margin: 0; }
.lms-pallet-value { font-size: 20px; }
.lms-pallet-value--todo { color: var(--badge-warning-text); }
.kzo-station select { display: inline-block; width: auto; min-width: 200px; margin: 0; }

/* Поставки Детский мир (detmirShipments/*.ejs) — каркас Ozon/Lamoda. */
.dm-pending summary { cursor: pointer; font-weight: 600; }
.dm-pending .table-scroll { margin: 8px 0 0; }
.dm-close-form { margin-bottom: 18px; }
.dm-close-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 12px; }
.dm-close-grid label { margin: 0; }
@media (max-width: 720px) {
  .dm-close-grid { grid-template-columns: minmax(0, 1fr); }
  .dm-close-grid input, .dm-close-grid select { height: 44px; font-size: 16px; }
}

/* Поставки Emall (emallShipments/*.ejs) — каркас Ozon/Lamoda. */
.em-close { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.em-close__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; }
.em-close .checkbox { margin: 0; }
.em-boxes .ocp-c-track { white-space: nowrap; }
@media (max-width: 720px) {
  .em-close .btn { flex: 1 1 100%; min-height: 44px; }
  .em-boxes tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num station" "track track" "lines lines" "status status" "deadline price"; }
  .em-boxes .ocp-c-track { grid-area: track; font-size: 13px; }
  .em-boxes .ocp-c-deadline { grid-area: deadline; font-size: 12px; color: var(--text-muted); }
  .em-boxes .ocp-c-price { grid-area: price; font-size: 12px; color: var(--text-muted); text-align: right; }
}
.em-pick .obn-c-receipt { color: var(--text-muted); }
@media (max-width: 720px) {
  .em-pick tr { grid-template-areas: "check num" "check lines" "check reserve" "check cutoff" "check brand" "check source"; }
  .em-pick .obn-c-brand { grid-area: brand; font-size: 12px; color: var(--text-muted); }
  .em-pick .obn-c-brand::before { content: "Бренд: "; }
  .em-pick td.obn-c-receipt { display: none; }
}

/* Поставки Яндекс.Маркет (yandexShipments/*.ejs) — каркас Ozon/Lamoda. */
.ym-carried { color: var(--badge-warning-text); }
.ym-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.ym-flow__step { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ym-flow__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ym-flow__form { display: flex; gap: 8px; max-width: none; margin: 0; }
.ym-flow__form input { width: 110px; margin: 0; }
.ym-flow__step form { margin: 0; }
.ym-flow__link { padding-left: 0; }
@media (max-width: 720px) {
  .ym-flow { grid-template-columns: minmax(0, 1fr); }
  .ym-flow__form input, .ym-flow__form .btn { min-height: 44px; }
  .ym-flow__step .btn--primary { min-height: 44px; }
}

/* Поставки Спортмастер (sportmasterShipments/*.ejs, sportmasterBatchNew.ejs). */
.sm-pick .obn-c-dropoff { font-size: 13px; }
@media (max-width: 720px) {
  .sm-pick tr { grid-template-areas: "check num" "check lines" "check reserve" "check cutoff" "check dropoff" "check source"; }
  .sm-pick .obn-c-dropoff { grid-area: dropoff; font-size: 12px; color: var(--text-muted); }
}
.sm-packages { white-space: pre-line; font-size: 13px; }
.sm-status-value { font-size: 20px; }
.sm-status-value--todo { color: var(--badge-warning-text); }
.sm-refresh { padding: 0; font-size: inherit; }
.sm-close-form { margin-bottom: 18px; }
.detail-meta .cell-sub { display: block; }

/* Оклейка ШК (barcodeLabeling/*.ejs) — каркас оклейки КИЗ. */
.bl-label-box { margin: 0 0 14px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.bl-label-box summary { cursor: pointer; font-weight: 600; }
.bl-table td.bl-qty, .bl-table td.bl-printed, .bl-table td.bl-remaining { white-space: nowrap; }
.bl-table th.bl-c-photo, .bl-table td.bl-c-photo { width: 56px; }
.bl-table td.bl-c-photo a { display: block; cursor: zoom-in; }
.kzo-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); }
@media (min-width: 721px) {
  .kzo-table td[data-label]::before { content: none; }
}
@media (max-width: 720px) {
  .bl-table tr { grid-template-columns: 48px repeat(3, minmax(0, 1fr)); grid-template-areas: "photo article article size" "photo name name name" "barcode barcode barcode barcode" "qty qty printed rem" "actions actions actions actions"; }
  .bl-table td.bl-c-photo { grid-area: photo; width: auto; }
  .bl-table .kzo-c-article { grid-area: article; font-size: 15px; }
  .bl-table .kzo-c-size { grid-area: size; text-align: right; }
  .bl-table .kzo-c-name { grid-area: name; font-size: 13px; color: var(--text-muted); }
  .bl-table .kzo-c-barcode { grid-area: barcode; font-size: 13px; }
  .bl-table td.bl-qty { grid-area: qty; }
  .bl-table td.bl-printed { grid-area: printed; }
  .bl-table td.bl-remaining { grid-area: rem; }
  .bl-table td.bl-qty, .bl-table td.bl-printed, .bl-table td.bl-remaining, .bl-table .kzo-c-size { font-size: 13px; }
  .bl-table .kzo-c-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; text-align: left; }
  .bl-table tr.kzo-empty { display: block; }
}

/* Узел 1С (pop_mp): блок накопителя на странице отбора и экран /admin/onec-node */
.onec-node-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; display: grid; gap: 6px; background: var(--surface); }
.onec-node-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.onec-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.onec-tabs a { padding: 7px 14px; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.onec-tabs a.is-active { color: var(--text); border-bottom-color: var(--primary); font-weight: 600; }
.onec-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; }
.onec-tile { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface); color: var(--text-muted); font-size: 13px; }
.onec-tile b { display: block; font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.onec-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 16px; max-width: 960px; }
.onec-form label { display: grid; gap: 4px; font-size: 13px; color: var(--text-muted); min-width: 0; }
.onec-form textarea { min-height: 80px; }
.onec-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }

/* Списки упаковки и возвратов (packing/*.ejs, returns/*.ejs): общий вид
   таблицы-списка, на телефоне строки — карточки. Ячейки: .ct-main — заголовок
   карточки во всю ширину, .ct-wide — во всю ширину, без класса/.ct-half —
   полкарточки, .ct-end — к правому краю, .ct-muted — второстепенное,
   .ct-hide-m — не показывать на телефоне, .ct-actions — кнопки внизу. */
.card-table td { vertical-align: top; }
.ct-name { margin-right: 4px; font-weight: 600; color: var(--text); }
.ct-col--progress { width: 200px; }
.ct-col--actions { width: 1%; }
.table td.ct-actions { white-space: nowrap; text-align: right; }
.ct-actions form { display: inline-block; margin: 0 0 0 4px; }
.ct-actions .btn--danger.btn--link, .ct-delete { color: var(--error-text); }
.ct-empty td { padding: 32px 12px; text-align: center; color: var(--text-muted); }
.ct-empty td > * { margin: 0 6px; vertical-align: middle; }
.ct-row--alert td { background: color-mix(in srgb, var(--error-bg) 50%, var(--surface)); }
.ct-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.ct-kiz { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Пользователи (/admin/users): аватар-буква, имя + email в одной ячейке,
   длинные списки кабинетов обрезаются, «⋯» вместо ряда текстовых кнопок.
   Таблица без .table-scroll — иначе её overflow обрезал бы меню «⋯». */
.us-table { width: 100%; }
.us-table td { vertical-align: middle; }
.us-user { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.us-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); font-weight: 700; font-size: 14px; }
.us-user__text { min-width: 0; }
.us-user__text .badge { margin-left: 2px; }
.us-user__email { display: block; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-clip { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.us-table .tag { display: inline-block; margin: 1px 0; }
.us-row--off td { opacity: 0.6; }
.us-row--off td.ct-actions { opacity: 1; }
.us-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.us-table .more-menu { display: inline-block; }
.us-stat-link { display: block; color: inherit; }
.us-stat-link:hover { text-decoration: none; border-color: var(--primary); }
.us-stat--warn { color: var(--badge-warning-text); }
.us-qr-toggle { display: inline-flex; align-items: center; gap: 6px; }
.us-qr-toggle svg { width: 16px; height: 16px; }
.us-qr-menu { min-width: 300px; }
.us-qr-menu__hint { margin: 2px 4px 6px; font-size: 12px; color: var(--text-muted); }

@media (max-width: 720px) {
  .table-scroll:has(.card-table) { max-height: none; overflow: visible; }
  .card-table thead { display: none; }
  .card-table, .card-table tbody { display: block; border: none; background: none; }
  .card-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
  .card-table tr.ct-row--alert { border-color: color-mix(in srgb, var(--error-text) 45%, var(--border)); }
  .card-table td, .ct-row--alert td { display: block; min-width: 0; padding: 0; border: none; background: none; }
  .card-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); }
  .card-table tr.ct-empty { display: block; }
  .card-table .ct-main { grid-column: 1 / -1; font-size: 15px; }
  .card-table .ct-wide { grid-column: 1 / -1; }
  .card-table .ct-end { text-align: right; }
  .card-table .ct-muted { font-size: 13px; color: var(--text-muted); }
  .card-table .ct-hide-m { display: none; }
  .card-table .ct-first { order: -1; }
  .card-table .ct-first.ct-main { order: -2; }
  .card-table .table__cell--truncate { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-table .table__actions { display: flex; gap: 6px; }
  /* Кнопки строки — в правом верхнем углу карточки, заголовок их обтекает. */
  .card-table tr { position: relative; }
  .card-table td.ct-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
  .card-table td.ct-actions:not(:has(*)) { display: none; }
  .card-table tr:has(.ct-actions .btn--icon) .ct-main { min-height: 40px; padding-right: 48px; }
  .card-table tr:has(.ct-actions .btn--icon ~ .btn--icon) .ct-main { padding-right: 96px; }
  .card-table tr:has(.ct-actions .btn--icon ~ .btn--icon ~ *) .ct-main { padding-right: 144px; }
  .ct-actions form { margin: 0; }
  .ct-actions .btn--icon { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; }
  .ct-kiz { max-width: 100%; }
  .card-table.us-table tr:has(.ct-actions) .ct-main { min-height: 40px; padding-right: 140px; }
  .us-summary .pr-stat:last-child { grid-column: auto; }
  .us-clip { max-width: 100%; white-space: normal; }
  .us-user { min-width: 0; }
  .table-scroll:has(.card-table) + .pagination { flex-wrap: wrap; }
  .table-scroll:has(.card-table) + .pagination a { padding: 10px 14px; }
  .table-scroll:has(.card-table) + .pagination select { height: 44px; }
}

/* Справочник коробов (boxes/pool.ejs): плитки «создать / печать / принтер». */
.bp-cards { margin-bottom: 14px; }
form.bp-card { max-width: none; margin: 0; }
.bp-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.bp-card__row input[type="number"] { width: 90px; margin: 0; }
.bp-card select { margin: 10px 0 0; }
.bp-card__qz { align-self: flex-start; margin-top: 8px; }
/* Состав короба (boxes/lookup — partials/boxLookup + boxItemsTable). */
.lookup-card { max-width: 640px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.lookup-card label { display: block; margin: 0 0 6px; font-weight: 600; }
.lookup-card input { margin: 0; height: 44px; font-size: 16px; }
.box-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; }
.box-head h2 { margin: 0; font-size: 20px; }
@media (max-width: 720px) {
  .bp-cards { grid-template-columns: minmax(0, 1fr); }
  .bp-card__row { flex-wrap: nowrap; }
  .bp-card__row .btn { flex: 1; min-height: 44px; }
  .bp-card__row input[type="number"] { height: 44px; }
  .lookup-card { padding: 12px; }
}
.form-card label.checkbox, .form-card .radio-row label { font-weight: 400; }
.form-card .hint, .form-card > p { margin: 0; }
/* Сверка возвратов (returns/check.ejs). */
.ck-progress { margin-bottom: 16px; }
a.stat-card { color: var(--text); }
a.stat-card:hover { text-decoration: none; }
.ck-station { max-width: 720px; }
.ck-station #ckReturnInfo { margin: 0; }
.ck-station .ls-scan-box { margin: 10px 0 0; }
.ck-counts { margin: 12px 0; }
.ck-actions { margin-bottom: 12px; }
@media (max-width: 720px) {
  .ck-actions .btn { flex: 1; min-height: 44px; }
  .ck-station .ls-scan-box input[type="text"] { max-width: none; }
}
/* Склады возвратов (returns/sites.ejs). */
.rs-table td { vertical-align: middle; }
.rs-table form { max-width: none; margin: 0; }
.rs-table input[type="text"] { margin: 0; }
.rs-table .checkbox { margin: 0; white-space: nowrap; }
.rs-new { max-width: 480px; }
@media (max-width: 720px) {
  .rs-table td.rs-save .btn { min-height: 40px; }
  .rs-table input[type="text"] { height: 44px; font-size: 16px; }
}
.onec-form input[type="text"], .onec-form input[type="password"], .onec-form input[type="number"], .onec-form select, .onec-form textarea { width: 100%; box-sizing: border-box; }
.onec-form .checkbox { align-self: end; }
.onec-actions + .group-title, .onec-form + .onec-actions { margin-top: 18px; }

/* План оклейки FBO (packing/plan.ejs) */
.plan-stats { margin: 0 0 18px; }
.stat-card--alert { border-color: var(--badge-danger-text); }
.stat-card--alert .stat-card__value { color: var(--badge-danger-text); }
.plan-day { margin: 0 0 18px; }
.plan-day__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.plan-day__sum { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.plan-day--overdue .plan-day__title { color: var(--badge-danger-text); }
.plan-undated { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.plan-lead { margin: 18px 0; }
.plan-lead > .form-card, .plan-lead > .plan-undated { margin-top: 12px; }

/* Тестовый экземпляр (TEST_INSTANCE=1, src/testInstance.js) — чтобы его не путали с боевым. */
.test-instance-bar {
  padding: 4px 12px;
  background: #dc2626;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* Форма пользователя (users/form.ejs, users/created.ejs) — карточки в стиле
   отчёта упаковщиков: учётка и роли слева, доступ справа, выбор — чипами,
   исключения свёрнуты, «Сохранить» прилипает к низу экрана. */
form.uf { max-width: none; }
.uf-back { display: inline-block; margin-bottom: 2px; font-size: 13px; color: var(--text-muted); }
.uf-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px; align-items: start; }
.uf-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.uf-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0; }
.uf-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.uf-card__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.uf-card__sub { font-size: 12px; color: var(--text-muted); }
.uf-count { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--primary); }
.uf-field-hint { margin: -8px 0 12px; }
.uf-note { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; padding: 8px 10px; border-radius: 6px; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); font-size: 12px; color: var(--text-muted); }
.uf-note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--primary); }
.uf-switches { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 12px; border-top: 1px solid var(--border); }
.uf-switch { display: flex; flex-direction: column; gap: 4px; }
.uf-switch__label { font-size: 12px; color: var(--text-muted); }
.uf .segmented--radio .segmented__item { margin-bottom: 0; font-size: 13px; }
.uf-group + .uf-group { margin-top: 12px; }
.uf-group__title { margin-bottom: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.uf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Чип — label с невидимым чекбоксом; выбранный подсвечен цветом и галкой. */
form label.uf-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--text); cursor: pointer; user-select: none; }
.uf-chip input { position: absolute; opacity: 0; pointer-events: none; }
.uf-chip:hover { border-color: var(--primary); }
.uf-chip:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); font-weight: 500; }
.uf-chip:has(input:checked)::before { content: '✓'; font-weight: 700; }
.uf-chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }
.uf-chip:has(input:disabled) { cursor: default; }
.uf-chip .badge { margin-left: 2px; }
form label.uf-chip--all { margin-bottom: 12px; }
.uf [data-scope-list].is-disabled { opacity: 0.45; pointer-events: none; }
.uf-perms { margin-top: 14px; }
.uf-perms summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; cursor: pointer; list-style: none; }
.uf-perms summary::-webkit-details-marker { display: none; }
.uf-perms summary::before { content: '▸'; color: var(--text-muted); }
.uf-perms[open] summary::before { content: '▾'; }
.uf-perms summary .uf-card__sub { flex-basis: 100%; }
.uf-perms__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px 24px; margin-top: 14px; }
.uf-perm { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); font-size: 13px; }
.uf-perm select { flex: none; width: auto; margin: 0; padding: 3px 6px; }
.uf-perm--set { color: var(--badge-warning-text); font-weight: 500; }
.uf-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 8px; margin: 14px 0 0; padding: 10px 0; border-top: 1px solid var(--border); background: var(--bg); }
.uf-created { max-width: 640px; }
.uf-cred { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.uf-cred__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.uf-cred__label { flex: none; width: 70px; font-size: 12px; color: var(--text-muted); }
.uf-cred__value { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 15px; font-weight: 600; }
.uf-cred__value--secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: .06em; user-select: all; }
.uf-cred__both { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.uf-cred__both svg { width: 15px; height: 15px; }
.uf-cred__both .copy-btn__done, .uf-cred__both.is-copied .copy-btn__idle { display: none; }
.uf-cred__both.is-copied .copy-btn__done { display: inline-flex; color: var(--success-text); }
.uf-cred__both span { display: inline-flex; }
.uf-created__warn { margin-bottom: 14px; }
.uf-created__summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 16px; font-size: 13px; }
.uf-created__summary dt { color: var(--text-muted); }
.uf-created__summary dd { margin: 0; }
.uf-created__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.uf-created__actions form { max-width: none; margin: 0; }
.uf-icon-btn { display: inline-flex; align-items: center; gap: 6px; }
.uf-icon-btn svg { width: 16px; height: 16px; }
@media (max-width: 1000px) {
  .uf-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .uf-perms__grid { grid-template-columns: minmax(0, 1fr); }
  .uf-cred__value--secret { font-size: 17px; }
  .uf-savebar .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
}