/* Общий слой станции: цвета, шрифты, скругления - один на все страницы.
 *
 * Зачем. К 28.08.2026 у сайта склада было ШЕСТЬ независимых палитр: style.css (станция),
 * свои :root у picker.html, skan-ruchnoy.html, instrukciya.html и ещё четыре внутри
 * server.py (табло, сборщики, операторы, проверка поставки). Одна и та же «панель» была
 * то #12102e, то #201a54, кнопки и скругления не совпадали, а тема хранилась в двух разных
 * ключах - человек переходил со станции на телефон сборщика и получал другую тему.
 * Владелец 28.08.2026: «у каждой страницы свой внешний вид без единого формата и
 * материнского css на хотя бы базовые вещи для всех».
 *
 * Как устроено. Здесь ТОЛЬКО токены и самое основание - никакой раскладки. Страница
 * подключает этот файл первым и дальше пишет своё, обращаясь к именам отсюда.
 *
 * ИМЕНА-СИНОНИМЫ ВНИЗУ - НЕ МУСОР. Страницы писались в разное время и зовут одно и то же
 * по-разному: --card и --panel это та же поверхность, --bad и --err тот же красный.
 * Синонимы позволили свести палитры, не переписывая разметку пяти страниц разом: у каждой
 * просто убран свой :root. Новое писать каноническими именами (--bg-2, --err, --muted).
 */

:root {
  /* ── поверхности ─────────────────────────────────────────────────────── */
  --bg: #0a0920;          /* фон страницы */
  --bg-2: #12102e;        /* панель, карточка */
  --bg-3: #1b1738;        /* вложенная плашка, поле ввода */
  --line: #262254;        /* обычная граница */
  --line-2: #35306b;      /* граница поярче: наведение, разделитель */

  /* ── текст ───────────────────────────────────────────────────────────── */
  --text: #eceaff;
  --text-2: #b9b3f5;      /* второстепенный: подписи под числом */
  --muted: #9c95cf;       /* совсем тихий: время, служебное */

  /* ── смысл ───────────────────────────────────────────────────────────── */
  --ok: #35d07f;
  --ok-d: #1f8f57;
  --warn: #ffc857;
  --err: #ff6b6b;
  --cyan: #4fc3f7;
  --orange: #ff8a3d;

  /* ── площадки. Ровно те же цвета, что в аналитике valanaii и на табло: кабинет узнают
     по цвету раньше, чем прочитают слово (владелец 22.08.2026). ───────── */
  --mp-wb: #7c3aed;
  --mp-ozon: #2563ff;
  --mp-ym: #dd8500;

  --brand: var(--mp-wb);
  --brand-d: #6d28d9;
  --brand-soft: #2a2464;
  --brand-ink: #ffffff;
  --grad: linear-gradient(120deg, #4c1d95 0%, #7c3aed 55%, #6d28d9 100%);
  --page-glow: #1d1a4d;

  /* ── буквы и формы ───────────────────────────────────────────────────── */
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 12px;         /* карточка */
  --radius-sm: 8px;       /* кнопка, плашка */
}

/* Кабинет красит страницу целиком: шапка, рамки, выделения. */
body[data-mp="wb"] {
  --brand: var(--mp-wb); --brand-d: #6d28d9; --brand-soft: #2a2464;
  --grad: linear-gradient(120deg, #4c1d95 0%, #7c3aed 55%, #6d28d9 100%);
}
/* Авито - зелёный, как сама площадка: спутать его с синим Ozon или фиолетовым WB
   на бегу нельзя, а собранное не в ту площадку стоит дорого. */
body[data-mp="avito"] {
  --brand: #12b26a; --brand-d: #0e8f55; --brand-soft: #10371f;
  --grad: linear-gradient(120deg, #065f38 0%, #12b26a 55%, #0e8f55 100%);
}
body[data-mp="ozon"] {
  --brand: var(--mp-ozon); --brand-d: #1d4ed8; --brand-soft: #16265e;
  --grad: linear-gradient(120deg, #1e3a8a 0%, #2563ff 55%, #4f46e5 100%);
}
body[data-mp="ym"] {
  --brand: var(--mp-ym); --brand-d: #b45309; --brand-soft: #4a3410;
  --grad: linear-gradient(120deg, #b45309 0%, #f59e0b 55%, #d97706 100%);
}
/* Сводный режим табло - свой цвет, чтобы не путать его с кабинетом WB. */
body[data-mp="all"] {
  --brand: #0f766e; --brand-d: #115e59;
  --grad: linear-gradient(120deg, #134e4a 0%, #0f766e 55%, #155e75 100%);
}

/* Светлая тема: те же имена, другие значения. Днём у ворот тёмный экран бликует,
   вечером светлый слепит - выбор за человеком, и он один на все страницы. */
html[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-2: #ffffff;
  --bg-3: #eef1f8;
  --line: #e8edf6;
  --line-2: #d3dbea;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #475569;
  --ok: #17864a;
  --ok-d: #2c8f57;
  --warn: #b45309;
  --err: #cc3a3a;
  --cyan: #1673a8;
  --brand-soft: #eef2ff;
  --page-glow: #e9ecfa;
}
html[data-theme="light"] body[data-mp="wb"]   { --brand-soft: #f4ecfe; }
html[data-theme="light"] body[data-mp="ozon"] { --brand-soft: #eef2ff; }
html[data-theme="light"] body[data-mp="avito"] { --brand-soft: #e7f7ee; }
html[data-theme="light"] body[data-mp="ym"]   { --brand-soft: #fff4df; }

/* ── основание. Ровно то, что должно совпадать на всех страницах. ─────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

/* ── поля ввода и выпадающие списки ──────────────────────────────────────
 *
 * Владелец 28.08.2026: «у выпадающего окна состояний нет стиля, занеси в материнский css».
 * Стиля не было НИ У ОДНОГО поля: базовый слой задавал только цвета и шрифт, а поля
 * оформляла каждая страница сама или не оформляла вовсе. Незанятыми оставались списки
 * кабинета и поставки на ручном вводе скана, выбор принтеров в оборудовании и выбор
 * состояния строки на приёмке - они рисовались системным серым поверх тёмной темы.
 *
 * Правила здесь на УРОВНЕ ЭЛЕМЕНТА, то есть с самой низкой силой: любая страница, у
 * которой уже есть свой .ctl или .f input, перебивает их по-прежнему и ничего не теряет.
 * Это и позволяет положить оформление в общий слой, не переписывая пять страниц.
 *
 * ЛОВУШКА, на которой это чуть не уехало в бой: у `:not()` сила его аргумента, и цепочка
 * из четырёх `:not([type=...])` даёт вес выше любого одиночного класса - такое правило
 * перебило .scan на приёмке, и поле сканирования обмельчало до обычного. Поэтому цепочка
 * завёрнута в `:where()`: он не добавляет силы вовсе, и правило остаётся элементным.
 */
select,
textarea,
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range])) {
  font: inherit;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  min-height: 40px;          /* палец в перчатке, а не курсор мыши */
  max-width: 100%;
}
select:hover,
textarea:hover,
input:where(:not([type=checkbox]):not([type=radio]):not([type=file])):hover { border-color: var(--line-2); }
select:focus,
textarea:focus,
input:where(:not([type=checkbox]):not([type=radio]):not([type=file])):focus {
  outline: none;
  border-color: var(--brand);
}
select:disabled, textarea:disabled, input:disabled { opacity: .55; cursor: default; }
::placeholder { color: var(--muted); opacity: 1; }

/* Свой значок списка: системную стрелку нельзя перекрасить, и на тёмной теме список
   оставался светлым прямоугольником с серой стрелкой. Цвет значка задан отдельно для
   каждой темы - в data-URI нельзя подставить переменную. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239c95cf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
html[data-theme="light"] select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
}
/* Сам раскрытый список рисует система, и на тёмной теме он выходил белым. */
select option { background: var(--bg-2); color: var(--text); }

/* Галочки и переключатели красим брендом кабинета, а не системным синим. */
input[type=checkbox], input[type=radio] { accent-color: var(--brand); width: 16px; height: 16px; }

/* ── иконки ──────────────────────────────────────────────────────────────
 *
 * Владелец 28.08.2026: «добавь иконок как на основе и на другие страницы». На станции
 * иконка стоит у каждого частого действия: одна толщина линии, один размер, цвет от
 * текста - кнопку на складе ищут глазами за полсекунды, читать слово некогда. Правило
 * было только в style.css, то есть только на самой станции; остальные страницы рисовали
 * кнопки словами. Здесь оно становится общим, и иконку можно ставить где угодно.
 *
 * Класс не нужен: любая svg внутри кнопки или ссылки берёт размер и цвет сама.
 */
button svg, a svg, label.drop svg, summary svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px;
}
/* Кнопка с иконкой держит их в строку и не даёт значку прилипнуть к букве. */
button:has(svg), a.go:has(svg) { display: inline-flex; align-items: center; gap: 7px; }

/* Плашка кабинета - общая на станции, у сборщика и на табло. */
.mp-wb { background: var(--mp-wb); }
.mp-ozon { background: var(--mp-ozon); }
.mp-ym { background: var(--mp-ym); }

/* ── синонимы: см. шапку файла ───────────────────────────────────────── */
:root {
  --card: var(--bg-2);
  --card-2: var(--bg-3);
  --panel: var(--bg-2);
  --panel2: var(--bg-3);
  --dim: var(--muted);
  --bad: var(--err);
  --bar: var(--brand);
  --violet: var(--mp-wb);
  --violet-soft: var(--brand-soft);
  --mint: var(--ok);
  --amber: var(--warn);
  --red: var(--err);
  --wb: var(--mp-wb);
  --ozon: var(--mp-ozon);
  --ym: var(--mp-ym);
}


/* ── СНИМКИ: плитка и окно ────────────────────────────────────────────────────
   Общая деталь склада: одинаково выглядит в приёмке, товароучёте и на любом новом
   экране (владелец 30.08.2026: «переиспользуя текущие css и js», «фото надо везде при
   нажатии как модалки открывать»). Разметку рисует public/sklad-ui.js. */
.shots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.shots img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px;
             border: 1px solid var(--line); cursor: zoom-in; display: block; }
.shot-big { position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,.82);
            display: flex; align-items: center; justify-content: center; cursor: zoom-out;
            padding: 24px; }
.shot-big figure { margin: 0; max-width: 94vw; max-height: 94vh; display: flex;
                   flex-direction: column; gap: 10px; align-items: center; }
.shot-big img { max-width: 94vw; max-height: 84vh; border-radius: 8px; }
.shot-big figcaption { color: #fff; font-size: 13px; text-align: center; }
.shot-big figcaption a { color: #fff; text-decoration: underline; }


/* ── ОКНО, ПОДСКАЗКА И ВСПЛЫВАЮЩАЯ СТРОКА ────────────────────────────────────
   Переехали из стилей приёмки в общий слой (агенты 30.08.2026): табло, лист сборщика и
   ручной скан физически не могли позвать общую деталь склада и каждый изобретал своё -
   системный alert, строку в шапке, журнал ответов. Теперь они есть на любой странице,
   где подключён public/sklad-ui.js. */
.dlg-fon { position: fixed; inset: 0; background: rgba(4,3,16,.62); z-index: 40;
           display: flex; align-items: center; justify-content: center; padding: 18px; }
.dlg { background: var(--bg-2); border: 1px solid var(--line-2);
       border-radius: var(--radius); max-width: 560px; width: 100%;
       box-shadow: 0 24px 60px rgba(0,0,0,.45); max-height: 90vh; overflow-y: auto; }
.dlg h4 { margin: 0; padding: 16px 20px 13px; font-size: 16px;
          border-bottom: 1px solid var(--line); }
.dlg .body { padding: 16px 20px; }
.dlg .body > .dim { margin-bottom: 12px; }
.dlg .foot { display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap;
             padding: 13px 20px 17px; border-top: 1px solid var(--line); }
.dlg .foot .go-btn { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Выбор одного из вариантов: крупные строки, а не выпадающий список - у стойки в
   перчатках попасть в строку проще, чем открыть список и попасть в пункт. */
.dlg .pick { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.dlg .pick button { text-align: left; width: 100%; justify-content: flex-start; }
.dlg .pick button.on { border-color: var(--brand);
                       background: color-mix(in srgb, var(--brand) 20%, transparent); }


 /* Подсказка при наведении - своя, а не системная. Системная всплывашка появляется через
   секунду, выглядит чужой и на планшете не появляется вовсе; здесь она мгновенная, в цветах
   сайта и открывается ещё и по фокусу с клавиатуры (владелец 30.08.2026: «подсказки при
   наведении всплывающие не системным окном, а в стиле сайта»). */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px); width: max-content; max-width: 260px;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12.5px; line-height: 1.45;
  font-weight: 400; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
  z-index: 40;
}
[data-tip]::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--line-2);
  opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 41;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after,
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::before, [data-tip]:focus-visible::before { transform: translateX(-50%); }
/* Под шапкой места нет: у верхних строк подсказка открывается ВНИЗ. Сторону выбирает
   маленький помощник в priemka.js - он меряет, сколько осталось до края. */
[data-tip][data-tip-pos="below"]::after { bottom: auto; top: calc(100% + 8px);
                                          transform: translateX(-50%) translateY(-4px); }
[data-tip][data-tip-pos="below"]::before { bottom: auto; top: calc(100% + 3px);
                                           border-top-color: transparent;
                                           border-bottom-color: var(--line-2); }
[data-tip][data-tip-pos="below"]:hover::after { transform: translateX(-50%) translateY(0); }
/* У края экрана подсказка уезжала за границу - крайние держим по своему краю. */
[data-tip][data-tip-side="left"]::after { left: 0; transform: none; }
[data-tip][data-tip-side="left"]:hover::after { transform: none; }
[data-tip][data-tip-side="right"]::after { left: auto; right: 0; transform: none; }
[data-tip][data-tip-side="right"]:hover::after { transform: none; }


 .toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px);
         /* Выше диалога: ответ станции на действие ИЗ окна должен быть виден.
            Нажатия полоса не ловит: она висит над нижней панелью и ГЛОТАЛА нажатие по
            главной кнопке первые секунды после действия (агенты 30.08.2026). */
         z-index: 120; pointer-events: none; max-width: min(560px, 92vw); padding: 12px 16px;
         border-radius: var(--radius-sm); border: 1px solid var(--line-2);
         background: var(--bg-2); color: var(--text); font-size: 13.5px; font-weight: 600;
         box-shadow: 0 12px 32px rgba(0,0,0,.34); opacity: 0;
         transition: opacity .2s ease, transform .2s ease; }
.toast.go { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: var(--err); color: var(--err); }
.toast.good { border-color: var(--ok); }



/* Видимый фокус на ВСЕХ страницах склада: у станции клавиатура - это сканер, и человек
   должен видеть, где он. Правило жило только в стилях приёмки, и на инструментах,
   штрихкодах, Авито и инструкции фокуса не было вовсе (агенты 30.08.2026). */
button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* На цветной шапке (градиент кабинета) фиолетовый контур фокуса сливается с фоном - там он
   белый, как уже сделано у шапки станции (.topbar :focus-visible) [ревью дизайна 30.09.2026]. */
header :is(button, a, select, summary, [tabindex]):focus-visible { outline-color: #fff; }