/* ─── Orders page: the cards below Key metrics ─────────
   Order Summary, Revenue vs Ad Spend Trend and Campaign Performance.
   Everything is scoped under .ov-scope, a class on the wrapper around
   those three cards (renderOrders in app.js) AND on
   #campaign-fullscreen-body (index.html), so the Campaign card looks the
   same in full screen, and every other page's .card / .data-table /
   .segment-btn stays exactly as it was. Theme tokens only, so light and
   dark both work. */

.ov-lower { display: flex; flex-direction: column; gap: 16px; }

/* ─── Card shell ─────────────────────────────────────── */
.ov-scope .card {
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.ov-scope .card-header {
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--bg-surface-2) 0%, var(--bg-surface) 100%);
}
.ov-scope .card-title { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.ov-scope .card-subtitle { margin-top: 3px; max-width: 110ch; font-size: 12px; line-height: 1.45; font-weight: 400; color: var(--text-muted); }
.ov-scope .card-body.no-pad > .card-body { padding: 16px 20px 18px; }

/* ─── Control strip ──────────────────────────────────── */
.ov-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
}
.ov-controls-left,
.ov-controls-right { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.ov-ctrl { display: flex; flex-direction: column; gap: 6px; }
.ov-ctrl-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Rounded pill toggles, scoped (the top bar's Overall/Web/App keeps its own look). */
.ov-scope .segment-bar {
  border-radius: 999px;
  padding: 3px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
}
.ov-scope .segment-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 700;
}
/* Single-choice toggles get the brand's solid CTA gradient (theme-polish.css);
   multi-select chips (trend metrics, View As levels) stay a soft tint so
   "one of" and "any of" controls look different. */
.ov-scope .ov-chips .segment-btn.active,
.ov-scope .segment-btn.pivot-dim-pill {
  background: var(--primary-light);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
}
.ov-scope .segment-btn.icon-toggle-btn { padding: 4px 9px; }
.ov-scope .filter-select.multiselect-trigger { border-radius: 10px; }
.ov-scope .btn-icon-text { border-radius: 10px; }

/* Metric chips double as the trend chart's legend. */
.ov-chip-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
[data-theme="dark"] .ov-chip-dot { background: var(--cd); }
.ov-scope .segment-btn:not(.active) .ov-chip-dot { opacity: 0.4; }

/* ─── Revenue vs Ad Spend: stacked mini-charts ───────── */
.ov-trend-stack { display: flex; flex-direction: column; }
.ov-trend-row { padding: 10px 0 2px; }
.ov-trend-row + .ov-trend-row { border-top: 1px dashed var(--border); }
.ov-trend-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 2px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
}
.ov-trend-label small { font-size: 11px; font-weight: 500; color: var(--text-muted); }

/* ─── Tables (both) ──────────────────────────────────── */
.ov-scope .data-table thead th {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.ov-scope .data-table td { padding: 10px 14px; }
/* Numbers right-aligned so digits line up down a column. */
.ov-scope .data-table td.mono,
.ov-scope .data-table th.mono,
.ov-scope .os-table thead tr:not(.os-group-row) th { text-align: right; }
.ov-scope .data-table tbody tr:hover td { background-color: var(--bg-hover); }
/* Frozen first columns (Campaign label, Order Summary Period) must stay
   OPAQUE on hover — --bg-hover is a 5% tint, so on a sticky cell the
   columns scrolling underneath showed straight through it. */
.ov-scope .data-table tbody tr:hover td:first-child,
.ov-scope .os-table tbody tr:hover td.os-period {
  background-color: color-mix(in srgb, var(--primary) 5%, var(--bg-surface));
}

/* ─── Order Summary ──────────────────────────────────── */
.os-table thead tr.os-group-row th {
  height: 30px;
  box-sizing: border-box;
  padding: 6px 14px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.os-table thead tr:nth-child(2) th { top: 30px; } /* second sticky header row sits under the first */
.os-table .os-gs { border-left: 1px solid var(--border); }
.os-grp-cohort::before,
.os-grp-basket::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: 0;
}
.os-grp-cohort::before { background: color-mix(in srgb, var(--success) 45%, transparent); }
.os-grp-basket::before { background: color-mix(in srgb, var(--info) 45%, transparent); }

/* Frozen Period column (same idea as Campaign Performance's first column). */
.os-table .os-period-th,
.os-table td.os-period,
.os-table tr.table-total-row td:first-child {
  position: sticky;
  left: 0;
  text-align: left;
  box-shadow: 1px 0 0 var(--border);
}
.os-table .os-period-th { z-index: 4; vertical-align: bottom; }
.os-table td.os-period { z-index: 2; background: var(--bg-surface); white-space: nowrap; }
.os-table tbody tr:hover td.os-period { background: var(--bg-surface-2); }
.os-wd {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-surface-2);
}
.os-wd.is-weekend { color: var(--primary); background: var(--primary-light); }

/* Totals pinned to the bottom of the scroll area. */
.os-table tr.table-total-row td {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--bg-surface-2);
  box-shadow: 0 -1px 0 var(--border);
}
.os-table tr.table-total-row td:first-child { z-index: 3; box-shadow: 0 -1px 0 var(--border), 1px 0 0 var(--border); }

/* Revenue data bar, behind the number. */
.os-table td.os-bar {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--primary) 16%, transparent) var(--w, 0%), transparent var(--w, 0%));
  background-repeat: no-repeat;
  background-size: calc(100% - 10px) 58%;
  background-position: 5px center;
}
/* Cohort / basket-size tint: --t is the cell's share of its row's
   largest bucket (0–1); capped low so text stays readable. */
.os-table td.os-tint-cohort { background-color: color-mix(in srgb, var(--success) calc(var(--t, 0) * 24%), transparent); }
.os-table td.os-tint-basket { background-color: color-mix(in srgb, var(--info) calc(var(--t, 0) * 26%), transparent); }
.os-table td.os-empty { padding: 28px 14px; text-align: left; color: var(--text-muted); }

/* ─── Campaign Performance ───────────────────────────── */
.ov-scope .cp-filters {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
}
.ov-scope .campaign-pivot-toolbar { display: flex; flex-direction: column; gap: 12px; }

.cp-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--primary) 5%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
}
.cp-summary-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.cp-summary-text b { color: var(--text-primary); }
.cp-summary-text i { font-style: normal; color: var(--text-dim); margin: 0 2px; }
.cp-summary-count { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }

/* Heatmap: one brand hue, darker = bigger share. Same thresholds as
   pivotShareHeat (≥40 / ≥25 / ≥10 / below). Opaque mixes so the
   frozen-column and group-band backgrounds never show through. */
.ov-scope .campaign-pivot-table td.heat-hot  { background: color-mix(in srgb, var(--primary) 30%, var(--bg-surface)); color: var(--text-primary); font-weight: 800; }
.ov-scope .campaign-pivot-table td.heat-warm { background: color-mix(in srgb, var(--primary) 18%, var(--bg-surface)); color: var(--text-primary); }
.ov-scope .campaign-pivot-table td.heat-mild { background: color-mix(in srgb, var(--primary) 9%, var(--bg-surface)); color: var(--text-primary); }
.ov-scope .campaign-pivot-table td.heat-cold { background: color-mix(in srgb, var(--primary) 3%, var(--bg-surface)); color: var(--text-secondary); }

/* Top-level group rows: a faint band so each group reads as a section. */
.ov-scope .campaign-pivot-table tr.pivot-depth-0.pivot-group td:not([class*="heat-"]) {
  background: color-mix(in srgb, var(--primary) 4%, var(--bg-surface));
}
.ov-scope .campaign-pivot-table tr.pivot-depth-0.pivot-group td:last-child {
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-surface-2));
}
.ov-scope .campaign-pivot-table tr.pivot-depth-0 td { border-top: 1px solid var(--border); }

/* Row labels open the row's trend chart — say so on hover. */
.ov-scope .data-table.campaign-pivot-table td.campaign-row-label { text-align: left; } /* beats the numeric right-align above (the label cell is .mono too) */
.ov-scope .campaign-pivot-table .campaign-row-label:hover {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
  text-underline-offset: 3px;
}
.ov-scope .campaign-pivot-table th.sortable:hover { color: var(--text-primary); }

/* Grand-total cell: a tint instead of a solid block. */
.ov-scope .campaign-pivot-table tbody tr.table-total-row td:last-child {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 800;
}

/* Group expand/collapse chevron (replaces the old ▶/▼ text). Not scoped:
   the button lost its inline styles, so it needs these everywhere. */
.pivot-toggle {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  vertical-align: middle;
}
.pivot-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.pivot-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pivot-toggle svg { transition: transform 0.18s ease; }
.pivot-toggle.is-collapsed svg { transform: rotate(-90deg); }

/* ─── Order Summary: change vs previous period + Partial tag ──────
   specs/001-order-summary-upgrade. The arrow and sign carry the meaning;
   colour only reinforces it (good/bad by metric — Discount % up is bad). */
.os-table .os-delta {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-secondary); /* ≥ 4.5:1 in both themes; --text-muted was 2.68:1 */
}
.os-table .os-delta-good { color: #2B7A63; }
.os-table .os-delta-bad  { color: #B33434; }
[data-theme="dark"] .os-table .os-delta-good { color: var(--success); }
[data-theme="dark"] .os-table .os-delta-bad  { color: var(--danger); }
/* on heatmap tiles the cell's text colour is already contrast-picked for
   its background — inherit it at full strength (any opacity drops it below
   4.5:1 on the darker tiles, e.g. 3.82:1 on #C3502B at 85%) */
.os-table td.os-heat .os-delta { color: inherit; }

.os-table .os-partial {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border: 1px dashed var(--border);
}

/* ─── Order Summary: sortable headers (FR-007, FR-012) ────────────
   The <th> stays a real column header (so aria-sort is announced); the
   <button> inside is the control. No height change — the second sticky
   header row's 30px offset holds. */
.os-table .os-sort-btn {
  all: unset;
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  user-select: none;
  text-align: inherit;
  white-space: nowrap;
  transition: color var(--ease-fast);
}
.os-table th.os-sort:hover .os-sort-btn { color: var(--text-primary); }
.os-table .os-sort-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }
.os-table th.os-sort.is-sorted { color: var(--primary); }
.os-table .os-sort-ind { margin-left: 4px; font-size: 9px; }