/* ============================================================================
   GoSmartSell — дизайн-система приложения.

   Принципы, из которых всё выведено:

   1. Экран продавца — рабочее место, а не витрина. Плотность важнее воздуха,
      но не ценой читаемости: шкала отступов кратна 4px, шрифтовая — фиксирована.
   2. Цифра — главный житель экрана. Числа выравниваются по правому краю и
      набираются табличными цифрами, иначе колонки «пляшут» и сравнивать
      строки глазами невозможно.
   3. Цвет — сигнал, а не украшение. Красный/жёлтый/зелёный означают ровно
      одно: «требует решения» / «стоит посмотреть» / «в норме». Больше нигде
      цвета нет, чтобы сигнал не размывался.
   4. Тёмная тема — не отдельная палитра, а другие значения тех же токенов.

   Шрифты только системные: CSP запрещает внешние источники (default-src 'self').
   ============================================================================ */

:root {
  /* Поверхности */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  /* Текст */
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --faint: #94a3b8;

  /* Смысловые цвета: только сигнал */
  --accent: #2563eb;
  --accent-ink: #1d4ed8;
  --accent-soft: #eff6ff;
  --red: #dc2626;
  --red-soft: #fef2f2;
  --amber: #d97706;
  --amber-soft: #fffbeb;
  --green: #059669;
  --green-soft: #ecfdf5;
  --violet: #7c3aed;
  --violet-soft: #f5f3ff;

  /* Ритм: всё кратно 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  --r1: 6px; --r2: 10px; --r3: 14px; --r4: 20px;

  /* Тени мягкие и низкоконтрастные: интерфейс плоский, тень лишь отделяет
     всплывающее от основного */
  --sh1: 0 1px 2px rgba(15, 23, 42, .04);
  --sh2: 0 4px 12px -2px rgba(15, 23, 42, .08);
  --sh3: 0 12px 32px -8px rgba(15, 23, 42, .18);

  --sidebar-w: 216px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120;
    --surface: #111827;
    --surface-2: #172033;
    --surface-3: #1e293b;
    --line: #24314a;
    --line-strong: #33415c;

    --ink: #e8edf5;
    --ink-2: #c3cddd;
    --muted: #93a3ba;
    --faint: #6b7c94;

    --accent: #60a5fa;
    --accent-ink: #93c5fd;
    --accent-soft: #16233c;
    --red: #f87171;
    --red-soft: #2a1618;
    --amber: #fbbf24;
    --amber-soft: #2a2113;
    --green: #34d399;
    --green-soft: #10241f;
    --violet: #a78bfa;
    --violet-soft: #1e1b33;

    --sh1: 0 1px 2px rgba(0, 0, 0, .3);
    --sh2: 0 4px 12px -2px rgba(0, 0, 0, .45);
    --sh3: 0 12px 32px -8px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.55 var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--s2); }
h2 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin: var(--s6) 0 var(--s3); }
/* На телефоне ничто не шире экрана: выпадающие списки с длинными пунктами
   и графики фиксированной ширины растягивали страницу вбок. */
select { max-width: 100%; }
svg, img, video { max-width: 100%; }
svg { height: auto; }
/* Заголовок первым в карточке — без верхнего отступа: карточка сама его даёт. */
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
h3 { font-size: 15px; font-weight: 650; margin: 0 0 var(--s3); }
h4 { font-size: 13px; font-weight: 650; margin: 0 0 var(--s2); }
p  { margin: 0 0 var(--s3); }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.lead  { color: var(--muted); font-size: 14px; max-width: 76ch; margin-bottom: var(--s5); }

/* ── Каркас: шапка + боковое меню + рабочая область ───────────────────────── */

.app { display: flex; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  height: 52px; padding: 0 var(--s5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar .brand {
  font-weight: 750; font-size: 15px; letter-spacing: -.02em;
  color: var(--ink); display: flex; align-items: center; gap: var(--s2);
}
.topbar .brand:hover { text-decoration: none; }
.topbar nav { display: flex; align-items: center; gap: var(--s4); font-size: 13px; }
.topbar nav a { color: var(--muted); }
.topbar nav a:hover { color: var(--ink); text-decoration: none; }

/* Боковое меню. Девятнадцать вкладок в один ряд читать невозможно —
   группируем по смыслу рабочего дня: сначала «что происходит», потом
   «чем управляю», в конце «что сделал автопилот». */
.side {
  position: sticky; top: 52px; align-self: flex-start;
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  height: calc(100vh - 52px); overflow-y: auto;
  padding: var(--s4) var(--s3) var(--s7);
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.side .grp {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
  padding: var(--s4) var(--s3) var(--s1);
}
.side .grp:first-child { padding-top: 0; }
.side a {
  display: flex; align-items: center; gap: var(--s2);
  padding: 7px var(--s3); border-radius: var(--r1);
  color: var(--ink-2); font-size: 13.5px; line-height: 1.3;
}
.side a:hover { background: var(--surface-3); text-decoration: none; color: var(--ink); }
.side a.on {
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 600;
}
.side a .tail { margin-left: auto; }
.side .side-mode { margin: 14px 10px 0; padding-top: 10px; border-top: 1px solid var(--line, #e5e7eb); }
.side .side-mode button { color: var(--muted, #6b7280); }
/* Активный пункт отмечен и полосой слева: одного фона мало на светлом фоне
   при беглом взгляде. */
.side a.on { box-shadow: inset 2px 0 0 var(--accent); }

.work { flex: 1; min-width: 0; padding: var(--s6) var(--s6) var(--s8); }
.work > .inner { max-width: 1180px; margin: 0 auto; }

/* Полоса состояния кабинета под шапкой */
.cabbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s6);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.cabbar .name { font-weight: 650; }
.cabbar .spacer { flex: 1; }

/* ── Карточки и секции ───────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s5);
  margin-bottom: var(--s4);
  box-shadow: var(--sh1);
}
.card > :last-child { margin-bottom: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .head { padding: var(--s4) var(--s5); }
.card.flush table { border: 0; border-radius: 0; }

.head {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s4);
}
.head h3 { margin: 0; }
.head .spacer { flex: 1; }
.head .note { font-size: 12.5px; color: var(--muted); }

/* Акцентная полоса слева — только для того, что требует решения */
.card.alert { border-left: 3px solid var(--red); }
.card.warnish { border-left: 3px solid var(--amber); }
.card.okish { border-left: 3px solid var(--green); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }

/* ── Плитки показателей ──────────────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r2); padding: var(--s4);
}
.stat .label {
  font-size: 11.5px; color: var(--muted); font-weight: 550;
  text-transform: uppercase; letter-spacing: .04em;
  display: block; margin-bottom: var(--s1);
}
.stat .value {
  font-size: 23px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.15; font-variant-numeric: tabular-nums;
  display: block;
}
.stat .sub { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
.stat.bad .value { color: var(--red); }
.stat.good .value { color: var(--green); }

.delta { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.delta.flat { color: var(--muted); }

/* ── Таблицы ─────────────────────────────────────────────────────────────── */

.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); font-size: 13.5px;
}
th, td {
  padding: 9px var(--s3);
  border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: middle;
}
th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2);
  font-size: 11.5px; font-weight: 650; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
tbody tr:hover td { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }

/* Числа — вправо и табличными цифрами: иначе колонку не прочитать взглядом */
td.n, th.n, .num { text-align: right; font-variant-numeric: tabular-nums; }
td.n b { font-weight: 650; }

.name-cell { min-width: 180px; }
.name-cell b { display: block; font-weight: 600; }
.name-cell span { font-size: 12px; color: var(--faint); }

/* Цветовая индикация: подсвечиваем ТОЛЬКО то, что ведёт себя нестандартно
   и требует внимания. Ровный фон везде — значит сигнала нет. */
td.bad  { color: var(--red); font-weight: 650; }
td.good { color: var(--green); font-weight: 650; }
tr.rowbad td:first-child { box-shadow: inset 3px 0 0 var(--red); }
tr.rowwarn td:first-child { box-shadow: inset 3px 0 0 var(--amber); }

/* ── Метки ───────────────────────────────────────────────────────────────── */

.badge, .pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
  background: var(--surface-3); color: var(--ink-2);
}
/* Плашки с длинным текстом (уведомления, объяснения) переносятся, а не
   вылезают за край экрана: на телефоне nowrap растягивал страницу вбок. */
p.badge, div.badge, .badge.long { white-space: normal; overflow-wrap: break-word;
  max-width: 100%; }
p.badge, div.badge { display: flex; border-radius: var(--r1); padding: 6px 10px;
  line-height: 1.45; font-weight: 600; }
/* Таблица с длинным текстом на телефоне — карточками: четыре узкие колонки
   превращали «Почему» в столбик по слову и прятали его за край. */
@media (max-width: 640px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr:first-child { display: none; }
  table.stack tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.stack td { border: 0; padding: 2px 12px; }
}
.badge.red, .pill.red { background: var(--red-soft); color: var(--red); }
.badge.yellow, .pill.amber { background: var(--amber-soft); color: var(--amber); }
.badge.green, .pill.green { background: var(--green-soft); color: var(--green); }
.badge.blue, .pill.blue { background: var(--accent-soft); color: var(--accent-ink); }
.badge.violet { background: var(--violet-soft); color: var(--violet); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.green { background: var(--green); }
.dot.red { background: var(--red); }
.dot.amber { background: var(--amber); }

.status { font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
          background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.status-error { background: var(--red-soft); color: var(--red); }
.status-ready { background: var(--green-soft); color: var(--green); }
.status-syncing { background: var(--amber-soft); color: var(--amber); }

/* Уровни автономии */
.lbar { display: inline-flex; gap: 3px; }
.lchip { padding: 2px 7px; border-radius: var(--r1); font-size: 11px; font-weight: 700;
         background: var(--accent-soft); color: var(--accent-ink); }
.lchip.l0 { background: var(--surface-3); color: var(--muted); }
.lchip.l3, .lchip.l4 { background: var(--green-soft); color: var(--green); }

/* ── Сообщения ───────────────────────────────────────────────────────────── */

.note-box {
  border-radius: var(--r2); padding: var(--s3) var(--s4);
  margin-bottom: var(--s4); font-size: 13.5px;
  border: 1px solid transparent;
}
.error, .note-box.error { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.warn, .note-box.warn { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.info, .note-box.info { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.error, .warn { border-radius: var(--r2); padding: var(--s3) var(--s4); margin-bottom: var(--s4);
                border-width: 1px; border-style: solid; font-size: 13.5px; }

/* Пустое состояние: объясняет, почему пусто и что сделать. Молчащая
   страница — худший ответ, какой может дать интерфейс. */
.empty {
  text-align: center; padding: var(--s7) var(--s5);
  color: var(--muted);
}
.empty .ic { font-size: 26px; opacity: .5; display: block; margin-bottom: var(--s2); }
.empty b { display: block; color: var(--ink); font-size: 14.5px; margin-bottom: var(--s1); }
.empty p { max-width: 52ch; margin: 0 auto; font-size: 13px; }

/* ── Формы и кнопки ──────────────────────────────────────────────────────── */

label { display: block; margin: var(--s3) 0 var(--s1); font-weight: 600; font-size: 12.5px;
        color: var(--ink-2); }
label.consent { font-weight: 400; font-size: 12.5px; line-height: 1.5; }

input, select, textarea {
  padding: 8px var(--s3); border: 1px solid var(--line-strong);
  border-radius: var(--r1); font-size: 13.5px; width: 100%;
  background: var(--surface); color: var(--ink); font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
input.narrow { width: 92px; }
textarea { line-height: 1.5; }

button {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: var(--r1); padding: 7px var(--s4); cursor: pointer;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
}
button:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.err-box { border-left: 3px solid var(--red); background: var(--surface-2, rgba(0,0,0,.03));
  padding: 8px 12px; border-radius: var(--r1); margin: 6px 0; font-size: 13.5px; }
a.btn { display: inline-block; background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: var(--r1); padding: 7px var(--s4); font-size: 13.5px; font-weight: 600; }
a.btn:hover { background: var(--accent-ink); text-decoration: none; }
button.ghost { background: transparent; color: var(--accent); }
button.ghost:hover { background: var(--accent-soft); }
button.quiet { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
button.quiet:hover { background: var(--surface-3); color: var(--ink); }
button.danger { background: var(--red); border-color: var(--red); }
button.danger:hover { background: #b91c1c; border-color: #b91c1c; }
button.small { padding: 4px var(--s3); font-size: 12.5px; }
button.linklike { background: transparent; color: inherit; border: 0; padding: 0;
                  font-size: inherit; text-decoration: underline; font-weight: 400; }
form.inline { display: inline; }

/* Переключатель периода/режима — паттерн «рубли ↔ доли» */
.seg { display: inline-flex; background: var(--surface-3); border-radius: var(--r1); padding: 2px; }
.seg a {
  padding: 4px var(--s3); border-radius: var(--r1) ; font-size: 12.5px;
  color: var(--muted); font-weight: 600;
}
.seg a:hover { text-decoration: none; color: var(--ink); }
.seg a.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh1); }

.filterbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;
             margin-bottom: var(--s3); }
.filterbar input, .filterbar select { width: auto; }
.bulkbar { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.pager { display: flex; gap: var(--s4); align-items: center; justify-content: center;
         padding: var(--s3); }
.statusline { display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }

.chip { display: inline-flex; gap: 4px; align-items: center; background: var(--accent-soft);
        border-radius: var(--r1); padding: 3px var(--s3); font-size: 12.5px; }
.chip a { color: var(--accent-ink); font-weight: 600; }

details { margin: var(--s2) 0; }
summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }

pre.report {
  white-space: pre-wrap; font: 13px/1.6 var(--mono);
  background: var(--surface); padding: var(--s5); border-radius: var(--r3);
  border: 1px solid var(--line);
}
.checklist { list-style: none; margin: var(--s2) 0 0; padding: 0; line-height: 2; }
.kpis { display: flex; gap: var(--s6); flex-wrap: wrap; }
.kpi b { display: block; font-size: 21px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12.5px; color: var(--muted); }
.auth { max-width: 380px; margin: 8vh auto; }
.legal { max-width: 74ch; line-height: 1.7; }
.legal h3 { margin-top: var(--s6); }
.rec-title { font-weight: 600; }
.plans { display: flex; gap: var(--s4); flex-wrap: wrap; margin: var(--s4) 0; }
.plan { flex: 1 1 220px; max-width: 280px; }
/* Карточки в ряду — одной ширины; на телефоне — во всю ширину. */
.plans > .card { flex: 1 1 200px; min-width: 0; }
.plan .price { font-size: 20px; margin: var(--s2) 0 var(--s3); font-weight: 700; }
.plan ul { margin: 0 0 var(--s3) 18px; padding: 0; font-size: 13px; line-height: 1.8; }
footer.appfoot { padding: var(--s6); text-align: center; font-size: 12.5px; color: var(--faint); }
footer.appfoot a { color: var(--muted); }

/* ── Мобильный слой ──────────────────────────────────────────────────────── */

.menu-btn { display: none; background: transparent; border: 1px solid var(--line-strong);
            color: var(--ink); padding: 4px 10px; }

@media (max-width: 900px) {
  .menu-btn { display: inline-block; }
  .app { display: block; }
  /* Меню уезжает в выдвижную панель: на телефоне рабочая площадь дороже
     постоянной навигации. */
  .side {
    position: fixed; top: 52px; left: 0; bottom: 0; z-index: 25;
    width: 260px; transform: translateX(-100%);
    transition: transform .18s ease; box-shadow: var(--sh3);
    height: auto;
  }
  .side.open { transform: none; }
  .scrim { display: none; position: fixed; inset: 52px 0 0 0; z-index: 24;
           background: rgba(2, 6, 23, .45); }
  .scrim.on { display: block; }
  .work { padding: var(--s4) var(--s4) var(--s7); }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
  /* Шапка не должна переноситься: логотип уезжал на вторую строку и ломал
     высоту. Вторичное прячем, остальное ужимаем. */
  .topbar { padding: 0 var(--s3); gap: var(--s2); flex-wrap: nowrap; }
  .topbar nav { gap: var(--s3); font-size: 12.5px; }
  .topbar nav .hide-sm { display: none; }
  .topbar .brand { font-size: 14px; }
  .topbar .brand-word { display: none; }
  .cabbar { padding: var(--s3) var(--s4); }
  h1 { font-size: 20px; }
  .stat .value { font-size: 20px; }
  table { font-size: 13px; }
  th, td { padding: 8px var(--s2); }
  /* Запасной горизонтальный скролл для таблиц без обёртки .tw: на телефоне
     широкая таблица иначе растягивает всю страницу и ломает вёрстку. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th { position: static; }
}

@media print {
  .side, .topbar, .menu-btn, .scrim { display: none; }
  .work { padding: 0; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* Сборка с телефона: крупные цели под палец, статус сканера на виду. */
.pack .pack-big { width: 100%; min-height: 52px; font-size: 17px; }
.pack .pack-status { font-size: 16px; margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); }
.pack .pack-status.good { background: var(--green-soft); color: var(--green); }
.pack .pack-status.bad { background: var(--red-soft); color: var(--red); }
.pack .pack-code { display: flex; gap: 8px; margin-top: 10px; }
.pack .pack-code input { flex: 1; min-width: 0; font-size: 17px; }
.pack .pack-cam video { width: 100%; max-height: 50vh; border-radius: 8px; background: #000; }
.pack .pack-order.hot { border-left: 4px solid var(--red); }
.pack .pack-order.active { outline: 2px solid var(--accent); }
.pack .pack-order.complete { border-left: 4px solid var(--green); }
.pack .pack-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pack .pack-progress { margin-left: auto; font-weight: 600; }
.pack .pack-items { list-style: none; padding: 0; margin: 8px 0 12px; }
.pack .pack-items li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.pack .pack-items li.ok .pack-count { background: var(--green-soft); color: var(--green); }
.pack .pack-count { min-width: 44px; text-align: center; padding: 4px 6px; border-radius: 6px; background: var(--amber-soft); font-weight: 600; }
.pack .pack-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }