/* JBSP Earnings Analytics Frontend Styles */

:root {
	--jbsp-accent: #10b981;
	--jbsp-gray-light: #f3f4f6;
	--jbsp-gray-border: #e5e7eb;
	--jbsp-text: #111827;
	--jbsp-text-muted: #6b7280;
	--jbsp-success: #10b981;
	--jbsp-warning: #f59e0b;
	--jbsp-danger: #ef4444;
	--jbsp-info: #3b82f6;
}

.jbsp-earn-container {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--jbsp-text);
}

/* Force readable text color inside cards/panels so text is always visible
   regardless of panel background color chosen by the menu builder. */
.jbsp-earn-card,
.jbsp-earn-card *,
.jbsp-panel-cell,
.jbsp-panel-cell *,
.jbsp-dash-panel-inner,
.jbsp-dash-panel-inner * {
    color: #000 !important;
}

/* Cards */
.jbsp-earn-card {
	background: white;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease;
}

.jbsp-earn-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* KPI Cards */
.jbsp-earn-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.jbsp-earn-kpi-card {
	background: white;
	border: 2px solid var(--jbsp-gray-border);
	border-radius: 8px;
	padding: 25px;
	text-align: center;
	transition: all 0.3s ease;
}

.jbsp-earn-kpi-card.verified {
	border-top: 4px solid var(--jbsp-success);
}

.jbsp-earn-kpi-card.pending {
	border-top: 4px solid var(--jbsp-warning);
}

.jbsp-earn-kpi-card .kpi-value {
	font-size: 2.5em;
	font-weight: bold;
	color: var(--jbsp-accent);
	margin-bottom: 10px;
}

.jbsp-earn-kpi-card .kpi-label {
	font-size: 0.9em;
	color: var(--jbsp-text-muted);
	margin-bottom: 15px;
}

/* Badges */
.jbsp-earn-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.badge-verified {
	background: #d1fae5;
	color: #065f46;
}

.badge-pending {
	background: #fed7aa;
	color: #92400e;
}

/* Tables */
.jbsp-earn-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--jbsp-gray-border);
}

.jbsp-earn-table thead {
	background: var(--jbsp-gray-light);
	border-bottom: 2px solid var(--jbsp-gray-border);
}

.jbsp-earn-table th,
.jbsp-earn-table td {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid var(--jbsp-gray-border);
}

.jbsp-earn-table tbody tr:hover {
	background: var(--jbsp-gray-light);
}

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

/* Buttons */
.jbsp-earn-btn {
	display: inline-block;
	padding: 10px 20px;
	border: none;
	border-radius: 6px;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	color: inherit;
	background: transparent;
}

/* Active toggle button for import/manual */
.jbsp-import-toggle.active {
	background: #34d399 !important; /* green */
	color: #fff !important;
	border: 0 !important;
}

button.jbsp-earn-btn {
	font-family: inherit;
	overflow: visible;
	text-transform: none;
	-webkit-appearance: button;
}

.btn-primary {
	background: var(--jbsp-accent) !important;
	color: white !important;
}

.btn-primary:hover {
	opacity: 0.9;
}

.btn-success {
	background: var(--jbsp-success) !important;
	color: white !important;
}

.btn-success:hover {
	opacity: 0.9;
}

.btn-secondary {
	background: var(--jbsp-gray-border);
	color: var(--jbsp-text);
}

.btn-secondary:hover {
	background: #d1d5db;
}

.btn-sm {
	padding: 6px 12px;
	font-size: 0.8em;
}

.btn-primary:disabled,
.btn-success:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Forms */
.jbsp-import-form {
	background: white;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 8px;
	padding: 25px;
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--jbsp-text);
}

/* Form group with input/select/textarea */
.form-group label + input,
.form-group label + select,
.form-group label + textarea {
	display: block;
	width: 100%;
}

/* Force plugin tables to remain readable even in aggressive dark themes */
.jbsp-panel-cell .jbsp-earn-table,
.jbsp-panel-cell .jbsp-breakdown-table table,
.jbsp-panel-cell .jbsp-earn-transactions .jbsp-earn-table {
	background: #fff !important;
	color: #000 !important;
	border: 1px solid rgba(0,0,0,0.12) !important;
}

.jbsp-panel-cell .jbsp-earn-table th,
.jbsp-panel-cell .jbsp-earn-table td,
.jbsp-panel-cell .jbsp-breakdown-table table td,
.jbsp-panel-cell .jbsp-breakdown-table table th {
	background: #fff !important;
	color: #000 !important;
	border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

.jbsp-panel-cell .jbsp-breakdown-table table td strong {
	color: #000 !important;
}

/* Admin-entered custom HTML blocks inside panels */
.jbsp-panel-cell .jbsp-custom-html {
	color: #000 !important;
}
.jbsp-panel-cell .jbsp-custom-html table {
	width: 100% !important;
	border-collapse: collapse !important;
}
.jbsp-panel-cell .jbsp-custom-html table th,
.jbsp-panel-cell .jbsp-custom-html table td {
	border: 1px solid rgba(0,0,0,0.12) !important;
	padding: 10px !important;
	color: #000 !important;
	background: #fff !important;
}

/* Button group (form-group containing only buttons) */
.form-group:has(> button:first-child) {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.95em;
}

/* Ensure form controls are readable in dark admin/site themes by forcing
   white backgrounds and dark text inside plugin UI panels. */
.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 {
	background: #fff !important;
	color: #000 !important;
	border-color: var(--jbsp-gray-border) !important;
}

/* Date inputs and placeholders */
.jbsp-import-form input[type="date"],
.jbsp-manual-form input[type="date"],
.jbsp-earn-transactions input[type="date"] {
	background: #fff !important;
	color: #000 !important;
}
.jbsp-import-form ::placeholder,
.jbsp-manual-form ::placeholder,
.jbsp-earn-transactions ::placeholder {
	color: var(--jbsp-text-muted) !important;
}

.form-group button {
	width: auto;
	display: inline-block;
	padding: 10px 20px;
	margin: 0;
}

.form-group textarea {
	min-height: 200px;
	font-family: "Courier New", monospace;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--jbsp-accent);
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Trend Chart */
.jbsp-earn-trend-chart {
	background: white;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.jbsp-earn-trend-chart h3 {
	margin-top: 0;
	margin-bottom: 20px;
	color: var(--jbsp-text);
}

.jbsp-earn-trend-chart canvas {
	max-height: 400px;
}

/* Breakdown Charts */
.jbsp-earn-breakdown {
	background: white;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.jbsp-earn-breakdown h3 {
	margin-top: 0;
	margin-bottom: 20px;
}

.jbsp-earn-breakdown canvas {
	max-height: 300px;
}

/* Transactions */
.jbsp-earn-transactions {
	background: white;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.jbsp-earn-transactions h3 {
	margin-top: 0;
	margin-bottom: 20px;
}

.jbsp-earn-transactions .jbsp-earn-table {
	margin-top: 15px;
}

/* Pending Notice */
.jbsp-earn-pending-notice {
	background: #fef3c7;
	border: 2px solid var(--jbsp-warning);
	border-radius: 6px;
	padding: 15px 20px;
	margin-bottom: 20px;
	color: #92400e;
}

.jbsp-earn-pending-notice a {
	color: #d97706;
	text-decoration: underline;
}

/* Dashboard Container */
.jbsp-earn-dashboard-container {
	padding: 20px 0;
}

.dashboard-section {
	margin-bottom: 30px;
}

.dashboard-section h2 {
	font-size: 1.5em;
	margin-bottom: 20px;
	color: var(--jbsp-text);
}

.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.dashboard-item {
	background: white;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 8px;
	padding: 20px;
}

.pro-module {
	border-left: 4px solid var(--jbsp-info);
	opacity: 0.9;
}

/* Admin Table */
.admin-table {
	font-size: 0.9em;
}

.admin-table th {
	font-weight: 600;
}

/* Admin Filters */
.admin-filters {
	background: var(--jbsp-gray-light);
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 6px;
	padding: 15px;
	margin-bottom: 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
}

.filter-group {
	display: flex;
	flex-direction: column;
}

.filter-group label {
	font-weight: 600;
	margin-bottom: 5px;
}

.filter-group input,
.filter-group select {
	padding: 8px;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 4px;
}

/* Heatmap */
.jbsp-earn-heatmap {
	background: white;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.jbsp-earn-heatmap h3 {
	margin-top: 0;
}

#jbsp-heatmap-placeholder,
.jbsp-hm-empty {
	background: var(--jbsp-gray-light);
	border: 2px dashed var(--jbsp-gray-border);
	border-radius: 6px;
	padding: 40px;
	text-align: center;
	color: var(--jbsp-text-muted);
}

.jbsp-hm-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 12px 0 16px;
}

.jbsp-hm-filters label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--jbsp-text-muted);
}

.jbsp-hm-filters select {
	min-width: 220px;
	max-width: 100%;
	padding: 6px 8px;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 4px;
	background: #fff;
	font-size: 13px;
}

.jbsp-hm-tzfield {
	min-width: 300px;
}

.jbsp-hm-tzsearch {
	width: 100%;
	padding: 6px 8px;
	margin-bottom: 4px;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 4px;
	font-size: 13px;
}

.jbsp-hm-tzcount {
	font-size: 11px;
	color: var(--jbsp-text-muted);
	min-height: 14px;
}

.jbsp-hm-sitekey {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	margin: 8px 0 0;
}

.jbsp-hm-sitekey-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.jbsp-hm-summary {
	margin: 0 0 4px;
	font-size: 14px;
}

.jbsp-hm-summary strong {
	font-size: 20px;
}

.jbsp-hm-peak {
	margin: 0 0 4px;
	font-size: 13px;
}

.jbsp-hm-note {
	background: var(--jbsp-gray-light);
	border: 1px dashed var(--jbsp-gray-border);
	border-radius: 6px;
	padding: 12px;
	font-size: 12px;
	color: var(--jbsp-text-muted);
	margin: 8px 0 0;
}

/* The grid shares the available width between its 24 hour columns instead of each column
   demanding its own, so it fits the card rather than needing to be scrolled sideways. The
   min-width only matters on a phone, where below about 340px the cells stop being readable. */
.jbsp-hm-scroll {
	overflow-x: auto;
	margin: 10px 0 8px;
}

table.jbsp-hm {
	border-collapse: separate;
	border-spacing: 2px;
	table-layout: fixed;
	width: 100%;
	min-width: 340px;
}

/* Every one of these is set explicitly rather than inherited. The theme styles `th` with a dark
   background and this plugin's own text colour, which rendered the hour numbers as black on black
   and made the entire header row unreadable. */
table.jbsp-hm th {
	background: #fff;
	color: #4b5563;
	font-size: 10px;
	font-weight: 600;
	text-align: center;
	padding: 0;
	border: 0;
	line-height: 18px;
}

table.jbsp-hm th.jbsp-hm-corner {
	width: 34px;
}

table.jbsp-hm th.jbsp-hm-day {
	background: #fff;
	color: #374151;
	text-align: right;
	padding-right: 6px;
	white-space: nowrap;
	font-size: 11px;
}

table.jbsp-hm td {
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 600;
	text-align: center;
	line-height: 26px;
	color: #1f2937;
	overflow: hidden;
	cursor: default;
}

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

.jbsp-hm-legend {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	margin: 0;
}

.jbsp-hm-swatch {
	display: inline-block;
	width: 18px;
	height: 10px;
	border-radius: 2px;
}

.jbsp-hm-unit {
	margin-left: 6px;
}

.jbsp-earn-heatmap.is-busy {
	opacity: 0.6;
}

/* Big Spenders */
.jbsp-earn-big-spenders {
	background: white;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.jbsp-earn-big-spenders h3 {
	margin-top: 0;
}

.jbsp-sp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin: 0 0 14px;
}
.jbsp-sp-filters label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	color: #5b6572;
}
.jbsp-sp-filters select {
	min-width: 150px;
	max-width: 100%;
	padding: 6px 8px;
	font-size: 13px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
}
.jbsp-sp-filters .jbsp-sp-check {
	flex-direction: row;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: #3c4654;
}
.jbsp-sp-filters .jbsp-sp-check input { margin: 0; }

.jbsp-earn-big-spenders .jbsp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jbsp-earn-big-spenders.is-busy { opacity: .5; }

/* Six columns have to fit a half-width panel, so the table wraps instead of scrolling.
   Selectors are deliberately specific: the dashboard's ".jbsp-panel-cell .jbsp-earn-table th"
   rule sets its own padding and would otherwise win. */
.jbsp-earn-big-spenders table.jbsp-sp-table {
	width: 100%;
	min-width: 0;
	table-layout: auto;
	font-size: 12px;
}
.jbsp-earn-big-spenders table.jbsp-sp-table th,
.jbsp-earn-big-spenders table.jbsp-sp-table td {
	padding: 6px 7px;
	white-space: normal;
	word-break: break-word;
	line-height: 1.35;
	vertical-align: middle;
}
.jbsp-earn-big-spenders table.jbsp-sp-table th { font-size: 11px; }
.jbsp-earn-big-spenders table.jbsp-sp-table .jbsp-sp-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.jbsp-earn-big-spenders table.jbsp-sp-table .jbsp-sp-act {
	width: 1%;
	text-align: right;
	white-space: nowrap;
	padding-left: 2px;
}
.jbsp-sp-native { color: #6a7684; font-size: 11px; }

.jbsp-sp-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	vertical-align: middle;
}
.jbsp-sp-badge.is-unnamed { background: #eef1f4; color: #5b6572; }
.jbsp-sp-badge.is-deleted { background: #fdeaea; color: #9b2c2c; }
.jbsp-sp-badge.is-pseudo { background: #eef4fb; color: #2c5282; }

.jbsp-sp-eye {
	font-size: 11px;
	line-height: 1.3;
	padding: 1px 5px;
	min-height: 0;
	cursor: pointer;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 5px;
}
.jbsp-sp-eye:hover { background: #f3f5f7; }
.jbsp-sp-eye[aria-expanded="true"] { background: #eef1f4; border-color: #b6bec7; }

.jbsp-sp-detail td { background: #fbfbfc; padding: 10px 12px; }
.jbsp-sp-hist {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}
.jbsp-sp-hist th {
	text-align: left;
	padding: 4px 8px;
	color: #5b6572;
	border-bottom: 1px solid #e5e8ec;
	font-weight: 600;
}
.jbsp-sp-hist td {
	padding: 4px 8px;
	border-top: 1px solid #eef1f4;
	color: #374151;
}
.jbsp-sp-note {
	margin: 12px 0 0;
	font-size: 12px;
	color: #6a7684;
	line-height: 1.5;
}
.jbsp-sp-note.is-warn { color: #9b2c2c; }

/* Pager sits under the table and must stay inside the panel, like the table. */
.jbsp-sp-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 10px 0 0;
	font-size: 11px;
	color: #5b6572;
}
.jbsp-sp-pager .jbsp-sp-page {
	font-size: 11px;
	line-height: 1.4;
	padding: 3px 9px;
	min-height: 0;
	cursor: pointer;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 5px;
}
.jbsp-sp-pager .jbsp-sp-page:hover:not(:disabled) { background: #f3f5f7; }
.jbsp-sp-pager .jbsp-sp-page:disabled { opacity: .45; cursor: default; }
.jbsp-sp-pageinfo { flex: 1 1 auto; }
.jbsp-sp-pagecount { white-space: nowrap; }

/* Responsive */
@media (max-width: 768px) {
	.jbsp-earn-kpis {
		grid-template-columns: 1fr;
	}

	.dashboard-grid {
		grid-template-columns: 1fr;
	}

	.admin-filters {
		grid-template-columns: 1fr;
	}

	.jbsp-earn-table {
		font-size: 0.85em;
	}

	.jbsp-earn-table th,
	.jbsp-earn-table td {
		padding: 8px 10px;
	}

	.jbsp-earn-btn {
		padding: 8px 16px;
		font-size: 0.85em;
	}
}

/* Utility Classes */
.text-success {
	color: var(--jbsp-success);
}

.text-warning {
	color: var(--jbsp-warning);
}

.text-danger {
	color: var(--jbsp-danger);
}

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

.text-center {
	text-align: center;
}
/* Date Range Picker */
.jbsp-date-range-picker {
	background: white;
	border: 1px solid var(--jbsp-gray-border);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 25px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.date-range-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
	font-weight: 600;
}

.label-text {
	color: var(--jbsp-text-muted);
	font-size: 0.9em;
}

.current-period {
	font-size: 1.1em;
	color: var(--jbsp-accent);
	font-weight: 700;
}

.date-range-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

.date-range-btn {
	padding: 10px 16px;
	font-size: 0.9em;
	border: 2px solid var(--jbsp-gray-border);
	background: white;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	color: var(--jbsp-text);
	font-weight: 500;
}

.date-range-btn:hover {
	border-color: var(--jbsp-accent);
	color: var(--jbsp-accent);
}

.date-range-btn.active {
	background: var(--jbsp-accent);
	color: white;
	border-color: var(--jbsp-accent);
	font-weight: 600;
}

.date-range-info {
	color: var(--jbsp-text-muted);
	font-size: 0.85em;
	padding-top: 10px;
	border-top: 1px solid var(--jbsp-gray-border);
}

/* KPI Period Label */
.kpi-period {
	font-size: 0.85em;
	color: var(--jbsp-text-muted);
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--jbsp-gray-light);
}
/* ============================================================
   jbsp-source-switch (v0.2.46)
   One segmented switch used by BOTH the Recent Transactions Imported|Live control and (next) the
   Earnings by Site chart. Overrides WP's .button so the two options read as a single control
   rather than two chunky buttons. Purely visual - the JS keeps binding to the same classes.
   ============================================================ */
.jbsp-switch {
        display: inline-flex;
        align-items: center;
        padding: 3px;
        margin: 0 0 10px;
        background: #eef0f3;
        border: 1px solid #dfe3e8;
        border-radius: 999px;
        line-height: 1;
}
.jbsp-switch .jbsp-switch-btn,
.jbsp-switch .jbsp-tx-source-btn {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        text-shadow: none;
        margin: 0;
        min-height: 0;
        height: auto;
        padding: 7px 16px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        color: #5a6572;
        cursor: pointer;
        transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.jbsp-switch .jbsp-switch-btn:hover,
.jbsp-switch .jbsp-tx-source-btn:hover {
        background: rgba(16, 24, 40, .05);
        color: #2c343c;
}
.jbsp-switch .jbsp-switch-btn:focus,
.jbsp-switch .jbsp-tx-source-btn:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(47, 52, 64, .18);
}
.jbsp-switch .jbsp-switch-btn.active,
.jbsp-switch .jbsp-tx-source-btn.active {
        background: #ffffff;
        color: #1c2530;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .16);
}

/* the two headline cards are SOURCES, not parts of one sum */
.jbsp-earn-kpi-card.live { border-top: 3px solid #f0a020; }
.jbsp-earn-badge.badge-live { background: #fff4e5; color: #8a5200; }
.jbsp-earn-kpi-card .kpi-source { margin-top: 6px; font-size: 11px; color: #6a7684; }
/* ============================================================
   v0.2.47 - a REAL toggle switch.
   0.2.46 shipped a segmented control (two filled segments in a pill), which is still just
   two buttons sitting next to each other. This is a proper switch: one grey track with a
   knob that slides across it, and the two labels either side of it.
   ============================================================ */
.jbsp-src-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	line-height: 1;
}
.jbsp-src-switch-txt {
	font-size: 12px;
	font-weight: 600;
	color: #8a949f;
	transition: color .18s ease;
	user-select: none;
	-webkit-user-select: none;
}
.jbsp-src-switch-txt.is-on { color: #1c2530; }

.jbsp-src-switch-track {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 46px;
	height: 26px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: #cfd6dd;
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color .18s ease;
}
.jbsp-src-switch-track:hover,
.jbsp-src-switch-track:focus,
.jbsp-src-switch-track:active { background: #c2cad3; box-shadow: none; }
.jbsp-src-switch-track[aria-checked="true"] { background: #f0a020; }
.jbsp-src-switch-track[aria-checked="true"]:hover,
.jbsp-src-switch-track[aria-checked="true"]:focus,
.jbsp-src-switch-track[aria-checked="true"]:active { background: #dd9419; }
.jbsp-src-switch-track:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 52, 64, .18); }

.jbsp-src-switch-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .28);
	transition: transform .18s ease;
	pointer-events: none;
}
.jbsp-src-switch-track[aria-checked="true"] .jbsp-src-switch-knob { transform: translateX(20px); }
/* ============================================================
   v0.2.52 transactions width
   Five columns (Date, Site, Type, Amount, Status) do not fit in a narrow cell. Give the table a
   minimum width and let the existing .jbsp-table-wrap scroll, so the columns stay readable
   instead of being crushed and wrapped onto four lines each.
   ============================================================ */
.jbsp-earn-transactions .jbsp-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.jbsp-earn-transactions .jbsp-earn-table {
	min-width: 480px;
	table-layout: auto;
}
.jbsp-earn-transactions .jbsp-earn-table th,
.jbsp-earn-transactions .jbsp-earn-table td {
	white-space: nowrap;
	padding: 8px 10px;
}
.jbsp-earn-transactions .jbsp-earn-table td:first-child,
.jbsp-earn-transactions .jbsp-earn-table th:first-child { white-space: normal; }
/* v0.2.53: 480px floor so a narrow card is far less likely to need a scrollbar. */

/* Auto Sync table (Import > Auto Sync pane).
   The dashboard theme styles table headers with an !important rule, and that beat the inline
   styles the markup used to carry - giving black text on a dark header, i.e. unreadable.
   Scoped + !important to win, mirroring the "aggressive dark themes" block above.
   Header is white with black text, matching the table body. */
.jbsp-panel-cell .jbsp-autosync-table th,
.jbsp-panel-cell .jbsp-autosync-table td {
	background: #fff !important;
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
	border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.jbsp-panel-cell .jbsp-autosync-table th {
	font-weight: 600 !important;
	border-bottom: 2px solid rgba(0,0,0,0.12) !important;
}
.jbsp-panel-cell .jbsp-autosync-table .jbsp-autosync-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: -1px;
	margin-left: 6px;
	padding: 2px;
	border-radius: 999px;
	background: #dcfce7 !important;
	color: #15803d !important;
}

/* Breakdown tables (Earnings by Site).
   Same theme trap as the Auto Sync table: the theme styles th with !important, which beat the
   markup's inline colours and rendered the live table's header dark-on-dark. Pin both tables
   (imported and live) to a white header cell with dark text, and give the imported table, which
   had no thead at all, the same header treatment as the live one. */
.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: #fff !important;
    color: #1c2530 !important;
    -webkit-text-fill-color: #1c2530 !important;
}
.jbsp-earn-breakdown .jbsp-breakdown-table thead th,
.jbsp-earn-breakdown .jbsp-live-table thead th {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 0 8px !important;
    border-bottom: 2px solid rgba(0,0,0,0.12) !important;
}
/* Advanced Analytics range picker - shared by every widget card on that page.
   The theme styles form controls with !important, so these are pinned the same way
   as the Auto Sync / breakdown table fixes: white field, dark text. */
.jbsp-range-ctl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 13px;
    color: #4a5568;
}
.jbsp-range-ctl > label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    margin: 0;
}
.jbsp-range-ctl select,
.jbsp-range-ctl input[type="date"] {
    background: #fff !important;
    color: #1c2530 !important;
    -webkit-text-fill-color: #1c2530 !important;
    border: 1px solid #cbd5e0 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    height: auto !important;
    max-width: 100%;
}
.jbsp-range-ctl .jbsp-range-custom {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.jbsp-range-ctl .jbsp-range-sep { color: #718096; }
.jbsp-range-ctl .jbsp-range-apply { font-size: 12px !important; }
/* Advanced Analytics widgets (discount, comparison, economics, scorecard, concentration, live).
   Same theme trap as the other tables: the theme styles th with !important, so every cell is
   pinned to a white background with dark text. */
.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: #fff !important;
    color: #1c2530 !important;
    -webkit-text-fill-color: #1c2530 !important;
}
.jbsp-adv-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.jbsp-adv-table th {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: left;
    padding: 0 10px 8px 0 !important;
    border-bottom: 2px solid rgba(0,0,0,0.12) !important;
}
.jbsp-adv-table td {
    padding: 8px 10px 8px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    font-size: 13px;
}
.jbsp-adv-table tr.jbsp-adv-total td { border-top: 2px solid rgba(0,0,0,0.15) !important; }
.jbsp-adv-up { color: #15803d; font-weight: 600; }
.jbsp-adv-down { color: #b91c1c; font-weight: 600; }
.jbsp-adv-flat { color: #6a7684; font-weight: 600; }
.jbsp-adv-warn, .jbsp-adv-warn-text { color: #b45309; font-weight: 600; }
.jbsp-adv-tag {
    font-size: 10px; background: #fff7ed !important; color: #9a3412 !important;
    border-radius: 999px; padding: 1px 7px; margin-left: 6px; font-weight: 600;
}
.jbsp-adv-dim { color: #718096; font-size: 12px; }
.jbsp-adv-note { font-size: 13px; color: #2d3748; margin: 10px 0; }
.jbsp-adv-fine { font-size: 11px; color: #718096; margin: 8px 0 0; }
.jbsp-adv-empty { font-size: 13px; color: #6a7684; margin: 10px 0; }
.jbsp-adv-big { font-size: 26px; font-weight: 700; margin: 6px 0 10px; color: #1c2530; }
.jbsp-rates {
    margin: 0 0 16px; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 10px 12px; background: #fff !important;
}
.jbsp-rates summary { cursor: pointer; font-weight: 600; font-size: 13px; color: #1c2530; }
.jbsp-rates input[type="number"] {
    width: 96px !important; background: #fff !important; color: #1c2530 !important;
    -webkit-text-fill-color: #1c2530 !important; border: 1px solid #cbd5e0 !important;
    border-radius: 6px !important; padding: 4px 6px !important;
}
.jbsp-rates-msg { font-size: 12px; margin-left: 8px; }
/* Advanced Analytics: keep the scorecard inside its card. The default cell padding pushed the
   table wider than the panel, which produced a horizontal scrollbar for no reason. */
.jbsp-earn-site-scorecard .jbsp-adv-table { table-layout: fixed; width: 100%; }
.jbsp-earn-site-scorecard .jbsp-adv-table th,
.jbsp-earn-site-scorecard .jbsp-adv-table td {
    padding: 6px 8px 6px 0 !important;
    font-size: 12px !important;
    white-space: normal !important;
    word-break: break-word;
}
.jbsp-earn-site-scorecard .jbsp-adv-table th { font-size: 11px !important; }
.jbsp-trend-caption { font-style: italic; }

/* The Advanced Analytics Imported/Live switch sits above the range picker. It reuses the same

   switch classes as the breakdown card so it looks identical to the other pages. */

.jbsp-adv-source {

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 0 10px;

    font-size: 12px;

    color: #4a5568;

}

/* ---------------------------------------------------------------------------
   Sign-in / create-account panel (class-auth-panel.php)

   Shown to logged-out visitors where the dashboard used to say "Please log in".
   Built from the same card/accent/button classes as everything else, so a
   logged-out dashboard reads as the same product rather than a login wall.
   --------------------------------------------------------------------------- */
.jbsp-auth-card {
    max-width: 520px;
    margin: 24px auto;
}
.jbsp-auth-title { margin: 0 0 6px; }
.jbsp-auth-intro { margin: 0 0 18px; color: #4a5568; font-size: 14px; }

.jbsp-auth-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
}
.jbsp-auth-tab {
    flex: 1 1 0;
    padding: 10px 12px;
    border: 1px solid var(--jbsp-gray-light);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.jbsp-auth-tab:hover { border-color: var(--jbsp-accent); }
/* --jbsp-accent is set inline from the plugin's Settings so this follows the model's chosen colour. */
.jbsp-auth-tab.is-active {
    background: var(--jbsp-accent);
    border-color: var(--jbsp-accent);
    color: #fff;
}

/* Panes are toggled by the inline script; without JS both stay visible, which is the safer failure -
   a visitor sees the forms rather than an empty card. */
.jbsp-auth-pane { display: none; }
.jbsp-auth-pane.is-active { display: block; }

/* UM renders its own form markup and its own button; these only stop it colliding with the card. */
.jbsp-auth-form .um-form { margin: 0; }
.jbsp-auth-form .um-form input[type="text"],
.jbsp-auth-form .um-form input[type="email"],
.jbsp-auth-form .um-form input[type="password"] { width: 100%; }

.jbsp-auth-fallback { margin: 0; }
.jbsp-auth-note { margin: 16px 0 0; font-size: 13px; color: #4a5568; }

/* ---------------------------------------------------------------------------
   Pro page ([jbsp_pro]) + screenshot carousel
   --------------------------------------------------------------------------- */
.jbsp-pro { max-width: 900px; margin: 0 auto; }
.jbsp-pro-hero { text-align: center; margin: 0 0 30px; }
.jbsp-pro-headline { margin: 0 0 10px; }
.jbsp-pro-intro { margin: 0 auto 20px; max-width: 640px; color: #4a5568; font-size: 15px; }

.jbsp-pro-price { margin: 0 0 18px; }
.jbsp-pro-price-value {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--jbsp-accent);
}
.jbsp-pro-price-note { display: block; margin-top: 4px; font-size: 13px; color: #718096; }
.jbsp-pro-cta { margin: 0; }

.jbsp-pro-h2 { margin: 34px 0 14px; }
.jbsp-pro-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.jbsp-pro-group { margin: 0; }
.jbsp-pro-group-title { margin: 0 0 10px; font-size: 15px; }
.jbsp-pro-list { margin: 0; padding: 0; list-style: none; }
.jbsp-pro-list li { margin: 0 0 12px; }
.jbsp-pro-list li:last-child { margin-bottom: 0; }
.jbsp-pro-what { display: block; margin-top: 2px; font-size: 13px; color: #4a5568; }
.jbsp-pro-none { color: #4a5568; }

.jbsp-pro-foot { text-align: center; margin: 34px 0 0; }
.jbsp-pro-foot-note { margin: 0 0 12px; color: #4a5568; font-size: 14px; }

/* Carousel. Slides are stacked and cross-faded rather than slid, so a screenshot is never half off the
   edge of a phone screen. */
.jbsp-pro-gallery { position: relative; margin: 34px 0 0; }
.jbsp-pro-track {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0b0f14;
    border-radius: 12px;
    overflow: hidden;
}
.jbsp-pro-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .35s ease;
}
.jbsp-pro-slide.is-active { opacity: 1; }
.jbsp-pro-shot { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

.jbsp-pro-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.jbsp-pro-nav:hover { background: rgba(0, 0, 0, .75); }
.jbsp-pro-prev { left: 10px; }
.jbsp-pro-next { right: 10px; }

.jbsp-pro-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.jbsp-pro-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cbd5e0;
    cursor: pointer;
}
.jbsp-pro-dot.is-active { background: var(--jbsp-accent); }

/* Respect the visitor's motion preference instead of animating regardless. */
@media (prefers-reduced-motion: reduce) {
    .jbsp-pro-slide { transition: none; }
}