/* De opmaak van het skelet, in de Processware-huisstijl (zie docs/huisstijl.md in
   PW-processware-isms): staalblauw accent, Space Grotesk voor tekst, JetBrains Mono
   voor cijfers/codes, beide zelf geserveerd uit static/fonts/ - geen lettertypen of
   bibliotheken van buiten. Dit is het vertrekpunt: een app mag er een eigen draai
   aan geven, maar niet ver afwijken (andere accentkleur, andere letters). */

:root {
  --letter: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cijfer: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bg: #f4f4f1; --kaart: #ffffff; --rand: #e0e0da; --tekst: #1e1e1b; --zacht: #5a5a53;
  --accent: #3d5a6c; --inkt: #3d5a6c; --inkt-tekst: #ffffff; --link: #3d5a6c;
  --ok: #3e8e5a; --ok-bg: #e8f2ec; --let-op: #b5841f; --fout: #b4453a; --fout-bg: #f7e9e7;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a; --kaart: #1d2024; --rand: #2e3238; --tekst: #e6e6e1; --zacht: #9a9a93;
    --accent: #7fa3b9; --inkt: #243641; --link: #8fb3c8;
    --ok: #7cc494; --ok-bg: #1b2d22; --let-op: #d4a24a; --fout: #e07a70; --fout-bg: #3a1f1c;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 400 16px/1.55 var(--letter); }
h1, h2 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
p { margin: 0 0 .75rem; }
a { color: var(--link); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, .cijfer, .log-uit { font-family: var(--cijfer); }
code { background: var(--rand); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.zacht { color: var(--zacht); }
.klein { font-size: .875rem; }

.kopbalk { background: var(--inkt); color: var(--inkt-tekst); padding-top: env(safe-area-inset-top); }
.kopbalk .binnen { max-width: 860px; margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; gap: 16px; }
.kopbalk .naam { font-weight: 700; font-size: 1.1rem; color: inherit; text-decoration: none; flex: 1; }
.kopbalk nav { display: flex; align-items: center; gap: 14px; }
.kopbalk nav a, .tekstknop { color: inherit; opacity: .85; text-decoration: none; background: none; border: 0; padding: 0; }
.kopbalk nav a:hover, .tekstknop:hover { opacity: 1; text-decoration: underline; }

.pagina { max-width: 860px; margin: 0 auto; padding: 22px 18px 60px; }
.pagina.smal { max-width: 460px; }

.blok { background: var(--kaart); border: 1px solid var(--rand); border-radius: 12px; padding: 18px; margin: 18px 0; }
.stapel { display: grid; gap: 14px; }
.rij2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.acties { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }

.veld { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
.veld input, .veld select, .veld textarea { font-weight: 400; padding: 9px 11px; border: 1px solid var(--rand); border-radius: 8px; background: var(--kaart); width: 100%; }

.knop { display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--rand); background: var(--kaart); color: var(--tekst); text-decoration: none; font-weight: 600; }
.knop:hover { border-color: var(--link); }
.knop.hoofd { background: var(--link); border-color: var(--link); color: #fff; }
@media (prefers-color-scheme: dark) { .knop.hoofd { color: #0d1620; } }

.berichten { display: grid; gap: 8px; margin-bottom: 16px; }
.bericht { padding: 10px 14px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); }
.bericht.fout { background: var(--fout-bg); color: var(--fout); }

.tabel-wrap { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rand); }
.tabel th { font-size: .82rem; color: var(--zacht); font-weight: 600; }

.log-uit { background: var(--bg); border: 1px solid var(--rand); border-radius: 8px; padding: 10px; font-size: .8rem; max-height: 320px; overflow: auto; white-space: pre-wrap; }