/* FlexLesser Overzicht – stijl volgens het goedgekeurde ontwerp (DECISIONS D12) */
:root{
  --bg:#F5F5F2; --card:#FFFFFF; --line:#E2E2DC; --line-soft:#ECECE7;
  --ink:#1B1F24; --muted:#5B5E65; --brand:#0F5F5F; --brand-dark:#0A4A4A; --brand-soft:#E8F1F1;
  --ok-bg:#E2F0E8; --ok:#135436; --warn-bg:#FCEFD2; --warn:#6E4300; --miss-bg:#FAE2DB; --miss:#842810;
  --neutral-bg:#ECECE7; --neutral:#3F4248;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);font-size:15px;line-height:1.45}
a{color:var(--brand)} a:hover{color:var(--brand-dark)}
h1,h2,h3{margin:0;letter-spacing:-0.01em;font-weight:700}
h1{font-size:28px} h2{font-size:19px}
.wrap{max-width:1200px;margin:0 auto;padding:24px 16px 48px}
.topbar{background:var(--brand);color:#fff}
.topbar .inner{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.brand{display:flex;align-items:center;gap:10px;flex:1 1 auto;font-weight:700;font-size:18px;color:#fff;text-decoration:none}
.brand:hover{color:#fff}
.nav{display:flex;flex-wrap:wrap;gap:4px;order:3;flex:1 1 100%}
.nav a{min-height:44px;padding:0 14px;border-radius:10px;color:#E6EFEF;font-weight:600;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.nav a:hover{background:#1A6E6E;color:#fff}
.nav a.on{background:#fff;color:#0F4B4B}
.user{display:flex;align-items:center;gap:10px;font-size:14px}
.role{padding:2px 8px;border-radius:6px;background:#1A7373;font-size:12px;font-weight:600}
.linkbtn{background:none;border:0;color:#E6EFEF;font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;min-height:44px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;min-width:0}
.muted,.label{color:var(--muted)} .label{font-size:13px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)} .b-warn{background:var(--warn-bg);color:var(--warn)}
.b-miss{background:var(--miss-bg);color:var(--miss)} .b-neutral{background:var(--neutral-bg);color:var(--neutral)}
.chip{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--brand-soft);color:#174A4A;font-size:13px;white-space:nowrap}
.btn{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid #D3D3CC;background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:hover{background:#F2F2EE;color:var(--ink)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);color:#fff}
.btn-small{min-height:36px;padding:0 12px;font-size:14px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:13px;font-weight:600;color:var(--neutral)}
.field input,.field select,.field textarea{min-height:44px;padding:0 12px;border-radius:10px;border:1px solid #CFCFC8;background:#fff;font:inherit;color:var(--ink);width:100%}
.alert{padding:12px 14px;border-radius:10px;background:var(--miss-bg);color:var(--miss);font-weight:600}
.login-box{max-width:400px;margin:10vh auto 0;display:flex;flex-direction:column;gap:16px}

/* Layout */
.stack{display:flex;flex-direction:column;gap:20px}
.stack-s{display:flex;flex-direction:column;gap:12px}
.kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.tegels{display:flex;flex-wrap:wrap;gap:16px}
.tegel{flex:1 1 200px;text-decoration:none;color:inherit}
.tegel-link:hover{border-color:var(--brand);color:inherit}
.tegel-getal{font-size:36px;font-weight:700;line-height:1.1}
.tegel-getal.klein{font-size:26px}
.tegel-sub{font-size:20px;color:var(--muted)}
.kolommen{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.breed{flex:999 1 480px;min-width:0}
.smal{flex:1 1 320px;min-width:0}
.card h2{margin-bottom:8px}
.lijst-card{padding:0}
.card-kop{padding:18px 20px 10px}
.card-kop h2{margin:0}
.card-kop .label{margin:2px 0 0}
.lijst-teller{padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.leeg{padding:20px 16px;margin:0}

/* Rijen */
.rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;border-bottom:1px solid var(--line-soft);color:inherit;text-decoration:none}
a.rij:hover{background:#F7F7F4;color:inherit}
.rij:last-child{border-bottom:0}
.rij-hoofd{flex:1 1 200px;min-width:0}
.rij-meta{flex:0 1 180px}
.rij-statisch.afgehandeld{opacity:.6}
.chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 200px}
.knoppen{display:flex;flex-wrap:wrap;gap:8px;margin:0}

/* Avatars */
.avatar{width:44px;height:44px;border-radius:50%;background:#D7E8E8;color:#0F4B4B;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;object-fit:cover;overflow:hidden}
.avatar-empty{background:#fff;border:1.5px dashed #8E9696;color:var(--neutral)}
.avatar-lg{width:112px;height:112px;border-radius:18px;font-size:32px}

/* Profiel */
.profielkop{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center}
.profielkop-tekst{flex:1 1 260px;min-width:0}
.foto-blok{display:flex;flex-direction:column;align-items:center;gap:8px}
.foto-upload{margin:0}
.verborgen{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.acties{display:flex;flex-wrap:wrap;gap:8px}
.check{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #F0F0EC}
.check:last-child{border-bottom:0}
.doc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-bottom:1px solid #F0F0EC}
.doc form{margin:0}
.upload{margin-top:14px}
.upload summary{list-style:none;display:inline-flex}
.upload summary::-webkit-details-marker{display:none}
.upload[open] form{margin-top:12px}
.mini-tegels{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.mini-tegels>div{flex:1 1 120px;background:var(--bg);border-radius:10px;padding:12px}
.twee{display:flex;flex-wrap:wrap;gap:16px}
.twee>div{flex:1 1 200px}
.sterk{font-weight:600;margin-bottom:6px}
.tel-rij{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}
.hist{display:flex;flex-wrap:wrap;gap:4px 16px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.h-datum{flex:0 0 96px;font-weight:600}
.h-school{flex:1 1 180px;min-width:0}
.h-soort{flex:1 1 160px;min-width:0}
.h-uren{flex:0 0 64px}
.h-verg{flex:0 0 80px}
.gegevens{margin:0}
.kv{display:flex;flex-wrap:wrap;gap:4px 16px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.kv:last-child{border-bottom:0}
.kv dt{flex:0 0 190px;color:var(--muted);font-size:14px}
.kv dd{margin:0;flex:1 1 200px;min-width:0}
.inline{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* Dekking */
.dek-rij{display:flex;align-items:center;padding:7px 0;border-bottom:1px solid #F0F0EC;font-size:14px}
.dek-rij>span:first-child{flex:1}
.dek-rij>span:not(:first-child){width:84px;text-align:right}
.dek-kop{font-size:13px;font-weight:600;color:var(--neutral)}

/* Formulieren */
.filters{display:flex;flex-wrap:wrap;gap:12px}
.filters .field{flex:1 1 150px}
.rij-velden{display:flex;flex-wrap:wrap;gap:12px}
.rij-velden .field{flex:1 1 200px}
.field textarea{padding:10px 12px;min-height:90px}
.heeft-fout input,.heeft-fout select{border-color:var(--miss)}
.fouttekst{color:var(--miss);font-size:13px;font-weight:600}
.vinkjes{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 16px}
.vinkjes legend{font-size:13px;font-weight:600;color:var(--neutral);margin-bottom:6px;padding:0}
.vinkjes label{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.vinkjes input{width:18px;height:18px}

@media (min-width: 900px){ .nav{order:0;flex:0 1 auto} }
.keuze{min-height:36px;padding:0 10px;border-radius:10px;border:1px solid #CFCFC8;background:#fff;font:inherit;max-width:260px}
details.card summary{cursor:pointer}
a.badge{text-decoration:none}