/* Weerstation-overzicht (tabel "Actueel weer in Nederland/Belgie", geladen via
   de shortcode die slnHwaOverview::getHwaOverview() rendert). Bewust gescoped
   onder .hwa-overview, zelfde opzet als hwa-live-data.css: geen impact op de
   rest van het thema, system-font-stack i.p.v. webfonts. Kleurwaarden zijn
   bewust gelijk aan --ld-* in hwa-live-data.css, zodat de nieuwste en de
   oudste pagina's van de site er als 1 geheel uitzien. */

.hwa-overview {
	--ov-panel: #ffffff;
	--ov-border: #d7e1ea;
	--ov-border-light: #e9eef4;
	--ov-header-bg: #eef3f9;
	--ov-header-active-bg: #e5edf9;
	--ov-row-hover: #f4f8fc;
	--ov-ink: #182430;
	--ov-muted: #5b6b7c;
	--ov-muted-2: #8798a8;
	--ov-accent: #2569c9;
	--ov-shadow: 0 1px 2px rgba(20,40,60,.07), 0 6px 16px -10px rgba(20,40,60,.2);

	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--ov-ink);
}

.hwa-overview * { box-sizing: border-box; }

.hwa-overview__legend,
.hwa-overview__hint {
	font-size: .85rem;
	color: var(--ov-muted);
	margin: 0 0 6px;
	line-height: 1.5;
}
.hwa-overview__legend .lichtgrijs { font-weight: 600; }

/* Scroll-container i.p.v. de tabel plat laten overlopen op smalle schermen;
   sticky header zodat de kolomtitels blijven staan bij een lange stationslijst. */
.hwa-overview__scroll {
	background: var(--ov-panel);
	border: 1px solid var(--ov-border);
	border-radius: 10px;
	box-shadow: var(--ov-shadow);
	overflow: auto;
	max-height: 70vh;
	margin: 10px 0 8px;
}

table.overview {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

table.overview thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--ov-header-bg);
	color: var(--ov-ink);
	text-align: right;
	font-weight: 700;
	padding: 10px 12px;
	border-bottom: 2px solid var(--ov-border);
	white-space: nowrap;
}
table.overview thead th.plaatsnaam,
table.overview thead th.classificatie { text-align: left; }
table.overview thead th.offline { text-align: left; font-weight: 600; }

table.overview thead th a {
	color: inherit;
	text-decoration: none;
	display: block;
}
table.overview thead th a:hover { text-decoration: underline; }

table.overview thead th.active-sort {
	background: var(--ov-header-active-bg);
	color: var(--ov-accent);
}
table.overview thead th.active-sort.sort-asc a::after { content: " \25B2"; font-size: .7em; }
table.overview thead th.active-sort.sort-desc a::after { content: " \25BC"; font-size: .7em; }

table.overview tbody td {
	padding: 7px 12px;
	border-bottom: 1px solid var(--ov-border-light);
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
table.overview tbody td.plaatsnaam,
table.overview tbody td.classificatie { text-align: left; }
table.overview tbody td.offline {
	text-align: left;
	font-size: .8rem;
	color: var(--ov-muted);
	white-space: normal;
}

table.overview tbody td.plaatsnaam a {
	color: var(--ov-accent);
	font-weight: 600;
	text-decoration: none;
}
table.overview tbody td.plaatsnaam a:hover { text-decoration: underline; }

table.overview tbody tr:nth-child(even) { background: #fafcfe; }
table.overview tbody tr:hover { background: var(--ov-row-hover); }

.hwa-overview .lichtgrijs { color: var(--ov-muted-2); }

.hwa-overview__footnote {
	font-size: .82rem;
	color: var(--ov-muted);
	margin-top: 4px;
}