/* [kmi_extremen] — klassieke stijl, zoals de andere weer-plugins (Weer Hub). */
.kmix {
	--kmix-blauw: var(--wk-knop, #1a5fa0);
	background: #f3f4f6;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	max-width: 1000px;
	margin: 0 auto 2em;
	color: #1c2430;
	font-size: 14px;
	box-sizing: border-box;
}

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

.kmix-kop {
	background: linear-gradient(90deg, var(--wk-kop-basis-1, #1f5fae), var(--wk-kop-basis-2, #4a8ad6));
	color: var(--wk-kop-basis-tekst, #fff);
	padding: 10px 16px;
	font-size: 16px;
	font-weight: 700;
}

.kmix-sub {
	text-align: center;
	color: #5b6472;
	font-size: 12px;
	padding: 10px 16px 0;
}

.kmix-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px 14px;
}

.kmix button.kmix-tab {
	margin: 0;
	padding: 7px 16px;
	border: 1px solid #c9ced6;
	border-radius: 999px;
	background: #fff;
	color: #1c2430;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
}

.kmix button.kmix-tab:hover,
.kmix button.kmix-tab:focus-visible {
	border-color: var(--kmix-blauw);
	background: #fff;
	color: #1c2430;
}

.kmix button.kmix-tab.is-actief {
	background: var(--kmix-blauw);
	border-color: var(--kmix-blauw);
	color: var(--wk-knop-tekst, #fff);
}

.kmix-paneel {
	padding: 0 16px;
}

.kmix-paneel[hidden] {
	display: none;
}

.kmix-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 10px;
}

.kmix-tabel {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	font-size: 13px;
}

.kmix-tabel th,
.kmix-tabel td {
	border: none;
	padding: 6px 8px;
	text-align: center;
	white-space: nowrap;
}

.kmix-tabel thead th {
	background: #1a5fa0;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.25;
	vertical-align: bottom;
}

.kmix-tabel thead th small {
	font-weight: 400;
	opacity: 0.85;
}

.kmix-tabel thead th.kmix-th-max { background: #b93a2e; }
.kmix-tabel thead th.kmix-th-min { background: #2f6fb6; }
.kmix-tabel thead th.kmix-th-stoot { background: #5b3fb5; }
.kmix-tabel thead th.kmix-th-regen { background: #1f8a5c; }

.kmix-alle thead th[data-sort] {
	cursor: pointer;
	user-select: none;
}

.kmix-alle thead th.kmix-sort-op::after { content: " ▲"; font-size: 9px; }
.kmix-alle thead th.kmix-sort-af::after { content: " ▼"; font-size: 9px; }

.kmix-tabel tbody tr:nth-child(odd) { background: #e3e7ed; }
.kmix-tabel tbody tr:nth-child(even) { background: #fff; }

.kmix-tabel tbody td {
	border-top: 1px solid #c9ced6;
	font-variant-numeric: tabular-nums;
}

.kmix-tabel .kmix-naam {
	text-align: left;
	font-weight: 600;
	border-top: 1px solid #c9ced6;
}

.kmix-tabel .kmix-th-naam {
	text-align: left;
}

.kmix-tabel td.kmix-max,
.kmix-tabel td.kmix-min {
	font-weight: 700;
}

.kmix-tabel td.kmix-best {
	font-weight: 800;
	box-shadow: inset 0 0 0 2px rgba(28, 36, 48, 0.55);
}

.kmix-tabel td.kmix-stoot.kmix-best { color: #5b3fb5; }
.kmix-tabel td.kmix-regen.kmix-best { color: #1f8a5c; }

/* Eigen station(s) in de buurt: vet met een blauwe rand links. */
.kmix-tabel tbody tr.kmix-eigen > :first-child {
	box-shadow: inset 4px 0 0 var(--kmix-blauw);
}

.kmix-tabel tbody tr.kmix-eigen .kmix-naam {
	color: var(--kmix-blauw);
	font-weight: 800;
}

/* Top-lijsten. */
.kmix-top {
	max-width: 520px;
	margin: 0 auto;
}

.kmix-top .kmix-nr {
	width: 48px;
	font-weight: 700;
}

.kmix-top tbody .kmix-nr {
	color: #5b6472;
}

.kmix-top .kmix-waarde,
.kmix-top .kmix-waarde-kop {
	width: 110px;
}

.kmix-top .kmix-waarde {
	font-weight: 700;
	font-size: 14px;
}

.kmix-top-stoot .kmix-waarde { color: #5b3fb5; }
.kmix-top-neerslag .kmix-waarde { color: #1f8a5c; }
.kmix-top-warmste thead th { background: #b93a2e; }
.kmix-top-koudste thead th { background: #2f6fb6; }
.kmix-top-stoot thead th { background: #5b3fb5; }
.kmix-top-neerslag thead th { background: #1f8a5c; }

.kmix-uitleg {
	margin: 8px 0 0;
	font-size: 11px;
	color: #5b6472;
	line-height: 1.4;
}

.kmix-voet {
	padding: 12px 16px 14px;
	font-size: 11px;
	color: #5b6472;
	text-align: right;
}

.kmix-voet a {
	color: inherit;
}

.kmix-fout {
	padding: 14px 16px;
	color: #a8322a;
}

/* Smallere schermen (bv. tablet): iets compacter. */
@media (max-width: 1000px) {
	.kmix-tabel th,
	.kmix-tabel td {
		padding: 5px 5px;
	}
	.kmix-tabel { font-size: 12px; }
	.kmix-tabel thead th { font-size: 11px; }
}