/* 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;  /* масштаб превью товара, управляется из «Оформление» */
  --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  */

  /* ── Готовые градиенты ── */
  --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);
}

.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;
  min-height: 100vh;
}
.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); }

.wbm-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;
  transition: all .15s;
}
.wbm-btn:hover { background: var(--wbm-surface-2); }
.wbm-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 { background: var(--wbm-accent-2); }
.wbm-btn.ghost { border-color: transparent; background: transparent; }
.wbm-btn.ghost:hover { background: var(--wbm-surface-2); }
.wbm-btn.sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: var(--wbm-radius-btn); }

.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;
}

/* 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; }