/* JBSP Earnings Analytics - dark theme.
 *
 * Loaded immediately after frontend.css, so every rule here overrides a light value declared there.
 * Nothing in the base stylesheet is edited, which means switching this file off restores the light
 * UI exactly - see the jbsp_earnings_dark_theme filter in class-plugin.php.
 *
 * Scope: the dashboard and everything inside it (cards, tables, controls, heatmap, top spenders,
 * advanced reporting). Deliberately NOT touched:
 *   .jbsp-pro-*   the Pro marketing page is already its own dark design
 *   .jbsp-auth-*  the account panel sits on an already-dark theme page
 *
 * Colours follow one system, and the colour carries meaning rather than decoration:
 *   green  #26d07c  yours / good / imported
 *   gold   #ffcf5c  live feed, tokens, the single best hour
 *   red    #ff6b6b  money you are owed
 *   violet #a98bff  secondary series
 *
 * Data colours are left alone on purpose: chart series colours and heatmap cell intensity are
 * generated per site and per value in PHP, and flattening them here would destroy the information.
 */

/* -------------------------------------------------------------------------
 * 1. Tokens
 * Declared on the container, not :root, so a busy site theme cannot inherit them.
 * ---------------------------------------------------------------------- */
/* Tokens go on :root, exactly where the base sheet puts them.
 *
 * They were originally scoped to .jbsp-earn-container / .jbsp-earn-dashboard-container, which only
 * exist on the single combined dashboard shortcode. The sidebar dashboard AJAX-loads each section on
 * its own, so the section markup has no such ancestor - the tokens were therefore never defined and
 * every `background: var(--jbsp-surface)` was invalid at computed-value time and dropped, leaving the
 * base sheet's white in place. Declaring them at :root means the overrides cannot depend on which
 * wrapper the current layout happens to render. */
:root,
.jbsp-earn-container,
.jbsp-earn-dashboard-container,
.jbsp-dash-panel,
.jbsp-dash-panel-inner,
.jbsp-panel-cell {
	--jbsp-accent: #26d07c;
	--jbsp-gray-light: rgba(255, 255, 255, .045);
	--jbsp-gray-border: rgba(255, 255, 255, .10);
	--jbsp-text: #eef2f2;
	--jbsp-text-muted: #8d999e;
	--jbsp-success: #26d07c;
	--jbsp-warning: #ffcf5c;
	--jbsp-danger: #ff6b6b;
	--jbsp-info: #6aa8ff;

	/* Local extras this file introduces */
	--jbsp-surface: #0e1318;
	--jbsp-surface-2: #141a20;
	--jbsp-surface-3: #1a2129;
	--jbsp-line-strong: rgba(255, 255, 255, .18);
}

/* color-scheme is deliberately NOT on :root - that would restyle native controls across the whole
 * site. Every plugin surface is either the sidebar shell or a section rendered inside it. */
.jbsp-earn-container,
.jbsp-earn-dashboard-container,
.jbsp-dash-panel,
.jbsp-dash-panel-inner,
.jbsp-panel-cell {
	color: var(--jbsp-text);
	color-scheme: dark; /* makes native date pickers and select popups render dark */
}

/* -------------------------------------------------------------------------
 * 2. The black-text sledgehammer
 * The base sheet forces #000 on every descendant of a card so text survives a light panel
 * background. On dark that is unreadable, and it is !important, so this has to match it.
 * ---------------------------------------------------------------------- */
.jbsp-earn-card,
.jbsp-earn-card *,
.jbsp-panel-cell,
.jbsp-panel-cell *,
.jbsp-dash-panel-inner,
.jbsp-dash-panel-inner * {
	color: var(--jbsp-text) !important;
}

/* Safety net: repeated class names raise specificity above the base sheet's grouped !important
 * rules without resorting to inline styles. text-fill-color paints the glyphs regardless of
 * `color`, so leaving any of it dark makes text invisible while getComputedStyle(color) insists
 * everything is correct. currentColor keeps one declaration in charge of both. */
.jbsp-earn-dashboard-container.jbsp-earn-dashboard-container.jbsp-earn-dashboard-container *,
.jbsp-earn-container.jbsp-earn-container.jbsp-earn-container * {
	-webkit-text-fill-color: currentColor !important;
}

/* -------------------------------------------------------------------------
 * 3. Surfaces
 * Every selector below set background: white in the base sheet.
 * ---------------------------------------------------------------------- */
.jbsp-earn-card,
.jbsp-earn-kpi-card,
.jbsp-earn-table,
.jbsp-earn-transactions,
.jbsp-earn-trend-chart,
.jbsp-earn-breakdown,
.jbsp-earn-heatmap,
.jbsp-earn-big-spenders,
.jbsp-earn-site-scorecard,
.jbsp-import-form,
.jbsp-manual-form textarea,
.jbsp-hm-scroll,
.jbsp-hm-filters select,
.jbsp-sp-filters select,
.jbsp-sp-eye,
.jbsp-sp-pager .jbsp-sp-page,
.jbsp-date-range-picker,
.jbsp-rates,
.jbsp-rates input[type="number"],
.jbsp-adv-tag,
.dashboard-item {
	background: var(--jbsp-surface);
	border-color: var(--jbsp-gray-border);
}

.jbsp-earn-card {
	border-radius: 14px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
}

.jbsp-earn-card:hover {
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
	border-color: var(--jbsp-line-strong);
}

.jbsp-panel-cell .jbsp-earn-transactions .jbsp-earn-table,
.jbsp-panel-cell .jbsp-custom-html table td,
.jbsp-panel-cell .jbsp-breakdown-table table th,
.jbsp-panel-cell .jbsp-autosync-table td,
.jbsp-earn-breakdown .jbsp-live-table td {
	background: transparent;
}

/* -------------------------------------------------------------------------
 * 4. KPI cards
 * ---------------------------------------------------------------------- */
.jbsp-earn-kpi-card {
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 14px;
	text-align: left;
	padding: 22px 24px;
}

.jbsp-earn-kpi-card.verified {
	border-top: 1px solid var(--jbsp-gray-border);
	border-left: 3px solid var(--jbsp-success);
}

.jbsp-earn-kpi-card.pending {
	border-top: 1px solid var(--jbsp-gray-border);
	border-left: 3px solid var(--jbsp-warning);
}

.jbsp-earn-kpi-card.live {
	border-left: 3px solid var(--jbsp-warning);
	background: linear-gradient(180deg, rgba(255, 207, 92, .06), var(--jbsp-surface) 60%);
}

.jbsp-earn-kpi-card .kpi-value {
	color: var(--jbsp-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

.jbsp-earn-kpi-card .kpi-label {
	color: var(--jbsp-text-muted);
	font-size: .78em;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 5. Tables
 * Tabular figures and right-aligned numerics are what make a data table read as a data table.
 * ---------------------------------------------------------------------- */
.jbsp-earn-table,
.jbsp-sp-detail table,
.jbsp-adv-table,
.jbsp-rates {
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--jbsp-surface);
}

.jbsp-earn-table thead,
.jbsp-adv-table thead,
.jbsp-rates thead {
	background: rgba(255, 255, 255, .03);
	border-bottom: 1px solid var(--jbsp-gray-border);
}

.jbsp-earn-table th,
.jbsp-adv-table th,
.jbsp-rates th {
	color: var(--jbsp-text-muted);
	font-size: .7em;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 600;
	border-bottom: 1px solid var(--jbsp-gray-border);
}

.jbsp-earn-table th,
.jbsp-earn-table td,
.jbsp-adv-table th,
.jbsp-adv-table td,
.jbsp-rates th,
.jbsp-rates td {
	border-bottom: 1px solid rgba(255, 255, 255, .055);
	padding: 11px 14px;
}

.jbsp-earn-table tbody tr:hover,
.jbsp-adv-table tbody tr:hover {
	background: rgba(255, 255, 255, .025);
}

.jbsp-earn-table tbody tr:last-child td,
.jbsp-adv-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Money and counts line up in a column, always */
.jbsp-earn-table td:has(+ td:last-child),
.jbsp-earn-table .jbsp-num,
.jbsp-sp-native,
.jbsp-sp-hist {
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
 * 6. Controls
 * ---------------------------------------------------------------------- */
.jbsp-earn-container select,
.jbsp-earn-container input[type="text"],
.jbsp-earn-container input[type="number"],
.jbsp-earn-container input[type="date"],
.jbsp-earn-container input[type="search"],
.jbsp-earn-container textarea,
.jbsp-hm-filters select,
.jbsp-sp-filters select,
.jbsp-hm-tzsearch,
.jbsp-range-ctl input[type="date"],
.jbsp-earn-transactions input[type="date"],
.jbsp-manual-form textarea,
.jbsp-rates input[type="number"],
.jbsp-sp-pager .jbsp-sp-page,
.date-range-btn {
	background: var(--jbsp-surface-2);
	color: var(--jbsp-text);
	border: 1px solid var(--jbsp-line-strong);
	border-radius: 9px;
	padding: 8px 11px;
}

.jbsp-earn-container select:focus,
.jbsp-earn-container input:focus,
.jbsp-earn-container textarea:focus,
.jbsp-hm-filters select:focus,
.jbsp-sp-filters select:focus,
.date-range-btn:focus,
.jbsp-earn-btn:focus-visible {
	outline: 2px solid rgba(38, 208, 124, .5);
	outline-offset: 1px;
	border-color: var(--jbsp-accent);
}

.jbsp-earn-container option {
	background: var(--jbsp-surface-2);
	color: var(--jbsp-text);
}

/* Filter label rows */
.jbsp-hm-filters label,
.jbsp-sp-filters label,
.jbsp-earn-transactions label,
.jbsp-range-ctl label {
	color: var(--jbsp-text-muted);
	font-size: .74em;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 7. Buttons
 * ---------------------------------------------------------------------- */
.jbsp-earn-btn {
	border-radius: 9px;
	font-weight: 700;
	border: 1px solid transparent;
}

.jbsp-earn-btn:not(.btn-secondary):not(.btn-ghost):not(.is-secondary),
.jbsp-earn-btn.btn-primary {
	background: linear-gradient(135deg, #26d07c, #17b6a4);
	color: #04150c !important;
	border-color: transparent;
	box-shadow: 0 8px 22px -12px rgba(38, 208, 124, .9);
}

.jbsp-earn-btn.btn-secondary,
.jbsp-earn-btn.btn-ghost {
	background: rgba(255, 255, 255, .04);
	color: var(--jbsp-text) !important;
	border-color: var(--jbsp-line-strong);
}

.jbsp-earn-btn:hover {
	filter: brightness(1.06);
}

/* -------------------------------------------------------------------------
 * 8. Badges and notices
 * ---------------------------------------------------------------------- */
/* The markup only ever emits four badge classes: badge-live, badge-verified, badge-ok and
 * badge-pending. This block used to style badge-success / badge-warning / badge-danger, which do not
 * exist anywhere in the plugin, so the two classes that actually appear - verified and pending - fell
 * through to the pale green and pale orange fills in the base sheet and had light ink forced onto
 * them. That is why the MAPPED and UNMAPPED pills were unreadable.
 *
 * The bare .jbsp-earn-badge rule comes first as a floor, so a class this file has not met is still
 * legible rather than pale-on-pale. */
.jbsp-earn-badge {
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: .04em;
	background: rgba(255, 255, 255, .08) !important;
	color: var(--jbsp-text) !important;
	-webkit-text-fill-color: var(--jbsp-text) !important;
	border: 1px solid rgba(255, 255, 255, .14) !important;
}

.jbsp-earn-badge.badge-verified,
.jbsp-earn-badge.badge-ok {
	background: rgba(38, 208, 124, .16) !important;
	color: #58e6a4 !important;
	-webkit-text-fill-color: #58e6a4 !important;
	border-color: rgba(38, 208, 124, .36) !important;
}

.jbsp-earn-badge.badge-live {
	background: rgba(255, 207, 92, .16) !important;
	color: #ffd47d !important;
	-webkit-text-fill-color: #ffd47d !important;
	border-color: rgba(255, 207, 92, .40) !important;
}

.jbsp-earn-badge.badge-pending {
	background: rgba(255, 207, 92, .16) !important;
	color: #ffd47d !important;
	-webkit-text-fill-color: #ffd47d !important;
	border-color: rgba(255, 207, 92, .40) !important;
}

.jbsp-earn-pending-notice {
	background: rgba(255, 207, 92, .08);
	border: 1px solid rgba(255, 207, 92, .28);
	border-left: 3px solid var(--jbsp-warning);
	color: var(--jbsp-text);
	border-radius: 10px;
}

/* -------------------------------------------------------------------------
 * 9. Heatmap, source switch, top spenders
 * ---------------------------------------------------------------------- */
.jbsp-hm-summary,
.jbsp-hm-note,
.jbsp-hm-legend,
.jbsp-hm-tzcount,
.jbsp-hm-unit,
.jbsp-hm-sitekey,
.jbsp-trend-caption,
.jbsp-sp-note,
.jbsp-sp-pageinfo,
.jbsp-sp-pagecount,
.jbsp-adv-fine,
.jbsp-adv-source,
.jbsp-adv-note {
	color: var(--jbsp-text-muted);
}

.jbsp-hm-peak {
	background: rgba(255, 207, 92, .12);
	color: var(--jbsp-warning);
	border: 1px solid rgba(255, 207, 92, .3);
	border-radius: 8px;
}

.jbsp-hm-empty,
.jbsp-adv-empty,
.jbsp-pro-none {
	color: var(--jbsp-text-muted);
}

/* The heat grid is a table, and the base sheet fills its header cells white so the day/hour labels
 * survive a theme that styles th dark. On a dark panel that turns the whole axis into a white band,
 * so the labels go back onto the panel surface - same trick, dark way round. */
table.jbsp-hm th {
	background: transparent;
	color: var(--jbsp-text-muted);
}

table.jbsp-hm th.jbsp-hm-day {
	background: transparent;
	color: var(--jbsp-text);
}

table.jbsp-hm td {
	color: var(--jbsp-text);
}

table.jbsp-hm td:hover {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .38);
}

.jbsp-src-switch-track {
	background: rgba(255, 255, 255, .10);
	border: 1px solid var(--jbsp-line-strong);
}

.jbsp-src-switch-knob {
	background: var(--jbsp-surface-3);
	border: 1px solid var(--jbsp-line-strong);
}

.jbsp-src-switch-track[aria-checked="true"] {
	background: rgba(38, 208, 124, .30);
	border-color: rgba(38, 208, 124, .45);
}

.jbsp-src-switch-track[aria-checked="true"] .jbsp-src-switch-knob {
	background: var(--jbsp-accent);
}

.jbsp-src-switch-txt {
	color: var(--jbsp-text-muted);
}

.jbsp-src-switch-txt.is-on {
	color: var(--jbsp-accent);
}

/* Top spenders */
.jbsp-sp-badge {
	border-radius: 6px;
}

.jbsp-sp-badge.is-unnamed {
	background: rgba(255, 255, 255, .10) !important;
	color: #c3ccd1 !important;
	-webkit-text-fill-color: #c3ccd1 !important;
}

.jbsp-sp-badge.is-pseudo {
	background: rgba(106, 168, 255, .16) !important;
	color: #93c2ff !important;
	-webkit-text-fill-color: #93c2ff !important;
}

.jbsp-sp-badge.is-deleted {
	background: rgba(255, 107, 107, .16) !important;
	color: #ff9494 !important;
	-webkit-text-fill-color: #ff9494 !important;
}

.jbsp-sp-eye {
	border: 1px solid var(--jbsp-line-strong);
	border-radius: 8px;
	color: var(--jbsp-text-muted);
}

.jbsp-sp-eye:hover,
.jbsp-sp-eye[aria-expanded="true"] {
	color: var(--jbsp-accent);
	border-color: rgba(38, 208, 124, .45);
}

.jbsp-switch .jbsp-tx-source-btn.active {
	background: rgba(38, 208, 124, .16);
	color: var(--jbsp-accent) !important;
	border-color: rgba(38, 208, 124, .35);
}

/* -------------------------------------------------------------------------
 * 10. Advanced reporting deltas
 * ---------------------------------------------------------------------- */
.jbsp-adv-up,
.jbsp-adv-big.is-up {
	color: var(--jbsp-success) !important;
}

.jbsp-adv-down,
.jbsp-adv-big.is-down {
	color: var(--jbsp-danger) !important;
}

.jbsp-adv-flat {
	color: var(--jbsp-text-muted) !important;
}

.jbsp-adv-warn {
	color: var(--jbsp-warning) !important;
}

.jbsp-adv-dim {
	color: var(--jbsp-text-muted) !important;
}

/* -------------------------------------------------------------------------
 * 11. Panel-cell internals that are locked white with !important
 *
 * These thirteen rules in the base sheet carry !important, so a plain later rule cannot beat them.
 * Each is matched here with the same selector and the same weight, which wins on source order
 * because this file loads second. Grep for "!important" in frontend.css if the list ever changes.
 * ---------------------------------------------------------------------- */
.jbsp-panel-cell .jbsp-earn-transactions .jbsp-earn-table,
.jbsp-panel-cell .jbsp-breakdown-table table th,
.jbsp-panel-cell .jbsp-custom-html table td,
.jbsp-panel-cell .jbsp-autosync-table td,
.jbsp-earn-breakdown .jbsp-live-table td,
.jbsp-rates th,
.jbsp-rates td {
	background: transparent !important;
	color: var(--jbsp-text) !important;
}

.jbsp-manual-form textarea,
.jbsp-earn-transactions input[type="date"],
.jbsp-range-ctl input[type="date"],
.jbsp-rates input[type="number"] {
	background: var(--jbsp-surface-2) !important;
	color: var(--jbsp-text) !important;
	-webkit-text-fill-color: var(--jbsp-text) !important;
	border: 1px solid var(--jbsp-line-strong);
}

.jbsp-rates {
	background: var(--jbsp-surface) !important;
}

.jbsp-panel-cell .jbsp-autosync-table .jbsp-autosync-badge {
	background: rgba(38, 208, 124, .14) !important;
	color: var(--jbsp-success) !important;
	border: 1px solid rgba(38, 208, 124, .32);
}

.jbsp-adv-tag {
	background: rgba(255, 207, 92, .12) !important;
	color: var(--jbsp-warning) !important;
	border: 1px solid rgba(255, 207, 92, .28);
}

/* -------------------------------------------------------------------------
 * 14. Inline panel backgrounds  <-- why the first pass looked unchanged
 *
 * The dashboard lets the menu builder pick a panel background, and that choice is written as an
 * inline style on the element. An inline style beats any normal rule regardless of specificity,
 * which is why the typography in this file took effect while every card stayed white.
 *
 * There is no way around that except !important, so this section is deliberately loud. It is also
 * the only section that needs to be: everything else here wins on source order.
 *
 * These selectors are NOT prefixed with a container on purpose. The sidebar dashboard renders each
 * section as a bare shortcode fragment, so there is no .jbsp-earn-container ancestor to hang the
 * override on - prefixing them is what made this whole section a no-op for three releases.
 * Every class named here is plugin-namespaced, and this stylesheet only loads on pages that use the
 * plugin, so an unprefixed selector is safe.
 * ---------------------------------------------------------------------- */
.jbsp-dash-panel,
.jbsp-dash-panel-inner,
.jbsp-panel-cell,
.jbsp-panel-grid,
.jbsp-earn-card,
.jbsp-earn-kpi-card,
.jbsp-earn-kpis,
.jbsp-earn-table,
.jbsp-earn-transactions,
.jbsp-earn-trend-chart,
.jbsp-earn-breakdown,
.jbsp-earn-heatmap,
.jbsp-earn-big-spenders,
.jbsp-earn-site-scorecard {
	background: #0e1318 !important;
	border-color: rgba(255, 255, 255, .10) !important;
	color: #eef2f2 !important;
}

/* The two KPI cards carry their source colour as a border, never as a fill, so they must not be
 * flattened by the sweep above. */
.jbsp-earn-kpi-card.verified {
	background: #0e1318 !important;
	border-left: 3px solid var(--jbsp-success) !important;
}

.jbsp-earn-kpi-card.live {
	background: linear-gradient(180deg, rgba(255, 207, 92, .10), #0e1318 62%) !important;
	border-left: 3px solid var(--jbsp-warning) !important;
}

/* Nested boxes stay a touch lighter than the panel they sit in, so depth still reads. */
.jbsp-panel-cell .jbsp-earn-card,
.jbsp-panel-cell .jbsp-earn-table,
.jbsp-earn-card .jbsp-earn-table,
.jbsp-earn-kpis .jbsp-earn-kpi-card {
	background: #121820 !important;
}

/* The sidebar belongs to the same surface, but its button fills are the model's own menu colours -
 * left alone deliberately, so a coloured button stays coloured. */
.jbsp-dash-sidebar {
	background: transparent !important;
}

/* -------------------------------------------------------------------------
 * 15. Earnings-by-site table
 * It has no styling of its own in the base sheet - it renders as a browser-default table with
 * black borders, which is the unstyled grid visible under the donut.
 *
 * Both the dashboard container and the shortcode container are listed because this table appears in
 * both places, and background-color is set as a longhand as well as the shorthand so nothing can
 * sneak in via one or the other.
 * ---------------------------------------------------------------------- */
/* --- 15b. Tables the base sheet pins inside a panel cell -------------------
 * frontend.css hard-pins these at specificity 0-3-2 with !important:
 *   .jbsp-panel-cell .jbsp-breakdown-table table td/th        { background:#fff !important; color:#000 !important }
 *   .jbsp-panel-cell .jbsp-breakdown-table table td strong    { color:#000 !important }
 *   .jbsp-panel-cell .jbsp-breakdown-table table              { background:#fff !important; color:#000 !important }
 *   .jbsp-panel-cell .jbsp-earn-transactions .jbsp-earn-table { background:#fff !important; color:#000 !important }
 * The §15 rules are one class weaker (0-2-1), which is why the earnings table under the donut
 * stayed a white box with black text. Doubling the panel-cell class takes these to 0-4-x, which wins
 * on class count at equal !important without any of the base selectors having to be guessed at.
 * ---------------------------------------------------------------------- */
.jbsp-panel-cell.jbsp-panel-cell .jbsp-breakdown-table table,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-breakdown-table table td,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-breakdown-table table th,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-breakdown-table table td strong,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-breakdown-table table th strong,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-live-table td,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-live-table th,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-earn-transactions .jbsp-earn-table,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-earn-transactions .jbsp-earn-table td,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-earn-transactions .jbsp-earn-table th,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-custom-html table td,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-custom-html table th,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-autosync-table td {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--jbsp-text) !important;
	-webkit-text-fill-color: var(--jbsp-text) !important;
	border-color: rgba(255, 255, 255, .10) !important;
}

.jbsp-panel-cell.jbsp-panel-cell .jbsp-breakdown-table thead th,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-live-table thead th,
.jbsp-panel-cell.jbsp-panel-cell .jbsp-earn-transactions .jbsp-earn-table thead th {
	background: rgba(255, 255, 255, .04) !important;
	color: var(--jbsp-text-muted) !important;
	-webkit-text-fill-color: var(--jbsp-text-muted) !important;
}

.jbsp-breakdown-table {
	margin-top: 18px;
}

.jbsp-earn-dashboard-container .jbsp-breakdown-table table,
.jbsp-earn-container .jbsp-breakdown-table table,
.jbsp-breakdown-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, .10) !important;
	border-radius: 12px;
	overflow: hidden;
}

/* These four selectors are copied from the base sheet deliberately: it pins the imported and live
 * breakdown tables with !important at the same specificity, so anything weaker loses. */
.jbsp-earn-breakdown .jbsp-breakdown-table th,
.jbsp-earn-breakdown .jbsp-breakdown-table td,
.jbsp-earn-breakdown .jbsp-live-table th,
.jbsp-earn-breakdown .jbsp-live-table td {
	background: transparent !important;
	background-color: transparent !important;
	color: #eef2f2 !important;
	-webkit-text-fill-color: #eef2f2 !important;
}

.jbsp-earn-breakdown .jbsp-breakdown-table thead th,
.jbsp-earn-breakdown .jbsp-live-table thead th {
	background: rgba(255, 255, 255, .04) !important;
	color: #8d999e !important;
	-webkit-text-fill-color: #8d999e !important;
	font-size: .7rem !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 10px 14px !important;
	border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}

.jbsp-earn-dashboard-container .jbsp-breakdown-table thead,
.jbsp-earn-dashboard-container .jbsp-breakdown-table tbody,
.jbsp-earn-dashboard-container .jbsp-breakdown-table tr,
.jbsp-earn-container .jbsp-breakdown-table thead,
.jbsp-earn-container .jbsp-breakdown-table tbody,
.jbsp-earn-container .jbsp-breakdown-table tr,
.jbsp-breakdown-table thead,
.jbsp-breakdown-table tbody,
.jbsp-breakdown-table tr {
	background: transparent !important;
	background-color: transparent !important;
}

.jbsp-breakdown-table th,
.jbsp-breakdown-table td {
	padding: 10px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .055) !important;
}

.jbsp-breakdown-table tr:last-child td {
	border-bottom: 0 !important;
	font-weight: 700;
}

.jbsp-breakdown-table td:last-child,
.jbsp-breakdown-table th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* The scope caption is written inline with color:#666, so it needs the weight too. */
.jbsp-breakdown-scope,
.jbsp-breakdown-table + p {
	color: #8d999e !important;
}

/* =========================================================================
 * 16. Pale fills that are not badges
 *
 * Badges are defined once, in §8; the spender-name chips live with the rest of Top Spenders in §9.
 * What is left here is the base sheet's other pale-with-dark-ink pairs, which §2's light text would
 * otherwise erase exactly the way it erased the MAPPED pills.
 * ========================================================================= */

/* The amber "you have unmapped transactions" notice, and its link. */
.jbsp-earn-pending-notice a {
	color: #ffd47d !important;
}

/* The conversion notice is written inline with background:#fffbea. */
.jbsp-conversion-warning {
	background: rgba(255, 207, 92, .10) !important;
	border-left-color: var(--jbsp-warning) !important;
	color: var(--jbsp-text) !important;
}

/* The segmented Imported/Live control: light-grey track, white selected segment. */
.jbsp-switch {
	background: rgba(255, 255, 255, .06) !important;
}

/* The row the eye icon opens, in Top Spenders. */
.jbsp-sp-detail td {
	background: rgba(255, 255, 255, .035) !important;
	color: var(--jbsp-text) !important;
}

.jbsp-pro-dot {
	background: rgba(255, 255, 255, .22) !important;
}

/* =========================================================================
 * 17. Chart tooltips (Chart.js injects inline styles, so this needs the weight)
 * ========================================================================= */
.jbsp-earn-container canvas {
	filter: none;
}

/* =========================================================================
 * 21. Minimum duration audit
 *
 * Almost the whole card is built from inline styles: the totals rows are painted #fafafa and
 * #fdf2f2, the row actions #fff, the expanded detail row #fbfbfc. On the dark theme that read as
 * white and pink bands with dark text inside them - the card looked broken rather than themed.
 * Inline beats any normal rule, so these need the weight. All but one of the classes already
 * existed on the markup; jbsp-min-big was added so the red headline could be targeted without
 * touching jbsp-adv-big, which other cards also use.
 * ========================================================================= */
.jbsp-min-big,
.jbsp-min-count,
.jbsp-min-plural {
	color: #ff9494 !important;
	-webkit-text-fill-color: #ff9494 !important;
}

.jbsp-min-table tfoot tr {
	background: rgba(255, 255, 255, .04) !important;
	color: var(--jbsp-text) !important;
}

/* Every header cell in this card - both the site-minimum editor table and the flagged-shows table -
 * is inline `background:#f3f4f6;color:#111827`. That is the white bar above the rows, with the labels
 * ghosted into it by the light text the rest of this sheet applies. Targeting the class rather than
 * one table means the collapsible "Your site minimums" table is covered too, which it was not. */
.jbsp-min-th,
.jbsp-min-table thead th,
.jbsp-min-table thead th.jbsp-min-act {
	background: rgba(255, 255, 255, .04) !important;
	color: var(--jbsp-text-muted) !important;
	-webkit-text-fill-color: var(--jbsp-text-muted) !important;
	border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}

/* The second totals row is a claim about money that should have been billed, so it is the one
 * row allowed to be red. */
.jbsp-min-table tfoot tr + tr {
	background: rgba(255, 107, 107, .10) !important;
	color: #ff9494 !important;
}

.jbsp-min-paid-lab,
.jbsp-min-paid-val {
	color: var(--jbsp-text) !important;
	-webkit-text-fill-color: var(--jbsp-text) !important;
}

.jbsp-min-miss-lab,
.jbsp-min-miss-val {
	color: #ff9494 !important;
	-webkit-text-fill-color: #ff9494 !important;
}

.jbsp-min-eye,
.jbsp-min-rowcopy,
.jbsp-min-flag {
	background: var(--jbsp-surface-2) !important;
	border-color: rgba(255, 255, 255, .18) !important;
	color: var(--jbsp-text) !important;
}

.jbsp-min-eye:hover,
.jbsp-min-rowcopy:hover,
.jbsp-min-flag:hover {
	background: var(--jbsp-surface-3) !important;
}

.jbsp-min-flag[aria-pressed="true"] {
	color: #ff9494 !important;
	border-color: rgba(255, 107, 107, .5) !important;
}

/* The expanded "payments around this show" row. */
.jbsp-min-detail td {
	background: rgba(255, 255, 255, .035) !important;
}

.jbsp-min-detail td * {
	color: var(--jbsp-text) !important;
}

.jbsp-min-detail td em,
.jbsp-min-detail td > div {
	color: var(--jbsp-text-muted) !important;
}

.jbsp-min-copy {
	background: var(--jbsp-surface-2) !important;
	border-color: rgba(255, 255, 255, .18) !important;
	color: var(--jbsp-text) !important;
}

.jbsp-min-copy-msg {
	color: var(--jbsp-text-muted) !important;
}

/* -------------------------------------------------------------------------
 * 20. Narrow screens
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
	.jbsp-earn-table th,
	.jbsp-earn-table td,
	.jbsp-adv-table th,
	.jbsp-adv-table td {
		padding: 9px 10px;
	}

	.jbsp-earn-kpi-card {
		padding: 16px 18px;
	}
}

/* =========================================================================
 * 18. The white-paint ledger
 *
 * Every rule below is a selector that frontend.css fills with #fff (or `white`) AND pins with
 * !important. They cannot be reached from a class-level override because the base declaration has
 * the weight and the source position, so each selector list here is copied verbatim from the base * sheet and given dark values. The list was extracted mechanically from frontend.css rather than by
 * eye, which is how the earnings table under the donut survived three attempts at this.
 * ========================================================================= */

/* Form controls. Without this the Import Data and Full History panels are white boxes on a dark
 * card - the single most obviously "unfinished" surface on the free tier. */
.jbsp-import-form input, .jbsp-import-form select, .jbsp-import-form textarea,
.jbsp-earn-transactions input, .jbsp-earn-transactions select, .jbsp-earn-transactions textarea,
.jbsp-panel-cell input, .jbsp-panel-cell select, .jbsp-panel-cell textarea,
.jbsp-manual-form input, .jbsp-manual-form select, .jbsp-manual-form textarea,
.jbsp-range-ctl select, .jbsp-range-ctl input[type="date"],
.jbsp-import-form input[type="date"], .jbsp-manual-form input[type="date"],
.jbsp-earn-transactions input[type="date"] {
	background: var(--jbsp-surface-2) !important;
	background-color: var(--jbsp-surface-2) !important;
	color: var(--jbsp-text) !important;
	-webkit-text-fill-color: var(--jbsp-text) !important;
	border-color: var(--jbsp-line-strong) !important;
}

.jbsp-panel-cell input[type="checkbox"],
.jbsp-panel-cell input[type="radio"] {
	accent-color: var(--jbsp-accent);
}

/* Panels that render a table directly, without an .jbsp-earn-transactions wrapper. */
.jbsp-panel-cell .jbsp-earn-table,
.jbsp-panel-cell .jbsp-earn-table th,
.jbsp-panel-cell .jbsp-earn-table td,
.jbsp-panel-cell .jbsp-autosync-table th,
.jbsp-panel-cell .jbsp-autosync-table td {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--jbsp-text) !important;
	-webkit-text-fill-color: var(--jbsp-text) !important;
	border-color: rgba(255, 255, 255, .10) !important;
}

/* The Pro report tables. One list, because the base sheet writes them as one list. */
.jbsp-earn-discount-effectiveness th, .jbsp-earn-discount-effectiveness td,
.jbsp-earn-period-compare th, .jbsp-earn-period-compare td,
.jbsp-earn-live-window th, .jbsp-earn-live-window td,
.jbsp-earn-show-economics th, .jbsp-earn-show-economics td,
.jbsp-earn-site-scorecard th, .jbsp-earn-site-scorecard td,
.jbsp-earn-concentration th, .jbsp-earn-concentration td,
.jbsp-rates th, .jbsp-rates td {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--jbsp-text) !important;
	-webkit-text-fill-color: var(--jbsp-text) !important;
	border-color: rgba(255, 255, 255, .10) !important;
}

/* Import panel body, and the few controls that carry their own white. */
.jbsp-import-form,
.jbsp-date-range-picker,
.jbsp-sp-eye,
.jbsp-sp-pager .jbsp-sp-page,
.date-range-btn,
.jbsp-hm-filters select,
.jbsp-sp-filters select {
	background: var(--jbsp-surface-2) !important;
	color: var(--jbsp-text) !important;
	border-color: rgba(255, 255, 255, .12) !important;
}

.jbsp-sp-eye:hover,
.jbsp-sp-pager .jbsp-sp-page:hover,
.date-range-btn:hover {
	background: var(--jbsp-surface-3) !important;
}

/* The Imported/Live segmented switch: the selected segment is painted white in the base sheet. */
.jbsp-switch .jbsp-switch-btn.active,
.jbsp-switch .jbsp-tx-source-btn.active {
	background: var(--jbsp-surface-3) !important;
	color: var(--jbsp-text) !important;
	-webkit-text-fill-color: var(--jbsp-text) !important;
	box-shadow: inset 0 0 0 1px var(--jbsp-line-strong) !important;
}

.jbsp-earn-badge.badge-live {
	background: rgba(255, 207, 92, .12) !important;
	color: var(--jbsp-warning) !important;
	border: 1px solid rgba(255, 207, 92, .3) !important;
}

/* =========================================================================
 * 19. The two hand-written sections: Dashboard guide and Tools
 *
 * Those panels are not shortcodes - they are raw HTML pasted into the menu builder, with light
 * values inline (`<div style="background:#fafafa">`, `<th style="border:1px solid #ccc">`) and no
 * classes at all. No selector can name them, so this targets the shape instead: an unclassed div
 * carrying a near-white inline fill. `div:not([class])` on its own is not enough - it also catches
 * the panel cell, whose white comes from the menu builder and which §14 has already dealt with.
 * The dark-on-dark buttons in that HTML (`background:#111`, white text, already !important) are
 * deliberately not matched, and the near-white borders become hairlines rather than disappearing,
 * because the blocks are still selling a shape.
 * ========================================================================= */
.jbsp-dash-panel-inner div:not([class])[style*="background:#fafafa"],
.jbsp-dash-panel-inner div:not([class])[style*="background: #fafafa"],
.jbsp-dash-panel-inner div:not([class])[style*="background:#ffffff"],
.jbsp-dash-panel-inner div:not([class])[style*="background: #ffffff"],
.jbsp-dash-panel-inner div:not([class])[style*="background:white"] {
	background: transparent !important;
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, .12) !important;
	color: var(--jbsp-text) !important;
}

/* Borders only. Targeting the near-white fill by its value rather than by "has no class" matters:
 * the same blocks contain `background:#111111` buttons with white text, and a shape-based rule
 * wiped those to transparent along with everything else. */
.jbsp-dash-panel-inner table:not([class]),
.jbsp-dash-panel-inner th:not([class]),
.jbsp-dash-panel-inner td:not([class]) {
	border-color: rgba(255, 255, 255, .12) !important;
	color: var(--jbsp-text) !important;
}

.jbsp-dash-panel-inner h1:not([class]),
.jbsp-dash-panel-inner h2:not([class]),
.jbsp-dash-panel-inner h3:not([class]),
.jbsp-dash-panel-inner h4:not([class]) {
	color: var(--jbsp-text) !important;
}

/* The guide leans on <strong> and <em> for emphasis; both must not fall back to near-black. */
.jbsp-dash-panel-inner strong:not([class]),
.jbsp-dash-panel-inner em:not([class]),
.jbsp-dash-panel-inner li:not([class]),
.jbsp-dash-panel-inner p:not([class]) {
	color: var(--jbsp-text) !important;
}