/* ==========================================================================
   DienstOnline Web — beheer en CMS in de DienstOnline-huisstijl.
   Basis 1-op-1 uit phishing-sim/static/app.css (die weer uit de lead-parser
   komt); het eigen deel staat onderaan onder "DienstOnline Web".

   De tokens komen ongewijzigd uit dienstonline-redesign/design-system.css:
   getinte neutralen (nooit puur zwart of wit), een accent (hue 132, gemeten
   op de power-O in het echte logo), en het "De Lijn"-motief als scheiding.

   Dit is wel een beheerinterface en geen marketingsite, en dat verandert twee
   dingen. De basisregelhoogte is kleiner en de dichtheid hoger, want je scant
   hier tabellen in plaats van dat je een pagina leest. En er zijn drie
   statuskleuren bijgekomen (waarschuwing, fout, info) die de site niet nodig
   heeft: het palet kent alleen groen, en "fout" in groen tonen kan niet.
   Die drie zijn in dezelfde OKLCH-stijl gemaakt — lage chroma, getint — zodat
   ze niet uit de toon vallen.

   De Lijn hoort volgens design.md 2 tot 3 keer per pagina voor te komen, niet
   bij elke sectie. Hier: onder de paginakop, en verder alleen waar een echte
   scheiding tussen twee blokken zit.
   ========================================================================== */

:root {
  /* ---- huisstijl, ongewijzigd overgenomen ---- */
  --ink: oklch(24% 0.02 150);
  --slate: oklch(45% 0.02 160);
  --paper: oklch(93% 0.015 110);
  --surface: oklch(89% 0.015 110);
  --signal: oklch(58% 0.15 132);
  --signal-deep: oklch(46% 0.14 132);
  --signal-deeper: oklch(40% 0.13 132);
  --live: oklch(72% 0.19 132);

  /* ---- statuskleuren, in dezelfde stijl bijgemaakt ---- */
  --warn: oklch(48% 0.11 70);
  --warn-bg: oklch(94% 0.035 80);
  --bad: oklch(46% 0.15 27);
  --bad-bg: oklch(94% 0.03 27);
  --info: oklch(45% 0.08 240);
  --info-bg: oklch(93% 0.025 240);
  --ok-bg: oklch(93% 0.04 132);

  /* ---- afgeleiden ---- */
  --lijn: color-mix(in oklch, var(--ink) 12%, transparent);
  --lijn-zacht: color-mix(in oklch, var(--ink) 7%, transparent);
  --grijs-bg: color-mix(in oklch, var(--ink) 6%, var(--paper));

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --radius: 6px;
  --max-width: 1180px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
}

body {
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: 'Archivo Expanded', 'Work Sans', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}
h1 { font-size: 26px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

a { color: var(--signal-deep); }
a:hover { color: var(--signal-deeper); }

:focus-visible { outline: 2px solid var(--signal-deep); outline-offset: 2px; }

.mono, code, pre {
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}
code { font-size: 0.9em; }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 var(--space-1);
}
.eyebrow-accent { color: var(--signal-deep); }

.klein { font-size: 13px; }
.muted { color: var(--slate); }
.nowrap { white-space: nowrap; }
.breek { overflow-wrap: anywhere; }

/* ---------- logo ---------- */

.logo-mark {
  display: inline-flex;
  align-items: center;
  font-family: 'Archivo Expanded', sans-serif;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.012em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.logo-o {
  display: block;
  width: 0.70em;
  height: 0.70em;
  align-self: baseline;
  position: relative;
  top: 0.130em;
  margin: 0 0.005em 0 0.062em;
  color: oklch(60% 0.19 132);
}
.logo-tld {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  font-size: 0.28em;
  color: var(--slate);
  align-self: flex-start;
  margin: 0.34em 0 0 0.22em;
  letter-spacing: 0.06em;
}
.logo-app {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  border-left: 1px solid var(--lijn);
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  align-self: center;
  white-space: nowrap;
}

/* ---------- De Lijn ---------- */

.lijn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.lijn .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  flex-shrink: 0;
}
.lijn .streep { flex: 1; height: 1px; background: var(--lijn); }

/* ---------- kop ---------- */

.top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  background: var(--paper);
  border-bottom: 1px solid var(--lijn);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-wrap: wrap;
  row-gap: 0;
}
.top .brand { display: flex; align-items: center; padding: 12px 0; text-decoration: none; }
.top nav { display: flex; gap: 2px; margin-right: auto; flex-wrap: wrap; }
.top nav a {
  padding: 16px 12px 14px;
  text-decoration: none;
  color: var(--slate);
  border-bottom: 2px solid transparent;
  font-size: 14px;
}
.top nav a:hover { color: var(--ink); }
.top nav a.actief { color: var(--ink); border-bottom-color: var(--signal); }

.wie { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; }
.wie form { margin: 0; }

button.link {
  background: none; border: 0; padding: 0;
  color: var(--signal-deep); cursor: pointer;
  font: inherit; text-decoration: underline;
}

main { max-width: var(--max-width); margin: 0 auto; padding: var(--space-3) var(--space-3) 64px; }

footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-4);
  color: var(--slate);
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
}

/* ---------- kaarten ---------- */

.kaart {
  background: var(--paper);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: var(--space-2) 0;
}
.kaart h2 { margin-top: 0; }
.kaart.leeg { text-align: center; padding: 44px var(--space-3); }
.kaart.leeg h2 { margin-bottom: var(--space-1); }

.kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 760px) { .kolommen { grid-template-columns: 1fr; } }

.gecentreerd {
  display: flex; min-height: 100vh;
  align-items: center; justify-content: center;
  padding: var(--space-3);
  background: var(--surface);
}
.smal { width: 100%; max-width: 370px; }

/* ---------- formulieren ---------- */

label { display: block; font-size: 13px; color: var(--slate); margin-bottom: 4px; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  font: inherit;
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 14px;
}
textarea { font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--signal-deep);
  outline-offset: -1px;
  border-color: var(--signal-deep);
}
input[type=checkbox] { width: auto; margin: 0 6px 0 0; }
.checkregel { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 14px; color: var(--ink); }
.checkregel label { margin: 0; color: var(--ink); }

button, .knop {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .knop:hover { border-color: var(--slate); color: var(--ink); }

button.primair, .knop.primair {
  background: var(--signal-deep);
  border-color: var(--signal-deep);
  color: var(--paper);
  font-weight: 500;
}
button.primair:hover, .knop.primair:hover {
  background: var(--signal-deeper);
  border-color: var(--signal-deeper);
  color: var(--paper);
}
button.breed { width: 100%; }
button.gevaar { color: var(--bad); border-color: color-mix(in oklch, var(--bad) 30%, transparent); }
button.gevaar:hover { background: var(--bad-bg); border-color: var(--bad); }

.knoppenrij { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }
.knoppenrij .rechts { margin-left: auto; }

.filters {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: var(--space-2) 0;
}
.filters label { margin: 0; }
.filters input, .filters select { margin: 0; min-width: 180px; }

/* ---------- tabellen ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14px;
}
th {
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--slate);
  font-weight: 400;
  padding: 10px 12px;
  border-bottom: 1px solid var(--lijn);
  background: var(--grijs-bg);
}
td { padding: 9px 12px; border-bottom: 1px solid var(--lijn-zacht); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.klikbaar:hover { background: var(--grijs-bg); cursor: pointer; }
tbody tr.uit td { opacity: 0.55; }

.afkap { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.compact td, table.compact th { padding: 7px 12px; }

/* ---------- statuslabels ---------- */

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.pill.groot { font-size: 13px; padding: 4px 12px; }
.pill.ok { background: var(--ok-bg); color: var(--signal-deeper); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.muted { background: var(--grijs-bg); color: var(--slate); }

.tellers { display: flex; gap: 10px; flex-wrap: wrap; margin: var(--space-2) 0; }
.teller {
  padding: 10px 16px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 13px;
}
.teller strong {
  display: block;
  font-family: 'Archivo Expanded', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
}
.teller.ok { background: var(--ok-bg); color: var(--signal-deeper); }
.teller.info { background: var(--info-bg); color: var(--info); }
.teller.warn { background: var(--warn-bg); color: var(--warn); }
.teller.bad { background: var(--bad-bg); color: var(--bad); }
.teller.muted { background: var(--grijs-bg); color: var(--slate); }
.teller:hover { border-color: currentColor; }

/* ---------- meldingen ---------- */

.melding {
  padding: 11px 14px;
  border-radius: var(--radius);
  margin: 12px 0;
  font-size: 14px;
  border-left: 3px solid currentColor;
}
.melding.bad { background: var(--bad-bg); color: var(--bad); }
.melding.warn { background: var(--warn-bg); color: var(--warn); }
.melding.ok { background: var(--ok-bg); color: var(--signal-deeper); }
.melding.info { background: var(--info-bg); color: var(--info); }
.melding ul { margin: 6px 0 0; padding-left: 20px; }
.melding li { margin: 3px 0; }

/* ---------- detail ---------- */

.kruimels { font-size: 13px; color: var(--slate); margin: 0 0 12px; }
.kop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.kop h1 { margin: 0; }

dl { margin: 0; display: grid; grid-template-columns: 132px 1fr; gap: 6px var(--space-2); }
dl.twee { grid-template-columns: 132px 1fr 132px 1fr; }
@media (max-width: 760px) { dl.twee { grid-template-columns: 132px 1fr; } }
dt { color: var(--slate); font-size: 13px; }
dd { margin: 0; }

pre.bericht, pre.uitvoer {
  background: var(--grijs-bg);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 12px 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  margin: 0;
}

.paginering { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-2) 0; font-size: 14px; }

/* ---------- regelformulier ---------- */

.veldrooster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-2); }
@media (max-width: 760px) { .veldrooster { grid-template-columns: 1fr; } }
.veldrooster textarea { min-height: 62px; }

.hint {
  font-size: 12px;
  color: var(--slate);
  margin: -10px 0 12px;
  line-height: 1.4;
}

button.klein, .knop.klein { padding: 5px 11px; font-size: 13px; }
.subnav {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 0 var(--space-3);
  background: var(--grijs-bg);
  border-bottom: 1px solid var(--lijn);
}
.subnav a {
  padding: 11px 14px 9px;
  font-size: 13.5px; color: var(--slate); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--ink); }
.subnav a.actief { color: var(--ink); border-bottom-color: var(--signal); font-weight: 500; }

.vw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   DienstOnline Web
   ========================================================================== */

.top nav a .teller-mini {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  background: var(--warn-bg); color: var(--warn); border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}
.adres { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.rij-acties { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.rij-acties form { margin: 0; }
td.rechts, th.rechts { text-align: right; }
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline-form input, .inline-form select { margin: 0; }
.inline-form > div { flex: 1 1 220px; }
.modi { display: grid; gap: 6px; margin-bottom: 14px; }
.modi label {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 9px 12px;
  border: 1px solid var(--lijn); border-radius: var(--radius); color: var(--ink); font-size: 14px; cursor: pointer;
}
.modi label:has(input:checked) { border-color: var(--signal-deep); background: var(--ok-bg); }
.modi input { margin-top: 3px; }
.dns {
  background: var(--grijs-bg); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 10px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; overflow-wrap: anywhere;
}
.kaart.gevaar { border-color: color-mix(in oklch, var(--bad) 35%, transparent); }
.gecentreerd .kaart { margin: 0; }
.gecentreerd .logo-slot { display: flex; justify-content: center; margin-bottom: var(--space-3); }
.link-kopie { display: flex; gap: 6px; }
.link-kopie input { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }
details.uitklap > summary { cursor: pointer; color: var(--signal-deep); font-size: 14px; margin: 6px 0; }

/* ---------- editor ---------- */
/* De editor vult precies het scherm: balk boven, daaronder frame en paneel die
   elk zelf scrollen. De pagina zelf scrolt nooit, anders schuift de balk weg
   zodra een bestandskiezer of focus iets in beeld wil halen. */
body.editor { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.editor .top { position: static; flex: 0 0 auto; }
body.editor main { max-width: none; width: 100%; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.editor #editor { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.editor footer { display: none; }
.editor-balk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px var(--space-3); background: var(--paper); border-bottom: 1px solid var(--lijn);
}
.editor-balk h1 { font-size: 16px; }
.editor-balk select { margin: 0; width: auto; max-width: 260px; padding: 6px 8px; font-size: 14px; }
.editor-balk form { margin: 0; }
.editor-balk .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.editor-melding { margin: 0; border-radius: 0; border-left: 0; border-bottom: 1px solid currentColor; }
.editor-werk { display: grid; grid-template-columns: minmax(0, 1fr) 340px; flex: 1 1 auto; min-height: 0; }
.editor-frame { position: relative; background: #fff; border-right: 1px solid var(--lijn); }
.editor-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.editor-frame.smal iframe { width: 390px; margin: 0 auto; border-left: 1px solid var(--lijn); border-right: 1px solid var(--lijn); }
.editor-paneel { overflow: auto; padding: 16px 18px; background: var(--paper); }
.editor-paneel h2 { margin-bottom: 8px; }
.editor-paneel .leeg { color: var(--slate); font-size: 14px; }
.editor-paneel textarea { min-height: 90px; font-family: 'Work Sans', sans-serif; font-size: 14px; }
.legenda { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--slate); margin: 8px 0 14px; }
.legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legenda .l-vrij::before { background: oklch(62% 0.16 132); }
.legenda .l-vast::before { background: oklch(70% 0.02 160); }
.legenda .l-lijst::before { background: oklch(60% 0.12 240); }
.focuskiezer { position: relative; margin: 8px 0 12px; cursor: crosshair; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--lijn); }
.focuskiezer img { display: block; width: 100%; height: auto; }
.focuskiezer .punt {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 2px oklch(40% 0.13 132), 0 2px 8px rgba(0,0,0,.4); pointer-events: none;
}
.voorbeeld-foto { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--lijn); display: block; margin: 6px 0 12px; }
.paneel-sectie { border-top: 1px solid var(--lijn); padding-top: 14px; margin-top: 14px; }
.kandidaat { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--lijn-zacht); font-size: 13.5px; }
.bezig { opacity: .55; pointer-events: none; }
@media (max-width: 900px) {
  body.editor { height: auto; overflow: visible; display: block; }
  .editor-werk { grid-template-columns: 1fr; }
  .editor-frame { height: 70vh; border-right: 0; border-bottom: 1px solid var(--lijn); }
  .editor-frame.smal iframe { width: 100%; }
  #weergave { display: none; }
}