/**
 * Flows-weergave in de huisstijl van Vogelweg HV Station.
 *
 * Kleuren staan in CSS-variabelen. Selectors beginnen bewust met .vhvs-flows:
 * het Hello-thema (reset.css) en het Elementor-kit stylen p, h2 en button
 * globaal (o.a. een roze hover op knoppen) en moeten hier altijd verliezen.
 *
 * Opbouw is mobiel-eerst; de bredere indelingen hangen aan de breedte van het
 * dashboard zelf (container queries), niet aan die van het scherm.
 */

.vhvs-flows {
	--vhvs-primary: #4472c4;
	--vhvs-primary-dark: #365ea6;
	--vhvs-heading: #1e3356;
	--vhvs-green: #a0c445;
	--vhvs-card: #ffffff;
	--vhvs-tile: #f2f5fa;
	--vhvs-border: #e1e6ee;
	--vhvs-grid: #e9edf3;
	--vhvs-text: #1e3356;
	--vhvs-text-soft: #4a5568;
	--vhvs-text-muted: #5f6b7d;
	--vhvs-bar-to: var(--vhvs-primary);
	--vhvs-bar-from: var(--vhvs-green);
	--vhvs-bar-to-partial: rgba(68, 114, 196, 0.55);
	--vhvs-bar-from-partial: rgba(160, 196, 69, 0.55);
	--vhvs-stale: #b32d2e;
	--vhvs-green-text: #557319;

	container: vhvs / inline-size;
	color: var(--vhvs-text);
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.vhvs-flows *,
.vhvs-flows *::before,
.vhvs-flows *::after {
	box-sizing: border-box;
}

/* Kaarten en koppen */

.vhvs-flows .vhvs-card {
	background: var(--vhvs-card);
	border: 1px solid var(--vhvs-border);
	border-radius: 12px;
	padding: 16px;
	margin: 0 0 16px;
	min-width: 0;
}

.vhvs-flows .vhvs-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 0 0 14px;
}

.vhvs-flows .vhvs-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--vhvs-heading);
}

.vhvs-flows .vhvs-title--live {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.vhvs-flows .vhvs-dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--vhvs-green);
	box-shadow: 0 0 0 0 rgba(160, 196, 69, 0.55);
	animation: vhvs-pulse 2s ease-out infinite;
}

.vhvs-flows[data-stale="1"] .vhvs-dot {
	background: var(--vhvs-text-muted);
	animation: none;
}

@keyframes vhvs-pulse {
	0% { box-shadow: 0 0 0 0 rgba(160, 196, 69, 0.55); }
	70% { box-shadow: 0 0 0 8px rgba(160, 196, 69, 0); }
	100% { box-shadow: 0 0 0 0 rgba(160, 196, 69, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.vhvs-flows .vhvs-dot {
		animation: none;
	}
}

/* Getal links, omschrijving rechts (zoals de schets) */

.vhvs-flows .vhvs-stats {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.vhvs-flows .vhvs-stat {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2px 12px;
	min-width: 0;
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--vhvs-tile);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vhvs-flows .vhvs-stat__value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--vhvs-text);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.vhvs-flows .vhvs-stat__label {
	font-size: 14px;
	line-height: 1.4;
	color: var(--vhvs-text-soft);
}

.vhvs-flows .vhvs-unit {
	margin-left: 2px;
	font-size: 14px;
	font-weight: 500;
	color: var(--vhvs-text-muted);
}

/* Uitgelicht: de actieve richting (live) en het nettototaal (vandaag). */
.vhvs-flows[data-direction="to_grid"] .vhvs-stats--live .vhvs-stat--to,
.vhvs-flows[data-direction="from_grid"] .vhvs-stats--live .vhvs-stat--from,
.vhvs-flows .vhvs-stats--today .vhvs-stat--net {
	background: var(--vhvs-primary);
}

.vhvs-flows[data-direction="to_grid"] .vhvs-stats--live .vhvs-stat--to *,
.vhvs-flows[data-direction="from_grid"] .vhvs-stats--live .vhvs-stat--from *,
.vhvs-flows .vhvs-stats--today .vhvs-stat--net * {
	color: #ffffff;
}

.vhvs-flows .vhvs-stats--today .vhvs-stat--net {
	margin-top: 4px;
}

/* Stroomschema GDS -> meter -> TenneT. Smal: onder elkaar, pijl een kwartslag gedraaid. */

.vhvs-flows .vhvs-flow {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	margin: 16px 0 0;
}

.vhvs-flows .vhvs-node {
	flex: none;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid var(--vhvs-border);
	border-radius: 8px;
	background: var(--vhvs-card);
	text-align: center;
	font-size: 13px;
	line-height: 1.4;
}

.vhvs-flows .vhvs-node--meter {
	border-color: var(--vhvs-primary);
}

.vhvs-flows .vhvs-node strong {
	display: block;
	font-weight: 700;
	color: var(--vhvs-heading);
}

.vhvs-flows .vhvs-node span {
	color: var(--vhvs-text-muted);
}

.vhvs-flows .vhvs-arrow {
	align-self: center;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: var(--vhvs-primary);
	transform: rotate(90deg);
}

.vhvs-flows .vhvs-flow[data-direction="none"] .vhvs-arrow {
	color: var(--vhvs-text-muted);
}

.vhvs-flows .vhvs-note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--vhvs-text-soft);
}

.vhvs-flows .vhvs-note--stale {
	color: var(--vhvs-stale);
}

.vhvs-flows .vhvs-note--stale[hidden] {
	display: none;
}

/* Periodeknoppen: huisstijl, ook bij hover en focus (anders wint de roze reset van het thema). */

.vhvs-flows .vhvs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.vhvs-flows .vhvs-btn {
	display: inline-block;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--vhvs-border);
	border-radius: 6px;
	background: var(--vhvs-card);
	color: var(--vhvs-heading);
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vhvs-flows .vhvs-btn:hover,
.vhvs-flows .vhvs-btn:focus {
	border-color: var(--vhvs-primary);
	background: var(--vhvs-card);
	color: var(--vhvs-primary);
}

.vhvs-flows .vhvs-btn.is-active,
.vhvs-flows .vhvs-btn.is-active:focus {
	border-color: var(--vhvs-primary);
	background: var(--vhvs-primary);
	color: #ffffff;
}

.vhvs-flows .vhvs-btn.is-active:hover {
	border-color: var(--vhvs-primary-dark);
	background: var(--vhvs-primary-dark);
	color: #ffffff;
}

.vhvs-flows .vhvs-btn:focus-visible,
.vhvs-flows .vhvs-chart .vhvs-group:focus-visible {
	outline: 2px solid var(--vhvs-primary);
	outline-offset: 2px;
	box-shadow: none;
}

/* Historiegrafiek: waarde-as links, rasterlijnen, twee staven per periode. */

.vhvs-flows .vhvs-chart-wrap {
	position: relative;
}

.vhvs-flows .vhvs-chart {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"y plot"
		". x";
	column-gap: 8px;
}

.vhvs-flows .vhvs-chart__y {
	grid-area: y;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 180px;
	font-size: 11px;
	color: var(--vhvs-text-muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.vhvs-flows .vhvs-chart__y span {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 0;
	line-height: 1;
	white-space: nowrap;
}

.vhvs-flows .vhvs-chart__plot {
	grid-area: plot;
	position: relative;
	height: 180px;
	border-bottom: 1px solid var(--vhvs-border);
}

.vhvs-flows .vhvs-chart__grid span {
	position: absolute;
	left: 0;
	right: 0;
	height: 0;
	border-top: 1px dashed var(--vhvs-grid);
}

.vhvs-flows .vhvs-chart__bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: stretch;
}

.vhvs-flows .vhvs-group {
	flex: 1 1 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	border-radius: 6px 6px 0 0;
	cursor: pointer;
	outline: none;
	transition: background-color 0.15s ease;
}

.vhvs-flows .vhvs-group:hover,
.vhvs-flows .vhvs-group.is-current {
	background: var(--vhvs-tile);
}

.vhvs-flows .vhvs-bar {
	position: relative;
	width: clamp(6px, 30%, 26px);
	border-radius: 3px 3px 0 0;
	transition: height 0.3s ease;
}

.vhvs-flows .vhvs-bar:not(.is-zero) {
	min-height: 2px;
}

.vhvs-flows .vhvs-bar--to {
	background: var(--vhvs-bar-to);
}

.vhvs-flows .vhvs-bar--from {
	background: var(--vhvs-bar-from);
}

.vhvs-flows .vhvs-group.is-partial .vhvs-bar--to {
	background: var(--vhvs-bar-to-partial);
}

.vhvs-flows .vhvs-group.is-partial .vhvs-bar--from {
	background: var(--vhvs-bar-from-partial);
}

/* Waarde van de kleine 'van TenneT'-staven, die op de as onleesbaar klein zijn. */
.vhvs-flows .vhvs-bar__val {
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-bottom: 2px;
	transform: translateX(-50%);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: var(--vhvs-green-text);
	font-variant-numeric: tabular-nums;
}

.vhvs-flows .vhvs-chart__x {
	grid-area: x;
	display: flex;
	padding-top: 6px;
	font-size: 11px;
	line-height: 1.3;
	color: var(--vhvs-text-muted);
}

.vhvs-flows .vhvs-chart__x > span {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	overflow: hidden;
}

.vhvs-flows .vhvs-chart__x b {
	display: block;
	font-weight: 500;
	color: var(--vhvs-text-soft);
}

.vhvs-flows .vhvs-chart[data-period="month"] .vhvs-chart__x > span {
	overflow: visible;
}

.vhvs-flows .vhvs-chart__x small {
	display: block;
	font-size: 11px;
	white-space: nowrap;
}

/* Tooltip (door flows.js aangemaakt), ook bij tikken op een telefoon. */
.vhvs-flows .vhvs-tip {
	position: absolute;
	z-index: 5;
	width: max-content;
	min-width: 170px;
	max-width: 240px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--vhvs-heading);
	color: #ffffff;
	font-size: 12px;
	line-height: 1.5;
	box-shadow: 0 4px 14px rgba(30, 51, 86, 0.25);
	pointer-events: none;
	transform: translate(-50%, calc(-100% - 8px));
}

.vhvs-flows .vhvs-tip[hidden] {
	display: none;
}

.vhvs-flows .vhvs-tip strong {
	display: block;
	margin-bottom: 2px;
	font-weight: 700;
}

.vhvs-flows .vhvs-tip span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.vhvs-flows .vhvs-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 14px;
	font-size: 13px;
	color: var(--vhvs-text-soft);
}

.vhvs-flows .vhvs-legend__unit {
	margin-left: auto;
	color: var(--vhvs-text-muted);
}

.vhvs-flows .vhvs-swatch {
	display: inline-block;
	flex: none;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-radius: 2px;
	vertical-align: middle;
}

.vhvs-flows .vhvs-swatch--to {
	background: var(--vhvs-bar-to);
}

.vhvs-flows .vhvs-swatch--from {
	background: var(--vhvs-bar-from);
}

.vhvs-flows .vhvs-tip .vhvs-swatch {
	margin-right: 0;
}

.vhvs-flows .vhvs-empty {
	margin: 0;
	font-size: 13px;
	color: var(--vhvs-text-muted);
}

/* Telefoons: maand alleen onder de eerste staaf, anders lopen de datums in elkaar over. */
@container vhvs (max-width: 350px) {
	.vhvs-flows .vhvs-chart__x > span:not(:first-child) .vhvs-x-month {
		display: none;
	}
}

/* Heel smal (320px-telefoons): alleen dagnummers, en alles op één regel houden. */
@container vhvs (max-width: 300px) {
	.vhvs-flows .vhvs-chart__x .vhvs-x-month {
		display: none;
	}

	.vhvs-flows .vhvs-stat {
		gap: 2px 8px;
		padding: 12px;
	}

	.vhvs-flows .vhvs-stat__value {
		font-size: 22px;
	}

	.vhvs-flows .vhvs-btn {
		padding: 6px 8px;
	}
}

/* Breder dashboard */

@container vhvs (min-width: 560px) {
	.vhvs-flows .vhvs-card {
		padding: 20px 24px;
	}

	.vhvs-flows .vhvs-flow {
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}

	.vhvs-flows .vhvs-node {
		flex: 1 1 0;
		padding: 10px 12px;
	}

	.vhvs-flows .vhvs-arrow {
		transform: none;
	}

	.vhvs-flows .vhvs-chart__y,
	.vhvs-flows .vhvs-chart__plot {
		height: 200px;
	}
}

/* Live-tegels op één rij en Vandaag naast Historie (ontwerp), vanaf ongeveer tablet liggend. */
@container vhvs (min-width: 880px) {
	.vhvs-flows .vhvs-stats--live {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.vhvs-flows .vhvs-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 20px;
		align-items: stretch;
	}

	.vhvs-flows .vhvs-row > .vhvs-card {
		margin-bottom: 0;
	}

	/* Rijen van Vandaag vullen de kaarthoogte, zoals in de schets. */
	.vhvs-flows .vhvs-card--today {
		display: flex;
		flex-direction: column;
	}

	.vhvs-flows .vhvs-stats--today {
		flex: 1 1 auto;
		grid-auto-rows: 1fr;
	}

	.vhvs-flows .vhvs-stats--today .vhvs-stat {
		align-content: center;
	}

	.vhvs-flows .vhvs-card--live {
		margin-bottom: 20px;
	}
}