/* ════════════════════════════════════════════════════════════════════════
   Склад v2 — дизайн-система (фирменный стиль xxlmp, как okk)
   Токены + библиотека компонентов. Плотность — уровень Ozon Seller.
   Шрифты: Inter (текст) + JetBrains Mono (числа). Иконки: Bootstrap Icons.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Палитра */
  --primary:        #4f46e5;
  --primary-dark:   #4338ca;
  --primary-light:  #eef2ff;
  --success:        #10b981;
  --success-light:  #d1fae5;
  --success-dark:   #047857;
  --warning:        #f59e0b;
  --warning-light:  #fef3c7;
  --warning-dark:   #92400e;
  --danger:         #ef4444;
  --danger-light:   #fee2e2;
  --danger-dark:    #b91c1c;
  --info:           #06b6d4;
  --info-light:     #cffafe;
  --info-dark:      #0e7490;

  /* Нейтральные */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Радиусы и тени */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow:    0 4px 12px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .04);
  --shadow-xl: -12px 0 40px rgba(15, 23, 42, .16);

  /* Макет */
  --banner-h:    0px;   /* плашка теста создаётся JS только на тест-стенде */
  --topbar-h:    56px;
  --sidebar-w:   220px;
  --sidebar-min: 64px;
  --drawer-w:    640px;   /* Антон 16.07: журнал движений места умещается */

  --font: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ══ База ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 13.5px; line-height: 1.45;
  background: var(--slate-100); color: var(--slate-800);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--slate-900); font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 19px; }
h2 { font-size: 15px; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; }
code, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-size: .85em; background: var(--slate-100); color: var(--slate-600); padding: 2px 5px; border-radius: 4px; }
.muted { color: var(--slate-500); }
.small { font-size: 12px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
::placeholder { color: var(--slate-400); }

/* ══ Баннер тест-площадки ════════════════════════════════════════════ */
#banner {
  position: fixed; top: 0; left: 0; right: 0; height: var(--banner-h); z-index: 300;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: #fef9c3; color: #854d0e; border-bottom: 1px solid #fde047;
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; padding: 0 10px;
}
#banner i { font-size: 12px; }
.banner-short { display: none; }

/* ══ Каркас ══════════════════════════════════════════════════════════ */
#app { padding-top: var(--banner-h); }
#content { margin-left: var(--sidebar-w); transition: margin-left .18s ease; min-width: 0; }
#main { padding: 20px 24px 56px; max-width: 1440px; }
body.sb-min #content { margin-left: var(--sidebar-min); }

/* ── единый контейнер контента раздела: на широком мониторе держим
   аккуратную колонку по центру рабочей области, а не во всю ширину ── */
.page-content { max-width: 1320px; margin: 0 auto; }
/* вертикальная стопка карточек с единым ритмом (вместо inline margin-top) */
.card-stack { display: flex; flex-direction: column; gap: 12px; }
.card-stack > .card { margin: 0; }
/* сетка карточек: несколько в ряд на широком, одна на узком */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
@media (max-width: 1080px) { .cards-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }

/* ══ Сайдбар (slate-900 → 950) ═══════════════════════════════════════ */
#sidebar {
  position: fixed; top: var(--banner-h); left: 0; bottom: 0; z-index: 110;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--slate-900) 0%, var(--slate-950) 100%);
  display: flex; flex-direction: column;
  transition: width .18s ease, transform .2s ease;
}
body.sb-min #sidebar { width: var(--sidebar-min); }

.sb-brand {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: -.01em;
  border-bottom: 1px solid rgba(148, 163, 184, .14); white-space: nowrap; overflow: hidden;
  text-decoration: none;
}
.sb-brand:hover { color: #fff; text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; box-shadow: 0 3px 10px rgba(79, 70, 229, .4);
}
.brand-txt .v2 { color: #818cf8; }
body.sb-min .sb-brand { padding: 0; justify-content: center; }
body.sb-min .brand-txt { display: none; }

.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; scrollbar-width: thin; }
.sb-group {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--slate-500); padding: 14px 10px 4px; white-space: nowrap;
}
.sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin-bottom: 1px; border-radius: 7px;
  color: var(--slate-300); font-size: 13.5px; font-weight: 500; text-decoration: none;
  white-space: nowrap; overflow: hidden;
}
.sb-link i { font-size: 15px; width: 18px; flex: none; text-align: center; color: var(--slate-400); }
.sb-link:hover { background: rgba(148, 163, 184, .12); color: #fff; text-decoration: none; }
.sb-link:hover i { color: var(--slate-200); }
.sb-link.active { background: var(--primary); color: #fff; }
.sb-link.active i { color: #fff; }
.sb-sub { padding-left: 20px; font-size: 13px; }
body.sb-min .sb-link { justify-content: center; padding: 9px 0; }
body.sb-min .sb-link .lbl { display: none; }
body.sb-min .sb-sub { padding-left: 0; }
body.sb-min .sb-group {
  padding: 0; margin: 8px 14px 6px; height: 0; overflow: hidden;
  border-top: 1px solid rgba(148, 163, 184, .18);
}

/* ── блок аккаунта внизу сайдбара (имя/роль/аватар + выход) ── */
.sb-acct { flex: none; padding: 8px; border-top: 1px solid rgba(148, 163, 184, .14); }
.sb-acct-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 9px; background: rgba(148, 163, 184, .08);
}
.sb-ava {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700;
}
.sb-acct-nm { flex: 1; min-width: 0; line-height: 1.2; display: flex; flex-direction: column; }
.sb-acct-nm .nm {
  font-weight: 600; font-size: 13px; color: #fff;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sb-acct-nm .rl { font-size: 11px; color: var(--slate-400); }
.sb-logout {
  flex: none; width: 30px; height: 30px; border-radius: 7px;
  border: none; background: none; color: var(--slate-400); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.sb-logout:hover { background: rgba(239, 68, 68, .18); color: #fca5a5; }
.sb-login {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  background: var(--primary); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.sb-login:hover { background: var(--primary-dark); color: #fff; text-decoration: none; }
.sb-login i { font-size: 15px; }
/* свёрнутый сайдбар — только аватар/иконка */
body.sb-min .sb-acct-row { padding: 6px; justify-content: center; background: none; }
body.sb-min .sb-acct-nm, body.sb-min .sb-logout { display: none; }
body.sb-min .sb-login { justify-content: center; padding: 9px 0; }
body.sb-min .sb-login .lbl { display: none; }

.sb-foot { flex: none; padding: 8px; border-top: 1px solid rgba(148, 163, 184, .14); }
.sb-collapse {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-radius: 7px; cursor: pointer;
  color: var(--slate-400); font: inherit; font-size: 12.5px; padding: 7px 10px; white-space: nowrap;
}
.sb-collapse i { font-size: 14px; width: 18px; flex: none; text-align: center; }
.sb-collapse:hover { background: rgba(148, 163, 184, .12); color: #fff; }
body.sb-min .sb-collapse { justify-content: center; padding: 9px 0; }
body.sb-min .sb-collapse .lbl { display: none; }

#sb-backdrop {
  display: none; position: fixed; inset: var(--banner-h) 0 0 0;
  background: rgba(15, 23, 42, .5); z-index: 105;
}

/* ══ Топбар ══════════════════════════════════════════════════════════ */
#topbar {
  position: sticky; top: var(--banner-h); z-index: 90;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: #fff; border-bottom: 1px solid var(--slate-200);
}
#topbar .tb-burger { display: none; }
.tb-search { position: relative; width: 290px; flex: none; }
.tb-search > i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--slate-400); font-size: 13px; pointer-events: none;
}
.tb-search input { width: 100%; padding-left: 31px; }
.tb-chips {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; padding: 2px 0;
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.tb-chips::-webkit-scrollbar { display: none; }
.tb-user { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.tb-user .nm-wrap { line-height: 1.15; }
.tb-user .nm { font-weight: 600; font-size: 13px; color: var(--slate-800); }
.tb-user .rl { font-size: 11px; color: var(--slate-500); }

/* ══ Кнопки ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--slate-300); background: #fff; color: var(--slate-700);
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  text-decoration: none; white-space: nowrap; user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--slate-50); border-color: var(--slate-400); color: var(--slate-900); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-danger { border-color: #fca5a5; color: var(--danger-dark); }
.btn-danger:hover { background: var(--danger-light); border-color: var(--danger); color: var(--danger-dark); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--slate-500); }
.btn-ghost:hover { background: var(--slate-100); border-color: transparent; color: var(--slate-800); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.btn-icon { width: 34px; padding: 0; flex: none; }
.btn-sm.btn-icon { width: 28px; }
/* очень мелкая кнопка для действий в плотной таблице (Задания/Инвентаризация) */
.btn-xs { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 6px; }
.btn-xs.btn-icon { width: 24px; padding: 0; }
/* строка-«готово/отменено» в таблицах — приглушённая */
.dt-table tbody tr.row-muted td { opacity: .6; }
/* цветной текст в ячейке (Δ инвентаризации: недостача/излишек) */
.dt-table td.bad { color: var(--danger-dark); font-weight: 600; }
.dt-table td.warn { color: var(--warning-dark); font-weight: 600; }
.btn-block { width: 100%; }
.btn:disabled, .btn.loading { opacity: .55; pointer-events: none; }

/* ══ Формы ═══════════════════════════════════════════════════════════ */
.input, .select {
  height: 34px; padding: 0 10px; border: 1px solid var(--slate-300); border-radius: 8px;
  font: inherit; font-size: 13.5px; color: var(--slate-800); background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
.input:disabled, .select:disabled { background: var(--slate-50); color: var(--slate-400); }
.field { min-width: 0; }
.field > label { display: block; font-size: 12px; font-weight: 500; color: var(--slate-500); margin-bottom: 4px; }
.field .input, .field .select { width: 100%; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; user-select: none; }
.check input { width: 15px; height: 15px; accent-color: var(--primary); margin: 0; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }

/* ══ Чипы-фильтры ════════════════════════════════════════════════════ */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border: 1px solid var(--slate-300); border-radius: 999px; background: #fff;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--slate-600);
  cursor: pointer; white-space: nowrap; user-select: none; flex: none;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { border-color: var(--slate-400); color: var(--slate-800); }
.chip.active { background: var(--primary-light); border-color: #c7d2fe; color: var(--primary-dark); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip .cnt { font-family: var(--mono); font-size: 11px; color: var(--slate-400); }
.chip.active .cnt { color: var(--primary); }

/* ══ Карточки ════════════════════════════════════════════════════════ */
.card {
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.card-h {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  border-bottom: 1px solid var(--slate-100); font-weight: 600; font-size: 13.5px; color: var(--slate-900);
}
.card-h i { color: var(--slate-400); font-size: 14px; }
.card-h .spacer { flex: 1; }
.card-b { padding: 14px 16px; }
.card-b.tight { padding: 0; }

/* ══ KPI-плитки ══════════════════════════════════════════════════════ */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi {
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 13px 15px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; min-width: 0;
}
.kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); }
.kpi-txt { min-width: 0; }   /* текстовая колонка плитки: не распирает флекс */
.kpi-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; line-height: 1.15; margin-top: 3px; color: var(--slate-900); }
.kpi-value.good { color: var(--success-dark); }
.kpi-value.bad { color: var(--danger-dark); }
.kpi-sub { font-size: 11.5px; color: var(--slate-400); margin-top: 2px; }
.kpi-ic {
  width: 34px; height: 34px; flex: none; border-radius: 9px; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
}
.kpi-ic.success { background: var(--success-light); color: var(--success-dark); }
.kpi-ic.warning { background: var(--warning-light); color: var(--warning-dark); }
.kpi-ic.info { background: var(--info-light); color: var(--info-dark); }
.kpi-ic.muted { background: var(--slate-100); color: var(--slate-500); }

/* ══ Плотная data-table ══════════════════════════════════════════════ */
.dt { overflow: auto; border-radius: 0 0 var(--radius) var(--radius); }
.dt-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.dt-table th {
  position: sticky; top: 0; z-index: 2; background: var(--slate-50);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--slate-500); text-align: left; white-space: nowrap;
  height: 36px; padding: 0 12px; border-bottom: 1px solid var(--slate-200);
}
.dt-table td { height: 40px; padding: 5px 12px; border-bottom: 1px solid var(--slate-100); vertical-align: middle; }
.dt-table tbody tr:last-child td { border-bottom: none; }
.dt-table tbody tr.clickable { cursor: pointer; }
.dt-table tbody tr:hover td { background: var(--slate-50); }
.dt-table tbody tr.sel td { background: var(--primary-light); }
.dt-zebra tbody tr:nth-child(even) td { background: var(--slate-50); }
.dt-zebra tbody tr:hover td { background: var(--slate-100); }
.dt-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dt-table td a { white-space: nowrap; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--slate-700); }
th.sortable .bi { font-size: 10px; margin-left: 3px; opacity: .4; }
th.sortable.sorted { color: var(--primary-dark); }
th.sortable.sorted .bi { opacity: 1; color: var(--primary); }
.dt-foot {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-top: 1px solid var(--slate-100); font-size: 12.5px; color: var(--slate-500);
}
.dt-foot .spacer { flex: 1; }

.thumb {
  width: 28px; height: 28px; border-radius: 6px; flex: none; overflow: hidden;
  background: var(--slate-100); color: var(--slate-400);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cell-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-title .t { display: block; font-weight: 500; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.cell-title .s { display: block; font-size: 11.5px; color: var(--slate-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }

/* ══ Бейджи ══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px;
  border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.badge i { font-size: 10px; }
.badge-success { background: var(--success-light); color: var(--success-dark); }
.badge-warning { background: var(--warning-light); color: var(--warning-dark); }
.badge-danger  { background: var(--danger-light); color: var(--danger-dark); }
.badge-info    { background: var(--info-light); color: var(--info-dark); }
.badge-primary { background: var(--primary-light); color: var(--primary-dark); }
.badge-muted   { background: var(--slate-200); color: var(--slate-600); }
/* бейдж юрлица: цвет задаётся инлайном (6 фиксированных цветов), точка + тинт */
.badge-ip { background: var(--slate-100); color: var(--slate-700); }
.badge-ip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ══ Плашки-заметки ══════════════════════════════════════════════════ */
.note { display: flex; align-items: flex-start; gap: 8px; border-radius: 8px; padding: 9px 12px; margin: 10px 0; font-size: 13px; }
.note i { font-size: 14px; margin-top: 1px; }
.note-ok   { background: var(--success-light); color: var(--success-dark); }
.note-bad  { background: var(--danger-light); color: var(--danger-dark); }
.note-warn { background: var(--warning-light); color: var(--warning-dark); }
.note-info { background: var(--primary-light); color: var(--primary-dark); }

/* ══ Статус моста печати (Настройки → Принтеры) ════════════════════════ */
.bridge-state { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; }
.bridge-state i { font-size: 26px; flex: none; }
.bridge-state.ok  { background: var(--success-light); color: var(--success-dark); }
.bridge-state.bad { background: var(--danger-light);  color: var(--danger-dark); }
.bridge-state .bs-title { font-weight: 600; font-size: 15px; }
.bridge-state .bs-sub { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.queue-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.queue-row { display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-radius: 7px; background: var(--slate-50); font-size: 13px; }
.queue-row .qn { color: var(--slate-700); }
.queue-row .qs { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.queue-row .qs.ok   { color: var(--success-dark); }
.queue-row .qs.bad  { color: var(--danger-dark); }
.queue-row .qs.warn { color: var(--warning-dark); }
.queue-row .qs.muted { color: var(--slate-500); }

/* ══ Drawer (карточка справа) ════════════════════════════════════════ */
.drawer-backdrop {
  position: fixed; inset: var(--banner-h) 0 0 0; z-index: 200;
  background: rgba(15, 23, 42, .45);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.drawer {
  position: fixed; top: var(--banner-h); right: 0; bottom: 0; z-index: 201;
  width: var(--drawer-w); max-width: 100vw;
  background: #fff; box-shadow: var(--shadow-xl);
  transform: translateX(102%); transition: transform .22s ease;
  display: flex; flex-direction: column;
}
.drawer-open .drawer { transform: none; }
.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer-h {
  flex: none; display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--slate-200);
}
.drawer-h .ttl { font-size: 15px; font-weight: 600; color: var(--slate-900); line-height: 1.3; }
.drawer-h .sub { font-size: 12px; color: var(--slate-500); margin-top: 2px; }
.drawer-h .x { margin-left: auto; }
.drawer-b { flex: 1; overflow-y: auto; padding: 14px 18px 20px; }
.drawer-f {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-top: 1px solid var(--slate-200); background: var(--slate-50);
}
.dsec { margin-bottom: 18px; }
.dsec-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--slate-500); margin-bottom: 8px;
}
.dsec-h i { font-size: 12px; color: var(--slate-400); }
.props { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.props .p .k { font-size: 11.5px; color: var(--slate-400); }
.props .p .v { font-size: 13px; color: var(--slate-800); word-break: break-word; }

/* ══ Модалка ═════════════════════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 250; background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  width: 440px; max-width: 100%; max-height: 86vh; overflow: auto;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 20px;
}

/* ══ Toast ═══════════════════════════════════════════════════════════ */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 400; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 9px; max-width: 360px;
  background: var(--slate-900); color: #f1f5f9; border-radius: 10px;
  padding: 10px 14px; font-size: 13px; box-shadow: var(--shadow-lg);
  animation: toast-in .2s ease;
}
.toast i { font-size: 15px; flex: none; }
.toast.ok i { color: #34d399; }
.toast.err i { color: #f87171; }
.toast.info i { color: #818cf8; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ══ Skeleton ════════════════════════════════════════════════════════ */
.skel { position: relative; overflow: hidden; background: var(--slate-200); border-radius: 6px; }
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-line { height: 12px; }
.skel-rows { padding: 6px 14px 14px; }
.skel-rows .skel { height: 14px; margin-top: 14px; }

/* ══ Empty-state ═════════════════════════════════════════════════════ */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 24px; }
.empty-ic {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: 14px;
  background: var(--slate-100); color: var(--slate-400); font-size: 24px;
  display: flex; align-items: center; justify-content: center;
}
.empty-ic.primary { background: var(--primary-light); color: var(--primary); }
.empty-title { font-size: 15px; font-weight: 600; color: var(--slate-800); }
.empty-desc { font-size: 13px; color: var(--slate-500); max-width: 440px; margin-top: 6px; }
.empty .btn { margin-top: 14px; }

/* ══ Прогресс ════════════════════════════════════════════════════════ */
.progress { height: 6px; background: var(--slate-200); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s; }

/* ══ Tabs ════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--slate-200); margin-bottom: 14px; }
.tab {
  padding: 8px 12px; margin-bottom: -1px; background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--slate-500);
}
.tab:hover { color: var(--slate-800); }
.tab.active { color: var(--primary-dark); border-bottom-color: var(--primary); }

/* ══ Степпер этапов (главная) ════════════════════════════════════════ */
.stepper { padding: 4px 2px; }
.step { display: flex; gap: 12px; position: relative; padding: 8px 0; }
.step::before {
  content: ''; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px;
  background: var(--slate-200);
}
.step:first-child::before { top: 50%; }
.step:last-child::before { bottom: 50%; }
.step-ic {
  width: 28px; height: 28px; border-radius: 50%; flex: none; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; font-family: var(--mono);
  background: var(--slate-100); color: var(--slate-400);
  border: 2px solid var(--slate-100);
}
.step.done .step-ic { background: var(--success-light); border-color: var(--success-light); color: var(--success-dark); font-size: 13px; }
.step.cur .step-ic { background: var(--primary); border-color: var(--primary-light); color: #fff; font-size: 13px; }
.step-body { padding-top: 4px; min-width: 0; font-size: 13.5px; color: var(--slate-700); }
.step.done .step-body { color: var(--slate-500); }
.step.cur .step-body { font-weight: 500; color: var(--slate-900); }
.step-no { color: var(--slate-400); font-weight: 600; margin-right: 6px; font-size: 12px; }

/* ══ Тулбар над таблицей ═════════════════════════════════════════════ */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }
.toolbar .count { font-size: 12.5px; color: var(--slate-500); white-space: nowrap; }

/* ══ Заголовок страницы ══════════════════════════════════════════════ */
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head .sub { font-size: 12.5px; color: var(--slate-500); width: 100%; margin-top: -6px; }

/* ══ Логин ═══════════════════════════════════════════════════════════ */
body.page-login #sidebar, body.page-login #topbar, body.page-login #banner { display: none; }
body.page-login #content { margin-left: 0; }
body.page-login #app { padding-top: 0; }
/* карточка строго по центру всего экрана (и по горизонтали, и по вертикали) */
body.page-login #main { padding: 0; max-width: none; }
.login-wrap {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(99, 102, 241, .14), transparent 60%),
    radial-gradient(1000px 500px at 110% 120%, rgba(124, 58, 237, .12), transparent 55%),
    var(--slate-50);
}
.login-card {
  width: 380px; max-width: 100%;
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 30px 28px 26px;
}
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 4px; }
.login-logo .brand-mark { width: 46px; height: 46px; border-radius: 13px; font-size: 22px; }
.login-logo .nm { font-size: 19px; font-weight: 700; color: var(--slate-900); }
.login-sub { text-align: center; font-size: 12.5px; color: var(--slate-500); margin-bottom: 20px; }

.lg-field { margin-bottom: 16px; }
.lg-label { display: block; font-size: 12px; font-weight: 600; color: var(--slate-600); margin-bottom: 6px; }

/* ── кастомный выпадающий список выбора сотрудника ── */
.lg-dd { position: relative; }
.lg-dd-toggle {
  width: 100%; height: 42px; padding: 0 12px;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--slate-300); border-radius: var(--radius);
  font: inherit; font-size: 14px; color: var(--slate-800); cursor: pointer; text-align: left;
}
.lg-dd-toggle:hover { border-color: var(--slate-400); }
.lg-dd.open .lg-dd-toggle { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.lg-dd-val { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lg-dd-caret { color: var(--slate-400); font-size: 13px; transition: transform .15s ease; }
.lg-dd.open .lg-dd-caret { transform: rotate(180deg); }
.lg-dd-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.lg-dd.open .lg-dd-menu { display: block; }
.lg-dd-search { position: relative; padding: 8px; border-bottom: 1px solid var(--slate-100); }
.lg-dd-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--slate-400); font-size: 13px; }
.lg-dd-search input {
  width: 100%; height: 34px; padding: 0 10px 0 30px;
  border: 1px solid var(--slate-200); border-radius: 8px; font: inherit; font-size: 13.5px;
}
.lg-dd-search input:focus { outline: none; border-color: var(--primary); }
.lg-dd-list { max-height: 240px; overflow-y: auto; padding: 4px; scrollbar-width: thin; }
.lg-dd-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border: none; background: none; border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--slate-800); cursor: pointer; text-align: left;
}
.lg-dd-item:hover { background: var(--slate-50); }
.lg-dd-item.sel { background: var(--primary-light); color: var(--primary-dark); }
.lg-dd-nm { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lg-dd-ok { color: var(--primary); font-size: 15px; }
.lg-dd-ava {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700;
}
.lg-dd-ava.sm { width: 24px; height: 24px; font-size: 11.5px; }
.lg-dd-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--slate-500); }

/* ── PIN как блокировка iPhone: ряд клеток + скрытый input ── */
.pin-pad {
  display: flex; gap: 10px; justify-content: center; padding: 4px 0;
  cursor: text; outline: none;
}
.pin-cell {
  width: 42px; height: 50px; border-radius: 11px;
  border: 1.5px solid var(--slate-300); background: var(--slate-50);
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.pin-cell.filled { border-color: var(--primary); background: #fff; }
.pin-cell.filled::after {
  content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--primary);
}
.pin-pad.focused .pin-cell:not(.filled):first-child,
.pin-pad.focused .pin-cell.filled + .pin-cell:not(.filled) {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
.pin-hidden {
  position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
  left: -9999px;
}
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.pin-pad.shake { animation: pin-shake .42s ease; }
.pin-pad.shake .pin-cell { border-color: var(--danger); }

/* кнопка «Войти» — резерв, незаметная */
.lg-fallback { margin-top: 12px; height: 36px; color: var(--slate-500); font-size: 13px; }
#login-msg:not(:empty) { margin-top: 12px; }

/* ══ Адаптив ═════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .tb-chips { display: none; }
  .only-narrow { display: inline-flex; }
}
@media (min-width: 1101px) { .only-narrow { display: none; } }

@media (max-width: 768px) {
  #sidebar { transform: translateX(-100%); width: 240px; }
  body.sb-min #sidebar { width: 240px; }
  body.sb-open #sidebar { transform: none; }
  body.sb-open #sb-backdrop { display: block; }
  #content, body.sb-min #content { margin-left: 0; }
  .sb-foot { display: none; }
  /* на телефоне сайдбар всегда полный — аккаунт показываем целиком */
  body.sb-min .sb-acct-row { padding: 6px 8px; justify-content: flex-start; background: rgba(148, 163, 184, .08); }
  body.sb-min .sb-acct-nm, body.sb-min .sb-logout { display: flex; }
  body.sb-min .sb-acct-nm { display: flex; }
  body.sb-min .sb-login { justify-content: flex-start; padding: 9px 10px; }
  body.sb-min .sb-login .lbl { display: inline; }
  /* на телефоне сайдбар всегда полный, даже если на десктопе был свёрнут */
  body.sb-min .sb-link { justify-content: flex-start; padding: 7px 10px; }
  body.sb-min .sb-link .lbl, body.sb-min .brand-txt { display: inline; }
  body.sb-min .sb-sub { padding-left: 20px; }
  body.sb-min .sb-brand { padding: 0 14px; justify-content: flex-start; }
  body.sb-min .sb-group {
    height: auto; overflow: visible; border-top: none;
    padding: 14px 10px 4px; margin: 0;
  }
  #topbar .tb-burger { display: inline-flex; }
  #topbar { padding: 0 12px; gap: 10px; }
  .tb-search { width: auto; flex: 1; min-width: 0; }
  .tb-user .nm-wrap { display: none; }
  #main { padding: 14px 12px 48px; }
  .banner-full { display: none; }
  .banner-short { display: inline; }
  .props { grid-template-columns: 1fr 1fr; }
  .cell-title .t, .cell-title .s { max-width: 130px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: 19px; }
  .drawer { width: 100vw; }
  .dt-table th, .dt-table td { padding-left: 10px; padding-right: 10px; }
  /* на телефоне второстепенные колонки скрываем */
  .dt-table .hm { display: none; }
}

/* ══ Карта склада (этап 2): инлайн-SVG по эталону docs/etalon_map.html ══ */
#warehouse-map {
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 10px; max-width: 880px;
}
#wm-svg { display: block; width: 100%; height: auto; font-family: inherit; }
#wm-svg.editing { touch-action: none; }

/* комнаты и декор */
#wm-svg .wms-room { fill: #fbfcfe; stroke: var(--slate-600); stroke-width: 3; }
#wm-svg .wms-rlabel { font-size: 12px; font-weight: 800; fill: var(--slate-600); letter-spacing: .04em; }
#wm-svg .wms-win { fill: #bae6fd; }
#wm-svg .wms-solid { fill: #fff; stroke: var(--slate-400); stroke-width: 1.5; }
#wm-svg .wms-zlabel { font-size: 10.5px; font-weight: 700; fill: var(--slate-500); }
#wm-svg .wms-zone { fill: none; stroke: var(--slate-300); stroke-width: 1.5; stroke-dasharray: 6 4; }
#wm-svg .wms-zone-buf { stroke: #0284c7; }
#wm-svg .wms-buf-cap { font-size: 10px; font-weight: 800; fill: #075985; }
#wm-svg .wms-cap { font-size: 10px; font-weight: 700; fill: var(--slate-500); }
#wm-svg .wms-lbl { font-size: 8.5px; fill: var(--slate-400); }
#wm-svg .wms-shelf { fill: #f3e8ff; stroke: #7c3aed; stroke-width: 1.5; }
#wm-svg .wms-shelf-lbl { font-size: 8px; font-weight: 700; fill: #5b21b6; }
#wm-svg .wms-tbl { fill: #fffbeb; stroke: #a16207; stroke-width: 1.2; }
#wm-svg .wms-tbl-lbl { font-size: 9px; font-weight: 700; fill: #713f12; }
#wm-svg .wms-door { fill: #fff; stroke: #dc2626; stroke-width: 1.6; stroke-dasharray: 4 3; }
#wm-svg .wms-doorlbl { font-size: 8.5px; font-weight: 700; fill: #dc2626; }
#wm-svg .wms-ret { fill: #fee2e2; stroke: #dc2626; stroke-width: 2.2; }
#wm-svg .wms-ret-lbl { font-size: 10px; font-weight: 800; fill: #7f1d1d; }
#wm-svg .wms-junk { fill: #fff7f7; stroke: #dc2626; stroke-width: 1.5; stroke-dasharray: 5 4; }
#wm-svg .wms-junk-lbl { font-size: 9.5px; font-weight: 800; fill: #7f1d1d; }
#wm-svg .wms-wavy { fill: none; stroke: var(--slate-400); stroke-width: 2.5; }
#wm-svg .wms-pallets { fill: url(#wmHatch); stroke: var(--slate-400); stroke-width: 1.6; }
#wm-svg .wms-strong { font-size: 9.5px; font-weight: 800; fill: var(--slate-600);
  stroke: #fff; stroke-width: 3; paint-order: stroke; }
#wm-svg .wms-barrier { font-size: 9.5px; font-weight: 800; fill: #dc2626;
  stroke: #fff; stroke-width: 3; paint-order: stroke; }
#wm-svg .wms-bike { fill: none; stroke: var(--slate-400); stroke-width: 1.6; }

/* маркер места (из БД map_x/map_y) — палитра состояний 03 */
#wm-svg g.wm-mark { cursor: pointer; }
#wm-svg g.wm-mark rect { fill: #fff; stroke: var(--slate-300); stroke-width: 1.5; }
#wm-svg g.wm-mark:hover rect { stroke-width: 2.5; }
#wm-svg g.wm-mark .adr { font-size: 9px; font-weight: 700; fill: var(--slate-700); text-anchor: middle; }
#wm-svg g.wm-mark .n { font-family: var(--mono); font-size: 8px; font-weight: 700;
  fill: var(--slate-500); stroke: #fff; stroke-width: 2.5; paint-order: stroke; }
#wm-svg g.wm-mark.sz-sm .adr { font-size: 7.5px; }
#wm-svg g.wm-mark.sz-lg .adr { font-size: 12px; }
#wm-svg g.wm-mark.st-occupied rect { fill: var(--success-light); stroke: var(--success); }
#wm-svg g.wm-mark.st-occupied .adr { fill: var(--success-dark); }
#wm-svg g.wm-mark.st-warn rect { fill: var(--warning-light); stroke: var(--warning); }
#wm-svg g.wm-mark.st-warn .adr { fill: var(--warning-dark); }
#wm-svg g.wm-mark.st-danger rect { fill: var(--danger-light); stroke: var(--danger); }
#wm-svg g.wm-mark.st-danger .adr { fill: var(--danger-dark); }
#wm-svg g.wm-mark.st-blocked rect { fill: var(--slate-100); stroke: var(--slate-200); }
#wm-svg g.wm-mark.st-blocked .adr { fill: var(--slate-400); }

/* фильтры: чужое ИП — пунктир+притухание, поиск — подсветка/притухание */
#wm-svg g.wm-mark.foreign { opacity: .45; }
#wm-svg g.wm-mark.foreign rect { stroke-dasharray: 3 2; }
#wm-svg g.wm-mark.hl rect { stroke: var(--primary); stroke-width: 3; }
#wm-svg g.wm-mark.dim { opacity: .22; }

/* drag-редактор (только админ) */
#wm-svg.editing g.wm-mark { cursor: grab; touch-action: none; }
#wm-svg.editing g.wm-mark.dragging { cursor: grabbing; opacity: .85; }
#wm-svg.editing g.wm-mark rect { stroke-dasharray: 4 2; }

/* конструктор: элементы карты из БД (зоны/подписи/декор) */
#wm-svg g.wm-el { pointer-events: none; }            /* вне редактора декор не перехватывает клики мест */
#wm-svg g.wm-el .el-box { fill: none; stroke: var(--slate-300); stroke-width: 1.5; stroke-dasharray: 6 4; }
#wm-svg g.wm-el.el-decor .el-box { fill: #fffbeb; stroke: #a16207; stroke-width: 1.2; stroke-dasharray: none; }
#wm-svg g.wm-el .el-cap { font-size: 10px; font-weight: 700; fill: var(--slate-500); }
#wm-svg g.wm-el .el-cap-in { font-size: 9px; font-weight: 700; fill: #713f12; }
#wm-svg g.wm-el .el-text { font-size: 11px; font-weight: 800; fill: var(--slate-600); letter-spacing: .03em; }
#wm-svg g.wm-el.dim { opacity: .25; }
#wm-svg g.wm-el .el-resize { display: none; }
/* в редакторе элементы активны: можно тащить, ресайзить уголком, кликать */
#wm-svg.editing g.wm-el { pointer-events: all; cursor: grab; touch-action: none; }
#wm-svg.editing g.wm-el .el-box { stroke: var(--primary); stroke-dasharray: 4 2; }
#wm-svg.editing g.wm-el.dragging { cursor: grabbing; opacity: .85; }
#wm-svg.editing g.wm-el .el-resize { display: block; fill: var(--primary); cursor: nwse-resize; opacity: .8; }

/* формы маркеров по типу: FLOOR (палета) толще, SHELF (поштучно) тоньше */
#wm-svg g.wm-mark .mk-floor { stroke-width: 2.4; }
#wm-svg g.wm-mark .mk-pallet { stroke: var(--slate-400); stroke-width: 1.1; }
#wm-svg g.wm-mark.st-occupied .mk-pallet { stroke: var(--success); }
#wm-svg g.wm-mark .mk-shelf { stroke-width: 1; stroke-dasharray: 2 1.5; }
#wm-svg g.wm-mark.zn-FLOOR rect { fill: #fff; }
#wm-svg g.wm-mark.zn-SHELF .mk-shelf { fill: #faf5ff; stroke: #a78bda; }
#wm-svg g.wm-mark.zn-SHELF.st-occupied .mk-shelf { fill: var(--success-light); stroke: var(--success); }
/* выделенные в редакторе — синяя жирная обводка + лёгкая подсветка */
#wm-svg.editing g.wm-mark.picked rect,
#wm-svg.editing g.wm-mark.picked .mk-floor,
#wm-svg.editing g.wm-mark.picked .mk-shelf { stroke: var(--primary); stroke-width: 3; stroke-dasharray: none; }
#wm-svg.editing g.wm-el.picked .el-box { stroke: var(--primary); stroke-width: 2.5; }
#wm-svg.editing g.wm-el.picked .el-text { fill: var(--primary-dark); }
/* рамка выделения области */
#wm-svg .wm-band { fill: rgba(79, 70, 229, .08); stroke: var(--primary); stroke-width: 1.2; stroke-dasharray: 5 3; pointer-events: none; }

/* плавающая панель массовых действий над картой */
.wm-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--primary-light); border: 1px solid var(--primary);
  border-radius: var(--radius); padding: 8px 12px; margin-bottom: 4px; font-size: 13px; }
.wm-selbar b { color: var(--primary-dark); }
.input-sm { height: 30px; padding: 0 8px; font-size: 13px; }

/* схема ярусов стеллажей */
.tiers-wrap { display: flex; gap: 18px; flex-wrap: wrap; }
.tier-stack { border: 1px solid var(--slate-200); border-radius: var(--radius); overflow: hidden; min-width: 220px; }
.tier-stack-h { background: var(--slate-100); font-weight: 700; font-size: 13px; padding: 6px 10px; color: var(--slate-700); }
.tier-row { display: flex; align-items: stretch; border-top: 1px solid var(--slate-100); }
.tier-badge { flex: none; width: 64px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--slate-500); background: #fbfcfe; border-right: 1px solid var(--slate-100); }
.tier-cells { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; flex: 1; }
.tier-cell { position: relative; min-width: 30px; height: 28px; padding: 0 5px; border-radius: 5px;
  border: 1.5px solid var(--slate-300); background: #fff; font-size: 10px; font-weight: 700;
  color: var(--slate-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tier-cell:hover { border-color: var(--primary); }
.tier-cell i { position: absolute; top: -5px; right: -4px; background: var(--slate-700); color: #fff;
  font-style: normal; font-size: 8px; font-weight: 700; border-radius: 6px; padding: 0 3px; line-height: 12px; }
.tier-cell.st-occupied { background: var(--success-light); border-color: var(--success); color: var(--success-dark); }
.tier-cell.st-warn { background: var(--warning-light); border-color: var(--warning); }
.tier-cell.st-danger { background: var(--danger-light); border-color: var(--danger); }
.tier-cell.st-blocked { background: var(--slate-100); color: var(--slate-400); }

/* легенда в тулбаре */
.wm-legend { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--slate-500); flex-wrap: wrap; }
.wm-legend span { display: inline-flex; align-items: center; gap: 4px; }
.wm-legend .lg { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--slate-300); display: inline-block; }
.wm-legend .lg.st-occupied { background: var(--success-light); border-color: var(--success); }
.wm-legend .lg.st-warn { background: var(--warning-light); border-color: var(--warning); }
.wm-legend .lg.st-danger { background: var(--danger-light); border-color: var(--danger); }
.wm-legend .lg.st-blocked { background: var(--slate-100); }

/* вкладки внутри карточки товара (Block 2.3) */
.ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--slate-200); margin-bottom: 14px; flex-wrap: wrap; }
.ptab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px;
  font-size: 13px; font-weight: 600; color: var(--slate-500); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ptab:hover { color: var(--slate-800); }
.ptab.active { color: var(--primary-dark); border-bottom-color: var(--primary); }

/* фото товара в карточке (Block 2.1) */
.prod-photo { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.prod-photo-box { width: 120px; height: 120px; flex: none; border: 1px solid var(--slate-200);
  border-radius: var(--radius); overflow: hidden; background: var(--slate-50);
  display: flex; align-items: center; justify-content: center; }
.prod-photo-box img { width: 100%; height: 100%; object-fit: cover; }
.prod-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--slate-300); font-size: 12px; }
.prod-photo-empty .bi { font-size: 28px; }
.prod-photo-act { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* крупное превью (шапка сборки ФБС) */
.thumb-lg { width: 56px; height: 56px; border-radius: var(--radius); }

/* карточка места */
.pd-prod { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.pd-hist { font-size: 12px; }
.pd-hist-row {
  display: grid; grid-template-columns: 110px 64px 1fr 40px 90px minmax(0, 1.4fr);
  gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--slate-100); align-items: center;
}
.pd-hist-row .in { color: var(--success-dark); font-weight: 600; }
.pd-hist-row .out { color: var(--slate-500); font-weight: 600; }
.chip-place { height: 22px; padding: 0 8px; font-size: 11px; }

@media (max-width: 760px) {
  #warehouse-map { padding: 6px; }
  .pd-hist-row { grid-template-columns: 90px 56px 1fr; }
  .pd-hist-row > :nth-child(n+4) { display: none; }
}

/* ══ Приёмка (этап 3): мастер ═══════════════════════════════════════ */
.scan-input { height: 48px; font-family: var(--mono); font-size: 17px; padding: 0 14px; letter-spacing: .3px; width: 100%; }
.iw-num { height: 46px; font-size: 20px; font-weight: 700; text-align: center; font-family: var(--mono); }
.cand { display: flex; gap: 12px; align-items: center; border: 1px solid var(--slate-200);
  border-radius: var(--radius); padding: 10px 12px; margin-top: 8px; background: #fff; }
.cand .grow { flex: 1; min-width: 0; }
#iw-cands .cand { cursor: pointer; }
#iw-cands .cand:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.sg-option { display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--slate-200);
  border-radius: var(--radius); padding: 12px 14px; margin-top: 8px; cursor: pointer; background: #fff; }
.sg-option:hover { border-color: var(--primary); }
.sg-option.sel { border-color: var(--primary); background: var(--primary-light); }
.sg-option .lbl { font-size: 19px; font-weight: 700; min-width: 64px; font-family: var(--mono); }
.iw-ready { text-align: center; padding: 22px 10px; }
.iw-ready .big { font-size: 20px; font-weight: 700; margin-top: 10px; color: var(--slate-900); }
.iw-ready .empty-ic { margin: 0 auto; }
@media (max-width: 760px) {
  .iw-num { height: 52px; font-size: 24px; }
  .scan-input { height: 54px; font-size: 18px; }
  .sg-option { padding: 14px; }
}

/* ══ КИЗ (этап 4): дроп-зона, плашки свежести, бейджи вкладок ═══════ */
.dropzone {
  border: 2px dashed var(--slate-300); border-radius: var(--radius);
  padding: 26px 16px; text-align: center; font-size: 13px; color: var(--slate-500);
  background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--slate-400); }
.dropzone.drag { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.dropzone i { font-size: 22px; display: block; margin-bottom: 6px; color: var(--slate-400); }
.dropzone.drag i { color: var(--primary); }

.kiz-fresh { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kiz-fresh .fcard {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--slate-200); background: #fff; border-radius: 8px;
  padding: 7px 11px; font-size: 12.5px; cursor: pointer;
}
.kiz-fresh .fcard:hover { border-color: var(--slate-400); }
.kiz-fresh .fcard.warn { border-color: #fde68a; background: var(--warning-light); }

.tab .bdg { margin-left: 5px; }
.tab .bdg.badge { height: 17px; padding: 0 6px; font-size: 10.5px; }

@media (max-width: 900px) {
  #kz-ctl-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; white-space: nowrap; }
}

/* ═══ ФБС (этап 5) ═══ */
.fbs-sup .fbs-sup-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.fbs-sup-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.fbs-prog{margin:8px 0}
.fbs-prog .progress{margin-top:4px}
.fbs-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fbs-sup:hover{box-shadow:0 2px 10px rgba(15,23,42,.08)}

.fbs-plan{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.fbs-plan-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:#f8fafc}
.fbs-plan-row.return{border-left:4px solid #d97706;background:#fffbeb}
.fbs-plan-row.partial{border-left:4px solid #4f46e5}
.fbs-plan-row.full{border-left:4px solid #16a34a}
.fbs-plan-place{font-weight:600}
.fbs-plan-take b{font-size:18px;color:#4f46e5}
.fbs-box-scan,.fbs-scan2{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.fbs-scan2 .scan-input{font-size:16px}
.fbs-pack-prog{margin-bottom:10px}
.fbs-pick-foot{position:sticky;bottom:0;margin-top:16px;padding-top:10px}

.fbs-tl{display:flex;flex-direction:column;gap:0}
.fbs-tl-row{display:flex;gap:12px;padding:6px 0;position:relative}
.fbs-tl-row::before{content:"";position:absolute;left:5px;top:18px;bottom:-6px;width:2px;background:#e2e8f0}
.fbs-tl-row:last-child::before{display:none}
.fbs-tl-dot{width:12px;height:12px;border-radius:50%;background:#4f46e5;margin-top:4px;flex:none;z-index:1}
.fbs-tl-row.skipped .fbs-tl-dot{background:#cbd5e1}
.fbs-tl-body{display:flex;flex-direction:column}

@media(max-width:800px){
  .fbs-plan-row{grid-template-columns:1fr;gap:4px;font-size:16px}
  .fbs-plan-take b{font-size:22px}
  .fbs-sup-h{flex-direction:column}
  .fbs-sup-meta{align-items:flex-start}
}

/* ═══ Раздел ФБО (этап 6) ═══ */
.fbo-dots{display:inline-flex;gap:4px;align-items:center;margin-top:4px}
.fbo-dot{width:8px;height:8px;border-radius:50%;background:var(--slate-200);display:inline-block}
.fbo-dot.on{background:var(--primary)}
/* ── ФБО-помощник: таблица коэффициентов приёмки «куда и когда везти» ── */
.coef-tbl td, .coef-tbl th { text-align:center; font-variant-numeric:tabular-nums; }
.coef-tbl td.coef-wh, .coef-tbl th:first-child { text-align:left; white-space:nowrap; }
.coef-tbl td.coef-good   { background:var(--success-light); color:var(--success-dark); font-weight:600; }
.coef-tbl td.coef-paid   { background:var(--warning-light); color:var(--warning-dark); }
.coef-tbl td.coef-closed { background:var(--slate-100); color:var(--slate-400); }
.coef-tbl td.coef-empty  { color:var(--slate-300); }
.coef-tbl td.coef-best   { font-weight:700; }
/* ФИЧА 3 — табло складов ВБ с фильтрами: регион/срок приёмки + подсветка выгодной строки */
.coef-tbl td.coef-reg, .coef-tbl td.coef-acc { text-align:left; white-space:nowrap; color:var(--slate-600); }
.coef-tbl tr.coef-row-good td.coef-wh { box-shadow:inset 3px 0 0 var(--success); }
.coef-tbl tr.coef-row-good td.coef-wh b { color:var(--success-dark); }
.fbo-steps{margin:6px 0 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--slate-700)}
.fbo-steps li{line-height:1.4}
.fbo-timeline{display:flex;flex-direction:column;gap:2px}
.fbo-tl-step{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-left:2px solid var(--slate-100);padding-left:12px;margin-left:6px}
.fbo-tl-step.skipped{opacity:.6}
.fbo-tl-dot{color:var(--primary);font-size:15px;line-height:1.2}
.fbo-tl-step.skipped .fbo-tl-dot{color:var(--slate-400)}
.fbo-tl-body{display:flex;flex-direction:column;gap:1px}
.fbo-checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.fbo-checklist li{display:flex;align-items:center;gap:8px;font-size:13px}
.fbo-checklist li.ok{color:var(--slate-700)}
.fbo-checklist li.ok .bi{color:#16a34a}
.fbo-checklist li.no{color:var(--slate-500)}
.fbo-checklist li.no .bi{color:var(--slate-300)}
/* резерв ФБО на карте — фиолетовый */
#wm-svg .wm-mark.fbo-reserved rect{fill:#ede9fe;stroke:#7c3aed}

/* ═══════════════════ Этап 7: Возвраты (раздел #returns, #pvz) ═══════════════════
   Утилитарные классы поверх дизайн-системы (Inter, slate, индиго). Без эмодзи. */
.tiles-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin-bottom: 14px; }
.tiles-row .kpi { flex-direction: column; align-items: flex-start; }
.kpi-n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 22px;
  font-weight: 700; line-height: 1.15; color: var(--slate-900); }
.kpi-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--slate-500); margin-top: 3px; }
.kpi.kpi-warn { border-color: #f59e0b; background: #fffbeb; }
.kpi.kpi-warn .kpi-n { color: #b45309; }
.kpi.kpi-bad { border-color: #ef4444; background: #fef2f2; }
.kpi.kpi-bad .kpi-n { color: #b91c1c; }

/* плотная таблица (Ozon Seller density) */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th { height: 36px; padding: 6px 12px; text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--slate-500);
  border-bottom: 1px solid var(--slate-200); background: var(--slate-50); }
.tbl td { height: 40px; padding: 5px 12px; border-bottom: 1px solid var(--slate-100);
  vertical-align: middle; color: var(--slate-800); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: var(--slate-50); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.kv { padding: 4px 0; font-size: 13px; color: var(--slate-700); }
.kv b { color: var(--slate-900); font-weight: 600; margin-right: 4px; }

.checklist { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate-800);
  cursor: pointer; padding: 6px 8px; border: 1px solid var(--slate-200); border-radius: var(--radius);
  background: #fff; min-height: 40px; }
.chk input { width: 18px; height: 18px; }

.form-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.form-row > label { font-size: 12px; font-weight: 600; color: var(--slate-600); }

.btn-lg { font-size: 16px; padding: 14px 20px; min-height: 56px; width: 100%; justify-content: center; }
.drawer.wide { width: 560px; max-width: 100vw; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 40; }

/* ══ Этапы 8–9: Люди / Моя смена / Мотивация / Дашборд / Настройки ════ */
/* модалки с шапкой/телом/подвалом (карточка сотрудника, детализация) */
.modal:has(.modal-h) { width: 620px; }
.modal-h { display: flex; align-items: center; gap: 10px; margin: -20px -20px 14px; padding: 16px 20px;
  border-bottom: 1px solid var(--slate-200); }
.modal-h h2 { font-size: 16px; font-weight: 700; color: var(--slate-900); margin: 0; flex: 1; }
.modal-b { display: flex; flex-direction: column; gap: 4px; }
.modal-b label { display: flex; flex-direction: column; gap: 5px; font-size: 12px;
  font-weight: 600; color: var(--slate-600); }
.modal-f { display: flex; align-items: center; gap: 8px; margin: 16px -20px -20px; padding: 14px 20px;
  border-top: 1px solid var(--slate-200); }
.modal-f .spacer { flex: 1; }
.sect-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--slate-500); margin: 14px 0 8px; }

/* строка алертов на дашборде */
.alert-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.banner { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; border: 1px solid; }
.banner > span { flex: 1; }
.banner .btn { flex: none; }
.banner-danger { background: var(--danger-light); color: var(--danger-dark); border-color: #fecaca; }
.banner-warn { background: var(--warning-light); color: var(--warning-dark); border-color: #fde68a; }

/* «Моя смена»: на широких экранах ДВЕ колонки.
   ЛЕВО — заработок + KPI-ряд + рейтинг; ПРАВО — длинная «Лента операций»,
   она заполняет правую половину на всю высоту (раньше уходила вниз, а справа
   зияла пустота). На узких — схлопывается в одну колонку (см. медиа ниже). */
.myday { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px;
  align-items: start; max-width: 1320px; }
.myday-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.myday-col > .card,
.myday-col > .kpi-row { margin: 0; }   /* ритм задаёт gap контейнера, не margin */
/* «Лента операций» в правой колонке тянется на всю высоту левой */
.myday-col-side { position: sticky; top: 14px; }
@media (max-width: 1080px) {
  /* планшет/телефон: одна колонка, порядок осмыслен (заработок→KPI→рейтинг→лента) */
  .myday { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
  .myday-col { gap: 14px; }
  .myday-col-side { position: static; }
}

/* единица измерения рядом с крупным числом KPI (шт / шт/ч) */
.kpi-unit { font-family: var(--font); font-size: 12.5px; font-weight: 600;
  color: var(--slate-400); margin-left: 2px; }

/* «Моя смена»: блок заработка */
.earn-hero { padding: 14px 16px; background: var(--primary-light); border-radius: var(--radius); margin-bottom: 12px; }
.earn-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--primary-dark); }
.earn-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 800;
  color: var(--primary-dark); line-height: 1.1; margin: 2px 0 4px; }
.stat-line { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--slate-700); margin: 8px 0; }
.stat-line b { color: var(--slate-900); }
.row-void td { text-decoration: line-through; color: var(--slate-400); }
.row-void .badge { text-decoration: none; }
.fund-line { padding: 10px 14px; border-top: 1px solid var(--slate-200); font-size: 14px; color: var(--slate-700); text-align: right; }
.fund-line b { color: var(--slate-900); font-family: var(--mono); font-size: 16px; }
.toggle-row { flex-direction: row !important; align-items: center; gap: 8px; }
.toggle-row input { width: 18px; height: 18px; }

/* ярус не задан — подсветка, чтобы руководитель проставил (v10) */
.tier-row-unset { background: var(--warning-light); }
.tier-badge-unset { color: var(--warning-dark); background: var(--warning-light); width: auto; padding: 0 8px; gap: 4px; }
.tier-row-unset .tier-cell { border-color: var(--warning); border-style: dashed; }

/* ════════════════ ГЛАВНАЯ-ДАШБОРД (командный центр) ════════════════
   KPI-плитки с цветной полоской и иконкой, графики (инлайн-SVG), пончик зон,
   плотная таблица с фильтрами-чипсами, срочные задания. Стиль макета home_ab. */

/* KPI: цветная верхняя полоска + микро-иконка слева от подписи */
.kpi-card { display: flex; flex-direction: column; position: relative; overflow: hidden;
  text-decoration: none; color: inherit; padding: 15px 16px; }
.kpi-card .kpi-value { flex: 1 0 auto; }   /* подвал прижат к низу — карточки ровные */
.kpi-card:hover { text-decoration: none; color: inherit; border-color: var(--slate-300); }
.kpi-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent, var(--primary)); }
.kpi-top { display: flex; align-items: center; gap: 8px; color: var(--slate-500);
  font-size: 11.5px; font-weight: 600; margin-bottom: 9px; }
.kpi-mic { width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  color: var(--accent, var(--primary)); background: var(--accentbg, var(--primary-light)); }
.kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px;
  font-weight: 700; font-family: var(--mono); padding: 2px 7px; border-radius: 20px; }
.kpi-trend.t-up { color: var(--success-dark); background: var(--success-light); }
.kpi-trend.t-down { color: var(--danger-dark); background: var(--danger-light); }
.kpi-trend.t-flat { color: var(--slate-600); background: var(--slate-100); }
.kpi-spark { display: block; flex: none; align-self: flex-end; opacity: .9; }
/* подвал плитки: подпись слева, спарклайн прижат вправо. min-height держит
   одинаковую высоту карточек даже там, где спарклайна нет (нет «пустоты»). */
.kpi-foot { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px; margin-top: 10px; min-height: 22px; }
.kpi-foot .kpi-sub { margin-top: 0; }

/* ровный ряд из трёх KPI одинаковой ширины/высоты («Моя смена») */
.kpi-row-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-row-3 > .kpi { height: 100%; }
@media (max-width: 720px) { .kpi-row-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .kpi-row-3 { grid-template-columns: 1fr; } }

/* столбчатый график «Динамика отгрузок»: легенда + сами столбики */
.dash-legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 2px 4px 10px;
  font-size: 12px; color: var(--slate-600); }
.dl-item { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.dl-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.dash-bars-wrap { padding: 0 2px; }
.dash-bars { display: block; width: 100%; }

/* сетка графиков: динамика шире пончика */
.grid-dash { grid-template-columns: 1.55fr 1fr; }
@media (max-width: 900px) { .grid-dash { grid-template-columns: 1fr; } }

/* «Мотивация»: KPI-ряд во всю ширину сверху, ниже — ДВЕ колонки.
   ЛЕВО — графики (выработка + разбивка), ПРАВО — рейтинг + платёжная таблица.
   Раньше рейтинг и таблица уходили вниз, и под графиками была пустота справа. */
.metrics-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px;
  align-items: start; max-width: 1320px; }
.metrics-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.metrics-col > .card,
.metrics-col #metrics-body .card { margin: 0; }
.metrics-col #metrics-body:empty { display: none; }
/* внутри левой колонки графики идут вертикально друг под другом */
.metrics-two .grid-dash { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1080px) {
  .metrics-two { display: flex; flex-direction: column; gap: 16px; max-width: none; }
  .metrics-two .grid-dash { display: grid; grid-template-columns: 1.55fr 1fr; }
}
@media (max-width: 900px) {
  .metrics-two .grid-dash { grid-template-columns: 1fr; }
}

/* честное пустое состояние «график появится позже» */
.dash-soon { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 16px; min-height: 200px; color: var(--slate-500); }
.dash-soon-ic { width: 52px; height: 52px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px;
  background: var(--slate-100); color: var(--slate-400); }
.dash-soon-t { font-size: 14px; font-weight: 600; color: var(--slate-700); }
.dash-soon-d { font-size: 12.5px; color: var(--slate-400); max-width: 320px; margin-top: 4px; }

/* пончик загрузки зон + бары-легенда */
.zones { display: flex; align-items: center; gap: 20px; padding: 4px 4px 0; flex-wrap: wrap; }
.zone-donut { flex: none; }
.zone-legend { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 9px; }
.zl-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.zl-dot { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.zl-name { font-weight: 600; color: var(--slate-700); width: 118px; flex: none; }
.zl-bar { flex: 1; height: 7px; border-radius: 6px; background: var(--slate-100); overflow: hidden; margin: 0 4px; }
.zl-bar span { display: block; height: 100%; border-radius: 6px; }
.zl-pct { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--slate-700); width: 48px; text-align: right; flex: none; }

/* фильтры-чипсы над таблицей «Заказы и поставки» */
.dash-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--slate-200); background: var(--slate-50); }
.dash-filters .fgrp { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dash-filters .fl { font-size: 11px; color: var(--slate-500); font-weight: 700; margin-right: 1px; }
.dash-filters .chip { padding: 3px 10px; font-size: 11.5px; }
.dash-filters .fdiv { width: 1px; height: 18px; background: var(--slate-200); margin: 0 4px; }
.dash-tfoot { padding: 9px 16px; display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--slate-500); border-top: 1px solid var(--slate-200); }

/* колонки таблицы: артикул-моно, тип ФБС/ФБО, КИЗ-статус */
.art { font-family: var(--mono); font-size: 11.5px; color: var(--slate-500); }
.type { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 1px 7px; border-radius: 5px; }
.type.fbs { background: #ecfeff; color: var(--info-dark); border: 1px solid #a5f3fc; }
.type.fbo { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.kiz { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--slate-500); font-weight: 600; white-space: nowrap; }
.kiz i { font-size: 12px; }
.kiz.req { color: var(--warning-dark); }
.kiz.bad { color: var(--danger-dark); }
.kiz.ok { color: var(--success-dark); }

/* срочные задания: цветная приоритет-полоска + иконка-плашка */
.task { display: flex; align-items: center; gap: 13px; padding: 11px 16px; border-bottom: 1px solid var(--slate-100); }
.task:last-child { border-bottom: 0; }
.task .t-pri { width: 5px; align-self: stretch; border-radius: 4px; flex: none; }
.task .t-pri.p-hi { background: var(--danger); }
.task .t-pri.p-md { background: var(--warning); }
.task .t-pri.p-lo { background: var(--info); }
.task .t-ic { width: 36px; height: 36px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 16px; flex: none; }
.task .t-ic.ic-red { background: var(--danger-light); color: var(--danger-dark); }
.task .t-ic.ic-amber { background: var(--warning-light); color: var(--warning-dark); }
.task .t-ic.ic-blue { background: var(--info-light); color: var(--info-dark); }
.task .t-ic.ic-indigo { background: var(--primary-light); color: var(--primary-dark); }
.task .t-main { flex: 1; min-width: 0; }
.task .t-title { font-weight: 600; color: var(--slate-800); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task .t-meta { font-size: 11.5px; color: var(--slate-500); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task .t-go { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--slate-200);
  display: flex; align-items: center; justify-content: center; color: var(--slate-500); font-size: 14px; flex: none; cursor: pointer; }
.task { cursor: pointer; }
.task:hover { background: var(--slate-50); }

/* ══ Карточка товара — широкая страница (макет card_ab) ══════════════════ */
.pc-page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.crumb-mini { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--slate-500); min-width: 0; }
.crumb-mini i { font-size: 11px; color: var(--slate-300); }
.crumb-mini b { color: var(--slate-900); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pc-head { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin-bottom: 18px; align-items: start; }
.pc-photo { padding: 14px; }
.pc-photo-main { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius);
  background: linear-gradient(135deg, #eef2ff, #f8fafc); border: 1px solid var(--slate-200);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.pc-photo-main img { width: 100%; height: 100%; object-fit: cover; }
.pc-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #c7d2fe; font-size: 56px; }
.pc-photo-empty span { font-size: 12px; color: var(--slate-400); }
.pc-photo-tag { position: absolute; top: 12px; left: 12px; }
.pc-photo-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.pc-info { padding: 18px 22px; }
.pc-title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--slate-900); }
.pc-sub { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pc-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; margin-top: 18px; }
.pc-specs .spec { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-specs .spec .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); font-weight: 700; }
.pc-specs .spec .v { font-size: 13.5px; font-weight: 700; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; }
.pc-specs .spec .v.mono, .pc-specs .spec .v .mono { font-family: var(--mono); font-weight: 600; }
.pc-specs .spec .v.warn { color: var(--warning-dark); }
.pc-specs .spec .v a { color: var(--primary-dark); }

.pc-strip { display: flex; margin-top: 18px; border: 1px solid var(--slate-200); border-radius: var(--radius); overflow: hidden; }
.pc-strip .ss { flex: 1; padding: 12px 16px; border-right: 1px solid var(--slate-200); }
.pc-strip .ss:last-child { border-right: 0; }
.pc-strip .s-lbl { font-size: 11px; color: var(--slate-500); font-weight: 600; }
.pc-strip .s-val { font-size: 21px; font-weight: 700; margin-top: 3px; letter-spacing: -.02em; }
.pc-strip .s-val .s-u { font-size: 13px; color: var(--slate-400); font-weight: 600; }
.pc-strip .s-green { color: var(--success-dark); } .pc-strip .s-amber { color: var(--warning-dark); }
.pc-strip .s-indigo { color: var(--primary-dark); } .pc-strip .s-slate { color: var(--slate-700); }

.pc-tabcard { overflow: hidden; }
.pc-tabs { padding: 0 18px; margin-bottom: 0; }
.pc-tab { display: flex; align-items: center; gap: 7px; padding: 13px 16px; font-size: 13.5px; }
.pc-tab .cnt { font-family: var(--mono); font-size: 11px; background: var(--slate-100); color: var(--slate-600); padding: 0 7px; border-radius: 20px; font-weight: 700; }
.pc-tab.active .cnt { background: var(--primary-light); color: var(--primary-dark); }
.pc-tabbody { padding: 18px 22px; }

.sec-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-400);
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.sec-title i { color: var(--primary); }
.sec-title .spacer { flex: 1; }
.cols-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }

/* плотная таблица карточки */
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--slate-500); padding: 8px 14px; border-bottom: 1px solid var(--slate-200); background: var(--slate-50); white-space: nowrap; }
.tbl th.r { text-align: right; }
.tbl td { padding: 8px 14px; border-bottom: 1px solid var(--slate-100); color: var(--slate-700); vertical-align: middle; white-space: nowrap; }
.tbl tbody tr:nth-child(even) { background: var(--slate-50); }
.tbl tbody tr:hover { background: var(--primary-light); }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl td.r { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.tbl tfoot td { padding: 9px 14px; border-top: 2px solid var(--slate-200); font-weight: 700; background: var(--slate-50); color: var(--slate-800); }
.tbl tfoot td.r { text-align: right; font-family: var(--mono); }
.cell-code { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700; color: var(--slate-900); }
.cell-ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.cell-ic.ic-pal { background: var(--info-light); color: var(--info-dark); }
.cell-ic.ic-shelf { background: var(--primary-light); color: var(--primary-dark); }
.cell-ic.ic-buf { background: var(--warning-light); color: var(--warning-dark); }
.tier { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--slate-600); background: var(--slate-100);
  border: 1px solid var(--slate-200); padding: 1px 8px; border-radius: 6px; }
.zona { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--slate-600); }
.zona i { color: var(--slate-400); font-size: 13px; }
.delta.p { color: var(--success-dark); font-weight: 700; } .delta.m { color: var(--danger-dark); font-weight: 700; }
.op { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.op i { font-size: 13px; }
.op.in { color: var(--success-dark); } .op.out { color: var(--danger-dark); } .op.mv { color: var(--info-dark); } .op.rs { color: var(--warning-dark); }
.tbl .who { display: inline-flex; align-items: center; gap: 6px; }
.tbl .who .av { width: 20px; height: 20px; border-radius: 50%; background: var(--slate-200); color: var(--slate-600);
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex: none; }

/* пончик-сводка */
.donut-box { display: flex; align-items: center; gap: 18px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 18px; }
.pc-donut-empty { width: 132px; height: 132px; border-radius: 50%; border: 16px solid var(--slate-100); flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--slate-400); font-size: 24px; }
.pc-donut-empty span { font-size: 11px; margin-top: 4px; }
.donut-leg { flex: 1; display: flex; flex-direction: column; gap: 11px; }
.dl-row { display: flex; align-items: center; gap: 9px; }
.dl-row .dot { width: 11px; height: 11px; border-radius: 4px; }
.dl-row .nm { font-weight: 600; color: var(--slate-700); }
.dl-row .vl { margin-left: auto; font-family: var(--mono); font-weight: 700; }
.dl-row.tot { border-top: 1px solid var(--slate-200); padding-top: 11px; }
.mini-stats { display: flex; gap: 10px; margin-top: 14px; }
.mini-stat { flex: 1; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-sm); padding: 11px 13px; }
.mini-stat .l { font-size: 11px; color: var(--slate-500); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.mini-stat .n { font-family: var(--mono); font-size: 16px; font-weight: 700; margin-top: 5px; color: var(--slate-800); }

/* КИЗ блок */
.kiz-banner { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--warning-light); border: 1px solid #fde68a; margin-bottom: 16px; }
.kiz-banner.ok { background: var(--success-light); border-color: #a7f3d0; }
/* режим требования КИЗ: warn = «всегда» (амбер, как база); muted = «никогда» (серый) */
.kiz-banner.kiz-banner-warn { background: var(--warning-light); border-color: #fde68a; }
.kiz-banner.kiz-banner-muted { background: var(--slate-100, #f1f5f9); border-color: var(--slate-200, #e2e8f0); }
.kiz-banner .kb-ic { width: 42px; height: 42px; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--warning-dark); flex: none; }
.kiz-banner.ok .kb-ic { color: var(--success-dark); }
.kiz-banner.kiz-banner-muted .kb-ic { color: var(--slate-500, #64748b); }
.kiz-banner .kb-t { font-weight: 700; color: var(--slate-900); font-size: 14px; }
.kiz-banner .kb-s { font-size: 12px; color: var(--slate-600); margin-top: 2px; }
.kiz-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kc { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 14px 16px; }
.kc .kc-l { font-size: 11px; color: var(--slate-500); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kc .kc-v { font-family: var(--mono); font-size: 26px; font-weight: 700; margin-top: 7px; letter-spacing: -.02em; }

/* таймлайн событий */
.tl { position: relative; padding-left: 30px; }
.tl::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--slate-200); }
.tl-row { position: relative; padding: 0 0 18px; }
.tl-row:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -24px; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--slate-200); }
.tl-dot.d-in { background: var(--success); } .tl-dot.d-out { background: var(--primary); }
.tl-dot.d-mv { background: var(--info); } .tl-dot.d-rs { background: var(--warning); }
.tl-main { display: flex; align-items: flex-start; gap: 8px; }
.tl-t { font-weight: 600; color: var(--slate-800); font-size: 13px; }
.tl-m { font-size: 11.5px; color: var(--slate-500); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.tl-q { margin-left: auto; font-family: var(--mono); font-weight: 700; }
.tl-q.qty-pos { color: var(--success-dark); } .tl-q.qty-neg { color: var(--danger-dark); }
.tl-ts { font-size: 11px; color: var(--slate-400); margin-top: 3px; }

/* формы внутри вкладок */
.pc-form { max-width: 640px; }
.pc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.pc-form .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.pc-form .field label { font-size: 12px; color: var(--slate-600); font-weight: 600; }
.pc-form .check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate-700); margin: 6px 0 12px; }
.pc-form-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* фото-таб */
.pc-photo-tab { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
.pc-photo-big { aspect-ratio: 1/1; border-radius: var(--radius); background: linear-gradient(135deg, #eef2ff, #f8fafc);
  border: 1px solid var(--slate-200); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pc-photo-big img { width: 100%; height: 100%; object-fit: cover; }
.pc-photo-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

@media (max-width: 1000px) {
  .pc-head { grid-template-columns: 1fr; }
  .pc-specs { grid-template-columns: repeat(2, 1fr); }
  .pc-strip { flex-wrap: wrap; }
  .pc-strip .ss { flex: 1 0 45%; }
  .cols-2 { grid-template-columns: 1fr; }
  .kiz-cards { grid-template-columns: repeat(2, 1fr); }
  .pc-photo-tab { grid-template-columns: 1fr; }
}

/* ═══ Рабочее место комплектовщика (#my-tasks) ═══ */
.pwp-group { margin-bottom: 22px; }
.pwp-group-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pwp-group-h h2 { font-size: 16px; font-weight: 650; color: var(--slate-800); margin: 0; }
.pwp-group-ic {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--slate-100); color: var(--slate-500); font-size: 15px;
}
.pwp-group-ic.src-fbs { background: var(--danger-light); color: var(--danger-dark); }
.pwp-group-ic.src-fbo { background: var(--primary-light); color: var(--primary); }
.pwp-group-ic.src-inventory { background: var(--warning-light); color: var(--warning-dark); }
.pwp-group-h .spacer { flex: 1; }

.pwp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 768px) { .pwp-cards { grid-template-columns: 1fr; } }
.pwp-next .pwp-card { box-shadow: 0 0 0 2px var(--primary), var(--shadow-sm); }

.pwp-card {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 14px 16px; transition: box-shadow .15s;
}
/* карточки задания живут в сетке (узкие колонки) → кнопки уходят строкой вниз,
   во всю ширину, чтобы не наезжать на бейджи/заголовок */
.pwp-card-act { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; }
.pwp-card-act .btn { flex: 1 1 auto; justify-content: center; }
.pwp-card:hover { box-shadow: var(--shadow); }
.pwp-card.mine { border-color: var(--primary-light); background: #fbfbff; }
.pwp-card-ic {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--slate-100); color: var(--slate-500); font-size: 18px;
}
.pwp-card-main { flex: 1; min-width: 0; }
.pwp-card-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.pwp-card-title { font-size: 15px; font-weight: 600; color: var(--slate-900); }
.pwp-card-title code { font-size: 13px; background: var(--slate-100); padding: 1px 6px; border-radius: 5px; }
.pwp-card-meta {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px;
  font-size: 13px; color: var(--slate-600);
}
.pwp-card-meta i { color: var(--slate-400); margin-right: 3px; }
.pwp-card-note { margin-top: 6px; }
.pwp-card-act { display: flex; gap: 6px; margin-top: 4px; }

.pwp-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.pwp-big { font-size: 16px; font-weight: 600; color: var(--slate-900); margin-top: 2px; }
.pwp-big code { font-size: 15px; background: var(--slate-100); padding: 2px 8px; border-radius: 6px; }
.pwp-stepper { display: flex; gap: 18px; margin-bottom: 14px; }
.pwp-stepper .step { padding: 0; }

@media (max-width: 720px) {
  .pwp-card { flex-wrap: wrap; }
  .pwp-card-act { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; }
  .pwp-stepper { flex-wrap: wrap; gap: 10px; }
}

/* ══ ОБУЧЕНИЕ: кнопка «?», поповер, центр «Помощь» ════════════════════════ */
/* маленькая ненавязчивая кнопка-подсказка в шапке раздела */
.help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex: none;
  border: 1px solid var(--slate-200); border-radius: 50%;
  background: #fff; color: var(--slate-400); cursor: pointer;
  font-size: 15px; line-height: 1; vertical-align: middle;
  transition: color .12s, border-color .12s, background .12s;
}
.help-btn:hover { color: var(--primary); border-color: #c7d2fe; background: var(--primary-light); }
.help-btn i { font-size: 15px; }

/* бейдж роли (нейтральный) */
.help-role {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--slate-100); color: var(--slate-700);
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500;
}
.help-role i { font-size: 11px; color: var(--slate-400); }
.help-roles { display: flex; flex-wrap: wrap; gap: 6px; }

/* блок одного вопроса (Зачем / Кому / Что / Как связан) */
.help-q { margin: 0 0 14px; }
.help-q:last-child { margin-bottom: 0; }
.help-q-lbl {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--primary-dark);
}
.help-q-lbl i { font-size: 13px; }

/* нумерованные шаги «что делать» */
.help-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.help-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.help-step-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary-dark);
  font-size: 12px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; margin-top: 1px;
}

/* всплывающая подсказка раздела (по образцу modal) */
.help-pop { width: 560px; padding: 0; }
.help-pop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px; border-bottom: 1px solid var(--slate-100);
}
.help-pop-ic {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--primary-light); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.help-pop-title { font-weight: 700; font-size: 15.5px; flex: 1; }
.help-pop .help-q { padding: 0 18px; }
.help-pop .help-q:first-of-type { padding-top: 14px; }
.help-pop-foot {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 14px 18px; margin-top: 14px; border-top: 1px solid var(--slate-100);
}
.help-pop-foot .btn:last-child { margin-left: auto; }

/* центр «Помощь»: с чего начать */
.help-start { margin-bottom: 16px; }
.help-guide-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--slate-100);
}
.help-guide-head h2 { margin: 0; font-size: 16px; flex: 1; }
.help-guide-ic {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--primary-light); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.help-start-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px; margin-top: 12px;
}
.help-start-card {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 12px 14px; background: #fff; text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.help-start-card:hover {
  border-color: #c7d2fe; box-shadow: var(--shadow-sm);
  text-decoration: none; transform: translateY(-1px);
}
.help-start-ic {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  background: var(--primary-light); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.help-start-t { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.help-start-d { font-size: 12.5px; color: var(--slate-500); line-height: 1.45; }

/* мини-схема связей разделов (инлайн, без картинок) */
.help-flow-wrap { margin-top: 16px; }
.help-flow-cap {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; color: var(--slate-500);
}
.help-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.help-flow-node {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--slate-50); border: 1px solid var(--slate-200);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500;
}
.help-flow-node i { color: var(--primary); font-size: 14px; }
.help-flow-arrow { color: var(--slate-300); font-size: 16px; display: inline-flex; }

/* раскладка: оглавление слева + гайды справа */
.help-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.help-toc {
  position: sticky; top: calc(var(--banner-h) + var(--topbar-h) + 12px);
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 10px; display: flex; flex-direction: column; gap: 2px;
}
.help-toc-cap {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px 8px;
  font-size: 12px; font-weight: 600; color: var(--slate-500);
}
.help-toc-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px; font-size: 13px;
  color: var(--slate-700); text-decoration: none;
}
.help-toc-item i { color: var(--slate-400); font-size: 14px; flex: none; }
.help-toc-item:hover { background: var(--slate-50); text-decoration: none; }
.help-toc-item.active { background: var(--primary-light); color: var(--primary-dark); }
.help-toc-item.active i { color: var(--primary); }

.help-guides { display: flex; flex-direction: column; gap: 14px; }
.help-guide { scroll-margin-top: calc(var(--banner-h) + var(--topbar-h) + 12px); }

@media (max-width: 860px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-toc { position: static; }
  .help-pop { width: 100%; }
}

/* ═══════════════════════════ ТРЕНАЖЁР (#trainer) ═══════════════════════════ */
.tr-safe-banner { font-size: 13.5px; margin: 0 0 16px; padding: 12px 14px; }
.tr-safe-thin { margin: 0 0 14px; }
.tr-intro { margin-bottom: 16px; }
.tr-intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.tr-intro-ic {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary); font-size: 18px; margin-bottom: 8px;
}
.tr-intro-t { font-weight: 600; font-size: 14px; color: var(--slate-800); margin-bottom: 3px; }
.tr-intro-d { font-size: 12.5px; color: var(--slate-500); line-height: 1.45; }

.tr-scn-cap { font-weight: 600; font-size: 14px; color: var(--slate-700); margin: 4px 2px 12px; display: flex; align-items: center; gap: 7px; }
.tr-scn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tr-scn-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg); background: #fff; text-decoration: none; transition: all .15s; box-shadow: var(--shadow-sm);
}
.tr-scn-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; }
.tr-scn-ic {
  width: 52px; height: 52px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 24px;
}
.tr-scn-txt { min-width: 0; }
.tr-scn-t { font-weight: 600; font-size: 16px; color: var(--slate-900); margin-bottom: 4px; }
.tr-scn-d { font-size: 13px; color: var(--slate-500); line-height: 1.5; }
.tr-scn-go { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; }

.tr-prog { max-width: 680px; margin-bottom: 14px; }
.tr-prog-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--slate-700); margin-bottom: 6px; }
.tr-prog-head i { color: var(--warning); }

.tr-wb-card { max-width: 560px; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.tr-wb-head { background: var(--slate-900); color: #fff; padding: 11px 16px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tr-wb-head i { color: var(--info); }
.tr-wb-head .badge { margin-left: auto; }
.tr-wb-body { padding: 6px 16px; }
.tr-kv { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--slate-100); font-size: 13.5px; }
.tr-kv:last-child { border-bottom: none; }
.tr-kv > span { color: var(--slate-500); }
.tr-kv > b { color: var(--slate-900); text-align: right; }
.tr-wb-foot { padding: 9px 16px; background: var(--slate-50); font-size: 12px; color: var(--slate-500); display: flex; align-items: center; gap: 7px; }

.tr-do { max-width: 680px; background: var(--primary-light); border: 1px solid #c7d2fe; border-radius: var(--radius); padding: 13px 16px; margin-bottom: 14px; }
.tr-do-h { font-weight: 600; font-size: 14px; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.tr-do-d { font-size: 13.5px; color: var(--slate-700); line-height: 1.5; }

.tr-scan-wrap { max-width: 560px; margin-bottom: 12px; }
.tr-hint { margin-top: 8px; font-size: 12.5px; color: var(--slate-500); display: flex; align-items: center; gap: 7px; }
.tr-hint i { color: var(--warning); }
.tr-code { font-family: var(--mono); background: var(--warning-light); color: var(--warning-dark); padding: 2px 7px; border-radius: 6px; border: 1px dashed var(--warning); cursor: pointer; }

.tr-place-card { display: flex; gap: 14px; align-items: center; max-width: 560px; border: 1px solid var(--slate-200); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.tr-place-ic { width: 46px; height: 46px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--success-light); color: var(--success-dark); font-size: 22px; }
.tr-place-loc { font-weight: 700; font-size: 18px; color: var(--slate-900); font-family: var(--mono); }

.tr-qr-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.tr-qr { text-align: center; }
.tr-qr-box { width: 72px; height: 72px; border: 1px solid var(--slate-200); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 38px; color: var(--slate-800); background: #fff; }
.tr-qr-cap { font-size: 12px; color: var(--slate-500); margin-top: 5px; }

.tr-box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; max-width: 720px; margin-bottom: 12px; }
.tr-box-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--slate-200); border-radius: var(--radius); background: #fff; cursor: pointer; text-align: left; transition: all .15s; }
.tr-box-btn:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.tr-box-btn.on { border-color: var(--success); background: var(--success-light); }
.tr-box-ic { font-size: 24px; color: var(--slate-700); }
.tr-box-btn.on .tr-box-ic { color: var(--success-dark); }
.tr-box-cap { font-weight: 600; font-size: 14px; color: var(--slate-900); }
.tr-box-state { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--slate-400); display: inline-flex; align-items: center; gap: 6px; }
.tr-box-btn.on .tr-box-state { color: var(--success-dark); }

.tr-foot { max-width: 680px; margin-top: 18px; }
.tr-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tr-foot-right { display: flex; gap: 8px; align-items: center; }

.tr-done { max-width: 680px; }
.tr-recap { list-style: none; margin: 10px 0 0; padding: 0; }
.tr-recap li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--slate-100); font-size: 14px; color: var(--slate-800); }
.tr-recap li:last-child { border-bottom: none; }
.tr-recap-n { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--success-light); color: var(--success-dark); font-size: 13px; }
.tr-done-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ─── Мотивация: рейтинг (соревнование) + разбивка ─── */
.lb-podium-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lb-podium { position: relative; border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 14px 14px 12px; background: var(--surface); overflow: hidden; }
.lb-podium::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--slate-300); }
.lb-podium.medal-gold::before   { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.lb-podium.medal-silver::before { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.lb-podium.medal-bronze::before { background: linear-gradient(90deg, #b45309, #d97706); }
.lb-podium.is-self { border-color: #6366f1; box-shadow: 0 0 0 2px var(--primary-light); }
.lb-rank { position: absolute; top: 10px; right: 12px; font-family: var(--mono); font-size: 26px;
  font-weight: 800; line-height: 1; color: var(--slate-200); }
.lb-podium.medal-gold .lb-rank   { color: #f59e0b; }
.lb-podium.medal-silver .lb-rank { color: #94a3b8; }
.lb-podium.medal-bronze .lb-rank { color: #b45309; }
.lb-name { font-weight: 700; font-size: 14px; color: var(--slate-900); padding-right: 30px; }
.lb-big { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 800;
  color: var(--slate-900); margin-top: 6px; line-height: 1; }
.lb-big .lb-unit { font-size: 13px; font-weight: 600; color: var(--slate-400); margin-left: 4px; }
.lb-mini { font-size: 12px; color: var(--slate-500); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.lb-income { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--success-dark);
  background: var(--success-light); border-radius: 8px; padding: 4px 8px; display: inline-flex; gap: 5px; align-items: center; }
.dt-table tbody tr.row-self td { background: var(--primary-light); }

.mix-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.mix-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.lg-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate-700); }
.lg-dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.lg-name { flex: 1; }
.lg-val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--slate-900); font-weight: 600; }

/* ═══ Настройки → Роли (Волна 1: роли без программиста) ═══════════════════ */
.roles-list { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.role-card { border: 1px solid var(--slate-200); border-radius: 12px; padding: 14px 16px;
  background: var(--surface, #fff); }
.role-card.role-new { border-style: dashed; }
.role-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.role-name { font-weight: 700; font-size: 15px; border: 1px solid var(--slate-200); border-radius: 8px;
  padding: 5px 9px; min-width: 180px; }
.role-name:disabled { background: var(--slate-50, #f8fafc); color: var(--slate-700); border-color: transparent; }
.role-code { font-family: var(--mono); font-size: 12px; color: var(--slate-500);
  background: var(--slate-100, #f1f5f9); border-radius: 6px; padding: 2px 7px; }
.role-secs { display: flex; flex-wrap: wrap; gap: 8px; }
.role-sec { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--slate-700);
  border: 1px solid var(--slate-200); border-radius: 999px; padding: 4px 11px; cursor: pointer; user-select: none; }
.role-sec.on { background: var(--primary-light); border-color: var(--primary, #6366f1); color: var(--slate-900); }
.role-sec input { margin: 0; }
.role-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.role-active { font-size: 13px; color: var(--slate-600); display: inline-flex; align-items: center; gap: 6px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
.role-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--slate-500); }
.role-grid input { border: 1px solid var(--slate-200); border-radius: 8px; padding: 6px 9px; font-size: 14px; }

/* ─── Полная Академия (#help → academy.md) ─── */
.academy-toc-item{cursor:pointer}
.academy-body{max-width:none;font-size:.92rem}
.academy-body .academy-h1{font-size:1.2rem;margin:24px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--primary);color:var(--primary)}
.academy-body .academy-h2{font-size:1.05rem;margin:20px 0 8px;color:var(--slate-900);font-weight:700}
.academy-body .academy-h3{font-size:.96rem;margin:14px 0 6px;color:var(--primary-dark)}
.academy-body h4{font-size:.9rem;margin:10px 0 4px;color:var(--slate-700)}
.academy-body p{margin:6px 0;line-height:1.55;color:var(--slate-800)}
.academy-body ul,.academy-body ol{margin:6px 0 10px 22px;line-height:1.5;color:var(--slate-800)}
.academy-body li{margin:3px 0}
.academy-body blockquote{margin:8px 0;padding:8px 12px;border-left:3px solid var(--primary);background:var(--primary-light);border-radius:var(--radius-sm);color:var(--slate-700)}
.academy-body code{background:var(--slate-100);padding:1px 5px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.85em;color:var(--danger-dark)}
.academy-body hr{border:0;border-top:1px solid var(--slate-200);margin:16px 0}
.academy-tbl{border-collapse:collapse;width:100%;margin:10px 0;font-size:.86rem}
.academy-tbl th,.academy-tbl td{border:1px solid var(--slate-200);padding:6px 9px;text-align:left;vertical-align:top}
.academy-tbl th{background:var(--primary-light);font-weight:600;color:var(--slate-900)}
.academy-tbl tr:nth-child(even) td{background:var(--slate-50)}


/* ─── Цветные подсказки сканирования (пункт 5) ─── */
.scan-hint{
  display:flex;align-items:center;gap:11px;
  margin:8px 0;padding:10px 13px;
  border:1px solid var(--slate-200);border-left-width:5px;
  border-radius:var(--radius-sm, 10px);
  background:var(--slate-50);
}
.scan-hint-ic{
  flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;border-radius:9px;font-size:21px;color:#fff;
}
.scan-hint-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.scan-hint-txt b{font-size:14.5px;color:var(--slate-900)}
.scan-hint-sub{font-size:12px;color:var(--slate-500)}
/* компактный значок «вид объекта» (для строк таблиц/шагов) */
.scan-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
  border:1px solid currentColor;background:#fff;
}
.scan-chip .bi{font-size:13px}
/* ── цветовая кодировка по виду объекта ── */
.scan-hint.sk-box{border-left-color:var(--warning)}
.scan-hint.sk-box .scan-hint-ic{background:var(--warning)}
.scan-chip.sk-box{color:var(--warning-dark)}
.scan-hint.sk-product{border-left-color:#2563eb}
.scan-hint.sk-product .scan-hint-ic{background:#2563eb}
.scan-chip.sk-product{color:#1d4ed8}
.scan-hint.sk-kiz{border-left-color:var(--primary)}
.scan-hint.sk-kiz .scan-hint-ic{background:var(--primary)}
.scan-chip.sk-kiz{color:var(--primary-dark)}
.scan-hint.sk-order{border-left-color:#7c3aed}
.scan-hint.sk-order .scan-hint-ic{background:#7c3aed}
.scan-chip.sk-order{color:#6d28d9}
.scan-hint.sk-courier{border-left-color:var(--success)}
.scan-hint.sk-courier .scan-hint-ic{background:var(--success)}
.scan-chip.sk-courier{color:var(--success-dark)}
.scan-hint.sk-place{border-left-color:var(--info)}
.scan-hint.sk-place .scan-hint-ic{background:var(--info)}
.scan-chip.sk-place{color:var(--info-dark)}
@media (max-width:640px){
  .scan-hint-ic{width:34px;height:34px;font-size:19px}
  .scan-hint-txt b{font-size:14px}
}

/* === Поставщики/UID (пункт 6): строка добавления + снятая строка === */
.inline-add{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.pc-tbl tr.row-off td{opacity:.55}
.pc-tbl tr.row-off .mono{text-decoration:line-through;text-decoration-color:var(--slate-300)}

/* Антон 21.07: длинный бейдж (транзит «А → Б») переносится, не вылезает за карточку */
.pwp-card .badge { max-width: 100%; white-space: normal; height: auto;
  min-height: 20px; line-height: 1.35; padding: 3px 8px; text-align: left; }

/* === Остатки → Распределение (себес по складам ВБ и округам) === */
.sd-table tr.sd-dist td { background: var(--slate-50); border-top: 2px solid var(--slate-200); }
.sd-table tr.sd-wh td { color: var(--slate-600); }
.sd-table td.sd-wh-name { padding-left: 26px; position: relative; }
.sd-table td.sd-wh-name::before { content: ""; position: absolute; left: 12px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px; border-left: 1.5px solid var(--slate-300);
  border-bottom: 1.5px solid var(--slate-300); border-radius: 0 0 0 3px; }
.sd-bar { height: 8px; border-radius: 4px; background: var(--slate-100); overflow: hidden;
  min-width: 90px; display: flex; }
.sd-bar i { display: block; height: 100%; background: var(--primary); }
.sd-bar i.inb { background: #c7d2fe; }   /* светло-фиолетовый = в пути (едет) */
.sd-bar.sd-bar-sub { height: 6px; }
.sd-bar.sd-bar-sub i { background: var(--primary); opacity: .55; }
.sd-bar.sd-bar-sub i.inb { background: #c7d2fe; opacity: 1; }
.kpi-ic.danger { background: var(--danger-light, #fee2e2); color: var(--danger, #ef4444); }

/* Потери (сгоревшие склады): чекбоксы + красная секция */
.sd-chk-cell { width: 34px; text-align: center; }
.sd-chk-cell input.sd-chk { width: 15px; height: 15px; accent-color: var(--danger, #ef4444); cursor: pointer; }
.sd-table tr.sd-lost-head td { background: #fef2f2; border-top: 2px solid #fecaca; color: #991b1b; }
.sd-table tr.sd-lost-head td .bi-fire { color: var(--danger, #ef4444); }
.sd-table tr.sd-lost-row td { color: var(--slate-500); background: #fffafa; }
.sd-table tr.sd-lost-row td.sd-wh-name { text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, .45); }
.sd-table tr.sd-lost-row td.sd-wh-name .muted,
.sd-table tr.sd-lost-row td.sd-wh-name .badge { text-decoration: none; }
.sd-bar.sd-bar-lost { height: 6px; }
.sd-bar.sd-bar-lost i { background: var(--danger, #ef4444); opacity: .55; }

/* «Едет на склад» (ФБО в пути до конечного склада) — голубая приписка */
.sd-inb { color: var(--info-dark, #0e7490); }
.sd-table .sd-inb.small { font-size: 11px; font-weight: 500; }
.sd-table tr.sd-wh-inb-only td { color: var(--slate-400); }
.sd-lost-txt { color: #991b1b; }
.sd-lost-txt .bi-fire { color: var(--danger, #ef4444); }

/* Карта России по округам (инлайн-SVG, low-poly) */
.sd-map-wrap svg { width: 100%; height: auto; max-height: 430px; display: block; }
.sd-map-geo { stroke: #fff; stroke-width: 2; stroke-linejoin: round; cursor: pointer;
  transition: filter .12s; }
.sd-map-geo:hover { filter: brightness(.93); }
.sd-map-geo.sd-map-zero { stroke: var(--slate-200); stroke-dasharray: 4 3; }
.sd-map-geo.sd-map-sel { stroke: var(--slate-900); stroke-width: 2.5; }
.sd-map-info { margin-top: 10px; }
.sd-map-info .sd-inb b, .sd-map-info .sd-lost-txt b { font-family: var(--mono, 'JetBrains Mono', monospace); }
.sd-map-lbl { pointer-events: none; font-family: inherit; }
.sd-map-foot { display: flex; gap: 14px; align-items: center; margin-top: 10px;
  color: var(--slate-500); font-size: 12px; flex-wrap: wrap; }
.sd-map-leg { display: inline-flex; align-items: center; gap: 4px; }
.sd-map-leg i { display: inline-block; width: 24px; height: 10px; border-radius: 3px; }