/* Три стиля оформления кабинета (21.10.2026, Влад 27015): a — «Тёплый» (светлый, как rapport), b — «Стекло» (тёмное
   матовое стекло, оранжевый акцент), c — «Синий» (белая рабочая область, синий акцент; по умолчанию). Стиль — data-style на
   <html>, его ставит ядро из выбора учётки (prefs.json), вместе с data-theme (база токенов style.css: a/c светлая, b тёмная).
   Здесь — токены стилей и общие части (меню, шапка, карточки, кнопки, таблицы); своё у разделов — в их файлах (доска TG —
   board.css). Переключатель — внизу меню (core.style_switch), меняет стиль app.js. */

/* ───────────── переключатель внизу меню ───────────── */
.sb-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sb-styles { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); }
.sb-styles button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; transition: background .2s, box-shadow .2s; }
.sb-styles button:hover { background: var(--surface-3); }
.sb-styles button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 0 0 2px var(--accent), 0 1px 2px rgba(0,0,0,.12); }
.sb-styles button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(127,127,127,.35); }
.sw-a { background: linear-gradient(135deg, #ecc94b 50%, #2f6b4f 50%); }
.sw-b { background: linear-gradient(135deg, #ff7a2f 50%, #241c16 50%); }
.sw-c { background: linear-gradient(135deg, #2457e6 50%, #ffffff 50%); }

/* смена стиля — плавно (View Transitions, где есть; app.js ставит класс на время перехода) */
:root.vt-style::view-transition-old(root), :root.vt-style::view-transition-new(root) { animation-duration: .45s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .sb-styles button { transition: none; }
}

/* ═════════════ стиль A — «Тёплый» (rapport: тёплый светлый, цветные карточки стадий) ═════════════ */
:root[data-style="a"] {
  color-scheme: light; --font: Manrope, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #efe9dd; --bg-2: #f3eee4; --sb: #f6f1e6; --surface: #fbf8f2; --surface-2: #f3eee4; --surface-3: #e8e2d5;
  --line: rgba(60,50,30,.09); --line-2: rgba(60,50,30,.16);
  --text: #1d1b16; --text-2: #3d392f; --muted: #6e685b; --dim: #9b9484;
  --accent: #2f6b4f; --accent-2: #c9a227; --accent-bg: rgba(47,107,79,.10); --accent-line: rgba(47,107,79,.38);
  --good: #2f7d4f; --good-bg: rgba(47,125,79,.12); --warn: #a8700b; --warn-bg: rgba(217,162,27,.16);
  --bad: #c3412a; --bad-bg: rgba(217,71,43,.11); --info-bg: rgba(201,162,39,.16);
  --row-hover: #f4efe5; --shadow: 0 1px 0 rgba(60,45,20,.04), 0 6px 18px rgba(60,45,20,.06); --chart-grid: rgba(60,45,20,.08);
  --pv-need: #d9472b; --pv-a1: #d9a21b; --pv-a2: #e2702d;
}
:root[data-style="a"] body {
  background: radial-gradient(1100px 720px at -8% -12%, #fbf4e2 0%, transparent 60%),
              radial-gradient(900px 620px at 108% -6%, #e8eedf 0%, transparent 58%),
              radial-gradient(800px 600px at 60% 120%, #f1e3cf 0%, transparent 60%), #efe9dd;
  background-attachment: fixed; }
:root[data-style="a"] .sb-col, :root[data-style="a"] .sb { background: rgba(250,246,238,.72); }
:root[data-style="a"] .top { background: color-mix(in srgb, #efe9dd 70%, transparent); }
:root[data-style="a"] .sb a.nav.active { background: #1d1b16; color: #fbf8f2; }
:root[data-style="a"] .mark { background: #1d1b16; }
:root[data-style="a"] .btn.primary { background: #1d1b16; color: #fbf8f2; }
:root[data-style="a"] .card, :root[data-style="a"] .kpi { border-radius: 20px; }
/* ═════════════ стиль B — «Стекло» (тёмное матовое стекло, оранжевый акцент) ═════════════ */
:root[data-style="b"] {
  color-scheme: dark; --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #15110e; --bg-2: rgba(255,255,255,.04); --sb: rgba(24,20,17,.5); --surface: rgba(30,26,23,.56); --surface-2: rgba(255,255,255,.06);
  --surface-3: rgba(255,255,255,.11); --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
  --text: #f7f3ee; --text-2: #e0d9cf; --muted: #aaa196; --dim: #80786e;
  --accent: #ff7a2f; --accent-2: #ffb26b; --accent-bg: rgba(255,122,47,.16); --accent-line: rgba(255,122,47,.5);
  --good: #4ade80; --good-bg: rgba(74,222,128,.14); --warn: #fbbf24; --warn-bg: rgba(251,191,36,.15);
  --bad: #ff6b6b; --bad-bg: rgba(255,107,107,.15); --info-bg: rgba(255,178,107,.14);
  --row-hover: rgba(255,255,255,.05); --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 32px rgba(0,0,0,.28);
  --chart-grid: rgba(255,255,255,.07);
  --pv-need: #ff5a3c; --pv-a1: #fbbf24; --pv-a2: #ff8a3d;
  --pv-col-bg: rgba(22,19,17,.42); --pv-col-line: rgba(255,255,255,.08); --pv-scrim: rgba(8,6,5,.45);
  --pv-toast-bg: rgba(28,24,21,.86); --pv-toast-ink: #f7f3ee; --pv-undo-bg: #ff7a2f; --pv-undo-ink: #1a120c;
  --pv-seg-bg: rgba(255,255,255,.06); --pv-seg-on-bg: #ff7a2f; --pv-seg-on-ink: #1a120c;
  --pv-badge-bg: rgba(0,0,0,.42); --pv-badge-ink: #f7f3ee; --pv-glass: blur(22px) saturate(150%);
}
:root[data-style="b"] body {
  background: radial-gradient(900px 620px at 10% 6%, rgba(255,150,70,.38), transparent 62%),
              radial-gradient(760px 540px at 92% 10%, rgba(110,150,200,.24), transparent 60%),
              radial-gradient(1000px 720px at 72% 108%, rgba(196,112,58,.34), transparent 62%),
              radial-gradient(620px 460px at 26% 86%, rgba(90,66,44,.55), transparent 70%),
              linear-gradient(160deg, #2a2019 0%, #131010 55%, #1d1612 100%) #15110e;
  background-attachment: fixed; }
:root[data-style="b"] .sb-col, :root[data-style="b"] .sb, :root[data-style="b"] .card, :root[data-style="b"] .kpi {
  -webkit-backdrop-filter: var(--pv-glass); backdrop-filter: var(--pv-glass); }
:root[data-style="b"] .sb-col { border-right-color: rgba(255,255,255,.07); }
:root[data-style="b"] .sb a.nav.active { background: rgba(255,122,47,.18); color: #ffb27a; }
:root[data-style="b"] .mark { background: linear-gradient(135deg, #ff7a2f, #ffb26b); color: #1a120c; }
:root[data-style="b"] .btn.primary { background: #ff7a2f; color: #1a120c; }
:root[data-style="b"] .btn { background: rgba(255,255,255,.06); }
:root[data-style="b"] .tbl th { background: #1f1a17; }
:root[data-style="b"] .gsearch input, :root[data-style="b"] .filters select, :root[data-style="b"] .filters input { background: rgba(0,0,0,.25); }
/* узкий экран и «меньше прозрачности»: сплошные панели, без размытия (дорого на телефоне и плохо читается) */
@media (max-width: 860px) {
  :root[data-style="b"] { --surface: #1f1a17; --sb: #1a1613; --pv-col-bg: #191512; --pv-glass: none; --pv-toast-bg: #24201c; }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-style="b"] { --surface: #1f1a17; --sb: #1a1613; --pv-col-bg: #191512; --pv-glass: none; --pv-toast-bg: #24201c;
    --surface-2: #29231f; --surface-3: #332c27; }
}
/* ═════════════ стиль C — «Синий» (белая рабочая область на синем, меню слева, строки как в таблице) ═════════════ */
:root[data-style="c"] {
  color-scheme: light; --font: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #f5f7fb; --bg-2: #eef2f8; --sb: #ffffff; --surface: #ffffff; --surface-2: #f5f7fb; --surface-3: #eaeef5;
  --line: #e6eaf1; --line-2: #d6dce7;
  --text: #0f172a; --text-2: #334155; --muted: #64748b; --dim: #94a3b8;
  --accent: #2457e6; --accent-2: #6d5be6; --accent-bg: rgba(36,87,230,.08); --accent-line: rgba(36,87,230,.35);
  --good: #15803d; --good-bg: rgba(22,163,74,.10); --warn: #b45309; --warn-bg: rgba(245,158,11,.14);
  --bad: #c62828; --bad-bg: rgba(220,38,38,.09); --info-bg: rgba(109,91,230,.10);
  --row-hover: #f6f8fc; --shadow: 0 1px 2px rgba(15,23,42,.05); --chart-grid: rgba(15,23,42,.07);
  --pv-need: #e5372b; --pv-a1: #f59e0b; --pv-a2: #f97316;
  --pv-card-r: 10px; --pv-col-r: 14px; --pv-panel-r: 18px; --pv-kpi-r: 14px;
  --pv-col-bg: #f1f4f9; --pv-col-line: #e6eaf1; --pv-scrim: rgba(15,30,80,.32);
  --pv-toast-bg: #0f172a; --pv-toast-ink: #ffffff; --pv-undo-bg: #2457e6; --pv-undo-ink: #ffffff;
  --pv-seg-bg: #eef2f8; --pv-seg-on-bg: #ffffff; --pv-seg-on-ink: #2457e6;
  --pv-badge-bg: #f1f5f9; --pv-badge-ink: #334155;
}
/* синей рамки вокруг страницы больше нет (Влад 26996: «убери совсем»): была 14, потом 6 px — место под работу.
   Страница во весь экран, как в «Тёплом» и «Стекле» */
:root[data-style="c"] body { background: var(--bg); }
:root[data-style="c"] .sb-col, :root[data-style="c"] .sb { background: #ffffff; }
:root[data-style="c"] .sb a.nav.active { background: #2457e6; color: #fff; }
:root[data-style="c"] .sb a.nav.active .ico { color: #fff; }
:root[data-style="c"] .mark { background: #2457e6; border-radius: 9px; }
:root[data-style="c"] .top { background: rgba(255,255,255,.86); }
:root[data-style="c"] .card, :root[data-style="c"] .kpi { border-radius: 14px; }
@media (max-width: 860px) {
  :root[data-style] body { background-attachment: scroll; }
}