.esm-analytics-filter { margin: 16px 0; }
.esm-analytics-filter select { padding: 6px 30px 6px 10px; }

.esm-summary-cards {
	display: flex;
	gap: 14px;
	margin: 20px 0 30px;
	flex-wrap: wrap;
}
.esm-summary-card {
	flex: 1 1 180px;
	background: #f6f7f7;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 16px 18px;
}
.esm-summary-num { display: block; font-size: 24px; font-weight: 700; color: #222; }
.esm-summary-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #888; margin-top: 4px; }

.esm-analytics-empty { color: #888; padding: 12px 0; }

.esm-analytics-table { margin-bottom: 30px; max-width: 640px; }
.esm-analytics-table th, .esm-analytics-table td { padding: 10px 14px; }

.esm-analytics-daylist { max-width: 720px; }
.esm-analytics-day-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid #f0f0f0;
}
.esm-analytics-day-date { flex: 0 0 90px; font-size: 12.5px; color: #444; }
.esm-analytics-day-bar-track {
	flex: 1 1 auto;
	background: #f0f0f2;
	border-radius: 4px;
	height: 10px;
	overflow: hidden;
	min-width: 0;
}
.esm-analytics-day-bar { height: 100%; background: #2271b1; border-radius: 4px; }
.esm-analytics-day-figures { flex: 0 0 auto; font-size: 12px; color: #666; white-space: nowrap; }

/* Dark mode is Chart Builder-only across the rest of the plugin (see
   the esm-shared dark-mode removal elsewhere) — this page intentionally
   has no dark variant of its own, consistent with Bookings/Confirmation/
   Payment Settings, which also stay permanently light. */

/* ---------- Charts ---------- */
.esm-analytics-wrap { max-width: 1180px; }
.esm-chart-card {
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
	padding: 16px 18px 14px;
	margin-bottom: 18px;
	min-width: 0;
}
.esm-chart-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.esm-chart-card-head h2 { font-size: 15px; margin: 0; }
.esm-chart-card-meta { font-size: 13px; color: #50575e; font-weight: 600; }
.esm-chart-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.esm-chart-grid-2 .esm-chart-card { margin-bottom: 0; }
@media (max-width: 900px) { .esm-chart-grid-2 { grid-template-columns: 1fr; } }

.esm-chart-scroll { overflow-x: auto; }
.esm-chart { display: block; width: 100%; height: auto; }
.esm-chart-trend { min-width: 520px; }
.esm-chart-grid { stroke: #eef0f2; stroke-width: 1; }
.esm-chart-axis { font-size: 11px; fill: #787c82; }
.esm-chart-axis-alt { fill: #b08a12; }
.esm-chart-bar { fill: #2271b1; }
.esm-chart-hit { fill: transparent; }
.esm-chart-col:hover .esm-chart-hit { fill: rgba(34,113,177,.06); }
.esm-chart-col:hover .esm-chart-bar { fill: #135e96; }
.esm-chart-line { fill: none; stroke: #dba617; stroke-width: 2; stroke-linejoin: round; }
.esm-chart-dot { fill: #fff; stroke: #dba617; stroke-width: 1.6; }
.esm-chart-legend { display: flex; gap: 18px; font-size: 12px; color: #50575e; margin-top: 4px; }
.esm-chart-legend i { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.esm-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.esm-chart-donut { width: 170px; flex: 0 0 170px; }
.esm-donut-track { fill: none; stroke: #f0f0f1; stroke-width: 26; }
.esm-donut-big { font-size: 26px; font-weight: 700; fill: #1d2327; }
.esm-donut-small { font-size: 12px; fill: #787c82; }
.esm-donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 160px; min-width: 0; }
.esm-donut-legend li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f3f4f5; font-size: 13px; }
.esm-donut-legend li:last-child { border-bottom: 0; }
.esm-donut-legend i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.esm-donut-legend-label { flex: 1 1 auto; color: #1d2327; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esm-donut-legend-val { color: #50575e; font-weight: 600; white-space: nowrap; }
.esm-donut-legend-val em { font-style: normal; font-weight: 400; color: #8c8f94; margin-left: 4px; }

.esm-progress { margin: 6px 0 14px; }
.esm-progress-head { display: flex; justify-content: space-between; font-size: 13px; color: #50575e; margin-bottom: 6px; }
.esm-progress-track { background: #f0f0f1; height: 12px; border-radius: 6px; overflow: hidden; }
.esm-progress-fill { background: linear-gradient(90deg, #00a32a, #3fbf5a); height: 100%; border-radius: 6px; }
.esm-analytics-table-compact { max-width: none; margin: 0; }
.esm-analytics-table-compact th, .esm-analytics-table-compact td { padding: 7px 10px; font-size: 12.5px; }