:root{
  --groen:#649A28; --groen-licht:#8CC53D; --rood:#E1192B;
  --grijs:#f4f5f3; --lijn:#e0e2dd; --tekst:#222; --zacht:#666;
}
*{box-sizing:border-box}
body{margin:0;font-family:Carlito,Calibri,system-ui,Arial,sans-serif;color:var(--tekst);background:var(--grijs)}
a{color:var(--groen);text-decoration:none}
a:hover{text-decoration:underline}

/* 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:1rem;flex-wrap:wrap}
.topbar nav a{color:var(--tekst)}
.topbar nav a.uit{color:var(--rood)}
.topbar nav .wie{color:var(--zacht);font-size:.85rem;border-left:1px solid var(--lijn);padding-left:1rem}
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:8px;padding:1rem 1.2rem;margin:1rem 0}
.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:6px;font:inherit;background:#fff}
input[type=checkbox],input[type=radio]{width:auto;padding:0}
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:6px;
  padding:.55rem 1rem;font:inherit;background:#e8e9e5;color:var(--tekst)}
button.primair,.knop.primair{background:var(--groen);color:#fff}
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:8px;overflow:hidden}
table.lijst th,table.lijst td{padding:.55rem .7rem;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 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 .25rem;border-top:1px solid var(--lijn)}
  .topbar nav a.uit{border-top:1px solid var(--lijn)}
  .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}