/* Дополнения проекта к дизайн-системе стандарта 03: только var(--…) из tokens.css. */

.auth-page { display: grid; place-items: center; padding: var(--sp-4); }
.auth-box { width: min(400px, 100%); }
.auth-box .brand { padding: 0 0 var(--sp-2); }

.card.narrow { max-width: 560px; }

/* Выпадающий список (select.js): поле-кнопка того же вида, что .select, и скруглённый список в верхнем слое */
.select-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
button.select { display: block; width: 100%; text-align: left; cursor: pointer; background-color: var(--surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.select[aria-expanded="true"] { border-color: var(--focus); box-shadow: var(--ring); }
.select-list { position: fixed; inset: auto; margin: 0; left: var(--sel-left); top: var(--sel-top); min-width: var(--sel-width);
  max-width: min(480px, calc(100vw - 16px)); max-height: 320px; overflow-y: auto; padding: var(--sp-1); list-style: none;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: var(--sh-3); }
.select-list [role="option"] { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); cursor: pointer; }
.select-list [role="option"].active { background: var(--surface-3); }
.select-list [role="option"][aria-selected="true"] { color: var(--primary-ink); font-weight: var(--fw-semibold); }
.select-list [role="option"][aria-disabled="true"] { color: var(--faint); cursor: not-allowed; }

/* Миниатюра товара: фиксированный размер, чтобы строки таблицы не прыгали */
.thumb { width: 40px; height: 52px; flex: none; border-radius: var(--r-xs); object-fit: cover; background: var(--surface-3); }
.thumb.lg { width: 120px; height: 160px; }
tr.clickable { cursor: pointer; }
/* Настройки синхронизации: колонки фиксированной ширины, управление в одну линию */
.sync-table .col-what { min-width: 18rem; }
.sync-table .col-on { width: 1%; white-space: nowrap; }
.sync-table .col-when { width: 1%; white-space: nowrap; }
.sync-table .col-last { width: 22%; }
.sync-table .cell-2.wide { --cell-max: 26rem; }
.when { display: flex; align-items: center; gap: var(--sp-2); }
.when > .select, .when > button.select { width: auto; min-width: 5.5rem; }
.when > :first-child { min-width: 8.5rem; }
.when > .input.num { width: 5rem; }
.when > input[type="time"] { width: 7.5rem; }

/* Колонка выбора строк: узкая, галочка — компонент .check дизайн-системы */
.table th.col-check, .table td.col-check { width: 1%; padding-right: 0; }
.table .col-check .check { display: flex; align-items: center; min-height: 24px; }

/* Карточка результата скана: крупно, цветом — видно с расстояния вытянутой руки */
.scan-state { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line); }
.scan-state > svg.ic { width: 32px; height: 32px; color: var(--muted); }
.scan-state b { font-size: var(--fs-md); }
.scan-state[data-state="ok"] { background: var(--ok-soft); border-color: var(--ok); }
.scan-state[data-state="ok"] > svg.ic { color: var(--ok-ink); }
.scan-state[data-state="warn"] { background: var(--warn-soft); border-color: var(--warn); }
.scan-state[data-state="bad"] { background: var(--bad-soft); border-color: var(--bad); }
.scan-state[data-state="bad"] > svg.ic { color: var(--bad-ink); }
.input.qty { width: 90px; margin-left: auto; }
.progress-num { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* Печать листа подбора: только таблица */
@media print {
  .sidebar, .topbar, .page-head .actions, .toasts { display: none; }
  .app { display: block; }
  .card { box-shadow: none; border: 0; }
}
.marks { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding-top: var(--sp-2); }
.btn.btn-xs { height: 20px; width: 20px; min-height: 0; padding: 0; }
details > summary { cursor: pointer; color: var(--primary-ink); }
tr.clickable:hover td { background: var(--surface-2); }

/* Строка на всю ширину (пусто / пояснение) на телефоне — не «подпись: значение», а обычный блок */
@media (max-width: 767.98px) {
  .table.stack-mobile td[colspan] { display: block; text-align: left; }
  .table.stack-mobile td[colspan]::before { content: none; }
}

/* Число справа и сразу за ним текстовая колонка — не слипаются */
@media (min-width: 768px) { .table th.num + th, .table td.num + td { padding-left: var(--sp-6); } }
.table .col-date { white-space: nowrap; }
.row.bottom { align-items: flex-end; }

/* Количество в строке таблицы (план поставки) */
.input.qty-input { width: 6.5rem; }