/* WB монитор v2 — bold redesign */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --wbm-accent: #7C3AED;
  --wbm-accent-2: #A855F7;
  --wbm-accent-soft: color-mix(in oklab, var(--wbm-accent) 12%, transparent);
  --wbm-accent-ink: color-mix(in oklab, var(--wbm-accent) 70%, #1a1320);
  --wbm-accent-grad: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);

  --wbm-bg: #F7F6F2;
  --wbm-surface: #FFFFFF;
  --wbm-surface-2: #F1EFEA;
  --wbm-border: #E8E6DF;
  --wbm-border-strong: #D9D7CF;
  --wbm-ink: #14140F;
  --wbm-ink-2: #4A4A42;
  --wbm-ink-3: #57564E;
  --wbm-muted: #7C7B73;

  --wbm-good: #16A34A;
  --wbm-good-bg: #DCFCE7;
  --wbm-warn: #D97706;
  --wbm-warn-bg: #FEF3C7;
  --wbm-bad: #DC2626;
  --wbm-bad-bg: #FEE2E2;
  --wbm-info: #2563EB;
  --wbm-info-bg: #DBEAFE;

  --wbm-step: 8px;
  --wbm-pad-card: 24px;
  --wbm-pad-row: 14px;
  --wbm-radius: 16px;
  --wbm-radius-sm: 10px;
  --wbm-radius-lg: 24px;

  --wbm-font: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wbm-font-display: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  --wbm-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Типографическая шкала (Этап 1) ──────────────────────────────
     Единый источник правды для размеров шрифта. Размеры менять только здесь.
     --wbm-fs-scale управляется настройкой (0.9/1.0/1.1/1.25) и применяется как zoom на .wbm-root
     → масштабирует ВЕСЬ интерфейс (шрифт+вёрстку), включая немигрированные px. Токены — фиксированные.
     Минимальный читаемый размер — 11px (--wbm-fs-2xs). НЕ делать мельче. */
  --wbm-fs-scale: 1;
  --wbm-sku-img-scale: 1;  /* масштаб превью товара, управляется из «Оформление» */
  /* [Fix, 2026-07-10] --wbm-vh-fix — компенсация для height/max-height, завязанных на vh,
     у элементов ВНУТРИ .wbm-root (масштабируется через zoom). Из-за особенности CSS zoom
     обычная "100vh" внутри зумированного поддерева физически растягивается в scale раз
     (100vh не делится на scale автоматически), из-за чего calc(100vh - Npx) при scale>1
     превышает реальную высоту окна и обрезается (overflow:hidden) снизу/сверху — баг
     «меню/страницы обрезаются при увеличении масштаба» (см. #ue-tbl-shell,
     #wbm-floating-ai-panel, #act-log-panel, #tab-map). Использовать var(--wbm-vh-fix)
     вместо 100vh в подобных calc() — тогда компенсация встроена. */
  --wbm-vh-fix: calc(100vh / var(--wbm-fs-scale, 1));
  /* [Fix, 2026-07-20] --wbm-vw-fix — то же самое для ГОРИЗОНТАЛИ: width/max-width,
     завязанные на vw, внутри zoom-поддерева рендерятся умноженными на масштаб —
     элемент со width:100vw при «Крупном» (110%) шире экрана на 10% (горизонтальный
     overflow, «вёрстка уезжает вправо»). Использовать var(--wbm-vw-fix) вместо
     100vw везде внутри .wbm-root. */
  --wbm-vw-fix: calc(100vw / var(--wbm-fs-scale, 1));
  --wbm-fs-2xs: 11px;
  --wbm-fs-xs:  12px;
  --wbm-fs-sm:  13px;
  --wbm-fs-md:  14px;
  --wbm-fs-lg:  16px;
  --wbm-fs-xl:  20px;
  --wbm-fs-2xl: 26px;
  --wbm-fs-3xl: 36px;
  --wbm-lh-tight:  1.2;
  --wbm-lh-normal: 1.45;

  --wbm-shadow-1: 0 1px 0 rgba(20,20,15,0.04), 0 1px 2px rgba(20,20,15,0.04);
  --wbm-shadow-2: 0 1px 0 rgba(20,20,15,0.04), 0 8px 24px -8px rgba(20,20,15,0.10);
  --wbm-shadow-3: 0 4px 12px -2px rgba(20,20,15,0.06), 0 24px 48px -16px rgba(20,20,15,0.18);

  /* ── Bright-варианты (только для серий графиков, не для статусов) ── */
  --wbm-good-bright: #22C55E;
  --wbm-warn-bright: #F59E0B;
  --wbm-bad-bright:  #EF4444;

  /* ── Палитра для графиков: брать по порядку chart-1…chart-5 ── */
  --wbm-chart-1: #7C3AED;   /* purple (= accent) */
  --wbm-chart-2: #22C55E;   /* green  */
  --wbm-chart-3: #F59E0B;   /* amber  */
  --wbm-chart-4: #0EA5E9;   /* sky    */
  --wbm-chart-5: #EC4899;   /* pink   */
  --wbm-chart-6: #EF4444;   /* red    */
  --wbm-chart-7: #3B82F6;   /* blue   */
  --wbm-chart-8: #94A3B8;   /* slate  */

  /* ── [D36] Именованные роли для финансовых трендов (Капитал → Динамика по
     неделям) — те же оттенки, что chart-7/chart-6/chart-2 выше, просто с
     семантическим именем, чтобы не завязываться на порядковый номер. ── */
  --wbm-chart-revenue: #3B82F6;
  --wbm-chart-expense: #EF4444;
  --wbm-chart-profit:  #22C55E;

  /* ── [D46] Категориальная палитра «Структура расходов» (6 статей) и
     «Карта капитала» (4 локации денег) — общий канон для 58_wallet.js/
     14_leaders_finweeks.js (тултип разбивки недели), проверена
     scripts/validate_palette.js (CVD/normal-vision floor/контраст) для
     обоих режимов темы. Порядок слотов зафиксирован (не переставлять —
     это и есть механизм CVD-безопасности, см. dataviz-скилл). ── */
  --wbm-cat-commission:  #7C3AED;   /* purple */
  --wbm-cat-logistics:   #EF4444;   /* red    */
  --wbm-cat-storage:     #F59E0B;   /* amber  */
  --wbm-cat-acceptance:  #0EA5E9;   /* sky    */
  --wbm-cat-penalties:   #EC4899;   /* pink   */
  --wbm-cat-advertising: #22C55E;   /* green  */
  --wbm-cap-available: #22C55E;     /* green  */
  --wbm-cap-frozen:    #0EA5E9;     /* sky    */
  --wbm-cap-stock:     #7C3AED;     /* purple */
  --wbm-cap-pipeline:  #F59E0B;     /* amber  */

  /* ── Готовые градиенты ── */
  --wbm-grad-accent:      linear-gradient(135deg, #7C3AED 0%, #A855F7 100%); /* = --wbm-accent-grad */
  --wbm-grad-accent-pink: linear-gradient(135deg, #7C3AED, #EC4899);
  --wbm-grad-good:        linear-gradient(135deg, #16A34A, #22C55E);
  --wbm-grad-bad:         linear-gradient(135deg, #DC2626, #F97316);
  --wbm-grad-hero-dark:   linear-gradient(135deg, #14140F, #4C1D95 70%, #DC2626);

  /* ── Доп. отступы ── */
  --wbm-pad-md: 18px;   /* compact-карточка / hero-блок */
  --wbm-pad-sm: 10px;   /* плотный блок (алерт sm, чип) */

  /* ── Радиусы ── */
  --wbm-radius-xs: 6px;   /* avatar / иконка-тайл */
  --wbm-radius-btn: 8px;  /* единый радиус всех кнопок и чипов */

  /* ── Размеры тайлов / аватаров / квадратных тач-таргетов ── */
  --wbm-tile-sm: 30px;  /* alert-thumb sm */
  --wbm-tile-md: 36px;  /* alert-thumb md, иконка-тайл топбара */
  --wbm-tile-lg: 40px;  /* иконка-tile внутри hero-алерта */
  --wbm-tile-xl: 44px;  /* sidebar-icon button */

  /* ── Высоты типовых элементов ── */
  --wbm-h-btn:    36px;
  --wbm-h-btn-sm: 30px;
  --wbm-h-input:  36px;
  --wbm-h-row:    56px; /* строка таблицы */
  --wbm-h-topbar: 64px;
}

.wbm-root.theme-dark {
  --wbm-bg: #0E0E12;
  --wbm-surface: #16161B;
  --wbm-surface-2: #1D1D23;
  --wbm-border: #25252D;
  --wbm-border-strong: #34343E;
  --wbm-ink: #F4F3EE;
  --wbm-ink-2: #BDBBB3;
  --wbm-ink-3: #82817A;
  --wbm-muted: #4F4E48;
  --wbm-good-bg: rgba(22,163,74,0.18);
  --wbm-warn-bg: rgba(217,119,6,0.18);
  --wbm-bad-bg: rgba(220,38,38,0.20);
  --wbm-info-bg: rgba(37,99,235,0.18);

  /* [D36] Более глубокие степени тех же оттенков — на светлом фоне (light) яркие
     #3B82F6/#EF4444/#22C55E проходят проверку контраста/CVD, но на тёмной
     поверхности (#16161B) не проходят порог lightness-band — нужны более
     глубокие шаги того же тона (проверено scripts/validate_palette.js). */
  --wbm-chart-revenue: #1D4ED8;
  --wbm-chart-expense: #DC2626;
  --wbm-chart-profit:  #16A34A;

  /* [D46] Более глубокие шаги тех же категориальных оттенков — та же причина,
     что у chart-revenue/-expense/-profit выше (проверено validate_palette.js
     --mode dark). commission (purple/accent) не меняется — уже проходит. */
  --wbm-cat-logistics:   #B91C1C;
  --wbm-cat-storage:     #D97706;
  --wbm-cat-acceptance:  #0284C7;
  --wbm-cat-penalties:   #DB2777;
  --wbm-cat-advertising: #16A34A;
  --wbm-cap-available: #16A34A;
  --wbm-cap-frozen:    #0284C7;
  --wbm-cap-pipeline:  #D97706;
}

.wbm-root[data-density="compact"] { --wbm-pad-card: 16px; --wbm-pad-row: 10px; --wbm-radius: 12px; }
.wbm-root[data-density="spacious"] { --wbm-pad-card: 28px; --wbm-pad-row: 18px; --wbm-radius: 18px; }

.wbm-root, .wbm-root * { box-sizing: border-box; }
.wbm-root {
  zoom: var(--wbm-fs-scale, 1);   /* глобальный масштаб интерфейса из настройки «Оформление» */
  font-family: var(--wbm-font);
  color: var(--wbm-ink);
  background: var(--wbm-bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  /* `zoom` changes the rendered box but does not scale viewport units.  Size
     the layout before zoom so its rendered height always fills the viewport. */
  min-height: var(--wbm-vh-fix);
  width: calc(100% / var(--wbm-fs-scale, 1));
}
.wbm-root h1, .wbm-root h2, .wbm-root h3, .wbm-root h4 {
  font-family: var(--wbm-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.wbm-root .num { font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.wbm-root button { font-family: inherit; cursor: pointer; }
.wbm-root a { color: inherit; }

.wbm-card {
  background: var(--wbm-surface);
  border: 1px solid var(--wbm-border);
  border-radius: var(--wbm-radius);
}
.wbm-card-pad { padding: var(--wbm-pad-card); }
.wbm-divider { height: 1px; background: var(--wbm-border); }

.wbm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--wbm-radius-btn);
  font-size: 12px; font-weight: 600;
  background: var(--wbm-surface-2); color: var(--wbm-ink-2);
  white-space: nowrap;
}
.wbm-chip.good { background: var(--wbm-good-bg); color: var(--wbm-good); }
.wbm-chip.bad  { background: var(--wbm-bad-bg);  color: var(--wbm-bad); }
.wbm-chip.warn { background: var(--wbm-warn-bg); color: var(--wbm-warn); }
.wbm-chip.info { background: var(--wbm-info-bg); color: var(--wbm-info); }
.wbm-chip.accent { background: var(--wbm-accent-soft); color: var(--wbm-accent); }

/* [PR-2 дизайн-канон, 2026-07-17] .tbl-btn/.tbl-toolbar/.tbl-actions используются
   в 7+ JS-модулях (14_leaders_finweeks/28_unit_econ/35_storage_tab/50_watchlist и
   др.) с теми же модификаторами (.primary/.ghost/.sm), что и .wbm-btn/.wbm-toolbar,
   но НЕ имели ни одного CSS-правила нигде в проекте — рендерились как неоформленные
   нативные <button>/<select>. Объединены с каноническими селекторами (не
   задублированы) — .tbl-* становится полноценным алиасом канона, без переименования
   классов в JS (риск найти/пропустить вызов при массовом rename выше пользы). */
.wbm-btn, .tbl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: var(--wbm-radius-btn);
  border: 1px solid var(--wbm-border-strong); background: var(--wbm-surface);
  color: var(--wbm-ink); font-weight: 600; font-size: 13px;
  cursor: pointer; transition: all .15s;
}
.wbm-btn:hover, .tbl-btn:hover { background: var(--wbm-surface-2); }
.wbm-btn.primary, .tbl-btn.primary {
  background: var(--wbm-accent); color: #fff; border-color: var(--wbm-accent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 12px -2px color-mix(in oklab, var(--wbm-accent) 50%, transparent);
}
.wbm-btn.primary:hover, .tbl-btn.primary:hover { background: var(--wbm-accent-2); }
.wbm-btn.ghost, .tbl-btn.ghost { border-color: transparent; background: transparent; }
.wbm-btn.ghost:hover, .tbl-btn.ghost:hover { background: var(--wbm-surface-2); }
.wbm-btn.sm, .tbl-btn.sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: var(--wbm-radius-btn); }
/* .active/.cols-on — переключаемое состояние (тумблер «включено», напр. активный фильтр колонок) */
.tbl-btn.active, .tbl-btn.cols-on {
  background: var(--wbm-accent-soft); color: var(--wbm-accent); border-color: var(--wbm-accent);
}
.tbl-btn-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 2px;
  border-radius: 999px; background: var(--wbm-accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.tbl-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* .tbl-toolbar сам тулбар-контейнер (border-bottom+padding+surface) — правило в
   dashboard.css вместе с .wbm-toolbar (секция «УНИФИЦИРОВАННЫЕ КЛАССЫ», их общий
   канонический дом), не дублируется здесь. */

.wbm-img-ph {
  background:
    repeating-linear-gradient(135deg, rgba(124,58,237,0.06) 0 1px, transparent 1px 8px),
    var(--wbm-surface-2);
  border: 1px solid var(--wbm-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--wbm-ink-3); font-family: var(--wbm-font-mono); font-size: 11px;
  border-radius: var(--wbm-radius-sm);
  overflow: hidden;
}

/* Scrollbar */
.wbm-root *::-webkit-scrollbar { width: 8px; height: 8px; }
.wbm-root *::-webkit-scrollbar-thumb { background: var(--wbm-border-strong); border-radius: 4px; }
.wbm-root *::-webkit-scrollbar-track { background: transparent; }

/* Top nav */
.wbm-topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--wbm-bg) 80%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--wbm-border);
}
.wbm-topbar-inner {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px; max-width: 1680px; margin: 0 auto;
}
.wbm-tabs {
  display: flex; align-items: center; gap: 2px;
  flex: 1; overflow-x: auto;
  scrollbar-width: none;
}
.wbm-tabs::-webkit-scrollbar { display: none; }
.wbm-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--wbm-ink-2);
  border: none; background: transparent;
  white-space: nowrap;
  transition: all .15s;
}
.wbm-tab:hover { background: var(--wbm-surface-2); color: var(--wbm-ink); }
.wbm-tab.active {
  background: var(--wbm-ink); color: var(--wbm-bg);
}

/* KPI tile */
.wbm-kpi {
  background: var(--wbm-surface);
  border: 1px solid var(--wbm-border);
  border-radius: var(--wbm-radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.wbm-kpi:hover { box-shadow: var(--wbm-shadow-2); }
.wbm-kpi-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wbm-ink-3);
}
.wbm-kpi-value {
  font-family: var(--wbm-font-display);
  font-size: 36px; font-weight: 700; line-height: 1;
  letter-spacing: -0.03em;
}
/* [D46] Плотный вариант KPI-тайла — для рядов из 6+ метрик (Живые деньги:
   Баланс WB + сверка капитала), где hero-размер 36px делает ряд громоздким.
   Модификатор, не новый компонент (design_canon.md §4): та же .wbm-kpi/
   .wbm-kpi-label/.wbm-kpi-value разметка, только меньше отступы/шрифт. */
.wbm-kpi.dense {
  padding: 11px 13px; gap: 4px; border-radius: var(--wbm-radius-sm);
}
.wbm-kpi.dense .wbm-kpi-label { font-size: var(--wbm-fs-2xs); }
.wbm-kpi.dense .wbm-kpi-value {
  font-size: var(--wbm-fs-xl); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.wbm-kpi.dense .wbm-kpi-sub { font-size: var(--wbm-fs-2xs); color: var(--wbm-ink-3); }

/* Alert pill (small) */
.wbm-alert-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--wbm-surface);
  border: 1px solid var(--wbm-border);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.wbm-alert-pill:hover { border-color: var(--wbm-border-strong); background: var(--wbm-surface-2); }
.wbm-alert-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}

/* Bento grid helper */
.wbm-grid { display: grid; gap: 16px; }