:root {
  --ok: #1e8e3e;
  --err: #d93025;
  --warn: #e8710a;
  --bg: #f5f6f8;
  --card: #ffffff;
  --border: #d7dbe0;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  margin: 0;
  color: #1a1a1a;
}

/* Общее левое меню (index.html/labels.html) - 2026-08-23, добавлено по
   просьбе владельца, чтобы между разделами можно было переключаться прямо
   в открытой странице, а не только заново запускать нужную кнопку в
   Telegram. Внутри одного Telegram WebView cookie-сессия (см. app.py
   require_auth) уже есть после первого захода по ?key=..., так что обычные
   <a href> между страницами работают без токена в каждой ссылке. */
.app-layout { display: flex; min-height: 100vh; }
.app-sidebar {
  /* owner 2026-09-13: ширина подстраивается под содержимое, чтобы ВСЕ надписи
     (и крупные заголовки разделов, и длинные ссылки) влезали в одну строку. */
  flex: 0 0 auto;
  width: max-content;
  min-width: 200px;
  max-width: 60vw;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 16px 0;
}
/* owner 2026-09-13: ничего не переносим на вторую строку в меню */
.app-sidebar a,
.app-sidebar .nav-section-label,
.app-sidebar button.nav-group-toggle { white-space: nowrap; }
.app-sidebar .brand { padding: 0 16px 12px; font-weight: bold; font-size: 1.05rem; }
.app-sidebar nav { display: flex; flex-direction: column; }
/* Раздел сайдбара (owner 2026-08-27: "сделать раздел работа с ФБС
   заказами") - просто подпись-заголовок над группой ссылок, сам список
   остаётся плоским <nav> (никакой вложенности/сворачивания не просили). */
.app-sidebar .nav-section-label {
  /* owner 2026-09-13: заголовки разделов крупнее в 3 раза (0.72rem → 2.16rem) */
  padding: 12px 16px 4px; font-size: 2.16rem; line-height: 1.15; font-weight: bold; color: #888;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.app-sidebar .nav-section-label:first-child { padding-top: 0; }
.app-sidebar a {
  padding: 10px 16px;
  text-decoration: none;
  color: #1a1a1a;
  border-left: 3px solid transparent;
}
.app-sidebar a:hover { background: #eef; }
.app-sidebar a.active { border-left-color: var(--ok); background: #eef7ee; font-weight: bold; }

/* owner 2026-09-08: 4 верхних раздела меню (Склад/Wildberries/Авито/Детский мир
   + Управление) — сворачиваемые группы, раскладываются серверной инъекцией
   _nav_sections_script (app.py), сами static/*.html не трогаем. */
.app-sidebar .nav-group-body { display: flex; flex-direction: column; }
.app-sidebar button.nav-group-toggle {
  display: block; width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; font-family: inherit;
}
.app-sidebar button.nav-group-toggle::after { content: " ▾"; color: #bbb; }
.app-sidebar .nav-group.collapsed .nav-group-toggle::after { content: " ▸"; }
.app-sidebar .nav-group.collapsed .nav-group-body { display: none; }
.app-main { flex: 1; min-width: 0; padding: 0 16px 40px; }

@media (max-width: 640px) {
  .app-layout { flex-direction: column; }
  .app-sidebar { flex: 0 0 auto; width: auto; max-width: none; border-right: none; border-bottom: 1px solid var(--border); padding: 8px 0; }
  .app-sidebar .nav-section-label { font-size: 1.1rem; }  /* на телефоне не раздуваем */
  .app-sidebar .brand { display: none; }
  .app-sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .app-sidebar a { border-left: none; border-bottom: 3px solid transparent; }
  .app-sidebar a.active { border-left-color: transparent; border-bottom-color: var(--ok); }
  .app-sidebar .nav-section-label { flex-basis: 100%; padding: 6px 16px 2px; }
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

h1 { font-size: 1.4rem; margin: 0; }

/* owner 2026-09-08: название и номер поставки крупно над прогресс-баром. */
.supply-title {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  margin: 4px 0 12px;
  padding: 10px 14px;
  background: #eef4ff;
  border: 1px solid #c7dbff;
  border-radius: 8px;
  color: #12325e;
  word-break: break-word;
}
.supply-title .supply-num {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: #3a5a8c;
  margin-top: 2px;
}

.screen { max-width: 900px; margin: 0 auto; }
.hidden { display: none !important; }

button {
  font-size: 1rem;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
}
button.danger { border-color: var(--err); color: var(--err); }
button.primary { border-color: var(--ok); color: var(--ok); }
button.large { font-size: 1.15rem; padding: 16px 22px; font-weight: bold; }
button:hover { background: #eee; }

/* Общий приём для строки из нескольких кнопок (уже был по копии в boxes.html/
   supplies.html inline <style> — вынесено сюда 2026-08-24, чтобы index.html
   тоже мог использовать без дублирования). */
.action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Модалка (owner 2026-08-30, "должно появляться окно завершить сеанс и
   отправить по КИЗ") — та же разметка, что уже трижды продублирована инлайн
   в boxes.html/print_fbs.html/reshipment.html; здесь выносится в общий
   style.css вместо очередной копии. Существующие 3 инлайн-копии не
   трогаем — те же имена классов, правила не конфликтуют. */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--card); border-radius: 10px; padding: 20px 24px;
  max-width: 420px; width: 90%; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.modal-box h3 { margin-top: 0; }
.modal-box .action-row { flex-direction: column; gap: 10px; }
.modal-box .action-row button { width: 100%; }

ul { list-style: none; padding: 0; margin: 8px 0; }
li {
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
}
li:hover { background: #eef; }

.hint { color: #666; }
.error { color: var(--err); font-weight: bold; }

#progress-bar-wrap {
  height: 20px;
  background: #e2e5e9;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 12px;
}
#progress-bar {
  height: 100%;
  width: 0%;
  background: var(--ok);
  transition: width 0.3s ease;
}

#progress-counts {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 10px 0 20px;
  font-size: 1rem;
}
#progress-counts span { padding: 4px 10px; border-radius: 6px; background: var(--card); border: 1px solid var(--border); }

#scan-input {
  width: 100%;
  font-size: 1.6rem;
  padding: 16px;
  border-radius: 10px;
  border: 2px solid var(--border);
  margin-bottom: 12px;
}
#scan-input:focus { outline: none; border-color: #4285f4; }

#feedback {
  font-size: 1.3rem;
  font-weight: bold;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
  transition: background 0.15s ease;
}
.feedback-idle { background: var(--card); color: #555; }
.feedback-ok { background: #d8f5df; color: var(--ok); }
.feedback-warn { background: #fde5cc; color: var(--warn); }
.feedback-err { background: #fbdad7; color: var(--err); }

.columns { display: flex; gap: 24px; flex-wrap: wrap; }
.col { flex: 1; min-width: 280px; }

.col li { font-size: 0.9rem; }
/* owner 2026-08-25: галка "Печать стикеров" в "Ещё не укомплектовано" —
   выравниваем по базовой линии текста вместо стандартного смещения вниз. */
#pending-list li { display: flex; align-items: center; gap: 4px; }
#pending-list input.pending-select { flex: none; margin: 0; }

/* Мини-фото товара в списках «Сборка ФБС» (owner 2026-09-03). Грузится
   лениво с сервера (/api/photo/<nmID>, серверный кэш) — loading="lazy",
   поэтому фото вне экрана не тормозят загрузку страницы. */
.row-thumb {
  flex: none; width: 40px; height: 40px; object-fit: cover;
  border-radius: 6px; background: #f2f4f7; border: 1px solid #e2e5ea;
}

.row-actions { margin-left: auto; display: flex; gap: 4px; }
.row-btn {
  font-size: 0.85rem;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
}
.row-btn:hover { background: #eee; }
#complete-list li { display: flex; align-items: center; gap: 4px; }

/* "2 ТЧ" (owner 2026-08-24): заказ переезжает из "Ещё не укомплектовано" в
   "Укомплектовано" при успехе — короткая подсветка на новой строке, чтобы
   визуально было видно, что именно это ПРОШЛО СЕЙЧАС, а не просто тихо
   появилось в списке. */
@keyframes flash-completed {
  from { background: var(--ok); color: #fff; }
  to { background: transparent; color: inherit; }
}
#complete-list li.just-completed {
  animation: flash-completed 1.6s ease-out;
  border-radius: 4px;
}

/* owner 2026-08-24: "После скана стикера ФБС строка с заказом должно
   выделяться" — постоянная (не гаснущая) подсветка, пока заказ остаётся в
   "Ещё не укомплектовано" со стикером/штрихкодом уже подтверждённым — видно,
   над каким заказом сейчас идёт работа, отличается от простого "ожидает". */
#pending-list li.sticker-scanned {
  background: #fde5cc;
  border-left: 3px solid var(--warn);
  padding: 4px 6px;
  border-radius: 4px;
}

#finish-files li { cursor: default; }
#finish-files a { text-decoration: none; font-weight: bold; }

/* owner 2026-09-01: карточка последнего отсканированного товара (фото + nmID +
   размер). Крупное фото — оператору видно, тот ли товар в руках. */
#scanned-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0;
  padding: 10px 14px;
  background: #f4f9ff;
  border: 1px solid #b9d6f2;
  border-radius: 8px;
  flex-wrap: wrap;  /* owner 2026-09-02: крупное фото не сжимает текст на узком экране */
}
#scanned-item-photo {
  width: 200px;   /* owner 2026-09-02: «фото ещё крупнее» — 96 → 200 px */
  height: 200px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #dbe6f0;
  border-radius: 6px;
  flex: 0 0 auto;
}
.scanned-item-info { line-height: 1.5; }
.scanned-item-info .scanned-item-nm { font-size: 1.15rem; }
.scanned-item-info .scanned-item-size b { font-size: 1.25rem; }
.scanned-item-info .scanned-item-vc { color: #556; font-size: 0.9rem; }

/* owner 2026-09-01: крупные «бегающие часы» на время поиска заказа. */
#scan-spinner {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
}
.scan-spinner-box { text-align: center; color: #fff; }
.scan-spinner-clock {
  font-size: clamp(5rem, 26vw, 13rem);
  line-height: 1;
  animation: scan-clock-spin 1s steps(12, end) infinite;
}
.scan-spinner-text {
  margin-top: 14px;
  font-size: clamp(1.3rem, 5vw, 2.2rem);
  font-weight: 700;
}
@keyframes scan-clock-spin { to { transform: rotate(360deg); } }