/* VvE Net – formulieren en portaal. Gebruikt de kleuren van het thema, met eigen terugvalwaarden. */
.vn-form, .vn-dash, .vn-meldingen, .vn-notice, .vn-tabs, .vn-tabel, .mjop-kaarten, .mjop-jaren, .mjop-acties, .vn-intro { --_ink: var(--vn-ink, #14214F); --_groen: var(--vn-groen, #2346B8); --_geel: var(--vn-geel, #2FA8D8); --_vlak: var(--vn-vlak, #F3F6FB); --_rand: var(--vn-rand, #6A7593); --_zacht: var(--vn-zacht, #4A5677); --_spoed: var(--vn-spoed, #C4262E); --_wit: var(--vn-wit, #fff); }

.vn-form { max-width: 44rem; }
.vn-form p { margin: 0 0 1.1rem; }
.vn-fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.vn-fieldset legend { font-weight: 700; font-size: 1.15rem; margin-bottom: .75rem; padding: 0; }
.vn-field label { display: block; font-weight: 600; margin-bottom: .35rem; }
.vn-field input:not([type=checkbox]):not([type=radio]):not([type=file]),
.vn-field select, .vn-field textarea, .vn-tabel input {
	width: 100%; box-sizing: border-box; font: inherit; color: var(--_ink); background: var(--_wit);
	border: 2px solid var(--_rand); border-radius: 6px; padding: .65rem .75rem; min-height: 2.9rem;
}
.vn-field textarea { min-height: 7rem; resize: vertical; }
.vn-field input:focus-visible, .vn-field select:focus-visible, .vn-field textarea:focus-visible, .vn-tabel input:focus-visible,
.vn-btn:focus-visible, .vn-link:focus-visible, .vn-actie:focus-visible { outline: 3px solid var(--_geel); outline-offset: 2px; border-color: var(--_ink); }
.vn-hint, .vn-help { display: block; font-size: .9rem; color: var(--_zacht); margin-top: .35rem; }
.vn-check label, .vn-radio { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.vn-check input, .vn-radio input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--_groen); flex: none; }
.vn-radio { padding: .7rem .9rem; border: 2px solid var(--_vlak); border-radius: 6px; margin-bottom: .5rem; }
.vn-radio:has(input:checked) { border-color: var(--_groen); background: color-mix(in srgb, var(--_groen) 6%, transparent); }
.vn-radio--spoed:has(input:checked) { border-color: var(--_spoed); background: color-mix(in srgb, var(--_spoed) 7%, transparent); }
.vn-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vn-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 1.25rem; max-width: 52rem; }
@media (min-width: 640px) { .vn-grid2 { grid-template-columns: 1fr 1fr; } .vn-span2 { grid-column: 1 / -1; } }

.vn-btn { display: inline-block; font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
	background: var(--_groen); color: var(--_wit); border: 2px solid var(--_groen); border-radius: 6px; padding: .75rem 1.2rem; }
.vn-btn:hover { background: var(--_ink); border-color: var(--_ink); color: var(--_wit); }
.vn-btn--stil { background: transparent; color: var(--_groen); }
.vn-btn--stil:hover { background: var(--_vlak); color: var(--_ink); }
.vn-btn--groot { font-size: 1.1rem; padding: .95rem 1.5rem; }
.vn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--_spoed); text-decoration: underline; cursor: pointer; }
.vn-inline { display: inline; margin-left: .5rem; }

.vn-notice { border-left: 6px solid var(--_groen); background: var(--_vlak); padding: .9rem 1.1rem; border-radius: 0 6px 6px 0; margin: 0 0 1.5rem; }
.vn-notice ul { margin: .4rem 0 0 1.1rem; padding: 0; }
.vn-notice--ok { border-color: var(--_groen); background: color-mix(in srgb, var(--_groen) 9%, #fff); }
.vn-notice--fout { border-color: var(--_spoed); background: color-mix(in srgb, var(--_spoed) 8%, #fff); }
.vn-notice--let { border-color: var(--_geel); }
.vn-leeg { padding: 1.25rem; border: 2px dashed var(--_rand); border-radius: 8px; color: var(--_zacht); }

/* Dashboard */
.vn-dash__groet { font-size: 1.6rem; font-weight: 700; margin: 0; }
.vn-dash__vve { font-weight: 600; margin: .25rem 0 1.5rem; }
.vn-dash__vve span { font-weight: 400; color: var(--_zacht); }
.vn-dash h2, .vn-h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
.vn-mededeling { background: var(--vn-geel-zacht, #EEF3FF); border-radius: 8px; padding: 1rem 1.25rem; }
.vn-mededeling h2 { margin-top: 0; font-size: 1rem; }
.vn-acties { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1.5rem 0; }
.vn-actie { display: block; padding: 1rem 1.1rem; border: 2px solid var(--_vlak); border-radius: 8px; text-decoration: none; color: var(--_ink); background: var(--_wit); }
.vn-actie strong { display: block; font-size: 1.1rem; }
.vn-actie span { color: var(--_zacht); font-size: .95rem; }
.vn-actie:hover { border-color: var(--_groen); }
.vn-actie--hoofd { background: var(--_groen); border-color: var(--_groen); color: var(--_wit); }
.vn-actie--hoofd span { color: color-mix(in srgb, #fff 82%, var(--_groen)); }
.vn-actie--hoofd:hover { background: var(--_ink); border-color: var(--_ink); }
.vn-contact dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0; }
.vn-contact dt { color: var(--_zacht); }
.vn-contact dd { margin: 0; font-weight: 600; }
.vn-uitlog { margin-top: 2.5rem; }

/* Meldingen */
.vn-meldingen { list-style: none; margin: 0; padding: 0; }
.vn-melding { border-top: 1px solid var(--_rand); padding: 1rem 0; }
.vn-melding h3 { margin: .35rem 0 .15rem; font-size: 1.1rem; }
.vn-meta { margin: 0; color: var(--_zacht); font-size: .9rem; }
.vn-status { display: inline-block; font-size: .8rem; font-weight: 700; padding: .15rem .55rem; border-radius: 99px; background: var(--_vlak); color: var(--_ink); }
.vn-status--nieuw { background: color-mix(in srgb, var(--_geel) 45%, #fff); }
.vn-status--doorgestuurd, .vn-status--ontvangen, .vn-status--in_behandeling { background: color-mix(in srgb, var(--_groen) 15%, #fff); color: var(--_groen); }
.vn-status--afgerond { background: var(--_groen); color: var(--_wit); }
.vn-status--spoed { background: var(--_spoed); color: var(--_wit); }
.vn-melding__meer summary { cursor: pointer; color: var(--_groen); font-weight: 600; margin-top: .5rem; }
.vn-melding__meer[open] { padding-bottom: .5rem; }
.vn-fotos { display: flex; gap: .5rem; flex-wrap: wrap; }
.vn-fotos img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; }
.vn-log { font-size: .9rem; color: var(--_zacht); padding-left: 1.1rem; }
.vn-log time { font-variant-numeric: tabular-nums; color: var(--_ink); }
.vn-form--compact { background: var(--_vlak); padding: 1rem; border-radius: 8px; margin-top: 1rem; }
.vn-form--compact select { width: auto; max-width: 100%; }

/* Bestuur */
.vn-tabs ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--_vlak); }
.vn-tabs a { display: block; padding: .6rem .9rem; text-decoration: none; color: var(--_ink); border-bottom: 3px solid transparent; margin-bottom: -2px; font-weight: 600; }
.vn-tabs a[aria-current] { border-color: var(--_groen); color: var(--_groen); }
.vn-tabelwrap { overflow-x: auto; margin-bottom: 1.25rem; }
.vn-tabel { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vn-tabel th, .vn-tabel td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--_vlak); vertical-align: top; }
.vn-tabel thead th { border-bottom: 2px solid var(--_ink); white-space: nowrap; }
.vn-tabel input { min-height: 2.4rem; padding: .4rem .5rem; min-width: 10rem; }
.vn-filter a, .vn-filter strong { margin-right: .9rem; }
.vn-filter strong { color: var(--_groen); }
.vn-vve-kiezer { background: var(--_vlak); padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; }
.vn-docs { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.vn-docs li { padding: .6rem 0; border-bottom: 1px solid var(--_vlak); }
.vn-docs span { color: var(--_zacht); font-size: .9rem; margin-left: .35rem; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.vn-form--breed { max-width: none; }
.vn-tabel tbody th { min-width: 12rem; font-weight: 600; }

/* 1.2.0: meer kleur */
.vn-actie { border-color: var(--vn-mint, #E2F2FA); }
.vn-actie:hover { background: var(--vn-mint, #E2F2FA); }
.vn-notice--let { background: var(--vn-geel-zacht, #EEF3FF); }
.vn-status--nieuw { background: var(--_geel); }
.vn-status--doorgestuurd, .vn-status--ontvangen, .vn-status--in_behandeling { background: var(--vn-mint, #E2F2FA); }

/* 1.3.0: tarieven */
.tarieven__btw { font-size: .95rem; color: var(--vn-zacht, #4A5677); }
.tarieven__vergelijk td:nth-child(3) strong { color: var(--vn-groen, #2346B8); }

/* 2.1.0 – leden, rollen, MJOP, kosten en facturen */
.vn-link--rood { color: var(--_spoed); }
.vn-link--gewoon { color: var(--_groen); }
.vn-kopregel { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.vn-kopregel > * { margin: 0; }
.vn-rolform { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.vn-rolform select, .vn-rolform input { min-height: 2.3rem; padding: .3rem .5rem; border: 2px solid var(--_rand); border-radius: 6px; font: inherit; font-size: .9rem; background: var(--_wit); }
.vn-rolform input { width: 10rem; }
.vn-rolform button { font-size: .9rem; }
.vn-intro { font-size: 1.05rem; max-width: 46rem; }
.vn-getal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.mjop-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1.5rem 0 .75rem; }
.mjop-kaart { display: flex; flex-direction: column; gap: .15rem; padding: 1.1rem 1.25rem; border-radius: 14px; background: var(--_vlak); border: 1px solid color-mix(in srgb, var(--_groen) 12%, transparent); }
.mjop-kaart span { font-size: .88rem; color: var(--_zacht); }
.mjop-kaart strong { font-size: 1.65rem; line-height: 1.2; color: var(--_ink); font-variant-numeric: tabular-nums; }
.mjop-kaart--hoofd { background: linear-gradient(135deg, var(--_ink), var(--_groen)); border: 0; }
.mjop-kaart--hoofd span, .mjop-kaart--hoofd strong { color: var(--_wit); }
.mjop-kaart--hoofd span { opacity: .85; }
.mjop-instellingen { margin-top: 2rem; padding: 1.25rem; border-radius: 14px; background: var(--_vlak); }
.mjop-grid { max-width: none; }
@media (min-width: 900px) { .mjop-grid { grid-template-columns: repeat(3, 1fr); } }
.mjop-tabel input { width: 100%; min-width: 9rem; border: 2px solid color-mix(in srgb, var(--_rand) 55%, transparent); border-radius: 6px; font: inherit; }
.mjop-tabel td:first-child input { min-width: 15rem; }
.mjop-tabel td:nth-child(2) input { min-width: 13rem; }
.mjop-tabel input.mjop-kort { min-width: 5.5rem; width: 6.5rem; }
.mjop-tabel input.mjop-bedragveld { min-width: 8rem; text-align: right; }
.mjop-tabel thead th { white-space: normal; font-size: .88rem; vertical-align: bottom; }
.mjop-jaren { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.mjop-jaren li { display: grid; grid-template-columns: 3.5rem minmax(4rem, 1fr) 7.5rem; grid-template-areas: "jaar balk bedrag" ". wat wat"; gap: .1rem .75rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--_vlak); }
.mjop-jaar { grid-area: jaar; font-weight: 700; }
.mjop-balk { grid-area: balk; height: .7rem; border-radius: 99px; background: var(--_vlak); overflow: hidden; }
.mjop-balk span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--_groen), var(--_geel)); }
.mjop-bedrag { grid-area: bedrag; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mjop-wat { grid-area: wat; font-size: .88rem; color: var(--_zacht); }
.kosten-cats li { grid-template-columns: minmax(9rem, 16rem) minmax(4rem, 1fr) 8rem; grid-template-areas: "wat balk bedrag"; }
.kosten-cats .mjop-wat { font-size: .95rem; color: var(--_ink); }
@media (max-width: 560px) { .kosten-cats li { grid-template-columns: 1fr 7.5rem; grid-template-areas: "wat bedrag" "balk balk"; } }
.mjop-acties { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.artikel-voet--download { border-left-color: var(--vn-groen, #2346B8); }

@media print {
	.mjop-form, .mjop-acties, .vn-filter, #factuur-toevoegen, #factuur-toevoegen + form, .vn-inline { display: none !important; }
	.mjop-kaart--hoofd { background: none; border: 2px solid #000; }
	.mjop-kaart--hoofd span, .mjop-kaart--hoofd strong { color: #000; }
	.mjop-balk span { background: #555; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 2.3.0 – MJOP inlezen */
.mjop-import { margin: 2.5rem 0 1rem; padding: 1.25rem 1.4rem; border: 2px dashed color-mix(in srgb, var(--vn-groen, #2346B8) 35%, transparent); border-radius: 14px; max-width: 52rem; }
.mjop-import .vn-h3 { margin-top: 0; }
.mjop-formaat { margin: .5rem 0 1rem; }
.mjop-formaat summary { cursor: pointer; font-weight: 600; color: var(--vn-groen, #2346B8); }
.mjop-formaat ol { margin: .6rem 0 0 1.2rem; padding: 0; font-size: .95rem; }
.mjop-formaat li { margin-bottom: .35rem; }
.mjop-formaat code { font-size: .85em; background: var(--vn-vlak, #F3F6FB); padding: .1em .35em; border-radius: 4px; word-break: break-word; }
.mjop-importform { margin-bottom: .5rem; }
@media print { .mjop-import { display: none !important; } }