/* Onderdelen: knoppen, velden, kaarten, badges, tabellen, meldingen, filterbalk, paginering, grafiek. */

/* ---------- knoppen en velden ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.45rem 1rem; border-radius: 6px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.knop:hover { background: var(--accent-donker); color: #fff; }
.knop:disabled { opacity: 0.55; cursor: not-allowed; }
.knop-licht { background: #fff; color: var(--accent); border-color: var(--rand-sterk); }
.knop-licht:hover { background: var(--accent-licht); color: var(--accent-donker); }
.knop.gevaar { background: #9b1c1c; border-color: #9b1c1c; }
.knop-tekst { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0.4rem 0.3rem; text-decoration: underline; text-underline-offset: 2px; }
.knop-tekst:hover { color: var(--accent-donker); }
.veld {
  font: inherit; color: var(--tekst); background: #fff; border: 1px solid var(--rand-sterk); border-radius: 6px; padding: 0.45rem 0.65rem; min-height: 2.5rem; max-width: 100%;
}
.veld:hover { border-color: #b3a78f; }
.veld[readonly] { background: var(--bg); }
select.veld { padding-right: 1.5rem; }
label { font-size: 0.82rem; font-weight: 600; color: var(--tekst-zacht); }
.veld-groep { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.veld-groep.vink { flex-direction: row; align-items: center; gap: 0.45rem; align-self: flex-end; min-height: 2.5rem; }
.veld-groep.vink label { color: var(--tekst); font-size: 0.9rem; }
.veld-groep.vink input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.veld-groep.acties { flex-direction: row; align-items: flex-end; gap: 0.5rem; }
.veld-groep.groot { flex: 1 1 11rem; }
.veld-groep.groot .veld { width: 100%; }

/* ---------- kaarten ---------- */
.kaart { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--straal); padding: 1rem 1.1rem; min-width: 0; }
.kaart.sectie { margin: 0; }
.kaart-kop { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.kaart-kop h2 { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kaart-sub { color: var(--tekst-zacht); font-size: 0.85rem; }
.kaart-acties { margin-left: auto; }
.tabelkaart { padding: 0; overflow: hidden; }
.tabelkaart .pager { padding: 0.75rem 1rem; }
.sectie-titel { display: flex; align-items: center; gap: 0.5rem; }
.telling { display: inline-block; background: var(--neutraal-bg); color: var(--neutraal-tk); font-size: 0.75rem; font-weight: 650; padding: 0.05rem 0.5rem; border-radius: 999px; margin-left: 0.4rem; font-variant-numeric: tabular-nums; }
.leeg { color: var(--tekst-zacht); padding: 1.25rem 0.25rem; margin: 0; }
.tabelkaart .leeg { padding: 1.5rem 1.1rem; }
.uitleg { color: var(--tekst-zacht); font-size: 0.88rem; }

.kerncijfer, .kc { background: #fff; }
.kerncijfer { display: block; text-decoration: none; color: var(--tekst); padding: 0.85rem 1rem; }
.kc-link:hover { border-color: var(--rand-sterk); background: #fffdfa; color: var(--tekst); }
.kc-label { font-size: 0.8rem; color: var(--tekst-zacht); font-weight: 600; }
.kc-waarde { font-size: 1.5rem; font-weight: 650; line-height: 1.25; margin-top: 0.15rem; overflow-wrap: anywhere; }
.kc-sub { font-size: 0.8rem; color: var(--tekst-zacht); margin-top: 0.2rem; }
.kc { border: 1px solid var(--rand); border-radius: var(--straal); padding: 0.75rem 0.9rem; min-width: 0; }
.kc.let { background: var(--let-bg); border-color: #ecd49b; }
.kc.let .kc-sub, .kc.let .kc-label { color: var(--let-tk); }
.klein .kc-waarde { font-size: 1.2rem; }

/* ---------- badges ---------- */
.badge { display: inline-block; font-size: 0.75rem; font-weight: 650; line-height: 1.3; padding: 0.12rem 0.55rem; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.badge.goed { background: var(--goed-bg); color: var(--goed-tk); }
.badge.let { background: var(--let-bg); color: var(--let-tk); }
.badge.slecht { background: var(--slecht-bg); color: var(--slecht-tk); }
.badge.neutraal { background: var(--neutraal-bg); color: var(--neutraal-tk); }
.badges { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }

/* ---------- tabellen ---------- */
.tabel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tabel-wrap:focus-visible { outline-offset: -3px; }
.tabelkaart .tabel-wrap { border-radius: var(--straal) var(--straal) 0 0; }
.tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.845rem; }
.tabel th, .tabel td { padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rand); }
.tabel th { background: #faf7f1; font-size: 0.78rem; font-weight: 650; color: var(--tekst-zacht); position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--rand-sterk); border-bottom: 0; }
.tabel th.r, .tabel td.r { text-align: right; }
.tabel td.r { white-space: nowrap; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover td { background: #fbf7f0; }
.tabel .klikrij { cursor: pointer; }
.tabel .kol-naam { min-width: 14rem; }
.tabel .kol-breed { min-width: 16rem; }
.tabel th a { color: inherit; text-decoration: none; display: inline-block; }
.tabel th a:hover { color: var(--accent); }
.tabel th[aria-sort="ascending"], .tabel th[aria-sort="descending"] { color: var(--accent-donker); }
.tabel tr.markeer td { background: #fdf6e4; }
.tabel tr.markeer:hover td { background: #faf0d6; }
.tabel tr.markeer-slecht td { background: #fcf0ef; }
.tabel tr.markeer-slecht:hover td { background: #f9e6e4; }
.tabel .achter { color: var(--let-tk); font-weight: 650; }
.tabel.compact th, .tabel.compact td { padding: 0.35rem 0.5rem; }
.tabel ul { margin: 0; padding-left: 1.1rem; }
.voorstellen { list-style: none; padding-left: 0 !important; }
.voorstellen li { margin-bottom: 0.35rem; }
.rij-links { display: inline-flex; gap: 0.9rem; }
@media (min-width: 1024px) {
  .tabel-wrap.plakkop { max-height: calc(100vh - 11rem); overflow: auto; }
}

/* ---------- meldingen en blokken ---------- */
.melding { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; margin: 0.5rem 0; border-radius: var(--straal); border: 1px solid var(--rand); background: #fff; }
.melding.goed, .blok.goed { background: var(--goed-bg); border-color: #b9d9c1; color: var(--goed-tk); }
.melding.slecht, .blok.slecht { background: var(--slecht-bg); border-color: #e8b9b9; color: var(--slecht-tk); }
.melding.let, .blok.let { background: var(--let-bg); border-color: #ecd49b; color: var(--let-tk); }
.melding.neutraal, .blok.neutraal { background: #fff; border-color: var(--rand-sterk); color: var(--tekst); }
.melding-tekst { min-width: 0; }
.blok { padding: 0.7rem 0.9rem; border-radius: var(--straal); border: 1px solid var(--rand); margin: 0.75rem 0; }
.blok ul { margin: 0.4rem 0 0.4rem; padding-left: 1.2rem; }
.blok p:last-child { margin-bottom: 0; }
.blok .tech, .tech { font-size: 0.8rem; font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.blok a { color: inherit; }
details > summary { cursor: pointer; font-weight: 600; padding: 0.3rem 0; }
details > summary:hover { color: var(--accent); }
.blok details { margin-top: 0.5rem; }

/* ---------- filterbalk en paginering ---------- */
.filterbalk { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 0.75rem; }
.aantallen { margin: 0.25rem 0 0; color: var(--tekst-zacht); }
.aantallen strong { color: var(--tekst); }
.sep { display: inline-block; width: 1px; height: 0.9em; background: var(--rand-sterk); margin: 0 0.7rem; vertical-align: -0.1em; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--rand); }
.pager-tekst { color: var(--tekst-zacht); font-size: 0.85rem; }
.pager-knoppen { display: flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }
.pager-nr { min-width: 2.2rem; min-height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.6rem; border: 1px solid var(--rand-sterk); border-radius: 6px; text-decoration: none; background: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.pager-nr:hover { background: var(--accent-licht); }
.pager-nr.huidig { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager-nr.uit { color: #8a7f83; background: var(--bg); }
.pager-gat { color: var(--tekst-zacht); padding: 0 0.2rem; }
.meer { margin: 0.85rem 0 0; }

/* ---------- definitielijst ---------- */
.dl { margin: 0 0 0.5rem; display: grid; grid-template-columns: 1fr; gap: 0; }
.dl-rij { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rand); }
.dl-rij:last-child { border-bottom: 0; }
.dl dt { color: var(--tekst-zacht); font-weight: 600; font-size: 0.85rem; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- laden ---------- */
.laden { display: flex; align-items: center; gap: 0.7rem; padding: 2rem 0.5rem; color: var(--tekst-zacht); }
.spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--rand-sterk); border-top-color: var(--accent); border-radius: 50%; animation: draai 0.8s linear infinite; vertical-align: -0.15em; }
@keyframes draai { to { transform: rotate(360deg); } }
.fade { animation: infade 0.15s ease-out; }
@keyframes infade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fade, .spinner { animation: none; } }