/* Оформление раздела «Остатки»: вставка таблицы из Додо ИС и её предпросмотр.
   Вынесено из styles.css по правилу проекта (400 строк на файл). Граница честная:
   это единственный экран, который не список позиций, и стили у него свои. */

/* ── Раздел «Остатки» ──────────────────────────────────────────── */

.stock-panel { padding: 14px 0 24px; max-width: 900px; }
.stock-state { font-size: 14px; margin: 0; }
.stock-state.is-warn { color: var(--text); font-weight: 600; }
/* Состояние, кнопка подтяжки и её ответ — одной строкой, переносится на узком экране. */
.stock-state-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.stock-pull-state { font-size: 13px; color: var(--muted); }
.stock-steps { margin: 0 0 12px 18px; padding: 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
.stock-panel textarea {
  width: 100%; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace;
  padding: 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); resize: vertical;
}
.stock-summary { font-size: 13px; margin: 10px 0; }
.stock-summary.is-error { color: var(--text); font-weight: 700; }

/* Весь список остатков виден целиком и прокручивается внутри рамки — как лист Excel,
   в который вставили таблицу. Высота в долях экрана, а не в пикселях: на большом
   мониторе видно больше строк, и это правильно. */
.stock-preview {
  overflow: auto;
  max-height: 60vh;
  margin-bottom: 14px;
  border: 1px solid var(--line-strong, rgba(0, 0, 0, .38));
}

/* Шапка с выбором колонок прилипает: прокрутив к 150-й строке, человек должен видеть,
   какая колонка чем назначена, иначе проверять список бессмысленно. */
.preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

/* Полосатые строки — как в Excel: на 171 строке взгляд иначе теряет ряд. */
.preview-table tr:nth-child(even) td { background: var(--muted-bg, #efefef); }
.preview-table { border-collapse: collapse; font-size: 12px; }
.preview-table th, .preview-table td {
  border: 1px solid var(--border); padding: 4px 8px; text-align: left;
  white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.preview-table select { font: inherit; max-width: 150px; }
.preview-head-hint { font-size: 11px; color: var(--muted); margin-top: 2px; }
.preview-table td.is-skipped { color: var(--muted); opacity: .45; }
.preview-bad { margin: 6px 0 0 18px; padding: 0; font-size: 12px; color: var(--muted); }

/* Сохранённый лист остатков — то же оформление, что у предпросмотра: одна таблица,
   прокрутка внутри рамки, шапка прилипает. Разница только в назначении: предпросмотр
   отвечает «верно ли я прочитал вставленное», а этот список — «что сейчас в работе». */
.stock-saved-head[hidden] { display: none; }

.stock-saved-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 20px 0 8px;
  flex-wrap: wrap;
}

.stock-saved-title { margin: 0; font-size: 15px; font-weight: 600; }
.stock-search { width: 260px; }
.stock-saved-count { font-size: 13px; color: var(--muted); }


/* ── Экран «Добавить позиции» ───────────────────────────────────────
   Живёт здесь, а не в styles.css: он про тот же материал, что и «Остатки», —
   человек выбирает товары из загруженного снимка. Оформление то же самое:
   рамка, прокрутка внутри, строки через одну. Цвета нет ни одного — кабинет
   чёрно-белый, различаем формой и фоном. */

.custom-panel {
  margin: 12px 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel, #fff);
}

.custom-panel[hidden] { display: none; }

.custom-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.custom-subtitle { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.custom-hint { margin: 0 0 10px; font-size: 13px; color: var(--muted); }

.custom-panel .stock-search { margin-bottom: 8px; }

/* Список выбора прокручивается внутри своей рамки: товаров в снимке под две сотни,
   и без этого страница уезжала бы на несколько экранов вниз. */
.custom-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 0;
  font-size: 13px;
}

.custom-row {
  display: grid;
  grid-template-columns: 22px 1fr 72px;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
}

/* Строки через одну — как в предпросмотре остатков: глазу проще вести строку
   до числа справа. */
.custom-row:nth-child(even) { background: var(--zebra, #f6f6f6); }
.custom-row:hover { background: var(--hover, #ececec); }

.custom-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-row-num { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.custom-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.custom-state { font-size: 13px; color: var(--muted); }

/* Своя позиция — запасной путь, поэтому отделена чертой и стоит ниже.
   В строку: название, единица, кнопка. */
.custom-own {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.custom-own .field { margin: 0; }

/* ── Не привязаны ни к одной позиции ──────────────────────────────── */
.stock-orphans { margin: 10px 0 4px; font-size: 13px; }
.orphans-line { margin: 0 0 4px; }
.stock-orphans summary { cursor: pointer; color: var(--muted); width: max-content; }
.orphans-list { margin: 4px 0 6px; padding-left: 18px; columns: 2; column-gap: 24px; }
.orphans-list li { break-inside: avoid; }
.orphans-actions { display: flex; gap: 8px; margin-top: 6px; }