:root{--ink:#1f2933;--muted:#5f6b7a;--lijn:#d9dee5;--accent:#0b5cad;--accent-licht:#e6f0fb;--ok:#1a7f4b;--fout:#b4232c;--achtergrond:#f7f8fa}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--achtergrond)}
header{background:#fff;border-bottom:1px solid var(--lijn);padding:.6rem 1rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
header .merk{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.1rem}
header nav a{margin-right:.9rem;color:var(--ink);text-decoration:none;padding:.5rem 0;display:inline-block}
header nav a.actief{color:var(--accent);font-weight:600}
header form{margin-left:auto}
main{padding:1rem;max-width:1400px;margin:0 auto}
h1{font-size:1.4rem;margin:.2rem 0 1rem}
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:8px;padding:1rem;margin-bottom:1rem}
.rooster{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.2rem}
input[type=text],input[type=number],input[type=password],select{width:100%;padding:.6rem;border:1px solid var(--lijn);border-radius:6px;font-size:1rem;min-height:44px}
.vink{display:flex;align-items:center;gap:.5rem;min-height:44px;font-size:.95rem;color:var(--ink)}
button,.knop{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:.65rem 1.1rem;font-size:1rem;min-height:44px;cursor:pointer;text-decoration:none;display:inline-block}
button.licht,.knop.licht{background:var(--accent-licht);color:var(--accent)}
button.gevaar{background:var(--fout)}
button.klein{padding:.3rem .6rem;min-height:32px;font-size:.85rem}
.melding{padding:.7rem 1rem;border-radius:6px;margin-bottom:1rem}
.melding.ok{background:#e3f5ea;color:var(--ok)}.melding.fout{background:#fbe5e7;color:var(--fout)}
table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--lijn);vertical-align:top}
th{background:#f0f3f7;position:sticky;top:0}
.tabelwrap{overflow-x:auto;border:1px solid var(--lijn);border-radius:8px}
.muted{color:var(--muted);font-size:.85rem}
.leeg{padding:2rem;text-align:center;color:var(--muted)}
.balk{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:.8rem 0}
.tag{display:inline-block;padding:.1rem .5rem;border-radius:99px;font-size:.75rem;background:var(--accent-licht);color:var(--accent)}
.tag.grijs{background:#eceff3;color:var(--muted)}.tag.ok{background:#e3f5ea;color:var(--ok)}.tag.fout{background:#fbe5e7;color:var(--fout)}
.login{max-width:380px;margin:4rem auto}
@media (max-width:640px){header form{margin-left:0}main{padding:.6rem}}