/* =====================================================================
 * Visvangst Logboek - ontwerpsysteem
 *
 * Richting: een "veldlogboek"-gevoel - petrolgroen/water als hoofdkleur,
 * warm amber als accent voor bijzondere momenten (records, publicatie).
 * Metingen (cm/kg/aantallen) staan overal in een monospace-lettertype:
 * dat geeft gemeten data een "instrumentgevoel", passend bij een logboek.
 * ===================================================================== */

:root {
	/* Kleur */
	--vvl-inkt: #16241f;
	--vvl-inkt-zacht: #55645d;
	--vvl-diep: #1e6f63;
	--vvl-diep-donker: #123f38;
	--vvl-diep-zacht: #e6f0ed;
	--vvl-mist: #f5f7f5;
	--vvl-oppervlak: #ffffff;
	--vvl-zand: #e7dfc9;
	--vvl-zand-zacht: #f4efe1;
	--vvl-amber: #e07f2e;
	--vvl-amber-donker: #b6631f;
	--vvl-amber-zacht: #fbebd3;
	--vvl-koraal: #c1453a;
	--vvl-koraal-zacht: #fbeae8;

	/* Typografie */
	--vvl-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--vvl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--vvl-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

	/* Maatvoering */
	--vvl-radius-s: 8px;
	--vvl-radius-m: 14px;
	--vvl-radius-l: 20px;
	--vvl-schaduw-s: 0 1px 2px rgba( 20, 36, 31, 0.07 );
	--vvl-schaduw-m: 0 6px 20px rgba( 20, 36, 31, 0.09 );
	--vvl-schaduw-l: 0 20px 45px rgba( 20, 36, 31, 0.18 );
}

/* Basis: alle plugin-onderdelen delen dit lettertype en deze tekstkleur. */
.vvl-form,
.vvl-portaal,
.vvl-login-wrap,
.vvl-logboek,
.vvl-records-grid,
.vvl-ranglijst,
.vvl-dashboard,
.vvl-modal {
	font-family: var( --vvl-font-body );
	color: var( --vvl-inkt );
	line-height: 1.5;
}

.vvl-wachtrij-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 480px;
	margin: 0 auto 16px;
	padding: 12px 16px;
	background: var( --vvl-amber-zacht );
	color: var( --vvl-amber-donker );
	border-radius: var( --vvl-radius-s );
	font-size: 13px;
	font-weight: 600;
}

.vvl-wachtrij-banner .vvl-link-knop {
	color: var( --vvl-amber-donker );
	text-decoration: underline;
	white-space: nowrap;
}

.vvl-form {
	max-width: 480px;
	margin: 0 auto;
}

.vvl-veld {
	margin-bottom: 18px;
}

.vvl-veld-rij {
	display: flex;
	gap: 16px;
}

.vvl-veld-rij .vvl-veld {
	flex: 1;
}

.vvl-form label,
.vvl-modal-bewerk label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	color: var( --vvl-inkt );
}

.vvl-form input[type="text"],
.vvl-form input[type="number"],
.vvl-form input[type="datetime-local"],
.vvl-form select,
.vvl-form textarea,
.vvl-modal-bewerk input[type="text"],
.vvl-modal-bewerk input[type="number"],
.vvl-modal-bewerk input[type="datetime-local"],
.vvl-modal-bewerk select,
.vvl-modal-bewerk textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var( --vvl-zand );
	border-radius: var( --vvl-radius-s );
	font-size: 16px;
	font-family: inherit;
	background: var( --vvl-oppervlak );
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vvl-form input:focus,
.vvl-form select:focus,
.vvl-form textarea:focus,
.vvl-modal-bewerk input:focus,
.vvl-modal-bewerk select:focus,
.vvl-modal-bewerk textarea:focus {
	outline: none;
	border-color: var( --vvl-diep );
	box-shadow: 0 0 0 3px var( --vvl-diep-zacht );
}

.vvl-checkbox label {
	font-weight: normal;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Stap-aanduiding boven het formulier */
.vvl-stap-label {
	display: inline-block;
	font-family: var( --vvl-font-mono );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --vvl-diep );
	background: var( --vvl-diep-zacht );
	padding: 4px 10px;
	border-radius: 999px;
}

.vvl-stap-titel {
	font-family: var( --vvl-font-display );
	font-size: 22px;
	font-weight: 600;
	margin: 10px 0 14px;
	letter-spacing: -0.01em;
}

.vvl-stap-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.vvl-chip-knop {
	background: var( --vvl-diep-zacht );
	color: var( --vvl-diep-donker );
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	font-family: var( --vvl-font-body );
	cursor: pointer;
	transition: background 0.15s ease;
}

.vvl-chip-knop:hover {
	background: #d9ebe6;
}

/* Formulier-secties: groeperen velden visueel, i.p.v. één lange lijst */
.vvl-form-sectie {
	background: var( --vvl-mist );
	border: 1px solid var( --vvl-zand-zacht );
	border-radius: var( --vvl-radius-m );
	padding: 20px;
	margin-bottom: 18px;
}

.vvl-form-sectie .vvl-veld:last-child {
	margin-bottom: 0;
}

.vvl-form-sectie-titel {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --vvl-diep-donker );
}

.vvl-form-sectie-titel span {
	font-size: 16px;
	text-transform: none;
	letter-spacing: normal;
}

/* Moderne toggle-schakelaar i.p.v. een kale checkbox */
.vvl-toggle-veld {
	margin-bottom: 0;
}

.vvl-form label.vvl-toggle,
label.vvl-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-weight: normal;
}

.vvl-toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.vvl-toggle-schakelaar {
	display: inline-block;
	position: relative;
	width: 44px;
	height: 26px;
	flex-shrink: 0;
	background: #d5d2c4;
	border-radius: 999px;
	transition: background 0.2s ease;
}

.vvl-toggle-schakelaar::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.2s ease;
}

.vvl-toggle input:checked + .vvl-toggle-schakelaar {
	background: var( --vvl-diep );
}

.vvl-toggle input:checked + .vvl-toggle-schakelaar::after {
	transform: translateX( 18px );
}

.vvl-toggle input:focus-visible + .vvl-toggle-schakelaar {
	outline: 3px solid var( --vvl-amber );
	outline-offset: 2px;
}

.vvl-toggle-tekst {
	font-size: 14px;
	color: var( --vvl-inkt );
}

.vvl-knop-primair,
.vvl-knop-secundair {
	cursor: pointer;
	border: none;
	border-radius: var( --vvl-radius-s );
	padding: 13px 22px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.vvl-knop-primair {
	background: var( --vvl-diep );
	color: #fff;
	width: 100%;
	box-shadow: var( --vvl-schaduw-s );
}

.vvl-knop-primair:hover:not( :disabled ) {
	background: var( --vvl-diep-donker );
	box-shadow: var( --vvl-schaduw-m );
	transform: translateY( -1px );
}

.vvl-knop-primair:disabled {
	opacity: 0.55;
	cursor: default;
	transform: none;
}

.vvl-knop-secundair {
	background: var( --vvl-diep-zacht );
	color: var( --vvl-diep-donker );
	margin-top: 8px;
}

.vvl-knop-secundair:hover:not( :disabled ) {
	background: #d9ebe6;
}

.vvl-form button:focus-visible,
.vvl-modal button:focus-visible,
.vvl-vissoort-tegel:focus-visible {
	outline: 3px solid var( --vvl-amber );
	outline-offset: 2px;
}

.vvl-hulptekst {
	font-size: 13px;
	color: var( --vvl-inkt-zacht );
	margin-top: 6px;
}

.vvl-melding {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: var( --vvl-radius-s );
	font-size: 14px;
}

.vvl-melding-succes {
	background: var( --vvl-diep-zacht );
	color: var( --vvl-diep-donker );
}

.vvl-melding-fout {
	background: var( --vvl-koraal-zacht );
	color: var( --vvl-koraal );
}

/* Logboek-filters */
.vvl-logboek-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	background: var( --vvl-mist );
	border: 1px solid var( --vvl-zand-zacht );
	border-radius: var( --vvl-radius-m );
	padding: 16px;
	margin-bottom: 24px;
}

.vvl-filter-veld {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.vvl-filter-veld label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --vvl-inkt-zacht );
}

.vvl-filter-veld select {
	padding: 9px 12px;
	border: 1.5px solid var( --vvl-zand );
	border-radius: var( --vvl-radius-s );
	font-size: 14px;
	font-family: var( --vvl-font-body );
	background: var( --vvl-oppervlak );
}

.vvl-filter-checkbox {
	flex-direction: row;
	align-items: center;
}

.vvl-filter-checkbox label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: normal;
	font-size: 14px;
	text-transform: none;
	color: var( --vvl-inkt );
}

/* Logboek */
.vvl-logboek {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 20px;
}

.vvl-kaart {
	border: 1px solid var( --vvl-zand-zacht );
	border-radius: var( --vvl-radius-m );
	overflow: hidden;
	background: var( --vvl-oppervlak );
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.vvl-kaart:hover,
.vvl-kaart:focus {
	box-shadow: var( --vvl-schaduw-m );
	transform: translateY( -3px );
	border-color: var( --vvl-diep-zacht );
	outline: none;
}

.vvl-kaart-foto img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.vvl-kaart-inhoud {
	padding: 16px;
}

.vvl-kaart-inhoud h3 {
	margin: 0 0 4px;
	font-family: var( --vvl-font-display );
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.vvl-kaart-datum {
	color: var( --vvl-inkt-zacht );
	font-size: 12px;
	font-family: var( --vvl-font-mono );
	margin: 0 0 10px;
}

.vvl-weer {
	font-size: 13px;
	color: var( --vvl-inkt-zacht );
}

.vvl-kaart-meer {
	color: var( --vvl-diep );
	font-size: 13px;
	font-weight: 600;
	margin: 10px 0 0;
}

/* Vissoort-tegels */
.vvl-vissoort-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 130px, 1fr ) );
	gap: 10px;
}

.vvl-vissoort-tegel {
	background: none;
	border: 3px solid transparent;
	border-radius: var( --vvl-radius-m );
	padding: 0;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
	box-shadow: var( --vvl-schaduw-s );
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.vvl-vissoort-tegel:hover {
	transform: translateY( -3px );
	box-shadow: var( --vvl-schaduw-m );
}

.vvl-vissoort-tegel.vvl-tegel-geselecteerd {
	border-color: var( --vvl-amber );
	box-shadow: var( --vvl-schaduw-m );
}

.vvl-vissoort-icoon {
	display: block;
	width: 100%;
}

.vvl-vissoort-icoon svg {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 11px;
}

.vvl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

.vvl-link-knop {
	background: none;
	border: none;
	color: var( --vvl-diep );
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	padding: 0;
	display: inline-block;
}

.vvl-link-knop:hover {
	color: var( --vvl-diep-donker );
	text-decoration: underline;
}

/* Mooie bestandsknop i.p.v. de standaard "Bestand kiezen"-knop */
.vvl-bestand-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.vvl-foto-knoppen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.vvl-bestand-knop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var( --vvl-diep-zacht );
	border: 2px dashed #a9d0c7;
	border-radius: var( --vvl-radius-s );
	padding: 16px 10px;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	color: var( --vvl-diep-donker );
	text-align: center;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.vvl-bestand-knop:hover {
	background: #d9ebe6;
	border-color: var( --vvl-diep );
}

.vvl-bestand-knop-icoon {
	font-size: 18px;
}

/* Locatie / kaart */
.vvl-locatie-leeg {
	background: var( --vvl-mist );
	border: 1.5px dashed var( --vvl-zand );
	border-radius: var( --vvl-radius-s );
	padding: 16px;
	text-align: center;
	color: var( --vvl-inkt-zacht );
	font-size: 14px;
	margin: 8px 0;
}

.vvl-form-kaart {
	height: 240px;
	border-radius: var( --vvl-radius-s );
	margin: 8px 0;
	border: 1.5px solid var( --vvl-zand );
	overflow: hidden;
}

.vvl-kaart-wrapper {
	position: relative;
}

.vvl-kaart-kruis {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -92% );
	font-size: 34px;
	pointer-events: none;
	filter: drop-shadow( 0 2px 2px rgba( 0, 0, 0, 0.35 ) );
	z-index: 500;
}

.vvl-form-knoppen {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.vvl-form-knoppen .vvl-knop-primair,
.vvl-form-knoppen .vvl-knop-secundair {
	flex: 1;
	min-width: 140px;
	width: auto;
	margin-top: 0;
}

/* Login */
.vvl-login-wrap {
	max-width: 380px;
	margin: 0 auto;
}

/* Portaal */
.vvl-portaal {
	max-width: 640px;
	margin: 0 auto;
}

.vvl-portaal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 22px;
	font-weight: 600;
	font-family: var( --vvl-font-display );
	font-size: 17px;
}

.vvl-uitloggen {
	font-weight: normal;
	font-family: var( --vvl-font-body );
	font-size: 13px;
	color: var( --vvl-koraal );
	text-decoration: none;
}

.vvl-uitloggen:hover {
	text-decoration: underline;
}

.vvl-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 26px;
	border-bottom: 1.5px solid var( --vvl-zand-zacht );
}

.vvl-tab-knop {
	background: none;
	border: none;
	padding: 11px 16px;
	font-size: 15px;
	font-weight: 600;
	font-family: var( --vvl-font-body );
	cursor: pointer;
	color: var( --vvl-inkt-zacht );
	border-bottom: 3px solid transparent;
	margin-bottom: -1.5px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.vvl-tab-knop:hover {
	color: var( --vvl-diep-donker );
}

.vvl-tab-knop.vvl-tab-actief {
	color: var( --vvl-diep );
	border-bottom-color: var( --vvl-diep );
}

/* Detail-modal */
.vvl-modal {
	position: fixed;
	inset: 0;
	background: rgba( 22, 36, 31, 0.55 );
	backdrop-filter: blur( 2px );
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.vvl-modal-overlay {
	position: absolute;
	inset: 0;
}

.vvl-modal-venster {
	position: relative;
	background: var( --vvl-oppervlak );
	border-radius: var( --vvl-radius-l );
	max-width: 520px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px;
	box-sizing: border-box;
	box-shadow: var( --vvl-schaduw-l );
}

.vvl-modal-sluiten {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var( --vvl-mist );
	border: none;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var( --vvl-inkt-zacht );
	transition: background 0.15s ease;
}

.vvl-modal-sluiten:hover {
	background: var( --vvl-zand-zacht );
}

.vvl-modal-inhoud h2 {
	margin: 0 30px 4px 0;
	font-family: var( --vvl-font-display );
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.vvl-modal-datum {
	color: var( --vvl-inkt-zacht );
	font-size: 12px;
	font-family: var( --vvl-font-mono );
	margin: 0 0 16px;
}

.vvl-modal-foto {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: var( --vvl-radius-s );
	margin-bottom: 18px;
}

.vvl-modal-inhoud h3 {
	margin: 20px 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --vvl-inkt-zacht );
}

.vvl-modal-tabel {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 120px, 1fr ) );
	gap: 10px;
}

.vvl-modal-tabel div {
	background: var( --vvl-mist );
	border-radius: var( --vvl-radius-s );
	padding: 10px 12px;
}

.vvl-modal-tabel span {
	display: block;
	font-size: 11px;
	color: var( --vvl-inkt-zacht );
	margin-bottom: 2px;
}

.vvl-modal-tabel strong {
	font-size: 16px;
	font-family: var( --vvl-font-mono );
	font-weight: 600;
	color: var( --vvl-inkt );
}

#vvl-modal-kaart {
	height: 220px;
	border-radius: var( --vvl-radius-s );
	margin-top: 8px;
	overflow: hidden;
}

.vvl-modal-publicatie {
	margin-top: 20px;
	font-size: 12px;
	color: var( --vvl-inkt-zacht );
}

.vvl-modal-acties {
	display: flex;
	gap: 10px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var( --vvl-zand-zacht );
}

.vvl-modal-acties button {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	font-size: 19px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vvl-knop-gevaar {
	background: var( --vvl-koraal-zacht ) !important;
	color: var( --vvl-koraal ) !important;
}

.vvl-knop-gevaar:hover:not( :disabled ) {
	background: #f6d9d6 !important;
}

.vvl-modal-bewerk h2 {
	margin-top: 0;
	font-family: var( --vvl-font-display );
	font-size: 22px;
	font-weight: 600;
}

.vvl-modal-deel h2 {
	margin-top: 0;
	font-family: var( --vvl-font-display );
	font-size: 22px;
	font-weight: 600;
}

.vvl-deel-canvas {
	width: 100%;
	max-width: 320px;
	aspect-ratio: 4 / 5;
	border-radius: var( --vvl-radius-m );
	border: 1px solid var( --vvl-zand-zacht );
	display: block;
	margin: 12px auto 16px;
	background: var( --vvl-mist );
}

/* Feestelijke recordmelding */
.vvl-melding-record {
	background: linear-gradient( 135deg, var( --vvl-amber-zacht ), #f7dcb2 );
	color: var( --vvl-amber-donker );
	font-weight: 600;
	border: 1px solid #f0cd97;
}

/* Persoonlijke records */
.vvl-records-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 18px;
}

.vvl-record-kaart {
	position: relative;
	border: 1px solid var( --vvl-zand-zacht );
	border-radius: var( --vvl-radius-m );
	background: var( --vvl-oppervlak );
	padding: 18px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.vvl-record-kaart:hover {
	box-shadow: var( --vvl-schaduw-m );
	transform: translateY( -2px );
}

/* Signature-detail: een subtiel "medaille-lint" in de hoek van elke
   soort-kaart - een knipoog naar het records-thema, puur met CSS. */
.vvl-record-kaart::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 46px;
	height: 46px;
	background: linear-gradient( 135deg, transparent 50%, var( --vvl-amber ) 50% );
	opacity: 0.9;
}

.vvl-record-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 14px;
	position: relative;
}

.vvl-record-header h3 {
	margin: 0;
	font-family: var( --vvl-font-display );
	font-size: 19px;
	font-weight: 600;
}

.vvl-record-aantal {
	font-size: 11px;
	font-family: var( --vvl-font-mono );
	color: var( --vvl-inkt-zacht );
}

.vvl-record-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vvl-record-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var( --vvl-mist );
	border-radius: var( --vvl-radius-s );
	padding: 10px;
}

.vvl-record-item img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: var( --vvl-radius-s );
	flex-shrink: 0;
}

.vvl-record-item-tekst {
	display: flex;
	flex-direction: column;
}

.vvl-record-item-tekst span {
	font-size: 11px;
	color: var( --vvl-inkt-zacht );
}

.vvl-record-item-tekst strong {
	font-size: 16px;
	font-family: var( --vvl-font-mono );
	font-weight: 600;
	color: var( --vvl-inkt );
}

.vvl-record-item-tekst small {
	font-size: 11px;
	font-family: var( --vvl-font-mono );
	color: var( --vvl-inkt-zacht );
}

/* Ranglijst */
.vvl-ranglijst h2 {
	margin: 28px 0 14px;
	font-family: var( --vvl-font-display );
	font-size: 20px;
	font-weight: 600;
}

.vvl-ranglijst h2:first-child {
	margin-top: 0;
}

/* Dashboard / tabellen */
.vvl-tabel {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var( --vvl-zand-zacht );
	border-radius: var( --vvl-radius-m );
	overflow: hidden;
}

.vvl-tabel th,
.vvl-tabel td {
	border-bottom: 1px solid var( --vvl-zand-zacht );
	padding: 10px 12px;
	text-align: left;
	font-size: 14px;
}

.vvl-tabel th {
	background: var( --vvl-mist );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --vvl-inkt-zacht );
}

.vvl-tabel tbody tr:hover {
	background: var( --vvl-diep-zacht );
}

.vvl-publicatie-ja,
.vvl-publicatie-nee {
	font-family: var( --vvl-font-mono );
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.vvl-publicatie-ja {
	color: var( --vvl-diep-donker );
}

.vvl-publicatie-nee {
	color: var( --vvl-inkt-zacht );
}

/* Statistiekenpagina */
.vvl-stats-banner {
	background: linear-gradient( 135deg, var( --vvl-diep ), var( --vvl-diep-donker ) );
	color: #fff;
	padding: 18px 22px;
	border-radius: var( --vvl-radius-m );
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 28px;
	box-shadow: var( --vvl-schaduw-m );
}

.vvl-stats-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: 14px;
	margin-bottom: 24px;
}

.vvl-stat-kaart {
	background: var( --vvl-oppervlak );
	border: 1px solid var( --vvl-zand-zacht );
	border-radius: var( --vvl-radius-m );
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vvl-stat-kaart-uitgelicht {
	border-color: var( --vvl-amber );
	background: var( --vvl-amber-zacht );
}

.vvl-stat-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --vvl-inkt-zacht );
}

.vvl-stat-groot-cijfer {
	font-family: var( --vvl-font-mono );
	font-size: 28px;
	font-weight: 600;
	color: var( --vvl-inkt );
}

.vvl-stat-groot-cijfer small {
	font-size: 14px;
	font-weight: 500;
	color: var( --vvl-inkt-zacht );
}

.vvl-stats-records-rij {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: 14px;
	margin-bottom: 28px;
}

.vvl-stat-kaart-record {
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

.vvl-stat-kaart-record img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var( --vvl-radius-s );
	flex-shrink: 0;
}

.vvl-stat-kaart-record div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vvl-stat-kaart-record strong {
	font-family: var( --vvl-font-display );
	font-size: 16px;
}

.vvl-stat-kaart-record small {
	color: var( --vvl-inkt-zacht );
	font-family: var( --vvl-font-mono );
	font-size: 11px;
}

.vvl-stats-lijst {
	background: var( --vvl-oppervlak );
	border: 1px solid var( --vvl-zand-zacht );
	border-radius: var( --vvl-radius-m );
	padding: 6px 16px;
	margin-bottom: 20px;
}

.vvl-stats-sublabel {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --vvl-inkt-zacht );
	margin: 10px 0 4px;
}

.vvl-stats-lijst-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var( --vvl-zand-zacht );
	flex-wrap: wrap;
}

.vvl-stats-lijst-item:last-child {
	border-bottom: none;
}

.vvl-stats-lijst-rang {
	font-family: var( --vvl-font-mono );
	font-size: 12px;
	color: var( --vvl-inkt-zacht );
	width: 24px;
	flex-shrink: 0;
}

.vvl-stats-lijst-naam {
	font-weight: 600;
	flex: 1;
	min-width: 100px;
}

.vvl-stats-lijst-aantal {
	font-family: var( --vvl-font-mono );
	font-weight: 600;
	color: var( --vvl-diep );
}

.vvl-stats-lijst-extra {
	font-size: 12px;
	color: var( --vvl-inkt-zacht );
	width: 100%;
}

.vvl-stats-weer-rij {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 14px;
}

.vvl-stats-maandgrafiek {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 140px;
	margin-bottom: 20px;
	background: var( --vvl-oppervlak );
	border: 1px solid var( --vvl-zand-zacht );
	border-radius: var( --vvl-radius-m );
	padding: 14px 10px 8px;
}

.vvl-maandbalk-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	gap: 6px;
}

.vvl-maandbalk {
	width: 100%;
	max-width: 22px;
	background: var( --vvl-diep );
	border-radius: 3px 3px 0 0;
	transition: background 0.15s ease;
}

.vvl-maandbalk-wrap:hover .vvl-maandbalk {
	background: var( --vvl-amber );
}

.vvl-maandbalk-label {
	font-size: 10px;
	font-family: var( --vvl-font-mono );
	color: var( --vvl-inkt-zacht );
	text-transform: uppercase;
}

.vvl-stats-jaarvergelijking {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 14px;
	margin: 20px 0 28px;
}

.vvl-stats-jaarvergelijking small {
	font-family: var( --vvl-font-mono );
	color: var( --vvl-inkt-zacht );
}

/* Recente berichten */
.vvl-berichten-lijst {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vvl-bericht-item {
	display: flex;
	gap: 14px;
	align-items: center;
	background: var( --vvl-oppervlak );
	border: 1px solid var( --vvl-zand-zacht );
	border-radius: var( --vvl-radius-m );
	padding: 12px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.vvl-bericht-item:hover {
	box-shadow: var( --vvl-schaduw-m );
	transform: translateY( -2px );
	border-color: var( --vvl-diep-zacht );
}

.vvl-bericht-foto {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: var( --vvl-radius-s );
	overflow: hidden;
}

.vvl-bericht-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vvl-bericht-tekst h4 {
	margin: 0 0 4px;
	font-family: var( --vvl-font-display );
	font-size: 17px;
	font-weight: 600;
	color: var( --vvl-inkt );
}

.vvl-bericht-datum {
	margin: 0 0 4px;
	font-family: var( --vvl-font-mono );
	font-size: 11px;
	color: var( --vvl-inkt-zacht );
}

.vvl-bericht-excerpt {
	margin: 0;
	font-size: 13px;
	color: var( --vvl-inkt-zacht );
	line-height: 1.4;
}

/* Toegankelijkheid: bewegingsvoorkeur respecteren. */
@media ( prefers-reduced-motion: reduce ) {
	.vvl-kaart,
	.vvl-vissoort-tegel,
	.vvl-knop-primair,
	.vvl-record-kaart {
		transition: none !important;
	}
}