/* GDP-QMS - stijl (geïnspireerd op professionele QMS-tools) */
:root{
  --blauw:#1f4e79; --blauw-licht:#2e6da4; --grijs:#f4f6f9; --rand:#dfe3e8;
  --tekst:#2a2f36; --zacht:#6b7280; --groen:#1b8a5a; --geel:#b8860b; --rood:#c0392b;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--tekst);background:var(--grijs);font-size:14px}
a{color:var(--blauw-licht);text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;background:var(--blauw);color:#fff;padding:10px 20px}
.merk{display:flex;align-items:center;gap:12px}
.logo{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;background:#fff;color:var(--blauw);font-weight:700;font-size:20px;border-radius:8px}
.merk small{display:block;color:#cfe0f0;font-size:11px}
.gebruiker{font-size:13px;display:flex;align-items:center;gap:14px}
.gebruiker em{color:#cfe0f0;font-style:normal}
.omg-kiezer{display:flex;align-items:center;gap:6px;font-size:12px;color:#cfe0f0}
.omg-kiezer select{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);
  border-radius:6px;padding:5px 8px;font-size:13px;font-family:inherit;cursor:pointer}
.omg-kiezer select option{color:#2a2f36}
.uitlog{background:rgba(255,255,255,.15);color:#fff;padding:6px 12px;border-radius:6px}
.uitlog:hover{background:rgba(255,255,255,.28);text-decoration:none}

/* Layout */
.layout{display:flex;min-height:calc(100vh - 58px - 34px)}
.zijbalk{width:210px;background:#fff;border-right:1px solid var(--rand);padding:12px 0}
.zijbalk a{display:block;padding:9px 20px;color:var(--tekst)}
.zijbalk a:hover{background:var(--grijs);text-decoration:none}
.zijbalk a.actief{background:#eaf1f8;border-left:3px solid var(--blauw);font-weight:600;padding-left:17px}
.nav-groep{padding:12px 20px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--zacht)}
.inhoud{flex:1;padding:24px 30px;overflow-x:auto}

/* Voet */
.voetbalk{background:#eef1f5;border-top:1px solid var(--rand);color:var(--zacht);text-align:center;padding:8px;font-size:12px}

/* Koppen */
h1{font-size:22px;margin:0 0 4px}
h2{font-size:17px;margin:24px 0 10px;border-bottom:1px solid var(--rand);padding-bottom:6px}
.pagina-kop{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.subtitel{color:var(--zacht);margin:0 0 18px}

/* Kaarten / KPI's */
.kpi-rij{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--rand);border-radius:10px;padding:16px 18px;min-width:150px;flex:1}
.kpi .cijfer{font-size:28px;font-weight:700;color:var(--blauw)}
.kpi .label{color:var(--zacht);font-size:13px}
.kaart{background:#fff;border:1px solid var(--rand);border-radius:10px;padding:18px 20px;margin-bottom:20px}

/* Tabellen */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--rand);border-radius:8px;overflow:hidden}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rand);vertical-align:top}
th{background:#f0f3f7;font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:var(--zacht)}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafbfc}

/* Badges */
.badge{display:inline-block;padding:3px 9px;border-radius:12px;font-size:12px;font-weight:600;text-transform:capitalize}
.badge-groen{background:#e3f4ec;color:var(--groen)}
.badge-geel{background:#fbf3dd;color:var(--geel)}
.badge-rood{background:#fbe6e4;color:var(--rood)}
.badge-grijs{background:#eceef1;color:var(--zacht)}

/* Formulieren */
form.qms{max-width:760px}
.veld{margin-bottom:16px}
label{display:block;font-weight:600;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
select,textarea{width:100%;padding:9px 11px;border:1px solid var(--rand);border-radius:7px;font-size:14px;font-family:inherit}
textarea{min-height:110px;resize:vertical}
.rij{display:flex;gap:16px}
.rij .veld{flex:1}
.hint{color:var(--zacht);font-size:12px;margin-top:4px}

/* Knoppen */
.knop{display:inline-block;background:var(--blauw);color:#fff;border:none;padding:9px 18px;border-radius:7px;font-size:14px;cursor:pointer;font-family:inherit}
.knop:hover{background:var(--blauw-licht);text-decoration:none;color:#fff}
.knop-grijs{background:#e4e8ee;color:var(--tekst)}
.knop-secundair{background:#fff;color:var(--blauw);border:1px solid var(--blauw)}
.knop-gevaar{background:var(--rood)}
.knop-klein{padding:5px 11px;font-size:13px}

/* Flash */
.flash{padding:11px 16px;border-radius:8px;margin-bottom:16px;font-size:14px}
.flash-succes{background:#e3f4ec;color:var(--groen);border:1px solid #b8e3cc}
.flash-fout{background:#fbe6e4;color:var(--rood);border:1px solid #f0c2bd}
.flash-info{background:#e7f0fa;color:var(--blauw);border:1px solid #c2d8ef}

/* Login */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1f4e79,#2e6da4)}
.login-box{background:#fff;padding:34px 32px;border-radius:14px;width:360px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.login-box h1{text-align:center;color:var(--blauw);margin-bottom:2px}
.login-box .sub{text-align:center;color:var(--zacht);margin-bottom:22px;font-size:13px}

/* Diversen */
.tabknoppen{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.meta{color:var(--zacht);font-size:13px}
.tijdlijn{list-style:none;padding:0;margin:0}
.tijdlijn li{border-left:2px solid var(--rand);padding:0 0 16px 16px;position:relative}
.tijdlijn li:before{content:"";position:absolute;left:-6px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--blauw)}
.leeg{color:var(--zacht);text-align:center;padding:30px}
.acties-cel a{margin-right:8px}

/* Digitale formulieren */
.form-sectie{color:var(--blauw);font-size:15px;margin:22px 0 10px;padding-bottom:4px;border-bottom:2px solid #eaf1f8}
.form-blok{padding:14px 16px;margin-bottom:12px}
.form-blok .veld{margin-bottom:12px}
.form-blok .veld:last-child{margin-bottom:0}
table.form-checklist,table.form-tabel,table.form-sign{margin:6px 0 14px}
table.form-checklist td,table.form-tabel td{padding:5px 7px}
table.form-checklist input[type=text],table.form-tabel input[type=text]{padding:6px 8px;font-size:13px}
table.form-sign td{vertical-align:top;padding:10px 12px;width:33%}
table.form-sign label.mini,label.mini{display:block;font-weight:600;font-size:11px;color:var(--zacht);margin:6px 0 2px;text-transform:none}
.rij-weg{background:#fbe6e4;color:var(--rood);border:none;border-radius:5px;width:24px;height:24px;cursor:pointer;font-size:15px;line-height:1}
.rij-weg:hover{background:#f0c2bd}
/* Alleen-lezen weergave */
.ro-tabel{margin:6px 0 16px}
.ro-tabel th{font-weight:600;color:var(--tekst);background:#f7f9fb}
.ro-blok{margin:6px 0 16px;background:#fafbfc;border:1px solid var(--rand);border-radius:8px;padding:12px 14px}
.groep-kop{margin:22px 0 8px;color:var(--zacht);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
/* Formulierencatalogus: één tabel met vaste kolommen + groepsrijen */
table.form-catalogus{table-layout:fixed}
table.form-catalogus td,table.form-catalogus th{overflow:hidden;text-overflow:ellipsis}
table.form-catalogus tr.groep-rij td{background:#eef2f7;color:var(--blauw);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--rand)}
table.form-catalogus .acties-cel{white-space:nowrap}
/* Artsen: rij-signalering registratiegeldigheid */
tr.rij-rood td{background:#fbe6e4 !important}
tr.rij-geel td{background:#fbf3dd !important}

/* Gedeeld dashboard: blok per organisatie */
.org-blok{background:#fff;border:1px solid var(--rand);border-radius:10px;padding:18px 20px;margin-bottom:22px}
.org-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-bottom:2px solid #eaf1f8;padding-bottom:10px;margin-bottom:16px}
.org-kop h2{font-size:18px}
.org-sub{font-size:14px;color:var(--zacht);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.4px}
.org-blok .kpi{background:var(--grijs)}