/* ============================================================
   TOSSEN UI — фирменный стиль сервиса по брендбуку
   (1. design / tossen_brandbook.md + tossen-master-template v1.9)

   Принципы: монохром графит/сталь/светло-серый/белый;
   оранжевый #fe8e2e — только микродозы (точка на главной кнопке,
   риска, индикатор) — правило 5%, не более одного акцента в кадре;
   моноширинные подписи-«эйбрау» капсом; хайрлайны вместо тяжёлых
   рамок; радиусы 10/12px; базовый модуль 8px.
   Подключается ПОСЛЕ bootstrap.min.css и переопределяет его.
   ============================================================ */

/* --- Шрифты: Geist / Geist Mono (SIL OFL 1.1, self-hosted) --- */
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* --- Палитра: комфорт чтения по исследованиям (WCAG-AA) ---
   База — тёплый «slate» (Tailwind): не чистый чёрный на чистом белом
   (он даёт «ореол» и утомляет глаз), а мягкий сине-графит на off-white.
   Цвет несёт смысл (Тафти): синий — действие/ссылка, зелёный — хорошо,
   красный — риск, янтарный — внимание; остальное нейтральное. --- */
:root {
  --canvas: #ffffff;
  --surface: #f1f5f9;        /* slate-100 — мягкий фон без бликов */
  --surface-warm: #f8fafc;   /* slate-50 — зебра/ховер */
  --hairline: #cbd5e1;       /* slate-300 */
  --divider: #e2e8f0;        /* slate-200 */
  --ink: #0f172a;            /* slate-900 — заголовки/сильный текст, мягче чёрного */
  --text-2: #334155;         /* slate-700 — основной текст и цифры таблиц (контраст ~9.7:1) */
  --muted: #64748b;          /* slate-500 — подписи */
  --meta: #7c8696;           /* мелкие метки/даты — темнее slate-400 ради читаемости 10px */
  --steel: #64748b;
  --steel-soft: #eef2f7;
  --dark: #1e293b;           /* slate-800 — навигация: мягкий тёмный, не «провал» */
  /* основной акцент действий и ссылок — синий (самый изученный, читаемый) */
  --primary: #2563eb;        /* blue-600 */
  --primary-hover: #1d4ed8;  /* blue-700 */
  --primary-soft: #eff6ff;   /* blue-50 */
  --signal: #f97316;         /* orange-500 — выделение/тендер/активная вкладка */
  --on-signal: #ffffff;
  --accent-hover: #1d4ed8;
  /* системные состояния — насыщенные, но комфортные (Tailwind, WCAG-AA) */
  --ok: #15803d;             /* green-700 — текст «хорошо» */
  --ok-strong: #16a34a;      /* green-600 — заливки/кнопки */
  --ok-soft: #dcfce7;        /* green-100 — мягкая подсветка */
  --warn: #b45309;           /* amber-700 — текст «внимание» */
  --warn-strong: #d97706;    /* amber-600 */
  --warn-soft: #fef3c7;      /* amber-100 */
  --danger: #dc2626;         /* red-600 — текст «риск» */
  --danger-strong: #b91c1c;  /* red-700 */
  --danger-soft: #fee2e2;    /* red-100 */
  --info: #0e7490;           /* cyan-700 — нейтральная инфо-метка */
  --info-soft: #cffafe;      /* cyan-100 */
  /* 5-уровневая тепловая шкала зелёный→красный (мягкая, текст остаётся тёмным):
     5 — лидеры, 1 — аутсайдеры. Промежуточные тона между ok/warn/danger-soft. */
  --heat5: #dcfce7;          /* green-100 — лучшие */
  --heat4: #ecfccb;          /* lime-100 */
  --heat3: #fef3c7;          /* amber-100 — середина */
  --heat2: #ffe4d3;          /* orange-100 */
  --heat1: #fee2e2;          /* red-100 — худшие */
  --display: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --r: 12px;
  --r-sm: 10px;
  --ease: .18s ease;
}

/* --- База --- */
body {
  font-family: var(--display);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface) !important; /* перекрывает .bg-light */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cursor-pointer { cursor: pointer; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  letter-spacing: -.015em;
  font-weight: 700;
  color: var(--ink);
}
h4, .h4 { font-size: 21px; }
.text-muted { color: var(--muted) !important; }

/* Ссылки: синие (узнаваемо как «можно нажать»), мягкое подчёркивание */
a { color: var(--primary); text-decoration-color: rgba(37, 99, 235, .35); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--ease), text-decoration-color var(--ease); }
a:hover { color: var(--primary-hover); text-decoration-color: var(--primary-hover); }
.nav-link, .navbar-brand, .btn, .badge a { text-decoration: none; }

/* --- Навигация: тёмный графит с лёгким радиальным светом сигнатуры --- */
.navbar.bg-dark {
  background: var(--dark) !important;
  background-image: radial-gradient(120% 240% at 88% -40%, rgba(37, 99, 235, .22), transparent 55%) !important;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
.navbar-brand {
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 15px;
  color: #f5f5f7 !important;
}
.navbar-brand::after {
  content: "PROFIT";
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .24em;
  color: var(--steel);
  margin-left: 10px;
  vertical-align: 2px;
}
.navbar-dark .navbar-nav .nav-link {
  color: #c9cccf;
  font-size: 13.5px;
  font-weight: 500;
  padding-left: .65rem;
  padding-right: .65rem;
  transition: color var(--ease);
}
.navbar-dark .navbar-nav .nav-link:hover { color: #ffffff; }
.navbar-dark .navbar-nav .nav-link.active {
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--signal); /* единственный оранжевый штрих шапки */
}
.navbar .navbar-text { color: var(--steel); font-family: var(--mono); font-size: 12px; }
.navbar .btn-outline-light { border-color: rgba(255,255,255,.35); }

/* --- Карточки: белая поверхность, мягкая рамка, радиус 12 --- */
.card {
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);
}
.card-header {
  background: var(--canvas);
  border-bottom: 1px solid var(--divider);
  border-radius: var(--r) var(--r) 0 0 !important;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 11px 16px 9px;
}
.card .table { margin-bottom: 0; }

/* --- Кнопки: высота по сетке, радиус 10, графит --- */
.btn { border-radius: var(--r-sm); font-weight: 600; transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease); }
.btn:active { transform: scale(.985); }
.btn-sm { border-radius: 8px; }

/* Основное действие — синий (заметный сам по себе, читаемый, узнаваемый) */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-primary:active { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }

/* «Экспорт» / положительные действия — зелёный; предупреждающие — янтарный */
.btn-success { background: var(--ok-strong); border-color: var(--ok-strong); color: #fff; }
.btn-success:hover, .btn-success:focus { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-warning { background: var(--warn-strong); border-color: var(--warn-strong); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: var(--warn); border-color: var(--warn); color: #fff; }

/* Контурная основная — синяя обводка (например, «Сохранить» в строке) */
.btn-outline-primary { color: var(--primary); border-color: var(--primary); background: var(--canvas); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Прочие контурные — нейтральные, hover заливкой графитом */
.btn-outline-secondary, .btn-outline-success {
  color: var(--text-2);
  border-color: var(--hairline);
  background: var(--canvas);
}
.btn-outline-secondary:hover, .btn-outline-success:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.btn-outline-danger { color: var(--danger); border-color: var(--danger); background: var(--canvas); }
.btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-outline-light { color: #e8e8ed; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: none; }

/* --- Формы: контурные поля, рамка 1.5px, фокус — графит без свечения --- */
.form-control, .form-select {
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 14px;
  background-color: var(--canvas);
  transition: border-color var(--ease);
}
.form-control-sm, .form-select-sm { border-radius: 8px; }
.form-control:focus, .form-select:focus {
  border-color: var(--ink);
  box-shadow: none;
}
.form-control::placeholder { color: var(--meta); opacity: 1; }
.form-label, label.form-label { color: var(--text-2); }
.form-label.small, label .small { color: var(--muted); }
.form-check-input { border-color: var(--hairline); }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-check-input:focus { border-color: var(--ink); box-shadow: none; }

/* --- Таблицы: моно-шапка капсом, хайрлайны, табличные цифры --- */
.table { color: var(--ink); font-variant-numeric: tabular-nums; --bs-table-hover-bg: var(--surface-warm); }
.table > :not(caption) > * > * { border-bottom-color: var(--divider); }
.table thead th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  vertical-align: bottom;
}
.table thead th a { text-decoration: none; color: var(--muted); }
.table thead th a:hover { color: var(--ink); }
.table tbody td, .table tbody th { color: var(--text-2); }
.table tbody td a { font-weight: 600; }
.table tfoot td, .table tfoot th { color: var(--ink); }
/* шапка больших таблиц едет вместе с прокруткой страницы */
.table thead.sticky-top th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--canvas);
  box-shadow: inset 0 -1px 0 var(--hairline);
}
/* секции-заголовки внутри таблиц (группы, «Архив») */
.table .table-secondary > * { background: var(--steel-soft); color: var(--ink); }
/* контекстные подсветки строк/ячеек — приглушённые брендовые тинты вместо
   ярких бутстраповских пастелей (склад, сверки, тендеры, платежи) */
.table-danger,  tr.table-danger  > * { --bs-table-bg: var(--danger-soft); color: var(--ink); }
.table-warning, tr.table-warning > * { --bs-table-bg: var(--warn-soft); color: var(--ink); }
.table-success, tr.table-success > * { --bs-table-bg: var(--ok-soft); color: var(--ink); }

/* --- Бейджи: спокойные системные цвета, «маркировка на приборе» --- */
.badge { border-radius: 6px; font-weight: 600; letter-spacing: .01em; }
.badge.text-bg-danger, .badge.bg-danger { background: var(--danger) !important; color: #fff !important; }
.badge.text-bg-warning, .badge.bg-warning { background: var(--warn-soft) !important; color: var(--warn) !important; }
.badge.text-bg-success, .badge.bg-success { background: var(--ok-soft) !important; color: var(--ok) !important; }
.badge.bg-success-subtle { background: var(--ok-soft) !important; }
.badge.text-success-emphasis { color: var(--ok) !important; }
.badge.text-bg-info, .badge.bg-info { background: var(--info-soft) !important; color: var(--info) !important; }
.badge.text-bg-secondary, .badge.bg-secondary { background: var(--steel-soft) !important; color: var(--text-2) !important; }
.badge.text-bg-light, .badge.bg-light { background: var(--surface) !important; color: var(--muted) !important; border: 1px solid var(--divider); }
.badge.text-bg-dark, .badge.bg-dark { background: var(--dark) !important; color: #f1f5f9 !important; }
.badge.bg-primary { background: var(--primary) !important; color: #fff !important; }
.badge.text-bg-primary { background: var(--primary) !important; color: #fff !important; }

/* Цветные шапки-плашки статуса (расхождения, «месяц уже загружен») —
   тише: белый фон + тонкая акцентная линия слева, как у алертов */
.card-header.text-bg-danger,
.card-header.text-bg-warning {
  background: var(--canvas) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--divider);
  box-shadow: inset 3px 0 0 var(--danger);
}
.card-header.text-bg-warning { box-shadow: inset 3px 0 0 var(--warn); }

/* --- Списки-группы под язык карточек (хайрлайны, радиус 12) --- */
.list-group { border-radius: var(--r); overflow: hidden; }
.list-group-item { border-color: var(--divider); background: var(--canvas); color: var(--ink); padding: 12px 16px; }
.list-group-item-action:hover { background: var(--surface-warm); }
.list-group-item.is-static { cursor: default; }

/* --- Матрица ABC×XYZ: хайрлайн-сетка вместо тяжёлых рамок --- */
.matrix-grid > :not(caption) > * > * { border: 1px solid var(--divider); }
/* тепловая насыщенность матрицы: полоска «доля капитала» в каждой ячейке */
.matrix-cap {
  height: 6px;
  margin-top: 8px;
  background: rgba(15, 23, 42, .08);
  border-radius: 3px;
  overflow: hidden;
}
.matrix-cap-fill {
  display: block;
  height: 100%;
  background: var(--ink);
  opacity: .72;
  border-radius: 3px;
}
.matrix-cap-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 2px;
}

/* моно-капс «эйбрау» подпись (вход, шапки разделов) */
.page-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--meta);
}

/* --- Алерты: белая карточка с графитовой линией слева (ts-service) --- */
.alert {
  background: var(--canvas);
  border: 1px solid var(--divider);
  border-left: 2px solid var(--ink);
  border-radius: var(--r);
  color: var(--text-2);
}
.alert-success { border-left-color: var(--ok); }
.alert-danger { border-left-color: var(--danger); }
.alert-warning { border-left-color: var(--warn-strong); }
.alert-info { border-left-color: var(--primary); }

/* --- Текстовые утилиты: насыщенные, но комфортные семантические цвета --- */
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--warn) !important; }
.text-primary { color: var(--primary) !important; }
.text-info { color: var(--info) !important; }

/* --- Детали интерфейса --- */
details > summary { color: var(--text-2); }
details > summary:hover { color: var(--ink); }
/* раскрывашки справки */
details.card > summary.card-header { display: block; list-style: none; }
details.card > summary.card-header::-webkit-details-marker { display: none; }
details.card > summary.card-header::after {
  content: ""; float: right; width: 8px; height: 8px; margin-top: 3px;
  border-right: 1.5px solid var(--steel); border-bottom: 1.5px solid var(--steel);
  transform: rotate(45deg); transition: transform var(--ease), border-color var(--ease);
}
details.card[open] > summary.card-header::after { transform: rotate(225deg); border-color: var(--signal); }
details.card > summary.card-header { color: var(--ink); font-family: var(--display); font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; text-transform: none; padding: 12px 16px; }

/* --- Плотные таблицы данных: спокойный ритм, читаемые цифры --- */
.table tbody td { font-size: 13.5px; line-height: 1.45; }
.table-sm > :not(caption) > * > * { padding: .52rem .6rem; }
.table .small, .table small { font-size: 11.5px; }
.table tbody td a { text-decoration: none; }
.table tbody td a:hover { text-decoration: underline; text-decoration-color: var(--primary-hover); }
/* мелкая моноширинная подпись под числом: даты заказов/приходов, «макс N» */
.date-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--meta);
  letter-spacing: .03em;
  white-space: nowrap;
  margin-top: 1px;
}
/* Номер поставки перед ~датой прихода в пути — выделяем цветом действия */
.date-sub .supply-no { color: var(--primary); font-weight: 600; }

/* --- KPI-блоки в шапках экранов: моно-подпись + крупное число --- */
.kpi { min-width: 0; }
.kpi-label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 2px;
  white-space: nowrap;
}
.kpi-value {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.kpi-unit { font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* --- Категория-светофор: точка вместо залитого бейджа (тише для глаз) --- */
.cat-dot { font-size: 12.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.cat-dot::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--steel);
  margin-right: 6px;
  vertical-align: 1px;
}
.cat-dot.cat-danger { color: var(--danger); font-weight: 600; }
.cat-dot.cat-danger::before { background: var(--danger); }
.cat-dot.cat-warning { color: var(--warn); font-weight: 600; }
.cat-dot.cat-warning::before { background: var(--warn-strong); }
.cat-dot.cat-success { color: var(--ok); }
.cat-dot.cat-success::before { background: var(--ok-strong); }
.cat-dot.cat-info { color: var(--primary); }
.cat-dot.cat-info::before { background: var(--primary); }
.cat-dot.cat-light { color: var(--muted); }
.cat-dot.cat-light::before { background: var(--hairline); }
.cat-dot.cat-secondary::before { background: var(--steel); }
.cat-dot.cat-dark::before { background: var(--ink); }

/* --- Значения по центру колонок (поставка и товары, просьба заказчика).
   !important — потому что у ячеек висят utility-классы Bootstrap
   (.text-end и т.п.), а они объявлены с !important --- */
#supply-table thead th, #supply-table tbody td,
#products-table thead th, #products-table tbody td { text-align: center !important; }
/* текстовые колонки читаются слева: модель/наименование, обоснование,
   заголовки групп товаров (специфичнее центра, тоже !important) */
#supply-table .col-text, #supply-table .col-explain,
#supply-table thead th[data-col="model"], #supply-table thead th[data-col="explain"],
#products-table .col-text,
#products-table thead th[data-col="name"],
#products-table tbody tr.table-secondary td { text-align: left !important; }

/* --- Экран «Следующая поставка»: широкая таблица --- */
#supply-table th, #supply-table td { white-space: nowrap; }
#supply-table .col-explain { white-space: normal; }
#supply-table { --bs-table-hover-bg: var(--steel-soft); }
#supply-table > tbody > tr:nth-child(even) { background: var(--surface-warm); }
/* блок волн — главное действие: отбит хайрлайнами, число волны 1 крупнее */
#supply-table .col-wave1 { border-left: 1px solid var(--hairline); }
#supply-table .col-wave-end { border-right: 1px solid var(--hairline); }
#supply-table td.col-wave1 strong { font-size: 14.5px; }
#supply-table td.col-wave strong { font-size: 13.5px; }
#supply-table .badge { font-size: 10px; padding: .26em .55em; border-radius: 999px; vertical-align: 1px; }
#supply-table .btn-sm { padding: .18rem .55rem; font-size: 12px; }
#supply-table thead.sticky-top th {
  box-shadow: inset 0 -1px 0 var(--hairline), 0 8px 14px -12px rgba(29, 29, 31, .28);
}

/* --- Тепловая карта поставки: покрытие (мало→красный, много→зелёный),
   риск/разрыв (красный при наличии), категория (блок по светофору).
   Мягкие тинты, перебивают зебру — поэтому !important --- */
#supply-table td.heat-crit { background: var(--danger-soft) !important; }
#supply-table td.heat-warn { background: var(--warn-soft) !important; }
#supply-table td.heat-ok   { background: var(--ok-soft) !important; }
#supply-table td.heat-crit { font-weight: 600; }
#supply-table td.heat-cat-danger  { background: var(--danger-soft) !important; }
#supply-table td.heat-cat-warning { background: var(--warn-soft) !important; }
#supply-table td.heat-cat-info    { background: var(--info-soft) !important; }
#supply-table td.heat-cat-success { background: var(--ok-soft) !important; }

/* --- Замороженный столбец «Артикул»: виден при горизонтальной прокрутке.
   Зебра у строк (tr), поэтому липкой ячейке нужен свой фон, иначе сквозь неё
   просвечивает прокручиваемое содержимое. --- */
#supply-table td.col-frozen {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--canvas);
  box-shadow: 1px 0 0 var(--divider);
}
#supply-table > tbody > tr:nth-child(even) td.col-frozen { background: var(--surface-warm); }
#supply-table > tbody > tr:hover td.col-frozen { background: var(--steel-soft); }
#supply-table thead.sticky-top th.col-frozen {
  position: sticky;
  left: 0;
  z-index: 1030;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--divider), inset 0 -1px 0 var(--hairline);
}

/* --- Массовые действия: колонка выделения + панель --- */
#supply-table .select-col { width: 1%; }
.bulk-bar { background: var(--surface-warm); border-radius: var(--r) var(--r) 0 0; }
.bulk-bar .btn { font-weight: 600; }

/* --- Панель «⚙ Столбцы»: ровная сетка вместо рваного переноса, чтобы
   столбец легко найти. Порядок чекбоксов = порядок столбцов в таблице. --- */
#columns-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 1px 16px;
  margin-top: 4px;
}
#columns-checkboxes .form-check {
  margin: 0;
  padding-left: 1.6em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#columns-checkboxes .form-check-label { cursor: pointer; }

/* --- Дата-бары в ячейках: тонкая полоска снизу = доля от максимума колонки.
   Сканировать значения глазами, не читая цифры. --- */
.databar { position: relative; }
.databar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--bar, 0%);
  background: var(--steel);
  opacity: .55;
  pointer-events: none;
}
.databar-money::after { background: var(--primary); }
.databar-stock::after { background: var(--steel); }
.databar-cover::after { background: var(--ok-strong); }

/* --- Тепловая заливка ключевых столбцов (Балл денег, Маржа %, Рентабельность):
   зелёным (лидеры) → красным (аутсайдеры). !important перебивает зебру. --- */
#supply-table td.heatscale-5 { background: var(--heat5) !important; }
#supply-table td.heatscale-4 { background: var(--heat4) !important; }
#supply-table td.heatscale-3 { background: var(--heat3) !important; }
#supply-table td.heatscale-2 { background: var(--heat2) !important; }
#supply-table td.heatscale-1 { background: var(--heat1) !important; }

/* --- Замороженная «Модель» (примыкает к «Артикулу» слева) и рабочая пара
   «Правка»/«В корзину» (примыкают к правому краю). Смещения left/right ставит
   supply-freeze.js; здесь — липкость, фон (перебить зебру) и тень. --- */
#supply-table td.col-frozen-m,
#supply-table td.col-frozen-r {
  position: sticky;
  z-index: 3;
  background: var(--canvas);
}
#supply-table td.col-frozen-m { box-shadow: 1px 0 0 var(--divider); }
#supply-table td.col-frozen-r { box-shadow: -1px 0 0 var(--divider); }
#supply-table > tbody > tr:nth-child(even) td.col-frozen-m,
#supply-table > tbody > tr:nth-child(even) td.col-frozen-r { background: var(--surface-warm); }
#supply-table > tbody > tr:hover td.col-frozen-m,
#supply-table > tbody > tr:hover td.col-frozen-r { background: var(--steel-soft); }
#supply-table thead.sticky-top th.col-frozen-m,
#supply-table thead.sticky-top th.col-frozen-r {
  position: sticky;
  z-index: 1030;
  background: var(--surface);
}
#supply-table thead.sticky-top th.col-frozen-m { box-shadow: 1px 0 0 var(--divider), inset 0 -1px 0 var(--hairline); }
#supply-table thead.sticky-top th.col-frozen-r { box-shadow: -1px 0 0 var(--divider), inset 0 -1px 0 var(--hairline); }

/* --- Колонка иконок-сигналов: компактно --- */
.signals-cell { font-size: 13px; line-height: 1; }
.signals-cell .sig { margin-right: 1px; cursor: help; }

/* --- Поповер по наведению на «Волну 1»: расшифровка числа --- */
#supply-table td.has-wave-pop { cursor: help; }
.wave-pop { white-space: pre-line; max-width: 380px; }

/* --- Аккордеон-секции по срочности: шапка-полоса с подытогами --- */
.urg-head-row td {
  padding: 7px 12px !important;
  border-bottom: 1px solid var(--divider);
  background: var(--surface-warm);
}
.urg-head-row.urg-head-danger  td { background: var(--danger-soft); }
.urg-head-row.urg-head-warning td { background: var(--warn-soft); }
.urg-head-row.urg-head-success td { background: var(--ok-soft); }
.urg-head-row.urg-head-info td { background: var(--info-soft); }
.urg-head-row.urg-head-secondary td { background: var(--steel-soft); }
.urg-head-row strong { font-size: 14px; color: var(--ink); }
.urg-head-row .urg-emoji { margin: 0 2px 0 4px; }
.urg-head-row .urg-count { margin-left: 6px; font-weight: 600; }
.urg-head-row .urg-sub { margin-left: 12px; color: var(--text-2); font-size: 12.5px; }
.urg-toggle {
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  padding: 0 4px 0 0;
  transition: transform .12s ease;
  display: inline-block;
}
.urg-toggle.collapsed { transform: rotate(-90deg); }
tbody.urg-body.urg-collapsed { display: none; }

/* --- Корзина закреплена сверху: отдельный tbody с лёгкой заливкой и
       разделителем; перекрывает зебру и заливку «замороженных» столбцов --- */
#supply-table > tbody.cart-pinned > tr > td,
#supply-table > tbody.cart-pinned > tr:nth-child(even) > td.col-frozen,
#supply-table > tbody.cart-pinned > tr:nth-child(even) > td.col-frozen-r { background: var(--ok-soft); }
#supply-table > tbody.cart-pinned { border-bottom: 2px solid var(--divider); }

/* --- Светофор-сводка в шапке (кликабельные чипы фильтра по срочности) --- */
#urgency-bar .urg-chip {
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--canvas);
  padding: 3px 11px;
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
#urgency-bar .urg-chip:hover { border-color: var(--steel); }
#urgency-bar .urg-chip.active { box-shadow: inset 0 0 0 1px currentColor; font-weight: 600; }
#urgency-bar .urg-chip-danger.active  { color: var(--danger); border-color: var(--danger); }
#urgency-bar .urg-chip-warning.active { color: var(--warn);   border-color: var(--warn-strong); }
#urgency-bar .urg-chip-success.active { color: var(--ok);     border-color: var(--ok-strong); }
#urgency-bar .urg-chip-info.active { color: var(--info); border-color: var(--info); }
#urgency-bar .urg-chip-secondary.active { color: var(--text-2); border-color: var(--steel); }

/* --- «Отложить заказ»: компактная выпадашка + бейдж «отложено до» --- */
.snooze-cell { white-space: nowrap; }
.snooze-cell .js-snooze { min-width: 8.5rem; font-size: 12px; }
.snooze-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--info);
  background: var(--info-soft);
  border-radius: 999px;
  padding: 1px 7px;
  margin-bottom: 2px;
  white-space: nowrap;
}
#urgency-bar .urg-chip-empty { opacity: .5; cursor: default; }
#urgency-bar .urg-chip strong { font-weight: 700; }

/* Кликабельная ячейка «Ср. прод./мес» — открывает попап продаж по месяцам */
.msales-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted var(--hairline);
  text-underline-offset: 3px;
}
.msales-link:hover { color: var(--primary); text-decoration-color: var(--primary); }

/* Выпадашка «папка поставки» в строке (перемещение между папками) */
.bucket-cell { white-space: nowrap; }
.bucket-cell .js-bucket { min-width: 9.5rem; font-size: 12px; }

/* --- Мини-итог корзины на экране поставки --- */
.cart-mini {
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 4px;
  border-radius: 8px;
}
.cart-mini:hover { background: var(--surface-warm); color: var(--ink); }
.cart-mini strong { color: var(--primary); }

/* --- Пустые состояния: дружелюбная подсказка «что делать дальше» --- */
.empty-state { padding: 40px 16px; text-align: center; }
.empty-state-icon { font-size: 30px; opacity: .35; margin-bottom: 6px; }
.empty-state-title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.empty-state-hint { color: var(--muted); margin-bottom: 14px; }

/* --- Оверлей занятости: долгие синхронные операции (пересчёт, импорт) --- */
.busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .35);
  backdrop-filter: blur(1px);
}
.busy-overlay.show { display: flex; }
.busy-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 34px;
  background: var(--canvas);
  border-radius: var(--r);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .55);
  text-align: center;
}
.busy-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--divider);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: busy-spin .7s linear infinite;
}
.busy-label { font-size: 15px; font-weight: 600; color: var(--ink); }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy-spinner { animation-duration: 2s; } }

/* --- Таймлайн приходов «в пути»: горизонтальная лента «что когда приедет» --- */
.arrivals-timeline {
  position: relative;
  height: 76px;
  margin: 30px 14px 8px;
}
.arrivals-track {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--divider);
  border-radius: 2px;
}
.arrivals-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--text-2);
}
.arrivals-dot {
  width: 11px;
  height: 11px;
  margin-top: 33px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--canvas);
  box-shadow: 0 0 0 1px var(--primary);
}
.arrivals-marker.is-late .arrivals-dot { background: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.arrivals-marker.is-manual .arrivals-dot { background: var(--ok-strong); box-shadow: 0 0 0 1px var(--ok-strong); }
.arrivals-today .arrivals-dot { background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.arrivals-bubble {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}
.arrivals-cap {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--meta);
  margin-top: 4px;
  white-space: nowrap;
}
.arrivals-marker:hover .arrivals-bubble { border-color: var(--primary); color: var(--primary); }

/* --- Строка итогов под таблицей (по видимым строкам) --- */
.totals-bar {
  background: var(--surface-warm);
  border-top: 1px solid var(--divider);
  border-radius: 0 0 var(--r) var(--r);
}
.totals-bar .kpi-value { font-size: 18px; }

/* липкая панель сохранения настроек */
.save-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--divider);
  margin-left: -24px;
  margin-right: -24px;
  padding: 12px 24px;
}
.save-bar-dirty { border-top: 2px solid var(--signal); }
.save-bar-dirty #save-hint { color: var(--ink); font-weight: 500; }

/* --- Нумерация строк «№»: CSS-счётчик — после сортировки и фильтров
   номера автоматически идут по видимым строкам в текущем порядке --- */
table.js-numbered tbody { counter-reset: rownum; }
table.js-numbered td.row-num { counter-increment: rownum; }
table.js-numbered td.row-num::before { content: counter(rownum); }
td.row-num, th.row-num-h {
  width: 1%;
  text-align: right;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--meta);
}

/* --- Перетаскивание строк корзины (ручной порядок) --- */
#cart-table tbody tr[draggable] { cursor: default; }
#cart-table td.drag-cell { white-space: nowrap; }
#cart-table .drag-grip {
  cursor: grab;
  margin-left: 5px;
  color: var(--hairline);
  user-select: none;
}
#cart-table .drag-grip:hover { color: var(--muted); }
#cart-table tr.dragging { opacity: .45; background: var(--surface); }
#cart-table tr.dragging .drag-grip { cursor: grabbing; }

/* --- Фильтры по столбцам (строка-«панель» под шапкой) --- */
.filter-row th {
  position: sticky;
  z-index: 4;
  background: var(--surface-warm);  /* читается как панель управления, не данные */
  padding: 3px 4px 4px !important;
  border-bottom: 1px solid var(--hairline);
}
.filter-input {
  width: 100%;
  min-width: 44px;
  border: 1px solid var(--divider);
  border-radius: 7px;
  font: 400 11.5px var(--mono);
  color: var(--ink);
  padding: 2px 6px;
  background: var(--canvas);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.filter-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(29, 29, 31, .06);
}
.filter-input:not(:placeholder-shown) { border-color: var(--steel); background: #fff; }
.filter-input::placeholder { color: var(--meta); opacity: .7; }
.filter-input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* числовой фильтр-диапазон: два поля «от» / «до» в одной ячейке */
.filter-range { display: flex; gap: 3px; }
.filter-range .filter-num { width: 50%; min-width: 0; padding-left: 5px; padding-right: 3px; text-align: center; }
.filter-num::-webkit-outer-spin-button,
.filter-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filter-num { -moz-appearance: textfield; appearance: textfield; }

/* --- Сортировка таблиц кликом по заголовку (js-sortable) --- */
table.js-sortable thead th.sortable-th { cursor: pointer; user-select: none; }
table.js-sortable thead th.sortable-th:hover { color: var(--ink); }
table.js-sortable thead th.sorted-asc::after { content: " ↑"; color: var(--ink); }
table.js-sortable thead th.sorted-desc::after { content: " ↓"; color: var(--ink); }

/* средний вариант волны (между «по средним» и «по максимальным») */
.wave-mid { color: var(--muted); font-weight: 600; font-size: 12.5px; }
/* дата заказа волны — по центру ячейки (просьба заказчика) */
#supply-table td .wave-date { text-align: center; }
/* отдельные столбцы дат волн: мелкая моноширинная дата по центру */
#supply-table td.col-wave-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--meta);
  white-space: nowrap;
  text-align: center;
}

/* --- Календарь flatpickr под брендбук: графит, радиусы, моно-подписи --- */
.flatpickr-calendar {
  font-family: var(--display);
  border: 1px solid var(--divider);
  border-radius: var(--r);
  box-shadow: 0 16px 36px -16px rgba(29, 29, 31, .3);
  width: 326px;
  padding: 6px 8px 8px;
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-months { padding: 6px 2px 4px; }
.flatpickr-current-month { font-size: 15px; }
.flatpickr-days, .dayContainer { width: 100%; min-width: 0; max-width: none; }
.flatpickr-day {
  border-radius: 8px;
  color: var(--text-2);
  height: 38px;
  line-height: 38px;
  max-width: none;
  font-variant-numeric: tabular-nums;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--meta); opacity: .45; }
.flatpickr-day.flatpickr-disabled { color: var(--hairline); }
/* футер «Сегодня / Очистить» (добавляется в datepicker.js) */
.fp-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 4px 2px;
  border-top: 1px solid var(--divider);
  margin-top: 6px;
}
.fp-btn {
  border: 0;
  background: none;
  font: 500 12.5px var(--display);
  color: var(--text-2);
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.fp-btn:hover { background: var(--surface); color: var(--ink); }
.flatpickr-day.today { border-color: var(--steel); }
.flatpickr-day.today:hover { background: var(--surface); color: var(--ink); border-color: var(--steel); }
.flatpickr-day.selected, .flatpickr-day.selected:hover,
.flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.flatpickr-day:hover { background: var(--surface); border-color: var(--surface); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--ink); font-weight: 600; }
.flatpickr-weekday {
  font-family: var(--mono);
  font-size: 9.5px !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--meta) !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--signal); }
.flatpickr-monthSelect-month { border-radius: 8px; color: var(--text-2); }
.flatpickr-monthSelect-month:hover { background: var(--surface); }
.flatpickr-monthSelect-month.selected { background: var(--ink) !important; color: #fff !important; }

/* тонкие спокойные скроллбары у широких таблиц */
.table-responsive { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; }
.table-responsive::-webkit-scrollbar { height: 10px; width: 10px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 8px; }
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--steel); }

/* единый видимый фокус с клавиатуры */
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* пагинация/прочее */
.dropdown-menu { border-radius: var(--r-sm); border-color: var(--divider); }

/* модуль 8px для основных отступов контента */
main.container-fluid { padding-left: 24px; padding-right: 24px; padding-bottom: 48px; }

.min-w-0 { min-width: 0 !important; }

/* --- Экран «Сегодня»: карточки-задачи с акцентом слева по важности --- */
.today-task { border-left: 3px solid var(--hairline); }
.today-task.sev-danger { border-left-color: var(--danger); }
.today-task.sev-warning { border-left-color: var(--warn-strong); }

/* --- Плотность интерфейса: компактный режим (переключатель в шапке).
   Класс ставится на <html> ещё до отрисовки — без мигания. --- */
html.density-compact body { font-size: 13.5px; }
html.density-compact .table tbody td { font-size: 12.5px; line-height: 1.28; }
html.density-compact .table thead th { font-size: 9.5px; }
html.density-compact .table-sm > :not(caption) > * > * { padding: .3rem .42rem; }
html.density-compact .card-body { padding-top: .75rem; padding-bottom: .75rem; }
html.density-compact main.container-fluid { padding-left: 16px; padding-right: 16px; }
html.density-compact .kpi-value { font-size: 16px; }
#density-toggle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: #c9cccf;
  border: 1px solid rgba(255, 255, 255, .22);
  background: transparent;
  border-radius: 8px;
  padding: 3px 9px;
}
#density-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }

/* --- Тосты (inline-сохранение) — компактные, графитовые --- */
.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast-msg {
  background: var(--ink);
  color: #f1f5f9;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 10px;
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--ease), transform var(--ease);
}
.toast-msg.show { opacity: 1; transform: none; }
.toast-msg.toast-error { background: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --- Контекстная помощь: кнопка-кружок «?» + всплывающая подсказка --- */
.help-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 5px;
  padding: 0;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  background: var(--steel-soft);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  cursor: help;
  vertical-align: middle;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.help-dot:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
/* термины глоссария — пунктирное подчёркивание, определение по клику */
.term { border-bottom: 1px dotted var(--muted); cursor: help; }
.term:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* --- Мини-тур при первом входе --- */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 1095;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, .45);
}
.tour-overlay.show { display: flex; }
.tour-box {
  width: 100%;
  max-width: 460px;
  padding: 22px 24px 20px;
  background: var(--canvas);
  border-radius: var(--r);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .55);
}
.tour-list { margin: 0; padding-left: 18px; }
.tour-list li { margin-bottom: 7px; color: var(--text-2); }
.help-pop {
  position: absolute;
  z-index: 1090;
  max-width: 320px;
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-2);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: 0 14px 32px -12px rgba(15, 23, 42, .45);
}

/* --- Быстрый предпросмотр товара: модальное окно --- */
.preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1085;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 7vh 16px 16px;
  background: rgba(15, 23, 42, .42);
}
.preview-overlay.show { display: flex; }
body.preview-open { overflow: hidden; }
.preview-box {
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 18px 20px 20px;
  background: var(--canvas);
  border-radius: var(--r);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .55);
}
/* Широкий вариант — для списка товаров ячейки матрицы (много строк/длинные имена) */
.preview-box.preview-wide { max-width: 880px; }
.preview-loading { padding: 24px 4px; text-align: center; }
.preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.preview-sku { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); }
.preview-model { font-size: 13.5px; color: var(--text-2); }
.preview-close {
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.preview-close:hover { color: var(--ink); background: var(--surface); }
.preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.preview-chip { min-width: 0; }
.preview-chip-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--meta);
}
.preview-chip-value { font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.preview-trend { font-size: 12px; font-weight: 400; margin-left: 4px; }
.preview-spark canvas { display: block; width: 100%; height: auto; }
/* Помесячные продажи в предпросмотре: столбики с подсказкой за месяц */
.preview-monthbars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
  padding: 2px 0;
}
.preview-monthbar {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  cursor: default;
}
.preview-monthbar-fill {
  width: 100%;
  min-height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}
.preview-monthbar:hover .preview-monthbar-fill { background: var(--info); }
/* Последние поставки (поступления) в предпросмотре: дата + количество */
.preview-supplies-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
}
.preview-supplies-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  background: var(--surface);
  border-radius: var(--r-sm);
}
.preview-supplies-date { font-family: var(--mono); font-size: 11.5px; color: var(--meta); }
.preview-supplies-qty { font-size: 14px; font-weight: 600; color: var(--text-2); }
.preview-deadline {
  padding: 7px 11px;
  font-size: 13px;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: var(--r-sm);
}

/* --- Кнопка быстрого предпросмотра рядом с артикулом --- */
.peek-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 3px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  vertical-align: middle;
  line-height: 0;
}
.peek-btn:hover { color: var(--primary); background: var(--primary-soft); }
.peek-btn svg { width: 14px; height: 14px; }

/* --- Кнопка лёгкого копирования артикула (слева от артикула) --- */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  vertical-align: middle;
  line-height: 0;
}
.copy-btn:hover { color: var(--primary); background: var(--primary-soft); }
.copy-btn.copied { color: var(--ok); }
.copy-btn svg { width: 13px; height: 13px; }

/* --- Сохранённые виды: чипы с именованными наборами фильтров --- */
.saved-views { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sv-list { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 10px;
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 999px;
}
.sv-chip.active { border-color: var(--primary); background: var(--primary-soft); }
.sv-chip > a { color: var(--text-2); text-decoration: none; }
.sv-chip.active > a { color: var(--primary); font-weight: 600; }
.sv-del {
  width: 16px;
  height: 16px;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.sv-del:hover { color: var(--danger); background: var(--danger-soft); }

/* --- Drag-drop зона импорта --- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  text-align: center;
  background: var(--surface-warm);
  border: 2px dashed var(--hairline);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.dropzone:hover { border-color: var(--primary); }
.dropzone.dragover {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.dropzone-title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }

/* --- Сгруппированная навигация: выпадающие меню --- */
.nav-grouped { align-items: center; }
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .78);
  font: inherit;
  padding: .5rem .75rem;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 8px;
}
.nav-dropdown-toggle:hover { color: #fff; }
.nav-dropdown.active > .nav-dropdown-toggle { color: #fff; font-weight: 600; }
.nav-caret { font-size: 10px; opacity: .7; }
.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 13rem;
  z-index: 1050;
  margin-top: 4px;
  padding: 6px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: 0 14px 32px -12px rgba(15, 23, 42, .45);
}
.nav-dropdown.open .nav-menu { display: block; }
.nav-menu .dropdown-item {
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 14px;
  color: var(--text-2);
}
.nav-menu .dropdown-item:hover { background: var(--primary-soft); color: var(--primary); }

/* ============================================================
   АДАПТИВ: планшет и телефон — заказывать «на ходу»
   ============================================================ */
@media (max-width: 991.98px) {
  /* Навбар: горизонтально прокручиваемая лента вместо вертикального стека */
  .navbar .container-fluid { flex-wrap: nowrap; gap: 8px; }
  .nav-grouped {
    flex-direction: row !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .nav-grouped > .nav-link,
  .nav-dropdown-toggle { white-space: nowrap; padding: .5rem .55rem; }
  /* меню выпадает поверх — чтобы не растягивало ленту */
  .nav-menu { position: fixed; left: 8px; right: 8px; min-width: 0; top: auto; }
}

@media (max-width: 767.98px) {
  body { font-size: 14px; }
  h4 { font-size: 1.15rem; }
  main.container-fluid { padding-left: 10px; padding-right: 10px; }

  /* KPI-блоки и тулбары — переносятся и занимают строку целиком */
  .kpi-value { font-size: 18px; }
  .card-body.d-flex { gap: 1rem !important; }

  /* Экран «Сегодня»: задача-карточка складывается, кнопка на всю ширину */
  .today-task .card-body { flex-wrap: wrap; }
  .today-task .card-body .btn { width: 100%; margin-top: 6px; }

  /* Поставка: тулбар и панель массовых действий переносятся; ячейки плотнее.
     Таблица всё равно прокручивается горизонтально, артикул закреплён слева. */
  #supply-table thead th, #supply-table tbody td { font-size: 12px; padding: .3rem .4rem; }
  .totals-bar { gap: 1rem !important; }
  .totals-bar .kpi-value { font-size: 16px; }

  /* Таймлайн приходов: подписи мельче, пузырьки не наезжают */
  .arrivals-bubble { font-size: 10px; padding: 1px 5px; }
  .arrivals-cap { font-size: 9px; }

  /* Матрица: ячейки уже, текст мельче */
  .matrix-grid td, .matrix-grid th { padding: .35rem !important; }
  .matrix-grid .fs-5 { font-size: 1rem !important; }
}

/* === Карточка инвойса: тулбар, таймлайн пути товара, приёмка === */
/* Липкая панель действий вверху страницы */
.action-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--canvas);
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

/* Таймлайн «Счёт получен → … → Товар на складе»: шаги, соединённые линией */
.stepper {
  display: flex;
  gap: 0;
  margin: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.stepper .step {
  flex: 1 1 0;
  min-width: 96px;
  padding: 4px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  text-align: center;
}
.stepper .step-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.stepper .step::before {        /* линия-коннектор к предыдущему шагу */
  content: "";
  position: absolute;
  top: 14px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--hairline);
  z-index: 0;
}
.stepper .step:first-child::before { display: none; }
.stepper .step-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  background: var(--steel-soft); color: var(--text-2);
  border: 2px solid var(--hairline);
  position: relative; z-index: 1;
}
.stepper .step-label { font-size: 11px; line-height: 1.15; color: var(--text-2); }
.stepper .step-date { font-family: var(--mono); font-size: 10px; color: var(--steel); min-height: 12px; }
.stepper .step-date-edit { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.stepper .step-date-edit:hover { color: var(--primary); }
.stepper .step-dev { font-family: var(--mono); font-size: 9.5px; font-weight: 600; }
.stepper .step-plan { font-family: var(--mono); font-size: 9.5px; }
.stepper .step-done .step-dot { background: var(--ok-soft); color: var(--ok-strong); border-color: var(--ok-strong); }
.stepper .step-done::before { background: var(--ok-strong); }
.stepper .step-active .step-dot { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.stepper .step-active .step-label { color: var(--ink); font-weight: 600; }
.stepper .step-pending .step-label { color: var(--steel); }
.stepper .step-btn:hover .step-dot { border-color: var(--primary); }
/* отклонение план↔факт: опоздание — красный, в срок/раньше — зелёный */
.stepper .step.is-late .step-dot { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.stepper .step.is-late.step-done::before { background: var(--danger); }
.stepper .step.is-ontime.step-done .step-dot { background: var(--ok-soft); color: var(--ok-strong); border-color: var(--ok-strong); }

/* Мини-полоска приёмки в ячейке «Поступило» */
.recv-mini {
  height: 4px;
  background: var(--steel-soft);
  border-radius: 2px;
  margin-top: 2px;
  overflow: hidden;
}
.recv-mini span { display: block; height: 100%; background: var(--ok-strong); }

/* Липкая строка «Итого» таблицы позиций инвойса */
#invoice-items-table tfoot.sticky-bottom td {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: var(--canvas);
  box-shadow: inset 0 1px 0 var(--hairline);
}

/* Сроки поставок: прогнозные даты (медиана истории) — отличать от факта */
.eta-pred { color: var(--info, #0e7490); font-style: italic; }
.supply-timeline-table .stage-date-input { min-width: 7.5rem; }
.supply-timeline-table th.stage-col { font-size: 11px; white-space: nowrap; }
.supply-timeline-table td.stage-cell { padding: .25rem .35rem; }
.supply-timeline-table .date-sub { font-size: 10px; line-height: 1.2; }

/* Печать инвойса: скрыть управление, оставить данные */
@media print {
  .navbar, .action-bar, #columns-toggle, #columns-panel, .peek-btn, .copy-btn,
  #busy-overlay, .toast-stack { display: none !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
  a[href] { color: #000 !important; text-decoration: none !important; }
}