/* ============================================================================
   Визуальный стиль отчётных сервисов Garantis — токены и базовые компоненты.
   Эталон: «Отчёт по продажам» (sales.internalgrt.ru), исходник sales-report/client.
   Копируется в новый проект ЦЕЛИКОМ. Значения не подбирать заново.
   ========================================================================== */

:root {
  /* --- интерфейс --- */
  --grt-bg:          #f8fafc;  /* фон страницы (slate-50) */
  --grt-surface:     #ffffff;  /* панели, попапы, карточки */
  --grt-accent:      #2563eb;  /* ЕДИНСТВЕННЫЙ акцент интерфейса (brandBlue) */
  --grt-dark:        #0f172a;  /* шапка сервиса, зафиксированный столбец графика */
  --grt-border:      #cbd5e1;  /* рамка контролов (slate-300) */
  --grt-border-soft: #e2e8f0;  /* рамка панелей и линии сетки графика (slate-200) */
  --grt-border-hair: #f1f5f9;  /* разделители строк в панели деталей (slate-100) */

  /* --- текст: пять ступеней, больше не заводить --- */
  --grt-ink-900: #1e293b;  /* заголовок блока/таблицы */
  --grt-ink-700: #334155;  /* основной текст */
  --grt-ink-600: #475569;  /* подписи полей, значения оси */
  --grt-ink-500: #64748b;  /* второстепенное, «Загрузка…» */
  --grt-ink-400: #94a3b8;  /* подсказки, сноски, футер */

  /* --- смысловые: только два --- */
  --grt-warn-bg:     #fffbeb;  /* amber-50  */
  --grt-warn-ink:    #b45309;  /* amber-700 */
  --grt-warn-border: #fcd34d;  /* amber-300 */
  --grt-error:       #dc2626;  /* red-600   */

  /* --- таблицы: из Excel-стиля «PivotStyleLight16 2» --------------------
     🔑 --xl-header (#0000ff) — это НЕ --grt-accent (#2563eb). Два разных синих
     в одном экране так и задумано: чистый #0000ff пришёл из файла заказчицы.  */
  --xl-header:     #0000ff;  /* шапка, строка и колонка «Итого» */
  --xl-header-ink: #ffffff;
  --xl-stripe:     #d9d9d9;  /* полосы и подсветка строки под курсором */
  --xl-grid:       #d0d7de;  /* сетка */
  --xl-ink:        #000000;  /* текст ячеек */

  /* --- шрифты --- */
  --grt-font-ui:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --grt-font-table: Calibri, "Segoe UI", system-ui, sans-serif;
}

/* Размеры: ровно четыре. 16 — заголовок, 14 — управление и списки,
   12 — фильтры/чипсы/таблица, 11 — сноски и подписи на графике. */

html, body, #root { height: 100%; }
body { background: var(--grt-bg); font-family: var(--grt-font-ui); color: var(--grt-ink-700); }

/* ---------------------------------------------------------------------------
   Сводная таблица. Должна выглядеть выгруженной из Excel.
   ------------------------------------------------------------------------- */
.pivot {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-family: var(--grt-font-table);
  font-size: 12px;
  color: var(--xl-ink);
}
.pivot th,
.pivot td { border: 1px solid var(--xl-grid); padding: 3px 8px; white-space: nowrap; }

/* headerRow: синяя заливка, белый жирный текст, прилипает к верху */
.pivot thead th {
  background: var(--xl-header);
  color: var(--xl-header-ink);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
  border-color: var(--xl-header);
}
/* кнопки +/− в синей шапке — белые с синим знаком */
.pivot thead th button { background: #fff; border-color: #fff; color: var(--xl-header); }

.pivot td.num,
.pivot th.num { text-align: right; }

/* totalRow и колонка «Итого» — та же синяя заливка, что и у шапки */
.pivot tr.total td,
.pivot td.total {
  background: var(--xl-header);
  color: var(--xl-header-ink);
  font-weight: 700;
  border-color: var(--xl-header);
}

/* firstSubtotalRow: подытог верхнего уровня — жирный чёрный БЕЗ заливки */
.pivot tbody tr.lvl0 td { font-weight: 700; }

/* подсветка строки под курсором; «Итого» остаётся синим */
.pivot tbody tr:hover td { background: var(--xl-stripe); }
.pivot tbody tr:hover td.total { background: var(--xl-header); }

/* колонка иерархии прилипает слева */
.pivot td.rowhdr {
  text-align: left;
  font-weight: 400;
  position: sticky;
  left: 0;
  background: #fff;
}
.pivot td.rowhdr .rowhdr-cell {
  display: block;
  max-width: 320px;          /* длинные SKU режем многоточием, полное имя — в title */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* отступ уровня — 14px на ступень (задаётся инлайном: paddingLeft = depth * 14) */

/* Контейнер таблицы: max-height 70vh + overflow:auto + рамка slate-200 + скругление 4px. */

/* ---------------------------------------------------------------------------
   Ползунок периода — один бегунок начала, конец прибит к последнему дню данных.
   ------------------------------------------------------------------------- */
.dr-slider { position: relative; height: 24px; }
.dr-slider input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 24px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.dr-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--grt-accent); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--grt-accent); cursor: pointer;
}
.dr-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 14px; height: 14px; border-radius: 50%;
  background: var(--grt-accent); border: 2px solid #fff; cursor: pointer;
}
.dr-track { position: absolute; top: 10px; left: 0; height: 4px; width: 100%;
            background: var(--grt-border-soft); border-radius: 2px; }
.dr-fill  { position: absolute; top: 10px; height: 4px;
            background: var(--grt-accent); border-radius: 2px; }