/* ============================================================
   page-shell.css — Общий каркас страницы (Page Shell)
   Подключить: <link rel="stylesheet" href="/assets/page-shell.css">
   Порядок: после base.css, до page-specific styles.css

   Содержит CSS-классы, общие для Класс A страниц (analytics/pricing/returns/advertising):
     .biz-panel / .biz-row — шапка панели
     .biz-btn — кнопка в шапке
     .header-vsep — вертикальный разделитель в шапке
     .header-period — период в шапке (акцентный цвет)
     .hs-dot / .hs-item / .hs-muted / .hs-accent / .hs-sep — headline-метрики

   НЕТ hardcoded цветов — только var(--*) из theme.css.
   Извлечено из analytics/styles.css (эталон) — Ф1 Page Shell.
   ============================================================ */

/* ================================================================
   Бизнес-панель (.biz-panel) — шапка страницы
   ================================================================ */
.biz-panel {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* padding-top 14px (канон рестайла 2026-06-08): центр названия раздела
     совпадает с центром логотипа сайдбара (28px по Y). Горизонтальный 24px,
     низ 8px — без изменений. */
  padding: 14px 24px 8px;
  flex-shrink: 0;
}
/* Строка-заголовок внутри панели */
.biz-row {
  display: flex;
  align-items: center;
  /* ENG-005 (2026-07-02): gap на сетке 4px через токен (было 10px — вне сетки).
     --space-2 = 8px: единый ритм с остальной шапкой (padding панели, gap .shell-title,
     margin #shell-updated — все 8px) и запас против переноса на 1366px. */
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* Канон-группа действий шапки — ВСЕГДА справа (margin-left:auto), независимо от
   наличия периода/статистики. Сюда движок кладёт #shell-updated + #btn-send-feedback;
   onboarding.js (#ma-ob-launcher) и delight-button.js (#mad-launcher) монтируются СЮДА. */
.biz-row-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); /* ENG-005: было 10px, теперь 8px из сетки */ }
/* h1 внутри biz-panel — единый 18px по всем страницам */
.biz-panel h1 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

/* ================================================================
   Кнопка действия в шапке (.biz-btn)
   ================================================================ */
.biz-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.biz-btn:hover   { border-color: var(--accent); color: var(--accent); }
.biz-btn:disabled { opacity: 0.5; cursor: wait; }

/* ================================================================
   Вертикальный разделитель в шапке (.header-vsep)
   ================================================================ */
.header-vsep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ================================================================
   Строка периода в шапке (.header-period)
   ================================================================ */
.header-period {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

/* ================================================================
   Headline-метрики (.hs-*) — элементы сводки в biz-row
   ================================================================ */
/* Разделитель-точка между метриками */
.hs-dot  { font-size: 13px; color: var(--text2); user-select: none; }
/* Контейнер одной метрики (метка + значение) */
.hs-item { display: flex; align-items: center; gap: 4px; }
/* Второстепенный текст (метки, единицы) */
.hs-muted { font-size: 12px; color: var(--text2); }
/* Акцентное значение — крупнее, жирнее */
.hs-accent {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
/* Позитивное / негативное значение — цветовая семантика */
.hs-accent.pos { color: var(--green, #16a34a); }
.hs-accent.neg { color: var(--red,   #dc2626); }
/* Резиновый разделитель — отодвигает правые элементы (кнопка, DQ-чип) вправо */
.hs-sep { flex: 1; min-width: 8px; }

/* «Обновлено HH:MM» — общий слот метки свежести данных в шапке (№D14, 2026-06-11).
   Канон-позиция: справа в .biz-row, вплотную к кнопке отзыва (#shell-updated).
   ОДИН элемент на странице (рендерит MA_TableShell при headline.updated:true)
   вместо per-page (returns/advertising имели свои ret-/ad-updated-time + dot).
   Текст ставит MA_TableShell.setUpdatedTime() на завершении загрузки данных.
   Скрыт через [hidden] до первого вызова → нет пустого «Обновлено —».
   Живёт здесь (page-shell.css), а НЕ в table-shell.css — этот файл грузят ВСЕ
   AG-Grid-страницы (рядом .hs-muted/.hs-sep), а table-shell.css только returns.
   Стиль = второстепенный muted-текст (как .hs-muted), 11px. Только токены. */
.shell-updated {
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;   /* отступ от метрик/колокола слева, до кнопки отзыва справа */
}
.shell-updated[hidden] { display: none; }   /* гарантия скрытия (некоторые сбросы переопределяют [hidden]) */

/* ================================================================
   Page Shell канон 2026-06-08
   ================================================================ */

/* Тонкая full-bleed полоса под титул-строкой.
   margin: 14px сверху (= отступ верх→название) / -24px по бокам (компенсирует
   горизонтальный padding .biz-panel 24px → полоса до краёв) / 8px снизу.
   Визуально ложится на низ логотипа сайдбара (~56px). */
.shell-divider {
  height: 1px;
  background: var(--border);
  margin: 14px -24px 8px;
}

/* Зарезервированная ячейка названия раздела — чтобы сводка ВСЕГДА стартовала
   с одной вертикальной оси независимо от длины названия. min-width рассчитан
   под самое длинное название («Ценовые алерты» / «SEO карточек»).
   font 18px/700 — идентично .biz-panel h1. */
.shell-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
/* SVG-иконка раздела внутри титула — размер согласован с сайдбаром */
.shell-title svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ================================================================
   .shell-date-slot — слот периода/даты: верхний правый угол ПОД шапкой.
   Канон раската 2026-06-09 (эталон /analytics/, commit f4bb66a):
   контрол периода (PeriodSelector / статичная подпись «за период …»)
   живёт ОТДЕЛЬНОЙ строкой ниже .shell-divider, прижатый вправо —
   единый паттерн для всех страниц с датой.

   Размещение: внутри .biz-panel, СРАЗУ после .shell-divider.
   Содержимое: либо #period-selector (PeriodSelector.create),
   либо .ps-inline (analytics) + кнопка «Загрузить» + прогресс,
   либо статичная .header-period (дашборды — скользящее окно).

   Извлечено из analytics/styles.css (прото-компонент CHANGE A).
   ================================================================ */
.shell-date-slot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;       /* узкий вьюпорт: контролы переносятся, не режутся */
  gap: 6px;
  margin-top: 6px;
}
/* Внутри слота: ps-inline (analytics) занимает доступное место,
   кнопки и прогресс — прижаты вправо за счёт flex. */
.shell-date-slot .ps-inline {
  flex-shrink: 1;
  min-width: 0;
}
/* Статичная подпись периода в слоте (дашборды без PeriodSelector) —
   убираем «прилипание» к правому краю в один уровень с заголовком,
   сохраняем акцентный стиль .header-period. */
.shell-date-slot .header-period {
  flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   N1-канон 2026-06-19 (РАСКАТ В ОБЩИЙ СЛОЙ): переключатель маркетплейса + период
   в ОДНУ строку. Перенесено из analytics/styles.css в общий page-shell.css, чтобы
   ВСЕ AG-Grid-страницы (analytics/returns/advertising/...) получали единый ряд
   автоматически (раньше класс жил только в analytics → дрейф «две строки» на
   Возвратах/Рекламе/Ценообразовании).

   .mp-period-row = единый flex-ряд: МП-switcher слева, период (+опц. кнопка
   «Загрузить»/прогресс) справа. Рендерится движком MA_TableShell при
   period.mpRow (opt-in) — заменяет ОТДЕЛЬНЫЕ .mp-switcher-row и .shell-date-slot.

   На 1920 (дефолт) — одна строка (nowrap). Мягкий перенос на ≤1365px (период
   уходит на вторую строку слева, как было у .shell-date-slot). На полосе
   1366–1440 ужимаем гэпы PeriodSelector, чтобы контролы уложились в одну строку.

   Совместимость: id #mp-switcher-row / #mp-switcher-mount / #period-inline /
   #period-selector / #btn-load / #load-progress сохранены (анкоры page-JS).
   0 hardcoded — только токены/структура.
   ---------------------------------------------------------------------------- */
.mp-period-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 6px;
  flex-wrap: nowrap;   /* одна строка по умолчанию (1920) */
  margin-top: 6px;     /* такой же отрыв от .shell-divider, как у .shell-date-slot */
}
/* Правая часть: период + кнопка + прогресс — flex-строка, прижата вправо */
.mp-period-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
}
/* ps-inline / #period-selector внутри ряда — гибкие, не распирают строку */
.mp-period-row .ps-inline,
.mp-period-row #period-selector,
.mp-period-row .period-selector {
  flex-shrink: 1;
  min-width: 0;
}
/* Полоса «ноутбук» 1366–1440: ужимаем гэпы PeriodSelector внутри ряда,
   чтобы пресеты/кнопка/период встали в ОДНУ строку (паритет .shell-date-slot). */
@media (min-width: 1366px) and (max-width: 1440px) {
  .mp-period-row { gap: 6px; }
  .mp-period-right { gap: 4px; }
  .mp-period-row #period-selector,
  .mp-period-row .period-selector,
  .mp-period-row .ma-ps { gap: var(--space-2); }
  .mp-period-row .ma-ps-presets,
  .mp-period-row .ma-ps-sub { gap: var(--space-1); }
}
/* ≤1365px: мягкий перенос — период на вторую строку, левый отступ (как
   .shell-date-slot переносился ниже 1366). Одна строка держится до 1366. */
@media (max-width: 1365px) {
  .mp-period-row { flex-wrap: wrap; }
  .mp-period-right {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* ----------------------------------------------------------------------------
   D-канон 2026-06-15 (legacy, для страниц БЕЗ объединённого ряда): период
   (.shell-date-slot, справа) + маркетплейс (.mp-switcher-row, слева) ОТДЕЛЬНЫМИ
   строками. Сохраняется для страниц, не перешедших на period.mpRow (страховка
   обратной совместимости). 1366×768 = большая доля селлеров → жёсткий nowrap
   ЗАПРЕЩЁН; на полосе 1366–1440 ужимаем гэпы, ниже 1366 — мягкий перенос.
   ---------------------------------------------------------------------------- */

/* Полоса «ноутбук» 1366–1440: ужимаем гэпы слота и внутренние гэпы
   PeriodSelector, чтобы пресеты/кнопка/период встали в ОДНУ строку.
   Перенос здесь НЕ включаем (flex-wrap:wrap страхует на крайний случай). */
@media (min-width: 1366px) and (max-width: 1440px) {
  .shell-date-slot { gap: 4px; }
  .shell-date-slot #period-selector,
  .shell-date-slot .period-selector,
  .shell-date-slot .ma-ps { gap: var(--space-2); }
  .shell-date-slot .ma-ps-presets,
  .shell-date-slot .ma-ps-sub { gap: var(--space-1); }
}

/* НИЖЕ 1366 (≤1365): мягкий перенос — даём PeriodSelector перенести пресеты
   на вторую строку слота и выровняться по левому краю, чтобы одиночный
   перенесённый контрол не «болтался» у правого края. Раньше эта планка стояла
   на 1100px — поднята до 1365 по решению D (одна строка держится до 1366). */
@media (max-width: 1365px) {
  .shell-date-slot {
    justify-content: flex-start;
  }
  .shell-date-slot #period-selector,
  .shell-date-slot .period-selector {
    flex-wrap: wrap;       /* пресеты внутри PeriodSelector переносятся */
  }
}

/* ============================================================================
   КАРКАС ТАБЛИЧНОЙ СТРАНИЦЫ (Table Frame) — единый источник для AG-Grid-семьи.
   Решение Александра (скрин /analytics/, 2026-06-13): шапка раздела ЗАКРЕПЛЕНА
   сверху, итог-бар ЗАКРЕПЛЁН снизу, СКРОЛЛИТСЯ только тело таблицы в ограниченной
   рамке между ними. Страница НЕ должна document-скроллить хром/футер прочь.

   МЕХАНИЗМ (failure-taxonomy Cat 1.1 + 1.3a):
   body — flex-колонка ВЫСОТОЙ во весь вьюпорт + overflow:hidden (нет
   document-скролла). Прямые дети:
     [хром #ma-shell-mount]   → flex:0 0 auto (фиксирован сверху)
     [рамка грида]            → flex:1 1 auto; min-height:0 (тянется, скроллит
                                 ВНУТРИ — AG-Grid имеет свой viewport-скролл)
     [итог-футер]             → flex:0 0 auto (прижат снизу, всегда виден)

   Корневой баг ДО (analytics/pricing): body{min-height:100vh} (РАСТЁТ выше
   вьюпорта, нет overflow:hidden) + #ma-grid-wrap{flex:1; min-height:480px}
   (CLS-резерв НЕ давал колонке сжаться до вьюпорта) → колонка вылезала за экран
   → весь документ скроллился, унося шапку вверх и опуская футер под фолд.
   Здесь min-height:480px перебивается на 0 — рамка-вьюпорт сама даёт высоту,
   резерв CLS не нужен (грид заполняет фиксированную рамку сразу).

   OPT-IN: активируется атрибутом body[data-table-frame] — страница объявляет
   явно (как headline.updated у MA_TableShell). Не-табличные/виджет-страницы
   (dashboard/owner-dashboard) не объявляют → их раскладка не тронута.
   returns/advertising УЖЕ имели верный каркас в своих styles — переход на этот
   общий источник byte-эквивалентен (те же flex-роли), но снимает дублирование.

   0 hardcoded — чистая структура (display/flex/overflow/height). Высоты в dvh+vh.
   ============================================================================ */
body[data-table-frame] {
  display: flex;
  flex-direction: column;
  /* fallback 100vh для движков без dvh; dvh учитывает адресную строку мобилей */
  height: 100vh;
  height: 100dvh;
  /* перебиваем page-styles body{min-height:100vh} (analytics/pricing) — иначе
     колонка не сжимается до вьюпорта (источник document-скролла). Рамка задаёт
     высоту через height, нижний предел не нужен. */
  min-height: 0;
  /* СТРОГО: документ не скроллится — скроллит только тело грида внутри рамки.
     Это снимает «шапка/футер уезжают при скролле страницы» (Cat 1.3a). */
  overflow: hidden;
}

/* Хром страницы (шапка раздела + период + «Про раздел» + тулбар + статус) —
   ЗАФИКСИРОВАН сверху рамки, не скроллится. .biz-panel внутри уже flex-shrink:0;
   здесь страхуем сам контейнер монтирования хрома. */
body[data-table-frame] > #ma-shell-mount {
  flex: 0 0 auto;
}

/* Рамка грида — тянется на всё оставшееся место и скроллит ВНУТРИ себя.
   Перебиваем CLS-резерв min-height:480px (page-styles) на 0 — иначе flex:1
   не может сжать колонку до вьюпорта и документ начинает скроллиться (корневой
   баг analytics/pricing). #ma-grid-wrap = analytics/pricing; для returns/
   advertising flex-цепочку держат их .table-section/.ret-content-flex. */
body[data-table-frame] > #ma-grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

/* Итог-футер — ЗАКРЕПЛЁН снизу рамки, всегда виден, не сжимается и не скроллит
   страницу. Покрывает все варианты итог-бара AG-Grid-семьи (.summary-bar
   analytics/advertising/pricing, .ret-summary-bar returns) + условные подстроки
   аналитики (примечание о неполноте, сверка с актом). Их default flex-shrink:1
   позволял бы им «съёжиться» — жёстко 0. */
body[data-table-frame] > .summary-bar,
body[data-table-frame] > .ret-summary-bar,
body[data-table-frame] > #sb-coverage-note,
body[data-table-frame] > #sb-reconcile-row {
  flex: 0 0 auto;
}

/* ============================================================================
   ENG-010 (2026-07-04) — РОБАСТНОСТЬ «низа» на НИЗКОМ вьюпорте.
   Находка владельца 07-04 «низ потерялся у меню и таблицы»: на 1920×1080 весь
   стек виден (шапка#ma-shell-mount 0 0 auto · грид flex:1 · итог-бар 0 0 auto —
   проверено вживую 6/6 грид-страниц). Дефект проявляется, когда ХРОМ над гридом
   ВЫРОС (раскрытая «Про раздел» +282px, баннеры) И вьюпорт КОРОТКИЙ (окно не на
   весь экран / масштаб 125% / ноутбук): жёсткий (flex:0 0 auto) хром + футер
   вместе превышают высоту → грид сжимается в 0, а нескручиваемый футер (Σ Итого /
   статус) вытесняется за нижний край (клип overflow:hidden).

   Хром прокрутить нельзя (в шапке живут ABSOLUTE-поповеры покрытия/DQ/«Обучение» —
   overflow на #ma-shell-mount обрезал бы их). Поэтому ограничиваем ТЕЛО самого
   «толстого» и НЕкритичного элемента хрома — раскрытую «Про раздел» — внутренним
   скроллом ТОЛЬКО на коротком вьюпорте. Освобождает вертикаль → грид+футер снова
   влезают, футер не клипается. Поповеры не затронуты (кап на .ma-help-body, а не
   на шапке). На 1920×1080 (высокий вьюпорт) правило НЕ применяется (медиа
   max-height:820px не совпадает) → 0 изменений на целевом разрешении. Баннеры-
   предупреждения (danger/warning) НЕ трогаем — их текст критичен.
   0 hardcoded цветов; чистая геометрия (max-height/overflow). ============================================================================ */
@media (max-height: 820px) {
  body[data-table-frame] .ma-help-body {
    max-height: 30vh;
    overflow-y: auto;
    overscroll-behavior: contain;   /* скролл справки не «цепляет» страницу */
  }
}

/* ============================================================================
   Мобиль: бургер сайдбара (.sb-mobile-toggle, app-sidebar.js) на узком вьюпорте
   виден как акцентный контрол fixed top-left (x≈12–52px). Чтобы он НЕ налезал на
   название раздела в шапке (.biz-panel padding-left:24px → титул под бургером),
   сдвигаем содержимое шапки вправо на ширину бургера + зазор.
   Брейкпоинт = MOBILE_BREAKPOINT-1 (1023px) — синхронен app-sidebar.js/base.css
   (только тогда бургер виден: display:flex). На десктопе сайдбар свёрнут в
   icon-rail без бургера → сдвиг не нужен. .biz-panel = канон-шапка всех
   AG-Grid-страниц → правило общее, не только под data-table-frame. */
@media (max-width: 1023px) {
  .biz-panel {
    /* 24px базовый + 52px под бургер (12 left + 40 ширина) = 64px слева */
    padding-left: 64px;
  }
  /* full-bleed разделитель компенсирует базовый -24px по бокам; при увеличенном
     левом паддинге выравниваем его левый край под новый отступ, чтобы полоса
     не выезжала за шапку слева. */
  .biz-panel .shell-divider {
    margin-left: -64px;
  }
}

/* ============================================================================
   N2 (2026-06-19) — центровка SVG-иконок в кнопках тулбара.
   .tb-btn-icon на page-level определён как display:block+line-height:28px —
   SVG с vertical-align:middle сдвигается ~4px ниже центра кнопки.
   Фикс: display:inline-flex + align-items:center — SVG гарантированно по центру.
   Общий слой (все AG-Grid-страницы); перебиваем через #main-toolbar (specificity).
   Затронуты: btn-pin-cols + btn-fullscreen (+ btn-ozon-links, btn-select,
   btn-collapse-rows, btn-collapse-cols). ============================================================================ */
#main-toolbar .tb-btn-icon,
#ret-toolbar .tb-btn-icon,
#ad-toolbar .tb-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Убираем vertical-align у SVG внутри flex-кнопок (flex уже центрует) */
#main-toolbar .tb-btn-icon svg,
#ret-toolbar .tb-btn-icon svg,
#ad-toolbar .tb-btn-icon svg {
  display: block;
}

/* ============================================================================
   ENG-004 канон (2026-07-02, сертификация) — ЕДИНЫЙ отступ инлайн-тулбара грид-
   страниц. Раньше отступ жил ПЕЙДЖ-локально дублями `.toolbar { padding: 8px 24px
   8px 8px }` (analytics/styles.css + pricing/styles.css) → левый край 8px давал
   «лесенку» в 16px относительно зон хрома (шапка/статус на 24px). Консолидировано:
   пейдж-дубли padding сняты, канон живёт ЗДЕСЬ, в общем слое (page-shell.css грузят
   все AG-Grid-страницы). Отступ = 8px верх/низ (--space-2), 24px бока (--space-6) —
   левая ось тулбара совпадает с осью зон хрома.
   Область: id `#main-toolbar` (аналитика-эталон + экономика). Форки returns/
   advertising/my-expenses имеют свой контейнер (#ret-/#ad-/#cg-toolbar) и свой
   отступ — их дефект не касается. Специфичность id (1,0,0) бьёт `.toolbar` (0,1,0)
   независимо от порядка подключения CSS; пейдж-`.toolbar` держит только flex/фон/
   рамку, padding — здесь. */
#main-toolbar {
  padding: var(--space-2) var(--space-6);
}

/* ============================================================================
   Статус-строка канон (2026-07-02, сертификация; брат ENG-004) — ЕДИНЫЙ вид
   строки статуса «Загружено N товаров» под тулбаром. Раньше базовый вид жил
   ПЕЙДЖ-локально байт-идентичными дублями `.status-row` (analytics/styles.css +
   pricing/styles.css; плюс inline у assembly-sort/my-expenses — их консолидируют
   отдельные волны). Дубли сняты у эталонов, канон живёт ЗДЕСЬ, в общем слое
   (page-shell.css грузят все грид-страницы). Движок MA_TableShell строит
   `div.status-row#status-row` (buildStatusRow) → CSS брать отсюда.
   Отступ: 5px верт. (тайт, raw — как 14px верх шапки) · 24px бока (--space-6,
   ось зон хрома). Специфичность класса (0,1,0) = как у прежних дублей: страницы,
   что ещё держат СВОЙ `.status-row` (assembly-sort/my-expenses, инлайн ПОСЛЕ
   этого файла), перебивают его по порядку каскада → их вид не меняется.
   returns/advertising статус-строку не строят (statusRow.enabled=false) → правило
   для них инертно. 0 hardcoded — только токены theme.css. */
.status-row {
  padding: 5px var(--space-6);
  font-size: 12px;
  color: var(--text2);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* ============================================================================
   C-settings (2026-06-15) — опциональные кнопки тулбара скрыты по умолчанию.
   Кнопки `Свернуть/сжать колонки`, `Тепл. карта`, `Σ Итого` теперь off-by-default
   (включаются тумблером в «Настройках»). Движок MA_TableShell вешает класс
   ma-tb-opt-hidden на скрытые (по канон-id), снимает при включении тумблера →
   кнопка появляется НА СВОЁМ канон-месте (порядок в тулбаре не меняется).
   Живёт здесь (page-shell.css — грузят ВСЕ 5 AG-Grid-страниц), а не в
   table-shell.css (его грузит только returns). 0 hardcoded — только токены. */
.ma-tb-opt-hidden { display: none !important; }

/* Секция «какие кнопки показывать в тулбаре» внутри «Настроек» (рендерит движок
   через MA_TableShell.renderToolbarOptionsSection). Наследует вид popup-страницы. */
.ma-tbopt-section { display: flex; flex-direction: column; gap: 4px; }
.ma-tbopt-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 4px;
}
.ma-tbopt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.ma-tbopt-row:hover { color: var(--accent); }
.ma-tbopt-cb { cursor: pointer; accent-color: var(--accent); }
.ma-tbopt-label { user-select: none; }

/* ============================================================================
   C3 (2026-06-15) — режим «Развернуть / во весь экран» (focus-режим).
   Движок MA_TableShell вешает body.ma-fullscreen по клику «Развернуть» (крайняя
   правая кнопка тулбара) и снимает по повторному клику / Escape. НЕ персистится.

   Скрываются (освобождают вертикаль для таблицы):
     • «Про раздел» (.ma-help — блок help-section.js)
     • строка-описание под тулбаром (.mode-hint — analytics)
     • статус «Загружено N товаров» (.status-row)
   Остаются: шапка+метрики · переключатель МП · период · табы · тулбар · грид
   (расширяется на освободившееся за счёт data-table-frame flex:1) · нижнее Итого.

   Сайдбар → 60px: движок добавляет #app-sidebar.collapsed + body.sidebar-collapsed
   (переиспользует CSS сайдбара + резерв base.css), НЕ трогая localStorage сайдбара;
   на выходе восстанавливается прежнее состояние — доп. CSS не нужен.

   Живёт в page-shell.css (грузят все 5 AG-Grid-страниц). 0 hardcoded — чистое
   структурное скрытие. */
body.ma-fullscreen .ma-help,
body.ma-fullscreen .mode-hint,
body.ma-fullscreen .status-row {
  display: none !important;
}

/* ============================================================================
   Wave 1 (2026-06-24) — сегментированный контрол «режим значений»
   (Валовые / На единицу / Смешанный). Рендерит движок MA_TableShell
   (table-shell.js: buildSegmentedControl → .tb-seg-wrap c .tb-seg-btn).
   Спека: docs/specs/table-number-display-system-2026-06-24.md.

   Вид — единый с кнопками тулбара (.tb-btn): рамка/радиус/высота/шрифт от токенов.
   Сегмент = одна сшитая группа из 3 кнопок: общая рамка, внутренние разделители,
   активный сегмент залит --accent (как .tb-btn.active). 0 hardcoded — только токены
   theme.css (--surface/--surface2/--border/--text/--text2/--accent/--on-accent/
   --radius-md/--space-*). Живёт в page-shell.css (грузят все 5 AG-Grid-страниц). */
.tb-seg-wrap {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;            /* скруглить углы крайних сегментов */
  background: var(--surface);
}
.tb-seg-btn {
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.4;
  border: 0;
  /* внутренний разделитель между сегментами — левая граница (кроме первого) */
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.tb-seg-btn:first-child { border-left: 0; }
.tb-seg-btn:hover { background: var(--surface2); color: var(--text); }
.tb-seg-btn.active {
  background: var(--accent);
  color: var(--on-accent);
}
/* разделитель слева от активного сегмента сливается с заливкой */
.tb-seg-btn.active,
.tb-seg-btn.active + .tb-seg-btn { border-left-color: var(--accent); }
/* фокус-кольцо клавиатуры (как у прочих контролов хрома) */
.tb-seg-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;        /* внутрь — чтобы не разрывало сшитую группу */
}
/* адаптивная подпись внутри сегмента — как у кнопок тулбара (.tb-full/.tb-compact).
   По умолчанию полный текст; на узком вьюпорте — компактный символ. */
.tb-seg-btn .tb-compact { display: none; }
.tb-seg-btn .tb-full    { display: inline; }
@media (max-width: 1399px) {
  .tb-seg-btn .tb-full    { display: none; }
  .tb-seg-btn .tb-compact { display: inline; }
}

/* ============================================================================
   Wave (2026-06-24) — «?»-иконка справки рядом с переключателем режима значений +
   общая МОДАЛКА-справка о режимах. Иконку движок MA_TableShell вставляет пост-mount
   (table-shell.js: _injectValueModeHelp → button.tb-seg-help). Модалку строит
   MA_ValueMode.showHelp() (ma-value-mode.js) из единого MODE_HELP — её зовут и канон-
   контрол (returns/advertising), и аналитика из своей «?». 0 hardcoded — только токены
   theme.css (--scrim/--surface/--surface2/--border/--text/--text2/--accent/--shadow/
   --radius-*/--space-*). Живёт в page-shell.css (грузят все 5 AG-Grid-страниц → и
   иконка, и стиль модалки доступны единообразно, включая аналитику). */

/* «?»-иконка справки (вектор-глиф, currentColor) — компактная иконка-кнопка тулбара. */
.tb-seg-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: var(--space-1, 4px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.tb-seg-help:hover { background: var(--surface2); color: var(--accent); }
.tb-seg-help:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* === Оверлей-фон модалки (скрим) === */
.mvm-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;                 /* над гридом/тулбаром, под онбординг-спотлайтом */
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 16px);
  background: var(--scrim);
}
.mvm-help-overlay.open { display: flex; }

/* === Карточка модалки === */
.mvm-help-modal {
  position: relative;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow);
  animation: mvm-help-in 180ms cubic-bezier(.4, 0, .2, 1);
}
@keyframes mvm-help-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Шапка === */
.mvm-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mvm-help-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.mvm-help-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.mvm-help-close:hover { background: var(--surface2); color: var(--text); }
.mvm-help-close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* === Тело (прокручивается, если не влезает) === */
.mvm-help-body {
  padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px);
  overflow-y: auto;
  min-height: 0;
}
.mvm-help-intro {
  margin: 0 0 var(--space-4, 16px);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

/* === Блоки режимов === */
.mvm-help-modes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
}
.mvm-help-mode {
  padding: var(--space-3, 12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  background: var(--surface2);
}
.mvm-help-mode-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-1, 4px);
}
.mvm-help-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-pill, 9999px);
}
.mvm-help-tip {
  font-size: 12px;
  color: var(--text2);
}
.mvm-help-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

/* === Заметки (что не переключается / единицы) === */
.mvm-help-note {
  margin: var(--space-3, 12px) 0 0;
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text2);
}
.mvm-help-note--units { padding-top: var(--space-2, 8px); border-top: 0; }

/* Уважение к prefers-reduced-motion — без анимации появления. */
@media (prefers-reduced-motion: reduce) {
  .mvm-help-modal { animation: none; }
}