:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --sidebar: #1f2937;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #374151;
  --nav-top: #fcd34d; /* светло-жёлтый: заметен на тёмном меню */
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;
  --accent-soft: #eff6ff;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #181b21;
    --sidebar: #111318;
    --sidebar-text: #aab2c0;
    --sidebar-active: #252a33;
    --text: #e6e8eb;
    --muted: #8b93a1;
    --border: #2a2f38;
    --accent: #60a5fa;
    --accent-soft: #1b2638;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

.app { display: flex; min-height: 100vh; }

/* ---------- Боковое меню ---------- */
.sidebar {
  width: var(--sidebar-width, 260px);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--sidebar);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.brand-title { color: #fff; font-weight: 600; }
.brand-sub { font-size: 12px; opacity: 0.7; }

.nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }

.nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.nav a:hover { background: var(--sidebar-active); color: #fff; }
.nav a.active { background: var(--sidebar-active); color: #fff; box-shadow: inset 3px 0 0 #3b82f6; }
.nav svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Раскрывающаяся группа */
.nav-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.nav-toggle:hover { background: var(--sidebar-active); color: #fff; }
.nav-toggle.active { background: var(--sidebar-active); color: #fff; box-shadow: inset 3px 0 0 #3b82f6; }
.nav-toggle span { flex: 1; }
/* Название группы — ссылка на страницу раздела, стрелка — отдельная кнопка */
.nav-toggle-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
/* Ссылка внутри строки группы — без своих отступов и фона (их даёт сама строка) */
.nav .nav-toggle .nav-toggle-link,
.nav .nav-toggle .nav-toggle-link:hover { padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: inherit; line-height: inherit; color: inherit; }
.nav-chevron { flex: none; display: grid; place-items: center; margin: -6px -6px -6px 0; padding: 6px; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; }
.nav-chevron:hover { background: rgba(255, 255, 255, 0.12); }
.nav .chevron { width: 16px; height: 16px; transition: transform 0.2s; }
.nav-group.open > .nav-toggle .chevron { transform: rotate(90deg); }

/* Разделы верхнего уровня (Реестры, Справочники, База знаний, Журнал): крупнее, жирнее, тёплый жёлтый */
.nav .nav-top { color: var(--nav-top); font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
.nav .nav-top:hover,
.nav .nav-top.active { color: var(--nav-top); }
.nav .nav-top svg { width: 22px; height: 22px; }
.nav .nav-top .chevron { width: 20px; height: 20px; stroke-width: 3; }

.nav-sub { display: none; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
.nav-group.open > .nav-sub { display: flex; }

/* Отступ вложенных пунктов растёт с уровнем (--depth) */
.nav-sub a,
.nav-sub .nav-toggle {
  /* Каждый уровень заметно правее предыдущего: 1-й — под текстом раздела, дальше — шаг 34 px */
  padding: 8px 12px 8px calc(22px + var(--depth) * 34px);
  font-size: 14px;
  line-height: 1.3;
}

/* Граница бокового меню: потянуть — изменить ширину, двойной щелчок — вернуть стандартную */
.sidebar-resizer {
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
  width: 8px;
  height: 100vh;
  margin-left: -4px;
  margin-right: -4px;
  cursor: col-resize;
  touch-action: none;
}
.sidebar-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: transparent;
  transition: background 0.15s;
}
.sidebar-resizer:hover::after,
body.sidebar-resizing .sidebar-resizer::after { background: var(--accent); }
body.sidebar-resizing { cursor: col-resize; user-select: none; }

/* Кто работает (для журнала изменений) */
.who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 12px 10px;
  font-size: 11px;
  opacity: 0.85;
}
.who select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 13px;
}
.who select option { color: #111827; }

/* Журнал изменений: результат проверки целостности */
.integrity { font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--bg); color: var(--muted); }
.integrity-ok { background: #f0fdf4; color: #166534; }
.integrity-bad { background: #fef2f2; color: #b91c1c; font-weight: 600; }

/* Низ бокового меню: резервная копия */
.sidebar-footer {
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.backup-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.backup-btn:hover { background: var(--sidebar-active); color: #fff; }
.backup-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.backup-btn small { display: block; font-size: 11px; opacity: 0.7; margin-top: 2px; }
.backup-btn small.backup-stale { color: #fca5a5; opacity: 1; }

/* ---------- Основная область ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.menu-btn {
  display: none;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
}

.breadcrumbs { color: var(--muted); font-size: 14px; }
.breadcrumbs b { color: var(--text); font-weight: 600; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }

.content { padding: 28px 24px; width: 100%; } /* на всю ширину экрана */

.page-header h1 { margin: 0 0 6px; font-size: 24px; }
/* Название раздела и кнопки действий в одну строку */
.page-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 6px; }
.page-title-row h1 { margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.page-actions label.btn { cursor: pointer; }
.page-header p { margin: 0 0 24px; color: var(--muted); }

/* Карточки подразделов */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  color: inherit;
  text-decoration: none;
}

.tile:hover { border-color: var(--accent); }
.tile h3 { margin: 0 0 6px; font-size: 16px; }
.tile p { margin: 0; color: var(--muted); font-size: 14px; }

/* Крупные карточки подразделов: иконка, название, описание, сколько внутри */
.grid.tiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.tiles .tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 170px;
  padding: 22px;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.tiles .tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1); }
.tiles .tile h3 { margin: 4px 0 0; font-size: 19px; }
.tiles .tile p { flex: 1; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft, rgba(37, 99, 235, 0.1)); color: var(--accent); }
.tile-icon svg { width: 26px; height: 26px; }
.tile-stat { align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 600; }
.tile-stat-alert { background: #dc2626; color: #fff; }
a.brand { color: inherit; text-decoration: none; }

/* Пустой раздел */
.empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}

.empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}

.empty-icon svg { width: 28px; height: 28px; }
.empty h3 { margin: 0 0 6px; color: var(--text); font-size: 17px; }
.empty p { margin: 0; }

.backdrop { display: none; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { filter: brightness(1.08); }

/* ---------- Реестр ---------- */
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.toolbar-count { color: var(--muted); font-size: 14px; }
/* «Выгрузить в Excel» — справа в панели над таблицей */
.btn-export { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.btn-export svg { width: 16px; height: 16px; flex: none; }

/* «Похожие уже есть» под полем наименования */
.similar {
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #713f12;
  font-size: 13px;
  font-weight: 400;
}
.similar.similar-exact { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.similar-title { font-weight: 600; margin-bottom: 4px; }
.similar ul { margin: 0; padding: 0; list-style: none; }
.similar li { padding: 2px 0; }
.similar li.exact { font-weight: 600; }
.similar mark { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; }
.similar-id { display: inline-block; min-width: 58px; color: inherit; opacity: 0.6; font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.similar-ctx { opacity: 0.7; }
.similar-more { margin-top: 4px; opacity: 0.8; }

/* Поиск по списку */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto; /* занимает всю ширину панели, кроме счётчика */
  min-width: 200px;
}
.search-box svg {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.search-box input {
  width: 100%;
  padding: 8px 32px 8px 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.search-box input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear {
  position: absolute;
  right: 4px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.search-clear:hover { background: var(--bg); color: var(--text); }
.reg-table td mark { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; }

/* Таблица прокручивается внутри своей рамки (высоту задаёт registry.js по размеру окна),
   поэтому строка заголовков может оставаться на месте */
.table-wrap {
  position: relative;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.reg-table {
  table-layout: fixed;
  border-collapse: collapse;
}

.reg-table th,
.reg-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
 
  vertical-align: top;
}

/* Заголовки столбцов закреплены сверху при прокрутке */
.reg-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--border); /* нижняя граница видна и при прокрутке */
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  cursor: pointer;
  user-select: none;
  /* Узкий столбец — название переносится по словам, строка заголовков становится выше;
     название — по центру столбца и по середине высоты заголовка */
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
  vertical-align: middle;
  line-height: 1.3;
}

.reg-table th:hover { color: var(--text); }
.reg-table th.sorted { color: var(--text); }
.reg-table th + th { border-left: 1px solid var(--border); }

.sort-mark { margin-left: 6px; font-size: 10px; opacity: 0; }
.reg-table th:hover .sort-mark { opacity: 0.35; }
.reg-table th.sorted .sort-mark { opacity: 1; color: var(--accent); }

.resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.resizer:hover,
body.resizing .resizer { background: var(--accent); opacity: 0.4; }
body.resizing { cursor: col-resize; user-select: none; }

/* Перемещение столбцов */
.col-drop-marker {
  position: absolute;
  top: 0; /* top и height задаются при показе — по видимой части прокручиваемой таблицы */
  width: 3px;
  background: var(--accent);
  z-index: 2;
  pointer-events: none;
}
.reg-table th.col-dragging { opacity: 0.45; }
body.col-moving,
body.col-moving * { cursor: grabbing !important; user-select: none; }

.reg-table td { white-space: pre-wrap; }
.reg-table tbody tr[data-id] { cursor: pointer; }
.reg-table tbody tr[data-id]:hover { background: var(--accent-soft); }
.reg-table tbody tr:last-child td { border-bottom: 0; }
.cell-id { font-family: Consolas, "Courier New", monospace; color: var(--muted); }
.empty-row { padding: 32px 12px !important; text-align: center !important; color: var(--muted); }

/* ---------- Модальное окно ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

.modal {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.modal-wide { max-width: 760px; }

/* Рамка окна карточки: задаёт ширину; справа — стенка, которую можно тянуть */
.modal-frame { position: relative; width: 100%; max-width: 560px; }
.modal-frame-wide { max-width: 760px; }
.modal-frame > .modal { max-width: none; }
.modal-overlay-pinned { justify-items: start; }
.modal-resizer {
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: -14px; /* снаружи окна — не мешает полосе прокрутки длинной карточки */
  width: 14px;
  cursor: ew-resize;
  touch-action: none;
}
.modal-resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  width: 6px;
  height: 64px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  opacity: 0.9;
  transition: background 0.15s, opacity 0.15s;
}
.modal-resizer:hover::after,
body.form-resizing .modal-resizer::after { background: var(--accent); opacity: 1; }
body.form-resizing { cursor: ew-resize; user-select: none; }
/* Общая сетка широкой формы: левая колонка = ширина фото, правая — от начала полей справа от фото.
   По ней выравниваются блок фото, характеристики и строка «артикул + ссылка поставщика» */
.modal-wide { --side-col: 220px; --col-gap: 18px; }

.modal-text { margin: 0 0 12px; font-size: 14px; color: var(--muted); }

/* Импорт из Excel */
.toolbar label.btn { cursor: pointer; }
.import-header { margin-bottom: 12px; font-size: 14px; }
.import-preview { margin-bottom: 8px; max-height: 300px; overflow: auto; }
.import-preview .reg-table { width: auto; min-width: 100%; table-layout: auto; }
.import-preview th { cursor: default; white-space: normal; min-width: 200px; }
.import-col { margin-bottom: 6px; }
.import-preview select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 400;
}
.import-summary { display: flex; gap: 24px; margin: 4px 0 10px; font-size: 15px; }
.import-skipped { margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.import-skipped ul { max-height: 160px; overflow: auto; margin: 8px 0 0; padding-left: 20px; }
.modal-text b { color: var(--text); }
.backup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 10px; }
.backup-actions label.btn { cursor: pointer; }
.backup-warning { font-size: 13px; }
.backup-result {
  margin-bottom: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
  font-size: 14px;
}

/* Поле, требующее внимания (например, «Отображать в ПУ: Нет») */
.field .field-danger {
  border-color: #dc2626;
  background: #fef2f2;
  color: #b91c1c;
  font-weight: 600;
}
.field .field-danger:focus { outline-color: #dc2626; }

/* Ссылка на сайт */
/* Поле и кнопка действия справа («Открыть» у ссылки, «+ Новая группа МКО»): кнопка высотой с поле,
   одной ширины у всех — поля в карточке выровнены по правому краю */
.field-action-row { display: flex; gap: 8px; align-items: stretch; }
.field-action-row > input,
.field-action-row > .combo { flex: 1; min-width: 0; }
.btn-field-action {
  flex: none;
  min-width: 170px;
  justify-content: center;
  padding: 0 14px;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.btn-field-action:hover { background: var(--accent); color: #fff; }
.btn-field-action.is-disabled { border-color: var(--border); color: var(--muted); pointer-events: none; }
.cell-link { color: var(--accent); text-decoration: none; }
.cell-link:hover { text-decoration: underline; }

/* Поля, набор которых зависит от подгруппы */
/* Один столбец: слева название характеристики, справа широкое поле выбора — удобно заполнять сверху вниз */
.dyn-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dyn-fields .sub-field {
  display: grid;
  /* названия — в левой колонке (ширина фото), списки — в правой: края совпадают с полями у фото */
  grid-template-columns: var(--side-col, 220px) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--col-gap, 18px);
  row-gap: 4px;
  margin: 0;
}
.dyn-fields .sub-field > span { grid-column: 1; font-weight: 500; }
/* Поля для расчёта, которых нет среди характеристик подгруппы, — отдельным блоком */
.dyn-group { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13px; font-weight: 600; color: var(--accent); }
/* Пометка «расчёт» у характеристики, по которой считаются остатки и стоимость */
.dyn-badge { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-style: normal; font-weight: 600; vertical-align: middle; }
.dyn-fields .sub-field > .combo,
.dyn-fields .sub-field > select:not(.combo-native),
.dyn-fields .sub-field > small { grid-column: 2; }
@media (max-width: 600px) {
  .dyn-fields .sub-field { grid-template-columns: 1fr; }
  .dyn-fields .sub-field > * { grid-column: 1 !important; }
}

/* Фото */
/* Окно фото: щелчок — выбрать/заменить фото, крестик в углу — удалить */
.photo-field { position: relative; width: 180px; height: 180px; }
.photo-preview {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
}
.photo-preview:hover { border-color: var(--accent); }
.photo-img { position: absolute; inset: 0; }
.photo-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: opacity 0.15s, background 0.15s;
}
.photo-overlay svg { width: 28px; height: 28px; }
/* Когда фото есть, подпись «Заменить фото» появляется только при наведении */
.has-photo .photo-overlay { opacity: 0; background: rgba(17, 24, 39, 0.55); color: #fff; }
.has-photo .photo-preview:hover .photo-overlay { opacity: 1; }
.photo-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.65);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.photo-remove:hover { background: #dc2626; }

/* Фото слева, поля колонкой справа на высоту фото */
.form-beside {
  display: grid;
  grid-template-columns: var(--side-col, 220px) minmax(0, 1fr);
  gap: 0 var(--col-gap, 18px);
  align-items: stretch;
  margin-bottom: 14px;
}
.form-beside > .field { margin-bottom: 0; }
/* Фото — квадрат: высота колонки полей справа = ширина фото (--side-col считается в registry.js) */
.form-beside > .field:first-child { display: flex; flex-direction: column; }
.form-beside > .field:first-child .photo-field { flex: none; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.form-beside-col { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.form-beside-col > .field { margin-bottom: 0; }
@media (max-width: 600px) {
  .form-beside { grid-template-columns: 1fr; gap: 14px; }
  .form-beside > .field:first-child .photo-field { max-width: 220px; }
}

/* Несколько полей формы в одну строку */
.form-inline { display: grid; gap: 0 var(--col-gap, 18px); align-items: start; }
.form-inline > .field { min-width: 0; }
@media (max-width: 600px) {
  .form-inline { grid-template-columns: 1fr !important; }
}

.thumb {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.thumb-empty { background: var(--bg); }

/* Код ТМЦ: заглавные буквы и цифры одной высоты */
.cell-id,
.input-code { font-variant-numeric: lining-nums tabular-nums; }

/* ТМЦ, скрытые из списков пользователей */
.reg-table tbody tr.row-hidden td { color: var(--muted); }
.reg-table tbody tr.row-hidden .thumb { opacity: 0.5; }
/* «Отображать в ПУ: Нет» — светло-красная строка */
.reg-table tbody tr.row-off td { background: #fdecec; }
.reg-table tbody tr.row-off:hover td { background: #fbdcdc; }
@media (prefers-color-scheme: dark) {
  .reg-table tbody tr.row-off td { background: rgba(220, 38, 38, 0.14); }
  .reg-table tbody tr.row-off:hover td { background: rgba(220, 38, 38, 0.22); }
}

.modal h2 { margin: 0 0 18px; font-size: 19px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 14px; }
.field > span { font-weight: 600; }
.field i { color: #dc2626; font-style: normal; }
.field small { color: var(--muted); font-size: 12px; }

.field input,
.field select,
.field textarea {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.field input:disabled,
.field select:disabled { background: var(--bg); color: var(--muted); }
/* Поле считается само (lockedWhen): значение видно чётко, но вручную не меняется */
.field input.field-locked { background: var(--bg); font-weight: 600; cursor: default; }
.field input.field-locked:focus { outline: none; border-color: var(--border); }

.form-error {
  margin-bottom: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 14px;
}

/* Поле RGB с палитрой */
.rgb-field { display: flex; gap: 8px; }
.rgb-field input[type="color"] {
  width: 42px;
  height: 40px;
  flex-shrink: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.rgb-field input[name] { flex: 1; min-width: 0; }

/* Выпадающий список с поиском (js/combo.js) */
.combo-native { display: none !important; }
.combo { position: relative; display: flex; min-width: 0; }
.pair-row .combo { flex: 1; }
.field .combo-input {
  flex: 1;
  min-width: 0;
  padding-left: 32px;
  padding-right: 34px;
}
.combo-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}
.combo-tip {
  padding: 6px 10px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.combo-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 32px;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.combo-open .combo-toggle { transform: rotate(180deg); }
.combo-disabled .combo-toggle { cursor: default; opacity: 0.4; }
.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.combo-option {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.combo-option:hover,
.combo-option.active { background: var(--accent-soft); }
.combo-option.selected { font-weight: 600; color: var(--accent); }
.combo-option.combo-empty { color: var(--muted); }
.combo-option mark { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; }
.combo-nothing { padding: 8px 10px; color: var(--muted); font-size: 14px; }

/* Выбор нескольких значений галочками */
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks-long { max-height: 240px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.checks-long .check[hidden] { display: none; }
.checks-search { margin-bottom: 6px; }
.check { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.field .check input { padding: 0; width: 16px; height: 16px; accent-color: var(--accent); }

/* Строки «характеристика + значение» */
.pairs { display: flex; flex-direction: column; gap: 8px; }
.pairs:empty { display: none; }
.pair-row { display: flex; gap: 8px; }
.pair-row select { flex: 1; min-width: 0; }
.pair-remove {
  flex-shrink: 0;
  width: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}
.pair-remove:hover { border-color: #dc2626; color: #dc2626; }
/* Ручка перетаскивания строки (порядок характеристик в наименовании) */
.pair-handle {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 18px;
  cursor: grab;
  user-select: none;
}
.pair-handle:hover { background: var(--bg); color: var(--accent); }
.pair-dragging { opacity: 0.4; }

.btn-small { align-self: flex-start; padding: 6px 12px; font-size: 13px; }

/* Образец цвета в таблице */
.swatch {
  display: inline-block;
  width: 56px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border);
  vertical-align: middle;
}
.swatch-empty {
  background: repeating-linear-gradient(45deg, transparent 0 4px, var(--border) 4px 6px);
}

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* ---------- Мобильная версия ---------- */
/* Стрелка «свернуть / показать меню» — на правой границе меню */
.sidebar-toggle {
  position: fixed;
  top: 18px;
  left: calc(var(--sidebar-width, 260px) - 15px);
  z-index: 30;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--nav-top);
  border-radius: 50%;
  background: var(--sidebar);
  color: var(--nav-top);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.sidebar-toggle:hover { background: var(--nav-top); color: var(--sidebar); }
.sidebar-toggle svg { width: 16px; height: 16px; transition: transform 0.2s; }
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed .sidebar-resizer { display: none; }
body.sidebar-collapsed .sidebar-toggle { left: 10px; }
body.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
body.sidebar-collapsed .topbar { padding-left: 54px; }

@media (max-width: 800px) {
  .sidebar-toggle { display: none; }
  body.sidebar-collapsed .sidebar { display: flex; }
  body.sidebar-collapsed .topbar { padding-left: 16px; }
  .sidebar-resizer,
  .modal-resizer { display: none; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  .sidebar.open { transform: none; }
  .backdrop.open { display: block; position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, 0.4); }
  .menu-btn { display: block; }
  .topbar { padding: 0 16px; }
  .content { padding: 20px 16px; }
}

/* ---------- База знаний ---------- */
.help-btn {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.help-btn:hover { background: var(--accent); color: #fff; }
.page-title-row .help-btn { margin-left: -10px; }
.modal h2 .help-btn { margin-left: 6px; width: 24px; height: 24px; font-size: 13px; }

.kb { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.kb-toc {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.kb-search { width: 100%; margin-bottom: 10px; }
.kb-toc-section { margin: 12px 8px 4px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.kb-toc-list a { display: block; padding: 6px 8px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; }
.kb-toc-list a:hover { background: var(--bg); }
.kb-toc-list a.active { background: var(--accent); color: #fff; }
.kb-empty { color: var(--muted); font-size: 14px; padding: 8px; }

.kb-article { min-width: 0; padding: 24px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.kb-article-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.kb-article-head h2, .kb-drawer-head h2 { margin: 2px 0 4px; font-size: 22px; }
.kb-article-section { font-size: 12px; font-weight: 600; color: var(--accent); }
.kb-article-meta { font-size: 13px; color: var(--muted); }

.kb-body { font-size: 15px; line-height: 1.6; max-width: 860px; }
.kb-body h2 { margin: 26px 0 8px; font-size: 19px; }
.kb-body h3 { margin: 20px 0 6px; font-size: 16px; }
.kb-body p { margin: 8px 0; }
.kb-body ul, .kb-body ol { margin: 8px 0; padding-left: 24px; }
.kb-body li { margin: 4px 0; }
.kb-body a { color: var(--accent); }
.kb-body img { display: block; max-width: 100%; margin: 12px 0 4px; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); cursor: zoom-in; }
.kb-body figure { margin: 14px 0; }
.kb-body figcaption { font-size: 13px; color: var(--muted); }
.kb-body table { border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.kb-body th, .kb-body td { padding: 6px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.kb-body th { background: var(--bg); }
.kb-body kbd { padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--bg); font-family: inherit; font-size: 13px; }
.kb-tip, .kb-warn { margin: 12px 0; padding: 10px 14px; border-radius: 10px; border-left: 4px solid; }
.kb-tip { background: rgba(37, 99, 235, 0.08); border-color: var(--accent); }
.kb-warn { background: rgba(234, 88, 12, 0.1); border-color: #ea580c; }

.kb-schema { overflow-x: auto; margin: 14px 0; padding: 10px; background: var(--bg); border-radius: 12px; }
.kb-schema-svg { display: block; max-width: none; font: 12px system-ui, sans-serif; }
.kb-schema-svg rect { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.kb-schema-svg rect.main { stroke: var(--accent); stroke-width: 2.5; }
.kb-schema-svg a:hover rect { stroke: var(--accent); }
.kb-schema-svg text { fill: var(--text); text-anchor: middle; font-weight: 600; }
.kb-schema-edges path { fill: none; stroke: var(--muted); stroke-width: 1.2; opacity: 0.45; marker-end: url(#kbArrow); }
.kb-schema-svg marker path { fill: var(--muted); }
.kb-schema-svg.hovering .kb-schema-edges path { opacity: 0.1; }
.kb-schema-svg.hovering .kb-schema-edges path.lit { opacity: 1; stroke: var(--accent); stroke-width: 2; }
.kb-schema-legend { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.kb-schema-placeholder { margin: 12px 0; padding: 18px; border: 2px dashed var(--accent); border-radius: 10px; color: var(--accent); text-align: center; font-weight: 600; }

.kb-editor-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; }
.kb-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); position: sticky; top: 0; z-index: 2; }
.kb-toolbar button, .kb-toolbar-file { padding: 5px 10px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer; }
.kb-toolbar button:hover, .kb-toolbar-file:hover { background: var(--surface); border-color: var(--border); }
.kb-toolbar-sep { width: 1px; margin: 2px 4px; background: var(--border); }
.kb-editable { min-height: 360px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; outline: none; max-width: none; }
.kb-editable:focus { border-color: var(--accent); }
.kb-editor-note { font-size: 13px; color: var(--muted); }
.kb-spacer { flex: 1; }
.btn-danger-outline { border-color: #dc2626; color: #dc2626; }
.btn-danger-outline:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* Справка «?» — панель справа поверх карточки */
.kb-drawer-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.25); }
.kb-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(620px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
}
.kb-drawer-head { display: flex; justify-content: space-between; gap: 12px; padding: 18px 22px 10px; border-bottom: 1px solid var(--border); }
.kb-drawer-close { border: 0; background: none; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; }
.kb-drawer-close:hover { color: var(--text); }
.kb-drawer-content { flex: 1; overflow-y: auto; padding: 6px 22px 20px; }
.kb-drawer-open { padding: 12px 22px; border-top: 1px solid var(--border); color: var(--accent); font-size: 14px; text-decoration: none; }
.kb-zoom { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.8); cursor: zoom-out; }
.kb-zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }

@media (max-width: 900px) {
  .kb { grid-template-columns: 1fr; }
  .kb-toc { position: static; max-height: none; }
  .kb-article { padding: 18px; }
  .kb-editor-row { grid-template-columns: 1fr; }
}

/* База знаний: список статей (раздел или весь) и статья во всю ширину */
.kb-list { max-width: 760px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.kb-list .kb-search { width: 100%; margin-bottom: 6px; }
.kb-list-link { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 15px; }
.kb-list-link:hover { background: var(--bg); color: var(--accent); }
.content > #knowledge > .kb-article { max-width: 980px; }

/* Режим «Настроить меню»: пункты перетаскиваются мышью в пределах своего уровня */
.nav-edit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.nav-edit-btn:hover { background: var(--sidebar-active); color: #fff; }
.nav-edit-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-edit-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--nav-top);
  border-radius: 8px;
  color: var(--nav-top);
  font-size: 13px;
}
.nav-edit-bar div { display: flex; gap: 8px; }
.nav-edit-bar button { flex: 1; padding: 6px 8px; border: 1px solid var(--nav-top); border-radius: 6px; background: none; color: var(--nav-top); font: inherit; cursor: pointer; }
.nav-edit-bar button[data-nav-edit="done"] { background: var(--nav-top); color: #1f2937; font-weight: 700; }
.nav-editing [data-nav-item] { cursor: grab; }
.nav-editing a[data-nav-item],
.nav-editing .nav-group > .nav-toggle { outline: 1px dashed rgba(255, 255, 255, 0.18); outline-offset: -2px; }
.nav-editing .nav-dragging { opacity: 0.45; }

/* Статус в отчёте «Пора закупать» */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.badge-buy { background: #dc2626; color: #fff; }
.badge-soon { background: #f59e0b; color: #1f2937; }
.badge-ok { background: #dcfce7; color: #166534; }

/* Флажок со значком (например, «Запрет на перевозку авиа») */
.check-field { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.check-field input { width: 20px; height: 20px; margin: 0; accent-color: #e11d24; flex: none; }
.check-field .no-air { width: 30px; height: 30px; flex: none; }

/* Значок «запрет авиа» в ячейке таблицы и в правом верхнем углу фото */
.cell-icon { display: inline-block; }
.cell-icon .no-air { width: 28px; height: 28px; display: block; }
.thumb-wrap { position: relative; display: inline-block; }
.thumb-badge { position: absolute; top: -6px; right: -6px; line-height: 0; }
.thumb-badge .no-air { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.photo-field { position: relative; }
.photo-badge { position: absolute; top: 8px; right: 8px; z-index: 2; line-height: 0; pointer-events: none; }
.photo-badge .no-air { width: 44px; height: 44px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }
.photo-badge[hidden] { display: none; }
/* Значок занимает правый верхний угол фото — кнопка «удалить фото» уходит под него */
.photo-badge:not([hidden]) + .photo-remove { top: 58px; }

/* Отчёт МКО: ТМЦ группы — строка под строкой; значок «запрет авиа» напротив своего ТМЦ.
   Строки одной высоты (без переноса), полное название — во всплывающей подсказке */
.report-lines { display: flex; flex-direction: column; }
.report-line { height: 28px; display: flex; align-items: center; min-width: 0; }
.report-line-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-line-qty { flex: none; font-weight: 600; white-space: nowrap; }
.report-line .cell-icon .no-air { width: 24px; height: 24px; }

/* Яркое красное предупреждение перед вводом (например, комментарий для клиента и ИМ) */
.warn-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(127, 29, 29, 0.55); }
.warn-box {
  width: min(460px, 100%);
  padding: 26px 24px 20px;
  border: 3px solid #dc2626;
  border-radius: 14px;
  background: #fef2f2;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.warn-icon { width: 54px; height: 54px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: #dc2626; color: #fff; font-size: 32px; font-weight: 800; }
.warn-text { margin: 0 0 18px; color: #991b1b; font-size: 17px; font-weight: 700; line-height: 1.45; }
.warn-actions { display: flex; justify-content: center; gap: 10px; }
.warn-continue { background: #dc2626; border-color: #dc2626; color: #fff; font-weight: 700; }
.warn-continue:hover { background: #b91c1c; border-color: #b91c1c; }

/* ---------- Вид «Карточки» в реестре ---------- */
.view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.view-switch button { padding: 8px 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.view-switch button + button { border-left: 1px solid var(--border); }
.view-switch button.active { background: var(--accent); color: #fff; font-weight: 600; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.card-more { display: block; margin: 18px auto 0; }
.card-empty { color: var(--muted); padding: 24px 0; }

.item-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.12s, border-color 0.12s;
}
.item-card:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1); }
.item-card-off { background: #fdecec; }

.item-card-top { display: grid; grid-template-columns: 42% 1fr; }
.item-card-photo { position: relative; aspect-ratio: 1 / 1; background: var(--bg); display: grid; place-items: center; overflow: hidden; }
.item-card-photo img { width: 100%; height: 100%; object-fit: contain; }
.item-card-nophoto { color: var(--muted); font-size: 13px; }
.item-card-badge { position: absolute; top: 8px; right: 8px; line-height: 0; }
.item-card-badge .no-air { width: 40px; height: 40px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }

.item-card-info { min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.item-card-id { font-family: Consolas, "Courier New", monospace; font-size: 13px; color: var(--muted); }
.item-card-title { margin: 0; font-size: 16px; line-height: 1.3; }
.item-card-attrs { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; }
.item-card-attrs dt { color: var(--muted); }
.item-card-attrs dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

.item-card-bottom { display: grid; grid-template-columns: 1.3fr 1fr; border-top: 1px solid var(--border); }
.item-card-stock { display: grid; grid-template-columns: repeat(3, 1fr); }
.item-card-stock > div { padding: 10px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.item-card-stock > div + div { border-left: 1px solid var(--border); }
.item-card-stock span { font-size: 12px; color: var(--muted); }
.item-card-stock b { font-size: 24px; line-height: 1.1; }
.item-card-stock small { font-size: 11px; color: var(--muted); }
.stock-available { color: #16a34a; }
.stock-available.stock-zero { color: #dc2626; }
.stock-reserve { color: #dc2626; }
.item-card-sale { border-left: 1px solid var(--border); padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.item-card-pack { font-size: 13px; color: var(--muted); }
.item-card-price { display: flex; flex-direction: column; }
.item-card-price span { font-size: 12px; color: var(--muted); }
.item-card-price b { font-size: 20px; color: #16a34a; }
.item-card-price small { font-size: 12px; color: var(--muted); }

@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
  .item-card-bottom { grid-template-columns: 1fr; }
  .item-card-sale { border-left: 0; border-top: 1px solid var(--border); }
}

/* ---------- Доп. фото и видео в карточке (галерея) ---------- */
.gallery-field { display: flex; flex-direction: column; gap: 10px; }
.gallery-items { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-item { position: relative; width: 96px; height: 96px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); overflow: hidden; cursor: zoom-in; display: grid; place-items: center; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-video { font-size: 30px; color: var(--accent); }
.gallery-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 24, 39, 0.65); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.gallery-remove:hover { background: #dc2626; }
.gallery-empty { color: var(--muted); font-size: 13px; }
.gallery-add { align-self: flex-start; cursor: pointer; }

/* ---------- Фото на крупной карточке: стрелки ‹ › при наведении ---------- */
.card-media { position: absolute; inset: 0; display: grid; place-items: center; cursor: zoom-in; }
.card-media-stage { width: 100%; height: 100%; display: grid; place-items: center; }
.card-media-stage img { width: 100%; height: 100%; object-fit: contain; }
.card-media-empty { color: var(--muted); font-size: 13px; }
.card-media-video { color: var(--accent); font-size: 18px; font-weight: 700; }
.card-media-arrow {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.card-media-prev { left: 8px; }
.card-media-next { right: 8px; }
.item-card:hover .card-media-arrow { opacity: 1; }
.card-media-arrow:hover { background: var(--accent); }
.card-media-counter { position: absolute; bottom: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(17, 24, 39, 0.6); color: #fff; font-size: 12px; }
.card-media .item-card-badge { z-index: 2; }

/* ---------- Окно просмотра фото и видео ---------- */
.viewer { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-rows: 1fr auto; background: rgba(10, 12, 16, 0.97); }
.viewer-stage { display: grid; place-items: center; padding: 48px 80px 12px; min-height: 0; }
.viewer-stage img, .viewer-stage video { max-width: 100%; max-height: calc(100vh - 170px); border-radius: 8px; background: #000; }
.viewer-arrow {
  position: absolute;
  top: 50%;
  width: 54px;
  height: 54px;
  margin-top: -27px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.viewer-arrow:hover { background: var(--accent); }
.viewer-prev { left: 18px; }
.viewer-next { right: 18px; }
.viewer-close { position: absolute; top: 12px; right: 16px; border: 0; background: none; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; }
.viewer-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 16px 18px; }
.viewer-counter { color: #cbd5e1; font-size: 14px; }
.viewer-thumbs { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; }
.viewer-thumb { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: #1f2937; overflow: hidden; cursor: pointer; display: grid; place-items: center; color: #fff; }
.viewer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewer-thumb.active { border-color: var(--nav-top, #fcd34d); }
@media (max-width: 600px) {
  .viewer-stage { padding: 48px 8px 8px; }
  .viewer-arrow { width: 42px; height: 42px; margin-top: -21px; font-size: 26px; }
}


/* ---------- Шапка страницы на месте, прокручивается только содержимое ----------
   Название раздела, кнопки, поиск и шапка таблицы видны всегда: прокручивается таблица,
   карточки или текст под ними — на всех страницах ПУ */
.main { height: 100vh; overflow: hidden; }
.topbar { flex: none; }
.content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 16px; }
.page-header { flex: none; }
.page-body { flex: 1; min-height: 0; overflow: auto; }
/* Реестр: панель поиска закреплена, прокручиваются строки таблицы или карточки */
.page-body-registry { display: flex; flex-direction: column; overflow: hidden; }
.page-body-registry > #registry { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#registry > .toolbar { flex: none; }
#registry > .table-wrap { flex: 0 1 auto; min-height: 0; max-height: none !important; }
#registry > .card-view { flex: 1; min-height: 0; overflow: auto; padding: 2px 2px 8px; }

/* Вид «Крупно»: по 3 карточки в ряд, фото — половина карточки, крупнее шрифты */
.card-view-big .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Высота верха = высота квадратного фото: длинный список характеристик не растягивает карточку */
.card-view-big .item-card-top { grid-template-columns: 50% 1fr; aspect-ratio: 2 / 1; min-height: 0; overflow: hidden; }
.card-view-big .item-card-info { overflow: hidden; padding: 12px 14px; }
.card-view-big .item-card-stock > div { padding: 6px 4px; }
.card-view-big .item-card-sale { padding: 6px 12px; gap: 2px; }
.card-view-big .item-card-title { font-size: 18px; }
.card-view-big .item-card-attrs { font-size: 14px; }
.card-view-big .item-card-stock b { font-size: 26px; }
.card-view-big .item-card-price b { font-size: 22px; }
.card-view-big .item-card-badge .no-air { width: 48px; height: 48px; }
@media (max-width: 1400px) { .card-view-big .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .card-view-big .card-grid { grid-template-columns: 1fr; } }
/* «Крупно»: нижняя полоса компактнее, чтобы на экране помещалось 2 ряда */
.card-view-big .item-card-stock > div { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 4px; }
.card-view-big .item-card-stock span { width: 100%; }
.card-view-big .item-card-price { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.card-view-big .item-card-price small { width: 100%; }
/* «Крупно»: характеристики — плашками (значения уже с подписью: «Шир. 1370 мм.»), без колонки названий */
.card-view-big .item-card-attrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.card-view-big .item-card-attrs dt { display: none; }
.card-view-big .item-card-attrs dd { padding: 3px 8px; border-radius: 6px; background: var(--bg); font-size: 13px; font-weight: 600; }

/* ---------- Карточки отчёта «Пора закупать»: ТМЦ группы с остатками ---------- */
.report-card-lines { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.report-card-lines li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.report-card-lines .report-line-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.report-card-lines b { flex: none; font-weight: 600; }
.report-card-air { flex: none; display: inline-flex; width: 16px; height: 16px; }
.report-card-air svg { width: 16px; height: 16px; }
.report-card-more { margin-top: 2px; font-size: 12px; color: var(--muted); }
.item-card-id .badge { margin-left: 6px; vertical-align: middle; }

/* ---------- Глобальный поиск разделов: лупа в шапке, окно поверх страницы ---------- */
.gsearch-btn { margin-left: auto; flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.gsearch-btn svg { width: 22px; height: 22px; }
.gsearch-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gsearch { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(17, 24, 39, 0.45); }
.gsearch[hidden] { display: none; }
.gsearch-box { width: 100%; max-width: 620px; background: var(--surface); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); overflow: hidden; }
.gsearch-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.gsearch-input svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.gsearch-input input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 17px; background: transparent; color: var(--text); }
.gsearch-hint { flex: none; font-size: 12px; color: var(--muted); }
.gsearch-results { max-height: 60vh; overflow-y: auto; padding: 6px; }
.gsearch-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--text); text-decoration: none; }
.gsearch-item b { font-weight: 600; font-size: 15px; }
.gsearch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gsearch-text > span { font-size: 12px; color: var(--muted); }
.gsearch-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--accent); }
.gsearch-icon svg, .gsearch-icon img { width: 30px; height: 30px; }
.gsearch-item.active { background: var(--accent-soft); }
.gsearch-item.active b { color: var(--accent); }
.gsearch-item mark { background: #fde68a; color: inherit; border-radius: 2px; padding: 0 1px; }
.gsearch-empty { margin: 0; padding: 14px 12px; color: var(--muted); font-size: 14px; }
@media (max-width: 600px) { .gsearch { padding-top: 8px; } .gsearch-hint { display: none; } }

/* ---------- Кнопка «Свернуть все разделы меню» — рядом с логотипом, в стиле стрелки сворачивания меню ---------- */
.nav-collapse-all {
  position: absolute;
  top: 18px; /* на одной высоте со стрелкой сворачивания меню */
  right: 26px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--nav-top);
  border-radius: 50%;
  background: var(--sidebar);
  color: var(--nav-top);
  cursor: pointer;
}
.nav-collapse-all:hover { background: var(--nav-top); color: var(--sidebar); }
.nav-collapse-all svg { width: 16px; height: 16px; }
.brand { padding-right: 64px; }
@media (max-width: 800px) { .nav-collapse-all { right: 16px; } }

/* Шапка меню (логотип и кнопки) закреплена: при прокрутке длинного меню остаётся наверху */
.sidebar-head { position: sticky; top: 0; z-index: 5; background: var(--sidebar); }

/* Значки разделов верхнего уровня — крупнее: в меню и на карточках разделов */
.nav a.nav-top > svg, .nav .nav-top .nav-toggle-link > svg, .nav .nav-icon-img { width: 34px; height: 34px; flex-shrink: 0; }
.tile-icon { width: 68px; height: 68px; }
.tile-icon svg, .tile-icon img { width: 48px; height: 48px; }

/* ---------- Права доступа: роли × разделы ---------- */
.acc-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.acc-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.acc-none { background: #fee2e2; color: #991b1b; }
.acc-view { background: #f3f4f6; color: #374151; }
.acc-edit { background: #dbeafe; color: #1e40af; }
.acc-full { background: #dcfce7; color: #166534; }
.acc-inherited { opacity: 0.55; }
.acc-wrap { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.acc-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.acc-table th { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 10px 8px; border-bottom: 1px solid var(--border); font-weight: 600; text-align: center; white-space: nowrap; }
.acc-table th:first-child, .acc-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; min-width: 280px; }
.acc-table th:first-child { z-index: 3; }
.acc-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: center; }
.acc-table td:first-child { padding-left: calc(10px + var(--depth, 0) * 20px); }
.acc-top td { background: #f9fafb; font-weight: 600; }
.acc-top td:first-child { background: #f9fafb; }
.acc-title { display: inline-flex; align-items: center; gap: 8px; }
.acc-icon svg, .acc-icon img { width: 22px; height: 22px; display: block; }
.acc-select { width: 100%; min-width: 150px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.acc-select:hover { border-color: var(--accent); }
.acc-note { margin-top: 12px; font-size: 13px; color: var(--muted); max-width: 900px; }

/* Заголовок раздела в форме записи (formSections) */
.form-section-head { margin: 10px 0 -2px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.form-section-head:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---------- Места отгрузки поставщика с менеджерами (js/ship-points.js) ---------- */
.custom-editor { display: flex; flex-direction: column; gap: 10px; }
.sp-points { display: flex; flex-direction: column; gap: 12px; }
.sp-point { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #f9fafb; display: flex; flex-direction: column; gap: 10px; }
.sp-point-head { display: flex; align-items: baseline; gap: 10px; }
.sp-point-label { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-remove { flex: none; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.sp-remove:hover { border-color: #dc2626; color: #dc2626; }
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.sp-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.sp-field input, .sp-field select { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.sp-house, .sp-comment { grid-column: span 3; }
.sp-managers { display: flex; flex-direction: column; gap: 8px; }
.sp-manager { border: 1px dashed var(--border); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.sp-manager-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.sp-grid-manager { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sp-grid-manager .sp-m-surname, .sp-grid-manager .sp-m-firstName, .sp-grid-manager .sp-m-patronymic { grid-column: span 2; }
.sp-grid-manager .sp-m-email { grid-column: span 2; }
.sp-grid-manager .sp-m-phone { grid-column: span 2; }
.sp-grid-manager .sp-m-ext { grid-column: span 2; }
.sp-grid-manager .sp-m-comment { grid-column: span 6; }
@media (max-width: 700px) { .sp-grid, .sp-grid-manager { grid-template-columns: 1fr; } .sp-grid > *, .sp-grid-manager > * { grid-column: auto !important; } }

.sp-legacy { color: #b45309; font-size: 11px; }
.sp-note { margin: 0; font-size: 12px; color: var(--muted); }
.sp-index { grid-column: span 1; }
.sp-house { grid-column: span 2; }

/* Мессенджеры менеджера поставщика: значок в подписи, кнопка ↗ «написать» */
.sp-m-title { display: inline-flex; align-items: center; gap: 6px; }
.sp-icon { display: inline-flex; width: 18px; height: 18px; }
.sp-icon svg { width: 18px; height: 18px; }
.sp-m-input { display: flex; gap: 4px; }
.sp-m-input input { flex: 1; min-width: 0; }
.sp-open { flex: none; display: grid; place-items: center; width: 32px; border: 1px solid var(--border); border-radius: 8px; color: var(--accent); text-decoration: none; font-weight: 700; }
.sp-open:hover { border-color: var(--accent); background: var(--accent-soft); }
.sp-grid-manager .sp-m-whatsapp, .sp-grid-manager .sp-m-telegram, .sp-grid-manager .sp-m-max { grid-column: span 2; }

/* Статус менеджера поставщика */
.sp-grid-manager .sp-m-status { grid-column: span 2; }
.sp-grid-manager .sp-m-comment { grid-column: span 4; }
.sp-m-input select { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; background: var(--surface); }
.sp-manager-off { opacity: 0.6; background: #fef2f2; }
.sp-manager-off .sp-m-status select { color: #b91c1c; font-weight: 600; }

/* ---------- Позиции закупки (js/purchase-lines.js) ---------- */
.pl-lines { display: flex; flex-direction: column; gap: 8px; }
.pl-line { display: grid; grid-template-columns: 28px minmax(0, 3fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #f9fafb; }
.pl-num { padding-top: 26px; color: var(--muted); font-weight: 600; text-align: center; }
.pl-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.pl-field input, .pl-field select { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); }
.pl-field select:disabled { color: var(--text); opacity: 0.8; }
.pl-sum b { padding: 8px 0; font-size: 14px; color: var(--text); white-space: nowrap; }
.pl-units { color: var(--muted); font-size: 11px; min-height: 13px; }
.pl-remove { margin-top: 24px; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 16px; cursor: pointer; }
.pl-remove:hover { border-color: #dc2626; color: #dc2626; }
.pl-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-total { font-size: 15px; }
.row-draft td { color: var(--muted); }
@media (max-width: 900px) { .pl-line { grid-template-columns: 1fr 1fr; } .pl-num { display: none; } .pl-item { grid-column: span 2; } .pl-remove { margin-top: 0; } }

/* Позиция закупки: ТМЦ — на всю ширину карточки, под ним артикул, «в чём», кол-во, цена, сумма */
.pl-line {
  grid-template-columns: 28px repeat(5, minmax(0, 1fr)) 30px;
  grid-template-areas:
    "num item item item item item remove"
    ".   art  per  qty  price sum  .";
}
.pl-num { grid-area: num; }
.pl-item { grid-area: item; }
.pl-article { grid-area: art; }
.pl-per { grid-area: per; }
.pl-qty { grid-area: qty; }
.pl-price { grid-area: price; }
.pl-sum { grid-area: sum; }
.pl-remove { grid-area: remove; }
@media (max-width: 900px) {
  .pl-line { grid-template-columns: 1fr 1fr; grid-template-areas: "item item" "art per" "qty price" "sum remove"; }
}

/* ---------- Карточка закупки: № слева, статус справа; отгрузки и получение ---------- */
.modal-title-status { display: flex; align-items: center; gap: 10px; }
.form-status-wrap { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.form-status-note { font-size: 12px; font-weight: 600; color: #92400e; }
.form-status { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pst-draft { background: #f3f4f6; color: #4b5563; }
.pst-ordered { background: #dbeafe; color: #1e40af; }
.pst-paid { background: #fef3c7; color: #92400e; }
.pst-shipped-part { background: #ffedd5; color: #9a3412; }
.pst-shipped { background: #ede9fe; color: #5b21b6; }
.pst-received-part { background: #d1fae5; color: #065f46; }
.pst-received { background: #bbf7d0; color: #14532d; }
.pst-paid-note { color: #92400e; }
.pl-line {
  grid-template-areas:
    "num item item item item item remove"
    ".   art  per  qty  price sum  ."
    ".   ship ship ship recv recv .";
}
.pl-ship { grid-area: ship; }
.pl-recv { grid-area: recv; }
.pl-line-received { background: #f0fdf4; border-color: #bbf7d0; }
.pl-recv-row { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-recv-row input, .pl-recv-all input { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; }
.pl-sub-head { margin-top: 6px; }
.pl-shipments { display: flex; flex-direction: column; gap: 10px; }
.pl-after-order { display: flex; flex-direction: column; gap: inherit; }
/* Черновик: отгрузок и приходов ещё быть не может — разделы скрыты до статуса «Заказано» */
form[data-form-status="pst-draft"] .pl-after-order { display: none; }
/* Черновик: вся карточка закупки — серая, в цвет значка «Черновик» */
form.form-purchase[data-form-status="pst-draft"],
form.form-purchase[data-form-status="pst-draft"] .form-sticky { background: #d1d5db; }
form.form-purchase[data-form-status="pst-draft"] [data-form-status].pst-draft { box-shadow: 0 0 0 1.5px #fff; }
/* Заказано: карточка светло-жёлтая; приходов ещё нет — раздел «Получение ТМЦ» скрыт до первой отгрузки */
.pl-after-ship { display: flex; flex-direction: column; gap: inherit; }
form.form-purchase[data-form-status="pst-ordered"],
form.form-purchase[data-form-status="pst-ordered"] .form-sticky { background: #fef3c7; }
form.form-purchase[data-form-status="pst-ordered"] .pl-after-ship { display: none; }
.pl-shipment { border: 1px solid #ddd6fe; border-radius: 10px; padding: 10px 12px; background: #faf5ff; display: flex; flex-direction: column; gap: 8px; }
.pl-shipment-head { display: flex; align-items: center; gap: 10px; }
.pl-shipment-count { flex: 1; color: var(--muted); font-size: 12px; }
.pl-shipment-head .pl-remove { margin-top: 0; }
.pl-shipment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
.pl-shipment-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-recv-all { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) {
  .pl-line { grid-template-areas: "item item" "art per" "qty price" "sum remove" "ship ship" "recv recv"; }
  .pl-shipment-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Окно закупки: статус крупнее, шапка компактная и закреплённая ---------- */
.form-status { padding: 6px 16px; font-size: 16px; font-weight: 700; }
.pst-draft { background: #d1d5db; color: #1f2937; }
.form-status-note { font-size: 13px; }
.form-sticky { position: sticky; top: -24px; z-index: 6; margin: -24px -24px 12px; padding: 16px 24px 10px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 6px 12px -10px rgba(0, 0, 0, 0.35); border-radius: 12px 12px 0 0; }
.form-compact .form-sticky h2 { margin: 0 0 8px; }
.form-compact .form-sticky .form-section-head { display: none; }
.form-compact .form-sticky .field { gap: 3px; margin: 0; }
.form-compact .form-sticky .field > span { font-size: 12px; }
.form-compact .form-sticky .field > small { display: none; }
.form-compact .form-sticky .form-inline { margin-bottom: 8px; gap: 10px; }
.form-compact .form-sticky input, .form-compact .form-sticky select, .form-compact .form-sticky .combo-input { padding-top: 6px; padding-bottom: 6px; }
.form-compact .form-sticky .btn-field-action { padding: 6px 10px; }

/* Закупка: заголовок «Позиции и отгрузки» закреплён вместе с шапкой; подпись поля над списком не дублируется */
.form-compact .form-sticky .form-section-head:last-child { display: block; margin: 10px 0 0; padding-top: 10px; }
.form-compact .field:has(> [data-editor="lines"]) > span { display: none; }
/* Позиции закупки не сливаются: обводка жирнее, расстояние больше */
.pl-lines { gap: 14px; }
.pl-line { border: 2px solid #cbd5e1; border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.pl-line-received { border-color: #86efac; }

/* Шапка закупки: подписи узких полей в одну строку, поля в ряду выровнены по низу */
.form-compact .form-sticky .form-inline { align-items: end; }
.form-compact .form-sticky .field > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Шапка закупки: все поля одной высоты */
.form-compact .form-sticky input, .form-compact .form-sticky .combo-input, .form-compact .form-sticky select { height: 34px; box-sizing: border-box; }
.form-compact .form-sticky .combo { height: 34px; }
.form-compact .form-sticky .btn-field-action { height: 34px; box-sizing: border-box; }

/* Итог закупки — справа в закреплённом заголовке «Позиции и отгрузки» */
.form-compact .form-sticky .form-section-head:has(.pl-head-total) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pl-head-total { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; color: var(--text); }
.pl-head-total b { font-weight: 700; }
.pl-footer { justify-content: flex-start; }

/* Позиция закупки: обводка жирнее, слева — фото ТМЦ из карточки */
.pl-line { border: 3px solid #94a3b8; grid-template-columns: 28px 110px repeat(5, minmax(0, 1fr)) 30px;
  grid-template-areas:
    "num photo item item item item item remove"
    ".   photo art  per  qty  price sum  ."
    ".   photo ship ship ship recv recv ."; }
.pl-line-received { border-color: #4ade80; }
.pl-photo { grid-area: photo; align-self: stretch; min-height: 110px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.pl-photo img { width: 100%; height: 100%; max-height: 170px; object-fit: contain; }
.pl-photo span { font-size: 11px; color: var(--muted); text-align: center; padding: 4px; }
@media (max-width: 900px) {
  .pl-line { grid-template-columns: 90px 1fr 1fr; grid-template-areas: "photo item item" "photo art per" "qty price sum" "ship ship ship" "recv recv remove"; }
  .pl-photo { min-height: 90px; }
}

/* Фото позиции — квадрат во всю высоту полей позиции (сторона считается в js: --pl-photo) */
.pl-line { grid-template-columns: 28px var(--pl-photo, 120px) repeat(5, minmax(0, 1fr)) 30px; }
.pl-photo { width: var(--pl-photo, 120px); height: var(--pl-photo, 120px); min-height: 0; align-self: start; }
.pl-photo img { max-height: none; object-fit: contain; }
@media (max-width: 900px) { .pl-line { grid-template-columns: 90px 1fr 1fr; } .pl-photo { width: 90px; height: 90px; } }

/* ---------- Незаполненные обязательные поля при сохранении — красным ---------- */
.field-invalid > span { color: #dc2626; }
.field-invalid input, .field-invalid textarea, .field-invalid select, .field-invalid .combo-input,
.input-invalid, select.input-invalid + .combo .combo-input,
.field-invalid .checks, .field-invalid .photo-preview {
  border-color: #dc2626 !important; background-color: #fef2f2 !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}
.form-error { color: #b91c1c; }

/* «Получено (дата)» неактивно, пока позиция не отгружена */
.pl-recv input:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
.pl-recv-off { opacity: 0.55; }

/* Карточка ТМЦ: единица учёта — внизу блока с описанием */
.item-card-unit { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--muted); }
.item-card-unit b { color: var(--text); font-weight: 600; }
/* Единица учёта видна всегда: если характеристик много, обрезаются они, а не строка единицы */
.item-card-info .item-card-attrs { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.item-card-unit { flex-shrink: 0; }

/* Окно записи можно отодвинуть за заголовок */
.modal-drag-handle { cursor: move; user-select: none; touch-action: none; }
.modal-drag-handle .help-btn { cursor: pointer; }
body.modal-dragging, body.modal-dragging * { cursor: move !important; user-select: none !important; }
/* Окно поверх другого окна (новая подгруппа из карточки ТМЦ и т.п.) затемняет фон слабее — нижнее окно видно */
.modal-overlay ~ .modal-overlay { background: rgba(15, 23, 42, 0.12); }

/* Картинка у варианта выпадающего списка (логотип группы компаний) */
.combo-option { display: flex; align-items: center; gap: 8px; }
.combo-img { flex: none; width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--border); }
.combo-thumbs .combo-img { width: 44px; height: 44px; }
.combo-img-empty { display: inline-block; background: #f3f4f6; }

/* Значок у галочки (способ доставки в карточке ТК) */
.check-img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; vertical-align: middle; margin-right: 6px; }

/* Кнопка «Удалить» в окне записи — слева, красная */
.btn-danger-outline { margin-right: auto; color: #dc2626; border-color: #fca5a5; background: var(--surface); }
.btn-danger-outline:hover { background: #fef2f2; border-color: #dc2626; }

/* Короткие списки галочек (способы доставки в карточке ТК и т.п.) — каждый вариант в своей рамке */
.checks:not(.checks-long) { gap: 10px; }
.checks:not(.checks-long) .check { padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); transition: border-color 0.15s, background 0.15s; }
.checks:not(.checks-long) .check:hover { border-color: var(--accent); }
.checks:not(.checks-long) .check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.checks:not(.checks-long) .check .check-img { margin-right: 0; }

/* Карандаш «изменить выбранную запись» — внутри поля списка, рядом со стрелкой */
.ref-edit-btn { position: absolute; top: 50%; right: 30px; width: 26px; height: 26px; margin-top: -13px; padding: 2px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.ref-edit-btn svg { width: 22px; height: 22px; }
.ref-edit-btn:hover { background: var(--accent-soft); }
.ref-edit-btn[hidden] { display: none; }
.combo-edit-on .combo-input { padding-right: 60px; }

/* Счета и оплаты закупки: кнопки в карточке, мини-окна, значок статуса оплаты */
.pm-buttons { display: flex; gap: 8px; align-items: stretch; }
.pm-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 150px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; text-align: left; font: inherit; }
.pm-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.pm-btn.input-invalid { border-color: #dc2626; background: #fef2f2; }
.pm-btn-title { font-weight: 700; font-size: 13px; }
.pm-btn-sum { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pm-btn .pay-badge { margin-top: 2px; }
.pay-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.form-status-note.pay-badge { font-size: 13px; padding: 4px 12px; }
.pay-none { background: #f3f4f6; color: #4b5563; }
.pay-part { background: #fef3c7; color: #92400e; }
.pay-full { background: #bbf7d0; color: #14532d; }
.pay-over { background: #fee2e2; color: #991b1b; }
.pm-overlay { z-index: 1200; background: rgba(15, 23, 42, .25); }
.pm-window { background: var(--surface); border-radius: 12px; padding: 18px 20px; width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pm-window h3 { margin: 0; }
.pm-table { width: 100%; border-collapse: collapse; }
.pm-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.pm-table td { padding: 4px 6px; border-top: 1px solid var(--border); vertical-align: middle; }
.pm-table input:not([type=file]) { width: 100%; box-sizing: border-box; }
.pm-n { width: 24px; color: var(--muted); }
.pm-empty { color: var(--muted); text-align: center; padding: 14px; }
.pm-file a { text-decoration: none; word-break: break-all; }
.pm-upload { cursor: pointer; }
.pm-x { border: 0; background: transparent; font-size: 18px; line-height: 1; color: #9ca3af; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.pm-x:hover { color: #dc2626; background: #fef2f2; }
.pm-summary { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 14px; }
.pm-actions { align-self: stretch; display: flex; justify-content: flex-end; }
td .pay-badge, td .form-status { font-size: 13px; padding: 4px 12px; font-weight: 600; } /* в таблице статусы закупки и оплаты одного размера */
/* Узкий столбец: значок статуса переносится на строки внутри ячейки, а не наезжает на соседний */
td .pay-badge, td .form-status { white-space: normal; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; text-align: center; line-height: 1.3; border-radius: 12px; }

/* Отгрузка позиции поставщиком: значок и цифры заказано / отгружено / осталось */
.pl-ship-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 34px; font-size: 13px; }
.pl-ship-nums { color: var(--muted); }
.pl-ship-nums b { color: var(--text); }
.pl-ship-nums b.pl-left { color: #9a3412; }
.pl-over { color: #dc2626 !important; }
.ship-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ship-none { background: #f3f4f6; color: #4b5563; }
.ship-part { background: #ffedd5; color: #9a3412; }
.ship-full { background: #ede9fe; color: #5b21b6; }
.pl-shipment-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .pl-shipment-grid { grid-template-columns: 1fr 1fr; } }
.ps-items-head { font-size: 12px; font-weight: 600; color: var(--muted); }
.ps-items { display: flex; flex-direction: column; gap: 6px; }
.ps-item { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto 30px; gap: 8px; align-items: center; background: var(--surface); border: 1px solid #ddd6fe; border-radius: 8px; padding: 6px 8px; }
.ps-item select, .ps-qty input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; min-width: 0; }
.ps-item select { width: 100%; }
.ps-qty { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ps-qty input { width: 90px; }
.ps-hint { font-size: 12px; color: var(--muted); }
.ps-item .pl-remove { margin-top: 0; }
@media (max-width: 900px) { .ps-item { grid-template-columns: 1fr auto; } .ps-hint { grid-column: 1 / -1; } }
.pl-recv input:disabled { background: #f3f4f6; color: #374151; }

/* Получение ТМЦ: приходы закупки и значки у позиций */
.pl-receipt { border-color: #bbf7d0; background: #f0fdf4; }
.pl-receipt .ps-item { border-color: #bbf7d0; }
.pl-receipt .pl-shipment-grid { grid-template-columns: minmax(0, 180px) minmax(0, 520px); } /* дата прихода и «Из отгрузки» */
.pl-recv-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 34px; font-size: 13px; }
.recv-none { background: #f3f4f6; color: #4b5563; }
.recv-part { background: #d1fae5; color: #065f46; }
.recv-full { background: #bbf7d0; color: #14532d; }
.pl-line { grid-template-areas:
    "num photo item item item item item remove"
    ".   photo art  per  qty  price sum  ."
    ".   photo ship ship ship ship ship ."
    ".   photo recv recv recv recv recv ."; }
@media (max-width: 900px) { .pl-line { grid-template-areas: "photo item item" "photo art per" "qty price sum" "ship ship ship" "recv recv remove"; } }

/* Значок «запрет авиа» у ТМЦ: в выпадающих списках, в выбранном поле, в ячейках таблиц и позициях закупки */
.combo-badge { flex: none; display: inline-flex; margin-right: 6px; }
.combo-badge .no-air { width: 22px; height: 22px; }
.combo-option { display: flex; align-items: center; }
.combo-sel-badge { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; z-index: 2; pointer-events: auto; }
.combo-sel-badge .no-air { width: 24px; height: 24px; }
.combo-has-badge .combo-search-icon { visibility: hidden; }
.combo-has-badge .combo-input { padding-left: 36px; }
.cell-badge { display: inline-flex; vertical-align: middle; margin-right: 6px; }
.cell-badge .no-air { width: 22px; height: 22px; }
.cell-line { display: flex; align-items: flex-start; gap: 6px; }
.cell-line + .cell-line { margin-top: 4px; }
.cell-line .cell-icon .no-air { width: 20px; height: 20px; }
.pl-photo { position: relative; }
.pl-photo .photo-badge { position: absolute; top: 4px; right: 4px; }
.pl-photo .photo-badge .no-air { width: 36px; height: 36px; }
.ps-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ps-line select { flex: 1; min-width: 0; }
/* Картинка записи справочника (логотип группы компаний, картинка группы ТМЦ) — в ячейке рядом с названием */
.cell-ref-pic { display: flex; align-items: center; gap: 8px; }
.cell-ref-pic .thumb-ref { width: 36px; height: 36px; flex: none; object-fit: contain; border-radius: 6px; }

/* Инвентаризация: позиции — строка: №, фото (со значком запрета авиа), ТМЦ, учёт, факт, разница, ед. */
.inv-lines { display: flex; flex-direction: column; gap: 6px; }
.inv-line { display: grid; grid-template-columns: 26px 56px minmax(0, 1fr) 90px 110px 90px 44px 30px; gap: 8px; align-items: center; padding: 6px 8px; border: 2px solid #cbd5e1; border-radius: 10px; background: #f9fafb; }
.inv-num { color: var(--muted); font-size: 12px; text-align: center; }
.inv-photo { position: relative; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); display: grid; place-items: center; overflow: hidden; }
.inv-photo img { width: 100%; height: 100%; object-fit: contain; }
.inv-photo .photo-badge { position: absolute; top: 1px; right: 1px; }
.inv-photo .photo-badge .no-air { width: 22px; height: 22px; }
.inv-item-name { font-size: 13px; line-height: 1.3; }
.inv-cell { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.inv-cell b { font-size: 14px; color: var(--text); }
.inv-cell input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 14px; width: 100%; box-sizing: border-box; }
.inv-unit { font-size: 13px; color: var(--muted); }
.inv-line .pl-remove { margin-top: 0; }
b.inv-plus, .inv-plus { color: #15803d !important; }
b.inv-minus, .inv-minus { color: #dc2626 !important; }
.inv-zero { color: var(--muted) !important; }
.inv-empty { color: var(--muted); padding: 10px; }
.inv-footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.inv-summary { margin-left: auto; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .inv-line { grid-template-columns: 56px repeat(3, minmax(0, 1fr)) 30px; grid-template-areas: "photo item item item remove" "photo book fact diff unit"; }
  .inv-num { display: none; }
  .inv-photo { grid-area: photo; } .inv-item { grid-area: item; } .inv-book { grid-area: book; } .inv-fact { grid-area: fact; }
  .inv-diff { grid-area: diff; } .inv-unit { grid-area: unit; align-self: end; padding-bottom: 8px; } .inv-line .pl-remove { grid-area: remove; }
}

/* Счета поставщика: распознанные из файла поля и сверка поставщика по ИНН/КПП (js/purchase-money.js) */
.pm-table input.pm-auto { background: #fef9c3; border-color: #eab308; }
.pm-table tr.pm-info td { border-top: 0; padding-top: 0; font-size: 12px; }
.pm-info .btn-small { margin-left: 6px; padding: 2px 8px; font-size: 12px; }
.pm-reading { color: var(--muted); }
.pm-check-ok, .pm-check-info, .pm-check-warn, .pm-check-bad { margin-top: 3px; padding: 4px 8px; border-radius: 6px; }
.pm-check-ok { background: #dcfce7; color: #166534; }
.pm-check-info { background: #eff6ff; color: #1e40af; }
.pm-check-warn { background: #fef3c7; color: #92400e; }
.pm-check-bad { background: #fee2e2; color: #991b1b; }
/* Фото позиции закупки, пока курсор ведут по списку ТМЦ: показан ТМЦ под курсором (ещё не выбран) */
.pl-photo.pl-photo-preview { outline: 2px dashed #3b82f6; outline-offset: -2px; }

/* Счета: контрагент счёта и значок сверки на кнопке «Счета» */
.pm-cp { min-width: 230px; }
.pm-cp small { display: block; margin-top: 2px; color: #166534; font-size: 11px; }
.pm-badge-ok { background: #dcfce7; color: #166534; }
.pm-badge-bad { background: #fee2e2; color: #991b1b; }
.pm-cp .combo { width: 100%; }
.pm-cp .combo-input { flex: 1; min-width: 0; padding: 5px 28px 5px 30px; }
.pm-file a { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.pm-table td:nth-child(n+4) input { min-width: 90px; }

/* Столбец ID — всегда первый и закреплён слева при прокрутке таблицы вправо */
.reg-table td.col-pinned, .reg-table th.col-pinned { position: sticky; left: 0; box-shadow: inset -1px 0 0 var(--border); }
.reg-table td.col-pinned { z-index: 1; background: var(--surface); }
.reg-table th.col-pinned { z-index: 3; cursor: pointer; box-shadow: inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border); }
.reg-table tbody tr[data-id]:hover td.col-pinned { background: var(--accent-soft); }

/* Карточка ТМЦ в узком окне: длинное название характеристики не сжимает значение в столбик букв —
   названию не больше половины ширины (переносится по словам), значению — не меньше 45% */
.item-card-attrs { grid-template-columns: minmax(0, max-content) minmax(45%, 1fr); }
.item-card-attrs dt { min-width: 0; }
/* Карточка уже 440 px (телефон, узкая панель) — фото сверху, характеристики под ним во всю ширину */
.item-card { container-type: inline-size; }
@container (max-width: 440px) {
  .card-view:not(.card-view-big) .item-card-top { grid-template-columns: 1fr; }
  .card-view:not(.card-view-big) .item-card-photo { aspect-ratio: 16 / 10; }
}

/* Счёт в окне «Счета»: строка «файл | контрагент на всю ширину», под ней № счёта, дата и сумма */
.pm-table tr.pm-sub td { border-top: 0; padding-top: 2px; }
.pm-cp { width: 100%; }
.pm-sub-fields { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.pm-sub-fields label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); flex: 1 1 140px; }
.pm-table .pm-sub-fields input { min-width: 0; }
.pm-sub-fields label i { color: #dc2626; font-style: normal; }
/* Пустое обязательное поле счёта — красная рамка */
.pm-sub-fields input:invalid { border-color: #f87171; background: #fef2f2; }

/* Сверка суммы счетов с суммой позиций — справа от кнопок «Счета» и «Оплаты» */
.pm-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pm-sum-check { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-sum-ok { color: #166534; font-size: 13px; font-weight: 600; }
.pm-sum-bad { color: #dc2626; font-size: 20px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.pm-sum-check small { color: #b91c1c; font-size: 12px; }

/* Закупка: «В чём» у ТМЦ с упаковкой не выбрано — красная рамка, пока оператор не выберет */
.pl-field select[data-l="per"]:invalid { border-color: #ef4444; background: #fef2f2; color: #b91c1c; box-shadow: 0 0 0 2px rgba(239, 68, 68, .2); }
.pm-sum-line { color: var(--text); font-size: 14px; font-weight: 600; }

/* Отгрузка поставщика: дата — вдвое уже остальных полей, справа от неё способ доставки */
.pl-shipment:not(.pl-receipt) .pl-shipment-grid { grid-template-columns: minmax(118px, 0.375fr) minmax(118px, 0.375fr) minmax(110px, 0.5fr) minmax(0, 1.75fr) minmax(0, 1fr); align-items: end; } /* дата и способ — узкие (не уже 118 px — дата видна целиком), освободившееся — ТК */
@media (max-width: 900px) { .pl-shipment:not(.pl-receipt) .pl-shipment-grid { grid-template-columns: 1fr 1fr; } }
.combo-sel-img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; }

/* Позиция в отгрузке и приходе: фото ТМЦ слева от списка (как у позиций закупки) */
.ps-photo { position: relative; flex: none; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); display: grid; place-items: center; overflow: hidden; font-size: 10px; color: var(--muted); text-align: center; line-height: 1.1; }
.ps-photo img { width: 100%; height: 100%; object-fit: contain; }
.ps-photo .photo-badge { position: absolute; top: 1px; right: 1px; }
.ps-photo .photo-badge .no-air { width: 20px; height: 20px; }
.ps-line .combo { flex: 1; min-width: 0; }

/* Отгрузка поставщика: «Отгрузка № N» втрое крупнее; на широком экране поля отгрузки — в той же строке справа от названия,
   позиции отгрузки — ниже во всю ширину */
.pl-shipment:not(.pl-receipt) .pl-shipment-head b { font-size: 300%; line-height: 1; white-space: nowrap; }
@media (min-width: 900px) {
  .pl-shipment:not(.pl-receipt) { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-items: end; }
  .pl-shipment:not(.pl-receipt) > * { grid-column: 1 / -1; }
  .pl-shipment:not(.pl-receipt) > .pl-shipment-head { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
  .pl-shipment:not(.pl-receipt) > .pl-shipment-grid { grid-column: 2; grid-row: 1; padding-right: 34px; }
  .pl-shipment:not(.pl-receipt) > .pl-shipment-head .pl-remove { position: absolute; top: 8px; right: 8px; }
}

/* Закупка: разделы «Позиции закупки ТМЦ», «Отгрузки поставщика», «Получение ТМЦ (приходы)» — одного размера,
   со стрелкой: свернуть / развернуть список */
.form-section-head.pl-sec-head { font-size: 14px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.form-compact .form-sticky .form-section-head.pl-sec-head:last-child { display: flex; }
.pl-sec-head .pl-head-total { margin-left: auto; cursor: default; }
.pl-sec-count { color: var(--muted); font-weight: 600; }
.pl-toggle { flex: none; width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--accent); font-size: 14px; line-height: 1; cursor: pointer; transition: transform 0.15s; }
.pl-toggle:hover { background: var(--accent-soft); }
.pl-sec-collapsed .pl-toggle { transform: rotate(-90deg); }
.pl-sec-body { display: flex; flex-direction: column; gap: inherit; align-items: flex-start; }
.pl-sec-body > .pl-shipments { align-self: stretch; }
.pl-hide-lines .pl-lines, .pl-hide-lines .pl-footer,
.pl-hide-ships [data-pl-body="ships"], .pl-hide-rcpts [data-pl-body="rcpts"] { display: none; }

/* Карточка закупки: сверка сумм — в строке заголовка справа от номера; комментарий — справа от «Счета» / «Оплаты» */
.modal-title-status .pm-sum-title { flex: 0 1 auto; margin-left: 24px; font-weight: 400; }
.form-purchase .form-inline textarea[name="comment"] { min-height: 58px; height: 58px; resize: vertical; }
/* Позиция прихода: ТМЦ из отгрузки — название текстом (не выбирается) */
.ps-name { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }

/* ---------- Вход по логину и паролю (режим сервера) ---------- */
body.auth-mode .app { display: none; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: #f3f4f6; box-sizing: border-box; }
.auth-card { width: min(380px, 100%); background: #fff; border-radius: 16px; padding: 28px 26px; box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12); box-sizing: border-box; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.auth-brand b { display: block; font-size: 17px; }
.auth-brand span { font-size: 13px; color: #6b7280; }
.auth-card h1 { margin: 0 0 16px; font-size: 22px; }
.auth-card form { display: flex; flex-direction: column; gap: 12px; }
.auth-card label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; color: #374151; }
.auth-card input { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; font-weight: 400; font-size: 15px; }
.auth-card input:focus { outline: 2px solid #2563eb; outline-offset: 0; border-color: #2563eb; }
.auth-card .btn { padding: 11px; font-size: 15px; }
.auth-error { color: #b91c1c; font-size: 14px; margin: 0; min-height: 1em; }
.auth-hint { color: #6b7280; font-size: 13px; margin: 12px 0 0; }

/* Внизу меню: кто вошёл */
.who-server { display: flex; flex-direction: column; gap: 2px; }
.who-server b { color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-actions { display: flex; gap: 12px; }
.who-link { background: none; border: 0; padding: 0; color: #93c5fd; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.who-link:hover { color: #fff; }

/* Нет связи с сервером */
.server-notice { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3000; background: #7f1d1d; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }

/* Пользователи и пароли */
.users-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.users-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.users-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.users-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.users-row-actions { white-space: nowrap; text-align: right; }
.users-row-actions .btn { margin-left: 4px; }
.users-note { color: var(--muted); font-size: 13px; margin: 12px 0; }
.users-modal { max-width: 440px; }
.users-check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 14px; }

/* Кнопка с выбором файла, пока файл обрабатывается; подсказка внизу экрана */
.btn-busy { opacity: 0.6; pointer-events: none; }
.app-toast { background: #1e3a8a; }

/* Код записи в заголовке окна (formIdInTitle): узкое поле справа от названия */
.form-title-id { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.form-title-id input { padding: 5px 8px; font-size: 14px; font-weight: 600; box-sizing: border-box; min-width: 0; }

/* ---------- Быстрые кнопки: полоска вверху страницы (js/quick-links.js) ---------- */
.quickbar { flex: none; display: flex; gap: 8px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--surface); overflow-x: auto; min-height: 52px; box-sizing: border-box; }
.quick-btn { flex: none; width: 84px; height: 84px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 5px; border: 1px solid var(--border); border-radius: 12px; background: #f9fafb; color: var(--text); text-decoration: none; text-align: center; overflow: hidden; transition: border-color .15s, background .15s; }
.quick-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.quick-btn.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.quick-icon { display: flex; height: 26px; align-items: center; justify-content: center; }
.quick-icon svg, .quick-icon img { width: 24px; height: 24px; object-fit: contain; }
.quick-parent { font-size: 10px; line-height: 1.15; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-title { font-size: 12px; font-weight: 600; line-height: 1.15; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.quick-hint { font-size: 13px; color: var(--muted); }
.quick-menu { position: fixed; z-index: 4000; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18); padding: 4px; display: flex; flex-direction: column; }
.quick-menu button { text-align: left; padding: 8px 12px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14px; cursor: pointer; color: var(--text); }
.quick-menu button:hover:not(:disabled) { background: var(--accent-soft); }
.quick-menu button:disabled { color: var(--muted); cursor: default; }
.quick-menu b { color: var(--accent); font-size: 16px; }

/* Строка с названием открытого раздела — в 2 раза уже (было 56px) */
.topbar { height: 28px; }
.breadcrumbs { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-btn { width: 24px; height: 24px; border-radius: 6px; }
.gsearch-btn svg { width: 15px; height: 15px; }
.menu-btn { padding: 0; }
.menu-btn svg { width: 18px; height: 18px; }

/* Быстрые кнопки: перетаскивание */
.quick-btn { cursor: pointer; position: relative; }
.quick-btn.quick-dragging { opacity: 0.4; }
.quick-btn.quick-drop-before { box-shadow: -4px 0 0 0 var(--accent); }
.quick-btn.quick-drop-after { box-shadow: 4px 0 0 0 var(--accent); }
.quick-menu-note { font-size: 12px; }

/* Своя картинка кнопки — круглая аватарка */
.quick-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12); margin-bottom: 2px; }

/* Быстрые кнопки — в 2 раза больше (было 84px) */
.quick-btn { width: 168px; height: 168px; border-radius: 18px; gap: 6px; padding: 12px 10px; }
.quick-icon { height: 56px; }
.quick-icon svg, .quick-icon img { width: 52px; height: 52px; }
.quick-avatar { width: 80px; height: 80px; margin-bottom: 4px; }
.quick-parent { font-size: 13px; }
.quick-title { font-size: 16px; line-height: 1.2; }
.quickbar { gap: 12px; padding: 10px 16px; }

/* Быстрые кнопки: только название раздела, мельче — длинные помещаются (до 4 строк) */
.quick-title { font-size: 13px; line-height: 1.2; -webkit-line-clamp: 4; overflow-wrap: break-word; hyphens: auto; }

/* Быстрые кнопки: картинка — на всё место сверху, название — у нижнего края */
.quick-btn { justify-content: flex-start; gap: 4px; padding: 10px 8px 8px; }
.quick-media { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.quick-avatar { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; margin: 0; }
.quick-icon { height: 100%; width: 100%; }
.quick-icon svg, .quick-icon img { width: 72px; height: 72px; }
.quick-label { flex: none; width: 100%; height: 47px; display: flex; align-items: flex-end; justify-content: center; }
.quick-title { -webkit-line-clamp: 3; }

/* Полоска быстрых кнопок: кнопки прокручиваются, большая кнопка поиска — закреплена справа (в 4 раза крупнее) */
.quickbar { overflow: hidden; padding-right: 12px; }
.quick-list { flex: 1 1 auto; min-width: 0; display: flex; gap: 12px; align-items: center; overflow-x: auto; padding: 2px 0; }
.quick-tools { flex: none; display: flex; align-items: center; padding-left: 12px; border-left: 1px solid var(--border); margin-left: 4px; }
.gsearch-btn.gsearch-big { width: 96px; height: 96px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; }
.gsearch-btn.gsearch-big svg { width: 56px; height: 56px; }
.gsearch-label { font-size: 13px; font-weight: 600; }