/* ==========================================================================
   ZenMarkup Privacy Analytics — Dashboard Styles
   Font: System stack  |  Palette: Soft Premium Light
   ========================================================================== */

/* ---------- Design tokens ---------- */

:root {
	--zmpa-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Primary accent (blue-600) */
	--zmpa-sky-50:  #EFF6FF;
	--zmpa-sky-100: #DBEAFE;
	--zmpa-sky-200: #BFDBFE;
	--zmpa-sky-500: #2563EB;
	--zmpa-sky-600: #1D4ED8;
	--zmpa-sky-700: #1E40AF;
	--zmpa-sky-900: #0F172A;

	/* Neutrals */
	--zmpa-gray-50:  #F8FAFC;
	--zmpa-gray-100: #F1F5F9;
	--zmpa-gray-200: #E2E8F0;
	--zmpa-gray-400: #94A3B8;
	--zmpa-gray-500: #64748B;
	--zmpa-gray-700: #334155;
	--zmpa-gray-900: #0F172A;

	/* Surfaces */
	--zmpa-bg:      #F0F4FA;
	--zmpa-surface:  #FFFFFF;
	--zmpa-surface-hover: #F1F5F9;
	--zmpa-hover-bg: rgba(0, 0, 0, 0.015);

	/* Semantic */
	--zmpa-success: #22C55E;
	--zmpa-warning: #F59E0B;
	--zmpa-danger:  #EF4444;
	--zmpa-secondary: #06B6D4;

	/* Accent alias */
	--zmpa-accent: var(--zmpa-sky-500);

	/* Shared */
	--zmpa-radius: 12px;
	--zmpa-shadow: 0 1px 3px rgba(37, 99, 235, 0.06), 0 6px 16px rgba(37, 99, 235, 0.08);

	/* Spacing scale (4px grid) */
	--zmpa-space-xs: 4px;
	--zmpa-space-sm: 8px;
	--zmpa-space-md: 12px;
	--zmpa-space-base: 16px;
	--zmpa-space-lg: 20px;
	--zmpa-space-xl: 24px;
	--zmpa-space-2xl: 32px;
	--zmpa-space-3xl: 40px;
	--zmpa-section-gap: var(--zmpa-space-xl);

	/* Typography */
	--zmpa-font-size-data: 14px;

	/* List / table row tokens — negative margin aligns text with widget-title */
	--zmpa-row-padding-block: var(--zmpa-space-md);
	--zmpa-row-padding-inline: var(--zmpa-space-base);
	--zmpa-row-margin-inline: calc(-1 * var(--zmpa-space-base));
	--zmpa-row-radius: 0;
	--zmpa-header-padding-block: var(--zmpa-space-sm);
	--zmpa-header-padding-inline: var(--zmpa-space-base);
	--zmpa-header-margin-inline: calc(-1 * var(--zmpa-space-base));
	--zmpa-col-min-width: 90px;
	--zmpa-col-gap: var(--zmpa-space-md);
}

/* ---------- Dashboard wrapper ---------- */

.zmpa-dashboard {
	font-family: var(--zmpa-font);
	color: var(--zmpa-gray-900);
	max-width: 1200px;
	margin-block-start: -8px;
	margin-inline: auto;
	padding-block: var(--zmpa-space-xl);
	padding-inline: var(--zmpa-space-xl);
}

.zmpa-dashboard a:focus,
.zmpa-subpage a:focus {
	outline: none;
	box-shadow: none;
}

/* ---------- Subpage wrapper (Settings, Privacy) ---------- */

.zmpa-subpage {
	font-family: var(--zmpa-font);
	color: var(--zmpa-gray-900);
	padding-block-start: var(--zmpa-space-lg);
	padding-inline-end: var(--zmpa-space-lg);
}

.zmpa-subpage h1 {
	font-family: var(--zmpa-font);
	font-size: 24px;
	font-weight: 400;
	margin: 0;
	margin-block-end: var(--zmpa-space-base);
	padding: 0;
	line-height: 1.3;
}

/* Settings tabs — override WP default gray */
.zmpa-subpage .nav-tab-wrapper {
	border-block-end: 2px solid var(--zmpa-gray-200);
	margin-block-end: var(--zmpa-space-lg);
}

.zmpa-subpage .nav-tab {
	font-family: var(--zmpa-font);
	font-size: 13px;
	font-weight: 500;
	color: var(--zmpa-gray-500);
	border: none;
	background: none;
	padding-block: var(--zmpa-space-sm);
	padding-inline: var(--zmpa-space-md);
	margin: 0;
	margin-block-end: -2px;
}

.zmpa-subpage .nav-tab:hover {
	color: var(--zmpa-gray-900);
	background: none;
}

.zmpa-subpage .nav-tab:focus {
	outline: none;
	box-shadow: none;
}

.zmpa-subpage .nav-tab-active,
.zmpa-subpage .nav-tab-active:hover {
	color: var(--zmpa-sky-500);
	border-block-end: 2px solid var(--zmpa-sky-500);
	background: none;
}

/* Checkbox labels — prevent text wrapping under checkbox */
.zmpa-subpage label {
	display: flex;
	align-items: flex-start;
	gap: var(--zmpa-space-sm);
}

.zmpa-subpage label input[type="checkbox"] {
	margin-block-start: var(--zmpa-space-xs);
	flex-shrink: 0;
}

/* Settings form spacing — override WP default padding (th: 20px, td: 15px) */
.zmpa-subpage .form-table th,
.zmpa-subpage .form-table td {
	padding-block: var(--zmpa-space-md);
	padding-inline-start: 0;
	padding-inline-end: var(--zmpa-space-sm);
}

.zmpa-subpage .form-table th {
	font-weight: 700;
	font-size: 13px;
	vertical-align: top;
}

.zmpa-subpage .form-table td label {
	display: flex;
	align-items: center;
	gap: var(--zmpa-space-sm);
}

.zmpa-subpage .form-table td label input[type="checkbox"] {
	flex-shrink: 0;
	margin: 0;
}

.zmpa-subpage .form-table td .description {
	max-width: 520px;
}

.zmpa-subpage .form-table td .description.zmpa-checkbox-hint {
	margin-inline-start: 24px;
}

.zmpa-subpage .form-table td > p:first-child {
	margin-block-start: 0;
}

/* Settings section divider */
.zmpa-settings-section-divider {
	display: block;
	border-block-start: 1px solid var(--zmpa-gray-200);
	padding-block-start: 16px;
}

/* Checkbox group — vertical spacing */
.zmpa-subpage label + label {
	margin-block-start: 8px;
}

/* Geolocation status block + update button — breathing room.
   Specificity needs `.form-table p.X` to beat WP-admin's `.form-table p.description`. */
.form-table p.zmpa-geo-status {
	margin-block-start: var(--zmpa-space-md);
}
.form-table p.zmpa-geo-update {
	margin-block-start: var(--zmpa-space-sm);
}

/* Settings actions row */
.zmpa-settings-actions {
	display: flex;
	align-items: center;
	gap: var(--zmpa-space-base);
	margin-block: var(--zmpa-space-xl);
}

/* Danger zone */
.zmpa-subpage .zmpa-danger-zone {
	margin-block-start: var(--zmpa-space-3xl);
	border-block-start: 1px solid var(--zmpa-gray-200);
	padding-block-start: var(--zmpa-space-base);
}

.zmpa-subpage .zmpa-danger-zone h2 {
	font-family: var(--zmpa-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--zmpa-danger);
	margin: 0;
	margin-block-end: var(--zmpa-space-sm);
}

.zmpa-subpage .zmpa-danger-zone p {
	font-size: 13px;
	color: var(--zmpa-gray-900);
	margin: 0;
	margin-block-end: var(--zmpa-space-md);
}

.zmpa-subpage .zmpa-btn-danger {
	color: var(--zmpa-danger);
	border: 1px solid var(--zmpa-danger);
	background: none;
	padding-block: var(--zmpa-space-sm);
	padding-inline: var(--zmpa-space-base);
	border-radius: 4px;
	font-family: var(--zmpa-font);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.zmpa-subpage .zmpa-btn-danger:hover {
	background: var(--zmpa-danger);
	color: #fff;
}

/* Full-page background — covers WP admin content area */
#wpcontent,
#wpbody,
#wpbody-content {
	background: var(--zmpa-bg);
}

#wpbody-content {
	min-height: calc(100vh - 32px);
}

#wpfooter {
	background: var(--zmpa-bg);
}

/* ---------- Header ---------- */

.zmpa-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: var(--zmpa-space-md);
	margin-block-end: var(--zmpa-space-lg);
}

.zmpa-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.zmpa-header-left .zmpa-online-indicator {
	position: relative;
	top: 2px;
}

.zmpa-header-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	position: relative;
	top: 2px;
}

.zmpa-header h1 {
	font-family: var(--zmpa-font);
	font-size: 24px;
	font-weight: 700;
	color: var(--zmpa-sky-900);
	margin: 0;
	padding: 0;
	line-height: 1;
}

/* ---------- Online indicator ---------- */

.zmpa-online-indicator {
	display: flex;
	align-items: center;
	gap: var(--zmpa-space-xs);
	line-height: 1;
}

.zmpa-online-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--zmpa-success);
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
	animation: zmpa-pulse 2s ease-in-out infinite;
	position: relative;
	top: 1px;
}

.zmpa-online-count {
	font-family: var(--zmpa-font);
	font-size: 12px;
	font-weight: 500;
	color: var(--zmpa-gray-400);
	line-height: 1;
}

.zmpa-online-label {
	font-family: var(--zmpa-font);
	font-size: 12px;
	font-weight: 400;
	color: var(--zmpa-gray-400);
	line-height: 1;
}

@keyframes zmpa-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
	}
	50% {
		box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
	}
}

/* ---------- Date range picker (dropdown) ---------- */

.zmpa-date-range {
	position: relative;
}

/* Trigger button */
.zmpa-dp-trigger {
	font-family: var(--zmpa-font);
	font-size: 13px;
	font-weight: 500;
	padding-block: var(--zmpa-space-sm);
	padding-inline: var(--zmpa-space-md);
	border: 1px solid var(--zmpa-gray-200);
	border-radius: 6px;
	background: var(--zmpa-surface);
	color: var(--zmpa-gray-700);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--zmpa-space-sm);
	transition: all 0.15s ease;
}

.zmpa-dp-trigger:hover,
.zmpa-dp-trigger-open {
	border-color: var(--zmpa-sky-200);
	color: var(--zmpa-sky-600);
}

.zmpa-dp-arrow {
	font-size: 12px;
	opacity: 0.5;
	transition: transform 0.15s ease;
}

.zmpa-dp-trigger-open .zmpa-dp-arrow {
	transform: rotate(180deg);
}

/* Dropdown panel */
.zmpa-dp-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 200;
	background: var(--zmpa-surface);
	border: 1px solid var(--zmpa-gray-200);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	min-width: 240px;
	padding-block: var(--zmpa-space-sm);
	display: none;
}

.zmpa-dp-dropdown.zmpa-dp-open {
	display: block;
}

/* Preset items */
.zmpa-dp-item {
	font-family: var(--zmpa-font);
	font-size: 13px;
	font-weight: 500;
	display: block;
	width: 100%;
	text-align: left;
	padding-block: var(--zmpa-space-sm);
	padding-inline: var(--zmpa-space-base);
	border: none;
	background: none;
	color: var(--zmpa-gray-700);
	cursor: pointer;
	transition: background 0.1s ease;
}

.zmpa-dp-item:hover {
	background: var(--zmpa-sky-50);
	color: var(--zmpa-sky-600);
}

.zmpa-dp-item.zmpa-dp-active {
	color: var(--zmpa-sky-600);
	background: var(--zmpa-sky-50);
	font-weight: 700;
}

/* Divider */
.zmpa-dp-divider {
	height: 1px;
	background: var(--zmpa-gray-100);
	margin-block: var(--zmpa-space-sm);
}

/* Custom range section */
.zmpa-dp-custom-label {
	font-family: var(--zmpa-font);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--zmpa-gray-400);
	padding-block: var(--zmpa-space-sm) var(--zmpa-space-xs);
	padding-inline: var(--zmpa-space-base);
}

.zmpa-dp-custom-row {
	display: flex;
	align-items: center;
	gap: var(--zmpa-space-sm);
	padding-block: var(--zmpa-space-xs) var(--zmpa-space-sm);
	padding-inline: var(--zmpa-space-base);
}

.zmpa-dp-input {
	font-family: var(--zmpa-font);
	font-size: 12px;
	padding-block: var(--zmpa-space-xs);
	padding-inline: var(--zmpa-space-sm);
	cursor: pointer;
	border: 1px solid var(--zmpa-gray-200);
	border-radius: var(--zmpa-space-sm);
	color: var(--zmpa-gray-700);
	background: var(--zmpa-surface);
	width: 100%;
	min-width: 0;
}

.zmpa-dp-input::-webkit-calendar-picker-indicator {
	cursor: pointer;
}

.zmpa-dp-input:focus {
	outline: none;
	border-color: var(--zmpa-sky-500);
	box-shadow: 0 0 0 2px var(--zmpa-sky-100);
}

.zmpa-dp-sep {
	color: var(--zmpa-gray-400);
	font-size: 12px;
	flex-shrink: 0;
}

.zmpa-dp-apply {
	font-family: var(--zmpa-font);
	font-size: 12px;
	font-weight: 700;
	display: block;
	width: calc(100% - 2 * var(--zmpa-space-base));
	margin-block-end: var(--zmpa-space-sm);
	margin-inline: var(--zmpa-space-base);
	padding-block: var(--zmpa-space-sm);
	background: var(--zmpa-sky-600);
	color: #fff;
	border: none;
	border-radius: var(--zmpa-space-xs);
	cursor: pointer;
	transition: background 0.15s ease;
}

.zmpa-dp-apply:hover {
	background: var(--zmpa-sky-700);
}

/* ---------- Tabs ---------- */

.zmpa-tabs {
	display: flex;
	align-items: center;
	gap: 0;
	border-block-end: 1px solid var(--zmpa-gray-200);
	margin-block-end: var(--zmpa-section-gap);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;           /* Firefox */
	-ms-overflow-style: none;        /* IE/Edge */
}

.zmpa-tabs::-webkit-scrollbar {
	display: none;                   /* Chrome/Safari */
}

.zmpa-tab {
	font-family: var(--zmpa-font);
	font-size: 14px;
	font-weight: 500;
	padding-block: var(--zmpa-space-md);
	padding-inline: var(--zmpa-space-base);
	border: none;
	border-block-end: 2px solid transparent;
	margin-block-end: -1px;
	background: none;
	color: var(--zmpa-gray-500);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
	flex-shrink: 0;
}

.zmpa-tab svg {
	width: 16px;
	height: 16px;
	vertical-align: -2px;
	margin-inline-end: var(--zmpa-space-sm);
}

.zmpa-tab:first-child {
	padding-inline-start: 0;
}

.zmpa-tab:hover {
	color: var(--zmpa-sky-600);
}

.zmpa-tab.zmpa-tab-active {
	color: var(--zmpa-sky-600);
	border-block-end-color: var(--zmpa-sky-500);
	font-weight: 700;
	text-shadow: none;
}

.zmpa-tab-panel {
	display: none;
}

.zmpa-tab-panel.zmpa-tab-panel-active {
	display: block;
}

/* Section wrapper — consistent spacing between logical groups */
.zmpa-section {
	display: flex;
	flex-direction: column;
	margin-block-end: var(--zmpa-space-3xl);
}

.zmpa-section:last-child {
	margin-block-end: 0;
}

.zmpa-tab-panel[data-tab="traffic"],
.zmpa-tab-panel[data-tab="behavior"],
.zmpa-tab-panel[data-tab="geography"] {
	padding-block-start: 8px;
}

.zmpa-tab-panel[data-tab="behavior"] .zmpa-section {
	margin-block-end: var(--zmpa-space-xl);
}

.zmpa-tab-panel[data-tab="behavior"] .zmpa-section:last-child {
	margin-block-end: 0;
}

/* ---------- Export CSV button (inside .zmpa-toolbar) ---------- */

.zmpa-export-btn {
	display: flex;
	align-items: center;
	gap: var(--zmpa-space-xs);
	height: 32px;
	padding-inline: var(--zmpa-space-md);
	border: none;
	border-radius: 6px;
	background: none;
	color: var(--zmpa-gray-400);
	font-family: var(--zmpa-font);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.zmpa-export-btn svg {
	width: 14px;
	height: 14px;
}

.zmpa-export-btn:hover {
	color: var(--zmpa-sky-500);
	background: var(--zmpa-sky-50);
}

/* ---------- Loading state ---------- */

.zmpa-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	gap: var(--zmpa-space-md);
}

.zmpa-loading p {
	font-family: var(--zmpa-font);
	font-size: 14px;
	color: var(--zmpa-gray-500);
	margin: 0;
}

/* ---------- Content (hidden until JS loads) ---------- */

.zmpa-content {
	display: none;
	transition: opacity 0.15s ease;
}

.zmpa-content.zmpa-updating {
	opacity: 0.5;
	pointer-events: none;
}

/* ---------- Chart container + toggle ---------- */

.zmpa-widget-body canvas {
	width: 100%;
	height: 300px;
	display: block;
}

/* ---------- Chart block (metric tabs + line chart) ---------- */

.zmpa-chart-block {
	background: var(--zmpa-surface);
	border-radius: var(--zmpa-radius);
	box-shadow: var(--zmpa-shadow);
	overflow: hidden;
	margin-block-end: var(--zmpa-section-gap);
}

.zmpa-metric-tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-block-end: 1px solid var(--zmpa-gray-200);
}

.zmpa-chart-body {
	padding-block: var(--zmpa-space-lg) var(--zmpa-space-base);
	padding-inline: 0;
}

/* ---------- Line chart hover tooltip ---------- */

.zmpa-chart-tooltip {
	position: absolute;
	pointer-events: none;
	background: var(--zmpa-sky-900);
	color: #fff;
	font-family: var(--zmpa-font);
	font-size: 13px;
	font-weight: 700;
	padding-block: var(--zmpa-space-sm);
	padding-inline: var(--zmpa-space-md);
	border-radius: 4px;
	white-space: nowrap;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.zmpa-chart-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-block-start-color: var(--zmpa-sky-900);
}

/* ---------- Pie chart tooltip (tap on segment) ---------- */

.zmpa-pie-tooltip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--zmpa-sky-900);
	color: #fff;
	font-family: var(--zmpa-font);
	font-size: 12px;
	font-weight: 700;
	padding-block: var(--zmpa-space-sm);
	padding-inline: var(--zmpa-space-md);
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 10;
}

/* ---------- Pie chart + legend ---------- */

#zmpa-pie-chart > .zmpa-widget-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-block: var(--zmpa-space-sm);
	padding-inline: var(--zmpa-space-base);
}

.zmpa-pie-legend {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: var(--zmpa-space-lg);
	margin-block-start: 6px;
}

.zmpa-pie-legend-row {
	display: flex;
	align-items: center;
	gap: 6px;
	opacity: 0;
	transition: opacity 200ms ease;
}

.zmpa-pie-legend-visible .zmpa-pie-legend-row {
	opacity: 1;
}

.zmpa-pie-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.zmpa-pie-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--zmpa-gray-500);
}

.zmpa-pie-count {
	font-size: 13px;
	font-weight: 700;
	color: var(--zmpa-gray-900);
}

/* ---------- Metrics row ---------- */

.zmpa-metric-card {
	font-family: var(--zmpa-font);
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding-block: var(--zmpa-space-base);
	padding-inline: var(--zmpa-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--zmpa-space-xs);
	cursor: pointer;
	text-align: left;
	outline: none;
}

.zmpa-metric-card:not(:last-child) {
	border-inline-end: 1px solid var(--zmpa-gray-200);
}

.zmpa-metric-card:hover {
	background: var(--zmpa-hover-bg);
}

.zmpa-metric-card:hover .zmpa-metric-label {
	color: var(--zmpa-sky-900);
}

.zmpa-metric-card-active .zmpa-metric-label {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--zmpa-accent);
}

.zmpa-metric-row {
	display: flex;
	align-items: baseline;
	gap: var(--zmpa-space-sm);
}

.zmpa-badge {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	cursor: default;
	color: var(--zmpa-gray-500);
	white-space: nowrap;
}

.zmpa-badge-good {
	color: var(--zmpa-success);
}

.zmpa-badge-bad {
	color: var(--zmpa-danger);
}

.zmpa-badge svg {
	width: 14px;
	height: 14px;
	vertical-align: -2px;
}

.zmpa-metric-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--zmpa-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.zmpa-metric-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--zmpa-sky-900);
	line-height: 1.2;
}

/* ---------- Full-width widget (map) ---------- */

.zmpa-widget-full {
	margin-block-end: 0;
}

.zmpa-widget-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--zmpa-space-base) var(--zmpa-space-md);
	padding-inline: var(--zmpa-space-base);
}

.zmpa-widget-header-bar .zmpa-widget-title {
	padding: 0;
	border-block-end: none;
}


/* ---------- Clickable table rows ---------- */

.zmpa-clickable-row {
	cursor: pointer;
}

.zmpa-clickable-row:hover {
	background: var(--zmpa-surface-hover);
}

/* ---------- Section heading (divider within a tab) ---------- */

.zmpa-section-heading {
	font-family: var(--zmpa-font);
	font-size: 20px;
	font-weight: 700;
	color: var(--zmpa-gray-900);
	letter-spacing: 0.01em;
	margin: 0;
	margin-block-end: var(--zmpa-space-lg);
}

/* ---------- Grid layout ---------- */

.zmpa-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--zmpa-space-base);
}

.zmpa-grid + .zmpa-grid {
	margin-block-start: var(--zmpa-space-lg);
}

.zmpa-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.zmpa-column > .zmpa-widget {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.zmpa-column > .zmpa-widget > .zmpa-widget-body {
	flex: 1;
}

/* ---------- Widget cards ---------- */

.zmpa-widget {
	background: var(--zmpa-surface);
	border: none;
	border-radius: var(--zmpa-radius);
	box-shadow: var(--zmpa-shadow);
	overflow: hidden;
}

.zmpa-widget-title {
	font-family: var(--zmpa-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--zmpa-gray-900);
	margin: 0;
	padding-block: var(--zmpa-space-base) var(--zmpa-space-md);
	padding-inline: var(--zmpa-space-base);
}

.zmpa-widget-title svg {
	display: none;
}

.zmpa-widget-body {
	padding-block: var(--zmpa-space-base);
	padding-inline: var(--zmpa-space-base);
}

/* ---------- Widget sub-tabs (Campaigns) ---------- */

.zmpa-widget-tabs {
	display: flex;
	gap: var(--zmpa-space-lg);
	padding-inline: var(--zmpa-space-base);
	position: relative;
}

.zmpa-widget-tabs::after {
	content: '';
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: var(--zmpa-space-base);
	inset-inline-end: var(--zmpa-space-base);
	height: 1px;
	background: var(--zmpa-gray-200);
}

.zmpa-widget-tab {
	padding-block: var(--zmpa-space-sm);
	padding-inline: 0;
	font-family: var(--zmpa-font);
	font-size: 13px;
	font-weight: 500;
	color: var(--zmpa-gray-400);
	background: none;
	border: none;
	border-block-end: 2px solid transparent;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.zmpa-widget-tab:hover {
	color: var(--zmpa-gray-600);
}

.zmpa-widget-tab-active {
	color: var(--zmpa-accent);
	border-block-end-color: var(--zmpa-accent);
}

/* Hide list header inside tabbed widgets — the active tab already labels the dimension */
.zmpa-widget-tabs + .zmpa-widget-body .zmpa-list-header {
	display: none;
}

/* Spacing between sub-tabs and list content */
.zmpa-widget-tabs + .zmpa-widget-body .zmpa-list {
	margin-block-start: 4px;
}

/* ---------- Lists (top pages, sources, countries) ---------- */

.zmpa-widget-body:has(.zmpa-list) {
	padding-block: var(--zmpa-space-md);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.zmpa-list {
	font-size: var(--zmpa-font-size-data);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.zmpa-list .zmpa-pagination {
	margin-block-start: auto;
}

.zmpa-list-header {
	display: flex;
	font-weight: 500;
	color: var(--zmpa-gray-400);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding-block: var(--zmpa-header-padding-block);
	padding-inline: var(--zmpa-header-padding-inline);
	margin-inline: var(--zmpa-header-margin-inline);
}

.zmpa-list-header span:first-child {
	flex: 1;
	min-width: 0;
}

.zmpa-list-header span:not(:first-child) {
	width: var(--zmpa-col-min-width);
	text-align: right;
	flex-shrink: 0;
	margin-inline-start: var(--zmpa-col-gap);
}

.zmpa-list-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: var(--zmpa-row-padding-block);
	padding-inline: var(--zmpa-row-padding-inline);
	margin-inline: var(--zmpa-row-margin-inline);
	border-radius: var(--zmpa-row-radius);
	transition: background 0.15s;
}

.zmpa-list-row:hover {
	background: var(--zmpa-surface-hover);
}

.zmpa-list-name {
	color: var(--zmpa-gray-900);
	font-weight: 400;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zmpa-list-hint {
	color: var(--zmpa-gray-400);
	font-weight: 400;
}

.zmpa-event-icon {
	display: inline-flex;
	align-items: center;
	margin-inline-end: var(--zmpa-space-sm);
	color: var(--zmpa-gray-400);
	vertical-align: middle;
}

.zmpa-event-icon svg {
	width: 14px;
	height: 14px;
}

.zmpa-list-count {
	color: var(--zmpa-gray-900);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	width: var(--zmpa-col-min-width);
	text-align: right;
	margin-inline-start: var(--zmpa-col-gap);
}

/* ---------- List pagination ---------- */

.zmpa-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--zmpa-space-md);
	padding-block: var(--zmpa-space-md);
	padding-inline: var(--zmpa-space-base);
}

.zmpa-pagination-btn {
	font-family: var(--zmpa-font);
	font-size: 12px;
	font-weight: 500;
	color: var(--zmpa-accent);
	background: none;
	border: 1px solid var(--zmpa-accent);
	border-radius: 4px;
	padding-block: var(--zmpa-space-xs);
	padding-inline: var(--zmpa-space-md);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.zmpa-pagination-btn:hover:not(:disabled) {
	background: var(--zmpa-surface-hover);
	border-color: var(--zmpa-accent);
}

.zmpa-pagination-btn:disabled {
	color: var(--zmpa-gray-400);
	border-color: var(--zmpa-gray-200);
	cursor: default;
	opacity: 0.5;
}

.zmpa-pagination-btn svg {
	width: 14px;
	height: 14px;
	vertical-align: -2px;
}

.zmpa-pagination-info {
	font-size: 12px;
	color: var(--zmpa-gray-500);
	font-variant-numeric: tabular-nums;
}

/* Journey paths in zmpa-list need wrapping instead of ellipsis */
.zmpa-list-name.zmpa-journey-path {
	white-space: normal;
	overflow: visible;
}

/* Multi-column widgets: wider columns for longer headers */
[data-el="user-journeys"] .zmpa-list-header span:not(:first-child),
[data-el="user-journeys"] .zmpa-list-count,
[data-el="dead-pages"] .zmpa-list-header span:not(:first-child),
[data-el="dead-pages"] .zmpa-list-count {
	width: 120px;
}

/* ---------- Map controls ---------- */

.zmpa-map-controls {
	display: flex;
	gap: var(--zmpa-space-xs);
}

.zmpa-map-btn {
	font-family: var(--zmpa-font);
	font-size: 16px;
	font-weight: 700;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--zmpa-gray-200);
	border-radius: 6px;
	background: var(--zmpa-surface);
	color: var(--zmpa-gray-700);
	cursor: pointer;
	transition: all 0.15s ease;
	line-height: 1;
	padding: 0;
}

.zmpa-map-btn svg {
	width: 16px;
	height: 16px;
}

.zmpa-map-btn:hover {
	border-color: var(--zmpa-sky-200);
	color: var(--zmpa-sky-600);
	background: var(--zmpa-sky-50);
}

/* ---------- Map container ---------- */

.zmpa-map-container {
	padding: 16px;
	position: relative;
	overflow: hidden;
	cursor: grab;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background:
		repeating-linear-gradient(
			0deg,
			rgba(37, 99, 235, 0.09) 0px,
			transparent 1px,
			transparent 22px
		),
		repeating-linear-gradient(
			90deg,
			rgba(37, 99, 235, 0.05) 0px,
			transparent 1px,
			transparent 22px
		),
		#fff;
}

.zmpa-map-container.zmpa-map-dragging {
	cursor: grabbing;
}

.zmpa-map-container svg {
	width: 100%;
	height: auto;
	display: block;
	transform-origin: 0 0;
	transition: transform 0.1s ease;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04));
}

.zmpa-map-container svg.zmpa-map-panning {
	transition: none;
}

/* Map tooltip */
.zmpa-map-tooltip {
	position: absolute;
	pointer-events: none;
	background: var(--zmpa-gray-900);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding-block: var(--zmpa-space-sm);
	padding-inline: var(--zmpa-space-md);
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 100;
}

.zmpa-map-tooltip.zmpa-visible {
	opacity: 1;
}

/* Country path styling */
.zmpa-map-container path {
	fill: var(--zmpa-gray-200);
	stroke: #fff;
	stroke-width: 0.4;
	transition: fill 0.2s ease, opacity 0.2s ease;
}

.zmpa-map-container path[data-name] {
	cursor: grab;
}

.zmpa-map-container path.zmpa-country-active {
	cursor: grab;
}

.zmpa-map-container.zmpa-map-dragging path[data-name],
.zmpa-map-container.zmpa-map-dragging path.zmpa-country-active {
	cursor: grabbing;
}

.zmpa-map-container path[data-name]:hover {
	opacity: 0.85;
}

/* Map legend — centered on the bottom edge so it sits between the
   left-corner DB-IP attribution and the right-corner visitor stats. */
.zmpa-map-legend {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	pointer-events: none;
}

.zmpa-map-legend-bar {
	width: 120px;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--zmpa-gray-200), #C7D9F0, #A8C4E8, #89AFE0, #6B9AD8, #4D85D0);
}

.zmpa-map-legend-labels {
	display: flex;
	justify-content: space-between;
	margin-block-start: 4px;
	font-family: var(--zmpa-font);
	font-size: 12px;
	color: var(--zmpa-gray-500);
}

/* Map Ctrl+scroll hint (in header bar) */
.zmpa-map-hint {
	font-family: var(--zmpa-font);
	font-size: 12px;
	color: var(--zmpa-gray-500);
	margin-inline-end: auto;
}

/* Map stats (visitors · pageviews) — bottom right, aligned with legend labels */
.zmpa-map-stats {
	position: absolute;
	bottom: 16px;
	right: 20px;
	font-family: var(--zmpa-font);
	font-size: 12px;
	font-weight: 400;
	color: var(--zmpa-gray-500);
}

.zmpa-map-hint kbd {
	font-family: var(--zmpa-font);
	font-size: 12px;
	font-weight: 700;
	padding-block: var(--zmpa-space-xs);
	padding-inline: var(--zmpa-space-sm);
	background: var(--zmpa-gray-100);
	border: 1px solid var(--zmpa-gray-200);
	border-radius: 4px;
	color: var(--zmpa-gray-500);
	box-shadow: 0 1px 0 var(--zmpa-gray-200);
}

/* ---------- Auto Insights ---------- */

.zmpa-insight-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--zmpa-gray-700);
	padding-block: var(--zmpa-space-sm);
}

.zmpa-insight-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.zmpa-insight-icon svg {
	display: block;
	width: 12px;
	height: 12px;
}

.zmpa-insight-positive .zmpa-insight-icon {
	background: #d1fae5;
	color: #059669;
}

.zmpa-insight-warning .zmpa-insight-icon {
	background: #fef3c7;
	color: #d97706;
}

.zmpa-insight-alert .zmpa-insight-icon {
	background: #fee2e2;
	color: #dc2626;
}

/* ---------- Dead Pages ---------- */

/* ---------- User Journeys ---------- */

.zmpa-journey-path {
	font-size: var(--zmpa-font-size-data);
	line-height: 1.8;
}

.zmpa-journey-step {
	white-space: nowrap;
}

.zmpa-journey-arrow {
	display: inline-block;
	color: var(--zmpa-accent);
	opacity: 0.9;
	margin-inline: var(--zmpa-space-sm);
	vertical-align: middle;
}

.zmpa-journey-arrow svg {
	width: 16px;
	height: 16px;
	vertical-align: -3px;
}

/* Collapsible journeys */
.zmpa-journey-dots {
	color: var(--zmpa-gray-400);
	letter-spacing: 2px;
}

.zmpa-journey-full {
	display: none;
}

.zmpa-journey-expanded .zmpa-journey-preview {
	display: none;
}

.zmpa-journey-expanded .zmpa-journey-full {
	display: inline;
}

.zmpa-journey-toggle {
	background: none;
	color: var(--zmpa-accent);
	border: none;
	padding: 0;
	margin-inline-start: 8px;
	font-size: 12px;
	font-family: var(--zmpa-font);
	cursor: pointer;
	vertical-align: middle;
	opacity: 0.7;
	white-space: nowrap;
}

.zmpa-journey-toggle:hover {
	opacity: 1;
}

.zmpa-journey-toggle svg {
	width: 12px;
	height: 12px;
	vertical-align: -2px;
	margin-inline-end: 1px;
}


/* ---------- Overview widget grid (3 columns) ---------- */

.zmpa-overview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--zmpa-space-base);
}

.zmpa-overview-grid > .zmpa-widget {
	margin-block-end: 0;
	display: flex;
	flex-direction: column;
}

.zmpa-overview-grid > .zmpa-widget > .zmpa-widget-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ---------- Device card (overview) ---------- */

.zmpa-device-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.zmpa-device-item {
	display: flex;
	align-items: center;
	gap: var(--zmpa-space-md);
	padding-block: var(--zmpa-space-md);
	border-block-end: 1px solid var(--zmpa-gray-100);
}

.zmpa-device-item:last-child {
	border-block-end: none;
}

.zmpa-device-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--zmpa-sky-50);
	color: var(--zmpa-sky-500);
	flex-shrink: 0;
}

.zmpa-device-icon svg {
	width: 18px;
	height: 18px;
}

.zmpa-device-info {
	flex-grow: 1;
	min-width: 0;
}

.zmpa-device-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 6px;
}

.zmpa-device-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--zmpa-gray-700);
}

.zmpa-device-pct {
	font-size: 13px;
	font-weight: 400;
	color: var(--zmpa-gray-700);
	min-width: 48px;
	text-align: right;
}

.zmpa-device-bar-track {
	height: 6px;
	border-radius: 4px;
	background: var(--zmpa-sky-50);
}

.zmpa-device-bar-fill {
	height: 100%;
	border-radius: 4px;
	background: var(--zmpa-sky-500);
	transition: width 0.4s ease;
}

/* ---------- Peak Hours ---------- */

.zmpa-peak-hours {
	display: flex;
	flex-direction: column;
}

.zmpa-ph-chart {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 140px;
	padding-block-start: 16px;
}

.zmpa-ph-col {
	flex: 1;
	display: flex;
	align-items: flex-end;
	height: 100%;
	cursor: pointer;
}

.zmpa-ph-bar {
	width: 100%;
	border-radius: 4px 4px 0 0;
	background: var(--zmpa-sky-50, #f0f9ff);
	transition: height 0.35s ease-out, background 0.15s ease;
}

/* Intensity gradient: 5 opacity levels of accent blue */
.zmpa-ph-bar[data-intensity="0"] { background: rgba(37, 99, 235, 0.15); }
.zmpa-ph-bar[data-intensity="1"] { background: rgba(37, 99, 235, 0.30); }
.zmpa-ph-bar[data-intensity="2"] { background: rgba(37, 99, 235, 0.50); }
.zmpa-ph-bar[data-intensity="3"] { background: rgba(37, 99, 235, 0.70); }
.zmpa-ph-bar[data-intensity="4"] { background: rgba(37, 99, 235, 0.90); }

.zmpa-ph-col:hover .zmpa-ph-bar {
	filter: brightness(0.9);
}

.zmpa-ph-tooltip {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--zmpa-gray-800, #1e293b);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding-block: var(--zmpa-space-xs);
	padding-inline: var(--zmpa-space-md);
	border-radius: var(--zmpa-space-sm);
	white-space: nowrap;
	pointer-events: none;
	z-index: 10;
	line-height: 1.4;
}

.zmpa-ph-xaxis {
	display: flex;
	gap: 2px;
	padding-block-start: var(--zmpa-space-xs);
}

.zmpa-ph-xlabel {
	flex: 1;
	font-size: 12px;
	color: var(--zmpa-gray-400, #94a3b8);
	text-align: center;
	line-height: 1;
	min-height: 12px;
}

/* (Exit Intelligence bars removed — now uses standard list) */

/* ---------- Empty state ---------- */

.zmpa-empty {
	text-align: center;
	padding-block: var(--zmpa-space-2xl);
	padding-inline: var(--zmpa-space-base);
	color: var(--zmpa-gray-400);
	font-size: 13px;
}

/* ---------- Footer ---------- */

.zmpa-footer {
	margin-block-start: 40px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--zmpa-gray-400);
}

.zmpa-footer-sep {
	opacity: 0.5;
}

.zmpa-footer a {
	color: var(--zmpa-gray-900);
	text-decoration: underline;
	font-weight: 500;
}

.zmpa-footer a:hover {
	color: var(--zmpa-sky-600);
}


/* ---------- Geography tab attribution (CC-BY 4.0 requirement) ---------- */
/* Sits in the bottom-left corner of the map widget, mirroring .zmpa-map-stats
   in the bottom-right. Muted by design — the requirement is visibility, not
   prominence. Specificity (.zmpa-map-container .zmpa-attribution a) overrides
   WP admin's default blue link colour. */

.zmpa-attribution {
	position: absolute;
	bottom: 16px;
	left: 20px;
	margin: 0;
	font-family: var(--zmpa-font);
	font-size: 12px;
	font-weight: 400;
	color: var(--zmpa-gray-500);
}

.zmpa-map-container .zmpa-attribution a {
	color: var(--zmpa-gray-500);
	text-decoration: underline;
	text-decoration-color: var(--zmpa-gray-400);
	text-underline-offset: 2px;
}

.zmpa-map-container .zmpa-attribution a:hover {
	color: var(--zmpa-gray-700);
	text-decoration-color: var(--zmpa-gray-500);
}


/* ---------- Privacy page ---------- */

.zmpa-privacy {
	max-width: 720px;
	background: var(--zmpa-surface);
	border-radius: var(--zmpa-radius);
	box-shadow: var(--zmpa-shadow);
	padding-block: var(--zmpa-space-2xl);
	padding-inline: var(--zmpa-space-2xl);
}

.zmpa-privacy h2 {
	font-size: 20px;
	font-weight: 700;
	margin-block: 40px 16px;
	margin-inline: 0;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--zmpa-gray-200);
	color: var(--zmpa-gray-900);
}

.zmpa-privacy > h2:first-child {
	border-block-start: none;
	margin-block-start: 0;
	padding-block-start: 0;
}

.zmpa-privacy p {
	font-size: 16px;
	color: var(--zmpa-gray-700);
	line-height: 1.7;
	margin: 0;
	margin-block-end: 12px;
}

.zmpa-privacy ul {
	list-style: disc;
	margin-block: 12px;
	margin-inline-start: 20px;
}

.zmpa-privacy li {
	font-size: 16px;
	color: var(--zmpa-gray-700);
	line-height: 1.7;
	margin-block-end: 8px;
}

.zmpa-privacy li::marker {
	color: var(--zmpa-gray-400);
}

.zmpa-privacy li strong {
	color: var(--zmpa-gray-900);
}

.zmpa-privacy-badge {
	display: inline-block;
	background: var(--zmpa-sky-50);
	color: var(--zmpa-sky-600);
	font-size: 12px;
	font-weight: 700;
	padding-block: var(--zmpa-space-xs);
	padding-inline: var(--zmpa-space-md);
	border-radius: 6px;
	margin-block-end: var(--zmpa-space-lg);
}

/* ---------- Code blocks (docs page) ---------- */

.zmpa-privacy pre {
	background: var(--zmpa-gray-50);
	border: 1px solid var(--zmpa-gray-200);
	border-radius: 8px;
	padding-block: var(--zmpa-space-base);
	padding-inline: var(--zmpa-space-lg);
	margin-block: var(--zmpa-space-md) var(--zmpa-space-lg);
	overflow-x: auto;
}

.zmpa-privacy code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 14px;
	background: var(--zmpa-gray-50);
	border: 1px solid var(--zmpa-gray-200);
	border-radius: 4px;
	padding-block: var(--zmpa-space-xs);
	padding-inline: var(--zmpa-space-sm);
	color: var(--zmpa-gray-700);
}

.zmpa-privacy pre code {
	font-size: 14px;
	line-height: 1.7;
	color: var(--zmpa-gray-700);
	white-space: pre;
	background: none;
	border: none;
	padding: 0;
	border-radius: 0;
}

.zmpa-privacy h3 {
	font-size: 18px;
	font-weight: 700;
	margin-block: 32px 12px;
	margin-inline: 0;
	color: var(--zmpa-gray-900);
}

/* ---------- User Journeys: thin scrollbar (all viewports) ---------- */

[data-el="user-journeys"] .zmpa-widget-body {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--zmpa-gray-200) transparent;
}

[data-el="user-journeys"] .zmpa-widget-body::-webkit-scrollbar {
	height: 6px;
}

[data-el="user-journeys"] .zmpa-widget-body::-webkit-scrollbar-track {
	background: transparent;
}

[data-el="user-journeys"] .zmpa-widget-body::-webkit-scrollbar-thumb {
	background: var(--zmpa-gray-200);
	border-radius: 4px;
}

/* ==========================================================================
   Responsive — Desktop First, ordered large → small
   Breakpoints: 960px (tablet) → 600px (mobile) → 480px (small mobile)
   ========================================================================== */

/* ---------- ≤960px — Tablet ---------- */

@media screen and (max-width: 960px) {
	.zmpa-overview-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.zmpa-metric-tabs {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Horizontal divider between rows in 2×2 metric grid */
	.zmpa-metric-card:nth-child(-n+2) {
		border-block-end: 1px solid var(--zmpa-gray-200);
	}

	/* Remove right border from even cards (end of row) */
	.zmpa-metric-card:nth-child(2n) {
		border-inline-end: none;
	}

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

	.zmpa-section {
		margin-block-end: var(--zmpa-space-2xl);
	}

	/* Behavior & Geography: tighter gaps on mobile (match grid gap) */
	.zmpa-tab-panel[data-tab="behavior"] .zmpa-section,
	.zmpa-tab-panel[data-tab="geography"] .zmpa-section {
		margin-block-end: var(--zmpa-space-base);
	}

	.zmpa-tab-panel[data-tab="behavior"] .zmpa-section:last-child,
	.zmpa-tab-panel[data-tab="geography"] .zmpa-section:last-child {
		margin-block-end: 0;
	}

	.zmpa-section-heading {
		margin-block-end: 12px;
	}
}

/* ---------- ≤600px — Mobile ---------- */

@media screen and (max-width: 600px) {

	/* Layout */
	.zmpa-dashboard {
		padding-inline: var(--zmpa-space-md);
	}

	.zmpa-online-label {
		display: none;
	}

	.zmpa-tab svg {
		display: none;
	}

	/* Cards — compact padding */
	.zmpa-widget-title {
		padding-inline: var(--zmpa-space-md);
	}

	.zmpa-widget-body {
		padding-block: var(--zmpa-space-md);
		padding-inline: var(--zmpa-space-md);
	}

	.zmpa-metric-value {
		font-size: 24px;
	}

	.zmpa-chart-body {
		padding-inline: var(--zmpa-space-sm);
	}

	.zmpa-metric-card {
		padding-inline: var(--zmpa-space-md);
	}

	.zmpa-list .zmpa-pagination {
		margin-block-start: 0;
	}

	.zmpa-pagination-btn {
		min-height: 44px;
		padding-block: var(--zmpa-space-md);
	}

	.zmpa-header {
		flex-wrap: wrap;
	}

	.zmpa-header-actions {
		width: 100%;
		justify-content: space-between;
	}

	.zmpa-header-actions .zmpa-export-btn {
		padding-inline-start: 0;
	}

	.zmpa-dp-trigger {
		min-height: 44px;
		padding-block: var(--zmpa-space-md);
		font-size: 12px;
	}

	/* User Journeys: force horizontal scroll on mobile */
	[data-el="user-journeys"] .zmpa-list {
		min-width: 600px;
	}

	/* Map: compact */
	.zmpa-map-container {
		min-height: 240px;
		padding: 8px;
	}

	.zmpa-map-stats {
		bottom: 8px;
		left: 0;
		right: 0;
		text-align: center;
	}

	.zmpa-map-legend {
		display: none;
	}

	.zmpa-widget-header-bar {
		display: none;
	}

	/* Settings: stack form table */
	.zmpa-subpage {
		padding-block-start: var(--zmpa-space-md);
		padding-inline-end: var(--zmpa-space-md);
	}

	.zmpa-subpage .form-table th,
	.zmpa-subpage .form-table td {
		display: block;
		width: 100%;
		padding-block: 8px;
	}

	.zmpa-subpage .form-table th {
		padding-block-end: 0;
	}

	.zmpa-subpage .nav-tab {
		padding-block: var(--zmpa-space-sm);
		padding-inline: var(--zmpa-space-md);
		font-size: 12px;
	}
}

/* ---------- ≤480px — Small mobile ---------- */

@media screen and (max-width: 480px) {
	.zmpa-overview-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- ≤380px — Narrow mobile ---------- */

@media screen and (max-width: 380px) {
	.zmpa-header h1 {
		font-size: 22px;
	}
}