/* ============================================================
   Brand & Store — Shopper Insight  ·  route #bs-shopper-insight (FE-035)
   Page-scoped styles. KPI grid + section stubs (slice 1). Section/chart
   classes (.bs-si-*) are added by their slices. Tokens only — no raw hex.
   ============================================================ */

/* Cohort palette (New vs Returning) — single source of truth. Promoted from the
   hardcoded #0891B2 / #F97316 that were duplicated across basket.css, dimension.css
   and the inline JS (COHORT_NEW / COHORT_RET). Cyan/orange are theme-agnostic, so
   one definition serves both light and dark. CSS reads var(--bs-cohort-*); the JS
   reads the same two literals from a shared constant so the pair never drifts. */
.bs-si-page {
  --bs-cohort-new: #0891B2;
  --bs-cohort-ret: #F97316;
  display: flex; flex-direction: column; gap: var(--space-5, 20px); min-width: 0;
}
/* Flex children default to min-width:auto and grow to fit wide content (the
   detail matrices) → page overflow. min-width:0 lets them shrink so the
   matrix's own overflow-x scroll container engages instead. */
.bs-si-page > * { min-width: 0; }

/* ---- KPI overview ---------------------------------------------------- */
.bs-si-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4, 16px);
}
.bs-si-kpi-grid--more {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-4, 16px);
}
@media (max-width: 900px) {
  .bs-si-kpi-grid,
  .bs-si-kpi-grid--more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bs-si-kpi-grid,
  .bs-si-kpi-grid--more { grid-template-columns: minmax(0, 1fr); }
}

/* "Show more / less" — quiet text button, action-blue on hover. */
.bs-si-more-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.25));
  border-radius: var(--radius-2, 8px);
  color: var(--text-secondary, #64748b);
  font: inherit;
  font-size: 0.8125rem;
  padding: 4px 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.bs-si-more-btn:hover {
  color: var(--color-action, #2563eb);
  border-color: var(--color-action, #2563eb);
}

/* KPI card-header actions — period-compare toggle + "Show more" button sit
   on one row with a gap; wrap gracefully on narrow widths. */
.bs-si-kpi-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
}

/* Custom-mode comparison-window picker — revealed only when the compare toggle
   is on "Custom"; two date inputs flanking a quiet "vs". */
.bs-si-compare-custom {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}
.bs-si-compare-custom .bs-hdr__date-input {
  min-width: 130px;
}
.bs-si-compare-vs {
  color: var(--text-tertiary, #94a3b8);
  font-size: 0.8125rem;
}

/* Help-button wrapper — sits as a grid cell in .bs-si-kpi-grid;
   position:relative anchors help-button placement="corner" inside the cell. */
.bs-si-kpi-cell { position: relative; }
.bs-si-kpi-cell > .metric-card { height: 100%; }

/* Approximate-distinct disclaimer (cube pivot) — subtle info footnote under the
   KPI grids; tied to the RPC envelope approx_distinct flag. */
.bs-si-approx-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  margin: var(--space-4, 16px) 0 0;
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.18));
  color: var(--text-tertiary, #94a3b8);
  font-size: 0.75rem;
  line-height: 1.45;
}
.bs-si-approx-note svg { flex: 0 0 auto; margin-top: 2px; opacity: 0.8; }

/* ---- section stubs (replaced by slices 2-4) ------------------------- */
.bs-si-stub-note {
  margin: 0;
  padding: var(--space-6, 24px);
  color: var(--text-tertiary, #94a3b8);
  font-size: 0.875rem;
}

/* ---- error / empty state ------------------------------------------- */
.bs-si-state {
  padding: var(--space-6, 24px);
  color: var(--text-tertiary, #94a3b8);
  text-align: center;
}
.bs-si-state--error { color: var(--color-danger, #dc2626); }
.bs-si-state .btn { margin-top: var(--space-3, 12px); }

/* ---- S1 — table-header standard (centered + bold), page-scoped --------
   The only table on this page is the SHARED .bs-hmx hierarchical matrix
   (charts/bs-hierarchical-matrix-table.{js,css}), reused by bs-drill-table
   and other pages — so we cannot edit the component CSS. Scope the header
   centering to this page via the .bs-si-page wrapper.

   The component sets numeric data headers right (.bs-hmx thead th, spec 0-1-1)
   and the hierarchy column header left (.bs-hmx thead th.bs-hmx-hier-th,
   spec 0-2-1). The standard centers data headers; we target only the data
   headers via :not(.bs-hmx-hier-th) (spec 0-3-1 → wins deterministically
   regardless of source order) and DELIBERATELY leave the frozen hierarchy
   header left-aligned (WAVE-A sticky-left frozen column — do not disturb).
   Headers are already font-weight:700 in the component (matrix.css:48), so
   only text-align is needed here. No overflow/position/background touched. */
.bs-si-page .bs-hmx thead th:not(.bs-hmx-hier-th) { text-align: center; }

/* ---- S10 — card subtitle support (one-fact grain/window line) ---------
   Mirrors the canonical overall-performance structure: stack title + subtitle
   vertically inside card__header--split so the subtitle drops onto its own
   line (card__title is inline by default). Only the two cards authored in
   THIS page's JS (TimeView, KPI overview) get a subtitle here; the province/
   payment/platform/basket/detail card subtitles live in the section-view
   files (bs-shopper-insight-{dimension,basket,detail}.js) — out of fence. */
.bs-si-card-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-si-card-titles .card__subtitle { display: block; margin-top: 0; line-height: 1.4; }

/* ---- By Time — raw-data table BELOW the chart (feedback 2026-06-04) ----
   Chart full-width on top; table full-width beneath, scrolling horizontally
   when there are many period columns (e.g. daily grain). */
.bs-si-time-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}
.bs-si-time-chart { width: 100%; min-width: 0; }
.bs-si-time-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
/* Portfolio table standard (matches #overall-performance). */
.bs-si-time-table {
  border-collapse: collapse;
  font-size: var(--font-data, 13px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bs-si-time-table th,
.bs-si-time-table td {
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.18));
  padding: 6px var(--space-3, 12px);
  text-align: right;
}
.bs-si-time-table thead th {
  background: var(--bg-inset, #EAEBEE);
  font-size: var(--font-xs, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  text-align: center;
}
.bs-si-time-table tbody td { color: var(--text-primary); font-family: var(--font-mono, 'Geist Mono', monospace); }
.bs-si-time-table tbody tr:nth-of-type(even) td { background: color-mix(in srgb, var(--text-primary) 3.5%, transparent); }
.bs-si-tt-rowlbl {
  position: sticky;
  left: 0;
  background: var(--bg-inset, #EAEBEE);
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--font-xs, 11px);
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.bs-si-time-table tbody tr:nth-of-type(even) .bs-si-tt-rowlbl { background: var(--bg-inset, #EAEBEE); }
.bs-si-tt-total { background: var(--bg-inset, rgba(148, 163, 184, 0.10)); font-weight: 700; }
.bs-si-tt-approx { color: var(--text-tertiary); margin-left: 2px; cursor: help; }
@media (max-width: 900px) {
  .bs-si-time-body { flex-direction: column; }
  .bs-si-time-table-wrap { max-width: 100%; width: 100%; }
}