/* ============================================================
   Brand & Store — Affiliate v2 · "Livestream" tab styles
   Sibling CSS for bs-aff-v2-livestream.js (staged under .wip/).
   ─────────────────────────────────────────────────────────────
   BOTH-THEME RULE: chrome (card/text/grid/table) uses DESIGN TOKENS
   only — never hardcoded light/dark colors. Series data-mark colors
   (gold NMV bar, navy #Live line, day-type palette, Shopee view/order
   hex) live INLINE in the JS :style/:fill bindings (theme-invariant by
   intent, same idiom as the canonical SoR donut). This file styles only
   the surrounding chrome + SVG axis/grid/label primitives.

   These class names mirror the canonical affiliate-creator idioms:
     .bs-affls-card        ≈ .bs-aff-chart-card  (card chrome)
     .bs-affls-legend*     ≈ .bs-aff-legend*     (legend row)
     .bs-affls-axis-lbl    ≈ .bs-aff-donut-c1    (token-fill SVG text)
     .bs-affls-seg-lbl--on-dark ≈ on-slice white text w/ paint-order
   At integration, this can be folded into bs-affiliate-creator.css or
   shipped as its own <link>; the prefix is namespaced to avoid clashes.
   ============================================================ */

/* ── tab wrapper ──────────────────────────────────────────────── */
.bs-affls-tab { display: flex; flex-direction: column; gap: var(--space-4, 16px); }

/* ── card chrome (mirrors .bs-aff-chart-card) ─────────────────── */
.bs-affls-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.bs-affls-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4, 16px); flex-wrap: wrap;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border-bottom: 1px solid var(--border-subtle, var(--border-default));
}
.bs-affls-card__title {
  font-family: var(--font-display, inherit);
  font-size: 1rem; font-weight: 700; color: var(--color-text);
}
.bs-affls-card__sub {
  font-size: var(--font-xs, 0.75rem); color: var(--color-text-secondary);
  margin-top: 2px;
}
.bs-affls-card__body { padding: var(--space-5, 20px); }
.bs-affls-subhead {
  font-size: var(--font-small, 0.8125rem); font-weight: 700;
  color: var(--color-text-secondary);
  margin: var(--space-5, 20px) 0 var(--space-3, 12px);
}

/* ── two-card responsive row (§1) ─────────────────────────────── */
.bs-affls-row--split { display: flex; gap: var(--space-4, 16px); align-items: stretch; }
.bs-affls-col { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.bs-affls-col--narrow { flex: 2 1 320px; }
.bs-affls-col--wide   { flex: 6 1 520px; }
@media (max-width: 1000px) { .bs-affls-row--split { flex-direction: column; } }

/* ── legend (mirrors .bs-aff-legend) ──────────────────────────── */
.bs-affls-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.bs-affls-legend__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-xs, 12px); color: var(--color-text-secondary);
}
.bs-affls-legend__dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.bs-affls-legend__sq   { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.bs-affls-legend__line { width: 16px; height: 0; border-top: 2.5px solid; flex-shrink: 0; }

/* ── toggle chips (mirrors .bs-aff-ct-btn pill idiom) ─────────── */
.bs-affls-chips, .bs-affls-metric-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.bs-affls-chip {
  border-radius: var(--radius-full, 9999px);
  padding: 4px 12px; font-size: var(--font-xs, 11px); font-weight: 700;
  cursor: pointer; line-height: 1.4;
  background: var(--bg-inset); color: var(--color-text-secondary);
  border: 1px solid var(--border-default);
  transition: background .12s, color .12s, border-color .12s;
}
.bs-affls-chip:hover { background: var(--bg-hover); }
.bs-affls-chip.active {
  background: var(--color-action-muted, var(--color-action-ghost));
  border-color: var(--border-action, var(--color-action));
  color: var(--color-action);
}

/* ── SVG primitives ───────────────────────────────────────────── */
.bs-affls-svg { display: block; width: 100%; height: auto; }
.bs-affls-grid line { stroke: var(--border-subtle, var(--border-default)); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.bs-affls-axis-lbl   { font-size: 11px; fill: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.bs-affls-axis-title { font-size: 12px; font-weight: 700; fill: var(--color-text-secondary); }
/* on-light segment label (Normal-day light bar): dark token text */
.bs-affls-seg-lbl { font-size: 10px; font-weight: 700; fill: var(--color-text); font-variant-numeric: tabular-nums; }
/* on-dark segment label: white text + fixed dark stroke (paint-order) so it
   reads on the theme-invariant dark day-type bars in BOTH themes — canonical
   SoR-donut on-slice idiom. */
.bs-affls-seg-lbl--on-dark {
  fill: #fff;
  stroke: rgba(0, 0, 0, 0.35); stroke-width: 2px; paint-order: stroke;
}

/* ── empty / error states ─────────────────────────────────────── */
.bs-affls-empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 140px; padding: var(--space-6, 24px);
  border: 1px dashed var(--border-default); border-radius: var(--radius-md, 10px);
  color: var(--color-text-secondary); font-size: 13px; text-align: center;
  background: color-mix(in srgb, var(--bg-inset) 40%, transparent);
}
.bs-affls-error {
  padding: var(--space-5, 20px); border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-brand, var(--color-brand));
  background: var(--color-brand-ghost, transparent);
  color: var(--color-brand); font-size: 13px;
}

/* ── [TM] matrix table (§5) — token chrome + zebra ─────────────── */
.bs-affls-tablewrap { overflow-x: auto; }
.bs-affls-matrix {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.bs-affls-matrix th, .bs-affls-matrix td {
  border-bottom: 1px solid var(--border-subtle, var(--border-default));
  padding: 6px 10px; white-space: nowrap;
}
.bs-affls-matrix thead th {
  background: var(--bg-inset); color: var(--color-text-secondary);
  font-family: var(--font-mono, monospace); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700;
  text-align: center; position: sticky; top: 0;
}
.bs-affls-matrix__grouphead {
  border-left: 1px solid var(--border-default);
  text-align: center;
}
.bs-affls-matrix__subhead { font-weight: 600; }
.bs-affls-matrix__rowhead {
  text-align: left; font-weight: 700; color: var(--color-text);
  position: sticky; left: 0; background: var(--bg-surface); z-index: 1;
}
.bs-affls-matrix thead .bs-affls-matrix__rowhead { background: var(--bg-inset); }
.bs-affls-matrix__num { text-align: right; font-family: var(--font-mono, monospace); color: var(--color-text); }
.bs-affls-matrix__num.is-blocked { color: var(--color-text-secondary); opacity: 0.6; }
/* zebra striping (per the dashboard-table standard) */
.bs-affls-matrix tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-inset) 30%, transparent); }
.bs-affls-matrix tbody tr:hover td { background: var(--bg-hover); }