@font-face{font-family:"Roboto";src:url("/static/fonts/roboto.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--bg:#f3f4f6;--card:#fff;--tekst:#2b2f36;--muted:#7a7a7a;--lijn:#dde1e6;--donker:#222a36;--logo:#374964;--accent:#2a74de;--accent-hover:#1c6ba9;--warn:#b45309;--warn-bg:#fef3c7;--ok:#166534;--ok-bg:#dcfce7}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 "Roboto",system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--tekst)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
header{background:var(--donker);color:#fff;padding:0 24px;display:flex;align-items:center;gap:28px;height:64px}
header .merk{display:flex;align-items:center;gap:12px;font-weight:700;font-size:19px;color:#fff;letter-spacing:.01em}
header .merk img{height:40px;width:auto}header .merk small{font-weight:400;color:#aeb6c4;font-size:13px;margin-left:4px}
header nav a{color:#cfd5de;margin-right:18px;font-weight:500;font-size:15px;line-height:64px;display:inline-block;border-bottom:3px solid transparent}
header nav a.actief,header nav a:hover{color:#fff;text-decoration:none;border-bottom-color:var(--accent);padding-bottom:0}
header .rechts{margin-left:auto;color:#aeb6c4;font-size:13px}header .rechts a{color:#fff}
main{max-width:1400px;margin:0 auto;padding:20px}
h1{font-size:26px;font-weight:700;margin:0 0 16px;color:var(--logo)}h2{font-size:15px;font-weight:700;margin:26px 0 10px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px}
.kaart{background:var(--card);border:1px solid var(--lijn);border-radius:8px;padding:14px 16px}
.kaart .getal{font-size:30px;font-weight:700;color:var(--logo)}.kaart .label{color:var(--muted);font-size:13px}
.paneel{background:var(--card);border:1px solid var(--lijn);border-radius:8px;padding:16px;margin-bottom:16px}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--lijn);border-radius:8px;overflow:hidden}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--lijn);vertical-align:top}
th{background:#eef1f5;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--logo);font-weight:700}
tr:last-child td{border-bottom:0}tbody tr:hover{background:#f8fafc}
.num{text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;background:#e8edf3;color:var(--logo)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}.tag.ok{background:var(--ok-bg);color:var(--ok)}
.stip{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:middle;box-shadow:0 0 0 2px #fff inset}
form.zoek{display:flex;gap:8px;margin-bottom:12px}input,select,button{font:inherit;padding:7px 10px;border:1px solid var(--lijn);border-radius:6px;background:#fff}
button{background:var(--accent);color:#fff;border-color:var(--accent);cursor:pointer;font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:13px;padding:9px 16px;border-radius:4px}
button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}button.klein{padding:4px 10px;font-size:12px}
.fout{background:#fee2e2;color:#991b1b;padding:8px 12px;border-radius:6px;margin-bottom:10px}
.melding{background:var(--ok-bg);color:var(--ok);padding:8px 12px;border-radius:6px;margin-bottom:10px}
body.donker{background:var(--donker)}
.login-box{max-width:400px;margin:70px auto;padding:28px 32px 24px}.login-box .logo{display:block;margin:0 auto 10px;width:150px}
.login-box h1{text-align:center;font-size:18px;color:var(--logo);text-transform:uppercase;letter-spacing:.08em}.login-box button{width:100%}.login-box label{display:block;margin:10px 0 4px;font-size:13px;color:var(--muted)}.login-box input{width:100%}
.muted{color:var(--muted)}small{font-size:12px}
/* rooster */
.rooster{display:grid;grid-template-columns:52px repeat(7,1fr);gap:4px}
.rooster .dagkop{text-align:center;font-weight:700;padding:4px 0;color:var(--logo);text-transform:uppercase;font-size:12px;letter-spacing:.06em}
.rooster .dag{display:grid;gap:2px;position:relative;height:720px}
.rooster .baan{position:relative;background:var(--card);border:1px solid var(--lijn);border-radius:4px;overflow:hidden}
.rooster .baan .baanlabel{position:absolute;top:2px;left:4px;font-size:10px;color:var(--muted)}
.rooster .tijdas{position:relative;height:720px}
.rooster .tijdas span{position:absolute;right:6px;font-size:11px;color:var(--muted);transform:translateY(-50%)}
.rooster .blok{position:absolute;left:2px;right:2px;border-radius:3px;color:#fff;font-size:10px;line-height:1.15;padding:2px 3px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.rooster .blok b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rooster .lijn{position:absolute;left:0;right:0;border-top:1px dashed #e3e7ec}
.legenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0;font-size:13px}
.acties{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.acties h3{margin:0 0 6px;font-size:13px;color:var(--muted);text-transform:uppercase}
.acties-rij{display:flex;gap:8px;margin-top:8px}
button.secundair{background:#fff;color:var(--accent)}button.secundair:hover{background:#eef4fc}button.klein{padding:2px 8px;font-size:12px}
button.x{background:none;border:0;color:#999;padding:0 4px;font-size:15px;line-height:1;cursor:pointer;text-transform:none}button.x:hover{color:#b91c1c}
details.paneel summary{cursor:pointer;font-weight:600}a.kaart{color:inherit}a.kaart:hover{text-decoration:none;border-color:var(--accent)}
.acties form.zoek{flex-wrap:wrap}.acties select,.acties input{max-width:100%;min-width:0}
.rooster .blok.dim{opacity:.18;filter:grayscale(1)}
.acties .paneel h3{margin-top:0}
footer{text-align:center;color:#9aa3b2;font-size:12px;padding:24px 0 30px}footer a{color:#9aa3b2}
.rooster.klikbaar .baan{cursor:crosshair}.rooster.klikbaar .baan:hover{background:#f0f6ff}
.rooster .blok{cursor:pointer}
button.gevaar{background:#b91c1c;border-color:#b91c1c}button.gevaar.klein{padding:3px 8px}
.vinkjes{display:inline-flex;flex-wrap:wrap;gap:4px 12px;align-items:center}.vinkjes label{white-space:nowrap;cursor:pointer}
.rooster .selectie{position:absolute;left:0;right:0;background:rgba(31,78,120,.25);border:1px dashed var(--accent);pointer-events:none}
/* verenigingspagina */
.kaart.status{display:flex;flex-direction:column;gap:8px;justify-content:center}
.inline-bewerk summary{list-style:none;cursor:pointer}.inline-bewerk summary::-webkit-details-marker{display:none}.potlood{color:var(--accent);font-size:12px}
.paneel.waarschuwing{border-color:var(--warn);background:var(--warn-bg)}
.baanfilter{margin:4px 0 8px}
.slotbalk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:var(--card);border:1px solid var(--lijn);border-radius:8px;padding:10px 14px;margin-bottom:10px}
.slotbalk .label{font-weight:600}.slotbalk .hint{flex-basis:100%;font-size:12px}
.rooster .selectie{position:absolute;left:1px;right:1px;border:2px dashed var(--accent);background:rgba(31,78,120,.18);pointer-events:none;border-radius:3px}
.rooster .selectie.vast{opacity:.9}.rooster .selectie.conflict{border-color:#b91c1c;background:rgba(185,28,28,.22)}
.acties.onderaan{margin-top:24px}.verwijder{display:flex;flex-direction:column;gap:6px;max-width:460px}
.paneel.schiettijden table{border:0}.paneel.schiettijden{padding:0 0 10px}.paneel.schiettijden table{border-radius:8px 8px 0 0}
.toevoegen-rij{padding:10px 14px 4px}.slotbalk[hidden]{display:none}.toevoegen-rij .slotbalk{margin:0;border:0;padding:0;background:none}
.rooster:not(.klikbaar) .baan{cursor:default}
.rooster .blok.bewerkt{opacity:.35;outline:2px dashed #fff}
table.sloten td{vertical-align:middle}
.rooster.klikbaar .blok.bewerkt,.rooster.klikbaar .selectie.vast{cursor:move;pointer-events:auto}