/* ============================================================================
   mp-admin — дизайн-система. Родня FBS.PROFI WMS: та же геометрия, та же
   плотность, тот же приём «линии вместо теней». Отличие одно и намеренное —
   тон. У WMS кирпичный бордо #9B1C1C на тёплой нейтрали; у хаба гранатовый
   #93132E на холодной. С одного взгляда видно, что это разные системы одной
   семьи, и никто не путает счёт с рабочим экраном склада.

   Всё через переменные. Цвет, вбитый в правило мимо токена, — ошибка:
   продукт красится вторым набором токенов, и такой цвет останется гранатовым.
   ========================================================================== */

/* ── Inter, свой хостинг ──────────────────────────────────────────────────────
   Вариативный: один файл на все веса 400–700 вместо восьми. WMS тянет Inter с
   Google Fonts, но mp-admin — страница оплаты: сторонний запрос в момент ввода
   карты не нужен, да и до части клиентов CDN доезжает через раз.
   Кириллица 18 КБ, латиница 48 КБ, подмножества разнесены по unicode-range. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/inter-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* ── Гранатовый: фирменный тон хаба ───────────────────────────────────── */
  --brand-900:#4A0A1B;
  --brand-800:#6B0E22;
  --brand-700:#7E1129;
  --brand-600:#93132E;   /* рабочий: кнопки, активный пункт меню, выделение */
  --brand-500:#B8425C;
  --brand-100:#F2D8DF;
  --brand-050:#FBF0F3;

  /* ── Холодная нейтраль ────────────────────────────────────────────────── */
  --bg:#F5F5F7;
  --surface:#FFFFFF;
  --surface-2:#FAFAFB;
  --surface-3:#EFEFF2;
  --line:#E3E3E8;
  --line-2:#D1D1D9;
  --ink-1:#17171B;
  --ink-2:#3F3F46;
  --ink-3:#71717A;
  --ink-4:#6C6C75;
  --icon-mute:#8A8A93;

  /* ── Смыслы. Общие с WMS намеренно: «проблема» и «готово» должны выглядеть
        одинаково во всех наших системах, иначе человек переучивается. ─────── */
  --alert:#96500A;
  --alert-strong:#7C4206;
  --alert-bg:#FCEEDA;
  --alert-line:#EBC58D;
  --ok:#1B7A4B;
  --ok-bg:#E7F4ED;
  --ok-mute:#4F7A5B;
  --err:#A3182C;
  --err-bg:#FBECEE;

  /* ── Цвета продуктов. Живут ТОЛЬКО точкой и левой риской на плитке: сама
        плитка остаётся белой, иначе витрина из семи продуктов — радуга. ───── */
  --p-ozon:#005BFF;
  --p-wb:#7F3FBF;
  --p-ym:#FFCC00;
  --p-wms:#9B1C1C;   /* кирпичный бордо самого FBS.PROFI */
  --p-bsp:#0F7B6C;
  --p-pack:#B45309;
  --p-chz:#334155;

  /* ── Геометрия — ровно как в WMS ──────────────────────────────────────── */
  --r-xs:2px;
  --r-sm:3px;
  --r-md:4px;
  --row-h:40px;
  --head-h:52px;
  --rail-h:3px;
  --sidebar-w:216px;
  --wrap:1120px;

  /* ── Типографика ──────────────────────────────────────────────────────── */
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:"Inter",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --fs-xs:12px;
  --fs-sm:12px;
  --fs-md:13px;
  --fs-lg:14px;
  --fs-xl:18px;
  --fs-2xl:20px;

  --focus:0 0 0 2px #FFFFFF,0 0 0 4px var(--brand-600);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink-1);
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1,"ss01" 1;
  /* Колонка на всю высоту: на коротких страницах (404, вход) подвал иначе
     повисает посреди экрана. */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body>main{flex:1 0 auto}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand-700);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus)}
/* Числа выравниваются в колонку: 1 занимает столько же места, сколько 8. */
.num,.money{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.muted{color:var(--ink-3)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ══════════════════════════ Верхняя полоса ══════════════════════════════ */
.rail{height:var(--rail-h);background:var(--brand-800)}

/* ═════════════════════════════ Шапка ════════════════════════════════════ */
.topbar{
  height:var(--head-h);
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:20px;
  padding:0 16px;
  position:sticky;top:0;z-index:40;
}
.topbar.is-wide{padding:0}
.topbar.is-wide>.wrap{display:flex;align-items:center;gap:20px;width:100%}
.brand{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none}
.brand:hover{text-decoration:none}
.wordmark{
  font-size:15px;font-weight:700;letter-spacing:.02em;
  color:var(--brand-800);white-space:nowrap;
}
.wordmark span{color:var(--ink-3);font-weight:600}
.topnav{display:flex;align-items:center;gap:2px}
.topnav a{
  height:30px;padding:0 10px;display:inline-flex;align-items:center;
  border-radius:var(--r-sm);color:var(--ink-2);font-size:var(--fs-md);
}
.topnav a:hover{background:var(--surface-3);text-decoration:none}
.topnav a.is-active{color:var(--brand-800);font-weight:600;background:var(--brand-050)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.avatar-btn{
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line-2);
  background:var(--surface-3);
  color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,border-color .12s,color .12s;
}
.avatar-btn:hover{background:var(--brand-050);border-color:var(--brand-500);color:var(--brand-700)}

/* ════════════════════════════ Каркас ════════════════════════════════════ */
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - var(--head-h) - var(--rail-h))}
.sidebar{
  width:var(--sidebar-w);flex:none;
  background:var(--surface);
  border-right:1px solid var(--line);
  min-height:calc(100vh - var(--head-h) - var(--rail-h));
  max-height:calc(100vh - var(--head-h) - var(--rail-h));
  padding:10px 0 8px;
  display:flex;flex-direction:column;
  position:sticky;top:var(--head-h);
  overflow-y:auto;
}
.nav-group{padding:0 8px;margin-bottom:12px}
.nav-title{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;
  color:var(--ink-4);text-transform:uppercase;
  padding:6px 8px 5px;
}
.nav-item{
  display:flex;align-items:center;gap:9px;
  height:30px;padding:0 8px 0 9px;
  border-radius:var(--r-sm);
  color:var(--ink-2);text-decoration:none;
  font-size:var(--fs-md);
  border-left:2px solid transparent;
  margin-bottom:1px;
  width:100%;background:none;border-top:none;border-right:none;border-bottom:none;
  text-align:left;
}
.nav-item:hover{background:var(--surface-3);text-decoration:none}
.nav-item .ic{color:var(--ink-4);flex:none}
.nav-item.is-active{
  background:var(--brand-050);
  color:var(--brand-800);
  font-weight:600;
  border-left-color:var(--brand-600);
}
.nav-item.is-active .ic{color:var(--brand-600)}
.nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-badge{
  flex:none;min-width:22px;height:17px;padding:0 5px;
  border-radius:var(--r-xs);
  background:var(--surface-3);color:var(--ink-2);
  font-size:var(--fs-xs);font-weight:600;
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;
}
.nav-item.is-active .nav-badge{background:var(--brand-600);color:#FFFFFF}
.nav-sep{height:1px;background:var(--line);margin:2px 16px 10px}
.nav-bottom{margin-top:auto;padding:0 8px}
.main{flex:1;min-width:0;padding:16px 18px 28px}

/* ═══════════════════════ Заголовок страницы ═════════════════════════════ */
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px}
.page-title{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.01em;margin:0 0 4px}
.page-sub{font-size:var(--fs-md);color:var(--ink-3);margin:0}
.page-sub b{color:var(--ink-2);font-weight:600}
.page-actions{margin-left:auto;display:flex;align-items:center;gap:8px;padding-top:2px}
.page-note{
  display:inline-flex;align-items:flex-start;gap:6px;
  margin-top:7px;font-size:var(--fs-sm);color:var(--ink-3);
  background:var(--surface);
  border:1px solid var(--line);
  border-left:2px solid var(--brand-500);
  border-radius:var(--r-sm);
  padding:5px 9px;
}
.page-note .ic{color:var(--brand-600);flex:none;margin-top:1px}

/* ════════════════════════════ Кнопки ════════════════════════════════════ */
.btn{
  height:32px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:var(--r-md);
  border:1px solid var(--line-2);
  background:var(--surface);
  color:var(--ink-1);
  font-size:var(--fs-md);font-weight:500;
  white-space:nowrap;text-decoration:none;
  transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--surface-3);text-decoration:none}
.btn .ic{color:var(--ink-3)}
.btn:disabled{color:var(--ink-4);background:var(--surface-2);cursor:default}
.btn-primary{background:var(--brand-600);border-color:var(--brand-600);color:#FFFFFF;font-weight:600}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700)}
.btn-primary .ic{color:#FFFFFF}
.btn-primary:disabled{background:var(--brand-500);border-color:var(--brand-500);color:#FFFFFF;opacity:.6}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-3)}
.btn-lg{height:38px;padding:0 18px;font-size:var(--fs-lg)}
.btn-danger{color:var(--err);border-color:var(--line-2)}
.btn-danger:hover{background:var(--err-bg);border-color:var(--err)}

/* ═════════════════════════ Строка сводки ═══════════════════════════════ */
.summary{
  display:flex;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  margin-bottom:12px;
  overflow:hidden;
}
.sum-cell{flex:1 1 0;min-width:0;padding:9px 14px;border-right:1px solid var(--line)}
.sum-cell:last-child{border-right:none}
.sum-label{
  font-size:var(--fs-xs);color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:3px;
}
.sum-value{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.sum-cell.is-total .sum-value{color:var(--brand-800)}
.sum-cell.is-alert{background:var(--alert-bg)}
.sum-cell.is-alert .sum-label{color:var(--alert-strong)}
.sum-cell.is-alert .sum-value{color:var(--alert)}

/* ════════════════════════ Панель управления ════════════════════════════ */
.toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:8px 10px;
  margin-bottom:10px;
}
.tool-spacer{margin-left:auto}
.field{position:relative;display:inline-flex;align-items:center}
.field .ic-lead{position:absolute;left:9px;color:var(--ink-4);pointer-events:none}
.input,.select{
  height:30px;
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  background:var(--surface);
  padding:0 10px;
  font-size:var(--fs-md);
}
.input.has-ic{padding-left:30px}
.input::placeholder{color:var(--ink-4)}
.input:hover,.select:hover{border-color:var(--ink-4)}
.select{
  padding:0 26px 0 10px;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;
}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;height:30px}
.seg button{
  height:100%;padding:0 12px;border:none;background:var(--surface);
  color:var(--ink-2);font-size:var(--fs-md);border-right:1px solid var(--line-2);
}
.seg button:last-child{border-right:none}
.seg button:hover{background:var(--surface-3)}
.seg button[aria-pressed="true"]{background:var(--brand-600);color:#FFFFFF;font-weight:600}

/* ═══════════════════════════ Таблица ════════════════════════════════════ */
.table-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.table-scroll{overflow-x:auto}
table.grid{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-md)}
.grid thead th{
  background:var(--surface-2);
  border-bottom:1px solid var(--line-2);
  color:var(--ink-3);
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;text-align:left;
  padding:0 10px;height:32px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.grid tbody td{
  height:var(--row-h);padding:0 10px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;color:var(--ink-1);
}
.grid tbody tr:hover td{background:var(--surface-2)}
.grid tbody tr:last-child td{border-bottom:none}
.grid td.c-num,.grid th.c-num{text-align:right;font-variant-numeric:tabular-nums}
.grid td.c-mid,.grid th.c-mid{text-align:center}
.table-foot{
  display:flex;align-items:center;gap:12px;
  padding:8px 12px;border-top:1px solid var(--line);
  background:var(--surface-2);font-size:var(--fs-md);color:var(--ink-3);
}
.table-foot b{color:var(--ink-1);font-weight:600;font-variant-numeric:tabular-nums}

/* ═══════════════════════ Карточка-лист (панель) ════════════════════════ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.card-head{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.card-title{font-size:var(--fs-lg);font-weight:600;margin:0}
.card-body{padding:14px}
.card-foot{padding:10px 14px;border-top:1px solid var(--line);background:var(--surface-2);display:flex;align-items:center;gap:8px}

/* ══════════════════════════ Заметки ═══════════════════════════════════ */
.note{
  display:flex;align-items:flex-start;gap:8px;
  border:1px solid var(--line);border-left-width:2px;
  border-radius:var(--r-sm);
  padding:9px 12px;font-size:var(--fs-sm);color:var(--ink-2);
  background:var(--surface);
}
.note .ic{flex:none;margin-top:1px}
.note-info{border-left-color:var(--brand-500)}
.note-info .ic{color:var(--brand-600)}
.note-alert{background:var(--alert-bg);border-color:var(--alert-line);border-left-color:var(--alert);color:var(--alert-strong)}
.note-alert .ic{color:var(--alert)}
.note-ok{background:var(--ok-bg);border-left-color:var(--ok);color:var(--ok)}
.note-err{background:var(--err-bg);border-left-color:var(--err);color:var(--err)}

/* ══════════════════════════ Значки ════════════════════════════════════ */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  height:20px;padding:0 7px;border-radius:var(--r-xs);
  background:var(--surface-3);color:var(--ink-2);
  font-size:var(--fs-xs);font-weight:600;white-space:nowrap;
}
.chip-ok{background:var(--ok-bg);color:var(--ok)}
.chip-alert{background:var(--alert-bg);color:var(--alert-strong)}
.chip-brand{background:var(--brand-050);color:var(--brand-700)}
.chip-soon{background:var(--surface-3);color:var(--ink-3);font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-4)}

/* ═══════════════════════════ Телефон ════════════════════════════════════
   Правило простое: то, во что тыкают пальцем, не может быть меньше 44px,
   а поле ввода — мельче 16px. При меньшем кегле iOS Safari зумит страницу
   на фокусе и обратно уже не отзумливает: человек доввoдит почту на макете
   шириной в полтора экрана. Плотность рабочего стола на телефоне не нужна —
   поэтому здесь же поднимаем типографические токены. */
@media (max-width:760px){
  :root{
    --fs-xs:13px; --fs-sm:14px; --fs-md:15px; --fs-lg:16px;
    --fs-xl:19px; --fs-2xl:22px;
  }

  .btn{min-height:44px;height:auto;padding:0 16px}
  .btn-lg{min-height:48px}
  .btn-sm{min-height:38px}
  .icon-btn{width:44px;height:44px}

  .input,.select,textarea{min-height:44px;height:auto;font-size:16px;padding:10px 12px}
  .select{padding:10px 30px 10px 12px;background-position:right 10px center}
  .input.has-ic{padding-left:34px}
  .field{display:flex;width:100%}
  .field .input,.field .select{width:100%}

  .seg{height:auto;flex-wrap:wrap}
  .seg button{min-height:44px}

  /* Таблицы честно прокручиваются вбок, а не схлопываются в колонку
     шириной в два слова. */
  table.grid{min-width:620px}

  /* 100vh на айфоне считается по «большому» вьюпорту: снизу оставалась
     пустая полоса, а подвал прыгал при появлении адресной строки. */
  body{min-height:100dvh}
}