:root{
  --navy:#0B1E3C;--navy-2:#16325f;--oranje:#FF6B21;--oranje-d:#e2560f;--oranje-l:#fff1e9;
  --bg:#F4F6FA;--wit:#fff;--lijn:#E2E7EF;--tekst:#0B1E3C;--zacht:#5b6b82;
  --groen:#1f9d55;--groen-l:#e6f6ec;--blauw:#2563eb;--blauw-l:#e8effd;--rood:#d64045;--rood-l:#fdecec;
  --geel:#b7791f;--geel-l:#fdf6e3;--grijs-l:#eef1f5;
  --r:12px;--schaduw:0 1px 2px rgba(11,30,60,.06),0 4px 16px rgba(11,30,60,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--tekst);background:var(--bg)}
[hidden]{display:none!important}
a{color:var(--navy-2)}
h1,h2,h3{margin:0;line-height:1.25}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid rgba(255,107,33,.45);outline-offset:2px}
.laden{padding:60px;text-align:center;color:var(--zacht)}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--lijn);background:var(--wit);
  border-radius:10px;padding:8px 14px;font-weight:600;cursor:pointer;text-decoration:none;color:var(--navy);white-space:nowrap}
.btn:hover{border-color:#c8d0dc}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-oranje{background:var(--oranje);border-color:var(--oranje);color:#fff}
.btn-oranje:hover{background:var(--oranje-d);border-color:var(--oranje-d)}
.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-groot{padding:12px 22px;font-size:16px;border-radius:12px}
.btn-klein{padding:4px 10px;font-size:13px;border-radius:8px}
.btn-link{border:0;background:none;padding:0;color:var(--navy-2);text-decoration:underline;cursor:pointer;font-weight:500}

/* topbalk */
.top{position:sticky;top:0;z-index:20;background:var(--wit);border-bottom:1px solid var(--lijn);display:flex;align-items:center;gap:22px;padding:0 20px;height:60px}
.top img{height:34px;display:block}
.top nav{display:flex;gap:4px;flex:1;overflow-x:auto}
.top nav a{padding:18px 12px;text-decoration:none;color:var(--navy);font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
.top nav a.actief{border-bottom-color:var(--oranje)}
.top .wie{display:flex;align-items:center;gap:10px;color:var(--zacht);font-size:14px;white-space:nowrap}
.top .badge-crm{background:var(--navy);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 7px;border-radius:6px}
main{padding:20px;max-width:1680px;margin:0 auto}

/* kaarten */
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);box-shadow:var(--schaduw)}
.kaart>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--lijn)}
.kaart>header h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--zacht)}
.kaart .inhoud{padding:16px}
.stapel>*+*{margin-top:16px}

/* chips */
.chip{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--grijs-l);color:var(--zacht);white-space:nowrap}
.st-nieuw{background:var(--blauw-l);color:var(--blauw)}
.st-opnieuw{background:var(--geel-l);color:var(--geel)}
.st-terugbellen,.st-opvolgen{background:var(--oranje-l);color:var(--oranje-d)}
.st-afspraak,.st-offerte{background:var(--groen-l);color:var(--groen)}
.st-afgeboekt{background:var(--grijs-l);color:var(--zacht)}
.st-geblokkeerd{background:var(--rood-l);color:var(--rood)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,var(--navy) 0 45%,var(--bg) 45%)}
.login .kaart{width:100%;max-width:420px;padding:32px;text-align:center}
.login img.logo{height:44px;margin-bottom:6px}
.login img.held{height:120px;margin:4px auto 10px;display:block}
.login p{color:var(--zacht)}
.login form{display:grid;gap:12px;margin-top:18px;text-align:left}
.code-input{font-size:26px;letter-spacing:.4em;text-align:center}

/* formulieren */
label.veld{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--zacht)}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=search],input[type=datetime-local],input[type=date],select,textarea{
  width:100%;border:1px solid var(--lijn);border-radius:9px;padding:8px 10px;background:var(--wit);color:var(--tekst);font-weight:400}
textarea{resize:vertical;min-height:80px}
input:focus,select:focus,textarea:focus{border-color:var(--oranje);outline:none;box-shadow:0 0 0 3px rgba(255,107,33,.15)}
.fout{color:var(--rood);font-size:14px;font-weight:600}

/* belscherm */
.belbalk{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:16px 20px;margin-bottom:16px;border-left:5px solid var(--oranje)}
.belbalk .naam h1{font-size:24px}
.belbalk .naam .sub{color:var(--zacht);font-size:14px;margin-top:2px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.belbalk .nummers{display:flex;gap:12px;flex-wrap:wrap}
.nummer{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--lijn);border-radius:12px;padding:6px 8px 6px 14px}
.nummer .label{font-size:11px;color:var(--zacht);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.nummer .nr{font-size:20px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.belbalk .acties{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.melding{padding:10px 14px;border-radius:10px;margin-bottom:12px;font-weight:600;font-size:14px}
.melding.waarschuwing{background:var(--geel-l);color:#7a5212;border:1px solid #f1dfae}
.melding.info{background:var(--blauw-l);color:#1d4ed8;border:1px solid #cddcfb}
.melding.feestdag{background:var(--rood-l);color:#9b1c22;border:2px solid var(--rood);font-size:15px}
.ag-dagkop{flex-wrap:wrap}
.ag-dagkop .feestlabel{width:100%;font-size:11px;font-weight:700;color:var(--rood)}
.ag-dagkop.feest{background:var(--rood-l)}
.res-extra .notitie-veld{flex-basis:100%;min-height:64px;resize:vertical}
.chip.actiepunt{background:#fff4d6;color:#8a5a00;border:1px solid #f3d27a}
.code-select.g-aandacht{border-color:#c98a00;background:#fff4d6}
.taak-notitie{white-space:pre-wrap;background:var(--bg);border-left:4px solid #f3d27a;border-radius:8px;padding:10px 14px;font-size:14px}
.sjabloon{border:1px solid var(--lijn);border-radius:10px;padding:12px;display:grid;gap:8px;background:#fbfcfd}
.sjabloon .met-knop{align-items:flex-end}
.veld.groei{flex:1}
.melding.gevaar{background:var(--rood-l);color:var(--rood);border:1px solid #f6c9ca}

.belgrid{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:16px;align-items:start}
.kol-script .script{max-width:820px}

/* vaste kop van het belscherm, zoals Steam: lead + nummer + resultaatcode */
.belkop{position:sticky;top:60px;z-index:10;margin-bottom:12px;border-left:5px solid var(--oranje);padding:12px 16px;display:grid;gap:10px}
.belkop-rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.belkop h1{font-size:21px}
.belkop .sub{color:var(--zacht);font-size:13px;margin-top:2px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.belkop .nummers{display:flex;gap:8px;flex-wrap:wrap}
.belkop .nummer{cursor:pointer;font:inherit;color:inherit;padding:6px 12px}
.belkop .nummer:hover{border-color:var(--oranje)}
.belkop .nummer .kopie{font-size:11px;font-weight:700;color:var(--zacht);text-transform:uppercase;letter-spacing:.05em}
.belkop .acties{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.resultaatbalk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:10px;border-top:1px solid var(--lijn)}
.code-select{width:auto;min-width:260px;font-weight:700;border-width:2px}
.code-select.g-positief{border-color:var(--groen);background:var(--groen-l)}
.code-select.g-later{border-color:var(--oranje);background:var(--oranje-l)}
.code-select.g-nietbereikt{border-color:var(--blauw);background:var(--blauw-l)}
.code-select.g-negatief{border-color:var(--rood);background:var(--rood-l)}
.code-select.g-ongeldig{border-color:var(--geel);background:var(--geel-l)}
.res-extra{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1;min-width:0}
.res-extra input[type=datetime-local]{width:auto}
.res-extra select{width:auto}
.res-extra input[type=text]{flex:1;min-width:160px}
.res-knoppen{display:flex;gap:8px;margin-left:auto}
.scan .klein{font-size:13px;color:#c9d3e4}
.scan .geen-preview{color:#ffb38c;font-weight:600}
.fiche-velden{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fiche-velden .breed{grid-column:1/-1}
.fiche-velden label.veld{font-size:12px}
.fiche-velden input,.fiche-velden textarea{padding:6px 9px;font-size:14px}
.met-knop{display:flex;gap:6px}
.met-knop input{flex:1;min-width:0}

.scan{background:var(--navy);color:#fff;border-radius:var(--r);padding:16px 18px;display:grid;gap:8px}
.scan .kop{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#b9c5da;font-weight:700}
.scan .reden{font-size:16px;font-weight:600}
.scan a{color:#ffb38c}
.scan .rij{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;align-items:center}
.scan .chip{background:rgba(255,255,255,.12);color:#fff}

.script{font-size:17px;line-height:1.65}
.script p{margin:0 0 14px}
.script .hint{color:var(--zacht);font-style:italic;font-size:14px;padding-left:14px;border-left:3px solid var(--lijn);margin:-6px 0 14px}
.script .belangrijk{background:var(--oranje-l);border:1px solid #ffd5bd;border-radius:10px;padding:10px 14px;font-size:14px}
.script strong{color:var(--navy)}
.script .var{background:var(--oranje-l);color:var(--oranje-d);font-weight:700;padding:0 5px;border-radius:5px}
.script .var.leeg{background:var(--grijs-l);color:var(--zacht)}

.codes{display:grid;gap:12px}
.codegroep .titel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--zacht);margin-bottom:6px}
.codeknoppen{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.code{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--lijn);background:var(--wit);border-radius:9px;padding:7px 9px;cursor:pointer;font-size:13px;font-weight:600;line-height:1.25}
.code b{font-variant-numeric:tabular-nums;font-size:12px;padding:2px 6px;border-radius:6px;min-width:36px;text-align:center}
.code:hover{border-color:#c8d0dc}
.code.gekozen{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.g-positief b{background:var(--groen-l);color:var(--groen)}
.g-later b{background:var(--oranje-l);color:var(--oranje-d)}
.g-nietbereikt b{background:var(--blauw-l);color:var(--blauw)}
.g-negatief b{background:var(--rood-l);color:var(--rood)}
.g-ongeldig b{background:var(--geel-l);color:var(--geel)}
.g-data b{background:var(--grijs-l);color:var(--zacht)}
.snel{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.resultaat-extra{display:grid;gap:10px;margin-top:4px}
.opslaan-rij{display:flex;gap:8px;flex-wrap:wrap}
.opslaan-rij .btn-oranje{flex:1}

.historiek{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.historiek li{padding:9px 0;border-bottom:1px solid var(--lijn);font-size:13px}
.historiek li:last-child{border-bottom:0}
.historiek .meta{color:var(--zacht);font-size:12px}
.historiek .t{white-space:pre-wrap}

/* start belscherm */
.start{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.hero{display:flex;gap:24px;align-items:center;padding:28px;background:var(--navy);color:#fff;border-radius:var(--r);overflow:hidden}
.hero img{height:150px;flex:none}
.hero h1{font-size:26px;margin-bottom:6px}
.hero p{color:#c9d3e4;margin:0 0 16px}
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.cijfer{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:14px 16px}
.cijfer .n{font-size:28px;font-weight:800}
.cijfer .l{color:var(--zacht);font-size:13px;font-weight:600}
.lijstje{list-style:none;margin:0;padding:0}
.lijstje li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--lijn)}
.lijstje li:last-child{border-bottom:0}
.lijstje .wanneer{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.lijstje .laat{color:var(--rood)}
.leeg{color:var(--zacht);padding:16px;font-size:14px}

/* tabellen */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
.filters input[type=search]{max-width:280px}
.filters select{width:auto;max-width:200px}
.tabel-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--lijn);vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--zacht);background:#fafbfd;position:sticky;top:0}
td.nowrap{white-space:nowrap}
.teller{display:inline-block;min-width:20px;height:20px;line-height:20px;padding:0 6px;margin-left:6px;border-radius:10px;background:var(--oranje);color:#fff;font-size:12px;font-weight:800;text-align:center}
.top .bel{position:relative;font-size:15px}
.top .bel .teller{position:absolute;top:-8px;right:-10px;margin:0}
.meldingen{list-style:none;margin:0;padding:0}
.meldingen li button{display:flex;gap:10px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--lijn);padding:10px 4px;cursor:pointer;font:inherit;color:inherit}
.meldingen li button:hover{background:var(--bg)}
.meldingen li.ongelezen .m-tekst{font-weight:700}
.meldingen .m-tekst{display:block}
.vink.vink-klein{padding:6px 10px;font-size:13px;align-items:center}
.vink.vink-klein input{margin:0}
.preview-kaart .pk-kop{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.preview-kaart h2{font-size:18px}
.preview-kaart h2 a{text-decoration:none;color:var(--navy)}
.preview-kaart .pk-meta{text-align:right;display:grid;gap:4px;justify-items:end}
.pk-info{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:14px}
.st-toegewezen{background:#fff4d6;color:#8a5a00}
.st-preview{background:#efe8fd;color:#6d3fd1}
table.gebruikers tbody tr{cursor:default}
table.gebruikers tr.inactief td{opacity:.6}
table.gebruikers .chip{margin-left:6px}
.acties-cel{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.codeblok{background:var(--navy);color:#fff;padding:14px 16px;border-radius:10px;font:15px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap;margin:0;user-select:all}
tbody tr{cursor:pointer}
tbody tr:hover{background:#fafbfd}
.paginering{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:12px 16px;color:var(--zacht);font-size:14px}

/* agenda */
.agenda-kop{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.agenda-kop h1{font-size:20px;margin-right:auto}
.agenda-kop select{width:auto}
.kaart.achterstallig{margin-bottom:12px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.dag{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);min-height:260px;display:flex;flex-direction:column}
.dag>header{padding:8px 10px;border-bottom:1px solid var(--lijn);font-weight:700;font-size:13px;display:flex;justify-content:space-between}
.dag.vandaag{border-color:var(--oranje);box-shadow:0 0 0 1px var(--oranje)}
.dag.weekend{background:#fafbfd}
.dag .items{padding:6px;display:grid;gap:6px;align-content:start}
.item{border-radius:8px;padding:6px 8px;font-size:12.5px;cursor:pointer;border-left:4px solid var(--zacht);background:var(--grijs-l);line-height:1.3}
.item .u{font-weight:800;font-variant-numeric:tabular-nums}
.item.t-terugbellen,.item.t-opvolgen{border-left-color:var(--oranje);background:var(--oranje-l)}
.item.t-afspraak{border-left-color:var(--groen);background:var(--groen-l)}
.item.t-taak{border-left-color:var(--blauw);background:var(--blauw-l)}
.item.gedaan{opacity:.5;text-decoration:line-through}

/* agenda: weekrooster */
.ag-kop{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.ag-titel{display:flex;align-items:center;gap:10px;margin-right:auto}
.ag-titel h1{font-size:24px;text-transform:capitalize}
.ag-nav{display:flex;gap:4px}
.ag-nav .btn{min-width:36px}
.segment{display:inline-flex;background:var(--grijs-l);border-radius:10px;padding:3px}
.segment button{border:0;background:none;padding:6px 14px;border-radius:8px;font-weight:600;cursor:pointer;color:var(--zacht)}
.segment button.aan{background:var(--wit);color:var(--navy);box-shadow:0 1px 3px rgba(11,30,60,.15)}
.ag-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.ag-kaart{overflow:hidden}
.ag-rooster{--dagen:5;max-height:calc(100vh - 170px);overflow:auto;position:relative}
.ag-hoofd{display:grid;grid-template-columns:56px repeat(var(--dagen),minmax(110px,1fr));position:sticky;top:0;z-index:3;background:var(--wit);border-bottom:1px solid var(--lijn)}
.ag-dagkop{display:flex;align-items:baseline;gap:6px;padding:10px 10px 8px;border-left:1px solid var(--lijn)}
.ag-dagkop .wd{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--zacht)}
.ag-dagkop .dn{font-size:22px;font-weight:800;line-height:1}
.ag-dagkop .aantal{margin-left:auto;font-size:11px;font-weight:700;background:var(--grijs-l);color:var(--zacht);border-radius:999px;padding:1px 7px}
.ag-dagkop.vandaag .dn{background:var(--oranje);color:#fff;border-radius:999px;min-width:34px;height:34px;display:inline-grid;place-items:center;font-size:18px}
.ag-dagkop.vandaag .wd{color:var(--oranje-d)}
.ag-lichaam{display:grid;grid-template-columns:56px repeat(var(--dagen),minmax(110px,1fr));position:relative}
.ag-uren{position:relative}
.ag-uur{position:absolute;right:8px;transform:translateY(-7px);font-size:11px;color:var(--zacht);font-variant-numeric:tabular-nums}
.ag-uur:first-child{transform:none}
.ag-kol{position:relative;border-left:1px solid var(--lijn);cursor:copy;
  background-image:linear-gradient(to bottom,var(--lijn) 1px,transparent 1px),linear-gradient(to bottom,#f2f4f8 1px,transparent 1px);
  background-size:100% 72px,100% 36px;background-position:0 0,0 36px}
.ag-kol.vandaag{background-color:#fff8f3}
.ag-kol.voorbij{background-color:#fbfcfd}
.ag-item{position:absolute;display:flex;flex-direction:column;gap:1px;text-align:left;overflow:hidden;border:0;border-left:4px solid var(--zacht);
  background:var(--grijs-l);border-radius:8px;padding:4px 7px;font:inherit;font-size:12px;line-height:1.25;color:var(--navy);cursor:pointer;
  box-shadow:0 1px 2px rgba(11,30,60,.08);z-index:1}
.ag-item:hover{z-index:2;box-shadow:0 4px 14px rgba(11,30,60,.18);height:auto!important;min-height:42px}
.ag-item>span{flex:none}
.ag-tijd{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ag-soort{font-weight:600;opacity:.75}
.ag-naam{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-wie{font-size:11px;opacity:.75}
.ag-item.t-terugbellen,.ag-item.t-opvolgen{border-left-color:var(--oranje);background:var(--oranje-l)}
.ag-item.t-afspraak{border-left-color:var(--groen);background:var(--groen-l)}
.ag-item.t-taak{border-left-color:var(--blauw);background:var(--blauw-l)}
.ag-item.gedaan{opacity:.45;text-decoration:line-through}
.ag-nu{position:absolute;left:-1px;right:0;height:2px;background:var(--rood);z-index:2;pointer-events:none}
.ag-nu::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--rood)}
.ag-lijst{display:none}
.stip{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--zacht);flex:none}
.stip.t-terugbellen,.stip.t-opvolgen{background:var(--oranje)}
.stip.t-afspraak{background:var(--groen)}
.stip.t-taak{background:var(--blauw)}
.lijstje.compact li{justify-content:flex-start;gap:10px;padding:9px 14px;font-size:14px}
.lijstje .groei{flex:1;min-width:0}
.lijstje .groei strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lijstje li.klikbaar{cursor:pointer}
.lijstje li.klikbaar:hover{background:var(--bg)}
.kaart-rood{border-color:#f6c9ca}
.legende{list-style:none;margin:0;padding:8px 16px 12px}
.legende li{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px}
.legende li strong{margin-left:auto}

/* modaal */
.modaal-achter{position:fixed;inset:0;background:rgba(11,30,60,.45);display:grid;place-items:center;padding:16px;z-index:50}
.modaal{background:var(--wit);border-radius:14px;width:100%;max-width:640px;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modaal>header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--lijn)}
.modaal>header h2{font-size:18px}
.modaal .inhoud{padding:20px;display:grid;gap:12px}
.modaal footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--lijn)}
.vink{display:flex;gap:10px;align-items:flex-start;font-size:14px;background:var(--bg);padding:10px 12px;border-radius:10px}
.vink input{margin-top:3px}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:10px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60;max-width:90vw}
#toast.zicht{opacity:1}
#toast.fout{background:var(--rood)}

.beheer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.help{font-size:13px;color:var(--zacht)}
.help code{background:var(--grijs-l);padding:1px 5px;border-radius:4px}

@media (max-width:1100px){
  .ag-wrap{grid-template-columns:1fr}
}
@media (max-width:900px){
  .ag-rooster{display:none}
  .ag-lijst{display:grid;gap:12px}
  .ag-kaart{background:none;border:0;box-shadow:none}
  .ag-titel{width:100%}
  .belkop{position:static}
  .code-select{min-width:0;width:100%}
  .res-knoppen{margin-left:0;width:100%}
  .res-knoppen .btn{flex:1}
  .belgrid .kol-script{order:-1}
  .belgrid,.start,.beheer-grid{grid-template-columns:1fr}
  .week{grid-template-columns:1fr}
  .dag{min-height:0}
  .top{gap:10px;padding:0 12px}
  .top .wie span{display:none}
  main{padding:12px}
  .hero{flex-direction:column;text-align:center}
  .belbalk .acties{margin-left:0}
}