/* ============================================================
   Shop-CRM — токены дизайн-системы кабинета.
   Перенесены из согласованного прототипа (демо кабинета) без переработки:
   цвета, тени, радиусы, шрифты — те же.
   Цветовая система = CMYK печатной контрольной шкалы:
   K — структура и главное действие, C — интерактив, M — аутсорс, Y — внимание.
   ============================================================ */

:root{
  --bg:#F2F1EE;          --surface:#FFFFFF;     --surface-2:#F7F6F3;  --surface-3:#EFEDE8;
  --ink:#1A1815;         --ink-2:#33302B;       --muted:#5F5B54;      --faint:#6E6A62;
  --placeholder:#767068;
  --line:#E4E1DA;        --line-2:#8B8781;      --line-3:#BEB9AE;
  --k:#1A1815;           --k-hover:#33302B;     --on-k:#FFFFFF;
  --c:#0B75BE;           --c-ink:#095B94;       --c-soft:#E6F2FA;     --c-line:#B6DAF0;
  --m:#A81F6B;           --m-ink:#8A1657;       --m-soft:#FBEBF3;     --m-line:#EFC8DE;
  --y:#A8620A;           --y-soft:#FBF1E0;      --y-line:#E8CFA4;
  --ok:#167C3E;          --ok-soft:#E6F4EA;     --ok-line:#B4DCC1;
  --bad:#C0322B;         --bad-soft:#FBECEA;    --bad-line:#EEC5C0;
  --sidebar:#14120F;     --sidebar-2:#1F1C18;   --sidebar-line:#2B2722;
  --sidebar-txt:#A29C92; --sidebar-txt-2:#8A837A; --sidebar-active:#26221D;
  --shadow-sm:0 1px 1px rgba(26,24,21,.03);
  --shadow:0 1px 2px rgba(26,24,21,.05), 0 4px 12px -6px rgba(26,24,21,.10);
  --shadow-lg:0 0 0 1px rgba(26,24,21,.04), 0 2px 4px rgba(26,24,21,.05), 0 16px 40px -12px rgba(26,24,21,.22);
  /* Скругление в кабинете ОДНО. Шкала из шести значений (3, 4, 6, 10, 10,
     14) расходилась на глазах: карточка 6, полоса 3, диалог 3, плитка
     иконки 7, 9 или 12 — и одинаковыми они не выглядели никогда.
     Один токен вместо шкалы: любое расхождение теперь видно в коде.
     Числом остаётся только то, где скругление — это ФОРМА, а не
     оформление поверхности: кружки (50 %), пилюли счётчиков и
     переключателя (20 px), рисунки — лист прев'ю и столбики графика. */
  --r:4px;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sidebar-w:246px;
  /* Сторона знака кабинета (.reg). Токеном, а не числом в двух местах:
     на неё считается компенсация центрирования на экранах входа */
  --brand-size:26px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F0E0D;        --surface:#191817;     --surface-2:#201F1D;  --surface-3:#272522;
    --ink:#EDEAE4;       --ink-2:#CFCAC2;       --muted:#9A948B;      --faint:#918B81;
    --placeholder:#8D877D;
    --line:#2A2825;      --line-2:#6E695F;      --line-3:#4C4842;
    --k:#EDEAE4;         --k-hover:#FFFFFF;     --on-k:#0F0E0D;
    --c:#4BA6E8;         --c-ink:#7CC0F0;       --c-soft:#12283A;     --c-line:#1E4463;
    --m:#E060A8;         --m-ink:#EE8CC4;       --m-soft:#33132A;     --m-line:#58254A;
    --y:#E0A44A;         --y-soft:#2E220E;      --y-line:#56421C;
    --ok:#35B36A;        --ok-soft:#10281A;     --ok-line:#1E4A31;
    --bad:#E5645C;       --bad-soft:#2E1614;    --bad-line:#552924;
    --sidebar:#0A0908;   --sidebar-2:#16140F;   --sidebar-line:#221F1A;
    --sidebar-txt:#9A948B; --sidebar-txt-2:#858077; --sidebar-active:#201D18;
    --shadow-sm:0 1px 1px rgba(0,0,0,.3);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.6);
    --shadow-lg:0 0 0 1px rgba(255,255,255,.04), 0 2px 4px rgba(0,0,0,.5), 0 16px 40px -12px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F0E0D;          --surface:#191817;     --surface-2:#201F1D;  --surface-3:#272522;
  --ink:#EDEAE4;         --ink-2:#CFCAC2;       --muted:#9A948B;      --faint:#918B81;
  --placeholder:#8D877D;
  --line:#2A2825;        --line-2:#6E695F;      --line-3:#4C4842;
  --k:#EDEAE4;           --k-hover:#FFFFFF;     --on-k:#0F0E0D;
  --c:#4BA6E8;           --c-ink:#7CC0F0;       --c-soft:#12283A;     --c-line:#1E4463;
  --m:#E060A8;           --m-ink:#EE8CC4;       --m-soft:#33132A;     --m-line:#58254A;
  --y:#E0A44A;           --y-soft:#2E220E;      --y-line:#56421C;
  --ok:#35B36A;          --ok-soft:#10281A;     --ok-line:#1E4A31;
  --bad:#E5645C;         --bad-soft:#2E1614;    --bad-line:#552924;
  --sidebar:#0A0908;     --sidebar-2:#16140F;   --sidebar-line:#221F1A;
  --sidebar-txt:#9A948B; --sidebar-txt-2:#858077; --sidebar-active:#201D18;
  --shadow-sm:0 1px 1px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.6);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.04), 0 2px 4px rgba(0,0,0,.5), 0 16px 40px -12px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.5;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* Мост: Bootstrap рисуется токенами демо. Тема переключается атрибутом
   data-theme на <html>; data-bs-theme ставится синхронно из JS. */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--faint);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-3);
  --bs-border-color: var(--line);
  --bs-body-font-family: var(--sans);
  --bs-font-monospace: var(--mono);
  --bs-border-radius: var(--r);
  --bs-border-radius-sm: var(--r);
  --bs-border-radius-lg: var(--r);
  --bs-border-radius-xl: var(--r);
  --bs-link-color: var(--c);
  --bs-link-hover-color: var(--c-ink);
  --bs-primary: var(--k);
  --bs-primary-rgb: 26, 24, 21;
  --bs-emphasis-color: var(--ink);
  --bs-heading-color: var(--ink);
  --bs-success: var(--ok);
  --bs-danger: var(--bad);
  --bs-warning: var(--y);
  --bs-info: var(--c);
}
.btn-primary {
  --bs-btn-bg: var(--k); --bs-btn-border-color: var(--k); --bs-btn-color: var(--on-k);
  --bs-btn-hover-bg: var(--k-hover); --bs-btn-hover-border-color: var(--k-hover); --bs-btn-hover-color: var(--on-k);
  --bs-btn-active-bg: var(--k-hover); --bs-btn-active-border-color: var(--k-hover); --bs-btn-active-color: var(--on-k);
}
.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); box-shadow: var(--shadow-sm); }
.modal { --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--line); }
.form-control, .form-select { background-color: var(--surface); border-color: var(--line-2); color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--c); box-shadow: 0 0 0 3px var(--c-soft); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); }
/* Дополнение моста: явные соответствия из демо (значения — только токены). */
/* демо .modal: border-radius 14 px; box-shadow:var(--shadow-lg).
   Радиус у нас МЕНЬШЕ эталона: 14 выбивались из кабинета, где скруглено всё
   одинаково, и диалог читался как деталь из другого набора. Теперь он берёт
   общий `--r`, как и всё прочее (отступление записано в реестре демо). */
.modal { --bs-modal-border-radius: var(--r); --bs-modal-box-shadow: var(--shadow-lg); }
/* демо .mode-note: padding:11px 13px; border-radius:var(--r); font-size:12.5px.
   Полоса-подсказка над содержимым в демо — именно она, и в components.css она
   перенесена один в один. Шаблоны при этом размечены бутстраповским `.alert`,
   до которого перенос не дошёл: 16 px паддингов и кегль 14 давали 55 px там,
   где эталон держит 42, а цвета брались из палитры Bootstrap (голубой
   #cff4fc), а не из наших токенов.
   Метрики и палитра прибиты к `.alert` целиком, а не переписаны в шаблонах:
   полос в кабинете шестнадцать, и следующая появится размеченной так же. */
.alert {
  --bs-alert-padding-y: 11px; --bs-alert-padding-x: 13px;
  --bs-alert-border-radius: var(--r); --bs-alert-margin-bottom: 16px;
  font-size: 12.5px; line-height: 1.5;
}
.alert-info    { --bs-alert-bg: var(--surface-2); --bs-alert-border-color: var(--line);     --bs-alert-color: var(--muted); }
.alert-warning { --bs-alert-bg: var(--y-soft);    --bs-alert-border-color: var(--y-line);   --bs-alert-color: var(--y); }
.alert-danger  { --bs-alert-bg: var(--bad-soft);  --bs-alert-border-color: var(--bad-line); --bs-alert-color: var(--bad); }
.alert-success { --bs-alert-bg: var(--ok-soft);   --bs-alert-border-color: var(--ok-line);  --bs-alert-color: var(--ok); }
/* Выделенное в подсказке — цвет основного текста, как `.mode-note b` в демо */
.alert-info strong, .alert-info b { color: var(--ink); }
/* демо .toast: background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-lg) */
.toast { --bs-toast-bg: var(--surface); --bs-toast-color: var(--ink); --bs-toast-border-color: var(--line-2); box-shadow: var(--shadow-lg); }