:root {
    --primair: #126b42;
    --secundair: #dff3e8;
    --accent: #f0b429;
    --inkt: #242424;
    --subtiel: #616161;
    --lijn: #d1d1d1;
    --oppervlak: #ffffff;
    --werkvlak: #f5f5f5;
    --fout: #b42318;
    --succes: #107c10;
    color: var(--inkt);
    font-family: "Segoe UI Variable Text", "Segoe UI", sans-serif;
    font-size: 14px;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; }
body { background: var(--werkvlak); overflow: hidden; }
button, input, select { font: inherit; }
button { letter-spacing: 0; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 22px; font-weight: 650; letter-spacing: 0; }
h2 { font-size: 16px; font-weight: 650; letter-spacing: 0; }
h3 { font-size: 14px; font-weight: 650; letter-spacing: 0; }
code { overflow-wrap: anywhere; font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; }
table { width: 100%; border-collapse: collapse; }
th { color: var(--subtiel); font-size: 12px; font-weight: 600; text-align: left; }
th, td { min-width: 0; padding: 8px 10px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.app.ruim th, .app.ruim td { padding-block: 12px; }
.app.ruim .nav-regel { min-height: 50px; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #f0f6f3; }
input[type="file"], select, .tekstveld input { width: 100%; min-height: 32px; border: 1px solid #8a8886; border-radius: 3px; background: #fff; padding: 5px 8px; }
.tekstveld { display: grid; width: 100%; gap: 4px; color: var(--inkt); font-size: 12px; }
.tekstveld input:disabled { color: var(--subtiel); background: #f3f2f1; }
:focus-visible { outline: 2px solid #0f6cbd; outline-offset: 2px; }
.foutmelding, .globale-fout { color: var(--fout); background: #fde7e9; border-left: 4px solid var(--fout); padding: 10px 12px; }
.succesmelding { color: #0b4f31; background: #e6f4ea; border-left: 4px solid var(--succes); padding: 10px 12px; }
.globale-fout { position: fixed; z-index: 50; top: 54px; right: 16px; display: flex; max-width: min(520px, calc(100vw - 32px)); gap: 16px; box-shadow: 0 4px 16px #0002; }
.pill { display: inline-flex; min-height: 24px; align-items: center; border-radius: 3px; padding: 2px 7px; font-size: 12px; }
.pill.geldig { color: #0b5a28; background: #dff6dd; }
.pill.ongeldig { color: #8a1c12; background: #fde7e9; }
.opstarten { display: grid; min-height: 100vh; place-items: center; color: var(--primair); font-size: 18px; font-weight: 650; }
#blazor-error-ui { display: none; }