/* ============================================================
   Brand & Store — Customer Service  (bs-cs-*)
   Scoped to .bs-cs-page.  Uses design tokens from variables.css.
   ============================================================ */

/* ---- page-scoped data-viz palette tokens --------------------------------
   Defined once on the page root so charts adapt across themes. Series colors
   reference the semantic status/action tokens; categorical reason colors are
   named so the bad-rating reasons stay distinguishable. Structural strokes
   (grid/axis/text) use the global --border-subtle / --text-tertiary tokens
   directly at the call site. */
.bs-cs-page {
  --chart-bar:       var(--color-action, #3B82F6);
  --chart-bar2:      var(--color-action, #6366F1);
  --chart-good:      var(--color-success, #22C55E);
  --chart-bad:       var(--color-danger, #EF4444);
  --chart-avg:       var(--text-tertiary, #9CA3AF);
  --chart-csat:      var(--color-warning, #F59E0B);
  --chart-line:      var(--color-success, #10B981);
  --chart-reason-1:  #7F77DD;
  --chart-reason-2:  #EF9F27;
  --chart-reason-3:  #1D9E75;
  --chart-reason-4:  #D4537E;
  --chart-reason-5:  #D85A30;
  /* dissatisfaction stage ramp (light→dark blue) + seller-negative categories */
  --chart-stage-1:   #B5D4F4;
  --chart-stage-2:   #378ADD;
  --chart-stage-3:   #185FA5;
  --chart-stage-4:   #042C53;
  --chart-neg-product: #D85A30;
  --chart-neg-service: #EF9F27;
  --chart-neg-other:   #7F77DD;
  --chart-neg-rate:    var(--color-danger, #EF4444);
}

/* ---- page shell ---------------------------------------------------------- */
.bs-cs-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 20px);
  min-width: 0;
}
.bs-cs-page > * {
  min-width: 0;
}

/* ---- platform band ------------------------------------------------------- */
.bs-cs-platform-band {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3, 12px) 0 0;
}

/* ---- section card header (title + toolbar in one row) ------------------- */
.bs-cs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-3, 12px);
}

/* ---- grain toggle row (global row above all trend charts) --------------- */
.bs-cs-grain-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;           /* prevent right-column clip at 1280px (CS-FILTER-CLIP) */
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-5, 20px);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle, #E2E8F0);
  border-radius: var(--radius-md, 8px);
}

.bs-cs-grain-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  flex-shrink: 0;
}

/* ---- grain toggle spacing ------------------------------------------------ */
.bs-cs-grain-toggle {
  flex-shrink: 0;
}

/* ---- Advanced KPI toggle button ---------------------------------------- */
.bs-cs-adv-toggle {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle, #E2E8F0);
  color: var(--text-secondary, #475569);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.bs-cs-adv-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary, #1E293B);
}

/* ---- KPI grid ------------------------------------------------------------ */
.bs-cs-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4, 16px);
  margin-top: var(--space-3, 12px);
}

/* Advanced KPI grid — same column basis so card width matches the basic row */
.bs-cs-kpi-grid--adv {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-top: var(--space-3, 12px);
  animation: cs-fadein 0.2s ease forwards;
}

@keyframes cs-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bs-cs-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4, 16px);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle, #E2E8F0);
  border-radius: var(--radius-md, 8px);
}

.bs-cs-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary, #94A3B8);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
}

.bs-cs-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  color: var(--color-action, #2563EB);
}
.bs-cs-kpi-icon svg { width: 14px; height: 14px; }
.bs-cs-kpi-card--cost .bs-cs-kpi-icon { color: var(--color-brand, #CB222A); }

.bs-cs-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right; /* feedback 2026-06-09 #1 — right-align numerics */
}

/* ---- trend chart --------------------------------------------------------- */
.bs-cs-trend-wrap {
  width: 100%;
  overflow: hidden;
}

.bs-cs-trend-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-5, 20px);
  margin-top: var(--space-3, 12px);
}

.bs-cs-trend-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary, #475569);
}

.bs-cs-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* S1: toggled-off legend item — matches pill opacity cue */
.bs-cs-legend-item--off {
  opacity: 0.45;
}

/* Caption / note line below chart controls (muted tertiary text) */
.bs-cs-chart-caption {
  margin: 0 0 4px 0;
  font-size: 11px;
  color: var(--text-tertiary, #94A3B8);
  line-height: 1.4;
}

/* ---- chart tooltip (floating, position:absolute in SVG container) -------- */
.chart-tooltip-float {
  position: absolute;
  pointer-events: none;
  z-index: 20;
}

/* ---- CSAT breakdown ------------------------------------------------------ */
.bs-cs-csat-card {
  margin-top: var(--space-3, 12px);
}

.bs-cs-csat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6, 24px);
}

.bs-cs-csat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary, #475569);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: var(--space-3, 12px);
}

/* stacked bar */
/* overflow:visible so the data-tooltip ::after pill is never clipped (F1).
   Rounded ends are restored on the first/last segment instead of clipping the
   whole stack, so we keep the rounded-bar look without an overflow clip. */
.bs-cs-csat-stack {
  display: flex;
  height: 24px;
  border-radius: var(--radius-sm, 4px);
  overflow: visible;
  margin-bottom: var(--space-2, 8px);
}

.bs-cs-csat-seg {
  height: 100%;
  transition: width 0.3s ease;
  min-width: 2px;
}
.bs-cs-csat-seg:first-child {
  border-top-left-radius: var(--radius-sm, 4px);
  border-bottom-left-radius: var(--radius-sm, 4px);
}
.bs-cs-csat-seg:last-child {
  border-top-right-radius: var(--radius-sm, 4px);
  border-bottom-right-radius: var(--radius-sm, 4px);
}

.bs-cs-csat-legend {
  display: flex;
  gap: var(--space-4, 16px);
  flex-wrap: wrap;
}

.bs-cs-csat-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary, #475569);
}

/* DSAT reason bars */
.bs-cs-dsat-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.bs-cs-dsat-row {
  display: grid;
  grid-template-columns: 140px 1fr 56px;
  align-items: center;
  gap: var(--space-2, 8px);
}

.bs-cs-dsat-label {
  font-size: 12px;
  color: var(--text-primary, #1E293B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bs-cs-dsat-bar-wrap {
  background: var(--bg-inset);
  border-radius: var(--radius-sm, 4px);
  height: 10px;
  overflow: hidden;
}

.bs-cs-dsat-bar {
  background: var(--color-danger);
  height: 100%;
  border-radius: var(--radius-sm, 4px);
  transition: width 0.3s ease;
  min-width: 2px;
}

.bs-cs-dsat-count {
  font-size: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #475569);
  text-align: right;
}

/* TikTok CSAT split */
.bs-cs-tiktok-split {
  display: flex;
  gap: var(--space-6, 24px);
  margin-top: var(--space-3, 12px);
  flex-wrap: wrap;
}

.bs-cs-tiktok-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.bs-cs-tiktok-kpi__val {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #0F172A);
}

.bs-cs-tiktok-kpi__lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary, #94A3B8);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ---- TikTok DSAT matrix -------------------------------------------------- */
.bs-cs-dsat-matrix {
  width: 100%;
  overflow-x: auto;
}

/* ---- column-visibility pill toggles (channel table) ---------------------- */
.bs-cs-col-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3, 12px);
}

.bs-cs-col-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, #E2E8F0);
  background: var(--color-action, #2563EB);
  color: #fff;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}

.bs-cs-col-pill--hidden {
  background: var(--bg-inset);
  color: var(--text-tertiary, #94A3B8);
  opacity: 0.7;
}

.bs-cs-col-pill:hover {
  opacity: 0.85;
}

/* ---- channel bad rating overview ---------------------------------------- */
.bs-cs-bad-rating {
  margin-top: var(--space-3, 12px);
}

.bs-cs-br-total-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  margin-bottom: var(--space-2, 8px);
}

/* ---- platform band buttons — glyph + label layout ----------------------- */
/* .bs-cs-plat-btn is an additive modifier on .pnl-compare-btn — it adds
   inline-flex alignment so the SVG glyph and text sit side-by-side.
   The glyph wrapper matches the pattern of .bs-cs-kpi-icon (inline-flex,
   fixed 16px, vertically centered). */
.bs-cs-plat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bs-cs-plat-glyph {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.bs-cs-plat-glyph svg { width: 16px; height: 16px; }

/* ---- sub-section header row (subhead + export button inline) ------------ */
.bs-cs-subhead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin: 0 0 8px;
}
/* reset bottom margin on subhead when it lives inside the row */
.bs-cs-subhead-row .bs-cs-subhead {
  margin: 0;
}

/* ---- BE-fenced placeholder notice --------------------------------------- */
.bs-cs-fence-note {
  margin-top: var(--space-4, 16px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: color-mix(in srgb, var(--color-warning, #D97706) 8%, var(--bg-surface));
  border: 1px dashed color-mix(in srgb, var(--color-warning, #D97706) 40%, transparent);
  border-radius: var(--radius-md, 8px);
  font-size: 12px;
  color: var(--color-warning, #D97706);
}

/* ---- state / empty / error ----------------------------------------------- */
.bs-cs-state {
  padding: var(--space-6, 24px);
  color: var(--text-tertiary, #94A3B8);
  text-align: center;
  font-size: 13px;
}

.bs-cs-state--error {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4, 16px);
  text-align: left;
}

/* ---- section wrapper ----------------------------------------------------- */
.bs-cs-section {
  padding: var(--space-5, 20px);
}

/* ---- export dropdown (shared pattern) ------------------------------------ */
.pnl-export-menu {
  position: relative;
  display: inline-flex;
}

.pnl-export-menu__caret {
  margin-left: 4px;
  font-size: 11px;
}

.pnl-export-menu__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle, #E2E8F0);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  min-width: 140px;
  overflow: hidden;
}

.pnl-export-menu__item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-primary, #1E293B);
  cursor: pointer;
  transition: background 0.12s;
}

.pnl-export-menu__item:hover {
  background: var(--bg-hover);
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .bs-cs-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bs-cs-kpi-grid--adv {
    /* match the basic row's column count so every card is the same width (AUD-CS item 6) */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bs-cs-csat-row {
    grid-template-columns: 1fr;
  }
  .bs-cs-dsat-row {
    grid-template-columns: 110px 1fr 48px;
  }
  .bs-cs-col-toggle-row {
    gap: 4px;
  }
}

@media (max-width: 560px) {
  .bs-cs-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bs-cs-kpi-grid--adv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bs-cs-kpi-value {
    font-size: 18px;
  }
  .bs-cs-tiktok-split {
    gap: var(--space-4, 16px);
  }
  .bs-cs-grain-row {
    padding: var(--space-2, 8px) var(--space-3, 12px);
  }
}

/* ---- S1/S2: per-chart control row (series pills + data-label toggle) ----- */
.bs-cs-chart-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}

.bs-cs-series-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* S1: a series toggle pill. Active = filled tint; off = muted + strikethrough cue. */
.bs-cs-series-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, #E2E8F0);
  background: var(--bg-inset);
  color: var(--text-secondary, #475569);
  cursor: pointer;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.bs-cs-series-pill:hover {
  background: var(--bg-hover);
}
.bs-cs-series-pill--off {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.bs-cs-series-pill--off .bs-cs-series-dot {
  opacity: 0.4;
}

.bs-cs-series-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* S2: data-label toggle */
.bs-cs-label-toggle {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle, #E2E8F0);
  color: var(--text-secondary, #475569);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.bs-cs-label-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary, #1E293B);
}
.bs-cs-label-toggle--on {
  background: var(--color-action, #2563EB);
  border-color: var(--color-action, #2563EB);
  color: #fff;
}

/* ---- A2: sticky thead offset under the shared header (mirrors DOI/aging) -- */
/* Sticky on the <thead> (not <th>) to stay compatible with the global
   `.fin-table thead { position: sticky; top: 0; }` cascade — targeting <th>
   alone strands the header row mid-table once scrolling starts. */
/* Self-contained scroll (2026-05-31, ATP recipe — design-guideline "Wide detail
   tables"): cap the wrap → it owns dual-axis scroll; pin thead to top:0 of the
   wrap, not the page viewport. Also drop the nested overflow-x on the DSAT
   matrix (one scroll container, not two). */
.bs-cs-page .fin-table thead { top: 0; z-index: 5; }
body[data-page="customer-service"] .data-table-wrap { max-height: calc(100vh - 240px); overflow: auto; }
body[data-page="customer-service"] .bs-cs-dsat-matrix { overflow-x: visible; }

/* ---- Dashboard table styling standard (design-guideline) ----------------- */
/* Page-scoped so SOCOM #pnl (shared .fin-table/DataTable) is untouched.
   These are the TABLE standards (bold+centered headers, zebra body rows) —
   distinct from the chart S1/S2 series/data-label controls above.
   Target <th> ONLY (no thead/td) so the Wave-A sticky-thead cascade
   (.bs-cs-page .fin-table thead) is undisturbed; no position/top here.
   S1 deliberately overrides the DSAT matrix's per-th .text-right alignment
   (header centers; body numerics keep right-align via .num-cell). */
.bs-cs-page .fin-table th { font-weight: 700; text-align: center; }
/* Zebra — tint even tbody rows only; exclude the Total row so its dedicated
   background (styles.css .fin-table tbody tr.fin-row-total td) is never
   clobbered by the higher-specificity page-scoped tint. */
.bs-cs-page .fin-table tbody tr:nth-child(even):not(.fin-row-total) td:not(.bs-cs-srate-cell):not(.bs-cs-csat-cell) {
  background: color-mix(in srgb, var(--text-primary) 3.5%, transparent);
}

/* ---- F1: data-tooltip pill on the bad-rating stack segment ---------------- */
/* Scoped to CS segments. The dark-pill ::after is the sole tooltip (no native
   title — design-guideline no-native-title rule). The parent .bs-cs-csat-stack
   is overflow:visible so the pill is never clipped; rounded ends are on the
   first/last segment instead of a stack-level overflow clip. */
.bs-cs-csat-seg[data-tooltip] { position: relative; }
.bs-cs-csat-seg[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--text-primary, #0F172A);
  color: var(--bg-surface, #fff);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  pointer-events: none;
  z-index: 40;
}

/* ============================================================
   mig 215 — CS detail tables + charts (the 7 missing visuals)
   ============================================================ */

/* sub-section header within a card (chart + table groupings) */
.bs-cs-subhead {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #64748B);
  margin: 0 0 8px;
}
/* caption note under a chart card (conversion-rate def etc.) */
.bs-cs-card-note {
  font-size: 11px;
  color: var(--text-tertiary, #94A3B8);
  margin-top: 8px;
  line-height: 1.5;
}

/* CSAT-coloured cell in the per-channel×period CSAT table.
   Table-scoped (beats the page-scoped .fin-table zebra + base td rules in BOTH themes). */
.bs-cs-page .fin-table td.bs-cs-csat-cell { font-weight: 600; }
.bs-cs-page .fin-table td.bs-cs-csat-great { color: #15803D; background: color-mix(in srgb, var(--color-success, #22C55E) 18%, transparent); }
.bs-cs-page .fin-table td.bs-cs-csat-good  { color: #16A34A; background: color-mix(in srgb, var(--color-success, #22C55E) 10%, transparent); }
.bs-cs-page .fin-table td.bs-cs-csat-warn  { color: #B45309; background: color-mix(in srgb, var(--color-warning, #F59E0B) 15%, transparent); }
.bs-cs-page .fin-table td.bs-cs-csat-bad   { color: var(--color-danger, #DC2626); background: color-mix(in srgb, var(--color-danger, #EF4444) 15%, transparent); }

/* ---- dissatisfaction drill chart (HTML stacked bars) --------------------- */
.bs-cs-stackbars { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.bs-cs-stackbar-row {
  display: grid;
  grid-template-columns: 150px 1fr 56px;
  align-items: center;
  gap: 10px;
}
.bs-cs-stackbar-label {
  font-size: 12px;
  color: var(--text-secondary, #475569);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-cs-stackbar-track {
  height: 18px;
  background: var(--bg-inset, #F1F5F9);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
}
.bs-cs-stackbar-fill { display: flex; height: 100%; min-width: 1px; border-radius: var(--radius-sm, 4px); overflow: hidden; }
.bs-cs-stackbar-seg { height: 100%; min-width: 1px; position: relative; }
.bs-cs-stackbar-total {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  color: var(--text-primary, #0F172A);
  font-variant-numeric: tabular-nums;
}
.bs-cs-stackbar-seg[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--text-primary, #0F172A);
  color: var(--bg-surface, #fff);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  pointer-events: none;
  z-index: 40;
}

/* ---- TTK store-rating heatmap -------------------------------------------- */
.bs-cs-srate-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.bs-cs-srate-search { position: relative; }
.bs-cs-srate-input {
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--border-default, #CBD5E1);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-surface, #fff);
  color: var(--text-primary, #0F172A);
  min-width: 200px;
}
.bs-cs-srate-matches {
  position: absolute;
  top: 34px;
  left: 0;
  z-index: 30;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-default, #CBD5E1);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  min-width: 220px;
  max-height: 220px;
  overflow-y: auto;
}
.bs-cs-srate-match {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 13px;
  background: none;
  border: none;
  color: var(--text-primary, #0F172A);
  cursor: pointer;
}
.bs-cs-srate-match:hover { background: var(--bg-inset, #F1F5F9); }
.bs-cs-srate-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bs-cs-srate-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 3px 6px 3px 9px;
  background: color-mix(in srgb, var(--color-action, #2563EB) 12%, transparent);
  color: var(--color-action, #2563EB);
  border-radius: 999px;
}
.bs-cs-srate-chip button { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.bs-cs-srate-clear {
  font-size: 12px;
  background: none;
  border: none;
  color: var(--color-action, #2563EB);
  cursor: pointer;
  text-decoration: underline;
}
.bs-cs-srate-hint { font-size: 11px; color: var(--text-tertiary, #94A3B8); margin-left: auto; }
.bs-cs-srate-wrap { max-height: 460px; }
.bs-cs-srate-store { white-space: nowrap; font-weight: 500; }
.bs-cs-page .fin-table td.bs-cs-srate-cell { font-weight: 600; font-variant-numeric: tabular-nums; }
.bs-cs-page .fin-table td.bs-cs-srate-good { color: #15803D; background: color-mix(in srgb, var(--color-success, #22C55E) 16%, transparent); }
.bs-cs-page .fin-table td.bs-cs-srate-bad  { color: var(--color-danger, #DC2626); background: color-mix(in srgb, var(--color-danger, #EF4444) 15%, transparent); }
.bs-cs-page .fin-table td.bs-cs-srate-na   { color: var(--text-tertiary, #94A3B8); }

/* 20260609 item 1 — store-rating heatmap colour-code legend/note */
.bs-cs-srate-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px) var(--space-4, 16px);
  margin-top: var(--space-3, 12px);
}
.bs-cs-srate-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bs-cs-legend-swatch.bs-cs-srate-swatch--good { border-radius: 3px; background: color-mix(in srgb, var(--color-success, #22C55E) 16%, transparent); border: 1px solid color-mix(in srgb, var(--color-success, #22C55E) 45%, transparent); }
.bs-cs-legend-swatch.bs-cs-srate-swatch--bad  { border-radius: 3px; background: color-mix(in srgb, var(--color-danger, #EF4444) 15%, transparent);  border: 1px solid color-mix(in srgb, var(--color-danger, #EF4444) 45%, transparent); }