/* ============================================================
Brand & Store — SKU Performance (bs-sku-*)
Phase 2 rebuild (2026-05-29): 5-section layout. Page-scoped
to .bs-sku-page. Tokens only — no hardcoded hex; SOR/service
palette tokens come from bs-overall-performance.css globals.
============================================================ */
/* STICKY-HEADER ENABLER (mirrors bs-atp.css:12 / aging / doi): the router
outlet .page-content is `overflow-y: auto`, which makes IT the sticky scroll
container — but it never scrolls internally, so the BsSharedHeader filter bar
never pins. Dropping it to `visible` (route-scoped for all 3 SKU route ids)
lets the header stick to the document viewport. Wave A fixed the rev-table
wrap cap; this enabler was still missing. */
body[data-page="sku-performance"] .page-content { overflow: visible; }
/* Wide §8 (24-col) table: let .content-area shrink below its intrinsic width so
the page doesn't stretch past the viewport at 1280/1440 (mirror bs-atp.css:15). */
body[data-page="sku-performance"] .content-area { min-width: 0; }
.bs-sku-page { display: flex; flex-direction: column; gap: var(--space-5, 20px); min-width: 0; --bs-hl-mute: 0.1; }
.bs-sku-page > * { min-width: 0; }
/* ── Click-to-highlight (feedback 2026-06-09) — screenshot focus aid.
Reuses the global .is-hl-muted / .is-hl-active classes + --bs-hl-mute token
(declared above so the 90% mute matches Overall). Muting the OTHER rows is
the dominant signal; the active element keeps full opacity + a left accent.
The §8/§9 tables carry nth-child column tints + zebra that out-specify a
row background, so the active accent rides the sticky product cell's
box-shadow (which doesn't compete with background) rather than a td tint. */
.bs-sku-top-row,
.bs-sku-detail-table tbody tr,
.bs-sku-compare-table tbody tr { cursor: pointer; }
.bs-sku-top-row.is-hl-active {
background: color-mix(in srgb, var(--color-action) 9%, transparent);
box-shadow: inset 3px 0 0 var(--color-action);
border-radius: var(--radius-xs, 4px);
}
.bs-sku-detail-table tbody tr.is-hl-active .sticky-left,
.bs-sku-compare-table tbody tr.is-hl-active .sticky-left {
box-shadow: inset 3px 0 0 var(--color-action), 1px 0 0 var(--border-subtle);
font-weight: 700;
}
.bs-sku-section { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
/* Card split-header: titles column (title + subtitle stacked) + actions row */
.bs-sku-card-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-sku-card-titles .card__title { display: inline-flex; align-items: center; gap: 6px; white-space: normal; }
.bs-sku-card-titles .card__subtitle { display: block; margin-top: 0; }
.bs-sku-state { padding: var(--space-6, 24px); text-align: center; color: var(--text-tertiary, #8C95A4); font-size: var(--font-small, 12px); }
.bs-sku-state--error { color: var(--color-danger, #DC2626); }
/* Shared num alignment — mono for tabular data (A7) */
.bs-sku-page .num,
.bs-sku-page th.num,
.bs-sku-page td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--font-mono, ui-monospace, monospace); }
/* ----------------------------------------------------------------
Top controls cluster (used in §7 / §8 / §9 headers)
---------------------------------------------------------------- */
.bs-sku-top-controls { display: flex; gap: var(--space-2, 8px); align-items: center; flex-wrap: wrap; }
/* ----------------------------------------------------------------
§7 Top Best Product Performance — SOR sub-tabs + ranked bars
---------------------------------------------------------------- */
.bs-sku-sor-tabs { flex-wrap: wrap; }
.bs-sku-sor-tabs .bs-tab[disabled] {
color: var(--text-tertiary, #8C95A4);
cursor: not-allowed;
opacity: 0.55;
}
.bs-sku-sor-tabs .bs-tab[disabled]:hover { background: transparent; }
.bs-sku-top-bars { display: flex; flex-direction: column; gap: var(--space-2, 8px); margin-top: var(--space-2, 8px); }
.bs-sku-top-row {
display: grid;
grid-template-columns: 28px minmax(180px, 1.5fr) minmax(120px, 2fr) minmax(100px, auto) minmax(56px, auto);
align-items: center;
gap: var(--space-3, 12px);
}
.bs-sku-top-rank {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: var(--bg-inset, #EAEBEE);
color: var(--text-secondary, #5F6775);
font-size: var(--font-xs, 11px); font-weight: 700;
font-variant-numeric: tabular-nums;
}
.bs-sku-top-name { font-size: var(--font-small, 13px); color: var(--text-primary, #111318); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-sku-top-bar-wrap { background: var(--bg-inset, #EAEBEE); border-radius: var(--radius-xs, 4px); height: 14px; overflow: hidden; }
.bs-sku-top-bar { height: 100%; background: var(--color-action, #2563EB); border-radius: var(--radius-xs, 4px); transition: width .2s ease; }
.bs-sku-top-value { font-size: var(--font-small, 12px); text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono, ui-monospace, monospace); color: var(--text-primary, #111318); font-weight: 600; }
.bs-sku-top-share { font-size: var(--font-xs, 11px); text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono, ui-monospace, monospace); color: var(--text-tertiary, #8C95A4); }
/* ----------------------------------------------------------------
§8 Detail Performance — SOR channel color-coding + separators
6 channel groups: Store / Live / Video / Affiliate / Paid Ads / Offsite
Subtle alpha tints (both-theme safe); separator on first col of each group.
Column layout (1-indexed, col 1 = sticky product):
Store : cols 2-5 (4 cols)
Live : cols 6-10 (5 cols)
Video : cols 11-13 (3 cols)
Affiliate: cols 14-17 (4 cols)
Paid Ads : cols 18-23 (6 cols)
Offsite : cols 24-25 (2 cols)
---------------------------------------------------------------- */
/* Channel tint tokens — low-alpha so they work in both light + dark themes */
:root {
--sku-sor-store-tint: color-mix(in srgb, #2563EB 6%, transparent);
--sku-sor-live-tint: color-mix(in srgb, #0891b2 6%, transparent);
--sku-sor-video-tint: color-mix(in srgb, #7c3aed 6%, transparent);
--sku-sor-aff-tint: color-mix(in srgb, #d97706 6%, transparent);
--sku-sor-ads-tint: color-mix(in srgb, #db2777 6%, transparent);
--sku-sor-offsite-tint: color-mix(in srgb, #059669 6%, transparent);
}
/* Group header tint classes (applied to | in .bs-sku-detail-group-row) */
.bs-sku-sor-store { background: var(--sku-sor-store-tint) !important; }
.bs-sku-sor-live { background: var(--sku-sor-live-tint) !important; }
.bs-sku-sor-video { background: var(--sku-sor-video-tint) !important; }
.bs-sku-sor-aff { background: var(--sku-sor-aff-tint) !important; }
.bs-sku-sor-ads { background: var(--sku-sor-ads-tint) !important; }
.bs-sku-sor-offsite { background: var(--sku-sor-offsite-tint) !important; }
/* Column tints — nth-child positions differ between sub-header and body because
the group-header row has a rowspan=2 Product | that is absent from sub-header row.
Sub-header (no product col, 24 th's): Store 1-4, Live 5-9, Video 10-12,
Aff 13-16, Ads 17-22, Offsite 23-24.
Body (product at col 1, 25 td's): Store 2-5, Live 6-10, Video 11-13,
Aff 14-17, Ads 18-23, Offsite 24-25. */
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(n+1):nth-child(-n+4),
.bs-sku-detail-table tbody td:nth-child(n+2):nth-child(-n+5)
{ background: var(--sku-sor-store-tint); }
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(n+5):nth-child(-n+9),
.bs-sku-detail-table tbody td:nth-child(n+6):nth-child(-n+10)
{ background: var(--sku-sor-live-tint); }
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(n+10):nth-child(-n+12),
.bs-sku-detail-table tbody td:nth-child(n+11):nth-child(-n+13)
{ background: var(--sku-sor-video-tint); }
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(n+13):nth-child(-n+16),
.bs-sku-detail-table tbody td:nth-child(n+14):nth-child(-n+17)
{ background: var(--sku-sor-aff-tint); }
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(n+17):nth-child(-n+22),
.bs-sku-detail-table tbody td:nth-child(n+18):nth-child(-n+23)
{ background: var(--sku-sor-ads-tint); }
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(n+23):nth-child(-n+24),
.bs-sku-detail-table tbody td:nth-child(n+24):nth-child(-n+25)
{ background: var(--sku-sor-offsite-tint); }
/* Zebra on tinted cells — slightly stronger alpha so even rows are distinguishable */
.bs-sku-detail-table tbody tr:nth-of-type(even) td:nth-child(n+2):nth-child(-n+5)
{ background: color-mix(in srgb, #2563EB 11%, transparent); }
.bs-sku-detail-table tbody tr:nth-of-type(even) td:nth-child(n+6):nth-child(-n+10)
{ background: color-mix(in srgb, #0891b2 11%, transparent); }
.bs-sku-detail-table tbody tr:nth-of-type(even) td:nth-child(n+11):nth-child(-n+13)
{ background: color-mix(in srgb, #7c3aed 11%, transparent); }
.bs-sku-detail-table tbody tr:nth-of-type(even) td:nth-child(n+14):nth-child(-n+17)
{ background: color-mix(in srgb, #d97706 11%, transparent); }
.bs-sku-detail-table tbody tr:nth-of-type(even) td:nth-child(n+18):nth-child(-n+23)
{ background: color-mix(in srgb, #db2777 11%, transparent); }
.bs-sku-detail-table tbody tr:nth-of-type(even) td:nth-child(n+24):nth-child(-n+25)
{ background: color-mix(in srgb, #059669 11%, transparent); }
/* Group separators — left border on first column of each channel group.
Sub-header first-col positions: Store=1, Live=5, Video=10, Aff=13, Ads=17, Offsite=23.
Body (with product col) first-col positions: Store=2, Live=6, Video=11, Aff=14, Ads=18, Offsite=24. */
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(1),
.bs-sku-detail-table tbody td:nth-child(2),
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(5),
.bs-sku-detail-table tbody td:nth-child(6),
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(10),
.bs-sku-detail-table tbody td:nth-child(11),
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(13),
.bs-sku-detail-table tbody td:nth-child(14),
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(17),
.bs-sku-detail-table tbody td:nth-child(18),
.bs-sku-detail-table thead tr:not(.bs-sku-detail-group-row) th:nth-child(23),
.bs-sku-detail-table tbody td:nth-child(24)
{ border-left: 2px solid var(--border-default, #D1D5DB); }
/* Row hover — restore tint (hover bg is already strong enough; tint is supplementary) */
.bs-sku-detail-table tbody tr:hover td { background: var(--bg-hover, #F1F5F9); }
.bs-sku-detail-table tbody tr:hover .sticky-left { background: var(--bg-hover, #F1F5F9); }
/* SOR channel color legend (below §8 table) */
.bs-sku-sor-legend {
display: flex; flex-wrap: wrap; gap: var(--space-3, 12px);
padding: var(--space-2, 8px) var(--space-3, 12px);
font-size: var(--font-xs, 11px);
color: var(--text-secondary, #5F6775);
}
.bs-sku-sor-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.bs-sku-sor-legend-swatch {
display: inline-block; width: 12px; height: 12px; border-radius: 3px;
border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
flex-shrink: 0;
}
.bs-sku-sor-legend-swatch--store { background: color-mix(in srgb, #2563EB 25%, transparent); }
.bs-sku-sor-legend-swatch--live { background: color-mix(in srgb, #0891b2 25%, transparent); }
.bs-sku-sor-legend-swatch--video { background: color-mix(in srgb, #7c3aed 25%, transparent); }
.bs-sku-sor-legend-swatch--aff { background: color-mix(in srgb, #d97706 25%, transparent); }
.bs-sku-sor-legend-swatch--ads { background: color-mix(in srgb, #db2777 25%, transparent); }
.bs-sku-sor-legend-swatch--offsite { background: color-mix(in srgb, #059669 25%, transparent); }
/* ----------------------------------------------------------------
§8 Detail Performance — wide table with grouped header.
Sticky thead + sticky-left product col. Portfolio table standard.
---------------------------------------------------------------- */
.bs-sku-detail-table-wrap {
overflow-x: auto;
max-height: calc(100vh - 240px);
border: 1px solid var(--border-default, #D1D5DB);
border-radius: var(--radius-md, 8px);
}
.bs-sku-detail-table { width: 100%; border-collapse: collapse; font-size: var(--font-xs, 11px); }
.bs-sku-detail-table thead { position: sticky; top: 0; z-index: 2; background: var(--bg-inset, #EAEBEE); }
.bs-sku-detail-table thead th {
padding: 6px 8px;
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, #5F6775);
border: 1px solid var(--border-subtle, #E2E8F0);
white-space: nowrap;
}
/* Group-row th: centered label only (override text-align, keep inset bg from parent rule) */
.bs-sku-detail-table .bs-sku-detail-group-row th { text-align: center; }
/* Frozen header corner: must match thead bg so it doesn't mismatch on h-scroll */
.bs-sku-detail-table thead th.sticky-left { background: var(--bg-inset, #EAEBEE); }
.bs-sku-detail-table tbody td {
padding: 6px 8px;
border: 1px solid var(--border-subtle, #E2E8F0);
color: var(--text-primary, #111318);
white-space: nowrap;
}
/* Frozen first column — opaque bg so content under it on h-scroll is masked */
.bs-sku-detail-table .sticky-left {
position: sticky; left: 0; z-index: 1;
background: var(--bg-surface, #FFF);
box-shadow: 1px 0 0 var(--border-subtle, #E2E8F0);
text-align: left;
min-width: 220px;
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
}
.bs-sku-detail-table thead th.sticky-left { z-index: 3; }
.bs-sku-detail-table .bs-sku-detail-name { font-weight: 500; }
.bs-sku-detail-table .bs-sku-detail-na { color: var(--text-tertiary, #8C95A4); }
/* Zebra: transparent tint on odd product col and frozen cell */
.bs-sku-detail-table tbody tr:nth-of-type(even) td:nth-child(1) { background: color-mix(in srgb, var(--text-primary) 3.5%, transparent); }
.bs-sku-detail-table tbody tr:nth-of-type(even) .sticky-left { background: color-mix(in srgb, var(--text-primary) 3.5%, var(--bg-surface)); }
/* ----------------------------------------------------------------
§9 Detail Performance By Product — per-metric PCT/ABS table
---------------------------------------------------------------- */
.bs-sku-compare-table-wrap {
overflow-x: auto;
max-height: calc(100vh - 240px);
border: 1px solid var(--border-default, #D1D5DB);
border-radius: var(--radius-md, 8px);
}
.bs-sku-compare-table { width: 100%; border-collapse: collapse; font-size: var(--font-xs, 11px); }
.bs-sku-compare-table thead { position: sticky; top: 0; z-index: 2; background: var(--bg-inset, #EAEBEE); }
.bs-sku-compare-table thead th {
padding: 6px 8px;
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, #5F6775);
border: 1px solid var(--border-subtle, #E2E8F0);
white-space: nowrap;
}
/* Group-row th: centered label only */
.bs-sku-compare-table .bs-sku-detail-group-row th { text-align: center; }
/* Frozen header corner: must match thead bg */
.bs-sku-compare-table thead th.sticky-left { background: var(--bg-inset, #EAEBEE); }
.bs-sku-compare-table tbody td {
padding: 6px 8px;
border: 1px solid var(--border-subtle, #E2E8F0);
color: var(--text-primary, #111318);
white-space: nowrap;
}
/* Frozen first column */
.bs-sku-compare-table .sticky-left {
position: sticky; left: 0; z-index: 1;
background: var(--bg-surface, #FFF);
box-shadow: 1px 0 0 var(--border-subtle, #E2E8F0);
text-align: left;
min-width: 200px;
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
}
.bs-sku-compare-table thead th.sticky-left { z-index: 3; }
/* Zebra: transparent tint on even rows; opaque frozen cell */
.bs-sku-compare-table tbody tr:nth-of-type(even) td { background: color-mix(in srgb, var(--text-primary) 3.5%, transparent); }
.bs-sku-compare-table tbody tr:nth-of-type(even) .sticky-left { background: color-mix(in srgb, var(--text-primary) 3.5%, var(--bg-surface)); }
/* Row hover — keep frozen cell opaque */
.bs-sku-compare-table tbody tr:hover td { background: var(--bg-hover, #F1F5F9); }
.bs-sku-compare-table tbody tr:hover .sticky-left { background: var(--bg-hover, #F1F5F9); }
/* §9 PCT view — stacked val + delta cell (right-aligned, mono) */
.bs-sku-cmp-cell { vertical-align: top; }
.bs-sku-cmp-val { display: block; font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
/* §9 delta pill (local copy — modeled on .bs-ov-delta* in bs-overall-performance.css).
Global .bs-ov-delta* is linked globally but scoped to .bs-ov-page; declaring a
local namespace here ensures both themes work without coupling to that page. */
.bs-sku-delta { display: inline-block; padding: 1px 7px; border-radius: 5px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--font-xs, 11px); }
.bs-sku-delta--good { color: var(--color-success, #16A34A); background: color-mix(in srgb, var(--color-success) 14%, transparent); }
.bs-sku-delta--bad { color: var(--color-danger, #DC2626); background: color-mix(in srgb, var(--color-danger) 14%, transparent); }
.bs-sku-delta--flat { color: var(--text-tertiary, #8C95A4); }
/* §9 ABS view — group separators between P1/P2/Δ% metric columns.
Each metric group = 3 cols (P1, P2, Δ%); Product col is at position 1 (with rowspan=2).
Sub-header (no product col, 12 th's): GMV P1=1, Orders P1=4, Items P1=7, CR P1=10.
Body (product at col 1, 13 td's): GMV P1=2, Orders P1=5, Items P1=8, CR P1=11. */
.bs-sku-cmp-abs thead tr:not(.bs-sku-detail-group-row) th:nth-child(1),
.bs-sku-cmp-abs tbody td:nth-child(2),
.bs-sku-cmp-abs thead tr:not(.bs-sku-detail-group-row) th:nth-child(4),
.bs-sku-cmp-abs tbody td:nth-child(5),
.bs-sku-cmp-abs thead tr:not(.bs-sku-detail-group-row) th:nth-child(7),
.bs-sku-cmp-abs tbody td:nth-child(8),
.bs-sku-cmp-abs thead tr:not(.bs-sku-detail-group-row) th:nth-child(10),
.bs-sku-cmp-abs tbody td:nth-child(11)
{ border-left: 2px solid var(--border-default, #D1D5DB); }
/* Also on the group-row metric header spans (all are metric groups — col 2+ in group row) */
.bs-sku-cmp-abs thead .bs-sku-detail-group-row th:nth-child(n+2)
{ border-left: 2px solid var(--border-default, #D1D5DB); }
/* §9 sortable column headers (drives both PCT + ABS views) */
.bs-sku-compare-table th.bs-sku-sortable { cursor: pointer; user-select: none; }
.bs-sku-compare-table th.bs-sku-sortable:hover { color: var(--text-primary, #111318); }
.bs-sku-compare-table th.bs-sku-sorted { color: var(--color-action, #2563EB); }
.bs-sku-sort-ind { margin-left: 4px; font-size: 9px; }
/* ----------------------------------------------------------------
Platform tab buttons — Shopee | TikTok
The .bs-plat-pill sits inside .bs-tab; the tab's active class
handles the outer highlight ring. Pill background + glyph color
come from the global .bs-plat-pill--shopee / --tiktok rules.
Ensure no padding / background double-up on the button itself.
---------------------------------------------------------------- */
.bs-sku-plat-tab { padding: 0 !important; background: transparent !important; }
.bs-sku-plat-tab .bs-plat-pill {
/* Inherit padding from the tab so the pill fills the clickable area */
padding: 5px 12px;
font-size: var(--font-small, 13px);
font-weight: 600;
gap: 5px;
border-radius: inherit;
}
/* Active state: lighten the pill to show selection (outer tab bg handles the ring) */
.bs-sku-plat-tab.active .bs-plat-pill--shopee { opacity: 1; filter: brightness(1.1); }
.bs-sku-plat-tab.active .bs-plat-pill--tiktok { opacity: 1; filter: brightness(1.2); }
.bs-sku-plat-tab:not(.active) .bs-plat-pill { opacity: 0.65; }
/* ----------------------------------------------------------------
Responsive — narrow §7 grid; keep share column visible
---------------------------------------------------------------- */
@media (max-width: 1024px) {
.bs-sku-top-row { grid-template-columns: 24px minmax(140px, 1fr) minmax(80px, 1.4fr) auto auto; }
}
|