/* De opmaak van de basis. Alles wat kleur, letter, afstand of hoekafronding is komt uit
   de tokens hieronder; de huisstijl van de klant (oplossing.toml) overschrijft ze in
   /huisstijl.css. Geen inline stijl in de schermen: gebruik de klassen hier. */
:root {
  --letter: system-ui, -apple-system, "Segoe UI", sans-serif;
  --accent: #1f5f8b;
  --accent-tekst: #ffffff;
  --inkt: #212121;
  --papier: #f5f5f5;
  --vlak: #ffffff;
  --grijs: #5f5f5f;
  --rand: #dadada;
  --ruimte: 1rem;
  --radius: 6px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--papier); color: var(--inkt);
       font-family: var(--letter); line-height: 1.55; }
main { max-width: 52rem; margin: 0 auto; padding: calc(var(--ruimte) * 2) var(--ruimte); }
h1 { font-size: 2rem; letter-spacing: -.01em; margin: 0 0 var(--ruimte); }
h2 { font-size: 1.25rem; margin: calc(var(--ruimte) * 2) 0 var(--ruimte); }
a { color: var(--inkt); text-decoration-color: var(--accent);
    text-decoration-thickness: 2px; text-underline-offset: 2px; }
code { word-break: break-all; }

.kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte);
       padding: .7rem var(--ruimte); background: var(--vlak);
       border-bottom: 3px solid var(--accent); }
.merk { font-weight: 700; text-decoration: none; margin-right: var(--ruimte); }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
           align-items: center; gap: var(--ruimte); }
.menu-hoofd { flex: 1; }
.menu-beheer { background: var(--vlak); border-bottom: 1px solid var(--rand);
               padding: .4rem var(--ruimte); }
.voet { max-width: 52rem; margin: 0 auto; padding: var(--ruimte); color: var(--grijs);
        font-size: .9rem; }

.logo { display: block; max-width: 12rem; max-height: 3.5rem; margin: 0 0 var(--ruimte); }
.zin { font-size: 1.15rem; margin: 0 0 var(--ruimte); }
.status { display: inline-block; margin: 0; padding-left: .7rem; color: var(--grijs);
          border-left: 3px solid var(--accent); }
.dof { color: var(--grijs); }
.verborgen { position: absolute; left: -9999px; }

/* Velden en knoppen (683/672/718) */
.formulier { max-width: 28rem; }
.veld { margin: 0 0 var(--ruimte); }
.veld label { display: block; font-weight: 600; margin-bottom: .25rem; }
input, select, textarea { width: 100%; border: 1px solid var(--rand); background: var(--vlak);
                          color: var(--inkt); border-radius: var(--radius); font: inherit;
                          padding: .5rem .7rem; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; }
.hulp { color: var(--grijs); font-size: .9rem; margin: .25rem 0 0; }
/* Een foutregel krijgt geen eigen kleur (de pagina heeft één accent) maar een dikkere
   letter en een lijn ervoor. */
.fout { font-weight: 600; padding-left: .7rem; border-left: 3px solid var(--accent);
        margin: .25rem 0 var(--ruimte); }
.veld-fout input { border-color: var(--accent); border-width: 2px; }
.melding { padding: .6rem .8rem; background: var(--vlak); border-left: 3px solid var(--accent);
           border-radius: var(--radius); }

.knop, button { display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
                border-radius: var(--radius); border: 1px solid var(--accent);
                padding: .5rem .9rem; text-decoration: none; width: auto; }
.knop-primair { background: var(--accent); color: var(--accent-tekst); }
.knop-secundair { background: var(--vlak); color: var(--inkt); border-color: var(--rand); }
.knop-gevaar { background: var(--vlak); color: var(--inkt); border: 2px solid var(--inkt); }
.knop:hover, button:hover { filter: brightness(.94); }

form.inline { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
form.inline select { width: auto; }

.tabel { width: 100%; border-collapse: collapse; background: var(--vlak);
         border: 1px solid var(--rand); border-radius: var(--radius); }
.tabel th, .tabel td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--rand);
                       vertical-align: middle; }
.uitnodigingslink { padding: .6rem .8rem; background: var(--vlak); border: 1px dashed var(--accent); }

@media (max-width: 40rem) {
  .tabel { font-size: .9rem; }
  main { padding: var(--ruimte); }
}