/* 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"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-latin-400-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; }

/* Het overzicht: per aanvraag een paneel van twee regels. */
.aanvragen { display: grid; gap: 8px; }
.aanvraag { border: 1px solid var(--lijn); border-radius: 4px; padding: 8px 12px; display: grid; gap: 4px; }
.aanvraag .regel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 28px; }
.aanvraag .regel.zacht { font-size: 13px; }
.aanvraag .nummer { font-weight: 600; font-variant-numeric: tabular-nums; }
.aanvraag .rechts { margin-left: auto; }
.aanvraag form { margin: 0; }

/* Links het werk, rechts het logboek van ontvangen aanroepen, zo hoog als het scherm. */
.twee-kolommen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 42%); }
.twee-kolommen main { max-width: none; min-width: 0; }
.logboek {
  position: sticky; top: 0; height: calc(100vh - 57px);
  display: flex; flex-direction: column; padding: 20px 24px 24px 0;
}
.logboek h2 { margin-top: 0; }
.aanroepen { flex: 1; overflow-y: auto; display: grid; gap: 12px; align-content: start; }

/* Eén aanroep: een kop met tijd, pad en status, daaronder request en response naast elkaar. */
.aanroep { border: 1px solid var(--lijn); border-radius: 4px; background: #fff; }
.aanroep header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 10px; background: var(--kop); border-bottom: 1px solid var(--lijn);
}
.aanroep time {
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--blauw);
  background: #dbeafe; padding: 1px 7px; border-radius: 3px;
}
.aanroep header code { background: none; padding: 0; font-size: 12px; }
.aanroep header .stand { margin-left: auto; }
.subpanelen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.subpanelen section { min-width: 0; }
.subpanelen section + section { border-left: 1px solid var(--lijn); }
.subpanelen h3 { margin: 0; padding: 5px 10px 0; font-size: 12px; font-weight: 600; color: var(--zacht); }
.subpanelen pre {
  margin: 0; padding: 6px 10px 10px; max-height: 320px; overflow: auto;
  font: 11px/1.5 "JetBrains Mono", ui-monospace, monospace; color: var(--tekst);
}
@media (max-width: 1000px) {
  .twee-kolommen { grid-template-columns: minmax(0, 1fr); }
  .logboek { position: static; height: 70vh; padding: 0 24px 24px; }
}
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; }