:root {
  --papier: #f3efe4;
  --kaart: #fffdf8;
  --inkt: #1c2430;
  --zacht: #5c6b73;
  --lijn: #d7d0c3;
  --water: #0e6e6a;
  --water-diep: #0a3f3d;
  --zand: #e7d7b8;
  --open: #1f6b3a;
  --komend: #8a5a12;
  --gegund: #6d4c7a;
  --fout: #8c3a2f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 400px at 10% -10%, #e7f3f1 0%, transparent 60%),
    var(--papier);
  color: var(--inkt);
  font: 16px/1.45 "Segoe UI", "Helvetica Neue", sans-serif;
}

header {
  background: var(--water-diep);
  color: #f6f3ea;
  padding: 1.4rem 1.2rem 1.2rem;
}

header h1 {
  margin: 0;
  font-family: Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: 0.01em;
}

header p { margin: 0.35rem 0 0; color: #d5e4e2; max-width: 46rem; }

main { padding: 1rem 1.2rem 2.5rem; max-width: 1180px; margin: 0 auto; }

.balk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
  margin: 0.4rem 0 0.8rem;
}

label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--zacht); }

input, select, button {
  font: inherit;
  color: var(--inkt);
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
}

input[type="search"] { min-width: 16rem; }

button {
  background: var(--water);
  color: white;
  border-color: var(--water);
  cursor: pointer;
}

.telling { margin-left: auto; color: var(--zacht); font-size: 0.9rem; align-self: center; }

.tabelwrap {
  overflow-x: auto;
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: 12px;
}

table { width: 100%; border-collapse: collapse; min-width: 760px; }

th, td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }

th { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--zacht); background: #faf7f0; }

tr.rij { cursor: pointer; }
tr.rij:hover { background: #f6f1e6; }
tr.detail td { background: #f8f4ea; color: var(--inkt); }
tr.detail p { margin: 0.2rem 0; }

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  background: var(--zand);
}

.badge.open { background: #d9eadf; color: var(--open); }
.badge.komend { background: #f3e4c8; color: var(--komend); }
.badge.gegund { background: #eadff0; color: var(--gegund); }

a { color: var(--water-diep); }

.leeg, .melding { padding: 1rem; color: var(--zacht); }
.melding.fout { color: var(--fout); }

@media (max-width: 720px) {
  input[type="search"] { min-width: 0; width: 100%; }
  .telling { margin-left: 0; width: 100%; }
}