/* Shared dashboard chrome: fonts, base text, header, filter row, cards, stat tiles, tables, motion. */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/Poppins-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
}

html {
	background: var(--theme-surface-page);
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--global-font-family-sans);
	font-size: var(--global-font-size-16);
	line-height: var(--global-line-height-text);
	color: var(--theme-text-default);
	-webkit-font-smoothing: antialiased;
}

button,
input,
select {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: var(--global-size-unit-2) solid var(--theme-focus-ring);
	outline-offset: var(--global-size-unit-2);
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: var(--global-font-weight-bold);
	line-height: var(--global-line-height-title);
}

.visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header {
	--component-header-padding: var(--global-size-unit-12) var(--global-size-unit-24);
	display: flex;
	align-items: center;
	gap: var(--global-size-unit-16);
	padding: var(--component-header-padding);
	background: color-mix(in srgb, var(--theme-surface-card) 82%, transparent);
	backdrop-filter: blur(1rem);
	border-block-end: var(--global-size-unit-1) solid var(--theme-border-subtle);
	position: sticky;
	inset-block-start: 0;
	z-index: var(--global-z-sticky);
}

.site-header .brand {
	display: flex;
	align-items: center;
	gap: var(--global-size-unit-12);
	text-decoration: none;
	color: inherit;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.site-header .brand img {
	inline-size: var(--global-size-unit-32);
	block-size: var(--global-size-unit-32);
}

.site-header .brand strong {
	font-size: var(--global-font-size-16);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-inline-size: 0;
}

.site-header .brand span {
	display: block;
	font-size: var(--global-font-size-12);
	color: var(--theme-text-muted);
	letter-spacing: var(--global-letter-spacing-label);
	text-transform: uppercase;
}

.site-header .session {
	margin-inline-start: auto;
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--global-size-unit-12);
	font-size: var(--global-font-size-14);
	color: var(--theme-text-muted);
}

.site-header .session .account {
	display: none;
}

@media (width < 48rem) {
	.site-header {
		--component-header-padding: var(--global-size-unit-12) var(--global-size-unit-16);
	}

	.site-header .brand span {
		display: none;
	}
}

@media (width >= 48rem) {
	.site-header .session .account {
		display: inline;
	}
}

.live-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--global-size-unit-8);
	padding: var(--global-size-unit-4) var(--global-size-unit-12);
	border-radius: var(--global-radius-full);
	background: var(--theme-status-good-surface);
	color: var(--theme-status-good-text);
	font-size: var(--global-font-size-12);
	font-weight: var(--global-font-weight-bold);
	letter-spacing: var(--global-letter-spacing-label);
	text-transform: uppercase;
	white-space: nowrap;
}

.live-badge::before {
	content: '';
	inline-size: var(--global-size-unit-8);
	block-size: var(--global-size-unit-8);
	border-radius: var(--global-radius-full);
	background: var(--theme-status-good);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-status-good) 50%, transparent);
	animation: live-pulse 2.4s var(--global-motion-easing-out) infinite;
}

.live-badge time {
	font-weight: var(--global-font-weight-regular);
	text-transform: none;
	letter-spacing: normal;
}

.button {
	--component-button-padding: var(--global-size-unit-8) var(--global-size-unit-16);
	--component-button-radius: var(--global-radius-8);
	display: inline-flex;
	align-items: center;
	gap: var(--global-size-unit-8);
	padding: var(--component-button-padding);
	border-radius: var(--component-button-radius);
	border: var(--global-size-unit-1) solid var(--theme-border-subtle);
	background: var(--theme-surface-card);
	color: var(--theme-action);
	font-weight: var(--global-font-weight-bold);
	font-size: var(--global-font-size-14);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--global-motion-duration-fast) var(--global-motion-easing-out),
		border-color var(--global-motion-duration-fast) var(--global-motion-easing-out);
}

.button:hover {
	background: var(--theme-action-surface);
	border-color: var(--theme-border-default);
}

.button.primary {
	background: var(--theme-action);
	border-color: var(--theme-action);
	color: var(--theme-action-text);
}

.button.primary:hover {
	background: var(--theme-action-hover);
	border-color: var(--theme-action-hover);
}

/* ---------- Filter row ---------- */
.filter-row {
	min-inline-size: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--global-size-unit-12) var(--global-size-unit-24);
}

.filter-row .filter-label {
	font-size: var(--global-font-size-14);
	color: var(--theme-text-muted);
	margin-inline-end: calc(-1 * var(--global-size-unit-12));
}

.segmented {
	--component-segmented-radius: var(--global-radius-full);
	--component-segmented-label-padding: var(--global-size-unit-4) var(--global-size-unit-12);
	display: inline-flex;
	max-inline-size: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	padding: var(--global-size-unit-4);
	border-radius: var(--component-segmented-radius);
	background: var(--theme-surface-medium);
	gap: var(--global-size-unit-2);
}

@media (width >= 48rem) {
	.segmented {
		--component-segmented-label-padding: var(--global-size-unit-4) var(--global-size-unit-16);
	}
}

.segmented label {
	position: relative;
	flex: none;
	white-space: nowrap;
	padding: var(--component-segmented-label-padding);
	border-radius: var(--component-segmented-radius);
	font-size: var(--global-font-size-14);
	font-weight: var(--global-font-weight-bold);
	color: var(--theme-text-muted);
	cursor: pointer;
	transition: color var(--global-motion-duration-fast), background var(--global-motion-duration-fast);
}

.segmented label:hover {
	color: var(--theme-text-default);
}

.segmented input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.segmented label:has(input:checked) {
	background: var(--theme-surface-card);
	color: var(--theme-action);
	box-shadow: var(--theme-shadow-card);
}

.segmented label:has(input:focus-visible) {
	outline: var(--global-size-unit-2) solid var(--theme-focus-ring);
}

.select {
	display: inline-flex;
	align-items: center;
	gap: var(--global-size-unit-8);
	font-size: var(--global-font-size-14);
	color: var(--theme-text-muted);
}

.select select,
.select input {
	padding: var(--global-size-unit-8) var(--global-size-unit-12);
	border-radius: var(--global-radius-8);
	border: var(--global-size-unit-1) solid var(--theme-border-subtle);
	background: var(--theme-surface-card);
	color: var(--theme-text-default);
	font-weight: var(--global-font-weight-bold);
}

.select select:disabled {
	opacity: 0.6;
}

.filter-row [hidden] {
	display: none;
}

/* Compact segmented control, used for the per-card "Weergave" switch. */
.segmented.compact {
	--component-segmented-label-padding: var(--global-size-unit-2) var(--global-size-unit-8);
	padding: var(--global-size-unit-2);
}

.segmented.compact label {
	font-size: var(--global-font-size-12);
}

/* On/off switch built on a checkbox with role="switch". */
.switch {
	--component-switch-width: 2.25rem;
	--component-switch-height: 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: var(--global-size-unit-8);
	font-size: var(--global-font-size-14);
	color: var(--theme-text-muted);
	cursor: pointer;
}

.switch input {
	appearance: none;
	position: relative;
	flex: none;
	inline-size: var(--component-switch-width);
	block-size: var(--component-switch-height);
	margin: 0;
	border-radius: var(--global-radius-full);
	background: var(--theme-border-subtle);
	cursor: pointer;
	transition: background var(--global-motion-duration-fast) var(--global-motion-easing-out);
}

.switch input::before {
	content: '';
	position: absolute;
	inset-block-start: var(--global-size-unit-2);
	inset-inline-start: var(--global-size-unit-2);
	inline-size: calc(var(--component-switch-height) - 2 * var(--global-size-unit-2));
	block-size: calc(var(--component-switch-height) - 2 * var(--global-size-unit-2));
	border-radius: var(--global-radius-full);
	background: var(--theme-surface-card);
	box-shadow: var(--theme-shadow-card);
	transition: translate var(--global-motion-duration-fast) var(--global-motion-easing-out);
}

.switch input:checked {
	background: var(--theme-action);
}

.switch input:checked::before {
	translate: calc(var(--component-switch-width) - var(--component-switch-height)) 0;
}

.switch:has(input:checked) {
	color: var(--theme-text-default);
	font-weight: var(--global-font-weight-bold);
}

/* ---------- Cards ---------- */
.card {
	--component-card-padding: var(--global-size-unit-24);
	--component-card-radius: var(--global-radius-16);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--global-size-unit-16);
	padding: var(--component-card-padding);
	border-radius: var(--component-card-radius);
	background: var(--theme-surface-card);
	border: var(--global-size-unit-1) solid var(--theme-border-subtle);
	box-shadow: var(--theme-shadow-card);
	min-inline-size: 0;
}

.card > header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--global-size-unit-12);
}

.card > header > div:first-child {
	flex: 1 1 12rem;
	min-inline-size: 0;
}

.card > header h2,
.card > header h3 {
	font-size: var(--global-font-size-16);
}

.card > header p {
	margin: 0;
	font-size: var(--global-font-size-14);
	color: var(--theme-text-muted);
}

.card .chart {
	--component-chart-height: 16rem;
	block-size: var(--component-chart-height);
	inline-size: 100%;
	min-inline-size: 0;
}

.card .chart.tall {
	--component-chart-height: 20rem;
}

.card .chart.short {
	--component-chart-height: 12rem;
}

.card .chart.mini {
	--component-chart-height: 4rem;
}

.card:has(.table-toggle input:checked) .chart {
	display: none;
}

.card .data-table {
	display: none;
	max-block-size: 20rem;
	overflow: auto;
}

.card:has(.table-toggle input:checked) .data-table {
	display: block;
}

.table-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--global-size-unit-8);
	font-size: var(--global-font-size-12);
	font-weight: var(--global-font-weight-bold);
	color: var(--theme-text-muted);
	cursor: pointer;
	white-space: nowrap;
	letter-spacing: var(--global-letter-spacing-label);
	text-transform: uppercase;
}

.table-toggle input {
	accent-color: var(--theme-action);
}

.data-table table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--global-font-size-14);
	font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
	padding: var(--global-size-unit-8) var(--global-size-unit-12);
	text-align: start;
	border-block-end: var(--global-size-unit-1) solid var(--theme-divider);
}

.data-table th {
	position: sticky;
	inset-block-start: 0;
	background: var(--theme-surface-card);
	color: var(--theme-text-muted);
	font-weight: var(--global-font-weight-bold);
	font-size: var(--global-font-size-12);
	letter-spacing: var(--global-letter-spacing-label);
	text-transform: uppercase;
}

.data-table td:not(:first-child),
.data-table th:not(:first-child) {
	text-align: end;
}

/* ---------- Stat tile ---------- */
.stat {
	--component-stat-value-size: var(--global-font-size-30);
	display: flex;
	flex-direction: column;
	gap: var(--global-size-unit-4);
}

.stat .label {
	font-size: var(--global-font-size-14);
	color: var(--theme-text-muted);
}

.stat .value {
	font-size: var(--component-stat-value-size);
	font-weight: var(--global-font-weight-bold);
	line-height: var(--global-line-height-title);
	letter-spacing: -0.02em;
}

.stat .delta {
	display: inline-flex;
	align-items: center;
	gap: var(--global-size-unit-4);
	font-size: var(--global-font-size-14);
	color: var(--theme-text-muted);
}

.stat .delta[data-direction='up'] {
	color: var(--theme-status-good-text);
}

.stat .delta[data-direction='down'] {
	color: var(--theme-status-danger-text);
}

.stat .delta[data-direction='up']::before {
	content: '▲';
	font-size: var(--global-font-size-12);
}

.stat .delta[data-direction='down']::before {
	content: '▼';
	font-size: var(--global-font-size-12);
}

.stat .sparkline {
	block-size: 2.5rem;
	inline-size: 100%;
	margin-block-start: var(--global-size-unit-8);
}

.hero-figure {
	font-size: var(--global-font-size-48);
	font-weight: var(--global-font-weight-bold);
	line-height: 1;
	letter-spacing: -0.03em;
}

@media (width >= 64rem) {
	.hero-figure {
		font-size: var(--global-font-size-64);
	}
}

/* ---------- Stat grid (live numbers, queue figures) ---------- */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	gap: var(--global-size-unit-16);
	margin: 0;
}

.stat-grid .stat {
	--component-stat-value-size: var(--global-font-size-24);
	font-variant-numeric: tabular-nums;
}

.stat-grid .stat .label {
	font-size: var(--global-font-size-12);
	letter-spacing: var(--global-letter-spacing-label);
	text-transform: uppercase;
}

/* ---------- Legend chips ---------- */
.legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--global-size-unit-8) var(--global-size-unit-16);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--global-font-size-14);
	color: var(--theme-text-muted);
}

.legend li {
	display: inline-flex;
	align-items: center;
	gap: var(--global-size-unit-8);
}

.legend li::before {
	content: '';
	inline-size: var(--global-size-unit-12);
	block-size: var(--global-size-unit-12);
	border-radius: var(--global-radius-4);
	background: var(--swatch);
}

/* ---------- Breakdown list (household sizes) ---------- */
.breakdown {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--global-size-unit-8) var(--global-size-unit-12);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--global-font-size-14);
	font-variant-numeric: tabular-nums;
}

.breakdown li {
	display: contents;
}

.breakdown .key {
	color: var(--theme-text-muted);
	white-space: nowrap;
}

.breakdown .bar {
	block-size: var(--global-size-unit-8);
	border-radius: var(--global-radius-full);
	background: var(--theme-chart-track);
	overflow: hidden;
}

.breakdown .bar i {
	display: block;
	block-size: 100%;
	inline-size: var(--share);
	border-radius: inherit;
	background: var(--swatch, var(--theme-chart-series-1));
	transform-origin: left;
	animation: grow-x var(--global-motion-duration-slow) var(--global-motion-easing-out) both;
	animation-delay: calc(var(--i, 0) * 60ms + 200ms);
}

.breakdown .count {
	font-weight: var(--global-font-weight-bold);
}

/* ---------- Status pills ---------- */
.pill {
	display: inline-flex;
	align-items: center;
	gap: var(--global-size-unit-4);
	padding: var(--global-size-unit-2) var(--global-size-unit-8);
	border-radius: var(--global-radius-full);
	font-size: var(--global-font-size-12);
	font-weight: var(--global-font-weight-bold);
	background: var(--theme-surface-medium);
	color: var(--theme-text-muted);
}

.pill[hidden] {
	display: none;
}

.pill.good {
	background: var(--theme-status-good-surface);
	color: var(--theme-status-good-text);
}

.pill.warning {
	background: var(--theme-status-warning-surface);
	color: var(--theme-status-warning-text);
}

.pill.warning::before,
.pill.good::before {
	content: '';
	inline-size: var(--global-size-unit-8);
	block-size: var(--global-size-unit-8);
	border-radius: var(--global-radius-full);
	background: currentColor;
}

.pill.danger {
	background: var(--theme-status-danger-surface);
	color: var(--theme-status-danger-text);
}

/* ---------- Motion ---------- */
.reveal {
	animation: reveal-up var(--global-motion-duration-slow) var(--global-motion-easing-out) both;
	animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes reveal-up {
	from {
		opacity: 0;
		transform: translateY(var(--global-size-unit-12));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes grow-x {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes live-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-status-good) 50%, transparent);
	}
	70% {
		box-shadow: 0 0 0 var(--global-size-unit-8) transparent;
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.breakdown .bar i,
	.live-badge::before {
		animation: none;
	}

	html {
		scroll-behavior: auto;
	}
}

/* ---------- Site footer ---------- */
.site-footer {
	padding: var(--global-size-unit-24);
	font-size: var(--global-font-size-12);
	color: var(--theme-text-muted);
	text-align: center;
}

/* ---------- Data not available ---------- */
/* When the BFF cannot answer, one message replaces the live panel, the KPIs and the charts: empty frames would
   read as "no applications" rather than "no data". */
.load-failed {
	display: grid;
	gap: var(--global-size-unit-16);
	justify-items: start;
}

.load-failed[hidden] {
	display: none;
}

main[data-state='failed'] > :is(.live-panel, .kpis, .bento) {
	display: none;
}