/* BIJ12-mock — dashboard. Licht thema, Inter lokaal geleverd (geen externe fontdienst). */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --tekst: #0f172a;
  --zacht: #64748b;
  --lijn: #cbd5e1;
  --greep: #64748b;
  --vlak: #f8fafc;
  --kop: #f1f5f9;
  --blauw: #1e3a8a;
  --accent: #0891b2;
  --goed: #15803d;
  --goed-vlak: #dcfce7;
  --let-op: #b45309;
  --let-op-vlak: #fef3c7;
  --fout: #b91c1c;
  --fout-vlak: #fee2e2;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: #ffffff;
  color: var(--tekst);
  font: 14px/1.5 "Inter", system-ui, sans-serif;
}
a { color: var(--blauw); }

.kop {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 24px; border-bottom: 1px solid var(--lijn);
}
.kop .streep { width: 32px; height: 3px; background: var(--accent); }
.kop h1 { margin: 0; font-size: 17px; font-weight: 600; }
.kop .label {
  font-size: 12px; font-weight: 600; color: var(--let-op);
  background: var(--let-op-vlak); padding: 2px 8px; border-radius: 3px;
}
.kop form { margin-left: auto; }

main { padding: 20px 24px 48px; max-width: 1400px; }
h2 { font-size: 15px; font-weight: 600; color: var(--blauw); margin: 28px 0 10px; }
.zacht { color: var(--zacht); }

.uitleg {
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: 4px;
  padding: 12px 16px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px;
}
.uitleg dt { color: var(--zacht); }
.uitleg dd { margin: 0; }
code { font-size: 12px; background: var(--kop); padding: 1px 5px; border-radius: 3px; }

.melding { padding: 10px 14px; border-radius: 4px; margin: 0 0 16px; }
.melding.goed { background: var(--goed-vlak); color: var(--goed); }
.melding.fout { background: var(--fout-vlak); color: var(--fout); }

/* Tabellen: zichtbare kolomlijnen, sleepbare grenzen met een greep die je ziet. */
.tabel-omhulsel { overflow-x: auto; }
table.tabel { border-collapse: collapse; table-layout: fixed; }
.tabel th, .tabel td {
  border: 1px solid var(--lijn); padding: 7px 10px; text-align: left;
  vertical-align: top; overflow: hidden; text-overflow: ellipsis;
}
.tabel th {
  position: relative; background: var(--kop); font-weight: 600; font-size: 12px;
  color: var(--zacht); white-space: nowrap;
  /* Zichtbaar laten overlopen: de greep hangt half over de kolomlijn, en een
     afgeknipte greep is alleen van één kant te pakken. */
  overflow: visible;
}
.tabel tbody tr:nth-child(even) td { background: var(--vlak); }
.tabel .getal { text-align: right; font-variant-numeric: tabular-nums; }
.greep {
  position: absolute; top: 0; right: -5px; width: 10px; height: 100%;
  cursor: col-resize; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 2px;
}
.greep::before, .greep::after {
  content: ""; width: 1px; height: 14px; background: var(--greep);
}

.stand { display: inline-block; font-size: 12px; font-weight: 500; padding: 1px 7px; border-radius: 3px; white-space: nowrap; }
.stand.goed { background: var(--goed-vlak); color: var(--goed); }
.stand.bezig { background: var(--let-op-vlak); color: var(--let-op); }
.stand.fout { background: var(--fout-vlak); color: var(--fout); }
.stand.neutraal { background: var(--kop); color: var(--zacht); }

button, .knop {
  font: inherit; font-size: 13px; font-weight: 500; border-radius: 4px; cursor: pointer;
  padding: 5px 12px; border: 1px solid var(--blauw); background: var(--blauw); color: #fff;
}
button:disabled { background: var(--kop); border-color: var(--lijn); color: var(--zacht); cursor: not-allowed; }
button.stil { background: #fff; color: var(--blauw); }
.acties { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acties form { margin: 0; }

.inlog { max-width: 360px; margin: 72px auto; padding: 0 16px; }
.inlog label { display: block; font-size: 13px; color: var(--zacht); margin: 14px 0 4px; }
.inlog input {
  width: 100%; font: inherit; padding: 7px 10px; border: 1px solid var(--lijn); border-radius: 4px;
}
.inlog button { margin-top: 20px; width: 100%; padding: 8px; }