:root{
  --groen:#649A28; --groen-licht:#8CC53D; --rood:#E1192B;
  --grijs:#f4f5f3; --lijn:#e0e2dd; --tekst:#222; --zacht:#666;
  --groen-zacht:#eef6e1; --groen-rand:#d6e8bd;
  --sch:0 2px 6px rgba(60,80,30,.07),0 1px 2px rgba(60,80,30,.06);
  --sch-hover:0 8px 20px rgba(60,80,30,.15);
}
*{box-sizing:border-box}
body{margin:0;font-family:Carlito,Calibri,system-ui,Arial,sans-serif;color:var(--tekst);background:#eaeee7}
a{color:var(--groen);text-decoration:none}
a:hover{text-decoration:underline}
.topbar nav a:hover,.dagcel:hover,.weekbar a:hover,.knop:hover,.icoon-knop:hover,.nieuwblok>summary:hover,a.knop:hover,a.tegel:hover{text-decoration:none}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-bottom:3px solid var(--groen);padding:.6rem 1.2rem;flex-wrap:wrap;gap:.5rem}
.topbar .brand{font-weight:700;color:var(--groen);font-size:1.1rem;display:inline-flex;align-items:baseline;gap:.4rem}
.topbar .brand-logo{height:30px;width:auto;max-width:200px;display:block;vertical-align:middle}
.topbar .brand .brand-sub{font-weight:400;font-style:italic;font-size:.78rem;color:#8a8a8a}
.topbar nav{display:flex;align-items:center;gap:.35rem .4rem;flex-wrap:wrap}
.topbar nav a{color:var(--groen);background:var(--groen-zacht);border:1px solid var(--groen-rand);padding:.4rem .8rem;border-radius:9px;font-weight:600;font-size:.9rem;transition:.12s}
.topbar nav a:hover{background:#e2efce;color:var(--groen)}
.topbar nav a.actief{background:var(--groen);color:#fff;border-color:var(--groen)}
.topbar nav a.uit{color:var(--rood);background:#fdecea;border-color:#f3c9c6}
.topbar nav a.uit:hover{background:#fbd5d1;color:var(--rood)}
.topbar nav .wie{color:var(--zacht);font-size:.85rem;border-left:1px solid var(--lijn);padding-left:1rem;margin-left:.3rem}
td.acties{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}

main{max-width:1200px;margin:1.5rem auto;padding:0 1rem}
h1{font-size:1.5rem;border-bottom:2px solid var(--groen-licht);padding-bottom:.3rem}
h2{font-size:1.15rem;color:var(--groen)}

/* Kaarten */
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:1rem 1.2rem;margin:1rem 0;box-shadow:var(--sch)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
.formulier label{display:block;margin:.4rem 0;font-size:.9rem;color:var(--zacht)}
input,select,textarea{width:100%;padding:.5rem;border:1px solid var(--lijn);border-radius:8px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--groen-licht);box-shadow:0 0 0 3px rgba(140,197,61,.18)}
input[type=checkbox],input[type=radio]{width:auto;padding:0;box-shadow:none}
textarea{resize:vertical}

.rij{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}
.rij label{margin:0;font-size:.85rem;color:var(--zacht)}
.rij input,.rij select{width:auto}
.inline{display:inline}

/* Knoppen */
button,.knop{display:inline-block;cursor:pointer;border:none;border-radius:9px;
  padding:.55rem 1rem;font:inherit;background:#e8ebe3;color:var(--tekst);transition:.13s}
button:hover,.knop:hover{background:#dee2d7}
button.primair,.knop.primair{background:var(--groen);color:#fff;box-shadow:0 3px 10px rgba(100,154,40,.28)}
button.primair:hover,.knop.primair:hover{background:#54831f}
button.klein{padding:.3rem .6rem;font-size:.85rem}

/* Combobox (oud) */
.combo-wrap{position:relative}
.combo-list{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;
  border:1px solid var(--lijn);border-radius:0 0 6px 6px;max-height:240px;overflow:auto;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.combo-list:empty{display:none}
.combo-item{padding:.5rem .6rem;cursor:pointer;font-size:.9rem;border-bottom:1px solid #f0f0ec}
.combo-item:hover{background:var(--grijs)}
.combo-item.laden,.combo-item.fout{color:var(--zacht);cursor:default}
.combo-item.fout{color:var(--rood)}

/* Kieslijst: knop opent paneel met zoekveld + volledige lijst */
.kies-wrap{position:relative;display:block;font-size:.9rem;color:var(--zacht);margin:.4rem 0}
.kies-wrap[hidden]{display:none}
.checklist{max-height:240px;overflow:auto;border:1px solid var(--lijn);border-radius:6px;padding:.3rem .5rem;background:#fff}
.checklist .checkrij{display:flex;align-items:center;gap:.5rem;padding:.15rem 0;font-size:.9rem;color:var(--tekst);cursor:pointer}
.checklist .checkrij input{width:16px;height:16px;flex:0 0 16px;padding:0;margin:0;border-radius:3px;accent-color:var(--groen)}
.veld-kop{display:block;margin:.4rem 0 .25rem;font-size:.9rem;color:var(--zacht)}
.dropdown-multi{border:1px solid var(--lijn);border-radius:6px;background:#fff}
.dropdown-multi>summary{list-style:none;cursor:pointer;padding:.5rem;color:var(--tekst)}
.dropdown-multi>summary::-webkit-details-marker{display:none}
.dropdown-multi>summary::after{content:"\25BE";float:right;color:var(--zacht)}
.dropdown-multi[open]>summary::after{content:"\25B4"}
.dropdown-multi .dropdown-body{border-top:1px solid var(--lijn);padding:.4rem .5rem}
.dropdown-multi .checklist{border:0;max-height:220px;padding:.2rem 0}
.info{display:inline-block;width:15px;height:15px;line-height:15px;text-align:center;color:var(--groen);cursor:help;font-size:.8rem}
.kies-knop{display:block;width:100%;margin-top:.25rem;text-align:left;background:#fff;border:1px solid var(--lijn);
  color:var(--zacht);padding:.5rem;border-radius:6px;font:inherit;cursor:pointer}
.kies-knop.gekozen{color:var(--tekst)}
.kies-paneel{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;
  border:1px solid var(--lijn);border-radius:0 0 6px 6px;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.kies-zoek{border:none;border-bottom:1px solid var(--lijn);border-radius:0}
.kies-zoek:focus{outline:none}
.kies-lijst{max-height:280px;overflow:auto}
.kies-item{padding:.5rem .6rem;cursor:pointer;font-size:.9rem;border-bottom:1px solid #f0f0ec}
.kies-item:hover{background:var(--grijs)}
.kies-item.leeg,.kies-item.fout{color:var(--zacht);cursor:default}
.kies-item.fout{color:var(--rood)}

/* Tabellen */
table.lijst{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--lijn);border-radius:12px;overflow:hidden;box-shadow:var(--sch)}
table.lijst th,table.lijst td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--lijn);font-size:.9rem}
table.lijst th{background:var(--groen);color:#fff;font-weight:600}
table.lijst tbody tr:nth-child(even){background:#fafbf7}
table.lijst tbody tr:hover{background:var(--groen-zacht)}
table.lijst td.r,table.lijst th.r{text-align:right}
tr.inactief{opacity:.5}

.badge{display:inline-block;padding:.15rem .5rem;border-radius:12px;background:#eee;font-size:.8rem}
.badge.groen{background:var(--groen-licht);color:#1e3a00}

.ok{color:#1e6b00;background:#e8f5d8;padding:.5rem .8rem;border-radius:6px}
.fout{color:#a40c1b;background:#fde3e5;padding:.5rem .8rem;border-radius:6px}

.bestand{font-size:.85rem;color:var(--zacht)}

/* Login */
.login-body{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;overflow:hidden}
.login-body::before{content:"";position:fixed;inset:-30px;background:url('login_bg.webp') center/cover no-repeat;filter:blur(4px);transform:scale(1.05);z-index:-2}
.login-body::after{content:"";position:fixed;inset:0;background:linear-gradient(135deg,rgba(100,154,40,.26),rgba(20,35,5,.36));z-index:-1}
.login-card{background:#fff;padding:2.4rem 2.2rem;border-radius:16px;width:340px;box-shadow:0 24px 60px rgba(0,0,0,.4);border-top:4px solid var(--rood)}
.login-logo{display:block;margin:0 auto .6rem;width:190px;max-width:80%;height:auto}
.login-sub{text-align:center;color:var(--zacht);font-size:.9rem;margin:0 0 1.2rem;letter-spacing:.02em}
.login-card label{display:block;margin:.7rem 0;font-size:.9rem;color:var(--zacht)}
.login-card input{margin-top:.25rem}
.login-card button{width:100%;background:var(--groen);color:#fff;margin-top:1rem;padding:.7rem;font-size:1rem}
.login-card button:hover{background:#54831f}

/* Timer (start/stop) bij urenregistratie */
.timer-wrap{display:block;font-size:.9rem;color:var(--zacht);margin:.4rem 0}
.timer-label{display:block;margin-bottom:.25rem}
.timer-knoppen{display:flex;gap:.4rem}
.timer-knoppen .klein{flex:1}
#startKnop{background:var(--groen,#649A28);color:#fff;border-color:var(--groen,#649A28)}
#stopKnop{background:var(--rood,#E1192B);color:#fff;border-color:var(--rood,#E1192B)}
#startKnopVrij{background:var(--groen,#649A28);color:#fff;border-color:var(--groen,#649A28)}
#stopKnopVrij{background:var(--rood,#E1192B);color:#fff;border-color:var(--rood,#E1192B)}
#pauzeKnopVrij{background:#E8870E;color:#fff;border-color:#E8870E}
#pauzeKnopVrij:disabled{background:#d9d9d9;color:#888;border-color:#d9d9d9;cursor:default}
input[readonly]{background:#f3f4f6;color:var(--tekst)}

/* Bewerken-link in lijsten en annuleer-link */
a.knop-link{display:inline-block;cursor:pointer;border-radius:6px;padding:.55rem 1rem;
  font:inherit;background:#e8e9e5;color:var(--tekst);text-decoration:none}
a.knop-link:hover{background:#dadbd6}
a.knop-link.klein{padding:.3rem .6rem;font-size:.85rem}

/* Weekgroepering recente uren */
.weekkop{font-size:1.05rem;color:var(--groen);margin:.1rem 0 .6rem}
.weekkop .weekrange{color:var(--zacht);font-weight:400;font-size:.85rem;margin-left:.5rem}
.lijst tfoot .totaalrij td{border-top:2px solid var(--groen);font-weight:700;background:#fbfcfa}
details.kaart summary{cursor:pointer;font-weight:700;color:var(--groen)}
details.kaart[open] summary{margin-bottom:.2rem}

/* Van/Tot naast elkaar in één rastercel */
.van-tot{display:flex;gap:.6rem}
.van-tot label{flex:1;margin:.4rem 0}

/* Eindtotaal (admin) onder de weken */
.eindtotaal{display:flex;align-items:center;gap:1.2rem;border-left:4px solid var(--groen)}
.eindtotaal strong{flex:1;color:var(--groen)}
.eindtotaal .bedrag{font-weight:700;font-size:1.05rem}

/* Bedragen/uren en datum netjes op één regel */
.lijst td.r, .lijst th.r{white-space:nowrap}
.lijst td:first-child{white-space:nowrap}

/* Groepering per werknemer in het urenoverzicht */
.lijst tr.groepkop td{background:var(--groen-licht);color:#1e3a00;font-weight:700;padding-top:.5rem;padding-bottom:.5rem}
.lijst tr.subtotaalrij td{border-top:1px solid var(--lijn);color:var(--zacht);font-weight:600;background:#fbfcfa}

/* Werklocatie / reiskosten */
.reis-blok{border:1px solid var(--lijn);border-radius:8px;padding:.6rem .9rem;margin:.4rem 0 1rem;background:#fcfdfb}
.formulier label.reis-check{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.95rem;color:#2c2c2c;cursor:pointer}
.reis-blok input[type=checkbox]{flex:0 0 18px;width:18px;height:18px;min-width:18px;padding:0;margin:0;border-radius:4px;accent-color:var(--groen)}
.reis-icon{flex:0 0 auto;color:var(--groen)}
.reis-velden{margin-top:.8rem}
.reis-acties{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.6rem}
.reis-note{display:inline-block;font-size:.8rem;color:var(--zacht);margin-top:.15rem}


/* Gebruikerstabel — compact en strak uitgelijnd */
table.lijst.gebruikers th,table.lijst.gebruikers td{padding:.42rem .5rem;vertical-align:middle}
.gebruikers select{width:auto;min-width:6.5em;padding:.26rem .4rem;font-size:.83rem;
  border-color:#dfe3da;color:var(--tekst);border-radius:5px}
.gebruikers select:disabled{color:#9a9a9a;background:#f6f7f4;border-color:#ececec}
.gebruikers td:nth-child(5){text-align:left}
.gebruikers .check{display:inline-flex;align-items:center;justify-content:center;margin:0;cursor:pointer}
.gebruikers .check input{width:16px;height:16px;flex:0 0 16px;padding:0;margin:0;
  border-radius:3px;accent-color:var(--groen);cursor:pointer}
.gebruikers td.acties{display:table-cell;white-space:nowrap;text-align:left}
.gebruikers td.acties form{display:inline-flex;align-items:center;gap:.3rem;
  margin:0;vertical-align:middle}
.gebruikers td.acties form + form{margin-left:.35rem}
.gebruikers td.acties input[name=nieuw_wachtwoord]{width:5.5em;padding:.26rem .4rem;font-size:.8rem}
.gebruikers button.klein{background:#fff;border:1px solid #dfe3da;color:#5a5a5a;
  font-size:.78rem;padding:.26rem .5rem;border-radius:5px;line-height:1}
.gebruikers button.klein:hover{background:#f3f4f0;color:#222;border-color:#cdd3c6}
.gebruikers td:nth-child(8){color:#6a6a6a;font-size:.85rem}
.gebruikers tr.inactief td:nth-child(8){color:var(--rood)}

/* Login: 2FA-stap */
.login-uitleg{font-size:.9rem;color:#555;margin:.2rem 0 .4rem}
.login-klein{font-size:.85rem;text-align:center;margin:.4rem 0 0}

/* Profiel: 2FA */
.tfa-status{font-size:.92rem;border-radius:6px;padding:.5rem .7rem}
.tfa-status.on{background:#eef6e3;color:#2f5010}
.tfa-status.off{background:#f6f7f4;color:#555}
.tfa-setup{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin:.6rem 0}
.tfa-qr{width:180px;height:180px;background:#fff;padding:6px;border:1px solid var(--lijn);border-radius:8px}
.tfa-qr img,.tfa-qr canvas{display:block}
.tfa-key p{margin:0 0 .3rem;font-size:.88rem;color:#555}
.tfa-key code{display:inline-block;background:#f3f4f0;border:1px solid var(--lijn);border-radius:6px;
  padding:.4rem .6rem;font-size:1rem;letter-spacing:.06em}
.tfa-bevestig{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}

/* Login: 'onthoud dit apparaat'-vinkje */
.login-onthoud{display:flex;align-items:center;gap:.5rem;justify-content:center;
  margin:.7rem 0 .2rem;font-size:.88rem;color:#cfd3cb}
.login-onthoud input{width:16px;height:16px;accent-color:var(--groen)}

button[hidden],.knop[hidden]{display:none}

/* Info-icoon met hover-tooltip (herbruikbaar) */
.info-i{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  background:var(--groen);color:#fff;font-size:11px;font-style:italic;font-weight:700;cursor:help;position:relative;margin-left:.35rem;vertical-align:middle}
.info-i:hover::after{content:attr(data-tip);position:absolute;left:23px;top:50%;transform:translateY(-50%);
  background:#222;color:#fff;padding:.5rem .65rem;border-radius:6px;font-size:.8rem;font-style:normal;font-weight:400;
  width:max-content;max-width:280px;white-space:normal;line-height:1.35;z-index:40;box-shadow:0 4px 14px rgba(0,0,0,.25)}

/* Instellingen: één instelling per regel met scheidslijnen */
.instellijst{display:block}
.instelrij{display:flex;align-items:center;gap:.9rem;padding:.4rem 0;border-bottom:1px solid #e7e9e4}
.instelrij:first-of-type{padding-top:.2rem}
.instelrij .ir-label{flex:0 0 250px;color:var(--zacht);font-size:.86rem;display:flex;align-items:center;line-height:1.3}
.instelrij .ir-veld{flex:1;min-width:200px;max-width:430px}
.instelrij .ir-veld>select,.instelrij .ir-veld>input{width:100%;box-sizing:border-box;margin:0;padding:.38rem .55rem;font-size:.88rem}
.instelrij .ir-veld label{font-size:.88rem}
.instelrij .ir-veld label span{color:var(--zacht)}
.instelrij.top{align-items:flex-start}
.instelrij.top .ir-label{padding-top:.4rem}
.instel-acties{padding-top:1.1rem}
@media(max-width:680px){.instelrij{flex-direction:column;align-items:stretch;gap:.35rem}.instelrij .ir-label{flex:none}}

/* Debiteur-blok uitgeschakeld bij overhead (zonder klant) */
.kies-wrap.uitgeschakeld{opacity:.6}
.kies-knop:disabled{background:#f1f2ef;color:#9aa090;cursor:not-allowed;border-style:dashed}

/* ===== Mobiel / native (PWA) ===== */
.navtoggle{display:none}
.hamburger{display:none}
.tabel-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* veilige marge voor notch bij schermvullend openen */
@supports(padding:max(0px)){
  .topbar{padding-left:max(.8rem,env(safe-area-inset-left));padding-right:max(.8rem,env(safe-area-inset-right))}
}

@media(max-width:760px){
  body{-webkit-text-size-adjust:100%}
  .topbar{flex-wrap:wrap;padding:.6rem .8rem;position:sticky;top:0;z-index:50;
    box-shadow:0 2px 6px rgba(0,0,0,.06)}
  .topbar .brand{font-size:1.05rem}
  .hamburger{display:inline-flex;align-items:center;justify-content:center;font-size:1.55rem;line-height:1;
    color:var(--groen);cursor:pointer;padding:.1rem .35rem;margin-left:auto;user-select:none}
  .topbar nav{display:none;flex-direction:column;align-items:stretch;width:100%;gap:0;margin-top:.5rem}
  #navtoggle:checked ~ nav{display:flex}
  .topbar nav a{padding:.75rem .5rem;border:none;border-top:1px solid var(--lijn);border-radius:0;background:transparent;color:var(--tekst)}
  .topbar nav a.actief{background:var(--groen-zacht);color:var(--groen)}
  .topbar nav a.uit{border:none;border-top:1px solid var(--lijn);background:transparent}
  .topbar nav .wie{border-left:none;border-top:1px solid var(--lijn);padding:.65rem .25rem}
  main{margin:1rem auto;padding:0 .8rem}
  /* iOS: voorkom inzoomen bij focus op invoervelden */
  input,select,textarea,button{font-size:16px}
  table.lijst th,table.lijst td{font-size:.85rem;padding:.5rem .55rem}
  .rij{flex-wrap:wrap}
}

/* Divisie-wisselaar in de balk */
.topbar .divkies{margin:0;display:inline-flex}
.topbar .divkies select{padding:.25rem .4rem;font-size:.82rem;border:1px solid var(--lijn);border-radius:6px;background:#fff}
.topbar .divlabel{color:var(--zacht);font-size:.82rem;border:1px solid var(--lijn);border-radius:6px;padding:.2rem .5rem}

/* Gebruikersrechten + administratie-uitklap */
.rechten-cel{display:inline-flex;flex-direction:column;gap:.25rem;align-items:flex-start;vertical-align:middle}
.rechten-cel .check{font-size:.82rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem}
.adm-detail summary{cursor:pointer;color:var(--groen);font-size:.85rem;list-style:revert;white-space:nowrap}
.adm-detail ul{margin:.3rem 0 0;padding-left:1.1rem}
.adm-detail li{font-size:.85rem;line-height:1.5}

/* Sub-tabbladen (overzicht) */
.subtabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1.1rem;border-bottom:2px solid var(--lijn)}
.subtabs a{padding:.55rem 1.05rem;border:1px solid var(--lijn);border-bottom:none;border-radius:10px 10px 0 0;background:#f4f6ef;color:var(--tekst);font-weight:600;font-size:.92rem;margin-bottom:-2px}
.subtabs a:hover{background:var(--groen-zacht);text-decoration:none}
.subtabs a.actief{background:var(--groen);color:#fff;border-color:var(--groen)}

/* Maandmatrix: openstaande uren per klant */
table.maandmatrix th.mnd,table.maandmatrix td.mnd{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.maandmatrix tr.klantkop.klapbaar{cursor:pointer}
table.maandmatrix tr.klantkop .caret{display:inline-block;width:1em;color:var(--groen);transition:transform .15s}
table.maandmatrix tr.klantkop.open .caret{transform:rotate(90deg)}
table.maandmatrix tr.medrij td{background:#fbfcf9;color:#555;font-size:.85rem}
table.maandmatrix tr.medrij td:first-child{padding-left:1.9rem}
table.maandmatrix tr.medrij[hidden]{display:none}

/* Blokkade-melding bij debiteurkeuze (eindklant-regels) */
.blok-melding{margin:.4rem 0 0;padding:.55rem .75rem;border-radius:8px;background:#fde3e5;color:#a40c1b;border:1px solid #f3c9c6;font-size:.88rem;line-height:1.35}

/* Eindklant-regels beheer */
details.ek-med{padding:0}
details.ek-med>summary{cursor:pointer;padding:.7rem .9rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:1rem}
details.ek-med>summary::-webkit-details-marker{display:none}
details.ek-med>summary::before{content:"\25B8";color:var(--groen);margin-right:.2rem;transition:transform .15s}
details.ek-med[open]>summary::before{transform:rotate(90deg)}
.ek-snel{display:inline-flex;gap:.35rem}
.knop.mini{padding:.2rem .55rem;font-size:.78rem;border-radius:6px}
.ek-groep{border-top:1px solid var(--lijn);padding:.6rem .9rem}
.ek-groep-kop{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.4rem;color:var(--zacht);font-size:.9rem}
.ek-rijen{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.25rem .9rem}
label.ek-rij{display:flex;align-items:center;gap:.5rem;padding:.2rem .3rem;border-radius:6px;font-size:.9rem}
label.ek-rij:hover{background:var(--groen-zacht)}

a.knop.klein,.knop.klein{padding:.3rem .6rem;font-size:.85rem}

button.klein.rood,.klein.rood{background:#fdecea;color:var(--rood)}
button.klein.rood:hover,.klein.rood:hover{background:#fbd5d1}

.kaart>h2:first-child,.kaart>h3:first-child{margin-top:0}

details>summary.knop{list-style:none}
details>summary.knop::-webkit-details-marker{display:none}
details>summary.knop::marker{content:""}

/* Factuur-PDF modal (lichtgroen omrand) */
.pdf-overlay{position:fixed;inset:0;background:rgba(20,30,10,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:1rem}
.pdf-overlay.open{display:flex}
.pdf-modal{background:#fff;border:3px solid var(--groen);border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.32);width:min(920px,96vw);height:min(90vh,1150px);display:flex;flex-direction:column;overflow:hidden}
.pdf-modal-kop{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .8rem;background:var(--groen-zacht);border-bottom:2px solid var(--groen-rand)}
.pdf-modal-kop h3{margin:0;color:var(--groen);font-size:1rem}
.pdf-modal-acties{display:inline-flex;gap:.5rem;align-items:center}
.pdf-modal-sluit{background:#fff;border:1px solid var(--groen-rand);color:var(--groen);border-radius:8px;padding:.3rem .7rem;cursor:pointer;font-weight:700;font-size:.85rem}
.pdf-modal-sluit:hover{background:#e2efce}
.pdf-modal iframe{flex:1;border:0;width:100%;background:#f4f6ef}
a.factuurlink{color:var(--groen);text-decoration:none;cursor:pointer}
a.factuurlink:hover{text-decoration:underline}

/* Spec-linkje naast het factuurnummer */
a.spec-link{display:inline-block;margin-left:.5rem;font-size:.72rem;font-weight:600;color:var(--groen);background:var(--groen-zacht);border:1px solid var(--groen-rand);border-radius:6px;padding:.05rem .4rem;text-decoration:none;vertical-align:middle}
a.spec-link:hover{background:#e2efce}

/* ============================================================
   Inkoopcontrole — aanvullingen op de gedeelde huisstijl
   ============================================================ */

.kaart.smal{max-width:520px}
.inleiding{color:var(--zacht);max-width:70ch}
.zacht{color:var(--zacht)}
.rechts{text-align:right;white-space:nowrap}
.inline-kop{display:inline;font-size:1.15rem}

/* Meldingen */
.melding{padding:.7rem .9rem;border-radius:9px;background:var(--groen-zacht);
  border:1px solid var(--groen-rand);color:#3d5f18;margin:1rem 0}
.melding.ok{background:var(--groen-zacht);border-color:var(--groen-rand)}
.melding.fout{background:#fdecea;border-color:#f3c9c6;color:#9a2620}

.status-ok{color:var(--groen);font-weight:600}
.status-nee{color:var(--zacht)}

/* Gegevenslijstjes */
dl.gegevens{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:.6rem 0}
dl.gegevens dt{color:var(--zacht);font-size:.88rem}
dl.gegevens dd{margin:0}

/* Badges */
.badge{display:inline-block;padding:.18rem .6rem;border-radius:999px;font-size:.78rem;
  font-weight:700;letter-spacing:.01em;white-space:nowrap;vertical-align:middle}
.badge.ok,.badge.goed{background:var(--groen-zacht);color:#3d5f18;border:1px solid var(--groen-rand)}
.badge.let-op,.badge.let_op{background:#fff4e0;color:#8a5a10;border:1px solid #f0dcb4}
.badge.fout{background:#fdecea;color:#9a2620;border:1px solid #f3c9c6}
.badge.onzeker{background:#eef1f6;color:#4a5568;border:1px solid #d8dee8}
.badge.neutraal{background:var(--grijs);color:var(--zacht);border:1px solid var(--lijn)}

/* Tegels met de cijfers */
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.7rem;margin:1rem 0}
.tegel{display:flex;flex-direction:column;gap:.15rem;background:#fff;border:1px solid var(--lijn);
  border-radius:14px;padding:.9rem 1rem;box-shadow:var(--sch);transition:.13s;color:var(--tekst)}
.tegel:hover{box-shadow:var(--sch-hover);transform:translateY(-1px)}
.tegel .getal{font-size:1.7rem;font-weight:700;line-height:1.1}
.tegel .label{font-size:.82rem;color:var(--zacht)}
.tegel.actief{border-color:var(--groen);box-shadow:0 0 0 2px rgba(100,154,40,.18)}
.tegel.fout .getal{color:#c0392b}
.tegel.onzeker .getal{color:#4a5568}
.tegel.let-op .getal{color:#8a5a10}
.tegel.ok .getal{color:var(--groen)}

/* Tabel met facturen */
table.lijst{width:100%;border-collapse:collapse;font-size:.92rem}
table.lijst th{text-align:left;font-size:.8rem;color:var(--zacht);font-weight:600;
  border-bottom:2px solid var(--lijn);padding:.5rem .6rem;white-space:nowrap}
table.lijst td{padding:.5rem .6rem;border-bottom:1px solid #f0f1ee;vertical-align:top}
table.lijst tbody tr:hover{background:#fafbf8}
table.lijst tr.rij-fout td:first-child{box-shadow:inset 3px 0 0 #e1192b}
table.lijst tr.rij-onzeker td:first-child{box-shadow:inset 3px 0 0 #8a97ab}
table.lijst tr.rij-let-op td:first-child{box-shadow:inset 3px 0 0 #d9a441}

.paginering{display:flex;align-items:center;gap:.8rem;margin-top:1rem}

/* Voortgang van de ophaalrun */
.voortgang{margin-top:1rem}
.voortgang .balk{height:10px;background:var(--grijs);border-radius:999px;overflow:hidden;border:1px solid var(--lijn)}
.voortgang .balk span{display:block;height:100%;width:2%;background:var(--groen-licht);transition:width .35s}
ul.meldingen{list-style:none;margin:.7rem 0 0;padding:0;font-size:.85rem;color:var(--zacht);
  max-height:200px;overflow:auto}
ul.meldingen li{padding:.2rem 0;border-bottom:1px solid #f2f3f0}

/* Checklijst (gereedschap op de server) */
ul.checklijst{list-style:none;margin:.5rem 0;padding:0}
ul.checklijst li{padding:.25rem 0 .25rem 1.5rem;position:relative}
ul.checklijst li::before{position:absolute;left:0;font-weight:700}
ul.checklijst li.ja::before{content:"\2713";color:var(--groen)}
ul.checklijst li.nee::before{content:"\2717";color:var(--rood)}

ul.uitleg{color:var(--zacht);font-size:.9rem;line-height:1.6;max-width:75ch}

/* Detailpagina */
.kolommen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1rem;align-items:start}
@media (max-width:900px){.kolommen{grid-template-columns:1fr}}
.bevinding{padding:.7rem .9rem;border-radius:9px;background:var(--grijs);border-left:4px solid var(--lijn)}
.bevinding.ok{background:var(--groen-zacht);border-left-color:var(--groen)}
.bevinding.fout{background:#fdecea;border-left-color:var(--rood)}
.bevinding.let-op{background:#fff4e0;border-left-color:#d9a441}
.bevinding.onzeker{background:#eef1f6;border-left-color:#8a97ab}

.pdfkader{width:100%;height:70vh;border:1px solid var(--lijn);border-radius:10px;background:#fff}
pre.tekstdump{background:#fbfbf9;border:1px solid var(--lijn);border-radius:8px;padding:.8rem;
  font-size:.78rem;line-height:1.45;max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-word}
details.kaart>summary{cursor:pointer;list-style:none}
details.kaart>summary::-webkit-details-marker{display:none}
details.kaart>summary::after{content:"\25BE";float:right;color:var(--zacht)}
details.kaart[open]>summary::after{content:"\25B4"}

/* Verdelingspagina */
table.verdeling td{vertical-align:middle}
.staafcel{width:180px;position:relative;white-space:nowrap}
.staaf{display:inline-block;height:9px;border-radius:999px;background:var(--groen-licht);vertical-align:middle}
.staaf.fout{background:#e07a72}
.staaf.let-op{background:#e3b661}
.staaflabel{font-size:.78rem;color:var(--zacht);margin-left:.5rem}
tr.totaalrij td{border-top:2px solid var(--lijn);border-bottom:none}
.veldenlijst{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;
  line-height:1.7;color:var(--zacht);background:#fbfbf9;border:1px solid var(--lijn);
  border-radius:8px;padding:.6rem;word-break:break-word}
a.kop-sorteer{color:var(--zacht);text-decoration:none;white-space:nowrap}
a.kop-sorteer:hover{color:var(--groen);text-decoration:none}
hr.scheiding{border:0;border-top:1px solid var(--lijn);margin:1rem 0}