/* Platformdashboard — één stijlblad, geen build, geen externe bronnen.
 * De CSP staat alleen 'self' toe, dus alles staat hier en de fonts staan
 * ernaast.
 *
 * De tokens komen uit `src/app/globals.css` van marketing-dashboard, zodat
 * dit scherm bij de rest van EXIT hoort: warme groen-getinte achtergrond,
 * witte kaarten die er net boven zweven, EXIT-groen alleen voor accenten en
 * status. Waar dat dashboard Tailwind-klassen gebruikt (emerald/amber/red
 * voor Betrouwbaar/Aandacht/Kritiek) staan hier dezelfde waarden.
 */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geistmono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* --- palet (licht) ------------------------------------------------- */
  --papier: oklch(0.977 0.006 128);          /* background */
  --paneel: oklch(1 0 0);                    /* card — wit bóven de pagina */
  --verhoogd: oklch(0.965 0.012 128);        /* secondary/muted */
  --rand: oklch(0.94 0.014 128);
  --rand-sterk: oklch(0.25 0.02 128 / 16%);
  --inkt: oklch(0.17 0 0);
  --inkt-zacht: oklch(0.44 0.005 128);
  --accent: oklch(0.55 0.16 128);            /* primary — EXIT-groen */
  --accent-vlak: oklch(0.96 0.035 128);
  --accent-inkt: oklch(0.42 0.14 128);
  --accent-contrast: oklch(1 0 0);

  /* Status — dezelfde emerald/amber/red als het DataTrustCenter. */
  --ok: #047857;        --ok-vlak: rgb(16 185 129 / .12);
  --let-op: #b45309;    --let-op-vlak: rgb(245 158 11 / .14);
  --fout: #b91c1c;      --fout-vlak: rgb(239 68 68 / .12);
  --onbekend: oklch(0.44 0.005 128);
  --onbekend-vlak: oklch(0.965 0.012 128);

  /* --- vorm en diepte ------------------------------------------------ */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --schaduw-xs: 0 1px 2px 0 rgb(0 0 0 / .03);
  --schaduw: 0 1px 2px 0 rgb(0 0 0 / .04), 0 8px 24px -12px rgb(0 0 0 / .08);
  --schaduw-op: 0 2px 4px -1px rgb(0 0 0 / .05), 0 14px 34px -12px rgb(0 0 0 / .13);

  /* --- beweging ------------------------------------------------------ */
  --veer: cubic-bezier(0.32, 0.72, 0, 1);
  --snel: 150ms;
  --normaal: 250ms;

  --code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Bijna-neutrale vlakken met een zweem groen, en duidelijke lagen:
       chrome het donkerst, pagina daarboven, kaarten er zichtbaar bovenop. */
    --papier: oklch(0.185 0.004 145);
    --paneel: oklch(0.305 0.006 145);
    --verhoogd: oklch(0.35 0.006 145);
    --rand: oklch(0.37 0.006 145);
    --rand-sterk: oklch(1 0 0 / 20%);
    --inkt: oklch(0.975 0.004 145);
    --inkt-zacht: oklch(0.77 0.012 145);
    --accent: oklch(0.72 0.19 128);
    --accent-vlak: oklch(0.35 0.018 138);
    --accent-inkt: oklch(0.87 0.11 128);
    --accent-contrast: oklch(0.16 0.004 145);

    --ok: #6ee7b7;        --ok-vlak: rgb(16 185 129 / .16);
    --let-op: #fcd34d;    --let-op-vlak: rgb(245 158 11 / .16);
    --fout: #fca5a5;      --fout-vlak: rgb(239 68 68 / .16);
    --onbekend: oklch(0.77 0.012 145);
    --onbekend-vlak: oklch(0.27 0.005 145);

    /* Donker: diepte komt uit contrast, niet uit zware slagschaduwen. */
    --schaduw-xs: 0 1px 2px 0 rgb(0 0 0 / .18);
    --schaduw: 0 1px 2px 0 rgb(0 0 0 / .22);
    --schaduw-op: 0 6px 20px -8px rgb(0 0 0 / .45);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 15px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Optische tracking: grote tekst leest te los, kleine tekst wil lucht.
     Inter heeft geen optical-size-as, dus corrigeren we per stap. */
  letter-spacing: 0;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- kop --- */

header.balk {
  display: flex; align-items: center; gap: 24px;
  padding: 0 24px; height: 56px;
  border-bottom: 1px solid var(--rand);
  background: var(--paneel);
  position: sticky; top: 0; z-index: 20;
}
header.balk .merk {
  display: flex; align-items: center; gap: 9px;
  font-weight: 620; letter-spacing: -.011em; white-space: nowrap;
}
header.balk .merk img { height: 19px; width: auto; display: block; }
header.balk .merk span { color: var(--inkt-zacht); font-weight: 400; }
header.balk nav { display: flex; gap: 2px; flex: 1; }
header.balk nav a {
  padding: 6px 12px; border-radius: var(--radius-sm); color: var(--inkt-zacht);
  font-weight: 500; letter-spacing: .005em;
  transition: background var(--snel) var(--veer), color var(--snel) var(--veer);
}
header.balk nav a:hover { background: var(--verhoogd); color: var(--inkt); text-decoration: none; }
header.balk nav a.actief { background: var(--accent-vlak); color: var(--accent-inkt); }
header.balk .wie { color: var(--inkt-zacht); font-size: 13px; display: flex; gap: 10px; align-items: center; }
header.balk form { margin: 0; }

main { padding: 26px 24px; max-width: 1500px; margin: 0 auto; }

h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.016em; font-weight: 640; }
h2 { font-size: 15px; margin: 30px 0 10px; letter-spacing: -.006em; font-weight: 600; }
.onderschrift { color: var(--inkt-zacht); font-size: 13px; letter-spacing: .005em; margin: 0 0 22px; }

/* --- statusbolletjes en -etiketten --- */

.staat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.stip { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ok       { color: var(--ok); }        .ok .stip       { background: var(--ok); }
.let_op   { color: var(--let-op); }    .let_op .stip   { background: var(--let-op); }
.fout     { color: var(--fout); }      .fout .stip     { background: var(--fout); }
.onbekend { color: var(--onbekend); }  .onbekend .stip { background: var(--onbekend); }
.gestopt  { color: var(--onbekend); }  .gestopt .stip  { background: transparent; border: 1.5px solid var(--onbekend); }

.tellers { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.teller {
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 11px 16px;
  background: var(--paneel); min-width: 108px; box-shadow: var(--schaduw-xs);
}
.teller b { display: block; font-size: 24px; font-weight: 620; letter-spacing: -.021em; font-variant-numeric: tabular-nums; }
.teller.ok b { color: var(--ok); }
.teller.let_op b { color: var(--let-op); }
.teller.fout b { color: var(--fout); }
.teller.gestopt b { color: var(--onbekend); }
.teller span { font-size: 12px; color: var(--inkt-zacht); letter-spacing: .01em; }

/* --- bronkaarten --- */

.bronnen { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.bron {
  border: 1px solid var(--rand); border-left: 3px solid var(--rand);
  border-radius: var(--radius); padding: 13px 15px; background: var(--paneel);
  box-shadow: var(--schaduw);
  transition: box-shadow var(--normaal) var(--veer), transform var(--normaal) var(--veer);
}
.bron:hover { box-shadow: var(--schaduw-op); }
.bron.fout   { border-left-color: var(--fout); }
.bron.let_op { border-left-color: var(--let-op); }
.bron.ok     { border-left-color: var(--ok); }
/* Met pensioen: hij staat er nog, maar hij vraagt niets van je. */
.bron.gestopt { border-left-style: dashed; opacity: .62; }
.bron.gestopt:hover { opacity: 1; }
.bron .titel { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.bron .naam { font-weight: 600; letter-spacing: -.006em; overflow-wrap: anywhere; }
.bron .soort { font-size: 11px; color: var(--inkt-zacht); text-transform: uppercase; letter-spacing: .05em; }
.bron .toelichting { font-size: 13px; color: var(--inkt-zacht); margin-top: 6px; letter-spacing: .005em; overflow-wrap: anywhere; }
.bron .voet { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; gap: 8px; }
.bron .herkomst { font-family: var(--code); font-size: 11px; color: var(--inkt-zacht); }

.verloop { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.verloop i { width: 4px; height: 100%; border-radius: 1px; background: var(--onbekend); display: block; }
.verloop i.v-ok { background: var(--ok); }
.verloop i.v-fout { background: var(--fout); }
.verloop i.v-bezig { background: var(--accent); }

details.detail summary {
  cursor: pointer; font-size: 12px; color: var(--inkt-zacht); margin-top: 8px;
}
details.detail dl { margin: 8px 0 0; font-size: 12px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
details.detail dt { color: var(--inkt-zacht); }
details.detail dd { margin: 0; font-family: var(--code); overflow-wrap: anywhere; }

/* --- tabellen --- */

.omhulsel {
  border: 1px solid var(--rand); border-radius: var(--radius); overflow: auto;
  background: var(--paneel); box-shadow: var(--schaduw-xs);
}
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  position: sticky; top: 0; background: var(--paneel); text-align: left;
  font-weight: 600; font-size: 12px; color: var(--inkt-zacht); letter-spacing: .01em;
  padding: 9px 12px; border-bottom: 1px solid var(--rand); white-space: nowrap;
}
thead th a { color: inherit; }
tbody td { padding: 8px 12px; border-bottom: 1px solid var(--rand); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--accent-vlak); }
td.waarde {
  font-family: var(--code); font-size: 12px;
  max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
tbody tr:hover td.waarde { white-space: normal; overflow-wrap: anywhere; }
td .leeg { color: var(--inkt-zacht); font-style: italic; }
.getal { text-align: right; font-variant-numeric: tabular-nums; }

.pil {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  background: var(--onbekend-vlak); color: var(--inkt-zacht); font-weight: 600;
  letter-spacing: .01em;
}
.pil.sleutel { background: var(--accent-vlak); color: var(--accent-inkt); }

/* --- formulieren --- */

input[type=text], input[type=password], select, textarea {
  font: inherit; padding: 8px 11px; border: 1px solid var(--rand);
  border-radius: var(--radius-sm); background: var(--papier); color: var(--inkt); width: 100%;
  transition: border-color var(--snel) var(--veer), box-shadow var(--snel) var(--veer);
}
textarea { font-family: var(--code); font-size: 13px; min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
}

button, .knop {
  font: inherit; font-weight: 550; letter-spacing: .005em; padding: 8px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--rand); background: var(--paneel); color: var(--inkt);
  cursor: pointer; box-shadow: var(--schaduw-xs);
  transition: background var(--snel) var(--veer), border-color var(--snel) var(--veer),
              box-shadow var(--snel) var(--veer);
}
button:hover, .knop:hover { border-color: var(--rand-sterk); text-decoration: none; }
button.primair {
  background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
}
button.primair:hover { filter: brightness(1.06); border-color: var(--accent); }
.knoppenrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.velden { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.veld { display: flex; flex-direction: column; gap: 5px; }
.veld label { font-size: 12px; color: var(--inkt-zacht); letter-spacing: .01em; }
.veld input, .veld select { width: auto; min-width: 170px; }

.melding {
  padding: 11px 15px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 13px;
  border: 1px solid transparent;
}
.melding.fout { background: var(--fout-vlak); color: var(--fout); border-color: color-mix(in srgb, var(--fout) 35%, transparent); }
.melding.let_op { background: var(--let-op-vlak); color: var(--let-op); border-color: color-mix(in srgb, var(--let-op) 35%, transparent); }
.melding.info { background: var(--accent-vlak); color: var(--accent-inkt); border-color: color-mix(in oklch, var(--accent) 30%, transparent); }
.melding code { font-family: var(--code); }

/* --- inlogscherm --- */

.inlogblad { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.inlogkaart {
  width: 100%; max-width: 390px; border: 1px solid var(--rand);
  border-radius: calc(var(--radius) + 4px);
  padding: 30px; background: var(--paneel); box-shadow: var(--schaduw-op);
}
.inlogkaart .merk { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.inlogkaart .merk img { height: 26px; width: auto; }
.inlogkaart h1 { font-size: 19px; }
.inlogkaart p { color: var(--inkt-zacht); font-size: 13px; letter-spacing: .005em; }
.inlogkaart button { width: 100%; margin-top: 14px; }

/* --- schemakaart --- */

.kaartomhulsel {
  border: 1px solid var(--rand); border-radius: var(--radius); background: var(--paneel);
  position: relative; overflow: hidden; height: 640px; min-height: 360px;
  box-shadow: var(--schaduw-xs); resize: vertical;
}
.kaartomhulsel svg { width: 100%; height: 100%; display: block; cursor: grab; }
.kaartomhulsel svg.slepen { cursor: grabbing; }
.kaartknoppen {
  position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; z-index: 2;
  align-items: center;
}
.kaartknoppen button { padding: 5px 10px; font-size: 12px; }
.kaartknoppen button[aria-pressed="true"] {
  border-color: var(--accent); color: var(--accent-inkt); background: var(--accent-vlak);
}
.kaartknoppen input[type="search"] {
  padding: 5px 10px; font-size: 12px; width: 150px;
  border: 1px solid var(--rand); border-radius: var(--radius-sm);
  background: var(--paneel); color: var(--inkt); font-family: var(--code);
}
.kaartknoppen input[type="search"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kaartlegenda {
  position: absolute; left: 10px; bottom: 10px; font-size: 11px; color: var(--inkt-zacht);
  background: var(--papier); border: 1px solid var(--rand); border-radius: var(--radius-sm);
  padding: 5px 10px; pointer-events: none;
}

/* Blokjes. Rustig in de basis, want de kaart moet leesbaar zijn vóór je iets
   aanwijst; alle nadruk komt pas bij focus. */
.knoop rect {
  fill: var(--paneel); stroke: var(--rand); stroke-width: 1;
  transition: stroke var(--snel) var(--veer), fill var(--snel) var(--veer);
}
.knoop { cursor: pointer; }
.knoop text { font-size: 11px; fill: var(--inkt); font-family: var(--code); }
.knoop text.tel { fill: var(--inkt-zacht); font-size: 9.5px; }
.knoop.view rect { fill: var(--verhoogd); stroke-dasharray: 3 2; }
.knoop:hover rect { stroke: var(--accent); stroke-width: 2; }

/* Lijnen lopen van wie verwijst naar waarnaar verwezen wordt; de pijlpunt
   staat aan de kant van de tabel met de sleutel waar hij heen wijst. */
.lijn {
  stroke: var(--rand-sterk); stroke-width: 1.1; fill: none;
  marker-end: url(#pijl);
  transition: stroke var(--snel) var(--veer), opacity var(--snel) var(--veer);
}
.lijn.gemarkeerd { stroke: var(--accent); stroke-width: 2; marker-end: url(#pijl-actief); }
.punt { fill: var(--rand-sterk); }
.punt.actief { fill: var(--accent); }

/* Eilanden: een vlak achter elke samenhangende groep tabellen. */
.eiland { fill: var(--verhoogd); opacity: .5; stroke: var(--rand); stroke-dasharray: 4 4; }
.blokkop {
  font-size: 12px; fill: var(--inkt-zacht); font-family: var(--code);
  letter-spacing: .02em;
}
.scheiding { stroke: var(--rand); stroke-width: 1; stroke-dasharray: 3 4; }

/* Focus: wie niet meedoet dooft. Dat is het hele punt van de kaart —
   je wilt één tabel en haar omgeving zien, niet tweehonderd tegelijk. */
#kaart.gefocust .knoop:not(.actief):not(.buur) { opacity: .16; }
#kaart.gefocust .lijn:not(.gemarkeerd) { opacity: .08; }
#kaart.gefocust .eiland { opacity: .22; }
.knoop.actief rect { stroke: var(--accent); stroke-width: 2.5; fill: var(--accent-vlak); }
.knoop.buur rect { stroke: var(--accent); stroke-width: 1.6; }
#kaart.zoekt .knoop:not(.gevonden) { opacity: .16; }
.knoop.gevonden rect { stroke: var(--let-op); stroke-width: 2; }
#kaart.los-verborgen .knoop.los { display: none; }
#kaart.los-verborgen .blokkop, #kaart.los-verborgen .scheiding { display: none; }

/* Zijpaneel bij de gekozen tabel: hier staat letterlijk wat waarnaartoe wijst. */
.kaartdetail {
  position: absolute; right: 10px; top: 46px; bottom: 10px; width: 264px; z-index: 2;
  background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schaduw-op); padding: 14px 15px; overflow-y: auto;
  display: none; font-size: 13px;
}
.kaartdetail.open { display: block; }
.kaartdetail h3 {
  margin: 0 22px 3px 0; font-size: 14px; font-family: var(--code); word-break: break-all;
}
.detailmeta { margin: 0 0 10px; font-size: 11.5px; color: var(--inkt-zacht); }
.detailuitleg { margin: 0 0 12px; font-size: 12px; color: var(--inkt-zacht); }
.detailsluit {
  position: absolute; right: 8px; top: 6px; border: 0; background: none;
  font-size: 17px; line-height: 1; color: var(--inkt-zacht); cursor: pointer; padding: 3px 6px;
}
.detailsluit:hover { color: var(--inkt); }
.detailblok { margin-bottom: 12px; }
.detailblok h4 {
  margin: 0 0 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--inkt-zacht); font-weight: 600;
}
.detailblok ul { margin: 0; padding: 0; list-style: none; }
.detailblok li { margin-bottom: 4px; }
.detailblok button {
  border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer;
  font-family: var(--code); font-size: 12px; text-align: left;
}
.detailblok button:hover { text-decoration: underline; }
.detailblok .via { display: block; font-size: 10.5px; color: var(--inkt-zacht); }
.detailleeg { margin: 0; font-size: 12px; color: var(--inkt-zacht); }
.detailopen { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 600; }

@media (max-width: 760px) {
  .kaartdetail { left: 10px; width: auto; top: auto; height: 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .knoop rect, .lijn { transition: none; }
}

.kruimels { font-size: 13px; color: var(--inkt-zacht); margin-bottom: 14px; }
.kruimels a { color: var(--inkt-zacht); }
.kruimels b { color: var(--inkt); font-weight: 600; }

.tweeluik { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .tweeluik { grid-template-columns: 1fr; } }

.zijpaneel {
  border: 1px solid var(--rand); border-radius: var(--radius); background: var(--paneel);
  padding: 15px; box-shadow: var(--schaduw-xs);
}
.zijpaneel h3 { font-size: 13px; margin: 0 0 8px; letter-spacing: -.006em; }
.zijpaneel ul { margin: 0; padding-left: 16px; font-size: 13px; }
.zijpaneel li { margin-bottom: 3px; }

footer.voet { color: var(--inkt-zacht); font-size: 12px; padding: 30px 24px; text-align: center; }
footer.voet code { font-family: var(--code); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* --- kleine tekstonderdelen ------------------------------------------
 * Deze stonden eerst als style="…" in de templates. Dat werkte niet: de
 * CSP staat alleen style-src 'self' toe, dus de browser gooide elk
 * style-attribuut weg — 174 keer per paginaweergave, en de opmaak was er
 * simpelweg niet. Klassen dus.
 */

.voetnoot { margin-top: 18px; font-size: 12px; }
.hint { color: var(--inkt-zacht); font-size: 12px; }
.leegmelding { color: var(--inkt-zacht); }
.detailkoppeling { margin: 8px 0 0; }
.bijschrift { color: var(--inkt-zacht); font-size: 12px; margin-top: 2px; }
.bereik { color: var(--inkt-zacht); font-size: 13px; font-variant-numeric: tabular-nums; }

.kolomlijst { font-size: 12px; }
.kolomlijst td { padding: 5px 6px; }
.kolomtype { color: var(--inkt-zacht); font-family: var(--code); font-size: 11px; }

.zijpaneel h3.verderop { margin-top: 18px; }
.via { color: var(--inkt-zacht); }
.indexregel { font-family: var(--code); font-size: 11px; overflow-wrap: anywhere; }