/* ============================================================
   Brand & Store — ATP (Available to Promise)  (bs-atp-*)
   Scoped to .bs-atp-page. DataTable owns the table + export.
   ============================================================ */

/* TikTok pill token — near-black in light theme, white-alpha in dark.
   The pill text is always #fff / var(--text-primary) so contrast is met
   in both modes. Light theme gets an explicit border so the pill edge
   reads against a light surface. */
:root,
[data-theme="light"] {
  --bs-pill-tiktok-bg:     #111318;
  --bs-pill-tiktok-border: rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] {
  --bs-pill-tiktok-bg:     rgba(255, 255, 255, 0.14);
  --bs-pill-tiktok-border: rgba(255, 255, 255, 0.22);
}

/* Bar-track token — neutral translucent background for the empty portion
   of each horizontal bar (light + dark already differ by 3×). */
:root,
[data-theme="light"] { --bs-track-bg: rgba(0, 0, 0, 0.08); }
[data-theme="dark"]  { --bs-track-bg: rgba(255, 255, 255, 0.10); }

/* STICKY-HEADER ENABLER (the real fix — verified in qc/sticky-repro.html):
   the router outlet .page-content is `overflow-y: auto`, which makes IT the
   sticky scroll container — but it never scrolls internally (the document
   scrolls), so the sticky filter header never pins. Dropping it to `visible`
   (route-scoped, exactly like #aging does) lets the header stick to the
   document viewport. THIS is what made the ATP filter card not stick. */
body[data-page="atp"] .page-content { overflow: visible; }
/* Wide-table: also let .content-area shrink below the 26-col table's intrinsic
   width so the page doesn't stretch past the viewport (#doi + #aging ship this). */
body[data-page="atp"] .content-area { min-width: 0; }
.bs-atp-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
  min-width: 0;
  background: var(--bg-base);
}
.bs-atp-page > * { min-width: 0; }

/* view tabs row — canonical .bs-tabs/.bs-tab underline style (matches aging/doi);
   the bottom border is the baseline the active-tab underline sits on. */
.bs-atp-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4, 16px);
  padding-top: var(--space-3, 12px);
}
.bs-atp-tabs-row {
  justify-content: space-between;
  padding-top: 0;
  border-bottom: 1px solid var(--border-subtle);
}

.bs-atp-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  min-width: 0;                /* let the card shrink; the table-wrap owns scroll */
}

.bs-atp-state {
  padding: var(--space-6, 24px);
  text-align: center;
  color: var(--text-tertiary, #8C95A4);
  font-size: var(--font-small, 12px);
}
.bs-atp-state--error {
  color: var(--color-danger, #DC2626);
}

/* ---- card header / subtitle / actions ------------------------------- */
.bs-atp-card-subtitle {
  font-size: var(--font-small, 12px);
  color: var(--text-secondary, #5F6775);
  margin-top: 3px;
}
.bs-atp-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}
.bs-atp-export-btn[disabled] { opacity: 0.5; cursor: default; }

/* ============================================================
   Grouped detail table (.bs-atp-table) — 2-row thead
   Mirrors the spec .fin-table / group-header / col-header.
   ============================================================ */
/* Standard table chrome (matches the .fin-table look across ecom): rounded,
   full-bordered, scrolls inside its own rounded frame.
   SELF-CONTAINED SCROLL (2026-05-30): the wrap is its OWN scroll container on
   BOTH axes (max-height caps it vertically; overflow:auto scrolls x+y). This is
   the robust pinned-header model — a wide table cannot pin its header on PAGE
   scroll because the very overflow-x:auto it needs for horizontal scroll also
   makes it a scroll container that scopes the sticky <thead> to itself. Verified
   empirically 2026-05-30: page-scroll → header scrolls away; wrap-scroll with a
   height cap → header pins to the wrap top. So the table scrolls internally and
   the <thead> sticks at top:0 of the wrap (see thead rule below). */
.bs-atp-table-wrap {
  max-height: calc(100vh - 248px);
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 10px);
}

.bs-atp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-data, 13px);
}
/* Full grid borders for readability (same subtle color all around). */
.bs-atp-table thead th,
.bs-atp-table tbody td { border: 1px solid var(--border-subtle); }

/* Sticky header — stick the WHOLE <thead> as ONE cohesive block (the canonical
   .fin-table pattern, styles.css:1163), NOT the individual <th> cells.
   WHY: the table lives inside .bs-atp-table-wrap (overflow-x:auto → overflow-y
   computes to auto → it's a scroll container). When sticky is on the <th> cells
   instead of <thead>, the cells get scoped to that wrap and are shoved
   `top:var(--bs-header-h)` (~96px) DOWN from their <tr> immediately — the cells
   detach from their row boxes, leaving empty header rows at the table top and the
   header CONTENT floating ~96px lower (the "broken header" bug, verified 2026-05-30:
   th-vs-tr divergence 96px with cell-sticky → 0px with thead-sticky). Sticking the
   <thead> moves both rows together as one unit and never detaches. */
.bs-atp-table thead {
  position: sticky;
  top: 0;                 /* the wrap is the scroll region → pin to ITS top, not --bs-header-h */
  z-index: 3;
}
.bs-atp-table thead tr.bs-atp-group-header th {
  background: var(--bg-inset, #EAEBEE);
  font-size: var(--font-xs, 11px);
  font-weight: 700;
  color: var(--text-secondary, #5F6775);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px var(--space-3, 12px) 4px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-default, rgba(0,0,0,0.10));
  text-align: left;
}

/* thead row 2 — column header (sits directly below the group-header row) */
.bs-atp-table thead tr.bs-atp-col-header th {
  background: var(--bg-inset, #EAEBEE);
  font-size: var(--font-xs, 11px);
  font-weight: 700;
  color: var(--text-secondary, #5F6775);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-default, rgba(0,0,0,0.10));
  text-align: left;
}
.bs-atp-table thead tr.bs-atp-col-header th.bs-atp-num { text-align: right; }

.bs-atp-table th.bs-atp-grp-start { border-left: 2px solid var(--border-strong, rgba(0,0,0,0.18)); }

/* body cells */
.bs-atp-table tbody td {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  color: var(--text-primary, #111318);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.05));
}
.bs-atp-table tbody td.bs-atp-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-feature-settings: 'tnum';
}
.bs-atp-table tbody td.bs-atp-grp-start { border-left: 2px solid var(--border-subtle, rgba(0,0,0,0.05)); }
.bs-atp-table tbody tr { transition: background 150ms ease; }
.bs-atp-table tbody tr:hover td { background: var(--bg-hover, #EDEEF1); }

/* total row */
.bs-atp-table tbody tr.bs-atp-total td {
  background: var(--color-action-ghost, rgba(37,99,235,0.06));
  font-weight: 700;
  border-top: 2px solid var(--border-strong, rgba(0,0,0,0.18));
  border-bottom: none;
}

/* cell helpers */
.bs-atp-entity { font-weight: 700; font-size: var(--font-small, 12px); }
.bs-atp-dim    { color: var(--text-tertiary, #8C95A4); }
.bs-atp-mono   { font-variant-numeric: tabular-nums; font-size: 11px; }
.bs-atp-skuname {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: bottom;
}

/* platform pill (table rows) — now uses shared .bs-plat-pill--shopee/tiktok
   (styles.css). Keep only the font-size tweak so table pills stay compact. */
.bs-atp-page .bs-plat-pill {
  font-size: 10px;
  letter-spacing: 0.04em;
}
/* Dark-theme override: TikTok pill background uses the local token so it reads
   against dark surfaces (shared pill hardcodes #111318 which blends into dark bg). */
[data-theme="dark"] .bs-atp-page .bs-plat-pill--tiktok {
  background: var(--bs-pill-tiktok-bg);
  border: 1px solid var(--bs-pill-tiktok-border);
  color: var(--text-primary, #F0F2F5);
}

/* ============================================================
   Chart 1 — ATP Onsite Performance (horizontal bars, always-on)
   Per ATP_Brand_structure.md Chart 1 spec. Shopee + TikTok
   panels, 4 bars each, 95% target line.
   ============================================================ */
.bs-atp-perf-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
}
.bs-atp-perf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
}
.bs-atp-perf-title {
  font-size: var(--font-h2, 20px);
  font-weight: 600;
  color: var(--text-primary, #111318);
}
.bs-atp-perf-subtitle {
  font-size: var(--font-small, 12px);
  color: var(--text-secondary, #5F6775);
  margin-top: 3px;
}

/* Chart-view toggle (Rows ⇄ Gauge) + legend share the header's right side. */
.bs-atp-perf-controls { display: flex; align-items: center; gap: var(--space-4, 16px); flex-wrap: wrap; }
.bs-atp-legend { display: flex; align-items: center; gap: var(--space-4, 16px); flex-wrap: wrap; }
.bs-atp-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-xs, 11px);
  color: var(--text-tertiary, #8C95A4);
}
.bs-atp-legend-target {
  width: 16px; height: 2.5px;
  background: var(--bg-surface, #FFF);
  box-shadow: 0 0 0 1px var(--text-primary, #111318);
  border-radius: 1px;
  flex-shrink: 0;
}
.bs-atp-legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.bs-atp-legend-swatch--ok    { background: var(--color-success, #22C55E); }
.bs-atp-legend-swatch--warn  { background: var(--color-warning, #EAB308); }
.bs-atp-legend-swatch--below { background: var(--color-danger, #EF4444); opacity: 0.85; }

.bs-atp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8, 32px);
}
.bs-atp-grid--single { grid-template-columns: 1fr; max-width: 440px; }

/* Platform pill (chart panels — larger than the table row pills).
   Scoped to .bs-atp-page so these overrides win over body[data-portal] .bs-plat-pill. */
.bs-atp-page .bs-atp-pill {
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-3, 12px);
}
/* Shopee: shared .bs-plat-pill--shopee sets background; no local override needed. */
.bs-atp-page .bs-atp-pill.bs-plat-pill--tiktok {
  background: var(--bs-pill-tiktok-bg);
  border: 1.5px solid var(--bs-pill-tiktok-border);
}
[data-theme="dark"] .bs-atp-page .bs-atp-pill.bs-plat-pill--tiktok {
  color: var(--text-primary, #F0F2F5);
}

.bs-atp-mrow { margin-bottom: var(--space-3, 12px); }
.bs-atp-mrow:last-child { margin-bottom: 0; }
.bs-atp-mlabel {
  font-size: var(--font-small, 12px);
  color: var(--text-secondary, #5F6775);
  font-weight: 600;
  margin-bottom: 6px;
}
.bs-atp-bararea { display: flex; align-items: center; gap: 10px; }
.bs-atp-bartrack {
  flex: 1;
  height: 10px;
  background: var(--bs-track-bg);
  border-radius: 6px;
  position: relative;
  overflow: visible;
}
.bs-atp-barfill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: 6px;
}
.bs-atp-barfill--ok    { background: var(--color-success, #22C55E); }
.bs-atp-barfill--warn  { background: var(--color-warning, #EAB308); }
.bs-atp-barfill--below { background: var(--color-danger, #EF4444); opacity: 0.85; }
.bs-atp-tline {
  position: absolute;
  top: -6px; bottom: -6px;
  width: 2.5px;
  border-radius: 2px;
  background: var(--bg-surface, #FFF);
  box-shadow: 0 0 0 1px var(--text-primary, #111318);
  z-index: 2;
}
.bs-atp-ttick {
  position: absolute;
  top: -26px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-tertiary, #8C95A4);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.bs-atp-barval {
  font-size: 13px;
  font-weight: 700;
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bs-atp-barval--ok    { color: var(--color-success, #16A34A); }
.bs-atp-barval--warn  { color: var(--color-warning, #CA8A04); }
.bs-atp-barval--below { color: var(--color-danger, #DC2626); }

/* ── Column-group toggle ("Metric ▾") + heatmap (reference ATP_Groupbrand) ── */
.bs-atp-colctrl { position: relative; display: inline-flex; }

/* Shared pill button (Metric ▾, Export CSV) — consistent bordered pill. */
.bs-atp-pillbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border: 1px solid var(--border-default);
  border-radius: 9999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-small, 12px); font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.bs-atp-pillbtn:hover:not([disabled]) { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); }
.bs-atp-pillbtn:active:not([disabled]) { background: var(--bg-active); }
.bs-atp-pillbtn--open { background: var(--color-action-muted); border-color: var(--color-action); color: var(--color-action); }
.bs-atp-pillbtn-ico { font-size: 13px; line-height: 1; opacity: 0.8; }
.bs-atp-colctrl-arrow { font-size: 10px; opacity: 0.7; }
.bs-atp-colbackdrop { position: fixed; inset: 0; z-index: 40; }
.bs-atp-colpanel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  min-width: 240px; padding: var(--space-2);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.bs-atp-colpanel-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary); padding: var(--space-2) var(--space-2) var(--space-1);
}
.bs-atp-colitem {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 6px var(--space-2); border-radius: var(--radius-sm);
  font-size: var(--font-small); color: var(--text-secondary); cursor: pointer;
}
.bs-atp-colitem:hover { background: var(--bg-hover); }
.bs-atp-colitem input { accent-color: var(--color-action); cursor: pointer; }
.bs-atp-colitem-name { flex: 1; }
.bs-atp-colitem-badge { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }

/* ATP compliance tint — translucent fill (set inline); theme text shows through. */
.bs-atp-grad { font-weight: 600; }

/* Zebra striping — alternate row tint on cells WITHOUT a compliance tint. */
.bs-atp-table tbody tr:nth-child(even) td:not(.bs-atp-grad) { background: color-mix(in srgb, var(--text-primary) 3.5%, transparent); }
.bs-atp-table tbody tr:hover td:not(.bs-atp-grad) { background: var(--bg-hover); }

/* Compliance legend footer (inside the table card) */
.bs-atp-heatlegend {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: 11px; color: var(--text-tertiary);
}
.bs-atp-heatlegend-item { display: inline-flex; align-items: center; gap: 5px; }
.bs-atp-tswatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.bs-atp-tswatch--green  { background: rgba(34,197,94,0.45); }
.bs-atp-tswatch--yellow { background: rgba(234,179,8,0.55); }
.bs-atp-tswatch--red    { background: rgba(239,68,68,0.4); }
.bs-atp-tswatch--total  { background: var(--color-action-ghost, rgba(37,99,235,0.06)); border: 1px solid var(--color-action, #2563eb); }
.bs-atp-heatlegend-note { margin-left: auto; }

/* Click-to-sort headers */
.bs-atp-table thead .bs-atp-col-header th.bs-atp-sortable { cursor: pointer; user-select: none; }
.bs-atp-table thead .bs-atp-col-header th.bs-atp-sortable:hover { color: var(--text-primary); }
.bs-atp-table thead .bs-atp-col-header th.bs-atp-sorted { color: var(--color-action); }
.bs-atp-sort-arrow { font-size: 9px; margin-left: 2px; vertical-align: middle; }

/* ============================================================
   Gauge view — ATP Onsite ring gauges grouped by platform.
   Toggle alternative to the horizontal bars (same data, same
   3-tier color via the JS gaugeColor()/tierOf()). Stacked groups
   (Shopee then TikTok), 4 gauges each (Onsite / A / B / A&B).
   ============================================================ */
.bs-atp-gauge-groups { display: flex; flex-direction: column; gap: var(--space-4); }
.bs-atp-gauge-group {
  display: flex; flex-direction: column; gap: var(--space-3);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-4);
}
.bs-atp-gauge-group .bs-atp-pill { align-self: flex-start; margin-bottom: 0; }
/* Border matches the platform pill color */
.bs-atp-gauge-group--shopee { border-color: rgba(238, 77, 45, 0.45); background: rgba(238, 77, 45, 0.03); }
.bs-atp-gauge-group--tiktok { border-color: rgba(0, 0, 0, 0.28); background: rgba(0, 0, 0, 0.02); }
[data-theme="dark"] .bs-atp-gauge-group--tiktok { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.03); }
.bs-atp-gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.bs-atp-gauge { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.bs-atp-gauge-ring { position: relative; width: 116px; height: 116px; }
.bs-atp-gauge-svg { width: 100%; height: 100%; display: block; }
.bs-atp-gauge-track { stroke: var(--bg-hover); }
.bs-atp-gauge-val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.bs-atp-gauge-label { font-size: var(--font-small, 12px); font-weight: 600; color: var(--text-secondary); text-align: center; }
@media (max-width: 720px) { .bs-atp-gauges { grid-template-columns: repeat(2, 1fr); } }