/* Новое оформление для существующих страниц разделов (редизайн, 2026-10).
   Подключается ПОСЛЕ стилей страницы и ds.css: переводит старые токены страниц (--page, --ink, --s1…)
   на дизайн-систему и подравнивает общие компоненты (шапка, переключатели, карточки, таблицы, графики V2).
   Разметку и скрипты страниц не трогает. Страница помечается <body class="ds legacy">. */

/* ---------- старые токены → дизайн-система (во всех темах: значения берутся из ds.css) ---------- */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --page: var(--bg);
  --ink: var(--text); --ink-2: var(--text-2); --ink2: var(--text-2); --muted: var(--text-3);
  --grid: var(--border); --hairline: var(--border); --hair: var(--border); --ring: var(--border);
  --axis: var(--border-strong); --baseline: var(--border-strong);
  --s1: var(--c1); --s2: var(--c2); --s3: var(--c3);
  --ind: var(--c1); --grp: var(--c2); --self: var(--c3); --other: var(--neutral);
  --bar-neutral: var(--neutral); --bar-other: var(--neutral); --info: var(--text-3);
  --bad: var(--crit); --serious: var(--crit);
  --tip-bg: var(--text); --tip-ink: var(--surface);
  --shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: var(--bg); --ink: var(--text); --ink-2: var(--text-2); --ink2: var(--text-2); --muted: var(--text-3);
    --grid: var(--border); --hairline: var(--border); --hair: var(--border); --ring: var(--border);
    --axis: var(--border-strong); --baseline: var(--border-strong);
    --s1: var(--c1); --s2: var(--c2); --s3: var(--c3); --ind: var(--c1); --grp: var(--c2); --self: var(--c3);
    --other: var(--neutral); --bar-neutral: var(--neutral); --bar-other: var(--neutral); --info: var(--text-3);
    --bad: var(--crit); --serious: var(--crit); --tip-bg: var(--text); --tip-ink: var(--surface); --shadow: none;
  }
}

/* ---------- каркас страницы под новое меню ---------- */
body.ds.legacy { font-family: var(--font); font-size: 14px; line-height: 1.5; padding: 24px 28px 56px calc(var(--side) + 28px); }
html.ds-rail body.ds.legacy { padding-left: calc(var(--rail) + 28px); }
@media (max-width: 899px) {
  body.ds.legacy { padding: 0 16px calc(var(--tab) + 28px + env(safe-area-inset-bottom, 0px)); }
  body.ds.legacy > .ds-top { margin: 0 -16px 12px; flex-direction: row; align-items: center; gap: 10px; }
}
body.ds.legacy .wrap, body.ds.legacy .board { max-width: 1240px; gap: 16px; }
body.ds.legacy .ds-subnav { max-width: 1240px; margin: 0 auto 4px; padding: 0 0 2px; }
@media (max-width: 899px) { body.ds.legacy .ds-subnav { margin: 0 -16px 4px; padding: 0 16px 2px; } }
body.ds.legacy button, body.ds.legacy input, body.ds.legacy select, body.ds.legacy textarea { font-family: inherit; }

/* шапка страницы: название раздела уже в меню — надзаголовок прячем, заголовок аккуратнее */
body.ds.legacy .eyebrow { display: none; }
body.ds.legacy h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
body.ds.legacy .meta, body.ds.legacy .range-note { color: var(--text-3); font-size: 13px; }
@media (max-width: 899px) { body.ds.legacy h1 { font-size: 20px; } }
/* переключатель темы теперь в меню */
body.ds.legacy #theme-ctl, body.ds.legacy .theme-toggle { display: none !important; }

/* сегментные переключатели (период, вариант) — как .ds-seg */
body.ds.legacy .seg-ctl, body.ds.legacy .vswitch, body.ds.legacy .dv-switch, body.ds.legacy .periods {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px;
}
body.ds.legacy .seg-ctl button, body.ds.legacy .vswitch button, body.ds.legacy .dv-switch button, body.ds.legacy .periods button {
  font-size: 13px; font-weight: 500; color: var(--text-2); border-radius: 7px; padding: 5px 12px; background: transparent;
}
body.ds.legacy .seg-ctl button[aria-checked="true"], body.ds.legacy .vswitch button[aria-checked="true"], body.ds.legacy .dv-switch button[aria-checked="true"],
body.ds.legacy .periods button[aria-selected="true"], body.ds.legacy .periods button[aria-checked="true"] {
  background: var(--surface); color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px var(--border);
}
body.ds.legacy .seg-ctl button, body.ds.legacy .vswitch button, body.ds.legacy .dv-switch button, body.ds.legacy .periods button { white-space: nowrap; }
body.ds.legacy .seg-ctl, body.ds.legacy .periods, body.ds.legacy .vswitch { flex-wrap: nowrap; }
@media (max-width: 560px) {
  /* на телефоне — во всю ширину; если подписи не влезают, переключатель прокручивается сам, а не переносит слова */
  body.ds.legacy .seg-ctl, body.ds.legacy .periods, body.ds.legacy .vswitch { display: flex; width: 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  body.ds.legacy .seg-ctl::-webkit-scrollbar, body.ds.legacy .periods::-webkit-scrollbar, body.ds.legacy .vswitch::-webkit-scrollbar { display: none; }
  body.ds.legacy .seg-ctl button, body.ds.legacy .periods button, body.ds.legacy .vswitch button { flex: 1 0 auto; padding: 5px 9px; font-size: 12.5px; }
}
body.ds.legacy .cust input, body.ds.legacy input[type="date"], body.ds.legacy input[type="text"], body.ds.legacy input[type="number"], body.ds.legacy input[type="password"], body.ds.legacy select, body.ds.legacy textarea {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}

/* ---------- карточки, показатели, блоки ---------- */
body.ds.legacy .panel, body.ds.legacy .dept, body.ds.legacy .vx .card, body.ds.legacy .card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none;
}
body.ds.legacy .panel { padding: 16px; }
body.ds.legacy .panel-head h2, body.ds.legacy .vx .card h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
body.ds.legacy .hint, body.ds.legacy .vx .card .sub { color: var(--text-3); }
body.ds.legacy .kpis { gap: 12px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
body.ds.legacy .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
body.ds.legacy .kpi .num, body.ds.legacy .vx .hero .v { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; }
body.ds.legacy .vx .hero { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
body.ds.legacy .vx .heroes, body.ds.legacy .vx .grid { gap: 12px; }
@media (max-width: 899px) {
  body.ds.legacy .kpi .num, body.ds.legacy .vx .hero .v { font-size: 22px; }
  body.ds.legacy .vx .heroes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.ds.legacy .vx .hero { padding: 12px 14px; }
}
body.ds.legacy .chip, body.ds.legacy .chips button, body.ds.legacy .pill { border-color: var(--border); }
body.ds.legacy .note:not(.ds-note) { border-radius: var(--radius-sm); }

/* таблицы */
body.ds.legacy table { font-variant-numeric: tabular-nums; }
body.ds.legacy th { color: var(--text-3); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12px; border-bottom-color: var(--border); }
body.ds.legacy td { border-bottom-color: var(--border); }
body.ds.legacy tfoot td { border-top-color: var(--border-strong); }

/* графики V2 (variants.js) и подсказки */
body.ds.legacy .vx svg text { font-family: var(--font); fill: var(--text-3); }
body.ds.legacy .vx svg .t-strong, body.ds.legacy .vx svg .t-big { fill: var(--text); }
body.ds.legacy #tip, body.ds.legacy #dv-tip, body.ds.legacy #vtip { background: var(--text); color: var(--surface); border-radius: var(--radius-sm); font-family: var(--font); }

/* кольцевая диаграмма: на телефоне кольцо меньше, легенда шире */
@media (max-width: 560px) {
  body.ds.legacy .dv-donut { grid-template-columns: 96px minmax(0, 1fr) !important; gap: 12px !important; }
  body.ds.legacy .dv-donut .legend { min-width: 0; }
}

/* основные кнопки действий («Сохранить», «Отправить», «Войти») — в акцентном цвете */
body.ds button.save, body.ds #f button#go { background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm); }
body.ds button.save:hover:not(:disabled), body.ds #f button#go:hover { filter: brightness(1.06); }

/* ссылки-кнопки «Открыть …» */
body.ds.legacy a.go { border-color: var(--border); border-radius: var(--radius-sm); color: var(--accent); }
body.ds.legacy a.go:hover { border-color: var(--accent); background: var(--accent-soft); }

/* строки «факт против плана» для V2 (DV.bullets) — как на главной */
.vx .ds-bullets { margin-top: 4px; }

/* плавающая копия переключателя периода */
.ds-float { position: fixed; left: var(--side); right: 0; z-index: 35; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 8px 28px; transform: translateY(-120%); transition: transform 0.15s; pointer-events: none; }
html.ds-rail .ds-float { left: var(--rail); }
.ds-float.on { transform: none; pointer-events: auto; }
.ds-float-in { max-width: 1240px; margin-inline: auto; }
.ds-float-in > * { margin: 0 !important; }
.ds-float-in .dv-switch:not(:first-child), .ds-float-in #vswitch { display: none; }
@media (max-width: 899px) { .ds-float { left: 0; padding: 6px 16px; } }
@media (prefers-reduced-motion: reduce) { .ds-float { transition: none; } }