/* Операции кладовщика на телефоне (wms-mobile.js, этап 4.3) - классы op-*; компоненты - ui.css, страница отчета -
   reports.css (ro-*). Цвет - только у меток (.ui-tag), заметок состояния и кнопки основного действия; строка последнего
   скана выделена рамкой цвета текста, без акцента. Нажимаемое на телефоне - от 44 px (ui.css), степпер - тоже. */

.op-page .op-go { height: auto; min-height: var(--h-sm); padding-inline: 0; font-weight: 600; text-align: left; white-space: normal; color: var(--text); }
.op-back { margin: 0 0 var(--s-4); padding-inline: 0; }
.op-qbox:empty { display: none; }
.op-qbox .ui-note + .ui-note { margin-top: var(--s-3); }
.op-qbox { margin: 0 0 var(--s-6); }
.op-qacts { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); margin-left: var(--s-2); vertical-align: middle; }
.op-dim { color: var(--text-2); font-size: var(--fs-sm); }
.op-h2 { margin: var(--s-10) 0 var(--s-4); font-size: var(--fs-lg); }
.op-h3 { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-md); }
.op-note { margin: 0 0 var(--s-6); color: var(--text-2); }

/* поле скана: поле, переключатель «Скан / Вручную», камера */
.op-scan { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-6); }
.op-scan-f { flex: 1 1 16rem; min-width: 0; margin: 0; }
.op-scan-in { width: 100%; }
.op-scan-m button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--text-2); }

/* строки документа: карточка в два ряда - название и код; «по документу», степпер, метка. Строки вне окна браузер не
   раскладывает (content-visibility; высота до первой раскладки - карточка телефона, 133 px): документ на 300 строк
   открывался 1,3-2,2 с при замедлении процессора в 4 раза, из них стили и раскладка - 1,7 с (замер 4.3.8, ops_perf.mjs) */
.op-lines { display: flex; flex-direction: column; gap: var(--s-4); margin: 0 0 var(--s-8); }
.op-line { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  content-visibility: auto; contain-intrinsic-height: auto 133px; }
.op-line.op-hit { box-shadow: inset 0 0 0 2px var(--text); }
.op-l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); min-width: 0; }
.op-l2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.op-name { height: auto; min-height: 0; padding: 0; font-weight: 600; text-align: left; white-space: normal; color: var(--text); overflow-wrap: anywhere; }
.op-code { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.op-docq { color: var(--text-2); font-variant-numeric: tabular-nums; }
.op-why { color: var(--text-2); font-size: var(--fs-sm); }
.op-step { display: inline-flex; align-items: center; gap: var(--s-2); }
.op-step .ui-btn { min-width: 44px; min-height: 44px; padding-inline: 0; justify-content: center; font-size: var(--fs-lg); font-weight: 600; }
.op-step .op-q { width: 6.5em; min-height: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.op-docs { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-2); }
.op-docs li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.op-bar { margin-top: var(--s-6); }

/* инвентаризация: шапка документа (склад, дата и время, группа), строки с «Кол-во», кнопки внизу */
.op-inv-h { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-4); margin: 0 0 var(--s-6); }
.op-inv-h .ui-field { flex: 1 1 14rem; min-width: 0; margin: 0; }
.op-inv-v { display: block; min-height: var(--h-md); line-height: var(--h-md); }
.op-inv-t { display: flex; gap: var(--s-2); }
.op-inv-t .ui-input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.op-ivq { width: 8rem; text-align: right; font-variant-numeric: tabular-nums; }
.op-inv-b { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); margin: var(--s-6) 0 0; }
.op-jtools { margin-top: 0; }
.op-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4); }

/* окна: выбор товара, исправление, очередь, камера */
.op-pick { display: grid; gap: var(--s-3); }
.op-pick-b { height: auto; min-height: 44px; flex-direction: column; align-items: flex-start; gap: var(--s-1); padding-block: var(--s-3); text-align: left; white-space: normal; }
.op-pick-b .sub { font-size: var(--fs-sm); color: var(--text-2); }
.op-redo { display: grid; gap: var(--s-4); }
.op-redo .ui-field { margin: 0; }
.op-redo-l .ui-input { max-width: 10rem; text-align: right; }
.op-qlist { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.op-qlist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.op-qlist li > div { display: grid; gap: var(--s-1); min-width: 0; }
.op-qlist .sub { font-size: var(--fs-sm); color: var(--text-2); }
.op-cam { display: grid; gap: var(--s-4); }
.op-cam-v { width: 100%; max-height: 60vh; border-radius: var(--r-md); background: var(--text); object-fit: cover; }
.op-cam-n { margin: 0; color: var(--text-2); }
.op-home { margin: 0; }

@media (min-width: 761px) and (pointer: fine) {      /* переключатель ввода - высотой с поле скана; на телефоне кнопки сами 44 px */
  .op-scan-m button { min-height: var(--h-md); }
}
@media (max-width: 760px), (pointer: coarse) {      /* название товара - кнопка карточки: на телефоне и при касании от 44 px */
  .op-name { min-height: 44px; }
  button.op-name { display: inline-flex; align-items: center; }
}
@media (max-width: 760px) {
  .op-step .op-q { width: 5.5em; }
  .op-tab.stack tbody tr { content-visibility: auto; contain-intrinsic-height: auto 164px; }      /* списки и журнал - карточки: вне окна не раскладываются */
  .op-bar .ui-btn { flex: 1 1 auto; }
  /* документ с нижней панелью действия: уведомления - сверху экрана. Внизу они закрывали «Принять» и «Отправить» на 3-7 с
     после каждой записи (этап 4.3.8, ops_ui_check: нажатие попадало в уведомление); браузер без :has - прежнее место */
  html:has(.op-bar) .ui-toasts { top: calc(var(--s-6) + env(safe-area-inset-top, 0px)); bottom: auto; }
}