/* ==================================================================
   TOFST opdrachtenportaal

   Uitgangspunt: het zoekerkader uit het TOFST-logo. Die vier hoekjes
   zijn het enige uitgesproken element; ze markeren wat actief of
   gekozen is. Al het andere blijft rustig en werkt voor de inhoud.

   Kleur    koel steengrijs met een groene zweem, bosgroen als inkt,
            eikenhout voor het kader, de huisstijlkleuren voor status
   Letter   Jost (licht) voor logo en koppen, Schibsted Grotesk voor
            alles wat gelezen en gebruikt wordt
================================================================== */

:root{
  --steen:#ECEEEA;
  --steen-diep:#E1E4DF;
  --wit:#FFFFFF;
  --lijn:#D9DDD7;
  --lijn-zacht:#E7EAE5;

  --bos:#1F2A26;
  --bos-60:#56615C;
  --bos-40:#879089;
  --bos-20:#B9C0BA;

  --eik:#A67C52;

  --salie:#6F8C74;  --salie-bleek:#E6EDE6;
  --lei:#44707E;    --lei-bleek:#E2ECEF;
  --oker:#B58E3A;   --oker-bleek:#F3ECDA;
  --roest:#A8483F;  --roest-bleek:#F4E4E1;
  --kiezel-bleek:#E9EBE8;

  --r-klein:4px;
  --r:7px;
  --r-groot:12px;

  --kop:'Jost',ui-sans-serif,system-ui,sans-serif;
  --tekst:'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif;

  /* Oudere namen die nog in de schermcode staan */
  --ink-60:var(--bos-60);
  --ink-40:var(--bos-40);
  --slate:var(--lei);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--tekst);background:var(--steen);color:var(--bos);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--lei)}

/* Cijfers die netjes onder elkaar staan, in dezelfde letter */
.mono{font-variant-numeric:tabular-nums}

/* Klein, gedempt label, geen hoofdletters */
.eyebrow{font-size:13.5px;color:var(--bos-40);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------
   Het zoekerkader. Vier hoekjes, getekend met achtergronden zodat het
   niets aan de maat of opmaak van het element verandert.
------------------------------------------------------------------ */
.kader,
nav button[aria-current="true"],
.daynav button[aria-current="true"]{
  --k:var(--eik);
  background-image:
    linear-gradient(var(--k),var(--k)), linear-gradient(var(--k),var(--k)),
    linear-gradient(var(--k),var(--k)), linear-gradient(var(--k),var(--k)),
    linear-gradient(var(--k),var(--k)), linear-gradient(var(--k),var(--k)),
    linear-gradient(var(--k),var(--k)), linear-gradient(var(--k),var(--k));
  background-repeat:no-repeat;
  background-size:
    var(--kl,9px) var(--kd,1.5px), var(--kd,1.5px) var(--kl,9px),
    var(--kl,9px) var(--kd,1.5px), var(--kd,1.5px) var(--kl,9px),
    var(--kl,9px) var(--kd,1.5px), var(--kd,1.5px) var(--kl,9px),
    var(--kl,9px) var(--kd,1.5px), var(--kd,1.5px) var(--kl,9px);
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
}

.wordmark{font-family:var(--kop);font-weight:200;letter-spacing:.38em;
  text-indent:.38em;line-height:1;display:inline-block}

/* ==================================================================
   Inloggen
================================================================== */
.inlog{min-height:100dvh;display:grid;grid-template-columns:1fr;background:var(--bos)}
@media (min-width:900px){ .inlog{grid-template-columns:1.1fr 1fr} }

.inlog .merk{display:grid;place-items:center;align-content:center;padding:56px 28px;
  color:#F2F4F0}
.inlog .merk .wordmark{font-size:clamp(48px,8vw,98px);padding:.34em .52em .32em;
  --kl:24px;--kd:2px}
.inlog .merk .regel{font-family:var(--kop);font-weight:300;font-size:16px;
  letter-spacing:.04em;color:#A9B4AD;margin-top:20px;text-align:center}

.inlog .vak{display:grid;place-items:center;padding:28px;background:var(--steen)}
@media (min-width:900px){ .inlog .vak{border-radius:var(--r-groot) 0 0 var(--r-groot)} }
.inlog .kaart{width:100%;max-width:380px}
.inlog form{background:var(--wit);border-radius:var(--r-groot);padding:30px 28px}
.inlog h1{font-family:var(--kop);font-weight:300;font-size:27px;margin-bottom:6px}
.inlog .onder{font-size:14.5px;color:var(--bos-60);margin-bottom:22px}

@media (prefers-reduced-motion:no-preference){
  .inlog .merk .wordmark{animation:kader-in 1s cubic-bezier(.2,.7,.2,1) both}
  @keyframes kader-in{
    from{--kl:0px;letter-spacing:.5em;opacity:0}
    to{--kl:24px;letter-spacing:.38em;opacity:1}
  }
}
@property --kl{syntax:'<length>';inherits:true;initial-value:9px}

/* ==================================================================
   Chrome
================================================================== */
.app{padding-bottom:82px}

header{position:sticky;top:0;z-index:40;background:var(--steen);
  padding:13px 18px;padding-top:calc(13px + env(safe-area-inset-top));
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--lijn)}
header .wordmark{font-size:17px;padding:.42em .56em .38em;--kl:7px}
header .who{font-size:13px;color:var(--bos-60);text-align:right;line-height:1.35}
header .who b{display:block;color:var(--bos);font-weight:600}
header .who button{display:block;margin-left:auto;font-size:12.5px;color:var(--bos-60);
  margin-top:2px;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--bos-20)}
header .who button:hover{color:var(--bos)}

nav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--wit);
  border-top:1px solid var(--lijn);display:flex;padding:4px;
  padding-bottom:calc(4px + env(safe-area-inset-bottom))}
nav button{flex:1;padding:8px 2px 7px;display:flex;flex-direction:column;align-items:center;
  gap:4px;color:var(--bos-40);border-radius:var(--r-klein)}
nav button span{font-size:11px;font-weight:500}
nav button[aria-current="true"]{color:var(--bos);--kl:7px}
nav svg{stroke-width:1.5}

.screen{padding:24px 18px 14px}
.screen-head{margin-bottom:22px}
.screen-head h1{font-family:var(--kop);font-weight:300;font-size:31px;line-height:1.1}
.screen-head p{font-size:15px;color:var(--bos-60);margin-top:6px}
.kopbalk{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}

/* ==================================================================
   Blokken en formulieren
================================================================== */
.block{background:var(--wit);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.block h2{font-size:15px;font-weight:600;color:var(--bos);padding:15px 16px 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.block h2 .act{font-size:14px;font-weight:500;color:var(--lei)}
.block h2 + .svc{margin-top:6px;border-top:1px solid var(--lijn-zacht)}
.block .body{padding:12px 16px 16px}

dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:15px}
dt{color:var(--bos-60)}
dd{text-align:right;font-variant-numeric:tabular-nums}

.note{font-size:15px;line-height:1.6}
.note.intern{background:var(--oker-bleek);padding:12px 14px;border-radius:var(--r-klein);
  box-shadow:inset 3px 0 0 var(--oker)}

.field{margin-bottom:14px}
.field label{display:block;font-size:13.5px;font-weight:500;color:var(--bos-60);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--lijn);
  border-radius:var(--r-klein);padding:11px 12px;background:var(--wit);outline:none;
  font-size:15px;transition:border-color .12s,box-shadow .12s}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--bos-20)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bos);
  box-shadow:0 0 0 3px rgba(31,42,38,.08)}
.field textarea{resize:vertical;min-height:86px;line-height:1.55}
.field.auto input{background:var(--steen);border-color:transparent;color:var(--bos-60)}
.hint{font-size:13.5px;color:var(--bos-40);margin-top:6px;line-height:1.5}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.btn{border-radius:var(--r-klein);padding:11px 16px;font-size:14.5px;font-weight:600;
  flex:1;text-align:center;border:1px solid var(--lijn);background:var(--wit);
  transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--bos-20)}
.btn.primary{background:var(--bos);border-color:var(--bos);color:#F2F4F0}
.btn.primary:hover{background:#2C3A35}
.btn.sage{background:var(--salie);border-color:var(--salie);color:#fff}
.btn.sage:hover{background:#61806A}
.btn.danger{color:var(--roest);border-color:#E8CFCB}
.btn.small{flex:0 0 auto;padding:8px 13px;font-size:13.5px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.breed{width:100%}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{font-size:12.5px;font-weight:500;padding:3px 10px;border-radius:99px;white-space:nowrap;
  line-height:1.5}
.t-sage{background:var(--salie-bleek);color:#4B6852}
.t-slate{background:var(--lei-bleek);color:var(--lei)}
.t-ochre{background:var(--oker-bleek);color:#86682A}
.t-rose{background:var(--roest-bleek);color:var(--roest)}
.t-grey{background:var(--kiezel-bleek);color:var(--bos-60)}

/* ==================================================================
   Dagplanning
================================================================== */
.datumkiezer{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.datumkiezer input[type="date"]{border:1px solid var(--lijn);border-radius:var(--r-klein);
  padding:8px 10px;background:var(--wit);outline:none;font-size:14px;
  font-variant-numeric:tabular-nums}
.datumkiezer input[type="date"]:focus{border-color:var(--bos)}
.pijl{border:1px solid var(--lijn);border-radius:var(--r-klein);background:var(--wit);
  padding:8px 10px;line-height:0;color:var(--bos-60)}
.pijl:hover{border-color:var(--bos-20);color:var(--bos)}
.springen{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}

.daynav{display:flex;gap:4px;overflow-x:auto;margin:0 -18px 22px;padding:0 18px 4px;
  scrollbar-width:none}
.daynav::-webkit-scrollbar{display:none}
.daynav button{flex:1 0 50px;padding:10px 0 11px;text-align:center;
  border-radius:var(--r-klein);color:var(--bos-60)}
.daynav button:hover{background:var(--steen-diep)}
.daynav .dw{display:block;font-size:12.5px;font-weight:500}
.daynav .dd{display:block;font-family:var(--kop);font-weight:300;font-size:25px;
  line-height:1.15;color:var(--bos);font-variant-numeric:tabular-nums}
.daynav .dot{display:block;width:5px;height:5px;border-radius:50%;background:var(--salie);
  margin:5px auto 0}
.daynav .dot.grijs{background:var(--bos-20)}
.daynav .pad{display:block;height:10px}
.daynav button[aria-current="true"]{--kl:8px;background-color:var(--wit);color:var(--bos)}
.daynav button[aria-current="true"] .dd{font-weight:400}

.route{position:relative;padding-left:76px}
.route::before{content:'';position:absolute;left:62px;top:18px;bottom:18px;width:1px;
  background:var(--lijn)}
.stop{position:relative;margin-bottom:10px}
.stop .clock{position:absolute;left:-76px;top:15px;width:48px;text-align:right;
  font-size:14.5px;font-weight:600;color:var(--bos);font-variant-numeric:tabular-nums}
.stop::before{content:'';position:absolute;left:-18px;top:21px;width:8px;height:8px;
  border-radius:50%;background:var(--salie);box-shadow:0 0 0 3px var(--steen)}
.card{background:var(--wit);border-radius:var(--r);padding:14px 16px;width:100%;
  text-align:left;display:block;border:1px solid transparent;transition:border-color .12s}
button.card:hover{border-color:var(--bos-20)}
.stop .addr{font-weight:600;font-size:16px}
.stop .meta{font-size:14px;color:var(--bos-60);margin-top:2px}

.stop.agenda .clock{color:var(--bos-40);font-weight:500}
.stop.agenda::before{background:var(--steen);box-shadow:inset 0 0 0 1.5px var(--bos-20),
  0 0 0 3px var(--steen)}
.card.blok{background:transparent;border:1px dashed var(--bos-20);cursor:default}
.card.blok .addr{font-weight:500;color:var(--bos-60)}
.card.blok .meta{color:var(--bos-40)}

.dayfoot{margin-top:16px;padding:13px 16px;background:var(--wit);border-radius:var(--r);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:14.5px;color:var(--bos-60)}
.dayfoot b{color:var(--bos);font-weight:600;font-variant-numeric:tabular-nums}

/* ==================================================================
   Lijst: één vel met regels, zoals een contactvel
================================================================== */
.search{display:flex;background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r-klein);padding:10px 13px;margin-bottom:14px;gap:10px;align-items:center}
.search:focus-within{border-color:var(--bos);box-shadow:0 0 0 3px rgba(31,42,38,.08)}
.search input{border:none;outline:none;flex:1;background:none;font-size:15px}
.search svg{opacity:.45;flex:0 0 auto}

.chips{display:flex;gap:6px;overflow-x:auto;margin:0 -18px 18px;padding:0 18px 2px;
  scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border-radius:99px;padding:7px 14px;font-size:14px;font-weight:500;
  white-space:nowrap;color:var(--bos-60);background:transparent;border:1px solid var(--lijn)}
.chip:hover{border-color:var(--bos-20);color:var(--bos)}
.chip b{font-weight:500;color:var(--bos-40);margin-left:6px;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--bos);border-color:var(--bos);color:#F2F4F0}
.chip[aria-pressed="true"] b{color:#9DA8A1}

.rows{display:flex;flex-direction:column;background:var(--wit);border-radius:var(--r);
  overflow:hidden}
.rows > .empty{border:none;border-radius:0}
.row{padding:15px 16px 15px 20px;display:block;width:100%;text-align:left;position:relative;
  border-bottom:1px solid var(--lijn-zacht);transition:background .1s}
.row:last-child{border-bottom:none}
.row:hover{background:#F7F8F6}
.row::before{content:'';position:absolute;left:0;top:13px;bottom:13px;width:3px;
  border-radius:0 3px 3px 0;background:var(--rand,var(--bos-20))}
.row:has(.t-slate){--rand:var(--lei)}
.row:has(.t-sage){--rand:var(--salie)}
.row:has(.t-ochre){--rand:var(--oker)}
.row:has(.t-rose){--rand:var(--roest)}
.row-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.row .num{font-size:13.5px;color:var(--bos-40);font-variant-numeric:tabular-nums}
.row .addr{font-weight:600;font-size:16px;margin-top:3px}
.row .office{font-size:14px;color:var(--bos-60)}
.row .foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:10px}
.row .when{font-size:14px;color:var(--bos-60);font-variant-numeric:tabular-nums}

.empty{text-align:center;padding:42px 22px;color:var(--bos-60);font-size:15px;
  border:1px dashed var(--bos-20);border-radius:var(--r);line-height:1.55}

/* ==================================================================
   Detail
================================================================== */
.back{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;
  color:var(--bos-60);margin-bottom:16px}
.back:hover{color:var(--bos)}
.detail-head{margin-bottom:20px}
.detail-head h1{font-family:var(--kop);font-weight:300;font-size:33px;line-height:1.1;
  margin-top:4px}
.detail-head .sub{font-size:15px;color:var(--bos-60);margin-top:6px}

.tabs{display:flex;gap:22px;border-bottom:1px solid var(--lijn);margin-bottom:18px;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{font-size:15px;font-weight:500;padding:10px 0;color:var(--bos-40);
  border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.tab:hover{color:var(--bos-60)}
.tab[aria-selected="true"]{color:var(--bos);border-bottom-color:var(--bos)}

.svc{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--lijn-zacht);font-size:15px;width:100%;text-align:left}
.svc:last-child{border-bottom:none}
button.svc:hover:not(:disabled){background:#F7F8F6}
.svc .box{width:20px;height:20px;border:1.5px solid var(--bos-20);border-radius:var(--r-klein);
  flex:0 0 auto;display:grid;place-items:center;transition:background .12s,border-color .12s}
.svc.ok .box{background:var(--salie);border-color:var(--salie)}
.svc .box svg{display:none}
.svc.ok .box svg{display:block}
.svc .name{flex:1}
.svc.ok .name{color:var(--bos-60)}

.chat{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.bub{max-width:80%;padding:10px 13px;border-radius:14px;font-size:15px;line-height:1.5}
.bub .w{display:block;font-size:12px;margin-top:5px;opacity:.65;font-variant-numeric:tabular-nums}
.bub.them{align-self:flex-start;background:var(--wit);border-bottom-left-radius:4px}
.bub.us{align-self:flex-end;background:var(--bos);color:#EEF1EC;border-bottom-right-radius:4px}
.composer{display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;border:1px solid var(--lijn);border-radius:var(--r);padding:11px 13px;
  resize:none;background:var(--wit);outline:none;font-size:15px;min-height:46px}
.composer textarea:focus{border-color:var(--bos)}
.knijper{flex:0 0 auto;border:1px solid var(--lijn);border-radius:var(--r);background:var(--wit);
  padding:12px;color:var(--bos-60);line-height:0}
.knijper:hover{color:var(--bos);border-color:var(--bos-20)}
.bijlage{display:flex;align-items:center;gap:8px;margin-top:8px;padding:9px 11px;
  border-radius:var(--r-klein);background:var(--steen);font-size:13.5px}
.bijlage.eigen{background:rgba(255,255,255,.1)}
.bijlage .bnaam{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wachtrij{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.wb{display:flex;align-items:center;gap:6px;background:var(--salie-bleek);color:#4B6852;
  border-radius:99px;padding:5px 7px 5px 12px;font-size:13px;max-width:100%}
.wb .bnaam{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.wb button{font-size:17px;line-height:1;color:#4B6852;opacity:.6;padding:0 3px}

.log{position:relative;padding-left:22px}
.log::before{content:'';position:absolute;left:4px;top:8px;bottom:8px;width:1px;
  background:var(--lijn)}
.log-item{position:relative;padding-bottom:16px}
.log-item::before{content:'';position:absolute;left:-22px;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--steen);box-shadow:inset 0 0 0 1.5px var(--bos-20)}
.log-item:first-child::before{background:var(--bos);box-shadow:none}
.log-item .txt{font-size:15px;line-height:1.5}
.log-item .w{font-size:13.5px;color:var(--bos-40);margin-top:2px;font-variant-numeric:tabular-nums}

.pkgpick{display:flex;flex-direction:column;gap:8px}
.pkgpick button{background:var(--wit);border:1.5px solid var(--lijn);border-radius:var(--r);
  padding:14px 16px;text-align:left;display:flex;justify-content:space-between;gap:14px;
  align-items:flex-start;width:100%;transition:border-color .12s}
.pkgpick button:hover{border-color:var(--bos-20)}
.pkgpick button[aria-pressed="true"]{border-color:var(--bos)}
.pkgpick h3{font-family:var(--kop);font-weight:400;font-size:19px}
.pkgpick .items{display:block;font-size:14px;color:var(--bos-60);margin-top:4px;line-height:1.5}
.pkgpick .price{font-size:15.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ==================================================================
   Paneel en meldingen
================================================================== */
.sheet{position:fixed;inset:0;z-index:80;display:none}
.sheet.on{display:block}
.sheet .veil{position:absolute;inset:0;background:rgba(31,42,38,.42)}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;background:var(--steen);
  border-radius:var(--r-groot) var(--r-groot) 0 0;
  padding:24px 20px calc(20px + env(safe-area-inset-bottom));max-height:88vh;overflow-y:auto}
.sheet h2{font-family:var(--kop);font-weight:300;font-size:26px;margin-bottom:4px}
.sheet .lead{font-size:15px;color:var(--bos-60);margin-bottom:18px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.slots button{border:1px solid var(--lijn);border-radius:var(--r-klein);padding:9px 4px;
  font-size:14.5px;font-weight:500;background:var(--wit);font-variant-numeric:tabular-nums}
.slots button:hover:not(:disabled){border-color:var(--bos-20)}
.slots button[aria-pressed="true"]{background:var(--bos);border-color:var(--bos);color:#F2F4F0}
.slots button:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed;
  background:transparent}

.toast{position:fixed;left:50%;bottom:94px;transform:translate(-50%,8px);z-index:90;
  background:var(--bos);color:#F2F4F0;padding:12px 18px;border-radius:var(--r);font-size:14.5px;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.fout{background:var(--roest)}

.laden{display:flex;align-items:center;gap:12px;padding:40px;justify-content:center;
  color:var(--bos-60);font-size:15px}
.spin{width:16px;height:16px;border:2px solid var(--lijn);border-top-color:var(--bos);
  border-radius:50%;animation:draai .7s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}

.melding{padding:12px 14px;border-radius:var(--r-klein);font-size:14.5px;line-height:1.55;
  margin-bottom:14px}
.m-rose{background:var(--roest-bleek);box-shadow:inset 3px 0 0 var(--roest)}
.m-ochre{background:var(--oker-bleek);box-shadow:inset 3px 0 0 var(--oker)}

/* ==================================================================
   Kaart
================================================================== */
.kaartvak{height:480px;border-radius:var(--r);overflow:hidden;background:var(--steen-diep)}
@media (max-width:899px){.kaartvak{height:56vh}}

.legenda{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;align-items:center}
.legenda .leg{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lijn);
  background:var(--wit);border-radius:99px;padding:6px 13px;font-size:14px;font-weight:500;
  color:var(--bos-40);opacity:.55}
.legenda .leg.aan{opacity:1;color:var(--bos)}
.legenda .bol{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.leguitleg{font-size:13.5px;color:var(--bos-40);line-height:1.5;max-width:440px;margin-left:4px}

.dagbalk{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.dagchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lijn);
  background:var(--wit);border-radius:99px;padding:6px 13px;font-size:14px;font-weight:500}
.dagchip:hover{border-color:var(--bos-20)}
.dagchip .streep{width:16px;height:3px;border-radius:2px;flex:0 0 auto}
.dagchip b{font-weight:500;color:var(--bos-40);font-variant-numeric:tabular-nums}

.speld{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:2px solid #fff;color:#fff;font-family:var(--tekst);font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.speld.open{background:#fff;border-width:3px;border-style:solid;width:20px;height:20px;
  box-shadow:0 1px 4px rgba(31,42,38,.3)}

.kaartonder{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:12px;flex-wrap:wrap}
.kaartonder .hint{margin:0}
.kaartonder .hint b{color:var(--bos);font-weight:600}
.routeknoppen{display:flex;gap:6px;flex-wrap:wrap}
.mini{font-size:13.5px;color:var(--bos-60)}

.leaflet-popup-content-wrapper{border-radius:var(--r)}
.leaflet-popup-content{font-family:var(--tekst);font-size:14px;line-height:1.5;margin:13px 15px}
.pop .popkop{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.pop .popnr{font-size:13px;color:var(--bos-60)}
.pop .popnum{font-size:13px;color:var(--bos-40);margin-left:auto;font-variant-numeric:tabular-nums}
.pop .poptijd{font-size:15px;margin-bottom:3px}
.pop .popregel{color:var(--bos-60);font-size:13.5px}
.pop a{display:inline-block;margin-top:9px;font-size:14px;font-weight:500}

/* ==================================================================
   Grote schermen: zijbalk
================================================================== */
@media (min-width:900px){
  .app{padding-bottom:0;display:grid;grid-template-columns:236px 1fr;
       grid-template-rows:auto 1fr;min-height:100dvh}

  header{grid-column:1 / -1;grid-row:1;padding:16px 28px;position:static}
  header .wordmark{font-size:19px}
  header .who button{display:inline;margin-left:14px}

  nav{grid-column:1;grid-row:2;position:sticky;top:0;align-self:start;
      flex-direction:column;border-top:none;background:transparent;
      padding:22px 16px;gap:2px;min-height:100%}
  nav button{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;
      padding:11px 14px;width:100%;color:var(--bos-60)}
  nav button span{font-size:15px;font-weight:500}
  nav button:hover{color:var(--bos);background-color:var(--steen-diep)}
  nav button[aria-current="true"]{color:var(--bos);background-color:var(--wit);--kl:8px}

  #inhoud{grid-column:2;grid-row:2;min-width:0}
  .screen{padding:32px 44px 72px 16px;max-width:920px}

  .screen-head h1{font-size:40px}
  .detail-head h1{font-size:42px}
  .daynav{margin:0 0 24px;padding:0 0 4px;gap:6px}
  .chips{margin:0 0 20px;padding:0 0 2px}

  .sheet .panel{left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);
      max-width:540px;border-radius:var(--r-groot);max-height:84vh}
  .toast{bottom:28px}

  /* Opdrachtenlijst: één regel per opdracht, kolommen die je langs kunt lezen */
  .row{display:grid;grid-template-columns:minmax(0,1fr) 120px 150px 118px;
       column-gap:20px;align-items:center;padding:14px 18px 14px 22px}
  .row .row-top,.row .foot{display:contents}
  .row .num{grid-column:1;grid-row:1}
  .row .addr{grid-column:1;grid-row:2;margin-top:1px}
  .row .office{grid-column:1;grid-row:3}
  .row .foot > :first-child{grid-column:2;grid-row:1 / 4;justify-self:start}
  .row .foot .when{grid-column:3;grid-row:1 / 4}
  .row .row-top .tag{grid-column:4;grid-row:1 / 4;justify-self:end}

  /* Gegevens van een opdracht in twee kolommen */
  .kolommen{columns:2;column-gap:12px}
  .kolommen > .block{break-inside:avoid;display:inline-block;width:100%}
}
@media (min-width:1300px){ .screen{max-width:1000px} }

:focus-visible{outline:2px solid var(--eik);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ==================================================================
   Aanvullingen: beheer, accounts, bestanden en kleine hulpjes
================================================================== */
.gedempt{color:var(--bos-60)}
.klein{font-size:13px}
.leeg{color:var(--bos-40)}
.m-sage{background:var(--salie-bleek);box-shadow:inset 3px 0 0 var(--salie)}
.melding + .field,.melding + form{margin-top:14px}
.inlog .melding{margin-bottom:16px}

.tekstknop{display:block;margin:16px auto 0;font-size:14px;color:var(--bos-60);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bos-20)}
.tekstknop:hover{color:var(--bos)}
.tekstknop.links{margin:12px 0 0;text-align:left}
.linkachtig{text-align:left;padding:0;display:block}
.linkachtig:hover{text-decoration:underline;text-underline-offset:3px}

header .who .wieknoppen{display:flex;gap:12px;justify-content:flex-end;margin-top:2px}
header .who .wieknoppen button{display:inline;margin:0}

.linkvak{display:flex;gap:6px;align-items:center}
.linkvak input{flex:1;min-width:0;border:1px solid var(--lijn);border-radius:var(--r-klein);
  padding:9px 10px;font-size:13.5px;background:var(--steen);color:var(--bos-60)}
.linkvak .btn{flex:0 0 auto;text-decoration:none}

.persoon{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:13px 16px;border-top:1px solid var(--lijn-zacht)}
.block h2 + .persoon{margin-top:10px}
.persoon .wie{min-width:0;line-height:1.45}
.persoon .wie b{font-weight:600;margin-right:6px}
.persoon .wie .tag{margin-right:4px;vertical-align:1px}
.persoon .knoppen{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
@media (max-width:640px){
  .persoon{flex-direction:column;align-items:stretch}
  .persoon .knoppen{justify-content:flex-start}
}

.vinkje{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;
  color:var(--bos);margin:4px 0 14px;cursor:pointer}
.vinkje input{margin-top:3px;accent-color:var(--bos);width:16px;height:16px;flex:0 0 auto}
.vinklijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 14px;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-klein);padding:10px 12px 0}
.vinklijst .vinkje{margin:0 0 10px}

.prijsregel{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--lijn-zacht)}
.prijsregel label{font-size:14.5px}
.prijsregel input{width:110px;border:1px solid var(--lijn);border-radius:var(--r-klein);
  padding:8px 10px;text-align:right;background:var(--wit)}
.prijsregel input::placeholder{color:var(--bos-40)}

.kandidaten{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.kandidaten button{border:1px solid var(--lijn);border-radius:var(--r-klein);padding:10px 12px;
  text-align:left;background:var(--wit);font-weight:500;display:flex;flex-direction:column;gap:2px}
.kandidaten button:hover{border-color:var(--bos-40)}

.dienstregel{gap:14px}
.dienstregel input:not([type]){flex:1;border:1px solid transparent;border-radius:var(--r-klein);
  padding:7px 9px;background:transparent}
.dienstregel input:not([type]):hover,.dienstregel input:not([type]):focus{border-color:var(--lijn);
  background:var(--wit);outline:none}
.dienstregel .vinkje{margin:0;white-space:nowrap}

.svc.bestand{gap:10px}
.svc.bestand svg{flex:0 0 auto;color:var(--bos-40)}
.svc.bestand a.name{color:var(--bos);text-decoration:none;min-width:0;overflow-wrap:anywhere}
.svc.bestand a.name:hover{text-decoration:underline;text-underline-offset:3px}
.svc.bestand .klein{display:block}
.weg{font-size:20px;line-height:1;color:var(--bos-40);padding:2px 8px;border-radius:var(--r-klein)}
.weg:hover{color:var(--roest);background:var(--roest-bleek)}
.svc .act{color:var(--bos-40)}

.bijlage{text-decoration:none}
.bijlage-foto{display:block;margin-top:6px}
.bijlage-foto img{max-width:220px;max-height:220px;border-radius:var(--r-klein);display:block}

.zoekbalk{display:flex;gap:8px;align-items:stretch;margin-bottom:12px}
.zoekbalk .search{flex:1;margin-bottom:0}
.kantoorfilter{border:1px solid var(--lijn);border-radius:var(--r);background:var(--wit);
  padding:0 12px;font-size:14.5px;max-width:220px}
@media (max-width:640px){ .zoekbalk{flex-direction:column} .kantoorfilter{max-width:none;padding:11px 12px} }

.klaarzetten{margin-bottom:22px}
.block.uit{opacity:.7}
.kopknoppen{display:flex;gap:12px;align-items:baseline}
.inlog form.breed-form{max-width:440px}
.inlog .kaart:has(.breed-form){max-width:440px}
.row .foot .btn{flex:0 0 auto}
@media (min-width:900px){
  .row .foot .btn{grid-column:3;grid-row:1 / 4;justify-self:start}
}

.tweeluik{display:grid;gap:0 12px;align-items:start}
@media (min-width:900px){ .tweeluik{grid-template-columns:1fr 1fr} }

.testbanner{background:var(--oker-bleek);box-shadow:inset 0 -1px 0 #E6D9B5;padding:9px 18px;
  font-size:14px;color:var(--bos);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.testbanner button{text-decoration:underline;text-underline-offset:3px;font-weight:600;color:var(--bos)}
@media (min-width:900px){ .testbanner{padding:9px 16px;margin:0 44px 0 16px;max-width:860px;border-radius:0 0 var(--r) var(--r)} }
@media (min-width:1300px){ .testbanner{max-width:940px} }
.testfaseblok{box-shadow:inset 3px 0 0 var(--oker)}