/* =============================================================================
 * Shemify — Tracker #16 — Sales Reports Break-down v1 MVP CSS (phase16_a)
 *
 * Lessons applied UPFRONT from the 39-lesson checklist (#10/#15/#18/#20/#21/#22/#26):
 *   - 24px 32px page padding inherited (Reports wrapper already padded)
 *   - .rsb- prefix on every selector → no leak into global cascade
 *   - 44px min touch targets on dimension buttons
 *   - !important on active dimension state to defeat shell-override-v2.css cascade
 *   - Glass: gradient + inset 1px stroke + backdrop blur (Section 9.x glass theme)
 *   - 13px uppercase labels, var(--ink) typography hierarchy
 *   - Light mode parity via html.light selectors
 *   - Mobile responsive @ 1100/720/600px
 *   - "Untagged" rows softly de-emphasized (italic + lower contrast) but never hidden
 * =============================================================================
 */

/* ----- Outer shell ------------------------------------------------------ */
.rsb-shell, html[data-theme="light"] selectors
 *   - Mobile responsive @ 1100/720/600px
 *   - "Untagged" rows softly de-emphasized (italic + lower contrast) but never hidden
 * =============================================================================
 */

/* ----- Outer shell ------------------------------------------------------ */
.rsb-shell {
  margin-top: 32px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .015) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 12px rgba(0, 0, 0, .18);
  border-radius: var(--r-lg, 16px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-family: var(--font);
}

/* ----- Header ----------------------------------------------------------- */
.rsb-header { margin-bottom: 20px; }
.rsb-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.rsb-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.rsb-asof {
  font-size: 12px;
  color: var(--ink-4, rgba(255, 255, 255, .55));
  letter-spacing: .04em;
}
.rsb-tagline {
  margin: 6px 0 16px 0;
  color: var(--ink-3, rgba(255, 255, 255, .7));
  font-size: 13px;
  max-width: 760px;
  line-height: 1.5;
}

/* ----- Controls row (dimension switcher + CSV) ------------------------- */
.rsb-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rsb-csv-btn {
  min-height: 40px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3, rgba(255, 255, 255, .75));
  background: rgba(255, 255, 255, .03);
  border: none;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: all .18s var(--spring, cubic-bezier(.34, 1.56, .64, 1));
  white-space: nowrap;
}
.rsb-csv-btn:hover {
  color: var(--ink);
  background: rgba(200, 160, 76, .08);
  box-shadow: inset 0 0 0 1px rgba(200, 160, 76, .25);
}
.rsb-csv-btn:focus-visible {
  outline: 2px solid var(--gold, #c8a04c);
  outline-offset: 2px;
}
html.light .rsb-csv-btn, html[data-theme="light"] .rsb-csv-btn {
  background: rgba(0, 0, 0, .025);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, .7);
}
html.light .rsb-csv-btn:hover, html[data-theme="light"] .rsb-csv-btn:hover {
  background: rgba(200, 160, 76, .08);
  box-shadow: inset 0 0 0 1px rgba(200, 160, 76, .35);
}

/* ----- Dimension switcher ---------------------------------------------- */
.rsb-dim-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  background: rgba(0, 0, 0, .18);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  width: fit-content;
  max-width: 100%;
}
.rsb-dim-btn {
  min-height: 44px;             /* lesson: 44px min touch */
  padding: 0 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-3, rgba(255, 255, 255, .7));
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all .18s var(--spring, cubic-bezier(.34, 1.56, .64, 1));
  white-space: nowrap;
}
.rsb-dim-btn:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .04);
}
.rsb-dim-btn:focus-visible {
  outline: 2px solid var(--gold, #c8a04c);
  outline-offset: 2px;
}
.rsb-dim-btn.is-active {
  /* !important to defeat global button cascade — lesson from #20/#21 */
  color: #1a1108 !important;
  background: linear-gradient(180deg, #d8b264 0%, #b8923c 100%) !important;
  box-shadow: 0 2px 6px rgba(200, 160, 76, .35), inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
}

/* ----- Empty state ----------------------------------------------------- */
.rsb-empty {
  margin-top: 16px;
  padding: 32px;
  text-align: center;
  background: rgba(255, 255, 255, .015);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  color: var(--ink-3, rgba(255, 255, 255, .7));
}
.rsb-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.rsb-empty p { margin: 0; font-size: 13px; line-height: 1.5; }

/* ----- Horizontal bar chart ------------------------------------------- */
.rsb-chart-caption {
  margin: 16px 0 6px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4, rgba(255, 255, 255, .55));
}
html.light .rsb-chart-caption, html[data-theme="light"] .rsb-chart-caption { color: rgba(0, 0, 0, .55); }
.rsb-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0 24px 0;
  /* FLAT inside the shell — no nested card background. */
}
.rsb-chart-row {
  display: grid;
  grid-template-columns: minmax(140px, 22%) 1fr 110px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
/* Council mini #13: was opacity:.65 on the WHOLE row + italic label —
   combined effective contrast was below WCAG AA. Drop opacity from row
   level so labels stay readable; de-emphasize via fill + italic only. */
.rsb-chart-label {
  color: var(--ink-3, rgba(255, 255, 255, .7));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.rsb-chart-row.is-untagged .rsb-chart-label {
  font-style: italic;
  color: var(--ink-3, rgba(255, 255, 255, .7));   /* keep readable */
}
.rsb-chart-track {
  position: relative;
  height: 14px;
  background: rgba(255, 255, 255, .04);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.rsb-chart-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(200, 160, 76, .85), rgba(200, 160, 76, .55));
  border-radius: 8px;
  /* Council mini #13: ease-out instead of spring — width changes during a
     dimension flip should land cleanly, not bounce past the target. */
  transition: width .35s ease-out;
  box-shadow: 0 0 16px rgba(200, 160, 76, .2);
}
.rsb-chart-row.is-untagged .rsb-chart-fill {
  /* Soft semi-translucent gradient — visible but not a hard solid block. */
  background: linear-gradient(90deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .14));
  box-shadow: none;
}
/* Council mini visual: refund-heavy month → negative net → red bar
   so the user can see "this month was net negative" at a glance instead
   of seeing the value `($1,234.56)` floating with no visible bar. */
.rsb-chart-row.is-negative .rsb-chart-fill {
  background: linear-gradient(90deg, rgba(220, 80, 80, .85), rgba(220, 80, 80, .55));
  box-shadow: 0 0 16px rgba(220, 80, 80, .2);
}
html.light .rsb-chart-row.is-negative .rsb-chart-fill, html[data-theme="light"] .rsb-chart-row.is-negative .rsb-chart-fill {
  background: linear-gradient(90deg, rgba(180, 50, 50, .9), rgba(180, 50, 50, .65));
  box-shadow: none;
}
.rsb-chart-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
}

/* ----- Table ----------------------------------------------------------- */
.rsb-table-wrap {
  overflow-x: auto;
  /* FLAT inside the shell — no nested card. */
}
.rsb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--ink);
}
.rsb-table th {
  text-align: left;
  padding: 14px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(255, 255, 255, .7));   /* Council mini #14: bumped from --ink-4 for legibility */
  background: rgba(20, 20, 22, .92);              /* opaque enough to occlude scrolling rows underneath */
  position: sticky; top: 0;
  z-index: 2;                                     /* Council mini #14: defeat .rsb-table-total tinted bg overflow */
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.rsb-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  vertical-align: middle;
}
.rsb-table tr:last-child td { border-bottom: none; }
.rsb-table .rsb-table-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rsb-table .rsb-table-label {
  font-weight: 500;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsb-table .rsb-net {
  font-weight: 700;
  color: var(--ink);
}
.rsb-table tr.is-untagged td { opacity: .65; }
.rsb-table tr.is-untagged .rsb-table-label { font-style: italic; }

.rsb-table-other td,
.rsb-table-other .rsb-table-label {
  color: var(--ink-3, rgba(255, 255, 255, .7));
  font-style: italic;
}
.rsb-table-total {
  /* Council mini: bumped to .14 + crisp inset shadow + 14px font for
     real summary-row hierarchy. Inset 1px shadow renders cleanly on
     retina vs a hairline border-top. */
  background: rgba(200, 160, 76, .14);
  box-shadow: inset 0 1px 0 rgba(200, 160, 76, .55);
}
.rsb-table-total td {
  border-top: none;
  font-weight: 700;
  font-size: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.rsb-total-sub {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-4, rgba(255, 255, 255, .55));
  margin-left: 6px;
}

.rsb-untagged-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-style: normal;            /* defeat .is-untagged italic inheritance */
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .08);
  color: var(--ink-3, rgba(255, 255, 255, .7));
  border-radius: 4px;
  vertical-align: middle;
}
html.light .rsb-untagged-badge, html[data-theme="light"] .rsb-untagged-badge {
  background: rgba(0, 0, 0, .06);
  color: rgba(0, 0, 0, .55);
}

/* ----- Matrix-specific ------------------------------------------------- */
.rsb-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rsb-matrix {
  min-width: 920px;             /* keep 12 months + label + total readable */
}
.rsb-matrix th,
.rsb-matrix td {
  padding: 10px 12px;
}
.rsb-matrix .rsb-zero {
  color: var(--ink-4, rgba(255, 255, 255, .35));
  font-weight: 400;
}

/* ----- Hint banner ----------------------------------------------------- */
.rsb-hint {
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(200, 160, 76, .04);
  border-left: 3px solid rgba(200, 160, 76, .55);
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-3, rgba(255, 255, 255, .7));
  line-height: 1.5;
}
.rsb-hint strong { color: var(--ink); font-weight: 600; }

/* =============================================================================
 * LIGHT MODE — mirrors Tracker #15 (customer_vendor_reports) exactly.
 * That tracker is the canonical Shemify Reports light-mode pattern.
 * Use BOTH `html.light` AND `html[data-theme="light"]` selectors.
 * ============================================================================= */
html.light .rsb-shell,
html[data-theme="light"] .rsb-shell {
  /* Match cvr-kpi pattern: white→FAFAF8 gradient + subtle 1px stroke +
     soft drop shadow. This is the Shemify "card" surface in light mode. */
  background: linear-gradient(180deg, #FFFFFF, #FAFAF8);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .08);
}
html.light .rsb-title,
html[data-theme="light"] .rsb-title { color: #111; }
html.light .rsb-tagline,
html[data-theme="light"] .rsb-tagline { color: rgba(0, 0, 0, .72); }
html.light .rsb-asof,
html[data-theme="light"] .rsb-asof { color: rgba(0, 0, 0, .55); }

/* Dim-row + buttons */
html.light .rsb-dim-row,
html[data-theme="light"] .rsb-dim-row {
  background: rgba(0, 0, 0, .04);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
html.light .rsb-dim-btn,
html[data-theme="light"] .rsb-dim-btn { color: rgba(0, 0, 0, .72); }
html.light .rsb-dim-btn:hover,
html[data-theme="light"] .rsb-dim-btn:hover {
  color: #111;
  background: rgba(0, 0, 0, .05);
}

/* Chart — FLAT inside the shell. No nested card. */
html.light .rsb-chart,
html[data-theme="light"] .rsb-chart {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
html.light .rsb-chart-track,
html[data-theme="light"] .rsb-chart-track {
  background: rgba(0, 0, 0, .05);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
html.light .rsb-chart-fill,
html[data-theme="light"] .rsb-chart-fill {
  background: linear-gradient(90deg, rgba(200, 160, 76, .85), rgba(200, 160, 76, .55));
  box-shadow: none;
}
html.light .rsb-chart-row.is-untagged .rsb-chart-fill,
html[data-theme="light"] .rsb-chart-row.is-untagged .rsb-chart-fill {
  background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .12));
  box-shadow: none;
}
html.light .rsb-chart-row.is-negative .rsb-chart-fill,
html[data-theme="light"] .rsb-chart-row.is-negative .rsb-chart-fill {
  background: linear-gradient(90deg, rgba(180, 50, 50, .9), rgba(180, 50, 50, .65));
  box-shadow: none;
}
html.light .rsb-chart-row.is-untagged,
html[data-theme="light"] .rsb-chart-row.is-untagged { opacity: 1; }
html.light .rsb-chart-label,
html[data-theme="light"] .rsb-chart-label { color: #111; font-weight: 500; }
html.light .rsb-chart-row.is-untagged .rsb-chart-label,
html[data-theme="light"] .rsb-chart-row.is-untagged .rsb-chart-label {
  color: rgba(0, 0, 0, .82);
  font-style: italic;
}
html.light .rsb-chart-value,
html[data-theme="light"] .rsb-chart-value { color: #111; font-weight: 600; }
html.light .rsb-chart-caption,
html[data-theme="light"] .rsb-chart-caption { color: rgba(0, 0, 0, .65); }

/* Table — FLAT inside the breakdown shell. The shell IS the only card;
   the table is just rows inside it, no nested white box around it. */
html.light .rsb-table-wrap,
html[data-theme="light"] .rsb-table-wrap {
  background: transparent;
  box-shadow: none;
}
html.light .rsb-table th,
html[data-theme="light"] .rsb-table th {
  background: transparent;
  color: rgba(0, 0, 0, .55);              /* matches var(--ink-3) in light */
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  font-weight: 700;
  letter-spacing: .08em;
}
html.light .rsb-table td,
html[data-theme="light"] .rsb-table td {
  color: #111;
  border-bottom-color: rgba(0, 0, 0, .04);
}
html.light .rsb-table th.rsb-table-label,
html[data-theme="light"] .rsb-table th.rsb-table-label {
  color: #111;
  font-weight: 600;
  background: transparent;
  letter-spacing: 0;
  text-transform: none;
}
html.light .rsb-table tbody tr:hover,
html[data-theme="light"] .rsb-table tbody tr:hover { background: rgba(0, 0, 0, .015); }
html.light .rsb-net,
html[data-theme="light"] .rsb-net { color: var(--gold, #c8a04c); font-weight: 700; }

/* Untagged row in light mode — stay readable, italic + badge signal it */
html.light .rsb-table tr.is-untagged td,
html[data-theme="light"] .rsb-table tr.is-untagged td {
  opacity: 1;
  color: rgba(0, 0, 0, .82);
}
html.light .rsb-table tr.is-untagged th.rsb-table-label,
html[data-theme="light"] .rsb-table tr.is-untagged th.rsb-table-label {
  color: rgba(0, 0, 0, .82);
  font-style: italic;
  font-weight: 500;
}

/* Other-row */
html.light .rsb-table-other td,
html.light .rsb-table-other th.rsb-table-label,
html[data-theme="light"] .rsb-table-other td,
html[data-theme="light"] .rsb-table-other th.rsb-table-label {
  color: rgba(0, 0, 0, .65);
  font-style: italic;
}

/* Total row — subtle gold-tinted strip with a single hairline border.
   Matches Shemify's restrained summary-row convention. */
html.light .rsb-table-total,
html[data-theme="light"] .rsb-table-total {
  background: rgba(200, 160, 76, .06);
  box-shadow: none;
}
html.light .rsb-table-total td,
html.light .rsb-table-total th,
html[data-theme="light"] .rsb-table-total td,
html[data-theme="light"] .rsb-table-total th {
  border-top: 1px solid rgba(200, 160, 76, .2);
  border-bottom: none;
  color: #111;
  font-weight: 700;
}
html.light .rsb-table-total .rsb-net,
html[data-theme="light"] .rsb-table-total .rsb-net { color: var(--gold, #c8a04c); }
html.light .rsb-total-sub,
html[data-theme="light"] .rsb-total-sub { color: rgba(0, 0, 0, .6); font-weight: 500; }

/* Untagged badge — readable pill */
html.light .rsb-untagged-badge,
html[data-theme="light"] .rsb-untagged-badge {
  background: rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, .65);
  font-weight: 600;
}

/* Empty state */
html.light .rsb-empty,
html[data-theme="light"] .rsb-empty {
  background: rgba(0, 0, 0, .02);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  color: rgba(0, 0, 0, .72);
}
html.light .rsb-empty-title,
html[data-theme="light"] .rsb-empty-title { color: #111; }

/* Hint banner */
html.light .rsb-hint,
html[data-theme="light"] .rsb-hint {
  background: rgba(200, 160, 76, .12);
  color: rgba(0, 0, 0, .82);
  border-left-color: #b8923c;
}
html.light .rsb-hint strong,
html[data-theme="light"] .rsb-hint strong { color: #111; }

/* Matrix — zero placeholder shouldn't fade to invisible */
html.light .rsb-matrix .rsb-zero,
html[data-theme="light"] .rsb-matrix .rsb-zero { color: rgba(0, 0, 0, .35); }
/* Light mode: regular gold fill — solid brand gold for crisp legibility */
html.light .rsb-chart-fill, html[data-theme="light"] .rsb-chart-fill {
  background: linear-gradient(90deg, #c8a04c, #b8923c);
  box-shadow: none;
}
/* Light mode: untagged fill — solid mid-grey, ~6:1 contrast on cream */
html.light .rsb-chart-row.is-untagged .rsb-chart-fill, html[data-theme="light"] .rsb-chart-row.is-untagged .rsb-chart-fill {
  background: #555;
  box-shadow: none;
}
/* Light mode: untagged track — slightly darker so the bar reads as a
   distinct shape rather than blending into the surrounding card. */
html.light .rsb-chart-track, html[data-theme="light"] .rsb-chart-track {
  background: rgba(0, 0, 0, .08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}

/* =============================================================================
 * RESPONSIVE
 * ============================================================================= */
@media (max-width: 1100px) {
  /* Council mini #14: shell padding shrinks at tablet sizes too — was
     only shrinking at 720px which was too late for tablet-landscape. */
  .rsb-shell { padding: 20px; margin-top: 28px; }
  .rsb-chart-row { grid-template-columns: minmax(120px, 28%) 1fr 100px; }
  .rsb-table .rsb-table-label { max-width: 220px; }
}
@media (max-width: 720px) {
  .rsb-shell { padding: 16px; margin-top: 24px; }
  .rsb-chart { padding: 12px; }
  .rsb-chart-row {
    grid-template-columns: 1fr 90px;
    grid-template-areas:
      "label  value"
      "track  track";
    row-gap: 4px;
  }
  .rsb-chart-label { grid-area: label; }
  .rsb-chart-value { grid-area: value; }
  .rsb-chart-track { grid-area: track; }
  .rsb-table th, .rsb-table td { padding: 10px 12px; }
}
@media (max-width: 600px) {
  .rsb-dim-btn { padding: 0 14px; font-size: 12px; }
  .rsb-title { font-size: 18px; }      /* Council mini #14: 16→18 keeps hierarchy on phones */
  .rsb-tagline { font-size: 12px; }
}

/* =============================================================================
 * REDUCED MOTION (Council mini a11y) — vestibular-sensitive users
 * ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .rsb-dim-btn,
  .rsb-csv-btn,
  .rsb-chart-fill {
    transition: none !important;
  }
}

/* =============================================================================
 * PRINT / PDF (Council mini visual) — Tiffany's tax-recon flow
 * Hide chart/controls/timestamp/hint banners. Keep table + totals.
 * Kill glass effects (don't render on paper). Restore untagged opacity
 * for legibility. Force black ink on white. Page-break-inside: avoid.
 * ============================================================================= */
@media print {
  .rsb-controls,
  .rsb-csv-btn,
  .rsb-chart,
  .rsb-chart-caption,
  .rsb-asof,
  .rsb-hint { display: none !important; }

  .rsb-shell {
    margin-top: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #000 !important;
    page-break-inside: avoid;
  }
  .rsb-title, .rsb-tagline { color: #000 !important; }
  .rsb-table-wrap { background: #fff !important; box-shadow: none !important; overflow: visible !important; }
  .rsb-table th { background: #f4f4f4 !important; color: #000 !important; position: static !important; }
  .rsb-table td, .rsb-net, .rsb-total-sub { color: #000 !important; }
  .rsb-table td { border-bottom: 1px solid #ddd !important; }
  .rsb-table-total { background: #f0e6cf !important; box-shadow: inset 0 1px 0 #b8923c !important; }
  .rsb-table tr.is-untagged td,
  .rsb-table tr.is-untagged .rsb-table-label { opacity: 1 !important; color: #444 !important; }
  .rsb-matrix { min-width: 0 !important; }
  .rsb-untagged-badge { background: #eee !important; color: #444 !important; }
}