/* ============================================================================
   aggrid-grouping.css — CSS общего слоя сгруппированной AG Grid-таблицы
   (компаньон aggrid-grouping.js). Подключить ПОСЛЕ aggrid-theme.css,
   ДО page styles.css. 0 хардкод-цветов — только токены theme.css.

   Владеет ВИДОМ группа-строки (тинт + шеврон + жирность), единым в light И dark.
   Эталон — /analytics/. Раньше .ag-row-group имела только bold (без фон-тинта) →
   группа-строка не отличалась от строки данных в тёмной теме. Теперь субтле-тинт
   через --surface2 (в обеих темах он смещён от --surface в ОДНУ сторону: light —
   чуть темнее белого, dark — чуть светлее фона) → одинаковое направление контраста.
   ============================================================================ */

/* ── Категория-группа: субтле фон + bold (одинаково light/dark через --surface2) ── */
.ag-theme-quartz .ag-row.ag-row-group {
  cursor: pointer;
  background: var(--surface2);
}
.ag-theme-quartz .ag-row.ag-row-group .ag-cell {
  font-weight: 700;
}
/* hover чуть заметнее — тот же токен наведения, что у строк данных */
.ag-theme-quartz .ag-row.ag-row-group:hover {
  background: var(--hover, var(--surface2));
}

/* ── Orphan-группа («Без продаж за период») — amber-предупреждение (обе темы) ── */
.ag-theme-quartz .ag-row.orphan-group-row {
  cursor: pointer;
  background: var(--warning-bg) !important;
  font-weight: 700;
}
.ag-theme-quartz .ag-row.orphan-group-row .ag-cell {
  font-weight: 700;
}
.ag-theme-quartz .ag-row.orphan-group-row:hover {
  background: var(--warning-border, var(--warning-bg)) !important;
}

/* ── SVG-шеврон группа-строки: размер/цвет/отступ (заменил литералы ▾/▸) ── */
.ma-group-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.ma-group-chevron-wrap .ma-group-chevron {
  display: block;
  color: var(--text2);
}
.ma-group-name {
  font-weight: 700;
  color: var(--text);
}
.ma-group-count {
  font-weight: 600;
  color: var(--text2);
}

/* ── A11y: видимое кольцо фокуса на группа-ячейке (она role=button tabindex=0).
   Кольцо внутреннее (outline-offset отрицательный), чтобы не выходить за пределы
   ячейки грида и не перекрывать соседние. Единый токен --focus-ring (обе темы). ── */
.ma-group-cell:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
/* мышиный фокус на ячейке кольца не даёт (только клавиатура) */
.ma-group-cell:focus:not(:focus-visible) { outline: none; }

/* ── Колонка «SKU» (числовой идентификатор товара на маркетплейсе) — моноширинный
   приглушённый стиль, как «Артикул». Единый для всех 5 таблиц (2026-06-12). ── */
.ag-theme-quartz .ag-cell.ag-cell-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text2);
}

/* ── Числовые шапки (.ma-num-header) — фильтр-иконка слева, метка справа над
   правовыровненными значениями (канон analytics, правка Александра 2026-06-01).
   Применяется через MA_AG_Grouping.tagNumericHeaders(). Текстовые колонки не трогаем. ── */
.ag-theme-quartz .ag-header-cell.ma-num-header .ag-cell-label-container { flex-direction: row; }
.ag-theme-quartz .ag-header-cell.ma-num-header .ag-header-cell-label    { justify-content: flex-end; }

/* ── ЕДИНЫЙ ИСТОЧНИК: шрифт + компактная плотность AG-Grid для ВСЕХ 5 таблиц
   (analytics/returns/advertising/pricing/my-expenses). Правится ТОЛЬКО здесь —
   раньше дублировалось в 5 page-CSS и разъехалось (компакт-шрифт был 12px на 3
   страницах, 13px на 2). Эталон значений = /analytics/ (компакт жмёт до 12px). ── */
/* Специфичность-якорь (повтор класса → 0,2,0 / 0,3,0): AG-Grid сам инжектит
   РАНТАЙМ-стиль `.ag-theme-quartz{--ag-font-size:14px}` (0,1,0) при создании
   грида. По порядку загрузки он перебивал наш 13px на части страниц (Реклама/
   Цены/Мои расходы рендерили 14px вместо 13px). Повтор класса поднимает нашу
   специфичность выше вендорной, НЕ меняя что селектор матчит. Эталон = analytics. */
.ag-theme-quartz.ag-theme-quartz {
  --ag-font-size: var(--table-font-size);
  --ag-font-family: var(--font, system-ui, sans-serif);
}
.ag-theme-quartz.ag-theme-quartz.compact-mode {
  --ag-row-height: var(--table-row-h-compact);
  --ag-header-height: calc(var(--table-header-h) - 4px); /* компакт-шапка = 28px (32−4) */
  --ag-group-header-height: var(--table-row-h-compact);
  --ag-font-size: var(--table-font-size-compact);
}

/* ════════════════════════════════════════════════════════════════════════
   ЕДИНЫЙ ИСТОЧНИК ВИЗУАЛЬНОГО ОФОРМЛЕНИЯ AG-Grid (ВСЕ 5 таблиц)
   analytics / returns / advertising / pricing / my-expenses.
   Эталон значений = /analytics/. Раньше дублировалось в 5 page-файлах
   и разъехалось (returns/advertising header-bg = --surface2 вместо --surface;
   my-expenses heatmap/группа = хардкод rgba). Правится ТОЛЬКО здесь.
   Якорь .ag-theme-quartz.ag-theme-quartz (повтор класса → 0,2,0) бьёт
   рантайм-стиль, который AG-Grid инжектит при создании грида.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Палитра + нормальные высоты (нормальный, не-компакт режим) ────────────
   Высоты согласованы с MA_AG_Grouping.HEIGHTS (row 34 / header 32 /
   groupHeader 30). Компакт-высоты — в блоке .compact-mode выше. ── */
.ag-theme-quartz.ag-theme-quartz {
  --ag-background-color: var(--surface);
  --ag-foreground-color: var(--text);
  --ag-header-background-color: var(--surface);
  --ag-header-foreground-color: var(--text);
  --ag-odd-row-background-color: var(--bg);
  --ag-row-hover-color: var(--hover, rgba(125,125,125,.07));
  --ag-selected-row-background-color: var(--accent-light, rgba(99,102,241,.1));
  --ag-border-color: var(--border);
  --ag-secondary-border-color: var(--border);
  --ag-cell-horizontal-border: solid var(--border);
  --ag-accent-color: var(--accent);
  --ag-input-focus-border-color: var(--accent);
  --ag-checkbox-checked-color: var(--accent);
  --ag-range-selection-border-color: var(--accent);
  --ag-header-height: var(--table-header-h);
  --ag-group-header-height: 30px;            /* группа-шапка колонок — page-specific, не в каноне */
  --ag-row-height: var(--table-row-h);
}

/* ── Цвета ячеек прибыли/маржи (семантические токены) ──────────────────────
   Класс ставится на .ag-cell. .below-target-cell — оранжевый (маржа ниже
   целевой), приоритетнее pos-cell; neg-cell (убыток) всё ещё важнее. ── */
.ag-theme-quartz .ag-cell.pos-cell { color: var(--color-profit-pos); font-weight: 600; }
.ag-theme-quartz .ag-cell.neg-cell { color: var(--color-profit-neg); font-weight: 600; }
.ag-theme-quartz .ag-cell.dim-cell { color: var(--color-neutral); }
.ag-theme-quartz .ag-cell.below-target-cell { color: var(--orange); font-weight: 600; }

/* ── Тепловая карта строк (класс на .ag-row через getRowClass) ── */
.ag-theme-quartz .ag-row.heatmap-profit-high .ag-cell { background: var(--color-heat-high) !important; }
.ag-theme-quartz .ag-row.heatmap-profit-mid  .ag-cell { background: var(--color-heat-mid)  !important; }
.ag-theme-quartz .ag-row.heatmap-profit-low  .ag-cell { background: var(--color-heat-low)  !important; }

/* ── Строка итогов (pinned bottom) ── */
.ag-theme-quartz .ag-floating-bottom .ag-cell { font-weight: 700; background: var(--surface2) !important; }

/* ── Центровка метки группы-шапки колонок ── */
.ag-theme-quartz .ag-header-group-cell-label { justify-content: center; }

/* ── Чекбокс-колонка (#__cb_select__) — центрирование чекбокса в ячейке ──
   .ag-cell по умолчанию display:block с вертикальным центрированием ТЕКСТА через
   line-height. Кастомный чекбокс-рендерер (MA_AG_Grouping.checkboxColDef и локальные
   аналоги) — блочный <input> в обёртке height:100%; на block-родителе без явной
   высоты height:100% не резолвится → чекбокс прижимался к верху и выглядел «съехавшим»
   (фидбэк Александра 2026-06-27, /my-expenses/). Делаем САМУ ячейку flex-контейнером →
   обёртка растягивается по высоте строки, чекбокс центрируется. Единый источник для
   всех AG-Grid таблиц портала. */
.ag-theme-quartz .ag-cell[col-id="__cb_select__"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ── Ozon-ссылка в ячейке (мелкая акцентная, проявляется на hover) ── */
.ag-theme-quartz .ag-cell .ozon-link {
  display: inline-block;
  font-size: 10px;
  color: var(--accent);
  text-decoration: none;
  margin-left: 4px;
  opacity: 0.6;
}
.ag-theme-quartz .ag-cell .ozon-link:hover { opacity: 1; }

/* ── Дочерние строки drilldown (Orders/Bundles) — приглушены + акцент-полоса ── */
.ag-theme-quartz .ag-row[row-index].child-row .ag-cell {
  font-size: 12px;
  color: var(--text2);
  background: var(--surface2) !important;
  border-left: 3px solid var(--accent);
}

/* ── Кнопка «Сбросить» в попапе фильтра колонки — компактная текст-ссылка.
   AG Grid v32: .ag-filter-apply-panel-button. Переопределяем ТОЛЬКО кнопки
   внутри .ag-filter-apply-panel, чтобы не задеть сортировку/меню. ── */
.ag-theme-quartz .ag-filter-apply-panel {
  justify-content: flex-end;
  padding: 4px 8px;
}
.ag-theme-quartz .ag-filter-apply-panel .ag-filter-apply-panel-button {
  border: none;
  background: none;
  box-shadow: none;
  padding: 2px 6px;
  min-width: 0;
  width: auto;
  font-size: 12px;
  font-family: inherit;
  color: var(--text2);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: color .15s;
}
.ag-theme-quartz .ag-filter-apply-panel .ag-filter-apply-panel-button:hover {
  color: var(--accent);
  background: none;
}

/* ════════════════════════════════════════════════════════════════════════
   Settings popup (.ag-settings-popup / .asp-*) — единый источник.
   Раньше дублировался в 5 местах (analytics+pricing styles.css + 3 inline).
   3-вкладочный пикер колонок/кнопок/вида. Эталон = /analytics/.
   ════════════════════════════════════════════════════════════════════════ */
.ag-settings-popup {
  position: fixed;
  top: 120px;
  right: 24px;
  width: 310px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  z-index: 3000;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
}
.asp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.asp-title { font-weight: 700; font-size: 13px; }
.asp-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text2);
  line-height: 1;
  padding: 0 2px;
  font-family: inherit;
}
.asp-close:hover { color: var(--text); }
/* Вкладки */
.asp-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--surface2); }
.asp-tab {
  flex: 1;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.asp-tab:hover { color: var(--text); }
.asp-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
/* Панели */
.asp-panel { display: none; }
.asp-panel.active { display: block; }
.asp-panel-inner { padding: 6px 0; max-height: 50vh; overflow-y: auto; }
/* Подзаголовок группы колонок в пикере */
.asp-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.asp-group-label:first-child { border-top: none; margin-top: 0; }
/* Кнопка «показать/скрыть все» рядом с названием группы */
.asp-group-toggle {
  background: none;
  border: none;
  font-size: 11px;
  font-family: inherit;
  color: var(--accent);
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.7;
}
.asp-group-toggle:hover { opacity: 1; }
/* Чекбокс-строки */
.asp-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.asp-check-row:hover { background: var(--surface2); }
/* Toggle-строки для вкладки Вид */
.asp-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.asp-toggle-row:last-child { border-bottom: none; }
.asp-toggle-row:hover { background: var(--surface2); }
.asp-tog {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.asp-tog.on { background: var(--accent); }
/* Ручка переключателя — белая в обеих темах (токен --on-accent = #fff) */
.asp-tog-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--on-accent);
  transition: left 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.asp-tog.on .asp-tog-knob { left: 18px; }