:root {
  --border: #e2e5ea;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --primary: #2196e0; /* фирменный синий belst.by */
  --primary-dark: #1678b8;
  --danger: #c0392b;
  --success: #1a8754;
  --warning: #916a00;
  --text: #1f2430;
  --muted: #6b7280;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
h1, h2, h3 { margin: 0 0 12px; }

/* ---------- Топбар ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
  gap: 8px;
}
.topbar h1 { font-size: 21px; margin: 0; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Кнопок в меню стало восемь (А6). Они намеренно компактнее прочих кнопок: восемь кнопок
   обычного размера занимают больше 1050 точек, и на ноутбуке 1440 строка переносилась,
   утаскивая «Выйти» на отдельную строку. Меряется, а не прикидывается: см. проверку
   ширины на 1440, 1280 и 820. */
.topbar-nav button {
  padding: 7px 11px;
  font-size: 14px;
}
.topbar-nav {
  display: flex;
  /* Перенос обязателен. Кнопок в шапке стало шесть, и на ноутбуке 1280 они уезжали за
     правый край — ровно те же грабли, что с кнопками заявок 19.09 и со списком
     пользователей 20.09: кнопка есть, а нажать её нельзя. Ряд действий не должен
     зависеть от горизонтальной прокрутки. Проверено измерением на 1440, 1280 и 820. */
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
}
.topbar-user {
  font-size: 13px;
  color: var(--muted);
  padding: 0 4px 0 12px;
  margin-left: auto;
  white-space: nowrap;
  border-left: 1px solid var(--border);
}

/* ---------- Основной каркас: список/карточка + опциональная панель инструкции сбоку ---------- */
.shell-body { display: flex; align-items: flex-start; }
/* Ограничение ширины перенесено с #app на конкретные экраны (20.09.2026): карточку товара
   и настройки читать удобнее в узкой колонке, а списку товаров с заявками слева нужна вся
   ширина монитора — иначе на широком экране всё ютилось посередине. */
.shell-body #app { flex: 1 1 auto; min-width: 0; padding: 24px; }
#detail-view, #settings-view, #users-view, #journal-view { max-width: 1000px; margin: 0 auto; }
#list-view { max-width: 1900px; margin: 0 auto; }

/* ---------- Инструкция для менеджеров (панель сбоку, как справочное окно в Word) ---------- */
.help-panel {
  /* Ширина растёт вместе с экраном: инструкция длинная, и на широком мониторе читать её
     в узкой колонке неудобно. Просьба владельца 21.09.2026 — «расширить столбец с
     инструкцией за счёт того, что уведомления сворачиваются»: при открытой инструкции
     стопка уведомлений сворачивается в плашку (app.js: noticesCollapsedNow), и
     освободившееся место уходит сюда. Нижняя граница 380 — прежняя ширина. */
  flex: 0 0 clamp(380px, 36vw, 620px);
  width: clamp(380px, 36vw, 620px);
  align-self: stretch;
  position: sticky;
  top: var(--topbar-h, 64px);
  max-height: calc(100vh - var(--topbar-h, 64px));
  overflow-y: auto;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -2px 0 10px rgba(16, 24, 40, 0.05);
  /* Верхнего отступа у панели НЕТ намеренно: его даёт закреплённый блок. Иначе между верхом
     панели и «прилипшим» оглавлением остаётся полоска, сквозь которую просвечивает
     прокручивающийся текст — поймано на снимке экрана. */
  padding: 0 22px 32px;
}
.help-panel[hidden] { display: none; }

/* Шапка и оглавление — один «прилипающий» блок: они должны висеть вместе, пока человек
   листает текст. Фон непрозрачный, иначе текст просвечивает сквозь них при прокрутке. */
.help-sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  /* Растянут на всю ширину панели (отрицательные боковые отступы) и полностью непрозрачен
     сверху донизу: под ним проезжает текст, и ни одной щели быть не должно. */
  margin: 0 -22px 0;
  padding: 18px 22px 10px;
  box-shadow: 0 6px 10px -6px rgba(16, 24, 40, 0.18);
}
.help-content { padding-top: 8px; }
.help-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.help-panel-header h2 { flex: 1 1 auto; }

/* Кнопки «в начало» и «в конец». Видны всегда, потому что живут в закреплённой шапке. */
.help-jump { display: flex; gap: 6px; flex-shrink: 0; }
.help-jump button {
  margin: 0;
  width: auto;
  padding: 4px 9px;
  font-size: 12px;
  white-space: nowrap;
}
.help-jump-bottom {
  justify-content: center;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.help-panel-header h2 { font-size: 16px; margin: 0; }
.help-close {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.help-close:hover { background: #eef0f3; color: var(--text); }

/* Оглавление на 25 пунктов целиком на экран не влезет, поэтому у него своя прокрутка и
   ограниченная высота: оно висит вместе с шапкой, но не съедает всю панель. */
.help-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 30vh;
  overflow-y: auto;
  padding: 8px 0 12px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.help-toc a {
  color: var(--primary-dark);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.help-toc a:hover { background: #eef6fd; text-decoration: underline; }
/* Где человек сейчас находится. В длинной инструкции без этого легко потеряться. */
.help-toc a.current {
  background: #eef6fd;
  border-left-color: var(--primary);
  font-weight: 600;
}

.help-content h3 { font-size: 14px; margin: 0 0 8px; scroll-margin-top: 8px; }
.help-content { scroll-margin-top: 8px; }
/* Подзаголовок внутри раздела инструкции (например, «Видео» внутри «Документы и видео») —
   заметно мельче заголовка самого раздела, чтобы не путать с новым разделом. */
.help-content h4 { font-size: 13px; margin: 16px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.help-content section { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px dashed var(--border); }
.help-content section:last-child { border-bottom: none; margin-bottom: 4px; }
.help-content p { font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.help-content ul { margin: 0 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.5; }
.help-content li { margin-bottom: 6px; }
.help-content a { color: var(--primary-dark); }
.help-content p.warn { background: #fff3cd; color: var(--warning); padding: 8px 10px; border-radius: 8px; }
.help-content .key {
  display: inline-block;
  background: #eef1f5;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .help-panel {
    position: fixed;
    inset: 0;
    top: var(--topbar-h, 64px);
    width: 100%;
    max-height: none;
    height: auto;
    z-index: 400;
    box-shadow: none;
  }
}

.bitrix-warning {
  background: #fff3cd;
  color: var(--warning);
  padding: 10px 24px;
  font-size: 14px;
  border-bottom: 1px solid #f0dca0;
}

/* ---------- Формы ---------- */
/* 22.09.2026: сюда добавлены поля без type, number, search, date и email — раньше они
   оставались «голыми» браузерными (было видно на экране пользователей и в плане). */
input[type="text"], input[type="password"], input:not([type]), input[type="number"], input[type="search"],
input[type="date"], input[type="email"], textarea, select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 12px;
  background: var(--surface);
  color: var(--text);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }

button {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: filter 0.1s, background 0.1s;
}
button.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
button.primary:hover { background: var(--primary-dark); }
button.danger { color: var(--danger); border-color: #ecc; background: #fff5f4; }
button.ghost { background: none; border-color: transparent; color: var(--muted); }
button.ghost:hover { background: #eef0f3; }
button.small { padding: 4px 10px; font-size: 12px; }
button:hover { filter: brightness(0.97); }
button:disabled { opacity: 0.6; cursor: default; }

.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; max-width: 560px; }
.inline-form input, .inline-form select { width: auto; flex: 1; min-width: 140px; margin-bottom: 0; }

.form-error { color: var(--danger); font-size: 13px; min-height: 18px; }

/* ---------- Журнал работы и отчёт (пункты 5.2 и 5.3, 20.09.2026) ---------- */
.journal-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.journal-filters > div { display: flex; flex-direction: column; }
.journal-filters input, .journal-filters select { margin-bottom: 0; width: auto; min-width: 150px; }
.journal-filters label { white-space: nowrap; }
.report-preview {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: #fbfcfd;
  max-height: 520px;
  overflow: auto;
}
.report-preview[hidden] { display: none; }

/* ---------- Карточки-контейнеры ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* ---------- Таблица товаров / списков ---------- */
/* Колонок стало больше (добавлены Бренд/Код производителя/Опубликовано, 19.09.2026) — на узких
   окнах таблица шире экрана, поэтому даём ей прокручиваться по горизонтали внутри своей обёртки,
   а не сжимать все колонки до нечитаемого состояния. */
.table-scroll { overflow-x: auto; border-radius: var(--radius); }
/* min-width был 760 — на ноутбуке 1280 колонка товаров уже этого (754), и таблица вылезала
   на шесть точек: последний столбец с кнопками оказывался за краем. Поймано измерением. */
table.products { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
table.products th, table.products td {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 14px;
}
table.products th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
table.products tr:hover td { background: #f7f9fc; cursor: pointer; }
.row-actions { text-align: right; white-space: nowrap; }
.col-id { width: 70px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.draft { background: #fff3cd; color: var(--warning); }
.badge.approved { background: #d4edda; color: #14622a; }
.badge.published { background: #d1e7ff; color: #0b4a8f; }

/* ---------- Вкладки ---------- */
.tabs { display: flex; gap: 4px; margin: 4px 0 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tab-btn { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 14px; color: var(--muted); }
.tab-btn.active { border-bottom-color: var(--primary); font-weight: 600; color: var(--text); }

.actions-bar { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
.hint { color: var(--muted); font-size: 13px; }
/* Подсказка-предупреждение в самой форме (не в панели инструкции) — например, «курс Нацбанка
   сейчас недоступен» под полем цены (19.09.2026, пункт 4.1 бэклога). */
.hint.warn { color: var(--warning); font-weight: 600; }

.chars-table { width: 100%; border-collapse: collapse; }
.chars-table th, .chars-table td { border-bottom: 1px solid var(--border); padding: 8px; font-size: 14px; }
.chars-table select, .chars-table input { margin: 0; }

/* ---------- Фото ---------- */
.photo-add-row { display: flex; gap: 8px; max-width: 640px; flex-wrap: wrap; }
.photo-add-row input { margin-bottom: 0; }
/* Цена + валюта в одну строку (19.09.2026, пункт 4.1 бэклога): поле суммы занимает свободное
   место, выпадающий список валюты — по своему содержимому и не переносится вниз. */
.price-row { display: flex; gap: 8px; max-width: 640px; align-items: center; }
.price-row input { margin-bottom: 0; flex: 1 1 auto; min-width: 120px; }
.price-row select { margin-bottom: 0; flex: 0 0 auto; width: auto; }
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 16px; }
.photo-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; position: relative; background: #fafbfc; }
.photo-card img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; background: #eee; display: block; }
.photo-card img.broken { display: none; }

/* ---------- Перетаскивание фото и корзина (пункты 2.5 и 2.4, 20.09.2026) ---------- */
.photo-card { cursor: grab; }
.photo-card.dragging { opacity: 0.4; }
/* Место, куда «упадёт» фото — подсвечиваем границей, иначе при перетаскивании непонятно,
   между какими снимками оно встанет. */
.photo-card.drop-before { box-shadow: -3px 0 0 0 var(--primary); }
.photo-card.drop-after { box-shadow: 3px 0 0 0 var(--primary); }
.photo-order { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.photo-order button { padding: 2px 8px; font-size: 12px; line-height: 1.2; }

.trash-zone {
  margin-top: 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: #fafbfc;
  transition: border-color 0.15s, background 0.15s;
}
.trash-zone.drag-over { border-color: var(--danger); background: #fff5f4; }
/* Таблица документов как зона возврата из корзины — подсвечиваем, когда над ней тащат строку. */
table.products.drag-over { outline: 2px dashed var(--primary); outline-offset: 2px; }
.trash-head { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.trash-head .hint { font-weight: 400; margin-left: 6px; }
.trash-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.trash-grid .photo-card { opacity: 0.75; }
.trash-grid .photo-card img { height: 80px; }
.photo-card .badge { position: absolute; top: 14px; left: 14px; }
.photo-url { font-size: 11px; color: var(--muted); word-break: break-all; margin: 6px 0; max-height: 32px; overflow: hidden; }
.photo-card img:not(.broken) { cursor: zoom-in; }

/* ---------- Просмотр фото крупным планом ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(16, 20, 28, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  z-index: 2000;
  cursor: zoom-out;
}
/* Та же ловушка со специфичностью, что и с .auth-screen: обычное правило автора страницы
   (display: flex выше) перевешивает встроенное браузерное "[hidden] { display: none }" при
   равной специфичности — без этого переопределения окно с фото никогда бы по-настоящему
   не скрывалось. */
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }

/* ---------- Уведомления (toast) ---------- */
#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  padding: 12px 16px;
  border-radius: 8px;
  background: #202531;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: #1a8754; }
.toast-error { background: #c0392b; }
.toast-warning { background: #b8860b; }

/* ---------- Окошко подтверждения (замена confirm()/prompt()) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 32, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}
/* Критично (см. такой же комментарий у .auth-screen[hidden] ниже): у [hidden] и у .modal-overlay
   одинаковая специфичность (0,1,0), поэтому порядок правил в файле решает, кто победит. Без этой
   строки "display: flex" из .modal-overlay выше побеждал встроенное "[hidden] { display: none }",
   и окошко подтверждения было видно всегда — даже когда JS ещё не открывал его (например, поверх
   экрана входа при самой первой загрузке страницы). Исправлено 19.09.2026.*/
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: #fff;
  border-radius: var(--radius, 10px);
  padding: 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.modal-box p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-line;
}
#confirm-modal-input-wrap { margin-bottom: 16px; }
#confirm-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Экран входа ---------- */
/* min-height задан и в vh, и в dvh (для мобильных/некоторых встроенных браузеров, где 100vh
   иногда считается некорректно при первой отрисовке). */
.auth-screen {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* Критично: у [hidden] и у .auth-screen одинаковая специфичность (0,1,0,0), а обычные правила
   автора всегда перевешивают стандартные правила браузера — поэтому "display: flex" выше
   побеждал встроенное "[hidden] { display: none }", и экран входа оставался видимым (в потоке
   документа, ПЕРЕД карточками товаров) даже когда JS уже поставил hidden=true. Именно это
   выглядело как «страница входа висит сверху»: она никогда по-настоящему не скрывалась.
   Правило ниже с более высокой специфичностью (класс + атрибут) возвращает hidden его смысл. */
.auth-screen[hidden] { display: none; }
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 4px 20px rgba(16, 24, 40, 0.08);
}
.brand-mark { display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 44px; width: auto; display: block; image-rendering: -webkit-optimize-contrast; }
.brand-logo-topbar { height: 44px; }
.brand-logo-link { display: block; line-height: 0; cursor: pointer; }
.detail-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* Шапка карточки товара — видна на всех вкладках (просьба владельца 20.09.2026). Липкая, чтобы
   при прокрутке длинной вкладки было видно, какая карточка в работе. */
.card-headline {
  position: sticky;
  top: var(--topbar-h, 64px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 10px 0 4px;
  padding: 10px 14px;
  background: #eef6fd;
  border: 1px solid #cfe5f7;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}
.card-headline[hidden] { display: none; }
.card-headline .ch-id { color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.card-headline .ch-code, .card-headline .ch-brand { color: var(--text); }
.card-headline .ch-name { font-weight: 700; }
.card-headline span:empty { display: none; }
/* #btn-open-site теперь оформлен классом .open-site (см. ниже): серой ссылкой он терялся,
   хотя именно им проверяют результат работы. Старые правила убраны, чтобы не спорить с новыми. */
.auth-card .brand-mark { justify-content: center; margin-bottom: 24px; }
.auth-card .brand-logo { height: 64px; }
.auth-card h1 { font-size: 20px; margin: 0; }
/* Заголовок программы — крупный и тёмный: это название окна, а не подпись
   (просьба владельца 21.09.2026). */
.topbar h1 { font-size: 21px; color: var(--text); font-weight: 700; margin: 0; padding-left: 12px; border-left: 1px solid var(--border); line-height: 1.15; }
.auth-form button.primary { width: 100%; margin-top: 4px; padding: 10px; }

/* ---------- Мобильная адаптация ---------- */
@media (max-width: 640px) {
  .shell-body #app { padding: 14px; }
  .card { padding: 16px; }
  .topbar { padding: 12px 14px; }
  /* Список товаров вырос до 9 колонок (добавлены Бренд/Код производителя/Опубликовано,
     19.09.2026) — на узком экране оставляем только самое важное: ID, Название, Активен,
     действия. Остальное по-прежнему доступно внутри самой карточки товара. */
  table.products th:nth-child(3), table.products td:nth-child(3),
  table.products th:nth-child(4), table.products td:nth-child(4),
  table.products th:nth-child(6), table.products td:nth-child(6),
  table.products th:nth-child(7), table.products td:nth-child(7),
  table.products th:nth-child(8), table.products td:nth-child(8) { display: none; }
}

/* ---------- Заявки с сайта (пункты 8.1 и 8.4 бэклога, 20.09.2026) ----------

   Раскладка экрана списка: на широком мониторе ДВЕ КОЛОНКИ — слева заявки, справа товары
   (просьба владельца). Ниже 1200px колонки встают друг под друга: рядом они там уже не
   помещаются, а на телефоне тем более.

   Заявки показываются карточками, а не строками широкой таблицы: в таблице колонка с
   кнопкой «Взять в работу» оказывалась за правым краем экрана, и до неё нельзя было
   дотянуться.                                                                          */

.list-columns {
  display: grid;
  grid-template-columns: minmax(400px, 460px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.products-column { min-width: 0; }

@media (max-width: 1200px) {
  .list-columns { grid-template-columns: minmax(0, 1fr); }
}

.orders-block {
  padding: 12px 14px 14px;
  border: 1px solid var(--border, #dcdfe4);
  border-radius: 10px;
  background: #fff;
  /* Колонка заявок «прилипает» к верху: прокручивая длинный список товаров справа,
     менеджер всё равно видит заявки. */
  position: sticky;
  top: calc(var(--topbar-h, 64px) + 12px);
  max-height: calc(100vh - var(--topbar-h, 64px) - 28px);
  display: flex;
  flex-direction: column;
}
@media (max-width: 1200px) {
  .orders-block { position: static; max-height: none; }
}

.orders-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.orders-head h2 { margin: 0; font-size: 17px; flex: 1 1 auto; }
.orders-head button { margin: 0; width: auto; padding: 5px 10px; font-size: 13px; }

/* Вкладки «Новые / Мои в работе / Все» — цифры видны сразу, без открытия меню. */
.orders-tabs {
  display: flex;
  gap: 4px;
  margin: 10px 0 6px;
  border-bottom: 1px solid var(--border, #dcdfe4);
}
/* .ap-tab и .sg-tab — те же вкладки на экранах «На утверждение» и «Предложения».
   Отдельные имена оставлены для обработчиков в app.js, а вид должен быть один: человек не
   должен гадать, почему на одном экране вкладки выглядят вкладками, а на другом кнопками. */
.o-tab, .ap-tab, .sg-tab {
  margin: 0;
  width: auto;
  padding: 6px 10px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: #55606e;
  font-size: 13px;
  cursor: pointer;
}
.o-tab:hover, .ap-tab:hover, .sg-tab:hover { color: #1a1f26; }
.o-tab.active, .ap-tab.active, .sg-tab.active { color: #137aa8; border-bottom-color: #137aa8; font-weight: 600; }
.o-tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: #e6eaee;
  color: #3a4654;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.o-tab[data-view="unclaimed"] .o-tab-count { background: #d13b3b; color: #fff; }

#o-sync-info { margin: 0 0 8px; font-size: 12px; }

/* Свёрнутый блок: остаётся только заголовок. */
.orders-block.collapsed .orders-tabs,
.orders-block.collapsed .orders-list,
.orders-block.collapsed #o-sync-info,
.orders-block.collapsed #orders-empty { display: none; }

/* Красный счётчик непринятых заявок на кнопке в верхней панели. */
.orders-badge {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 10px;
  background: #d13b3b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
}
.orders-badge[hidden] { display: none; }

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
}

.order-card {
  padding: 9px 11px;
  border: 1px solid var(--border, #dcdfe4);
  border-radius: 8px;
  background: #fbfcfd;
  cursor: pointer;
  font-size: 13px;
}
.order-card:hover { border-color: #b9c4cf; background: #f5f8fa; }
/* Не принятая в работу заявка видна сразу, не вчитываясь. */
.order-card.order-unclaimed {
  background: #fff5f5;
  border-color: #f0c6c6;
  box-shadow: inset 3px 0 0 #d13b3b;
}
.order-card.order-canceled { opacity: 0.6; }

.oc-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}
.oc-num { font-size: 14px; }
.oc-owner { margin-left: auto; font-size: 12px; color: #55606e; }
.oc-owner-free { color: #b03030; font-weight: 600; }
.oc-who { margin-bottom: 3px; }
.oc-contacts { color: #55606e; }
.oc-item { margin: 1px 0; color: #3a4654; }
.oc-code { font-family: ui-monospace, "Consolas", monospace; }
.oc-flags { margin-top: 3px; color: #55606e; font-size: 12px; }
.oc-actions { display: flex; gap: 6px; margin-top: 8px; }
.oc-actions button { margin: 0; width: auto; flex: 1 1 auto; padding: 6px 10px; font-size: 13px; }

.order-yes { color: #1f8a4c; font-weight: 600; }
.order-no { color: #b03030; }

/* ---------- Окно заявки ----------
   Отдельное окно по каждой заявке: вся информация и вся работа по ней в одном месте.
   ВНИМАНИЕ (грабли этого проекта): у `.order-modal { display: flex }` и атрибута [hidden]
   одинаковая специфичность, поэтому правило со скрытием обязательно. */
.order-modal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px;
  overflow-y: auto;
}
.order-modal[hidden] { display: none; }

.order-modal-box {
  width: min(1100px, 100%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.24);
  padding: 18px 22px 24px;
}
.om-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--border, #dcdfe4);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.om-header h2 { margin: 0; flex: 1 1 auto; font-size: 19px; }
.om-body h3 { margin: 18px 0 8px; font-size: 15px; }

.om-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  align-items: start;
}
.om-card {
  padding: 12px 14px;
  border: 1px solid var(--border, #dcdfe4);
  border-radius: 8px;
  background: #fafbfc;
}
.om-card h3 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.4px; color: #55606e; }
.om-card p { margin: 4px 0; }
.om-big { font-size: 17px; }
.om-card label { margin-top: 10px; }
.om-card select, .om-card textarea { width: 100%; }
.om-actions { margin: 8px 0; }
.om-actions button { margin: 0; width: 100%; }
.om-items .oc-code { color: #3a4654; }

/* ---------- Контрагент и счёт в окне заявки (пункт 8.2 бэклога, 20.09.2026) ---------- */

.cp-form { padding: 12px 14px; border: 1px solid var(--border, #dcdfe4); border-radius: 8px; background: #fafbfc; }
.cp-kind { display: flex; gap: 20px; margin-bottom: 10px; }
.cp-kind label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; cursor: pointer; }
.cp-kind input { width: auto; margin: 0; }

.cp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; }
.cp-fields[hidden] { display: none; }
.cp-field label { margin: 0 0 2px; font-size: 12px; color: #55606e; }
.cp-field input { width: 100%; margin: 0; }
.cp-wide { grid-column: 1 / -1; }
.cp-req { color: #b03030; }
#cp-save { margin-top: 12px; width: auto; }

.inv-done {
  padding: 10px 12px;
  border: 1px solid #b6dcc6;
  border-radius: 8px;
  background: #f2fbf5;
}
.inv-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.inv-actions button, .inv-actions a { margin: 0; width: auto; }
.inv-actions a.ghost { display: inline-block; padding: 8px 14px; text-decoration: none; }

/* ---------- Сводка над списком товаров (20.09.2026) ----------
   Четыре плитки-счётчика: всего, опубликовано, требуют действий, не обработаны.
   Это одновременно и фильтр — нажатие оставляет в списке только свою группу,
   повторное нажатие снимает фильтр. Числа считает сервер (GET /api/products →
   summary), по всему каталогу, а не по текущему поиску. */
/* Плитки переносятся по ширине САМОГО БЛОКА, а не окна. Раньше было
   repeat(4, minmax(0, 1fr)) +media-запрос по ширине окна — и когда колонку сужала
   открытая панель «Инструкция» или полоса уведомлений, четыре плитки оставались в ряд и
   подписи обрезались в «Всего карто…», «Опубл…». Окно при этом широкое, и media-запрос
   не срабатывал. auto-fit смотрит на реальное место. */
.list-summary {
  display: grid;
  /* 24.09.2026: плиток шесть — минимум уже, чтобы на ноутбуке они шли одной строкой. */
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.list-summary .ls-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.list-summary .ls-tile:hover { border-color: var(--primary); }
.list-summary .ls-tile.active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.list-summary .ls-num { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--text); }
.list-summary .ls-label { font-size: 12px; color: var(--muted); }
.list-summary .ls-tile.warn .ls-num { color: var(--warning); }
.list-summary .ls-tile.muted .ls-num { color: var(--muted); }
/* Ноль в «требуют действий» — это хорошая новость, а не предупреждение. */
.list-summary .ls-tile.warn.is-zero .ls-num { color: var(--success); }

/* ---------- Предпросмотр карточки перед публикацией (20.09.2026) ---------- */
/* Обязательная пара правил: у [hidden] и у .modal-overlay {display:flex} одинаковая
   специфичность, поэтому без второй строки окно не закрывалось бы (см. заметку про эти
   грабли в начале файла и у .order-modal). */
.preview-modal { align-items: flex-start; overflow-y: auto; padding: 24px 16px; }
.preview-modal[hidden] { display: none; }

.preview-modal-box {
  width: min(980px, 100%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.24);
  padding: 18px 22px 24px;
}
.pv-body h4 { margin: 22px 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }

.pv-problems {
  background: #fff8e6;
  border: 1px solid #f0d99b;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  color: var(--warning);
}
.pv-problems ul { margin: 6px 0 0; padding-left: 20px; }
.pv-ok {
  background: #eaf7f0;
  border: 1px solid #b8e0ca;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  color: var(--success);
}

.pv-card { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.pv-photo-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pv-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
}
.pv-photo-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pv-photo-thumb {
  width: 56px; height: 56px; object-fit: contain;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}
.pv-name { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.pv-meta { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.pv-price { margin: 0 0 4px; font-size: 26px; font-weight: 600; color: var(--primary-dark); }
.pv-noprice { font-size: 15px; font-weight: 400; color: var(--danger); }
.pv-avail { margin: 0 0 10px; font-size: 13px; color: var(--success); }
.pv-anons { margin: 10px 0 0; }
.pv-warn-inline { color: var(--warning); font-size: 12px; }

.pv-detail { white-space: normal; line-height: 1.55; }
.pv-chars { width: 100%; border-collapse: collapse; }
.pv-chars td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pv-chars td:first-child { color: var(--muted); width: 40%; }
.pv-docs { margin: 0; padding-left: 20px; }
.pv-video { word-break: break-all; color: var(--muted); font-size: 13px; }

/* Как карточка выглядит в выдаче поисковика — чтобы SEO-поля проверялись глазами. */
.pv-serp { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.pv-serp-title { color: #1a0dab; font-size: 18px; line-height: 1.3; }
.pv-serp-url { color: var(--success); font-size: 13px; margin: 2px 0 4px; }
.pv-serp-desc { color: #4d5156; font-size: 13px; line-height: 1.45; }

@media (max-width: 760px) {
  .pv-card { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Экран «Пользователи» (20.09.2026) ----------
   Карточка вместо строки таблицы. Причина: таблица из семи колонок занимала 1210px
   в области шириной 950, и колонка с кнопками «Сохранить»/«Удалить» уезжала за правый
   край — кнопки были, но нажать их было нельзя. Те же грабли, что и с заявками 19.09.
   Правило: строка с действиями не должна зависеть от горизонтальной прокрутки. */
.users-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }

.user-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
}
.uc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.uc-title { font-weight: 600; font-size: 15px; }
.uc-me {
  font-weight: 400;
  font-size: 12px;
  color: var(--primary-dark);
  background: #eaf4fc;
  border-radius: 20px;
  padding: 1px 8px;
  margin-left: 6px;
}
.uc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 14px;
}
.uc-grid label { display: block; font-size: 12px; color: var(--muted); margin: 0; }
.uc-grid input, .uc-grid select { width: 100%; margin-top: 3px; }
.uc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.uc-actions button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Заявки на утверждение и план (20.09.2026) ---------- */
.approval-card.ap-pending { border-left: 3px solid var(--warning); }
.approval-card.ap-approved { border-left: 3px solid var(--success); }
.approval-card.ap-rejected { border-left: 3px solid var(--muted); }
.approval-card.ap-failed { border-left: 3px solid var(--danger); }
.ap-status { font-size: 12px; white-space: nowrap; }
.ap-status-pending { color: var(--warning); font-weight: 600; }
.ap-status-approved { color: var(--success); }
.ap-status-rejected { color: var(--muted); }
.ap-status-failed { color: var(--danger); font-weight: 600; }
.ap-reason { margin: 6px 0; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: 13px; }

.plan-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); }
.plan-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.plan-row label { display: block; font-size: 12px; color: var(--muted); }
.plan-row input { width: 100%; margin-top: 3px; }

/* ---------- Подпись разработчика и подвал (20.09.2026) ---------- */
.brand-titles { display: flex; flex-direction: column; gap: 1px; }
.brand-titles h1 { margin: 0; }
.brand-credit { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.2; }
.brand-credit a { color: var(--muted); text-decoration: none; }
.brand-credit a:hover { text-decoration: underline; }

.app-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 14px 20px 18px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.app-footer a { color: var(--muted); }

/* ---------- Окно «что нового» ---------- */
.updates-modal { align-items: flex-start; overflow-y: auto; padding: 30px 16px; }
.updates-modal[hidden] { display: none; }
.updates-modal-box {
  width: min(680px, 100%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.24);
  padding: 18px 22px 20px;
}
.up-body { max-height: 60vh; overflow-y: auto; }
.up-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.up-item:last-child { border-bottom: none; }
.up-item h3 { margin: 0 0 2px; font-size: 15px; }
.up-item ul { margin: 8px 0 0; padding-left: 20px; }
.up-item li { margin-bottom: 6px; line-height: 1.5; }

/* ---------- Уведомления о заявках (20.09.2026) ----------
   Висят справа снизу, пока заявку никто не взял. Крестик убирает уведомление только у того,
   кто нажал, — у остальных оно остаётся.

   ИСПРАВЛЕНО 21.09.2026 по замечанию владельца: «когда открыты уведомления заявок,
   инструкции не видно, плюс перекрываются уведомлениями хвосты строк товаров».
   Стопка висела ПОВЕРХ содержимого и закрывала правый край таблицы товаров и панель
   «Инструкция». Уведомление о новой заявке живёт долго — пока её никто не взял, — поэтому
   «поверх» здесь означает «мешает работать часами», а не «мелькнуло и исчезло».

   Решение одно на оба случая: под стопку РЕЗЕРВИРУЕТСЯ место справа (--notice-gutter,
   ширину считает app.js по факту). И таблица, и панель инструкции живут внутри .shell-body,
   поэтому отступ сдвигает и то, и другое — двух разных заплаток не понадобилось.
   Когда уведомлений нет, отступ равен нулю и ничего не меняется. */
.shell-body {
  padding-right: var(--notice-gutter, 0px);
  transition: padding-right 0.15s ease;
}
/* Свёрнутая стопка — маленькая плашка в углу, место справа не занимает. Но нижнюю строку
   таблицы она бы закрыла, поэтому внизу остаётся запас. */
.shell-body.notices-collapsed { padding-bottom: 64px; }

.notice-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  overflow-y: auto;
  /* Тень стопки не должна вылезать за зарезервированную полосу. */
  padding: 2px;
}
.notice-stack:empty { display: none; }

/* Шапка стопки. В разметке она ПОСЛЕДНИЙ элемент, потому что стопка выкладывается
   column-reverse: так новое уведомление появляется снизу, а шапка остаётся сверху. */
.notice-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius);
  background: #1f2a37;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.2);
}
.notice-bar button {
  margin: 0;
  width: auto;
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: none;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.notice-bar button:hover { background: rgba(255, 255, 255, 0.14); }
.notice-stack.collapsed { width: auto; }
.notice-stack.collapsed .notice { display: none; }
.notice {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
  padding: 12px 34px 12px 14px;
  font-size: 13px;
}
.notice-order { cursor: pointer; }
.notice-order:hover { border-color: var(--primary); box-shadow: 0 10px 28px rgba(33, 150, 224, 0.22); }
.notice-transfer { border-left-color: var(--warning); cursor: default; }
.notice-head { margin-bottom: 4px; }
.notice-line { margin: 2px 0; color: var(--muted); }
.notice-take { margin: 8px 0 0; font-size: 12px; color: var(--primary-dark); }
.notice-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.notice-close:hover { color: var(--text); }
.notice-actions { display: flex; gap: 8px; margin-top: 10px; }

/* На узком экране резервировать полосу справа нельзя — её там просто нет. Стопка
   растягивается по низу, а место под неё отводится снизу. */
/* На узком экране (планшет, узкое окно) полосу справа взять неоткуда, поэтому стопка там
   всегда свёрнута в маленькую плашку (см. app.js: noticesCollapsedNow). Плашка висит в
   правом нижнем углу поверх содержимого — полностью убрать это нельзя, не отказавшись от
   всплывающих уведомлений вообще. Запас снизу нужен, чтобы хотя бы в конце списка
   последняя строка не пряталась под плашкой. */
@media (max-width: 900px) {
  .shell-body { padding-right: 0 !important; padding-bottom: 0; }
  .shell-body.has-notices { padding-bottom: 72px; }
}
@media (max-width: 640px) {
  .notice-stack { left: 12px; right: 12px; width: auto; max-width: none; }
}

/* ---------- Предложения по работе программы (пункт А4, 20.09.2026) ---------- */
.suggestion-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.suggestion-form textarea { width: 100%; resize: vertical; }
.suggestion-form .uc-actions { border-top: none; padding-top: 0; margin-top: 0; }

.sg-card.sg-new { border-left: 3px solid var(--warning); }
.sg-card.sg-accepted { border-left: 3px solid var(--primary); }
.sg-card.sg-rejected { border-left: 3px solid var(--muted); }
.sg-card.sg-done { border-left: 3px solid var(--success); }
.sg-status { font-size: 12px; white-space: nowrap; }
.sg-status-new { color: var(--warning); font-weight: 600; }
.sg-status-accepted { color: var(--primary-dark); font-weight: 600; }
.sg-status-rejected { color: var(--muted); }
.sg-status-done { color: var(--success); font-weight: 600; }
.sg-text { margin: 6px 0; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: 13px; white-space: pre-wrap; }

/* Переписка. Своё сообщение прижато вправо — так видно, где чья реплика, без подписей. */
.sg-thread { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.sg-msg {
  max-width: 85%;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 13px;
  white-space: pre-wrap;
}
.sg-msg-mine { align-self: flex-end; background: #e7f2fb; }
.sg-msg-decision { border-left: 3px solid var(--primary); font-weight: 500; }
.sg-msg-who { display: block; margin-bottom: 2px; font-size: 11px; color: var(--muted); font-weight: 400; }
.sg-reply { display: flex; gap: 6px; margin-top: 8px; }
.sg-reply input { flex: 1 1 auto; }
/* Непрочитанный ответ. Цвет текста здесь НЕ трогаем: у .orders-badge фон уже красный,
   и красные цифры на красном фоне просто исчезали — поймано на снимке экрана. Отличаем
   тем, что заметно и не мешает: рамка и лёгкое свечение. */
.sg-unread { box-shadow: 0 0 0 2px rgba(209, 59, 59, 0.28); }

/* ---------- База клиентов (пункт А6, 20.09.2026) ---------- */
.clients-toolbar { display: flex; gap: 10px; align-items: center; margin: 10px 0 8px; flex-wrap: wrap; }
.clients-toolbar input { flex: 1 1 320px; min-width: 200px; }

.client-card .uc-title { font-size: 15px; }
.client-line { margin: 3px 0; font-size: 13px; color: var(--muted); }
.client-line b { color: var(--text); font-weight: 600; }
.client-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.client-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg);
  font-size: 12px;
  color: var(--muted);
}
.client-badge-repeat { background: #e7f2fb; color: #137aa8; font-weight: 600; }
.client-badge-req { background: #e9f6ec; color: #2e7d46; font-weight: 600; }
/* Карточка клиента не таблица — по тем же граблям, что и пользователи 20.09: строка кнопок
   не должна зависеть от горизонтальной прокрутки. Поля переносятся сами. */
.client-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 12px; margin: 8px 0; }
.client-fields label { display: block; font-size: 12px; color: var(--muted); }
.client-fields input, .client-fields textarea { width: 100%; margin-top: 3px; box-sizing: border-box; }
.client-history { margin: 8px 0 0; font-size: 13px; }
.client-history table { width: 100%; border-collapse: collapse; }
.client-history td { padding: 3px 6px 3px 0; vertical-align: top; }
.client-history .co-num { white-space: nowrap; font-weight: 600; }

/* ПОРЯДОК НАЛОЖЕНИЯ ОКОН. У всех .modal-overlay один и тот же z-index: 2000, а при равном
   z-index выигрывает тот, кто НИЖЕ в разметке. Окно заявки лежит в разметке ниже остальных,
   поэтому любое окно, открытое ПОВЕРХ него, оказывалось под ним: видно, а кнопки не
   нажимаются. Поймано дважды живым кликом — сначала на «Подтянуть из базы», потом на
   переспросе при отправке счёта. Поэтому порядок задан явно:
       окно заявки            2000 (общее правило)
       «Подтянуть из базы»    2100
       переспрос и ввод       2200 — он открывается поверх ЛЮБОГО из них
   Добавляя новое окно, поставьте ему место в этом списке, а не надейтесь на порядок тегов. */
#client-pull-modal { z-index: 2100; }
#confirm-modal { z-index: 2200; }
.modal-box.modal-wide { max-width: 640px; }
.cpl-fields { max-height: 52vh; overflow-y: auto; margin: 6px 0 16px; }
.cpl-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13px;
}
.cpl-row + .cpl-row { margin-top: 2px; }
.cpl-row-replace { background: #fdf3e7; }
.cpl-row-same { opacity: 0.6; }
.cpl-row input[type="checkbox"] { margin-top: 3px; }
.cpl-label { font-weight: 600; display: block; }
.cpl-val { display: block; color: var(--muted); }
.cpl-was { display: block; color: #b26a12; }
/* «совпадает — менять нечего» — это не предупреждение, и оранжевым гореть не должно:
   тревожный цвет надо беречь для настоящего расхождения. */
.cpl-row-same .cpl-was { color: var(--muted); }
/* Кнопка, выглядящая ссылкой: номер заявки в истории клиента. Именно кнопка, а не <a>:
   переход внутри программы, адрес страницы при этом не меняется. */
.linklike {
  margin: 0; padding: 0; width: auto;
  background: none; border: none;
  color: var(--primary-dark, #137aa8);
  font: inherit; text-decoration: underline; cursor: pointer;
}
.linklike:hover { color: var(--text); }

/* ---------- Отправка счёта покупателю (пункт Б1, 21.09.2026) ---------- */
.inv-send { margin-top: 10px; }
.inv-send-btn { margin: 0; width: auto; max-width: 100%; white-space: normal; text-align: left; }
.inv-sent {
  margin: 0 0 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #e9f6ec;
  color: #2e7d46;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Разделы каталога (задача «Структура сайта», 21.09.2026) ---------- */
/* Фильтр по разделу переехал в общую строку поиска и фильтров (.list-toolbar, 21.09.2026). */
.col-section { font-size: 12px; color: var(--muted); max-width: 240px; }
.col-nosection { color: var(--warning); font-weight: 600; }
/* Точка «основной раздел не задан»: товар в каталоге виден (есть привязка), но адрес его
   страницы сайт выбирает сам. Метка тихая — таких карточек в старом каталоге много. */
.col-noprimary { color: var(--warning); font-weight: 700; cursor: help; }

.sections-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); }
.sections-current { margin: 0 0 8px; font-size: 13px; }
.sections-current.is-empty { color: var(--warning); font-weight: 600; }
/* С новой строки: иначе «Показывать также в…» слипается с названием основного
   раздела в одну кашу — поймано на снимке экрана. */
.sections-extra { display: block; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.sections-box .uc-actions { border-top: none; padding-top: 0; margin-top: 0; }

/* Дерево разделов в окне выбора. Вложенность — отступом, а не значками: так виднее путь. */
#sections-modal { z-index: 2150; }
#sm-search { width: 100%; box-sizing: border-box; margin: 4px 0 10px; }
.sm-tree { max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; padding: 6px; }
/* Строка = название + два столбца фиксированной ширины. Ширины заданы жёстко и совпадают
   с шапкой, поэтому переключатели стоят ровно под своими подписями при любой длине названия. */
.sm-head,
.sm-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 13px; }
.sm-head { border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; }
.sm-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* Отступы = собственные отступы строки (6) ПЛЮС отступ самого дерева (6). Без этого
     столбцы «основной»/«также» стоят на 6 точек левее переключателей — заметно глазом
     и поймано измерением: сравниваются левые края ячеек шапки и первой строки. */
  padding: 4px 12px;
  margin: 0;
}
.sm-row:hover { background: var(--bg); }
.sm-row.is-primary { background: #eef6fd; }
.sm-name { flex: 1 1 auto; min-width: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-id { color: var(--muted); font-size: 11px; }
/* 72px, а не 64: подпись «ОСНОВНОЙ» в шапке шире 64 и растягивала ячейку — столбцы
   разъезжались на 3 точки (поймано измерением левых краёв шапки и строки). min-width: 0
   здесь обязателен: без него flex-basis не держит ширину, если содержимое шире. */
.sm-cell { flex: 0 0 72px; min-width: 0; text-align: center; }
.sm-cell input { margin: 0; cursor: pointer; }
.sm-empty { padding: 10px; color: var(--muted); font-size: 13px; }
.sm-actions { align-items: center; }
.sm-spacer { flex: 1 1 auto; }

/* ---------- Кнопка «К списку товаров» в шапке (21.09.2026) ----------
   Раньше маленькая серая стрелка «← К списку» стояла на КАЖДОМ экране — шесть одинаковых
   кнопок, и ни одной заметной. Теперь она одна, крупная и цветная, и видна только тогда,
   когда открыт не список. */
.back-top {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  font-size: 15px;
  font-weight: 700;
  padding: 9px 18px;
  white-space: nowrap;
}
.back-top:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.back-top[hidden] { display: none; }

/* ---------- Поиск и фильтры одной строкой над списком (21.09.2026) ----------
   Были в шапке программы: поиск во всю ширину, под ним «Все бренды» во всю ширину, а фильтр
   по разделу — отдельной строчкой уже над таблицей. Три строки на одно и то же действие.
   Теперь одна строка: поиск занимает всё свободное место, фильтры — фиксированной ширины. */
.list-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.list-toolbar input, .list-toolbar select { margin-bottom: 0; height: 40px; }
/* ОСНОВА (flex-basis) НАМЕРЕННО МАЛЕНЬКАЯ. При flex-wrap браузер решает, переносить ли
   элемент, по основе, а не по min-width: с основой 280+210+300 строка на ноутбуке 1280
   разрывалась — «Все разделы» уезжали вниз (поймано измерением, а не на глаз). Теперь сумма
   основ 520 точек, и строка помещается даже когда слева стоит блок заявок. Свободное место
   делится по коэффициентам роста: поиску — больше всех, разделам — больше, чем брендам,
   потому что названия разделов длинные. */
.lt-search { flex: 3 1 200px; min-width: 180px; }
.lt-filter { flex: 1 1 150px; min-width: 140px; }
.lt-filter-wide { flex: 1.6 1 170px; min-width: 150px; }

/* ---------- «Посмотреть на сайте» (21.09.2026) ----------
   Была серой ссылкой рядом со стрелкой «К списку» и терялась. Этой кнопкой проверяют
   результат работы — она должна быть заметной. */
.open-site {
  display: inline-block;
  background: #eaf2fe;
  color: var(--primary-dark);
  border: 1px solid #bcd8fb;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.open-site:hover { background: #d9e8fd; border-color: var(--primary); }
.open-site[hidden] { display: none; }

/* ---------- Ширины колонок списка товаров (21.09.2026) ----------
   Было: все десять колонок делили ширину поровну, и название товара ломалось на три строки
   («Насос Verdon ES / 100M 15,5 / …»), а дата занимала столько же места, сколько название.
   Теперь главное — название и раздел — получает место, а служебные колонки сжаты.

   Липкую шапку таблицы пробовал и убрал: .table-scroll из-за overflow становится собственным
   контейнером прокрутки, и строка заголовков повисала посреди таблицы. Поймано снимком. */
/* Раскладку колонок считает браузер (table-layout: auto) — она лучше подстраивается под
   реальные названия, чем любые проценты. Наша задача — подсказать ему, что важно:
   название не сжимать, дату не ломать, длинный путь раздела ограничить. */
.col-name { min-width: 190px; font-weight: 600; }
.col-brand, .col-code { font-size: 13px; }
.col-section { max-width: 230px; overflow-wrap: break-word; }
.col-flag { white-space: nowrap; }
.col-when { white-space: nowrap; font-size: 13px; color: var(--muted); }
/* Заголовки НЕ переносим: «БРЕНД» в узкой колонке ломался по буквам, столбиком.
   Длинные подписи вместо этого сокращены в разметке. */
table.products th { white-space: nowrap; }
.badge { white-space: nowrap; }

/* ---------- Узкая колонка товаров: прячем второстепенные столбцы (21.09.2026) ----------
   Правило проекта, набитое трижды: РЯД ДЕЙСТВИЙ НЕ ДОЛЖЕН ЗАВИСЕТЬ ОТ ГОРИЗОНТАЛЬНОЙ
   ПРОКРУТКИ. На ноутбуке 1280 слева стоит блок заявок, товарам остаётся около 760 точек,
   и последний столбец с кнопкой («Удалить черновик») уезжал за край таблицы.

   Меряем ШИРИНУ КОЛОНКИ, а не окна: колонку сужают соседи — блок заявок, полоса уведомлений,
   панель «Инструкция», — и media-запрос по окну здесь бесполезен (это уже ловилось на
   плитках сводки). Если браузер не понимает контейнерные запросы, останется прежнее
   поведение с прокруткой — хуже не станет. */
.products-column { container-type: inline-size; }

/* 23.09.2026: добавилась «Цена» — поэтому «Изменён» прячется раньше, а на самой узкой колонке
   прячется и «Опубликовано» (всё это видно в плитках и в самой карточке). */
@container (max-width: 1040px) {
  table.products .col-brand, table.products .col-code, table.products .col-modified { display: none; }
}
/* 24.09.2026: добавилось «Наличие». Столбец «Активен» прячем раньше — неактивный товар и так
   помечен у названия («не на сайте»). */
@container (max-width: 1180px) {
  table.products .col-active { display: none; }
}
.off-flag { display: inline-block; font-size: 11px; font-weight: 700; color: #6b7280; background: #f3f4f6; border-radius: 4px; padding: 0 5px; white-space: nowrap; vertical-align: 1px; }
@container (max-width: 820px) {
  table.products .col-published { display: none; }
  table.products .col-section { max-width: 170px; }
}

/* Кнопка с обводкой — для действий, которые надо видеть, но которые не «главные»:
   «Выбрать разделы» серой ghost-кнопкой читалась как подпись, а не как кнопка. */
button.outline {
  background: var(--surface);
  color: var(--primary-dark);
  border: 1px solid #bcd8fb;
  font-weight: 600;
}
button.outline:hover { background: #eaf2fe; border-color: var(--primary); }

/* ---------- Подпись и печать для счетов (21.09.2026) ---------- */
.signature-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
/* Просвечивающий «клетчатый» фон: сразу видно, что у скана прозрачный фон, а не белый. */
.signature-preview {
  width: 240px; min-height: 200px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  background: repeating-linear-gradient(45deg, #fff 0 10px, #f1f4f8 10px 20px);
}
.signature-preview img { max-width: 100%; max-height: 200px; display: block; }
.signature-preview img[hidden], .signature-preview .hint[hidden] { display: none; }
.signature-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 360px; }
.outline-file { display: inline-block; margin: 0; cursor: pointer; }
.outline-file .btn-like {
  display: inline-block; padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: 14px;
  background: var(--surface); color: var(--primary-dark); border: 1px solid #bcd8fb;
}
.outline-file:hover .btn-like { background: #eaf2fe; border-color: var(--primary); }
#signature-block[hidden] { display: none; }

/* Договор поставки в окне заявки (21.09.2026) — отделён от счёта тонкой линией. */
.ctr-block { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }

/* ---------- Длинный список: бегунок, «Наверх», закреплённая строка поиска (22.09.2026) ----------
   Жалоба владельца: «список длинный и нет ни бегунка, ни кнопки вверх; панель с поиском
   и фильтрами не должна прятаться при перелистывании».
   Бегунок на самом деле был, но в Windows 11 Chrome и Edge рисуют «плавающую» полосу:
   тонкую и исчезающую, пока мышь не поднесёшь к краю. Своё оформление полосы прокрутки
   отключает это поведение — полоса становится постоянной и широкой, её видно и за неё
   удобно тянуть. */
html { scrollbar-gutter: stable; }
html::-webkit-scrollbar { width: 14px; height: 14px; }
html::-webkit-scrollbar-track { background: #eef0f3; }
html::-webkit-scrollbar-thumb {
  background: #b5bcc7;
  border-radius: 8px;
  border: 3px solid #eef0f3;
  min-height: 60px;
}
html::-webkit-scrollbar-thumb:hover { background: #8d96a3; }
/* Внутренние прокручиваемые области — тоже с видимой полосой, но поуже. */
.orders-list::-webkit-scrollbar, .st-canvas::-webkit-scrollbar { width: 10px; height: 10px; }
.orders-list::-webkit-scrollbar-thumb, .st-canvas::-webkit-scrollbar-thumb { background: #c3c9d2; border-radius: 6px; }
.orders-list::-webkit-scrollbar-track, .st-canvas::-webkit-scrollbar-track { background: #f3f4f6; }

/* Строка поиска и фильтров прилипает под шапкой программы. Фон непрозрачный и тень —
   иначе под ней «просвечивают» проезжающие строки таблицы. */
.list-toolbar {
  position: sticky;
  top: var(--topbar-h, 64px);
  z-index: 6;
  background: var(--bg);
  padding: 10px 0;
  margin: -10px 0 2px;
}
.list-toolbar.stuck { box-shadow: 0 6px 10px -8px rgba(16, 24, 40, 0.35); }
.lt-count { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* Кнопка «Наверх» живёт в самой закреплённой строке поиска, справа. Плавающая круглая кнопка
   в углу экрана столкнулась бы со стопкой уведомлений — угол уже занят ими. */
.to-top {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.to-top:hover { background: var(--primary-dark); }
.to-top[hidden] { display: none; }

/* ======================================================================================
   22.09.2026 — «Структура сайта», «Сотрудники», закрытие заявки, режим «только просмотр»
   ====================================================================================== */

/* Кнопка «Структура сайта» в шапке — заметная, но не спорит с «+ Новый товар». */
.structure-btn {
  background: #eef6fd;
  color: var(--primary-dark);
  border: 1px solid #bcd8fb;
  font-weight: 700;
}
.structure-btn:hover { background: #dcecfb; border-color: var(--primary); }
.structure-btn[hidden] { display: none; }

#structure-view { max-width: none; }
.st-head { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.st-title { flex: 1 1 360px; min-width: 0; }
.st-title h2 { font-size: 22px; margin-bottom: 4px; }
.st-title .hint { margin: 0; max-width: 720px; }
.st-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.st-stat {
  min-width: 104px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-stat b { font-size: 22px; line-height: 1.1; }
.st-stat span { font-size: 12px; color: var(--muted); }
.st-stat-top b, .st-stat-all b, .st-stat-cards b { color: var(--primary-dark); }
.st-stat-warn { background: #fff8e6; border-color: #f0d99b; }
.st-stat-warn b { color: var(--warning); }
.st-stat-bad { background: #fdf0ef; border-color: #f2c4bf; }
.st-stat-bad b { color: var(--danger); }
.st-stat-ok b { color: var(--success); }

.st-toolbar {
  position: sticky;
  top: var(--topbar-h, 64px);
  z-index: 6;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
  background: var(--bg);
}
.st-toolbar input[type="search"] { flex: 1 1 280px; min-width: 200px; margin: 0; height: 40px; }
.st-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); white-space: nowrap; margin: 0; }
.st-check input { margin: 0; width: auto; }
.st-zoom { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.st-zoom button { padding: 6px 12px; font-size: 16px; font-weight: 700; }
.st-zoom span { font-size: 13px; min-width: 44px; text-align: center; color: var(--muted); }
#st-found { white-space: nowrap; }

.st-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.lg-pub { background: #1a8754; }
.lg-draft { background: #f59e0b; }
.lg-off { background: #b0b7c3; }
.lg-hidden-sec { border-radius: 3px; border: 2px dashed #9aa3af; background: #f3f4f6; }
.lg-empty { border-radius: 3px; background: repeating-linear-gradient(45deg, #fff, #fff 3px, #f1d7d3 3px, #f1d7d3 6px); border: 1px solid #e6b8b1; }

/* Холст: своя прокрутка в обе стороны, высота — до низа окна. */
.st-canvas {
  position: relative;
  overflow: auto;
  height: calc(100vh - var(--topbar-h, 64px) - 150px);
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(circle, #dfe4ea 1px, transparent 1.2px) 0 0 / 22px 22px,
    #fbfcfd;
  cursor: grab;
}
.st-canvas.st-dragging { cursor: grabbing; user-select: none; }
.st-sizer { position: relative; }
.st-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; padding: 20px; box-sizing: content-box; }
.st-links { position: absolute; left: 20px; top: 20px; overflow: visible; pointer-events: none; }
#st-nodes { position: absolute; left: 20px; top: 20px; }

.st-node {
  position: absolute;
  width: 260px;
  box-sizing: border-box;
  border-radius: 12px;
  cursor: default;
  transition: box-shadow 0.12s, transform 0.12s;
}

/* Корень */
.st-root {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #1f2430, #34405a);
  color: #fff;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.25);
}
.st-root-logo { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; }
.st-root-name { font-size: 16px; font-weight: 800; }
.st-root .st-sec-meta { color: #cfd6e3; }

/* Раздел */
.st-sec {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid #dde2e8;
  border-left: 6px solid var(--c);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.06);
  overflow: hidden;
}
.st-sec:hover { box-shadow: 0 6px 16px rgba(16, 24, 40, 0.14); }
.st-sec-main { flex: 1 1 auto; min-width: 0; padding: 8px 6px 7px 4px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.st-sec-main:not([data-toggle]) { cursor: default; }
.st-sec-name { font-weight: 700; font-size: 13.5px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.st-sec-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-toggle {
  flex: 0 0 30px;
  border: none;
  border-radius: 0;
  background: color-mix(in srgb, var(--c) 10%, #fff);
  color: var(--c);
  font-size: 20px;
  font-weight: 800;
  padding: 0;
  cursor: pointer;
}
.st-toggle:hover { background: color-mix(in srgb, var(--c) 20%, #fff); }
.st-toggle-none { cursor: default; background: #fafbfc; }
.st-more-btn {
  flex: 0 0 28px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #8b95a3;
  font-size: 18px;
  font-weight: 800;
  padding: 0;
  cursor: pointer;
}
.st-more-btn:hover { background: #eef0f3; color: var(--text); }
.st-tag { font-size: 10px; font-weight: 700; color: #6b7280; background: #eef0f3; border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
.st-sec-hidden { border-style: dashed; border-left-style: solid; background: #f7f8fa; }
.st-sec-hidden .st-sec-name { color: #6b7280; }
.st-sec-empty { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #fdf3f1 6px, #fdf3f1 12px); }
.st-outside { border-left-color: #c0392b; background: #fdf3f1; }
.st-outside .st-sec-name { color: #a93226; }

/* Полоска состава ветки: зелёная — на сайте, жёлтая — в работе, серая — снято. */
.st-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: #eef0f3; margin-top: 2px; }
.st-bar i { display: block; height: 100%; }
.st-bar .b-pub { background: #1a8754; }
.st-bar .b-draft { background: #f59e0b; }
.st-bar .b-off { background: #b0b7c3; }
.st-bar-empty { background: #f1d7d3; }

/* Карточка товара */
.st-prod {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid #e3e7ec;
  border-radius: 17px;
  font-size: 12.5px;
  cursor: pointer;
}
.st-prod:hover { border-color: var(--c); box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12); transform: translateX(2px); }
.st-dot { flex: 0 0 9px; height: 9px; border-radius: 50%; background: #1a8754; }
.st-draft .st-dot { background: #f59e0b; }
.st-off .st-dot { background: #b0b7c3; }
.st-off .st-prod-name { color: #7b8492; }
.st-prod-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-morenode {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--c) 55%, #fff);
  border-radius: 15px;
  color: var(--c);
  font-size: 12px;
  font-weight: 700;
  background: color-mix(in srgb, var(--c) 6%, #fff);
  cursor: pointer;
}
.st-morenode:hover { background: color-mix(in srgb, var(--c) 14%, #fff); }

/* Найденное поиском */
.st-hit { outline: 3px solid #f59e0b; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.18); }

/* Меню раздела */
.st-menu {
  position: fixed;
  z-index: 70;
  width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(16, 24, 40, 0.22);
  padding: 6px;
}
.st-menu[hidden] { display: none; }
.st-menu-title { padding: 8px 10px 8px; font-weight: 700; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.st-menu-title span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.st-mi {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.st-mi:hover { background: #eef4fb; }
.st-mi-danger { color: var(--danger); }
.st-mi-danger:hover { background: #fdf0ef; }
.st-mi-off { color: #9aa3af; cursor: not-allowed; font-size: 13px; }
.st-mi-off:hover { background: none; }

/* Предпросмотр из схемы: кнопки над карточкой */
.pv-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.pv-actions[hidden] { display: none; }
#pv-edit { font-size: 15px; padding: 10px 18px; }

/* ---------- Сотрудники ---------- */
.team-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.team-head h2 { margin-bottom: 4px; }
.team-head .hint { margin: 0 0 12px; }
#team-search { max-width: 280px; margin: 0; }
.team-plan { margin: 6px 0 16px; background: #f8fafc; }
.team-plan-title { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.team-plan .plan-row { align-items: end; margin-bottom: 0; }
.team-plan .plan-row button { height: 38px; }
.team-list { display: flex; flex-direction: column; gap: 8px; }
.team-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.team-card.open { box-shadow: 0 6px 18px rgba(16, 24, 40, 0.1); border-color: #c9d6e6; }
.team-disabled { opacity: 0.72; background: #f7f7f8; }
.tc-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 150px 18px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.tc-row:hover { background: #f7fafd; }
.tc-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  background: #64748b;
}
.tc-ava.role-admin { background: #1f2430; }
.tc-ava.role-head { background: #8b5cf6; }
.tc-ava.role-manager { background: var(--primary); }
.tc-ava.role-employee { background: #0ea5a4; }
.tc-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tc-who b { font-size: 15px; }
.tc-who .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-role { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: #eef0f3; color: #4b5563; }
.tc-role.role-admin { background: #e5e7eb; color: #1f2430; }
.tc-role.role-head { background: #efe9fe; color: #6d28d9; }
.tc-role.role-manager { background: #e6f2fc; color: var(--primary-dark); }
.tc-role.role-employee { background: #e3f6f5; color: #0f766e; }
.tc-off { font-size: 11px; font-weight: 700; color: var(--danger); background: #fdf0ef; border-radius: 4px; padding: 1px 6px; }
.tc-plan { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.tc-plan em { font-style: normal; color: #6d28d9; font-weight: 700; }
.tc-plan-bar { height: 7px; border-radius: 4px; background: #eef0f3; overflow: hidden; }
.tc-plan-bar i { display: block; height: 100%; background: var(--primary); border-radius: 4px; }
.tc-plan-bar i.ok { background: var(--success); }
.tc-chevron { font-size: 22px; color: #9aa3af; transition: transform 0.15s; }
.team-card.open .tc-chevron { transform: rotate(90deg); }
.tc-body { display: none; padding: 4px 16px 14px; border-top: 1px solid var(--border); }
.team-card.open .tc-body { display: block; }
.tc-body .uc-grid { margin-top: 12px; }
.ur-head { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 8px; }
.ur-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.ur-group { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: #fbfcfd; }
.ur-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: #55606e; margin-bottom: 4px; }
.ur-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); padding: 4px 0; margin: 0; cursor: pointer; }
.ur-item em { font-style: normal; font-size: 11px; font-weight: 700; color: #6d28d9; background: #efe9fe; border-radius: 4px; padding: 0 5px; }
.switch { position: relative; flex: 0 0 34px; height: 20px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 10px; background: #cfd5dd; transition: background 0.15s; }
.switch i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: left 0.15s; }
.switch input:checked + i { background: var(--success); }
.switch input:checked + i::after { left: 16px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + i { opacity: 0.55; }
.switch input:focus-visible + i { outline: 2px solid var(--primary); outline-offset: 2px; }
.new-user-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; align-items: end; }
.new-user-form label { display: block; font-size: 12px; color: var(--muted); margin: 0; }
.new-user-form input, .new-user-form select { width: 100%; margin: 3px 0 0; }
.new-user-form button { height: 38px; }
.new-user-form[hidden] { display: none; }
@media (max-width: 760px) {
  .tc-row { grid-template-columns: 42px minmax(0, 1fr) 18px; }
  .tc-role, .tc-plan { display: none; }
}

/* ---------- Закрытие заявки ---------- */
.close-block { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfd; }
.close-block h3 { margin: 0 0 6px; }
.close-review { background: #fff8e6; border-color: #f0d99b; }
.close-closed { background: #eaf7f0; border-color: #b8e0ca; }
.close-returned { background: #fdf0ef; border: 1px solid #f2c4bf; color: #a93226; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.cl-result { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0; }
.cl-result label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; color: var(--text); }
.cl-result input { width: auto; margin: 0; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; }
.cl-grid label, .close-block > label, .cl-refused label { display: block; font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.cl-grid input, .cl-grid select, .close-block textarea { width: 100%; margin-top: 3px; }
.cl-done[hidden], .cl-refused[hidden] { display: none; }
.close-facts { border-collapse: collapse; margin: 6px 0; font-size: 14px; }
.close-facts td { padding: 3px 14px 3px 0; }
.close-facts td:first-child { color: var(--muted); }
.oc-review { color: var(--warning); }
.o-tab-count-hot { background: #f59e0b !important; color: #fff !important; }
.o-tab[hidden] { display: none; }

/* ---------- Сотрудник без доступа к заявкам: список товаров на всю ширину ---------- */
.list-columns.no-orders { grid-template-columns: minmax(0, 1fr); }
.orders-block[hidden] { display: none; }

/* Шапка в две строки (22.09.2026): сверху логотип, главные действия и кто вошёл; снизу — меню. */
.topbar { padding-bottom: 6px; row-gap: 6px; }
.topbar > .topbar-actions { flex: 1 1 auto; justify-content: flex-start; padding-left: 14px; }
.topbar > .topbar-nav {
  flex: 1 0 100%;
  order: 10;
  border-left: none;
  border-top: 1px solid var(--border);
  padding: 5px 0 0;
  margin: 0;
  gap: 2px;
}

.uc-grid input, .uc-grid select, .plan-row input, .cl-grid input, .cl-grid select { margin-bottom: 0; }
.tc-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- Предпросмотр: лента миниатюр переключает главное фото (23.09.2026) ---------- */
.pv-thumb-btn { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; line-height: 0; }
.pv-thumb-btn:hover { border-color: #bcd8fb; }
.pv-thumb-btn.active { border-color: var(--primary); }
.pv-thumb-btn .pv-photo-thumb { display: block; }
.pv-img-failed { opacity: 0.35; }

/* ---------- Переключатель вида «Список / Плитки» (23.09.2026) ---------- */
.view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); overflow: hidden; flex: 0 0 auto; }
.vs-btn { border: none; border-radius: 0; background: none; padding: 0 12px; height: 38px; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.vs-btn + .vs-btn { border-left: 1px solid var(--border); }
.vs-btn.active { background: #e6f2fc; color: var(--primary-dark); font-weight: 700; }
.table-scroll[hidden] { display: none; }

.col-price { white-space: nowrap; text-align: right; font-size: 13.5px; }
table.products th.col-price { text-align: right; }

/* Плитки товаров */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.products-grid[hidden] { display: none; }
.p-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.12s, border-color 0.12s, transform 0.12s;
}
.p-tile:hover { border-color: var(--primary); box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12); transform: translateY(-2px); }
.p-tile-off { background: #fafafb; }
.p-tile-off .p-tile-photo img { opacity: 0.55; }
.p-tile-photo { aspect-ratio: 1 / 1; background: #f6f7f9; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); }
.p-tile-photo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.p-tile-nophoto { color: #9aa3af; font-size: 12px; }
.p-tile-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.p-tile-name { font-weight: 800; font-size: 14px; line-height: 1.25; color: var(--text); }
.p-tile-price { font-size: 15px; color: var(--primary-dark); }
.p-tile-meta { color: #4b5563; }
.p-tile-sec { color: var(--muted); font-size: 12px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.p-tile-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.p-on { color: var(--success); font-weight: 700; }
.p-off { color: #9aa3af; font-weight: 700; }

/* ---------- Структура: миникарточки, «глаз», кликабельная сводка (23.09.2026) ---------- */
button.st-stat { cursor: pointer; text-align: left; font: inherit; color: inherit; }
button.st-stat:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(16, 24, 40, 0.1); transform: translateY(-1px); }
.st-view .vs-btn { height: 36px; }
.st-eye {
  flex: 0 0 28px;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: 15px;
  cursor: pointer;
  opacity: 0.75;
}
.st-eye:hover { background: #eef0f3; opacity: 1; }
.st-eye-off { color: #9aa3af; font-size: 17px; }
.st-grid {
  background: color-mix(in srgb, var(--c) 5%, #fff);
  border: 1px dashed color-mix(in srgb, var(--c) 45%, #fff);
  border-radius: 14px;
  padding: 10px;
  box-sizing: border-box;
  cursor: default;
}
.st-grid-tiles { display: grid; grid-template-columns: repeat(4, var(--tw)); grid-auto-rows: var(--th); gap: 10px; }
.st-tile {
  background: var(--surface);
  border: 1px solid #e3e7ec;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.12s, transform 0.12s, border-color 0.12s;
}
.st-tile:hover { border-color: var(--c); box-shadow: 0 6px 14px rgba(16, 24, 40, 0.14); transform: translateY(-2px); }
.st-tile-photo { position: relative; height: 128px; background: #f6f7f9; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #eef0f3; }
.st-tile-photo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.st-tile-photo .st-dot { position: absolute; top: 7px; left: 7px; box-shadow: 0 0 0 2px #fff; }
.st-tile-nophoto { color: #9aa3af; font-size: 11px; }
.st-tile-name { font-weight: 800; font-size: 12px; line-height: 1.22; padding: 6px 8px 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.st-tile-price { font-size: 12.5px; font-weight: 700; color: var(--primary-dark); padding: 0 8px 6px; margin-top: auto; }
.st-noprice { font-weight: 400; color: #9aa3af; }
.st-off .st-tile-photo img { opacity: 0.5; }
.st-grid-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  height: 30px;
  border: 1px dashed color-mix(in srgb, var(--c) 55%, #fff);
  border-radius: 15px;
  background: #fff;
  color: var(--c);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* «⌂ Главная» (23.09.2026): рядом с «Назад», тёмная — чтобы не спорить с синими кнопками. */
.home-btn {
  background: #1f2430;
  color: #fff;
  border: 1px solid #1f2430;
  font-size: 15px;
  font-weight: 700;
  padding: 9px 16px;
  white-space: nowrap;
}
.home-btn:hover { background: #34405a; border-color: #34405a; }
.home-btn[hidden] { display: none; }

/* ---------- Наличие отдельно от цены; код производителя (24.09.2026) ---------- */
.col-avail { white-space: nowrap; }
.avail { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.avail-in_stock { background: #eaf7f0; color: var(--success); }
.avail-in_transit { background: #e6f2fc; color: var(--primary-dark); }
.avail-on_order { background: #f3f4f6; color: #6b7280; }
.code-flag { display: inline-block; font-size: 11px; font-weight: 700; color: #916a00; background: #fff3cd; border: 1px solid #f0d99b; border-radius: 4px; padding: 0 5px; white-space: nowrap; vertical-align: 1px; }
.code-warning { margin: 4px 0 6px; padding: 8px 10px; background: #fff8e6; border: 1px solid #f0d99b; border-radius: 8px; color: #916a00; font-size: 13px; }
.code-warning[hidden] { display: none; }
input.field-warn { border-color: #e0b84f; background: #fffdf5; }

/* ---------- Склад (24.09.2026) ---------- */
#stock-view { max-width: 1500px; margin: 0 auto; }
/* ---------- Экран «Склад» (переложен 24.09.2026 по замечанию владельца) ---------- */
.stock-head { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.stock-title { flex: 1 1 420px; min-width: 0; }
.stock-title h2 { margin: 0 0 4px; }
.stock-source { margin: 0; font-size: 13px; color: var(--muted); }
.stock-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stock-actions [hidden] { display: none; }
.primary-file { display: inline-block; background: var(--primary); color: #fff; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 8px; cursor: pointer; margin: 0; white-space: nowrap; }
.primary-file:hover { background: var(--primary-dark); }
#btn-moves { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
#moves-count { position: static; background: #c98a00; }
.stock-warn { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: #fff8e6; border: 1px solid #f0d58a; color: #6b4e00; font-size: 13.5px; }
.stock-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }

/* Склады вкладками и поиск — две строки, каждая на всю ширину: ничего не сжимается. */
.stock-filterbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.stock-wh-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stock-wh-row[hidden] { display: none; }
.stock-wh-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.wh-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.wh-tabs[hidden] { display: none; }
.wh-tab {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.wh-tab:hover { border-color: var(--primary); }
.wh-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.wh-tab-n { font-weight: 400; opacity: .75; margin-left: 4px; }
.wh-select { width: auto; min-width: 220px; margin: 0; padding: 6px 10px; }
.wh-select[hidden] { display: none; }
#btn-wh-list { margin-left: auto; }
.stock-search-row { display: flex; align-items: center; gap: 14px; }
.stock-search-row input { flex: 1 1 auto; margin: 0; }
.stock-count { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* Таблица: 8 столбцов с заданной шириной — товар сайта и товар 1С получают место поровну. */
/* Узкое окно: таблица не сжимается меньше 1000 точек, а прокручивается внутри рамки. */
table.products.stock-table { table-layout: fixed; width: max(100%, 1000px); min-width: 0; }
.stock-table col.c-site { width: 27%; }
.stock-table col.c-1c { width: 23%; }
.stock-table col.c-qty { width: 10%; }
.stock-table col.c-price { width: 9.5%; }
.stock-table col.c-avail { width: 8.5%; }
.stock-table col.c-link { width: 8%; }
.stock-table col.c-act { width: 94px; }
.stock-table th { vertical-align: bottom; }
.stock-table th .th-sub { font-weight: 400; text-transform: none; letter-spacing: 0; }
.stock-table td { font-size: 13px; vertical-align: top; overflow-wrap: anywhere; }
.stock-table .col-num { text-align: right; white-space: nowrap; }
.stock-table code { background: #eef0f3; border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.st-name { font-weight: 700; line-height: 1.3; }
.st-name1c { line-height: 1.3; }
.st-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--muted); }
.stock-table .wh-line { text-align: right; }
.stock-table td.col-act { text-align: right; }
.stock-howto { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.stock-howto summary { cursor: pointer; color: var(--primary); }
.stock-howto p { margin: 8px 0; }
.wh-table-full { width: 100%; }
.wh-table-full th { text-align: left; font-size: 12px; color: var(--muted); padding: 4px 14px 6px 0; border-bottom: 1px solid var(--border); }
.wh-table-full td { padding: 6px 14px 6px 0; border-bottom: 1px solid var(--border); }
.wh-table-full tr.wh-gone td { color: var(--muted); }
.sell-line.sell-off { opacity: .7; }
.stock-table tr.stock-site { cursor: pointer; }
.stock-table tr.stock-only1c td { background: #fafbfc; color: #4b5563; }
.col-num { text-align: right; white-space: nowrap; }
.qty-pos { color: var(--success); }
.qty-zero { color: #9aa3af; }
.stock-st { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.stock-st-ok { background: #eaf7f0; color: var(--success); }
.stock-st-bad { background: #fdf0ef; color: var(--danger); }
.stock-st-warn { background: #fff8e6; color: #916a00; }
.stock-st-muted { background: #f3f4f6; color: #6b7280; }

/* ---------- Часы, дата и график работы в шапке (24.09.2026) ---------- */
.clock {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  border-left: 1px solid var(--border);
  min-width: 0;
  cursor: default;
}
.clock-face { display: flex; align-items: center; color: var(--text); }
.clock-digital { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; line-height: 1; }
.clock-digital span { font-size: 13px; color: var(--muted); font-weight: 600; }
.clock-analog { display: block; }
.clock-analog .ca-face { fill: var(--surface); stroke: var(--border); stroke-width: 1.2; }
.clock-analog .ca-sec { stroke: var(--danger); }
.clock-analog .ca-pin { fill: var(--danger); }
.clock-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0; }
.clock-date { font-size: 13px; color: var(--text); white-space: nowrap; }
.clock-date::first-letter { text-transform: uppercase; }
.clock-status { font-size: 12px; white-space: nowrap; padding: 1px 6px; border-radius: 9px; align-self: flex-start; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.cs-work { background: #e3f5ea; color: #1d7a45; }
.cs-lunch { background: #fff3d6; color: #8a5a00; }
.cs-soon { background: #e6f0fb; color: #1f5f99; }
.cs-off { background: #eef0f3; color: #5b6572; }
html[data-theme="dark"] .cs-work { background: #173526; color: #7fdcaa; }
html[data-theme="dark"] .cs-lunch { background: #3a2f14; color: #f0cd78; }
html[data-theme="dark"] .cs-soon { background: #172b40; color: #8cc4f5; }
html[data-theme="dark"] .cs-off { background: #242a33; color: #a4adba; }

/* Кто вошёл: Ф.И.О. (фамилия и имя жирным), под ним должность в скобках, под ними —
   кнопка «Выйти» по центру. Настройки переехали в строку меню справа (26.09.2026). */
.topbar-account { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-left: 12px; border-left: 1px solid var(--border); }
.acc-name { font-size: 14px; color: var(--text); white-space: nowrap; line-height: 1.2; }
.acc-name b { font-weight: 700; }
.acc-pos { font-size: 12px; color: var(--muted); white-space: nowrap; line-height: 1.2; }
.acc-logout { margin-top: 3px; padding: 4px 18px; font-size: 13px; }
.prefs-btn { white-space: nowrap; }

@media (max-width: 1180px) {
  .clock-status { max-width: 220px; }
}
@media (max-width: 900px) {
  .clock-status { display: none; }
}

/* ---------- Окно настроек ---------- */
.prefs-box {
  background: var(--surface);
  border-radius: 10px;
  padding: 18px 22px;
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.prefs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 10px 0 14px; }
.pref-group { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 10px; margin: 0; min-width: 0; }
.pref-group legend { font-weight: 600; padding: 0 4px; font-size: 14px; }
.pref-opt { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: 14px; }
.pref-opt input { width: auto; margin: 0; }
.pref-sample-digital { font-variant-numeric: tabular-nums; }
.prefs-schedule { border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 8px; }
.prefs-schedule h3 { font-size: 16px; margin-bottom: 8px; }
.prefs-schedule label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.prefs-schedule label input { display: block; margin-top: 3px; width: 100%; }
.sched-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }

/* Крупнее текст — для всей программы; компактный список — меньше отступы в таблице. */
html.font-large body { zoom: 1.1; }
html.density-compact table.products td { padding-top: 3px; padding-bottom: 3px; }
html.density-compact table.products td img { max-height: 32px; }

/* ---------- Название программы в шапке и девиз (25.09.2026) ---------- */
/* «Карточки товаров» в заголовке заменены на название программы: так же, как на belst.by —
   первая часть фирменным синим, вторая тёмная. */
/* Размер подобран измерением: «BelstCRM» по длине совпадает со строкой подписи под ним
   (просьба владельца 26.09.2026). Менять текст подписи — перепроверить размер. */
.topbar h1.brand-name, .brand-name { font-size: 39px; border-left: none; padding-left: 0; font-weight: 800; letter-spacing: -0.5px; line-height: 1.05; margin: 0; }
.bn-belst { color: var(--primary); }
.bn-crm { color: var(--text); }
.motto {
  flex: 1 1 auto;
  margin: 0 12px;
  padding: 6px 14px;
  text-align: center;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  display: flex;
  flex-direction: column;
}
.motto span:last-child { color: var(--primary); }
@media (max-width: 1180px) {
  .motto { font-size: 15px; padding: 4px 8px; margin: 0 6px; }
}
@media (max-width: 900px) {
  .motto { display: none; }
}

/* Спрятанные столбцы списка — личная настройка каждого сотрудника. */
table.products.hide-price .col-price,
table.products.hide-avail .col-avail,
table.products.hide-brand .col-brand,
table.products.hide-code .col-code,
table.products.hide-section .col-section,
table.products.hide-active .col-active,
table.products.hide-draft .col-draft,
table.products.hide-modified .col-modified,
table.products.hide-published .col-published { display: none; }

.prefs-cols { margin-bottom: 14px; }
.prefs-cols .hint { margin: 0 0 6px; }
.cols-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 12px; }

/* Название и девиз на входе — то же, что в шапке, по центру карточки. */
.auth-card .auth-name { text-align: center; margin: 0 0 6px; }
.auth-card .auth-motto { display: flex; flex: 0 0 auto; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; margin: 0 0 18px; padding: 8px 4px; }

/* ---------- Персонал: вакансии, отклики, кандидаты (23.09.2026) ---------- */
.hr-toolbar { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.hr-toolbar input[type="search"] { margin: 0; max-width: 420px; }
.hr-list { display: flex; flex-direction: column; gap: 12px; }
.hr-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; background: var(--surface); }
.hr-card.hr-blocked { border-color: #e6b8b2; background: #fdf4f3; }
html[data-theme="dark"] .hr-card.hr-blocked { background: #2b1f1f; border-color: #5a2d2a; }
.hr-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.hr-title { font-size: 16px; margin-right: 8px; }
.hr-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.hr-counts { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); }
.hr-counts .hr-fresh { color: var(--primary); font-weight: 600; }
.hr-contacts { margin: 6px 0; font-size: 14px; }
.hr-warn { margin: 6px 0; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
.hr-warn.warn { background: #fff7e0; border-left: 3px solid var(--warning); }
.hr-warn.bad { background: #fdecea; border-left: 3px solid var(--danger); }
html[data-theme="dark"] .hr-warn.warn { background: #3a2f14; }
html[data-theme="dark"] .hr-warn.bad { background: #3a1f1f; }
.hr-history { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.hr-form { border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin-bottom: 14px; background: var(--surface); }
.hr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 14px; }
.hr-grid label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.hr-grid label.wide { grid-column: 1 / -1; }
.hr-grid label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }
.hr-grid label.check input { width: auto; margin: 0; }
.badge.hr-st-published { background: #e3f5ea; color: #1d7a45; }
.badge.hr-st-draft { background: #eef0f3; color: #5b6572; }
.badge.hr-st-paused { background: #fff3d6; color: #8a5a00; }
.badge.hr-st-closed { background: #fdecea; color: #a63328; }
.badge.hr-ap-new { background: #e6f0fb; color: #1f5f99; }
.badge.hr-ap-in_work { background: #eef0f3; color: #5b6572; }
.badge.hr-ap-invited { background: #e3f5ea; color: #1d7a45; }
.badge.hr-ap-rejected { background: #fdecea; color: #a63328; }
.badge.hr-ap-reserve { background: #fff3d6; color: #8a5a00; }
.badge.hr-ap-hired { background: #d8efff; color: #14567f; }

/* ---------- Предупреждение о служебной информации (30.09.2026) ---------- */
.confidential {
  margin: 18px auto 0;
  padding: 10px 18px;
  max-width: 1100px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}
.auth-confidential { border-top: none; border-radius: 8px; background: var(--bg); margin-top: 14px; font-size: 12px; }

/* ---------- Календарь по нажатию на часы (30.09.2026) ---------- */
.clock { cursor: pointer; }
.clock-calendar {
  position: absolute;
  top: 74px;
  right: 180px;
  z-index: 40;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 12px 14px;
}
.cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.cal-head .cal-title { flex: 1; text-align: center; font-size: 15px; }
.cal-head button { padding: 2px 8px; }
#cal-find { margin: 0 0 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.cal-day {
  border: 1px solid transparent; border-radius: 6px; padding: 5px 0; font-size: 13px;
  background: none; cursor: pointer; color: var(--text);
}
.cal-day:hover { border-color: var(--primary); }
.cal-other { opacity: 0.35; }
.cal-work { background: #eef6ee; }
.cal-short { background: #fff3d6; }
.cal-weekend { background: #eef0f3; color: #5b6572; }
.cal-holiday { background: #fdecea; color: #a63328; }
.cal-today { outline: 2px solid var(--primary); font-weight: 700; }
.cal-picked { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal-info { margin: 8px 0 4px; font-size: 13px; min-height: 18px; }
html[data-theme="dark"] .cal-work { background: #1b2a22; }
html[data-theme="dark"] .cal-short { background: #342c16; }
html[data-theme="dark"] .cal-weekend { background: #242a33; color: #a4adba; }
html[data-theme="dark"] .cal-holiday { background: #3a1f1f; color: #f0a79b; }
@media (max-width: 900px) { .clock-calendar { right: 12px; } }

/* ---------- Склады (30.09.2026) ---------- */
.wh-line { font-size: 11px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.col-act { width: 1%; white-space: nowrap; }

.wh-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }

.sell-lines { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.sell-line { display: flex; align-items: center; gap: 10px; }
.sell-line .sell-wh { flex: 1 1 auto; font-weight: 600; }
.sell-line input { width: 110px; }
.sell-order { display: block; margin: 8px 0; font-size: 13px; color: var(--muted); }
.sell-order input { width: 100%; }
.moves-list { margin: 10px 0; max-height: 50vh; overflow: auto; }

/* Остатки по складам в карточке товара — служебные сведения. */
.card-stock {
  margin: 10px 0 14px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.card-stock-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.serv-mark {
  font-size: 11px; padding: 1px 7px; border-radius: 10px;
  background: #eef0f3; color: #5b6572; border: 1px solid var(--border);
}
html[data-theme="dark"] .serv-mark { background: #242a33; color: #a4adba; }
.wh-table { width: auto; min-width: 260px; border-collapse: collapse; font-size: 14px; }
.wh-table td { padding: 3px 14px 3px 0; }
.wh-table tfoot td { border-top: 1px solid var(--border); }

/* ---------- Файлы в отклике на вакансию (30.09.2026) ---------- */
.hr-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.hr-file {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); text-decoration: none; color: var(--text); font-size: 14px;
}
.hr-file:hover { border-color: var(--primary); }
.hr-file-add {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 10px; border: 1px dashed var(--border); border-radius: 8px;
  font-size: 14px; color: var(--muted);
}
.hr-file-add:hover { border-color: var(--primary); color: var(--primary); }
.hr-files .hr-warn { flex: 1 1 100%; margin: 4px 0 0; }

/* ======================================================================
   Меню: две половины и цифры (решение владельца 24.09.2026)
   ====================================================================== */
.topbar-nav .nav-group { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.topbar-nav .nav-right { margin-left: auto; }
.nav-count {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: #e8f1fa; color: #1f5c7a;
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
}
.nav-count[hidden] { display: none; }
.nav-count.hot { background: #fff1d6; color: #8a5a00; }
#btn-catalog { white-space: nowrap; }
.help-toc a[hidden], .help-content section[hidden] { display: none; }

/* ======================================================================
   Главная страница — в стиле belst.by (24.09.2026)
   ====================================================================== */
.home { max-width: 1320px; margin: 0 auto; }
.home-hero {
  position: relative; overflow: hidden;
  display: flex; gap: 24px; align-items: stretch; justify-content: space-between; flex-wrap: wrap;
  padding: 34px 38px 76px; border-radius: 18px; color: #fff;
  background:
    radial-gradient(900px 300px at 85% -10%, rgba(120, 214, 255, .45), transparent 60%),
    radial-gradient(600px 260px at 10% 120%, rgba(33, 150, 224, .55), transparent 70%),
    linear-gradient(125deg, #0a2f4f 0%, #0f4c80 38%, #1678b8 70%, #22a6e6 100%);
  box-shadow: 0 18px 40px rgba(15, 76, 128, .22);
}
.home-hero::before {
  content: ""; position: absolute; right: -60px; top: -80px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.home-hero-text { position: relative; flex: 1 1 520px; min-width: 0; z-index: 1; }
.home-greet { margin: 0 0 6px; font-size: 17px; opacity: .92; }
.home-title { font-size: 54px; line-height: 1; margin: 0 0 14px; letter-spacing: -1px; font-weight: 800; }
.home-title .bn-belst { color: #fff; }
.home-title .bn-crm { color: #8fdcff; }
.home-lead { font-size: 17px; line-height: 1.5; max-width: 720px; margin: 0 0 14px; opacity: .95; }
.home-motto { margin: 0; font-weight: 700; font-size: 16px; color: #d6f2ff; }
.home-motto span { white-space: nowrap; }
.home-today {
  position: relative; z-index: 1; flex: 0 0 220px; align-self: flex-start;
  padding: 16px 20px; border-radius: 14px; text-align: center;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(4px);
}
.ht-day { font-size: 56px; font-weight: 800; line-height: 1; }
.ht-month { font-size: 16px; margin-top: 4px; }
.ht-wd { font-size: 14px; opacity: .85; text-transform: capitalize; }
.ht-status { margin-top: 10px; font-size: 12.5px; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.18); }
.home-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; }
.home-wave .w1 { fill: rgba(255, 255, 255, .18); }
.home-wave .w2 { fill: var(--bg); }

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; margin-top: 8px; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: 1fr; } .home-title { font-size: 42px; } }
@media (max-width: 700px) { .home-hero { padding: 24px 20px 70px; } .home-today { flex-basis: 100%; } }
.home-h { font-size: 17px; margin: 18px 0 10px; color: #0f4c80; }
.home-h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.home-h-row .home-h { margin-bottom: 10px; }

.home-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.home-sec {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; position: relative;
  padding: 14px 14px 14px 12px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.home-sec:hover { transform: translateY(-2px); border-color: #9fd3f5; box-shadow: 0 10px 22px rgba(22, 120, 184, .14); }
.hs-icon {
  flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(135deg, #e6f5ff, #cdeaff);
}
.hs-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hs-body b { font-size: 15px; color: #0f4c80; }
.hs-body span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.hs-count { margin-left: auto; text-align: right; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; align-items: flex-end; max-width: 80px; line-height: 1.2; }
.hs-count b { font-size: 20px; color: #1678b8; }
.hs-count.hot b { color: var(--danger); }

.home-posts { display: flex; flex-direction: column; gap: 12px; }
.home-post {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px;
  border-left: 5px solid #9fd3f5;
}
.home-post.kind-news { border-left-color: #22a6e6; }
.home-post.important { border-left-color: #e0902b; background: linear-gradient(90deg, #fff8ec, var(--surface) 40%); }
.home-post h4 { margin: 6px 0; font-size: 16px; }
.hp-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.hp-kind-badge { background: #e8f1fa; color: #1f5c7a; border-radius: 999px; padding: 1px 9px; font-weight: 700; }
.hp-imp-badge { background: #ffe7c2; color: #8a5a00; border-radius: 999px; padding: 1px 9px; font-weight: 700; }
.hp-body { font-size: 14px; line-height: 1.5; }
.hp-actions { display: flex; gap: 6px; margin-top: 8px; }
.home-empty { padding: 18px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); background: var(--surface); }

.home-side { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
.home-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.home-card[hidden] { display: none; }
.home-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; color: #0f4c80; }
.link-small { background: none; border: none; color: var(--primary); font-size: 12px; cursor: pointer; padding: 0; }
.hb-row, .hh-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.hb-row:last-of-type, .hh-row:last-child { border-bottom: none; }
.hb-date, .hh-date { flex: 0 0 90px; color: #1678b8; }
.hh-name { flex: 1; }
.hb-row.today { background: linear-gradient(90deg, #fff3d6, transparent); border-radius: 8px; padding-left: 6px; }
.hb-wish { margin: 8px 0 0; font-size: 13px; color: #8a5a00; }
.home-bday { background: linear-gradient(180deg, #fffaf0, var(--surface) 60%); }
.hn-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px dashed var(--border); padding: 7px 0; cursor: pointer; font-size: 13px; color: var(--text); }
.hn-row span { color: var(--muted); }
.hn-row.unread b::before { content: "● "; color: #e0902b; }
.hn-row.hn-soon b { color: #8a5a00; }
.ha-row { font-size: 13px; padding: 3px 0; }
#home-approvals-card #btn-approvals { margin-top: 8px; }
.hp-kind { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px; }
.hp-imp { margin-left: auto; }

html[data-theme="dark"] .home-sec, html[data-theme="dark"] .home-post, html[data-theme="dark"] .home-card { background: #1c222b; }
html[data-theme="dark"] .hs-icon { background: linear-gradient(135deg, #16324a, #1d4466); }
html[data-theme="dark"] .hs-body b, html[data-theme="dark"] .home-h, html[data-theme="dark"] .home-card-h { color: #8fcfff; }
html[data-theme="dark"] .home-bday { background: #1c222b; }
html[data-theme="dark"] .home-post.important { background: linear-gradient(90deg, #3a2e17, #1c222b 40%); }
html[data-theme="dark"] .nav-count { background: #1d3a52; color: #bfe3ff; }

/* ======================================================================
   Журнал: строка ведёт к действию (24.09.2026)
   ====================================================================== */
tr.j-go { cursor: pointer; }
tr.j-go:hover td { background: #f0f8ff; }
tr.j-go:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.j-text { min-width: 280px; }
.j-state { display: inline-block; margin-top: 3px; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; }
.j-deleted { background: #fdecea; color: var(--danger); }
.j-changed { background: #fff3d6; color: #8a5a00; }
.j-arrow { color: var(--primary); font-size: 12.5px; white-space: nowrap; }
html[data-theme="dark"] tr.j-go:hover td { background: #1b2b3a; }

/* ======================================================================
   Брони (24.09.2026)
   ====================================================================== */
.res-line { font-size: 11px; color: #8a5a00; margin-top: 2px; }
.stock-table td.col-act { display: table-cell; }
.stock-table td.col-act button { display: block; width: 100%; margin: 0 0 4px; }
.stock-table col.c-act { width: 104px; }
.rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 8px 0; }
.rv-grid label { font-size: 13px; color: var(--muted); }
.rv-grid input { width: 100%; margin-top: 2px; }
.rv-wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .rv-grid { grid-template-columns: 1fr; } }
.modal-box.modal-xwide { width: min(1100px, 96vw); max-height: 90vh; overflow: auto; }
.rl-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.rl-head h3 { margin: 0; }
.rl-head input { flex: 1 1 260px; margin: 0; }
.rl-list { display: flex; flex-direction: column; gap: 10px; }
.rl-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--surface); }
.rl-card.soon { border-color: #f0c35a; background: linear-gradient(90deg, #fff8e6, var(--surface) 50%); }
.rl-card.st-sold, .rl-card.st-released, .rl-card.st-expired { opacity: .8; }
.rl-card.flash { box-shadow: 0 0 0 3px rgba(33, 150, 224, .45); }
.rl-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rl-name { flex: 1 1 280px; }
.rl-who { font-size: 13.5px; margin: 4px 0; }
.rl-hist summary { cursor: pointer; font-size: 12.5px; color: var(--primary); }
.rl-hist ul { margin: 4px 0 0 16px; padding: 0; font-size: 12.5px; }
.rl-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.rl-actions label { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.rl-actions input { margin: 0; }
.rl-actions input[type="text"] { flex: 1 1 220px; }
html[data-theme="dark"] .rl-card.soon { background: linear-gradient(90deg, #3a2e17, #1c222b 50%); }
.hs-count { max-width: 120px; min-width: 88px; flex: 0 0 auto; }
@media (max-width: 900px) { .home-today { display: none; } }
.home-important { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.home-important[hidden] { display: none; }
.hi-row {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 12px 18px; border-radius: 14px; border: 1px solid #f0c35a;
  background: linear-gradient(90deg, #fff4dc, #fffaf0);
}
.hi-badge { font-size: 11.5px; font-weight: 700; color: #8a5a00; background: #ffe7c2; border-radius: 999px; padding: 1px 9px; }
.hi-row b { font-size: 16px; }
.hi-body { flex-basis: 100%; font-size: 14px; }
html[data-theme="dark"] .hi-row { background: linear-gradient(90deg, #3a2e17, #2a2416); border-color: #7a5a1a; }

/* ТЕСТОВАЯ КОПИЯ (24.09.2026) — нельзя спутать с рабочей программой */
.test-copy-bar {
  background: repeating-linear-gradient(135deg, #ea580c 0 18px, #f97316 18px 36px);
  color: #fff; font-weight: 700; text-align: center; padding: 7px 16px; font-size: 14px;
  letter-spacing: .02em; text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
body.test-copy .topbar { border-top: 5px solid #f97316; }
.test-copy-tag {
  position: fixed; left: 12px; bottom: 12px; z-index: 9999; pointer-events: none;
  background: #ea580c; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}