/* IndexPay Planning — designsysteem (Manrope, oranje/antraciet/warm-neutraal).
   Overgenomen uit het Claude Design-ontwerp "IndexPay Planning". Oranje is de enige echte
   kleur (acties, vandaag, open diensten); alles daarbuiten is neutraal en zacht warm. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --oranje:#EE6B1F;--oranje-donker:#C9540F;--oranje-zacht:#FDF0E6;--oranje-rand:#F5D9BF;
  --antraciet:#191D21;--antraciet-2:#3D454D;--wit:#FFFFFF;
  --perzik:#EDEAE4;            /* paginagrond (warm grijs) */
  --grijs-900:#191D21;         /* tekst */
  --grijs-700:#3D454D;         /* tekst secundair sterk */
  --grijs-600:#6B7480;         /* bijschrift */
  --grijs-500:#5B6570;
  --grijs-400:#98A0AA;         /* label / uitgegrijsd */
  --grijs-300:#C4C9CE;
  --grijs-100:#F7F6F3;         /* zachte achtergrond */
  --grijs-50:#FBFAF8;
  --lijn:#E4E1DC;--lijn-zacht:#ECE9E4;
  --groen:#6E9165;--groen-bg:#F1F5EF;--groen-rand:#DFE8DB;--groen-tekst:#2F4429;
  --rood:#C2452A;--rood-bg:#FDEEEB;--rood-rand:#EFC7BE;--rood-tekst:#A83A22;
  --amber:#C99A20;--amber-bg:#FBF6EC;--amber-rand:#EADCC0;--amber-tekst:#7A5F16;
  --blauw:#5B7BA6;--blauw-bg:#F0F3F8;--blauw-rand:#DEE5EE;
  /* Functiekleuren voor dienst-blokjes (stip / tint / rand). */
  --fn-bediening:#E0801F;--fn-bediening-bg:#FDF3E9;--fn-bediening-rand:#F1DFC9;
  --fn-keuken:#5B7BA6;--fn-keuken-bg:#F0F3F8;--fn-keuken-rand:#DEE5EE;
  --fn-bar:#6E9165;--fn-bar-bg:#F1F5EF;--fn-bar-rand:#DFE8DB;
  --fn-schoonmaak:#8A76A8;--fn-schoonmaak-bg:#F5F1F8;--fn-schoonmaak-rand:#E6DEEC;
  --schaduw:0 2px 6px -2px rgba(25,29,33,.12);        /* rust */
  --schaduw-lg:0 24px 50px -20px rgba(25,29,33,.28);  /* zwevend */
  --baan-breed:1440px;--baan-smal:1000px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Manrope',system-ui,sans-serif;background:var(--perzik);color:var(--grijs-900);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{color:inherit;}
/* Premium-afwerking (veilig, globaal): rustige selectie, zichtbare focus voor toetsenbord, respecteer reduced-motion. */
::selection{background:var(--oranje-zacht);color:var(--grijs-900);}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--oranje);outline-offset:2px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}}
/* Witte topbalk met tab-navigatie (ontwerp 2a/1b). */
.topbalk{background:var(--wit);height:60px;display:flex;align-items:center;padding:0;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--lijn-zacht);}
/* Full-bleed (ontwerp-frames = de viewport): logo links en avatar rechts aan de schermrand. */
.topbalk-binnen{width:100%;padding:0 24px;display:flex;align-items:center;gap:24px;}
.merk{display:flex;align-items:center;gap:9px;}
.logo-img{height:22px;width:auto;display:block;}
.merk-scheiding{display:none;}
.merk-sub,.topbalk .merk .ms{display:none;}
/* Tab-navigatie: actief = donker op zachte tint, rest grijs. */
.nav{display:flex;gap:2px;margin-left:6px;}
.nav a{color:#8A9099;font-weight:600;font-size:13px;padding:6px 11px;border-radius:7px;text-decoration:none;transition:background .14s,color .14s;}
.nav a:hover{color:var(--grijs-900);background:var(--grijs-100);}
.nav a.actief{color:var(--grijs-900);background:#F2F0EC;font-weight:700;}
/* Ronde 6: oranje teller op een nav-item (ruilverzoeken die op de werkgever wachten). */
.nav-teller{background:var(--oranje);color:#FFFFFF;font-size:10.5px;font-weight:700;border-radius:20px;padding:1px 6px;margin-left:3px;display:inline-block;vertical-align:1px;}

/* Ontwerp 6e — planning-instellingen: witte kaart, grote schakel-rijen, groene voetregel. */
.pi-kaart{background:#FFFFFF;border:1px solid #E4E1DC;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -44px rgba(25,29,33,.35);max-width:700px;}
.pi-kop{padding:24px 28px 20px;border-bottom:1px solid #ECE9E4;}
.pi-titel{font-size:22px;font-weight:800;letter-spacing:-.035em;}
.pi-sub{font-size:13px;color:#6B7480;margin-top:4px;}
.pi-body{padding:8px 28px 24px;}
.pi-rij{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:22px 0;border-bottom:1px solid #F5F2ED;}
.pi-rij-laatste{border-bottom:none;}
.pi-tekst{min-width:0;}
.pi-naam{display:block;font-size:15px;font-weight:750;letter-spacing:-.025em;}
.pi-uitleg{display:block;font-size:13px;color:#6B7480;line-height:1.6;margin-top:5px;}
.pi-voet{background:#FBFAF8;border-top:1px solid #ECE9E4;padding:14px 28px 18px;display:flex;align-items:center;gap:11px;font-size:12.5px;font-weight:600;color:#2F4429;}
.pi-stip{width:7px;height:7px;border-radius:50%;background:#6E9165;flex:none;}

/* Ontwerp 6b — beschikbaarheid-teamoverzicht: werkbalk + grid 240px/7 dagen + chips + voetbalk. */
.tb6-schil{background:#F7F6F3;min-height:calc(100vh - 60px);}
.tb6-werkbalk{background:#FFFFFF;border-bottom:1px solid #ECE9E4;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.tb6-links{display:flex;align-items:center;gap:16px;}
.tb6-weeknav{display:flex;align-items:center;border:1px solid #E4E1DC;border-radius:9px;overflow:hidden;background:#FFFFFF;}
.tb6-weeknav a{padding:7px 12px;font-size:14px;color:#5B6570;text-decoration:none;}
.tb6-weeknav a:first-child{border-right:1px solid #EFECE7;}
.tb6-weeknav a:last-child{border-left:1px solid #EFECE7;}
.tb6-weeknav span{padding:7px 12px;font-size:13px;font-weight:600;}
.tb6-titel{font-size:19px;font-weight:800;letter-spacing:-.03em;}
.tb6-sub{font-size:12px;color:#8A9099;margin-top:1px;}
.tb6-rechts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.tb6-legenda{display:flex;align-items:center;gap:14px;font-size:12px;color:#5B6570;font-weight:600;}
.tb6-legenda span{display:flex;align-items:center;gap:6px;}
.tb6-lg{width:12px;height:12px;border-radius:4px;display:block;}
.tb6-lg-kan{background:#EAF0E7;border:1px solid #DFE8DB;}
.tb6-lg-niet{background:#3D454D;}
.tb6-lg-leeg{background:#F4F2EE;border:1px dashed #DCD8D1;}
.tb6-herinner{font-size:13px;font-weight:650;color:#191D21;background:#FFFFFF;border:1px solid #E4E1DC;border-radius:9px;padding:9px 13px;cursor:pointer;font-family:inherit;}
.tb6-herinner:hover{background:#F7F6F3;}
.tb6-grid{background:#FFFFFF;}
.tb6-koprij,.tb6-rij{display:grid;grid-template-columns:240px repeat(7,1fr);}
.tb6-koprij{border-bottom:1px solid #E4E1DC;}
.tb6-kophoek{padding:11px 16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#98A0AA;}
.tb6-kopdag{padding:11px 12px;border-left:1px solid #ECE9E4;font-size:13px;}
.tb6-kopdag b{font-weight:750;}
.tb6-kopdag span{font-size:12px;color:#98A0AA;}
.tb6-rij{border-bottom:1px solid #F1EEE9;}
.tb6-wie{padding:10px 16px;display:flex;align-items:center;gap:10px;border-right:1px solid #ECE9E4;min-width:0;}
.tb6-avatar{width:30px;height:30px;border-radius:50%;background:#F2F0EC;color:#6B7480;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.tb6-wie-tekst{display:flex;flex-direction:column;min-width:0;}
.tb6-naam{font-size:13.5px;font-weight:650;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb6-meta{font-size:11.5px;color:#98A0AA;margin-top:1px;}
.tb6-meta-leeg{color:#C99A20;font-weight:600;}
.tb6-cel{padding:8px;border-left:1px solid #F1EEE9;display:flex;align-items:center;}
.tb6-chip{font-size:12px;font-weight:650;border-radius:8px;padding:6px 10px;display:block;width:100%;box-sizing:border-box;text-align:center;font-variant-numeric:tabular-nums;}
.tb6-chip-kan{background:#EAF0E7;border:1px solid #DFE8DB;color:#2F4429;}
.tb6-chip-niet{background:#3D454D;color:#FFFFFF;}
.tb6-chip-leeg{background:#F4F2EE;border:1px dashed #DCD8D1;color:#A8AFB7;}
.tb6-leeg{padding:30px;text-align:center;color:#8A9099;font-size:13px;}
.tb6-voet{background:#FBFAF8;border-top:1px solid #E4E1DC;padding:14px 24px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12.5px;color:#6B7480;}
.tb6-inplannen{font-size:13px;font-weight:700;color:#FFFFFF !important;background:var(--oranje);border-radius:9px;padding:10px 15px;text-decoration:none;}
.tb6-inplannen:hover{background:var(--oranje-hover);color:#FFFFFF;}
@media (max-width:720px){
  .tb6-koprij,.tb6-rij{grid-template-columns:140px repeat(7,minmax(52px,1fr));}
  .tb6-grid{overflow-x:auto;}
  .tb6-werkbalk{padding:12px 16px;}
}

/* Ontwerp 6c — standaardrooster: sjabloon-tabs, functie-grid, toepas-paneel, voetbalk. */
.sr6-schil{background:#F7F6F3;min-height:calc(100vh - 60px);}
.sr6-kop{background:#FFFFFF;border-bottom:1px solid #ECE9E4;padding:18px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.sr6-titel{font-size:22px;font-weight:800;letter-spacing:-.035em;}
.sr6-sub{font-size:13px;color:#6B7480;margin-top:4px;line-height:1.55;max-width:520px;}
.sr6-acties{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.sr6-tabs{display:flex;background:#F2F0EC;border-radius:9px;padding:3px;}
.sr6-tabs a{font-size:13px;font-weight:600;padding:6px 13px;color:#8A9099;text-decoration:none;border-radius:6px;}
.sr6-tabs a.actief{font-weight:650;color:#191D21;background:#FFFFFF;box-shadow:0 1px 2px rgba(25,29,33,.08);}
.sr6-tab-nieuw{color:#8A9099;}
.sr6-toepas{position:relative;}
.sr6-toepasknop{font-size:13px;font-weight:700;color:#FFFFFF;background:var(--oranje);border-radius:9px;padding:10px 15px;cursor:pointer;list-style:none;display:inline-block;}
.sr6-toepas summary::-webkit-details-marker{display:none;}
.sr6-toepaspaneel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;background:#FFFFFF;border:1px solid #E4E1DC;border-radius:13px;box-shadow:0 24px 50px -20px rgba(25,29,33,.28);padding:16px;display:flex;flex-direction:column;gap:11px;width:270px;}
.sr6-veld{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:650;color:#5B6570;}
.sr6-veld input{border:1px solid #E4E1DC;border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13px;}
.sr6-optie{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:#5B6570;}
.sr6-grid{background:#FFFFFF;}
.sr6-koprij,.sr6-rij{display:grid;grid-template-columns:240px repeat(7,1fr);}
.sr6-koprij{border-bottom:1px solid #E4E1DC;}
.sr6-kophoek{padding:11px 16px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#98A0AA;}
.sr6-kopdag{padding:11px 12px;border-left:1px solid #ECE9E4;font-size:13px;font-weight:750;}
.sr6-rij{border-bottom:1px solid #F1EEE9;}
.sr6-functie{padding:12px 16px;display:flex;align-items:center;gap:9px;border-right:1px solid #ECE9E4;}
.sr6-stip{width:8px;height:8px;border-radius:50%;background:#C4C9CE;flex:none;}
.sr6-stip.kl0{background:var(--fn-bediening);}
.sr6-stip.kl1{background:var(--fn-keuken);}
.sr6-stip.kl2{background:var(--fn-bar);}
.sr6-stip.kl3{background:var(--fn-schoonmaak);}
.sr6-functie-tekst{display:flex;flex-direction:column;min-width:0;}
.sr6-functie-naam{font-size:13.5px;font-weight:700;letter-spacing:-.015em;}
.sr6-functie-sub{font-size:11.5px;color:#98A0AA;margin-top:1px;}
.sr6-cel{padding:8px;border-left:1px solid #F1EEE9;display:flex;flex-direction:column;gap:6px;min-height:56px;}
.sr6-blok{position:relative;background:#F7F6F3;border:1px solid #ECE9E4;border-radius:9px;padding:8px 10px;}
.sr6-blok-tijd{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.sr6-blok-wie{font-size:11px;color:#98A0AA;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr6-blok-x{position:absolute;top:4px;right:6px;margin:0;opacity:0;transition:opacity .12s;}
.sr6-blok:hover .sr6-blok-x{opacity:1;}
.sr6-blok-x button{border:none;background:none;color:#98A0AA;font-size:13px;cursor:pointer;padding:0;line-height:1;}
.sr6-blok-x button:hover{color:#C2452A;}
.sr6-plus{align-self:flex-start;font-size:14px;font-weight:650;color:#C4C9CE;text-decoration:none;padding:2px 8px;border-radius:7px;}
.sr6-plus:hover{color:#EE6B1F;background:#FDF0E6;}
.sr6-leegrij{padding:30px;text-align:center;color:#8A9099;font-size:13px;}
.sr6-voet{background:#FBFAF8;border-top:1px solid #E4E1DC;padding:16px 24px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:12.5px;color:#6B7480;}
.sr6-teller{white-space:nowrap;}
.sr6-form{background:#FFFFFF;border-top:1px solid #E4E1DC;padding:18px 24px 26px;}
.sr6-form-kop{font-size:14px;font-weight:750;margin-bottom:12px;}
.sr6-form-sub{font-size:12px;font-weight:600;color:#98A0AA;margin-left:8px;}
.sr6-form-rij{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.sr6-form-rij label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:650;color:#5B6570;}
.sr6-form-rij input,.sr6-form-rij select{border:1px solid #E4E1DC;border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13px;background:#FFFFFF;}
.sr6-blok-open{border:1.5px dashed var(--oranje);background:#FDF0E6;}
.sr6-blok-open .sr6-blok-wie{color:var(--oranje);font-weight:700;}
@media (max-width:720px){
  .sr6-koprij,.sr6-rij{grid-template-columns:140px repeat(7,minmax(90px,1fr));}
  .sr6-grid{overflow-x:auto;}
}

/* Ontwerp 6a — open diensten met reactie-model: lijst links + toewijzen-zijpaneel rechts. */
.od6-schil{display:grid;grid-template-columns:1fr 400px;align-items:start;background:#F7F6F3;min-height:calc(100vh - 60px);}
.od6-links{padding:28px;min-width:0;}
.od6-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.od6-titel{font-size:24px;font-weight:800;letter-spacing:-.035em;}
.od6-sub{font-size:13px;color:#8A9099;margin-top:3px;}
.od6-nieuw{position:relative;}
.od6-nieuwknop{font-size:13px;font-weight:700;color:#FFFFFF;background:var(--oranje);border-radius:9px;padding:10px 15px;cursor:pointer;list-style:none;display:inline-block;}
.od6-nieuw summary::-webkit-details-marker{display:none;}
.od6-nieuwpaneel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;background:#FFFFFF;border:1px solid #E4E1DC;border-radius:13px;box-shadow:0 24px 50px -20px rgba(25,29,33,.28);padding:16px;display:flex;flex-direction:column;gap:10px;width:270px;}
.od6-nieuwpaneel label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:650;color:#5B6570;}
.od6-nieuwpaneel input,.od6-nieuwpaneel select{border:1px solid #E4E1DC;border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13px;background:#FFFFFF;}
.od6-vink{flex-direction:row !important;align-items:center;gap:8px !important;}
.od6-vink input{width:auto;}
/* overflow:visible — het ···-menu van de onderste rij klapt anders "achter" de lijstrand open (afgekapt). */
.od6-lijst{background:#FFFFFF;border:1px solid #ECE9E4;border-radius:14px;margin-top:18px;overflow:visible;}
.od6-koprij,.od6-rij{display:grid;grid-template-columns:150px 1fr 150px 160px 130px;gap:14px;padding:11px 18px;align-items:center;}
.od6-koprij{background:#FBFAF8;border-bottom:1px solid #F1EEE9;}
.od6-koprij span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#98A0AA;}
.od6-rij{padding:14px 18px;border-bottom:1px solid #F5F2ED;}
.od6-rij:last-of-type{border-bottom:none;}
.od6-rij-actief{background:#FDFAF7;}
.od6-dag{display:block;font-size:13.5px;font-weight:750;}
.od6-tijd{display:block;font-size:12.5px;color:#6B7480;margin-top:1px;font-variant-numeric:tabular-nums;}
.od6-fn{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;}
.od6-fn b{font-weight:650;}
.od6-fndot{width:7px;height:7px;border-radius:50%;background:#C4C9CE;flex:none;}
.od6-fndot.kl0{background:var(--fn-bediening);}
.od6-fndot.kl1{background:var(--fn-keuken);}
.od6-fndot.kl2{background:var(--fn-bar);}
.od6-fndot.kl3{background:var(--fn-schoonmaak);}
.od6-loc{font-size:12.5px;color:#98A0AA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.od6-reacties{display:flex;align-items:center;gap:8px;}
.od6-geen{font-size:12.5px;color:#98A0AA;}
.od6-avatars{display:flex;}
.od6-avatar{width:26px;height:26px;border-radius:50%;background:#F2F0EC;color:#6B7480;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #FFFFFF;}
.od6-avatar + .od6-avatar{margin-left:-8px;}
.od6-rtxt{font-size:12.5px;font-weight:650;color:#C9540F;text-decoration:none;}
.od6-pil{display:inline-flex;align-items:center;gap:8px;border-radius:20px;padding:5px 11px;font-size:12px;font-weight:650;width:fit-content;white-space:nowrap;}
.od6-pil i{width:6px;height:6px;border-radius:50%;display:block;}
.od6-pil-oranje{background:#FDF0E6;border:1px solid #F5D9BF;color:#A8703F;}
.od6-pil-oranje i{background:var(--oranje);}
.od6-pil-grijs{border:1px solid #E9E6E1;color:#8A9099;}
.od6-pil-grijs i{background:#C4C9CE;}
.od6-acties{display:flex;gap:7px;justify-content:flex-end;align-items:center;}
.od6-knop{font-size:12.5px;font-weight:700;color:#191D21;border:1px solid #E4E1DC;border-radius:8px;padding:8px 12px;background:#FFFFFF;text-decoration:none;cursor:pointer;font-family:inherit;white-space:nowrap;}
.od6-knop-primair{color:#FFFFFF !important;background:var(--oranje);border-color:var(--oranje);}
.od6-meer{position:relative;}
.od6-meer summary{font-size:12.5px;font-weight:650;color:#8A9099;border:1px solid #E4E1DC;border-radius:8px;padding:8px 10px;cursor:pointer;list-style:none;background:#FFFFFF;}
.od6-meer summary::-webkit-details-marker{display:none;}
.od6-meerpaneel{position:absolute;right:0;top:calc(100% + 6px);z-index:80;background:#FFFFFF;border:1px solid #E4E1DC;border-radius:11px;box-shadow:0 20px 40px -18px rgba(25,29,33,.28);padding:6px;display:flex;flex-direction:column;min-width:170px;}
.od6-rij:has(.od6-meer[open]){position:relative;z-index:70;}
.od6-meerpaneel button{border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;color:#191D21;text-align:left;padding:9px 11px;border-radius:7px;cursor:pointer;width:100%;}
.od6-meerpaneel button:hover{background:#F7F6F3;}
.od6-meerpaneel .od6-verwijder{color:#C2452A;}
.od6-leeg{padding:30px;text-align:center;color:#8A9099;font-size:13px;}
.od6-voetnoot{font-size:12.5px;font-weight:650;color:#8A9099;margin-top:16px;}
.od6-paneel{background:#FFFFFF;border-left:1px solid #ECE9E4;padding:28px 24px 40px;min-height:calc(100vh - 60px);box-sizing:border-box;}
.od6-p-lab{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#98A0AA;}
.od6-p-dienst{background:#FDF0E6;border-radius:13px;padding:14px 16px;margin-top:10px;}
.od6-p-tijd{font-size:15px;font-weight:800;letter-spacing:-.03em;color:#C9540F;font-variant-numeric:tabular-nums;}
.od6-p-fn{font-size:12.5px;font-weight:600;color:#A8703F;margin-top:3px;}
.od6-p-lijst{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.od6-kand{border:1px solid #ECE9E4;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:11px;cursor:pointer;position:relative;}
.od6-kand input{position:absolute;opacity:0;}
.od6-kand:has(input:checked){border:1.5px solid var(--oranje);}
.od6-kand-uit{opacity:.5;cursor:default;}
.od6-kand-avatar{width:32px;height:32px;border-radius:50%;background:#F2F0EC;color:#6B7480;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.od6-kand-avatar-oranje{background:#FDF0E6;color:#C9540F;}
.od6-kand-tekst{flex:1;min-width:0;}
.od6-kand-naam{display:block;font-size:13.5px;font-weight:700;}
.od6-kand-sub{display:block;font-size:11.5px;color:#8A9099;font-weight:600;margin-top:1px;}
.od6-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid #DCD8D1;box-sizing:border-box;flex:none;}
.od6-kand input:checked ~ .od6-radio{background:var(--oranje);border-color:var(--oranje);}
.od6-plekken{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:700;color:#A8703F;}
.od6-p-plekken{margin-top:6px;font-size:12px;font-weight:700;color:#A8703F;}
.od6-p-geen{font-size:12.5px;color:#98A0AA;margin-top:10px;line-height:1.5;}
.od6-p-acties{display:flex;gap:9px;margin-top:24px;}
.od6-p-primair{flex:1;text-align:center;font-size:14px;font-weight:750;color:#FFFFFF;background:var(--oranje);border:none;border-radius:11px;padding:13px 0;cursor:pointer;font-family:inherit;}
.od6-p-verwijder{width:100%;font-size:13.5px;font-weight:650;color:#C2452A;border:1px solid #EFC7BE;border-radius:11px;padding:13px 15px;background:#FFFFFF;cursor:pointer;font-family:inherit;margin-top:9px;}
.od6-p-hint{font-size:11.5px;color:#A8AFB7;line-height:1.55;margin-top:11px;}
/* Werknemer-kant: "Gereageerd"-chip op open-dienst-kaarten. */
.rg-ed-gereageerd,.wr-gereageerd{font-size:11.5px;font-weight:700;color:#2F4429;background:#F1F5EF;border:1px solid #DFE8DB;border-radius:20px;padding:4px 10px;display:inline-block;white-space:nowrap;}
@media (max-width:900px){
  .od6-schil{grid-template-columns:1fr;}
  .od6-paneel{border-left:none;border-top:1px solid #ECE9E4;min-height:0;}
}
/* 6f mobiel: open diensten als losse kaarten met grote knoppen. */
@media (max-width:720px){
  .od6-links{padding:16px;}
  .od6-lijst{background:none;border:none;margin-top:12px;display:flex;flex-direction:column;gap:9px;overflow:visible;}
  .od6-koprij{display:none;}
  .od6-rij{grid-template-columns:1fr;gap:10px;background:#FFFFFF;border:1px solid #ECE9E4;border-radius:14px;padding:14px 16px;}
  .od6-rij-actief{border-color:#F5D9BF;}
  .od6-acties{justify-content:stretch;}
  .od6-acties .od6-knop{flex:1;text-align:center;padding:10px 0;}
}

/* Ontwerp 6d — ruilverzoeken: filter-chips, tabel, status-pillen, auto-goedkeuren-schakelaar. */
.rl6-schil{background:#F7F6F3;min-height:calc(100vh - 60px);padding:28px;}
.rl6-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.rl6-titel{font-size:24px;font-weight:800;letter-spacing:-.035em;}
.rl6-sub{font-size:13px;color:#8A9099;margin-top:3px;}
.rl6-filters{display:flex;gap:6px;}
.rl6-filters a{font-size:12.5px;font-weight:600;color:#5B6570;background:#FFFFFF;border:1px solid #E9E6E1;border-radius:20px;padding:8px 14px;text-decoration:none;}
.rl6-filters a.actief{font-weight:700;color:#FFFFFF;background:#191D21;border-color:#191D21;}
.rl6-lijst{background:#FFFFFF;border:1px solid #ECE9E4;border-radius:14px;margin-top:18px;overflow:hidden;}
.rl6-koprij,.rl6-rij{display:grid;grid-template-columns:150px 1fr 1fr 180px 210px;gap:16px;padding:11px 18px;align-items:center;}
.rl6-koprij{background:#FBFAF8;border-bottom:1px solid #F1EEE9;}
.rl6-koprij span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#98A0AA;}
.rl6-rij{padding:15px 18px;border-bottom:1px solid #F5F2ED;}
.rl6-rij:last-of-type{border-bottom:none;}
.rl6-rij-klaar{opacity:.6;}
.rl6-rij-actie{background:#FDFAF7;}
.rl6-dag{display:block;font-size:13.5px;font-weight:750;}
.rl6-tijd{display:block;font-size:12.5px;color:#6B7480;margin-top:1px;font-variant-numeric:tabular-nums;}
.rl6-fnc{display:block;font-size:11.5px;color:#98A0AA;margin-top:2px;}
.rl6-wie{display:flex;align-items:center;gap:10px;min-width:0;}
.rl6-avatar{width:30px;height:30px;border-radius:50%;background:#F2F0EC;color:#6B7480;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.rl6-wie-tekst{min-width:0;}
.rl6-naam{display:block;font-size:13.5px;font-weight:650;}
.rl6-quote{display:block;font-size:11.5px;color:#98A0AA;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rl6-uren{display:block;font-size:11.5px;color:#A83A22;font-weight:600;margin-top:1px;}
.rl6-niemand{width:30px;height:30px;border-radius:12px;border:1.5px dashed #DCD8D1;box-sizing:border-box;display:block;flex:none;}
.rl6-geen{font-size:13px;color:#98A0AA;}
.rl6-pil{display:inline-flex;align-items:center;gap:8px;border-radius:20px;padding:5px 11px;font-size:12px;font-weight:650;width:fit-content;white-space:nowrap;}
.rl6-pil i{width:6px;height:6px;border-radius:50%;display:block;}
.rl6-pil-oranje{background:#FDF0E6;border:1px solid #F5D9BF;color:#A8703F;}
.rl6-pil-oranje i{background:var(--oranje);}
.rl6-pil-geel{background:#FBF6EC;border:1px solid #EADCC0;color:#7A5F16;}
.rl6-pil-geel i{background:#C99A20;}
.rl6-pil-rood{background:#FDEEEB;border:1px solid #EFC7BE;color:#A83A22;}
.rl6-pil-rood i{background:#C2452A;}
.rl6-pil-groen{background:#F1F5EF;border:1px solid #DFE8DB;color:#2F4429;}
.rl6-pil-groen i{background:#6E9165;}
.rl6-pil-grijs{border:1px solid #E9E6E1;color:#8A9099;}
.rl6-pil-grijs i{background:#C4C9CE;}
.rl6-acties{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap;}
.rl6-knop{font-size:12.5px;font-weight:700;color:#191D21;border:1px solid #E4E1DC;border-radius:9px;padding:9px 13px;background:#FFFFFF;cursor:pointer;font-family:inherit;white-space:nowrap;}
.rl6-knop-primair{color:#FFFFFF !important;background:var(--oranje);border-color:var(--oranje);}
.rl6-link{font-size:12.5px;font-weight:650;color:#8A9099;text-decoration:none;}
.rl6-leeg{padding:30px;text-align:center;color:#8A9099;font-size:13px;}
.rl6-auto{display:flex;align-items:center;gap:12px;background:#FFFFFF;border:1px solid #ECE9E4;border-radius:12px;padding:14px 16px;margin-top:14px;max-width:640px;}
.rl6-auto-tekst{min-width:0;}
.rl6-auto-naam{display:block;font-size:13.5px;font-weight:650;}
.rl6-auto-sub{display:block;font-size:12px;color:#98A0AA;margin-top:2px;}
@media (max-width:900px){
  .rl6-koprij{display:none;}
  .rl6-rij{grid-template-columns:1fr;gap:10px;background:#FFFFFF;}
}
/* 6f mobiel: ruilverzoeken als losse kaarten (Sanne → Tim, status-strook, grote knoppen). */
@media (max-width:720px){
  .rl6-schil{padding:16px;}
  .rl6-lijst{background:none;border:none;margin-top:12px;display:flex;flex-direction:column;gap:9px;overflow:visible;}
  .rl6-rij{border:1px solid #ECE9E4;border-radius:14px;padding:15px 16px;}
  .rl6-rij-actie{border-color:#F5D9BF;}
  .rl6-acties{justify-content:stretch;}
  .rl6-acties form{flex:1;}
  .rl6-acties .rl6-knop{width:100%;padding:12px 0;}
}

/* Ontwerp 6g — Team: lijst links + profiel-zijpaneel rechts (zonder uitnodigen). */
.tm6-schil{display:grid;grid-template-columns:1fr 420px;align-items:start;background:#F7F6F3;min-height:calc(100vh - 60px);}
.tm6-links{padding:28px;min-width:0;}
.tm6-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.tm6-titel{font-size:24px;font-weight:800;letter-spacing:-.035em;}
.tm6-sub{font-size:13px;color:#8A9099;margin-top:3px;}
.tm6-bijwerken{font-size:13px;font-weight:650;color:#5B6570;background:#FFFFFF;border:1px solid #E4E1DC;border-radius:9px;padding:9px 13px;cursor:pointer;font-family:inherit;}
.tm6-bijwerken:hover{background:#F7F6F3;}
.tm6-lijst{background:#FFFFFF;border:1px solid #ECE9E4;border-radius:14px;margin-top:18px;overflow:hidden;}
.tm6-koprij,.tm6-rij{display:grid;grid-template-columns:1fr 190px 110px 130px;gap:16px;padding:11px 18px;align-items:center;}
.tm6-koprij{background:#FBFAF8;border-bottom:1px solid #F1EEE9;}
.tm6-koprij span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#98A0AA;}
.tm6-rij{padding:12px 18px;border-bottom:1px solid #F5F2ED;text-decoration:none;color:inherit;}
.tm6-rij:last-of-type{border-bottom:none;}
.tm6-rij:hover{background:#FBFAF8;}
.tm6-rij-actief{background:#FDFAF7;}
.tm6-wie{display:flex;align-items:center;gap:11px;min-width:0;}
.tm6-avatar{width:32px;height:32px;border-radius:50%;background:#F2F0EC;color:#6B7480;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.tm6-wie-tekst{min-width:0;}
.tm6-naam{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.015em;}
.tm6-mail{display:block;font-size:11.5px;color:#98A0AA;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tm6-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;background:#F7F6F3;border:1px solid #ECE9E4;border-radius:20px;padding:6px 12px;}
.tm6-chip i{width:6px;height:6px;border-radius:50%;background:#C4C9CE;display:block;}
.tm6-chip i.kl0{background:var(--fn-bediening);}
.tm6-chip i.kl1{background:var(--fn-keuken);}
.tm6-chip i.kl2{background:var(--fn-bar);}
.tm6-chip i.kl3{background:var(--fn-schoonmaak);}
.tm6-geenchip{color:#C4C9CE;font-size:13px;}
.tm6-plan{font-size:12px;font-weight:700;color:#C9540F;display:block;}
.tm6-tvt{font-size:11.5px;font-weight:650;color:#5B6570;background:#F2F0EC;border-radius:20px;padding:2px 8px;display:inline-block;margin-top:2px;white-space:nowrap;}
.tm6-tvt-uren{display:flex;align-items:center;gap:6px;flex:none;}
.tm6-tvt-uren input{width:88px;border:1px solid #E4E1DC;border-radius:8px;padding:7px 9px;font-family:inherit;font-size:13px;font-variant-numeric:tabular-nums;}
.tm6-tvt-opslaan{font-size:12px;font-weight:700;color:#FFFFFF;background:var(--oranje);border:none;border-radius:8px;padding:8px 11px;cursor:pointer;font-family:inherit;}
.tm6-status{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#5B6570;}
.tm6-status i{width:7px;height:7px;border-radius:50%;display:block;}
.tm6-st-groen{background:#6E9165;}
.tm6-st-grijs{background:#C4C9CE;}
.tm6-leeg{padding:30px;text-align:center;color:#8A9099;font-size:13px;}
.tm6-voetnoot{font-size:12px;color:#A8AFB7;line-height:1.55;margin-top:14px;max-width:620px;}
.tm6-paneel{background:#FFFFFF;border-left:1px solid #ECE9E4;padding:28px 24px 40px;min-height:calc(100vh - 60px);box-sizing:border-box;}
.tm6-p-kop{display:flex;align-items:flex-start;gap:14px;}
.tm6-p-avatar{width:52px;height:52px;border-radius:50%;background:#F2F0EC;color:#6B7480;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.tm6-p-wie{min-width:0;flex:1;}
.tm6-p-naam{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em;}
.tm6-p-contact{display:block;font-size:12.5px;color:#98A0AA;margin-top:2px;}
.tm6-p-stats{display:flex;gap:8px;margin-top:16px;}
.tm6-p-stat{flex:1;background:#F7F6F3;border-radius:11px;padding:12px 13px;min-width:0;}
.tm6-p-statgetal{font-size:18px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tm6-p-statgetal-klein{font-size:14px;}
.tm6-p-statlab{font-size:11.5px;font-weight:600;color:#8A9099;margin-top:1px;}
.tm6-p-lab{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#98A0AA;margin-top:24px;}
.tm6-p-rechten{border:1px solid #ECE9E4;border-radius:12px;margin-top:10px;overflow:hidden;}
.tm6-p-recht{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border-bottom:1px solid #F5F2ED;}
.tm6-p-recht:last-child{border-bottom:none;}
.tm6-p-recht-tekst{min-width:0;}
.tm6-p-recht-naam{display:block;font-size:13.5px;font-weight:650;}
.tm6-p-recht-sub{display:block;font-size:11.5px;color:#98A0AA;margin-top:1px;}
.tm6-p-volgt{font-size:12.5px;font-weight:650;color:#C9540F;text-decoration:none;white-space:nowrap;}
.tm6-p-diensten{display:flex;flex-direction:column;margin-top:8px;}
.tm6-p-dienst{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #F5F2ED;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;}
.tm6-p-dienst:last-child{border-bottom:none;}
.tm6-p-dienst-fn{font-size:12px;color:#98A0AA;font-weight:600;}
.tm6-p-geen{font-size:12.5px;color:#98A0AA;margin-top:10px;}
.tm6-p-acties{display:flex;gap:9px;margin-top:22px;}
.tm6-p-primair{flex:1;text-align:center;font-size:14px;font-weight:750;color:#FFFFFF !important;background:var(--oranje);border-radius:11px;padding:13px 0;text-decoration:none;}
.tm6-p-secundair{font-size:13.5px;font-weight:650;color:#191D21;border:1px solid #E4E1DC;border-radius:11px;padding:13px 15px;text-decoration:none;}
@media (max-width:900px){
  .tm6-schil{grid-template-columns:1fr;}
  .tm6-paneel{border-left:none;border-top:1px solid #ECE9E4;min-height:0;}
  .tm6-koprij{display:none;}
  .tm6-rij{grid-template-columns:1fr;gap:8px;}
}
.nav-item{position:relative;}
.nav-top{color:#8A9099;font-weight:600;font-size:13px;padding:6px 11px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;user-select:none;transition:background .14s,color .14s;outline:none;}
.nav-top::after{content:"\25BE";font-size:9px;opacity:.6;}
.nav-item:hover > .nav-top,.nav-item:focus-within > .nav-top,.nav-top:focus{color:var(--grijs-900);background:var(--grijs-100);}
.nav-item.actief > .nav-top{color:var(--grijs-900);background:#F2F0EC;font-weight:700;}
.nav-menu{position:absolute;top:100%;left:0;min-width:210px;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw-lg);padding:6px;display:none;z-index:200;margin-top:8px;}
.nav-item:hover > .nav-menu,.nav-item:focus-within > .nav-menu{display:block;}
.nav-menu a{display:block;color:var(--grijs-700);font-weight:600;font-size:13.5px;padding:9px 10px;border-radius:8px;text-decoration:none;white-space:nowrap;}
.nav-menu a:hover{background:var(--grijs-100);color:var(--grijs-900);}
.nav-menu a.actief{background:var(--oranje-zacht);color:var(--oranje-donker);}
.tb-rechts{margin-left:auto;display:flex;align-items:center;gap:14px;}
.wie{color:var(--grijs-500);font-size:13px;font-weight:600;}
.uitlog{color:var(--grijs-600);font-size:12.5px;text-decoration:none;border:1px solid var(--lijn);padding:6px 12px;border-radius:999px;background:none;cursor:pointer;font-family:inherit;transition:border-color .12s,color .12s;}
.uitlog:hover{color:var(--grijs-900);border-color:var(--grijs-400);}
.tb-berichten{position:relative;color:var(--grijs-500);font-size:13px;font-weight:600;text-decoration:none;padding:6px 4px;}
.tb-berichten:hover{color:var(--grijs-900);}
.tb-badge{position:absolute;top:-4px;right:-10px;background:var(--oranje);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;}
.ongelezen-stip{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--oranje);}

/* Meldingen-dropdown (ontwerp 2a): belknop + zwevend paneel met de recentste meldingen. */
.mld{position:relative;}
.mld>summary{list-style:none;cursor:pointer;}
.mld>summary::-webkit-details-marker{display:none;}
/* Meldingen-knop (5a): afgerond vierkant #F2F0EC met een geometrisch vierkantje als icoon. */
.mld-knop{position:relative;width:30px;height:30px;border-radius:8px;background:#F2F0EC;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .14s;}
.mld-knop:hover{background:var(--lijn);}
.mld-vierkant{width:12px;height:12px;border-radius:3px;border:2px solid var(--grijs-600);box-sizing:border-box;display:block;}
.mld[open] .mld-knop{background:var(--oranje-zacht);outline:2px solid var(--oranje);outline-offset:2px;}
.mld[open] .mld-vierkant{border-color:var(--oranje-donker);}
.mld-paneel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:min(340px,92vw);background:var(--wit);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw-lg);overflow:hidden;z-index:250;}
.mld-kop{display:flex;align-items:baseline;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid var(--lijn-zacht);font-size:14px;font-weight:750;letter-spacing:-.02em;}
.mld-alles{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:12px;font-weight:650;color:var(--oranje-donker);}
.mld-alles:hover{text-decoration:underline;}
.mld-lijst{max-height:min(420px,60vh);overflow-y:auto;}
.mld-item{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid #F5F2ED;text-decoration:none;color:inherit;}
.mld-item:hover{background:#F7F6F3;}
.mld-item.ongelezen{background:#FDFAF7;}
.mld-item.ongelezen:hover{background:#FBF3EA;}
.mld-dot{width:7px;height:7px;border-radius:50%;background:#DCD8D1;margin-top:6px;flex:none;}
.mld-item.ongelezen .mld-dot{background:var(--oranje);}
.mld-tekst{flex:1;min-width:0;display:flex;flex-direction:column;}
.mld-t{font-size:13px;font-weight:650;line-height:1.4;color:var(--grijs-700);}
.mld-item.ongelezen .mld-t{color:var(--grijs-900);}
.mld-tijd{font-size:11.5px;color:var(--grijs-400);margin-top:3px;}
.mld-leeg{padding:26px 16px;text-align:center;font-size:13px;color:var(--grijs-400);}
.mld-voet{display:block;text-align:center;padding:11px;font-size:12.5px;font-weight:650;color:var(--oranje-donker);text-decoration:none;border-top:1px solid var(--lijn-zacht);}
.mld-voet:hover{background:#FAF8F5;}

/* Avatar-dropdown rechtsboven (ontwerp 2a): profiel/instellingen/vestiging/uitloggen. */
.prof{position:relative;}
.prof>summary{list-style:none;cursor:pointer;}
.prof>summary::-webkit-details-marker{display:none;}
.prof-avatar{width:32px;height:32px;border-radius:50%;background:var(--antraciet);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.02em;}
.prof-knop .prof-avatar{box-shadow:0 0 0 2px var(--wit),0 0 0 4px var(--oranje);}
.prof-paneel{position:absolute;top:calc(100% + 8px);right:0;width:252px;max-width:min(252px,92vw);background:var(--wit);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw-lg);overflow:hidden;z-index:250;}
.prof-kop{display:flex;align-items:center;gap:11px;padding:16px;border-bottom:1px solid var(--lijn-zacht);}
.prof-avatar-lg{width:38px;height:38px;font-size:13px;box-shadow:none;flex:none;}
.prof-wie{min-width:0;}
.prof-naam{display:block;font-size:14px;font-weight:750;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prof-sub{display:block;font-size:11.5px;color:var(--grijs-400);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prof-groep{padding:6px;border-top:1px solid var(--lijn-zacht);}
.prof-groep:first-of-type{border-top:none;}
.prof-item{display:block;font-size:13.5px;font-weight:600;color:var(--antraciet-2);padding:9px 10px;border-radius:8px;text-decoration:none;}
.prof-item:hover{background:#F7F6F3;color:var(--grijs-900);}
.prof-label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs-400);padding:4px 10px 6px;}
.prof-select{width:100%;background:var(--wit);color:var(--grijs-900);border:1px solid var(--lijn);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.prof-groep-uit{padding:6px 6px 8px;}
.prof-uitlog{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:650;color:#C2452A;padding:9px 10px;border-radius:8px;}
.prof-uitlog:hover{background:#FDEEEB;}
.vestiging-kiezer{display:flex;align-items:center;gap:8px;}
.vestiging-label{color:var(--grijs-400);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.vestiging-form{margin:0;}
.vestiging-select{background:var(--wit);color:var(--grijs-900);border:1px solid var(--lijn);border-radius:9px;padding:7px 10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;max-width:230px;}
.vestiging-select:focus{outline:none;border-color:var(--oranje);}
.vestiging-select option{color:var(--grijs-900);}
.vestiging-actief{color:var(--grijs-700);font-size:13px;font-weight:600;}
.tb-tandwiel{color:var(--grijs-500);font-size:17px;line-height:1;text-decoration:none;padding:6px 8px;border-radius:8px;background:var(--grijs-100);transition:background .14s,color .14s;}
.tb-tandwiel:hover{color:var(--grijs-900);background:#F2F0EC;}
/* Aanvinkbare vaste rollen / extra vestigingen (brok 2) */
/* Rollen als nette, even grote boxjes in een 2-koloms grid (10 rollen -> 5 vs 5). */
.rol-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-bottom:10px;}
.rol-check{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--grijs-600);
  padding:8px 10px;border:1px solid var(--lijn);border-radius:8px;background:var(--wit);}
.rol-check input{width:auto;flex:0 0 auto;}
/* Formuliervelden in een uniform 2-koloms grid: alle invulvakken even groot. */
.veld-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
@media (max-width:640px){.rol-checks,.veld-grid{grid-template-columns:1fr;}}
/* Onboardingen-overzicht: actie-vereist rij + sorteerbare koppen (brok: onboarding) */
tr.rij-actie > td{background:var(--oranje-zacht);}
.sorteer-link{color:inherit;text-decoration:none;font-weight:700;}
.sorteer-link:hover{color:var(--oranje-donker);}
.notif-link{text-decoration:none;color:inherit;display:block;}
.notif-vet{font-weight:800;}

/* ---- Responsive: goed bruikbaar op een telefoon (fase 3) ---- */
@media (max-width: 720px) {
  .topbalk{height:auto;padding:10px 0;}
  .topbalk-binnen{flex-wrap:wrap;gap:10px;padding:0 16px;}
  .nav{order:3;width:100%;margin-left:0;overflow:visible;flex-wrap:wrap;gap:2px;padding-bottom:2px;}
  .nav a{white-space:nowrap;}
  /* Dropdowns op mobiel: inline uitklappen onder het item (niet afgeknipt). */
  .nav-item{width:100%;}
  .nav-menu{position:static;display:none;box-shadow:none;border:none;background:transparent;padding:2px 0 6px 14px;min-width:0;}
  .nav-item:focus-within > .nav-menu{display:block;}
  .nav-menu a{color:var(--grijs-700);padding:8px 10px;}
  .nav-menu a:hover,.nav-menu a.actief{background:var(--grijs-100);color:var(--grijs-900);}
  .tb-rechts{margin-left:auto;}
  .content{padding:22px 16px 70px;}
  h1{font-size:26px;}
  .kop{gap:14px;}
  .tegels{grid-template-columns:1fr !important;}
  .veldrij{grid-template-columns:1fr;}
  /* Brede tabellen horizontaal scrollen i.p.v. de pagina oprekken. */
  .kaart{overflow-x:auto;}
  table{min-width:520px;}
  .filterbalk{flex-direction:column;align-items:stretch;}
  .subtabs{overflow-x:auto;flex-wrap:nowrap;}
}
/* Standaard is de content-baan BREED, zodat tabellen/overzichten hun kolommen op één rij
   kwijt kunnen. Lees-/invulschermen (formulieren, detail, aanmelden) krijgen '.smal'. */
.content{max-width:var(--baan-breed);margin:0 auto;padding:36px 28px 90px;}
.content.smal{max-width:var(--baan-smal);}
.eyebrow{color:var(--grijs-400);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:10px;}
h1{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.1;}
h1 .licht{font-weight:500;color:var(--grijs-400);}
.intro{font-size:14px;color:var(--grijs-600);margin-top:8px;max-width:560px;line-height:1.6;}
.kop{margin-bottom:26px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;}
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px;}
.tegel{background:var(--wit);border:1px solid var(--lijn);border-radius:14px;padding:18px 20px;box-shadow:var(--schaduw);}
.tegel .tl{color:var(--grijs-600);font-weight:600;font-size:12.5px;margin-bottom:10px;}
.tegel .tg{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;}
.tegel .ts{color:var(--grijs-400);font-size:12px;font-weight:500;margin-top:8px;}
.tegel.amber .tg{color:var(--amber);}.tegel.groen .tg{color:var(--groen);}.tegel.oranje .tg{color:var(--oranje);}.tegel.blauw .tg{color:var(--blauw);}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:16px;box-shadow:var(--schaduw);margin-bottom:18px;}
.kaart-kop{padding:16px 20px;border-bottom:1px solid var(--lijn-zacht);font-weight:750;font-size:15px;letter-spacing:-.02em;}
.kaart-body{padding:20px;}
table{width:100%;border-collapse:collapse;}
thead th{font-size:11px;font-weight:700;color:var(--grijs-400);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:12px 18px;border-bottom:1px solid var(--lijn);}
tbody td{padding:13px 18px;border-bottom:1px solid var(--lijn-zacht);font-size:13.5px;vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
.cnaam{font-weight:700;letter-spacing:-.01em;}
.csub{color:var(--grijs-400);font-size:12px;font-weight:500;margin-top:2px;}
.pil{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;display:inline-block;}
.pil.CONCEPT{background:var(--grijs-100);color:var(--grijs-600);}
.pil.INGEDIEND{background:var(--amber-bg);color:var(--amber-tekst);}
.pil.GOEDGEKEURD{background:var(--groen-bg);color:var(--groen-tekst);}
.pil.AFGEKEURD{background:var(--rood-bg);color:var(--rood-tekst);}
.pil.DOORGEZET{background:var(--blauw-bg);color:var(--blauw);}
.knop{border:none;border-radius:9px;padding:10px 16px;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background .16s,transform .1s;letter-spacing:-.01em;}
.knop:active{transform:translateY(1px);}
.knop-primair{background:var(--oranje);color:#fff;}
.knop-primair:hover{background:var(--oranje-donker);}
.knop-donker{background:var(--antraciet);color:#fff;}
.knop-donker:hover{background:#000;}
.knop-licht{background:var(--wit);color:var(--grijs-900);border:1px solid var(--lijn);}
.knop-wit{background:var(--wit);color:var(--oranje-donker);border:1px solid transparent;font-weight:650;}
.knop-wit:hover{background:#FFF6EF;}
.knop-licht:hover{border-color:var(--grijs-400);}
.knop-klein{padding:8px 13px;font-size:12.5px;}
.knop-rood{background:var(--rood-bg);color:var(--rood);}
form.inline{display:inline;}
.rij-acties{display:flex;gap:8px;justify-content:flex-end;}
.sectiekop{font-size:15px;font-weight:750;letter-spacing:-.025em;margin:28px 0 12px;}
.melding{background:var(--amber-bg);border:1px solid var(--amber-rand);border-radius:12px;padding:13px 16px;font-size:13px;color:var(--amber-tekst);margin-bottom:16px;line-height:1.5;font-weight:600;}
.overname-balk{background:var(--rood-bg);border-bottom:2px solid var(--rood);padding:10px 28px;font-size:13px;font-weight:700;color:var(--rood);display:flex;align-items:center;gap:14px;}
.overname-balk a{color:var(--rood);font-weight:800;}
/* Algemene formuliervelden (gebruikt door alle formulieren). */
.veld{margin-bottom:16px;}
.veld label{display:block;font-size:12px;font-weight:700;color:var(--grijs-600);margin-bottom:6px;}
/* Tekstvelden e.d.: checkboxes uitgezonderd (die hebben hun eigen stijl verderop). */
.veld input:not([type=checkbox]){width:100%;padding:12px 14px;border:1px solid var(--lijn);border-radius:10px;font-family:inherit;font-size:14px;outline:none;transition:border-color .15s;background:var(--wit);}
.veld input:not([type=checkbox]):focus{border-color:var(--oranje);}

/* Login — één rustige witte kaart; e-UUR is de hoofdactie, e-mail staat ingeklapt (ontwerp 3b). */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--perzik);}
.login-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:18px;box-shadow:var(--schaduw-lg);
  max-width:420px;width:100%;overflow:hidden;}
.login-body{padding:40px 44px 26px;display:flex;flex-direction:column;}
.login-logo{height:24px;width:auto;display:block;align-self:flex-start;margin-bottom:40px;}
.login-titel{font-size:28px;font-weight:800;letter-spacing:-.035em;line-height:1.15;color:var(--grijs-900);}
.login-sub{color:var(--grijs-600);font-size:13.5px;line-height:1.6;margin:8px 0 24px;}

/* e-UUR: de hoofdactie — groot, oranje. */
.euur-hero{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--oranje);color:#fff;border:0;border-radius:12px;padding:16px 18px;
  font-family:inherit;font-size:15px;font-weight:750;letter-spacing:-.01em;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 24px -12px rgba(238,107,31,.7);transition:background .16s ease,transform .16s ease;}
.euur-hero+.euur-hero{margin-top:10px;}
.euur-hero:hover{background:var(--oranje-donker);transform:translateY(-1px);}
.euur-mark{width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.28);display:block;flex:none;}

/* Ingeklapte e-mail/wachtwoord-login (vooral voor ons). */
.mini-login{margin-top:4px;}
.mini-login>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  color:var(--grijs-600);font-size:12.5px;font-weight:650;padding:13px;transition:color .12s;}
.mini-login>summary::-webkit-details-marker{display:none;}
.mini-login>summary::after{content:"\25BE";font-size:10px;color:var(--grijs-400);}
.mini-login[open]>summary::after{content:"\25B4";}
.mini-login>summary:hover{color:var(--oranje-donker);}

.login-body .veld{margin-bottom:9px;}
.login-body .veld label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs-400);margin-bottom:6px;}
.login-body input{width:100%;padding:14px;border:1px solid var(--lijn);border-radius:12px;font-family:inherit;font-size:14px;outline:none;background:#fff;transition:border-color .15s;}
.login-body input:focus{border-color:var(--oranje);}
.login-email-knop{width:100%;text-align:center;font-size:14px;font-weight:700;color:var(--grijs-900);background:#fff;
  border:1px solid var(--lijn);border-radius:12px;padding:14px 0;cursor:pointer;font-family:inherit;margin-top:6px;transition:border-color .12s;}
.login-email-knop:hover{border-color:var(--grijs-400);}

.login-onder{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--lijn-zacht);}
.login-hulp{font-size:11.5px;color:var(--grijs-400);}
.link-klein{color:var(--oranje-donker);font-weight:650;font-size:12.5px;text-decoration:none;}
.link-klein:hover{text-decoration:underline;}
/* Demo-accounts: ingeklapt en rustig — alleen zichtbaar in het dev-/demoprofiel. */
.login-demo{margin-top:20px;border-top:1px solid var(--lijn);padding-top:6px;}
.login-demo>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--grijs-600);padding:9px 2px;}
.login-demo>summary::-webkit-details-marker{display:none;}
.login-demo>summary::after{content:"\25BE";margin-left:auto;color:var(--grijs-400);transition:transform .15s ease;}
.login-demo[open]>summary::after{transform:rotate(180deg);}
.login-demo .demo-in{padding:2px 2px 6px;font-size:12.5px;color:var(--grijs-600);line-height:1.7;}
.login-demo strong{color:var(--grijs-900);}
.login-demo code{background:var(--grijs-100);border:1px solid var(--lijn);padding:2px 7px;border-radius:6px;color:var(--grijs-900);font-size:12px;}
.login-demo .demo-groep{margin:12px 0 4px;font-weight:800;color:var(--grijs-900);text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;}
.login-demo .demo-lijst{list-style:none;margin:0;padding:0;}
.login-demo .demo-lijst li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:3px 0;line-height:1.5;}
.login-demo .demo-acc{background:var(--wit);border:1px solid var(--lijn);padding:4px 10px;border-radius:8px;color:var(--oranje-donker);font-weight:700;font-size:12px;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s;}
.login-demo .demo-acc:hover{background:var(--oranje-zacht);border-color:var(--oranje);}
.login-demo .demo-hint{font-size:11.5px;color:var(--grijs-400);}
/* Uitslag van de client-authenticatietest op /beheer/euur (dev). */
.auth-poging{padding:10px 0;border-top:1px solid var(--lijn);}
.auth-poging pre{background:var(--grijs-100);border:1px solid var(--lijn);border-radius:8px;padding:8px 10px;
    font-size:11.5px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;margin:6px 0 0;}

/* Waarom is er geen "Inloggen via e-UUR"-knop? (alleen dev/demo — zie login.html) */
.sso-diagnose{margin-top:14px;padding:12px 14px;background:var(--grijs-100);border:1px solid var(--lijn);border-left:3px solid var(--oranje);border-radius:12px;font-size:12.5px;color:var(--grijs-600);line-height:1.6;}
.sso-diagnose strong{display:block;color:var(--grijs-900);margin-bottom:4px;}
.sso-diagnose ul{margin:0;padding-left:18px;}
.sso-diagnose li{margin:2px 0;}
.sso-diagnose p{margin:8px 0 0;}
.sso-diagnose code{background:var(--wit);border:1px solid var(--lijn);padding:1px 6px;border-radius:6px;color:var(--grijs-900);font-size:11.5px;}
.sso-diagnose .muted{font-size:11.5px;}

.fout{background:var(--rood-bg);color:var(--rood);padding:12px 14px;border-radius:12px;font-size:13px;margin-bottom:16px;}
.toggle{display:inline-flex;align-items:center;gap:8px;}
.muted{color:var(--grijs-400);font-size:13px;}

/* ---- Werknemer-aanmelding + zelf-aanvullen-flow (overgenomen uit prototype) ---- */

/* Formulieren */
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.veldrij .veld{margin-bottom:16px;}
.veld-hint{color:var(--grijs-400);font-weight:600;font-size:11px;}
.form-acties{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:22px;flex-wrap:wrap;}
.form-acties .muted{margin-right:auto;}

/* Statusbadges in de medewerkerslijst */
.badge{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;letter-spacing:.01em;}
.badge-actief{background:var(--groen-bg);color:var(--groen);}
.badge-wacht{background:var(--amber-bg);color:var(--amber);}
.badge-proces{background:var(--blauw-bg);color:var(--blauw);}
.badge-uit{background:var(--rood-bg);color:var(--rood);}

/* Rij met meerdere kleine acties (bv. accountbeheer) */
.acties-rij{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.keuze.klein{padding:7px 10px;font-size:12.5px;max-width:140px;}
.link-klein{font-size:13px;color:var(--oranje);font-weight:700;text-decoration:none;}
.link-klein:hover{text-decoration:underline;}

/* Keuzemenu (select), o.a. urenproces per klant */
.keuze{padding:9px 12px;border:1.5px solid var(--lijn);border-radius:10px;font-family:inherit;font-size:13.5px;background:var(--wit);color:var(--grijs-900);cursor:pointer;margin-right:8px;}
.keuze:focus{outline:none;border-color:var(--oranje);}

/* Regel die het actieve urenproces toont (werkgever-dashboard) */
.proces-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:var(--grijs-600);margin-bottom:24px;}

/* "Actie vereist"-kaart (fase 2.2) */
.actie-kaart{border-color:var(--oranje-zacht);}
.actie-kaart .kaart-kop{color:var(--oranje-donker);border-bottom-color:var(--oranje-zacht);}
.actie-lijst{padding:8px 0;}
.actie-item{display:flex;align-items:center;gap:12px;padding:12px 22px;text-decoration:none;color:var(--grijs-900);transition:background .12s;}
.actie-item:hover{background:var(--oranje-zacht);}
.actie-badge{background:var(--oranje);color:#fff;font-weight:800;font-size:13px;min-width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;}
.actie-label{font-weight:600;font-size:14.5px;}
.actie-pijl{margin-left:auto;color:var(--grijs-400);font-size:16px;}

/* Weekplanning / kalender (fase 7) */
.week-balk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.week-titel{display:flex;flex-direction:column;line-height:1.3;}
.week-titel .muted{font-size:12px;font-weight:600;}
.mini{font-size:11px;font-weight:700;}
table.rooster{width:100%;border-collapse:separate;border-spacing:0;min-width:820px;}
table.rooster th{background:var(--grijs-50,#f7f6f4);font-size:12px;font-weight:700;color:var(--grijs-600);padding:10px 8px;text-align:left;border-bottom:1.5px solid var(--lijn);white-space:nowrap;}
table.rooster th.vandaag{color:var(--oranje-donker);background:var(--amber-bg);}
table.rooster td{border-bottom:1px solid var(--lijn);vertical-align:top;padding:6px;}
.rooster-naam{min-width:150px;font-weight:700;font-size:13.5px;position:sticky;left:0;background:var(--wit);z-index:1;}
.rooster-cel{width:12%;min-width:96px;position:relative;}
.rooster-cel .cel-plus{display:inline-block;margin-top:2px;width:22px;height:22px;line-height:20px;text-align:center;border-radius:8px;border:1.5px dashed var(--lijn);color:var(--grijs-400);text-decoration:none;font-weight:700;}
.rooster-cel .cel-plus:hover{border-color:var(--oranje);color:var(--oranje);}
.dienst-blok{position:relative;border-radius:10px;padding:7px 8px;margin-bottom:5px;font-size:12px;line-height:1.3;border:1px solid rgba(0,0,0,.06);}
.dienst-tijd{font-weight:700;}
.dienst-sub{font-size:11px;}
.dienst-x-form{position:absolute;top:2px;right:3px;}
.dienst-x{background:none;border:none;cursor:pointer;font-size:15px;line-height:1;color:var(--grijs-600);opacity:.55;font-family:inherit;padding:0;}
.dienst-x:hover{opacity:1;color:var(--rood);}
.dienst-vink{position:absolute;top:4px;right:6px;color:#2e7d32;font-weight:700;}
.dienst-blok.kl0{background:#FCE8DE;}
.dienst-blok.kl1{background:#E3F0FB;}
.dienst-blok.kl2{background:#E6F4EA;}
.dienst-blok.kl3{background:#F3E8FB;}
.dienst-blok.kl4{background:#FBF3D9;}
.dienst-blok.kl5{background:#E8ECEF;}
.cel-verlof{background:repeating-linear-gradient(45deg,#f3eafc,#f3eafc 6px,#ede0fb 6px,#ede0fb 12px);}
.cel-onbeschikbaar{background:repeating-linear-gradient(45deg,#f6f5f4,#f6f5f4 6px,#eeecea 6px,#eeecea 12px);}
.cel-merk{font-size:10px;font-weight:700;color:var(--grijs-600);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.dienst-blok.concept{border-style:dashed;border-color:var(--grijs-400,#b9b4ae);opacity:.78;}

/* Uren-invoerraster (week per dag / maand totaal) */
.raster-invoer{width:100%;border-collapse:separate;border-spacing:0;min-width:640px;}
.raster-invoer th{font-size:11px;font-weight:700;color:var(--grijs-600);text-transform:uppercase;letter-spacing:.04em;padding:8px 6px;text-align:center;border-bottom:1.5px solid var(--lijn);white-space:nowrap;}
.raster-invoer th.rr-soort{text-align:left;}
.raster-invoer th.vandaag{color:var(--oranje-donker);}
.raster-invoer td{padding:5px 6px;border-bottom:1px solid var(--lijn);text-align:center;vertical-align:middle;}
.raster-invoer td.rr-soort{text-align:left;font-weight:600;font-size:13.5px;white-space:nowrap;}
.raster-cel{width:58px;padding:8px 6px;border:1.5px solid var(--lijn);border-radius:9px;font-family:inherit;font-size:13.5px;text-align:center;outline:none;transition:border-color .15s,box-shadow .15s;}
.raster-cel:focus{border-color:var(--oranje);box-shadow:0 0 0 3px rgba(244,121,32,.14);}
/* B23: live totalen-kolom + totaalrij */
.raster-invoer th.rr-totaal,.raster-invoer td.rr-totaal{font-weight:800;color:var(--grijs-900);background:var(--grijs-100);}
.raster-invoer tfoot .rr-totaalrij td{font-weight:800;border-top:1.5px solid var(--lijn);border-bottom:none;padding-top:9px;}
.raster-invoer tfoot [data-grandtotaal]{color:var(--oranje-donker);}

/* Sub-tab-balk onder de topbalk (gebundelde navigatie, fase 6); lijnt uit met .content */
.subnav-balk{max-width:var(--baan-breed);margin:0 auto;padding:20px 28px 0;}
.subnav-balk .subtabs{margin-bottom:0;}

/* Sub-tabs (beheer-inzage) */
.subtabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;}
.subtabs a{font-size:13.5px;font-weight:700;color:var(--grijs-600);padding:8px 16px;border-radius:999px;background:var(--wit);border:1.5px solid var(--lijn);text-decoration:none;transition:all .15s;}
.subtabs a:hover{border-color:var(--oranje);color:var(--oranje-donker);}
.subtabs a.actief{background:var(--oranje);border-color:var(--oranje);color:#fff;}

/* Filterbalk (beheer-inzage) */
.filterbalk{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;background:var(--wit);border:1px solid var(--lijn);border-radius:16px;padding:16px 18px;margin-bottom:20px;box-shadow:var(--schaduw);}
.filterbalk .veld{margin-bottom:0;}
.filter-acties{display:flex;gap:8px;align-items:center;}

/* Publieke zelf-aanvullen-pagina */
.aanmeld-top{background:var(--antraciet);height:64px;display:flex;align-items:center;padding:0 28px;}
.aanmeld-wrap{max-width:640px;margin:0 auto;padding:36px 28px 90px;}
.aanmeld-kop{margin-bottom:24px;}

/* Stap-indicator */
.stappen{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;}
.stap-indic{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--grijs-400);padding:8px 14px;border-radius:999px;background:var(--wit);border:1.5px solid var(--lijn);}
.stap-indic .stapbol{width:20px;height:20px;border-radius:50%;background:var(--grijs-100);color:var(--grijs-400);font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:800;}
.stap-indic.actief{border-color:var(--oranje);color:var(--oranje-donker);background:var(--oranje-zacht);}
.stap-indic.actief .stapbol{background:var(--oranje);color:#fff;}

/* Wizardstap */
.wtitel{font-weight:800;font-size:18px;margin-bottom:4px;}
.wuitleg{font-size:13.5px;color:var(--grijs-600);line-height:1.5;margin-bottom:18px;}

/* Upload-zone identiteitsbewijs */
.upload{display:block;border:2px dashed var(--lijn);border-radius:16px;padding:36px;text-align:center;cursor:pointer;transition:all .15s;}
.upload:hover{border-color:var(--oranje);background:var(--oranje-zacht);}
.upload.gevuld{border-color:var(--groen);border-style:solid;background:var(--groen-bg);}
.upload .upIcoon{font-size:30px;margin-bottom:10px;}
.upload .upState{font-size:13.5px;font-weight:600;color:var(--grijs-600);}
.upload.gevuld .upState{color:var(--groen);}

/* ---- Moderne checkbox (huisstijl-accent), werkt overal zonder markup-wijziging ---- */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:18px;height:18px;min-width:18px;min-height:18px;
  border:1.5px solid var(--lijn);border-radius:6px;background:var(--wit);
  cursor:pointer;position:relative;display:inline-block;vertical-align:-4px;transition:all .15s;
}
input[type=checkbox]:hover{border-color:var(--oranje);}
input[type=checkbox]:checked{background:var(--oranje);border-color:var(--oranje);}
input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(244,121,32,.22);}
input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed;}

/* ---- Dashboard: klikbare blokken (tenant-dashboard) ---- */
.blok-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:12px;margin-bottom:22px;}
.blok{display:flex;flex-direction:column;gap:6px;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;box-shadow:var(--schaduw);padding:15px 16px;text-decoration:none;color:var(--grijs-900);transition:transform .14s,box-shadow .14s,border-color .14s;}
.dash-sectie{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs-400);margin:6px 2px 10px;}
.blok:hover{transform:translateY(-2px);box-shadow:var(--schaduw-lg);border-color:var(--oranje-zacht);}
.blok-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.blok-titel{font-size:13px;font-weight:700;color:var(--grijs-600);}
.blok-pijl{color:var(--grijs-400);font-size:17px;}
.blok:hover .blok-pijl{color:var(--oranje);}
.blok-getal{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1;}
.blok-getal.nul{color:var(--grijs-400);}
.blok-sub{font-size:12.5px;font-weight:600;color:var(--grijs-400);}
/* B11: urgent (count>0) geaccentueerd, rustige (count=0) blokken gedempt. */
.blok-urgent{border-color:var(--oranje);}
.blok-urgent .blok-getal{color:var(--oranje);}
.blok-rustig{opacity:.62;}
.blok-grafiek{grid-column:1/-1;opacity:1;}

/* Div-gebaseerde staafgrafiek (server-side, geen externe library) */
.uren-grafiek{display:flex;align-items:flex-end;gap:4px;padding:8px 2px 0;}
.ug-balk{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;}
.ug-waarde{font-size:10.5px;font-weight:700;color:var(--grijs-600);}
.ug-bar-wrap{width:100%;height:120px;display:flex;align-items:flex-end;justify-content:center;}
.ug-bar{width:100%;max-width:46px;background:linear-gradient(var(--oranje),var(--oranje-donker));border-radius:7px 7px 0 0;min-height:3px;}
.ug-label{font-size:10px;font-weight:700;color:var(--grijs-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.uren-grafiek.leeg{color:var(--grijs-400);font-size:13px;font-weight:600;padding:30px 0;justify-content:center;}

/* ---- Zoekbare dropdown (account-overname) ---- */
.zoekdrop{position:relative;}
.zoekdrop-input{width:100%;padding:11px 14px;border:1.5px solid var(--lijn);border-radius:12px;font-family:inherit;font-size:14px;outline:none;background:var(--wit);color:var(--grijs-900);}
.zoekdrop-input:focus{border-color:var(--oranje);}
.zoekdrop-lijst{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:250px;overflow-y:auto;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;box-shadow:var(--schaduw-lg);z-index:50;padding:6px;display:none;}
.zoekdrop-lijst.open{display:block;}
.zoekdrop-optie{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;border:none;background:none;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--grijs-900);}
.zoekdrop-optie:hover{background:var(--oranje-zacht);color:var(--oranje-donker);}
.zoekdrop-optie .zd-sub{display:block;font-size:11.5px;color:var(--grijs-400);font-weight:600;margin-top:1px;}
.overname-rij{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:16px;}
.overname-rij .veld{margin:0;flex:1;min-width:240px;}

/* Inline "nieuwe dienst"-modal */
.kal-modal{position:fixed;inset:0;background:rgba(25,29,33,.42);display:none;align-items:center;justify-content:center;z-index:300;padding:20px;}
.kal-modal.open{display:flex;}
.kal-modal-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:18px;box-shadow:var(--schaduw-lg);width:100%;max-width:440px;overflow:hidden;}
.kal-modal-kop{display:flex;align-items:flex-start;gap:10px;padding:20px 24px 16px;border-bottom:1px solid var(--lijn-zacht);}
.kal-modal-kop b{font-size:19px;font-weight:800;letter-spacing:-.03em;}
.kal-modal-kop .kal-modal-datum{margin-left:2px;font-size:12.5px;color:var(--grijs-400);align-self:center;}
.kal-modal-x{margin-left:auto;background:none;border:none;font-size:20px;line-height:1;color:var(--grijs-400);cursor:pointer;font-family:inherit;}
.kal-modal-x:hover{color:var(--grijs-700);}
.kal-modal-body{padding:20px 24px 22px;display:flex;flex-direction:column;gap:18px;}
.kal-modal-body .veld,.kal-modal-body .veldrij .veld{margin-bottom:0;}
/* Dienst inplannen op mobiel (ontwerp 2c): de modal wordt een bottom-sheet die van onderen opschuift. */
@media (max-width:720px){
  .kal-modal{align-items:flex-end;padding:0;}
  .kal-modal-kaart{max-width:none;border-radius:22px 22px 0 0;border-bottom:none;max-height:92vh;overflow-y:auto;animation:sheet-op .22s ease;}
  .kal-modal-kaart::before{content:"";display:block;width:38px;height:4px;border-radius:4px;background:var(--lijn);margin:10px auto -2px;}
}
@keyframes sheet-op{from{transform:translateY(100%);}to{transform:translateY(0);}}
.kal-modal-body label{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs-400);margin-bottom:8px;}
.kal-modal-body input:not([type=checkbox]),.kal-modal-body select{width:100%;padding:11px 13px;border:1px solid var(--lijn);border-radius:10px;font-family:inherit;font-size:14px;font-weight:600;outline:none;background:var(--wit);}
.kal-modal-body input:focus,.kal-modal-body select:focus{border-color:var(--oranje);}
.kal-modal-body input[type=time]{font-variant-numeric:tabular-nums;}
.mt-tijdrij{display:flex;align-items:center;gap:10px;}
.mt-tijdrij input[type=time]{flex:1;text-align:center;font-weight:700;font-size:15px;}
.mt-tijdrij select{flex:1;min-width:0;text-align:center;font-weight:700;font-size:15px;border:1px solid #E4E1DC;border-radius:8px;padding:8px 10px;font-family:inherit;background:#FFFFFF;}
.mt-tot{font-size:13px;color:var(--grijs-400);flex:none;}
.mt-uur{margin-left:auto;font-size:12.5px;font-weight:650;color:var(--grijs-600);background:var(--grijs-100);border-radius:8px;padding:6px 10px;flex:none;}
.mt-dagdelen{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.mt-dagdeel{font-size:12px;font-weight:600;color:var(--grijs-500);border:1px solid var(--lijn-zacht);border-radius:20px;padding:7px 12px;background:var(--wit);cursor:pointer;font-family:inherit;transition:all .12s;}
.mt-dagdeel:hover,.mt-dagdeel.actief{color:var(--oranje-donker);background:var(--oranje-zacht);border-color:var(--oranje-rand);}
/* "Wie"-lijst in de dienst-modal (ontwerp 1g). */
.mt-wie-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}
.mt-laatopen{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:650;color:var(--oranje-donker);}
.mt-laatopen.actief{text-decoration:underline;}
.mt-wie-lijst{border:1px solid var(--lijn);border-radius:12px;overflow:hidden;max-height:224px;overflow-y:auto;}
.mt-wie-rij{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 13px;border:none;border-bottom:1px solid var(--lijn-zacht);background:var(--wit);cursor:pointer;font-family:inherit;}
.mt-wie-rij:last-child{border-bottom:none;}
.mt-wie-rij:hover{background:var(--grijs-50);}
.mt-wie-rij.geselecteerd{background:var(--oranje-zacht);}
.mt-wie-rij.mt-wie-niet{opacity:.55;}
.mt-wie-ini{width:30px;height:30px;border-radius:50%;background:#F2F0EC;color:var(--grijs-700);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;text-transform:uppercase;}
.mt-wie-rij.geselecteerd .mt-wie-ini{background:var(--wit);color:var(--oranje-donker);}
.mt-wie-mid{flex:1;min-width:0;}
.mt-wie-naam{display:block;font-size:13.5px;font-weight:650;}
.mt-wie-status{display:block;font-size:11.5px;font-weight:600;margin-top:1px;color:var(--grijs-400);}
.mt-wie-kan .mt-wie-status{color:var(--fn-bar);}
.mt-wie-liever .mt-wie-status{color:#8A6A18;}
.mt-wie-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--lijn);box-sizing:border-box;flex:none;}
.mt-wie-rij.geselecteerd .mt-wie-radio{background:var(--oranje);border-color:var(--oranje);}
.mt-herhaal{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--lijn-zacht);padding-top:14px;font-size:13.5px;font-weight:650;}
.mt-toggle{position:relative;display:inline-block;width:42px;height:24px;margin:0;cursor:pointer;}
.mt-toggle input{position:absolute;opacity:0;width:0;height:0;}
.mt-toggle span{position:absolute;inset:0;background:var(--lijn);border-radius:20px;transition:background .15s;}
.mt-toggle span::before{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;}
.mt-toggle input:checked+span{background:var(--oranje);}
.mt-toggle input:checked+span::before{transform:translateX(18px);}

/* Kalender-toast (tijdelijke melding) */
.kal-toast{position:fixed;right:20px;bottom:20px;z-index:400;max-width:340px;padding:13px 16px;border-radius:12px;
  font-size:13.5px;font-weight:600;box-shadow:var(--schaduw-lg);opacity:1;transition:opacity .4s,transform .4s;}
.kal-toast.weg{opacity:0;transform:translateY(8px);}
.kal-toast-ok{background:var(--groen-bg);color:var(--groen);border:1px solid #bfe6cd;}
.kal-toast-fout{background:var(--rood-bg);color:var(--rood);border:1px solid #f2c9c3;}

/* ================= Planbord (ontwerp 1b — letterlijk overgenomen) =================
   Het planbord is één wit vel direct onder de topbalk: werkbalk, grid en open-diensten-tray
   als doorlopend vlak. Waarden komen 1-op-1 uit de ontwerp-frames 1b/1c/1d/3a. */
.pb-vel{background:var(--wit);border-bottom:1px solid var(--lijn);}
.pb-binnen{width:100%;} /* full-bleed: het vel vult het scherm (frame = viewport) */
.pb-flash{padding:12px 24px 0;}
.pb-flash .fout,.pb-flash .melding{margin:0;}
/* Grid (1b): naamkolom 224px + dagen; kolomaantal via --rgx-n (7 = week, 1 = dag, 28-31 = maand). */
.rgx-scroll{overflow-x:auto;}
.rgx-kop,.rgx-rij{display:grid;grid-template-columns:224px repeat(var(--rgx-n,7),minmax(var(--rgx-min,0px),1fr));}
.rgx-kop{border-bottom:1px solid var(--lijn);}
.rgx-hoek{padding:12px 16px;display:flex;align-items:flex-end;}
.rgx-hoek span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs-400);}
.rgx-dagkop{padding:12px 16px;}
.rgx-dagkop-top{display:flex;align-items:baseline;gap:6px;}
.rgx-wd{font-size:13px;font-weight:750;letter-spacing:-.01em;color:var(--grijs-900);}
.rgx-dt{font-size:12px;color:var(--grijs-400);}
.rgx-load{font-size:11px;color:#A2A9B2;margin-top:2px;font-variant-numeric:tabular-nums;}
.rgx-dagkop.rg-vandaag{background:#FFF9F4;box-shadow:inset 0 -2px 0 var(--oranje);}
.rgx-dagkop.rg-vandaag .rgx-wd,.rgx-dagkop.rg-vandaag .rgx-dt{color:var(--oranje-donker);}
/* Medewerker-rij (1b): avatar 32px op #F2F0EC, naam 13.5/650, meta-regel eronder. */
.rgx-rij{border-bottom:1px solid #F1EEE9;}
.rgx-naam{padding:12px 16px;display:flex;align-items:center;gap:10px;border-right:1px solid var(--lijn-zacht);min-width:0;}
.rg-avatar{width:32px;height:32px;min-width:32px;border-radius:50%;background:#F2F0EC;color:var(--grijs-600);font-size:11px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.rgx-naamkol{display:flex;flex-direction:column;min-width:0;}
.rgx-naamtekst{font-size:13.5px;font-weight:650;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rgx-meta{font-size:12px;color:var(--grijs-400);font-variant-numeric:tabular-nums;}
/* Teamband (functioneel behouden; ingetogen — het ontwerp groepeert niet). */
.rg-teamband{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--grijs-50);border-bottom:1px solid #F1EEE9;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs-400);}
.rg-teamband .rgx-teamuren{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:600;font-variant-numeric:tabular-nums;}
.rg-groep-toggle{background:none;border:none;cursor:pointer;font-size:11px;color:var(--grijs-400);font-family:inherit;}
.rg-groep-toggle:hover{color:var(--grijs-900);}
.rg-groep.ingeklapt .rgx-rij{display:none;}
/* Cellen (1c): padding 8, zachte kolomlijn #F5F2ED. */
.rg-cel{padding:8px;border-right:1px solid #F5F2ED;min-height:64px;position:relative;min-width:0;}
.rg-cel:last-child{border-right:none;}
.rg-cel.rg-weekend{background:var(--grijs-50);}
.rg-cel.rg-vandaag{background:#FFF9F4;}
/* Sleep-doel (1c): gestippeld oranje neerzet-vlak. */
.rg-cel.rg-over{outline:1.5px dashed var(--oranje);outline-offset:-4px;background:var(--oranje-zacht);}
/* Dienst-kaart (1b/1c/3a): functietint, radius 9, tijd + tag / stip + functie / locatie. */
.rg-kaart{border-radius:9px;padding:8px 10px;margin-bottom:6px;border:1px solid var(--lijn);background:var(--grijs-100);
  cursor:grab;user-select:none;transition:box-shadow .14s ease,transform .12s ease;}
.rg-kaart:last-of-type{margin-bottom:0;}
.rg-kaart:hover{box-shadow:0 6px 14px -6px rgba(25,29,33,.28);transform:translateY(-1px);}
.rg-kaart:active{cursor:grabbing;}
.rg-kaart.rg-slepend{opacity:.35;}
.rg-kaart-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;}
.rg-tijd{font-weight:700;font-size:12.5px;color:var(--grijs-900);letter-spacing:-.01em;line-height:1.2;font-variant-numeric:tabular-nums;}
.rg-tag{font-size:11px;font-weight:650;color:var(--grijs-400);white-space:nowrap;}
.rg-kaart.rg-concept .rg-tag{color:var(--amber-tekst);}
.rg-fnrij{display:flex;align-items:center;gap:6px;margin-top:3px;min-width:0;}
.rg-dot{width:6px;height:6px;border-radius:50%;background:var(--grijs-300);flex:none;}
.rg-titel{font-size:11.5px;color:var(--grijs-600);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rg-loc{font-size:11px;color:var(--grijs-400);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rg-pauze{font-size:10.5px;color:var(--grijs-400);margin-top:2px;white-space:nowrap;}
.rg-kaart.rg-concept{border-style:dashed;}
.rg-kaart.rg-verwerkt{opacity:.6;cursor:default;filter:grayscale(.35);}
/* Functiekleuren (kl0-5) → tint + rand + stip uit het ontwerp. */
.rg-kaart.kl0{background:var(--fn-bediening-bg);border-color:var(--fn-bediening-rand);}
.rg-kaart.kl1{background:var(--fn-keuken-bg);border-color:var(--fn-keuken-rand);}
.rg-kaart.kl2{background:var(--fn-bar-bg);border-color:var(--fn-bar-rand);}
.rg-kaart.kl3{background:var(--fn-schoonmaak-bg);border-color:var(--fn-schoonmaak-rand);}
.rg-kaart.kl4{background:var(--amber-bg);border-color:var(--amber-rand);}
.rg-kaart.kl5{background:var(--grijs-100);border-color:var(--lijn);}
.rg-kaart.kl0 .rg-dot,.rg-dot.kl0{background:var(--fn-bediening);}
.rg-kaart.kl1 .rg-dot,.rg-dot.kl1{background:var(--fn-keuken);}
.rg-kaart.kl2 .rg-dot,.rg-dot.kl2{background:var(--fn-bar);}
.rg-kaart.kl3 .rg-dot,.rg-dot.kl3{background:var(--fn-schoonmaak);}
.rg-kaart.kl4 .rg-dot,.rg-dot.kl4{background:var(--amber);}
/* Afwezigheid als cel-notitie: verlof = echte status (amber), niet beschikbaar = neutraal. */
.rg-notitie{border-radius:9px;padding:8px 10px;margin-bottom:6px;font-size:11.5px;font-weight:650;line-height:1.3;}
.rg-notitie-verlof{background:var(--amber-bg);border:1px solid var(--amber-rand);color:var(--amber-tekst);}
.rg-notitie-onb{background:var(--grijs-50);border:1px solid #F1EEE9;color:var(--grijs-400);}
/* "+"-knop in een cel (alleen bij hover). */
.rg-plus{opacity:0;width:22px;height:22px;line-height:18px;text-align:center;border-radius:7px;border:1.5px dashed var(--lijn);
  background:var(--wit);color:var(--grijs-400);font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .12s;}
.rg-cel:hover .rg-plus{opacity:1;}
.rg-plus:hover{border-color:var(--oranje);color:var(--oranje);}
/* Open-diensten-tray (1b, onderaan): #FBFAF8-band, gestippelde oranje kaarten van 170px. */
.rgx-tray{background:var(--grijs-50);border-top:1px solid var(--lijn);padding:14px 24px 18px;display:grid;grid-template-columns:224px 1fr;}
.rgx-tray-kop{padding-right:16px;}
.rgx-tray-titel{font-size:12px;font-weight:750;letter-spacing:-.01em;}
.rgx-tray-sub{font-size:11px;color:var(--grijs-400);margin-top:2px;line-height:1.45;}
.rgx-tray-lijst{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.rg-openkaart{background:var(--wit);border:1.5px dashed var(--oranje);border-radius:10px;padding:9px 12px;width:170px;
  cursor:grab;user-select:none;transition:box-shadow .14s ease;}
.rg-openkaart:hover{box-shadow:0 6px 14px -6px rgba(25,29,33,.28);}
.rg-openkaart.rg-slepend{opacity:.35;}
.rg-openkaart-top{display:flex;justify-content:space-between;align-items:baseline;}
.rg-opentijd{font-size:13px;font-weight:700;color:var(--oranje-donker);font-variant-numeric:tabular-nums;}
.rg-opendag{font-size:11px;color:var(--oranje-donker);font-weight:700;}
.rg-openfn{display:flex;align-items:center;gap:6px;margin-top:4px;}
.rg-openkaart{cursor:pointer;}
.rg-openreacties{display:inline-block;margin-top:4px;font-size:10.5px;font-weight:700;color:var(--oranje);background:#FDF0E6;border-radius:99px;padding:2px 8px;}
.rg-openfn span:last-child{font-size:12px;color:#8A6A52;}
.rg-openplus{border:1.5px dashed #DCD8D1;border-radius:10px;padding:9px 12px;width:150px;height:57px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;color:var(--grijs-400);font-size:12.5px;font-weight:600;
  background:none;cursor:pointer;font-family:inherit;}
.rg-openplus:hover{border-color:var(--grijs-400);color:var(--grijs-600);}
/* Conflicten (1d "Let op"-balk): amber melding onder het grid. */
.pb-conflicten{display:flex;flex-direction:column;gap:10px;padding:14px 24px 18px;}
.pb-conflict{display:flex;align-items:center;gap:12px;background:var(--amber-bg);border:1px solid var(--amber-rand);
  border-radius:10px;padding:12px 14px;font-size:13px;font-weight:600;color:var(--amber-tekst);}
.pb-conflict i{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none;}
/* Maand: veel kolommen → minimale kolombreedte + horizontale scroll. */
.rgx-maand{--rgx-min:92px;}
.rgx-maand .rgx-dagkop{padding:12px 8px;}
.rgx-maand .rg-cel{padding:5px;}
.rgx-maand .rg-kaart{padding:5px 7px;}
.rgx-maand .rg-tijd{font-size:11px;}
.rgx-maand .rg-titel{font-size:10.5px;}
/* Lege week (ontwerp 1d): uitnodigende lege staat i.p.v. een leeg raster. */
.pb-leeg{border:1px solid var(--lijn-zacht);border-radius:12px;overflow:hidden;margin:16px 24px;}
.pb-leeg-dagen{display:grid;grid-template-columns:repeat(7,1fr);background:#FBFAF8;border-bottom:1px solid var(--lijn-zacht);}
.pb-leeg-dagen span{padding:7px 10px;font-size:11.5px;font-weight:700;color:#8A9099;text-transform:lowercase;}
.pb-leeg-body{padding:44px 32px;display:flex;flex-direction:column;align-items:center;gap:14px;
  background:repeating-linear-gradient(135deg,#FCFBF9 0px,#FCFBF9 6px,#F7F5F1 6px,#F7F5F1 12px);}
.pb-leeg-titel{font-size:17px;font-weight:750;letter-spacing:-.025em;text-align:center;}
.pb-leeg-sub{font-size:13px;color:var(--grijs-600);max-width:340px;text-align:center;line-height:1.55;}
.pb-leeg-acties{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

/* Mobiele dag-lijst van het planbord (ontwerp 2b). Standaard verborgen; alleen ≤720px. */
.pb-mobiel{display:none;}
.pb-fab{display:none;}
.pbm-strip{display:flex;gap:6px;overflow-x:auto;padding:2px 0 14px;-webkit-overflow-scrolling:touch;}
.pbm-dag{flex:none;width:46px;text-align:center;padding:8px 0;border-radius:11px;background:#F4F2EE;border:none;cursor:pointer;font-family:inherit;}
.pbm-dag .pbm-wd{display:block;font-size:10.5px;font-weight:700;color:var(--grijs-400);text-transform:uppercase;}
.pbm-dag .pbm-nr{display:block;font-size:16px;font-weight:750;margin-top:1px;color:var(--grijs-900);}
.pbm-dag.actief{background:var(--oranje);}
.pbm-dag.actief .pbm-wd{color:#FFD9BE;}
.pbm-dag.actief .pbm-nr{color:#fff;}
.pbm-koptekst{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs-400);padding:2px 2px 8px;}
.pbm-koptekst span:last-child{color:var(--oranje-donker);letter-spacing:0;text-transform:none;font-size:12px;white-space:nowrap;}
.pbm-kaart{display:flex;align-items:center;gap:12px;background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:13px;padding:12px 14px;margin-bottom:9px;text-decoration:none;color:inherit;cursor:pointer;}
.pbm-kaart:active{background:var(--grijs-50);}
.pbm-ini{width:34px;height:34px;border-radius:50%;background:#F2F0EC;color:var(--grijs-700);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;text-transform:uppercase;}
.pbm-mid{flex:1;min-width:0;}
.pbm-tijd{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.pbm-sub{display:block;font-size:12.5px;color:var(--grijs-400);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pbm-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--grijs-300);}
.pbm-dot.kl0{background:var(--fn-bediening);}
.pbm-dot.kl1{background:var(--fn-keuken);}
.pbm-dot.kl2{background:var(--fn-bar);}
.pbm-dot.kl3{background:var(--fn-schoonmaak);}
.pbm-dot.kl4{background:var(--amber);}
.pbm-concept{border-style:dashed;}
.pbm-verwerkt{opacity:.75;}
.pbm-open{border:1.5px dashed var(--oranje-rand);}
.pbm-ini-open{background:transparent;border:1.5px dashed var(--oranje-rand);color:var(--oranje-donker);font-size:18px;font-weight:400;}
.pbm-vullen{font-size:12.5px;font-weight:700;color:var(--oranje-donker);flex:none;}
.pbm-leegdag{text-align:center;font-size:13px;color:var(--grijs-400);padding:24px 0;}
@media (max-width:720px){
  .pb-mobiel{display:block;}
  .rg-verberg-mobiel{display:none;}
  .pb-fab{display:flex;align-items:center;justify-content:center;position:fixed;right:18px;bottom:20px;z-index:115;
    width:54px;height:54px;border:none;border-radius:18px;background:var(--oranje);color:#fff;font-size:28px;font-weight:400;
    box-shadow:0 14px 26px -10px rgba(238,107,31,.65);cursor:pointer;}
}

/* Bottom-tab-bar (ontwerp 2d): werknemer-hoofdnavigatie op mobiel. Standaard verborgen (desktop = topnav). */
.bottom-tab{display:none;}
.bottom-tab a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;text-decoration:none;color:var(--grijs-400);font-size:11px;font-weight:600;}
.bottom-tab a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.bottom-tab a.actief{color:var(--oranje-donker);}
.bt-ico{position:relative;display:flex;align-items:center;justify-content:center;}
.bt-badge{position:absolute;top:-5px;right:-8px;background:var(--oranje);color:#fff;font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;box-sizing:border-box;}
@media (max-width:720px){
  .bottom-tab{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:var(--wit);border-top:1px solid var(--lijn-zacht);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 22px -14px rgba(25,29,33,.28);}
  body:has(.bottom-tab) .content{padding-bottom:82px;}
}
/* ===== Toegang-kaarten (ontwerp 4h/4i: wachtwoord vergeten/herstellen/aanmaken, foutpagina's) ===== */
.tk-pagina{background:var(--perzik);}
.tk-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px;}
.tk-kaart{width:460px;max-width:100%;background:var(--wit);border:1px solid var(--lijn);border-radius:18px;padding:40px;
  display:flex;flex-direction:column;min-height:440px;box-shadow:0 24px 60px -44px rgba(25,29,33,.35);}
.tk-logo{height:24px;width:auto;display:block;align-self:flex-start;}
.tk-body{margin-top:34px;}
.tk-eyebrow{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--oranje-donker);}
.tk-titel{font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.2;}
.tk-eyebrow + .tk-titel{margin-top:8px;}
.tk-sub{font-size:13.5px;color:var(--grijs-600);line-height:1.6;margin-top:8px;}
.tk-in{width:100%;border:1px solid var(--lijn);border-radius:11px;padding:14px;font-size:13.5px;font-family:inherit;
  font-weight:600;outline:none;margin-top:22px;}
.tk-in:focus{border-color:var(--oranje);}
.tk-knop{display:block;width:100%;text-align:center;font-size:14.5px;font-weight:750;color:#fff;background:var(--oranje);
  border:0;border-radius:12px;padding:15px 0;margin-top:10px;cursor:pointer;font-family:inherit;text-decoration:none;box-sizing:border-box;}
.tk-knop:hover{background:#D65C13;}
.tk-terug{margin-top:auto;padding-top:26px;font-size:12.5px;font-weight:650;color:#8A9099;text-decoration:none;}
.tk-terug:hover{color:var(--grijs-900);}
.tk-badge-groen{display:flex;align-items:center;gap:9px;background:var(--groen-bg);border:1px solid var(--groen-rand);
  border-radius:10px;padding:11px 13px;font-size:12.5px;font-weight:600;color:var(--groen-tekst);width:fit-content;}
.tk-badge-groen i{width:7px;height:7px;border-radius:50%;background:var(--groen);flex:none;}
.tk-inlogmet{background:var(--grijs-100);border-radius:11px;padding:12px 14px;margin-top:18px;}
.tk-inlogmet-lab{font-size:11.5px;color:var(--grijs-400);font-weight:600;}
.tk-inlogmet-mail{font-size:14px;font-weight:700;margin-top:2px;word-break:break-all;}
.tk-wwveld{display:flex;align-items:center;gap:12px;border:1px solid var(--lijn);border-radius:11px;padding:14px;margin-top:14px;}
.tk-wwveld:focus-within{border:1.5px solid var(--oranje);padding:13.5px;}
.tk-wwveld input{border:0;outline:none;flex:1;font-size:13.5px;font-weight:650;font-family:inherit;min-width:0;}
.tk-wwveld input::placeholder{color:var(--grijs-300);font-weight:400;}
.tk-toon{font-size:12px;font-weight:650;color:var(--oranje-donker);background:none;border:0;cursor:pointer;font-family:inherit;flex:none;padding:0;}
.tk-sterkte{display:flex;gap:4px;margin-top:11px;}
.tk-sterkte span{flex:1;height:4px;border-radius:4px;background:var(--lijn);display:block;transition:background .16s;}
.tk-sterkte span.aan{background:var(--groen);}
.tk-hint{font-size:12px;color:var(--grijs-600);margin-top:9px;}
.tk-hint + .tk-knop{margin-top:14px;}
/* Welkom-landing (4i): groene badge + laadbalk, gecentreerd. */
.sw-kaart{min-height:360px;align-items:center;justify-content:center;text-align:center;}
.sw-kaart .tk-logo{display:none;}
.sw-badge{width:64px;height:64px;border-radius:20px;background:var(--groen-bg);display:flex;align-items:center;justify-content:center;}
.sw-stip{width:22px;height:22px;border-radius:50%;background:var(--groen);display:block;}
.sw-titel{font-size:22px;font-weight:800;letter-spacing:-.035em;margin-top:20px;}
.sw-sub{max-width:280px;}
.sw-balk{width:180px;height:5px;border-radius:5px;background:#F2F0EC;margin-top:22px;overflow:hidden;}
.sw-balk span{display:block;width:35%;height:100%;background:var(--oranje);border-radius:5px;animation:sw-vullen 1.6s ease forwards;}
@keyframes sw-vullen{from{width:12%;}to{width:96%;}}
.sw-door{font-size:12.5px;font-weight:650;color:var(--oranje-donker);margin-top:20px;text-decoration:none;}

/* Foutpagina (4i). */
.tk-kaart-fout{min-height:360px;}
.tk-fout-mid{margin:auto 0;}
.tk-code{font-size:52px;font-weight:800;letter-spacing:-.04em;color:var(--grijs-300);line-height:1;}
.tk-code.oranje{color:var(--oranje);}
.tk-fout-titel{font-size:21px;font-weight:800;letter-spacing:-.03em;margin-top:12px;}
.tk-fout-acties{display:flex;gap:9px;margin-top:20px;}
.tk-fout-knop{font-size:13.5px;font-weight:700;color:#fff;background:var(--oranje);border-radius:10px;padding:12px 16px;text-decoration:none;}
.tk-fout-knop:hover{background:#D65C13;}
.tk-fout-terug{font-size:13.5px;font-weight:650;color:var(--grijs-900);background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:12px 16px;cursor:pointer;font-family:inherit;}

/* ===== Instellingen-schil (ontwerp 5d/5e: zijmenu 280px + wit paneel) ===== */
.ins{background:var(--grijs-100);min-height:calc(100vh - 60px);}
.ins-binnen{display:grid;grid-template-columns:280px 1fr;align-items:stretch;min-height:calc(100vh - 60px);}
.ins-zij{padding:32px 20px 40px 28px;}
.ins-profiel{display:flex;align-items:center;gap:13px;}
.ins-avatar{width:46px;height:46px;border-radius:50%;background:#F2F0EC;color:var(--grijs-600);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.ins-wie{min-width:0;display:flex;flex-direction:column;}
.ins-naam{font-size:15px;font-weight:750;letter-spacing:-.025em;}
.ins-sub{font-size:12px;color:var(--grijs-400);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ins-menu{display:flex;flex-direction:column;gap:2px;margin-top:22px;}
.ins-menu a{font-size:13.5px;font-weight:600;color:var(--grijs-700);border-radius:9px;padding:11px 13px;text-decoration:none;}
.ins-menu a:hover{background:var(--wit);}
.ins-menu a.actief{font-weight:700;color:var(--grijs-900);background:var(--oranje-zacht);}
.ins-scheiding{height:1px;background:#EFECE7;margin:14px 13px;}
.ins-menu-split{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ins-menu-sub{font-size:12px;color:var(--grijs-400);font-weight:600;}
/* 5e "Mijn gegevens": read-only info-kaart + hulp-kaart. */
.ig-kaart{border:1px solid var(--lijn-zacht);border-radius:13px;margin-top:16px;overflow:hidden;}
.ig-rij{display:grid;grid-template-columns:130px 1fr;padding:13px 16px;border-bottom:1px solid #F5F2ED;}
.ig-rij:last-child{border-bottom:none;}
.ig-lab{font-size:12.5px;color:var(--grijs-400);font-weight:600;}
.ig-w{font-size:13.5px;font-weight:650;line-height:1.5;font-variant-numeric:tabular-nums;}
.ig-hulp{border:1px solid var(--lijn-zacht);border-radius:13px;padding:16px;margin-top:14px;}
.ig-hulp-t{font-size:13.5px;font-weight:700;}
.ig-hulp-s{font-size:12.5px;color:var(--grijs-600);line-height:1.55;margin-top:5px;}
.ig-hulp-knop{display:inline-block;font-size:13px;font-weight:700;color:#fff;background:var(--antraciet);border-radius:10px;padding:11px 16px;margin-top:13px;text-decoration:none;}
/* Mobiel profiel (2d/4): profielkop + kaartlijst. */
.pf-kop{display:flex;align-items:center;gap:13px;}
.pf-avatar{width:52px;height:52px;font-size:16px;}
.pf-lijst{display:flex;flex-direction:column;gap:8px;margin-top:18px;}
.pf-item{display:block;background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:14px;padding:15px 16px;
  font-size:14px;font-weight:650;text-decoration:none;color:inherit;}
.pf-item:active{background:var(--grijs-50);}
.pf-item-split{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pf-uitlog{display:block;width:100%;text-align:left;background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:14px;
  padding:15px 16px;font-size:14px;font-weight:650;color:var(--rood);cursor:pointer;font-family:inherit;}
/* Mobiel (4a/4e-4g): werknemer-schermen zonder topbalk (bottom-tab = navigatie) + "‹ Profiel"-terugregel. */
.ins-m-terug{display:none;}
.wd-mkop{display:none;}
@media (max-width:720px){
  body:has(.bottom-tab) .topbalk{display:none;}
  .ins-m-terug{display:block;font-size:13px;font-weight:650;color:#8A9099;text-decoration:none;margin-bottom:8px;}
  .ins-m-terug:hover{color:var(--grijs-900);}
  .wd-mkop{display:flex;align-items:center;justify-content:space-between;background:var(--wit);
    border-bottom:1px solid var(--lijn-zacht);padding:6px 20px 20px;margin:-18px -20px 16px;}
  .wd-mkop .wd-hoi{font-size:22px;}
  .wd-mkop-avatar{position:relative;width:38px;height:38px;border-radius:50%;background:#F2F0EC;color:var(--grijs-600);
    font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;text-decoration:none;}
  .wd-mkop-stip{position:absolute;top:-2px;right:-2px;width:13px;height:13px;border-radius:50%;background:var(--oranje);border:2px solid #fff;}
  .wd-alleen-mobiel .wd-hoi-desktop{display:none;}
}
.ins-uitlog{font-size:13.5px;font-weight:650;color:var(--rood);background:none;border:0;border-radius:9px;padding:11px 13px;cursor:pointer;font-family:inherit;text-align:left;width:100%;}
.ins-uitlog:hover{background:var(--wit);}
.ins-paneel{background:var(--wit);border-left:1px solid var(--lijn-zacht);padding:32px 32px 44px;min-height:680px;}
.ins-paneel-in{max-width:520px;}
.ins-titel{font-size:22px;font-weight:800;letter-spacing:-.035em;}
.ins-intro{font-size:13px;color:var(--grijs-600);line-height:1.6;margin-top:6px;}
.ins-veld{display:flex;flex-direction:column;gap:8px;margin-top:20px;}
.ins-titel + form .ins-veld:first-child,.ins-intro + form .ins-veld:first-child{margin-top:24px;}
.ins-lab{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs-400);}
.ins-lab-optioneel{text-transform:none;letter-spacing:0;font-weight:600;}
.ins-in{border:1px solid var(--lijn);border-radius:11px;padding:13px 14px;font-size:14.5px;font-weight:650;font-family:inherit;outline:none;width:100%;font-variant-numeric:tabular-nums;}
.ins-in:focus{border:1.5px solid var(--oranje);padding:12.5px 13.5px;}
.ins-acties{display:flex;gap:10px;margin-top:26px;align-items:center;}
.ins-opslaan{font-size:14px;font-weight:750;color:#fff;background:var(--oranje);border:0;border-radius:11px;padding:13px 20px;cursor:pointer;font-family:inherit;}
.ins-opslaan:hover{background:#D65C13;}
.ins-annuleer{font-size:13.5px;font-weight:650;color:var(--grijs-900);border:1px solid var(--lijn);border-radius:11px;padding:13px 18px;text-decoration:none;}
/* Wachtwoord (5d): label ín het veld, links. */
.ins-wwlijst{display:flex;flex-direction:column;gap:9px;margin-top:16px;}
.ins-wwrij{display:flex;align-items:center;gap:12px;border:1px solid var(--lijn);border-radius:11px;padding:13px 14px;cursor:text;}
.ins-wwrij:focus-within{border-color:var(--oranje);}
.ins-wwlab{font-size:11.5px;font-weight:650;color:var(--grijs-400);flex:none;width:64px;}
.ins-wwrij input{border:0;outline:none;flex:1;font-size:13.5px;font-weight:650;font-family:inherit;min-width:0;}
.ins-wwrij input::placeholder{color:var(--grijs-300);font-weight:400;}
.ins-wwknop{font-size:13.5px;font-weight:700;color:var(--grijs-900);background:var(--wit);border:1px solid var(--lijn);border-radius:11px;padding:12px 18px;cursor:pointer;font-family:inherit;}
.ins-wwknop:hover{border-color:var(--grijs-400);}
@media (max-width:900px){
  .ins-binnen{grid-template-columns:1fr;}
  .ins-zij{padding:20px 20px 0;}
  .ins-menu{flex-direction:row;flex-wrap:wrap;margin-top:16px;}
  .ins-scheiding{display:none;}
  .ins-uitlog{width:auto;}
  .ins-paneel{border-left:none;border-top:1px solid var(--lijn-zacht);min-height:0;margin-top:16px;padding:24px 20px 40px;}
}

/* ===== Berichten & meldingsvoorkeuren (ontwerp 5c/4c/4d) ===== */
.nc{background:var(--grijs-100);min-height:calc(100vh - 60px);padding:32px 20px 48px;}
.nc-binnen{max-width:760px;margin:0 auto;}
.nc-binnen-smal{max-width:560px;}
.nc-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.nc-terug{font-size:13px;font-weight:650;}
.nc-terug a{color:#8A9099;text-decoration:none;}
.nc-terug a:hover{color:var(--grijs-900);}
.nc-titel{font-size:26px;font-weight:800;letter-spacing:-.035em;}
.nc-terug + .nc-titel{margin-top:8px;}
.nc-sub{font-size:13px;color:#8A9099;margin-top:3px;}
.nc-alles{font-size:13px;font-weight:650;color:var(--oranje-donker);background:none;border:0;cursor:pointer;font-family:inherit;padding:0;}
.nc-chips{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap;}
.nc-chip{font-size:12.5px;font-weight:600;color:var(--grijs-500);background:var(--wit);border:1px solid #E9E6E1;border-radius:20px;padding:8px 14px;text-decoration:none;}
.nc-chip.actief{font-weight:700;color:#fff;background:var(--antraciet);border-color:var(--antraciet);}
.nc-lab{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs-400);margin-top:26px;}
.nc-vandaag{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.nc-kaart{background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:13px;padding:16px 18px;display:flex;gap:13px;align-items:flex-start;text-decoration:none;color:inherit;}
.nc-kaart.ongelezen{border-color:#F5D9BF;}
.nc-dot{width:8px;height:8px;border-radius:50%;background:#DCD8D1;margin-top:6px;flex:none;}
.ongelezen > .nc-dot,.nc-kaart.ongelezen .nc-dot{background:var(--oranje);}
.nc-mid{flex:1;min-width:0;}
.nc-t{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em;}
.nc-s{display:block;font-size:13px;color:var(--grijs-600);margin-top:4px;line-height:1.55;}
.nc-rechts{display:flex;align-items:center;gap:12px;flex:none;}
.nc-tijd{font-size:11.5px;color:var(--grijs-400);white-space:nowrap;}
.nc-bekijk{font-size:12.5px;font-weight:700;color:#fff;background:var(--antraciet);border-radius:9px;padding:9px 14px;}
.nc-eerder{background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:13px;margin-top:10px;overflow:hidden;}
.nc-rij{padding:15px 18px;border-bottom:1px solid #F5F2ED;display:flex;gap:13px;align-items:center;text-decoration:none;color:inherit;}
.nc-rij:last-child{border-bottom:none;}
.nc-rij .nc-dot{margin-top:0;}
.nc-rij-t{flex:1;font-size:13.5px;font-weight:650;color:var(--grijs-700);min-width:0;}
.nc-rij.ongelezen .nc-rij-t{color:var(--grijs-900);}
.nc-leeg{text-align:center;font-size:13px;color:var(--grijs-400);padding:48px 0;}
/* 4d: push-kaart + togglelijst. */
.nv-push{background:var(--oranje-zacht);border-radius:14px;padding:15px 16px;margin-top:18px;}
.nv-push-t{display:block;font-size:14.5px;font-weight:750;letter-spacing:-.02em;color:#8A4A12;}
.nv-push-s{display:block;font-size:12px;color:#A8703F;margin-top:3px;line-height:1.5;}
.nv-push-knop{font-size:12.5px;font-weight:650;color:var(--oranje-donker);background:none;border:0;cursor:pointer;font-family:inherit;padding:0;margin-top:12px;}
.nv-push-status{font-size:12px;color:#A8703F;margin:6px 0 0;}
.nv-lijst{background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:14px;overflow:hidden;margin-top:10px;display:block;}
.nv-rij{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid #F5F2ED;cursor:pointer;}
.nv-rij:last-child{border-bottom:none;}
.nv-rij-t{font-size:14px;font-weight:650;min-width:0;}
/* Schakelaar (3a "Keuze"-toggle): 46×26, oranje = aan. */
.schakel{position:relative;flex:none;display:inline-flex;}
.schakel input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.schakel-pil{width:46px;height:26px;border-radius:20px;background:var(--lijn);display:flex;align-items:center;padding:0 3px;box-sizing:border-box;transition:background .16s;}
.schakel-knop{width:20px;height:20px;border-radius:50%;background:#fff;display:block;transition:transform .16s;}
.schakel input:checked + .schakel-pil{background:var(--oranje);}
.schakel input:checked + .schakel-pil .schakel-knop{transform:translateX(20px);}
.schakel input:focus-visible + .schakel-pil{outline:2px solid var(--oranje);outline-offset:2px;}
.schakel input:disabled + .schakel-pil{opacity:.55;}
.pl-jij{font-size:12px;font-weight:650;color:var(--grijs-400);border:1px solid var(--lijn);border-radius:20px;padding:5px 11px;}

/* ===== Werknemer "Planning team" (ontwerp 5b: hele planning, alleen lezen) ===== */
.pb-binnen-smal{width:100%;}
.pb-chip.actief{background:var(--oranje-zacht);border-color:#F5D9BF;color:var(--oranje-donker);font-weight:650;}
.wp-meekijk{display:flex;align-items:center;gap:8px;background:#F4F2EE;border-radius:9px;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--grijs-500);}
.wp-meekijk-dot{width:7px;height:7px;border-radius:50%;background:var(--grijs-400);flex:none;}
.wp-kop,.wp-rij{display:grid;grid-template-columns:200px repeat(7,1fr);}
.wp-kop{border-bottom:1px solid var(--lijn);background:var(--wit);}
.wp-hoek{padding:12px 16px;}
.wp-hoek span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs-400);}
.wp-dagkop{padding:12px 14px;border-left:1px solid var(--lijn-zacht);}
.wp-dagkop.vandaag{background:#FDF7F1;}
.wp-wd{font-size:13px;font-weight:750;}
.wp-dt{font-size:12px;color:var(--grijs-400);}
.wp-rij{border-bottom:1px solid #F1EEE9;background:var(--wit);}
.wp-rij-jij{background:#FDFBF9;}
.wp-naam{padding:12px 16px;display:flex;align-items:center;gap:10px;border-right:1px solid var(--lijn-zacht);min-width:0;}
.wp-avatar{width:30px;height:30px;border-radius:50%;background:#F2F0EC;color:var(--grijs-600);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.wp-avatar-jij{background:var(--oranje-zacht);color:var(--oranje-donker);}
.wp-naamtekst{font-size:13.5px;font-weight:650;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wp-naamtekst-jij{font-weight:750;color:var(--oranje-donker);}
.wp-cel{padding:8px;border-left:1px solid #F5F2ED;min-height:72px;min-width:0;}
.wp-kaart{border-radius:9px;padding:8px 10px;margin-bottom:6px;border:1px solid var(--lijn);background:var(--grijs-100);}
.wp-kaart:last-child{margin-bottom:0;}
.wp-kaart-jij{background:var(--oranje-zacht);border-color:#F5D9BF;}
.wp-tijd{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.wp-kaart-jij .wp-tijd{color:var(--oranje-donker);}
.wp-fn{font-size:11.5px;color:#A8703F;margin-top:3px;}
.wp-fnrij{display:flex;align-items:center;gap:6px;margin-top:3px;}
.wp-fn-team{font-size:11.5px;color:var(--grijs-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wp-kaart.kl0{background:var(--fn-bediening-bg);border-color:var(--fn-bediening-rand);}
.wp-kaart.kl1{background:var(--fn-keuken-bg);border-color:var(--fn-keuken-rand);}
.wp-kaart.kl2{background:var(--fn-bar-bg);border-color:var(--fn-bar-rand);}
.wp-kaart.kl3{background:var(--fn-schoonmaak-bg);border-color:var(--fn-schoonmaak-rand);}
.wp-kaart.kl4{background:var(--amber-bg);border-color:var(--amber-rand);}
.wp-leeg{padding:32px;text-align:center;font-size:13px;color:var(--grijs-400);background:var(--wit);}
@media (max-width:720px){
  .wp-kop,.wp-rij{grid-template-columns:110px repeat(7,minmax(84px,1fr));}
  .rgx-scroll{overflow-x:auto;}
}

/* ===== Werknemer "Mijn overzicht" (ontwerp 5a desktop / 4a mobiel) =====
   Twee kolommen op #F7F6F3; rechterkolom wit met linkerlijn. Waarden 1-op-1 uit de frames. */
.wd{background:var(--grijs-100);min-height:calc(100vh - 60px);}
.wd-binnen{display:grid;grid-template-columns:1fr 360px;align-items:stretch;min-height:calc(100vh - 60px);}
.wd-hoofd{padding:32px 28px 40px;min-width:0;}
.wd-hoi{font-size:26px;font-weight:800;letter-spacing:-.035em;}
.wd-datum{font-size:13px;color:#8A9099;margin-top:3px;}
.wd-hero{background:var(--oranje-zacht);border-radius:16px;padding:24px 26px;margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.wd-hero-lab{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--oranje-donker);}
.wd-hero-tijd{font-size:34px;font-weight:800;letter-spacing:-.035em;color:var(--oranje-donker);font-variant-numeric:tabular-nums;margin-top:6px;line-height:1;}
.wd-hero-tijd-leeg{font-size:24px;}
.wd-hero-sub{font-size:14px;font-weight:600;color:#A8703F;margin-top:8px;}
.wd-hero-acties{display:flex;gap:9px;flex:none;}
.wd-route{font-size:13.5px;font-weight:700;color:#fff;background:var(--oranje);border-radius:10px;padding:12px 18px;text-decoration:none;}
.wd-route:hover{background:#D65C13;}
.wd-ruilen{font-size:13.5px;font-weight:650;color:var(--oranje-donker);background:#fff;border-radius:10px;padding:12px 18px;text-decoration:none;}
.wd-sectie{display:flex;align-items:baseline;justify-content:space-between;margin-top:28px;}
.wd-sectie-t{font-size:15px;font-weight:750;letter-spacing:-.025em;}
.wd-sectie-s{font-size:12.5px;color:var(--grijs-400);}
.wd-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:12px;}
.wd-dag{background:#fff;border:1px solid var(--lijn-zacht);border-radius:12px;padding:11px;min-height:120px;min-width:0;}
.wd-dag.vandaag{border:1.5px solid var(--oranje);}
.wd-dag-wd{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs-400);}
.wd-dag.vandaag .wd-dag-wd{color:var(--oranje-donker);}
.wd-dag-nr{font-size:17px;font-weight:800;letter-spacing:-.03em;}
.wd-dag.vandaag .wd-dag-nr{color:var(--oranje-donker);}
.wd-blokje{display:block;border:1px solid var(--lijn);border-radius:9px;padding:8px;margin-top:9px;background:var(--grijs-100);text-decoration:none;color:inherit;}
.wd-blokje-t{font-size:12px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap;}
.wd-blokje-f{font-size:11px;color:var(--grijs-600);margin-top:2px;}
.wd-blokje.kl0{background:var(--fn-bediening-bg);border-color:var(--fn-bediening-rand);}
.wd-blokje.kl1{background:var(--fn-keuken-bg);border-color:var(--fn-keuken-rand);}
.wd-blokje.kl2{background:var(--fn-bar-bg);border-color:var(--fn-bar-rand);}
.wd-blokje.kl3{background:var(--fn-schoonmaak-bg);border-color:var(--fn-schoonmaak-rand);}
.wd-blokje.kl4{background:var(--amber-bg);border-color:var(--amber-rand);}
.wd-blokje.open{border:1.5px dashed #F0A86A;background:#fff;}
.wd-blokje.open .wd-blokje-t{color:var(--oranje-donker);}
.wd-blokje.open .wd-blokje-f{color:#8A6A52;}
.wd-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;}
.wd-tegel{display:block;background:#fff;border:1px solid var(--lijn-zacht);border-radius:13px;padding:16px;text-decoration:none;color:inherit;transition:box-shadow .14s ease;}
.wd-tegel:hover{box-shadow:var(--schaduw);}
.wd-tegel-ico{width:26px;height:26px;border-radius:8px;background:#F2F0EC;}
.wd-tegel-ico.oranje{background:var(--oranje-zacht);}
.wd-tegel-t{font-size:14px;font-weight:700;letter-spacing:-.02em;margin-top:11px;}
.wd-tegel-s{font-size:12px;color:var(--grijs-400);margin-top:3px;}
.wd-zij{background:#fff;border-left:1px solid var(--lijn-zacht);padding:32px 24px 40px;min-height:660px;display:flex;flex-direction:column;gap:22px;}
.wd-lab{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs-400);}
.wd-zij-kop{display:flex;align-items:baseline;justify-content:space-between;}
.wd-alles{font-size:12px;font-weight:650;color:var(--oranje-donker);text-decoration:none;}
.wd-aandacht{border:1px solid var(--lijn-zacht);border-radius:12px;padding:14px;margin-top:10px;}
.wd-aandacht-kop{display:flex;align-items:center;gap:10px;}
.wd-aandacht-t{font-size:13px;font-weight:650;line-height:1.4;}
.wd-avatar{width:30px;height:30px;border-radius:50%;background:#F2F0EC;color:var(--grijs-600);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;text-transform:uppercase;}
.wd-aandacht-acties{display:flex;gap:8px;margin-top:12px;}
.wd-accept{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:#fff;background:var(--antraciet);border:0;border-radius:9px;padding:9px 0;cursor:pointer;font-family:inherit;width:100%;}
.wd-afwijs{font-size:12.5px;font-weight:650;color:var(--grijs-500);background:#fff;border:1px solid var(--lijn);border-radius:9px;padding:9px 14px;cursor:pointer;font-family:inherit;}
.wd-open{border:1.5px dashed #F0A86A;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;margin-top:8px;}
.wd-open-info{flex:1;min-width:0;}
.wd-open-t{display:block;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;}
.wd-open-s{display:block;font-size:12px;color:#8A9099;margin-top:2px;}
.wd-oppak{font-size:12.5px;font-weight:700;color:#fff;background:var(--oranje);border:0;border-radius:9px;padding:8px 13px;flex:none;cursor:pointer;font-family:inherit;}
.wd-oppak:hover{background:#D65C13;}
.wd-bericht{display:block;padding:11px 0;border-bottom:1px solid #F5F2ED;text-decoration:none;color:inherit;}
.wd-bericht:last-of-type{border-bottom:none;}
.wd-bericht-t{font-size:12.5px;font-weight:650;line-height:1.45;color:var(--grijs-700);}
.wd-bericht.ongelezen .wd-bericht-t{color:var(--grijs-900);}
.wd-bericht-tijd{font-size:11.5px;color:var(--grijs-400);margin-top:2px;}
/* 4a mobiel: aandacht als compacte rij met chevron. */
.wd-aandacht-m{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--lijn-zacht);border-radius:14px;padding:14px 16px;margin-top:10px;text-decoration:none;color:inherit;}
.wd-aandacht-m-mid{flex:1;min-width:0;}
.wd-aandacht-m-t{display:block;font-size:13.5px;font-weight:650;line-height:1.4;}
.wd-aandacht-m-pijl{font-size:20px;color:var(--grijs-300);}
.wd-alleen-mobiel{display:none;}
@media (max-width:900px){
  .wd-binnen{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .wd-alleen-desktop{display:none;}
  .wd-alleen-mobiel{display:block;}
  .wd-hoofd{padding:18px 20px 24px;}
  .wd-hoi{font-size:22px;}
  .wd-hero{border-radius:15px;padding:18px;gap:15px;}
  .wd-hero-tijd{font-size:27px;}
  .wd-hero-sub{font-size:13.5px;margin-top:3px;}
  .wd-hero-acties{width:100%;}
  .wd-route,.wd-ruilen{flex:1;text-align:center;font-size:13px;padding:12px 0;}
  .wd-tegels{grid-template-columns:1fr 1fr;gap:9px;margin-top:16px;}
  .wd-tegel{border-radius:14px;padding:14px;}
  .wd-tegel-t{font-size:13.5px;margin-top:10px;}
  .wd-tegel-s{font-size:11.5px;margin-top:2px;}
}

/* Werknemer: eigen week als read-only dag-kolommen */
/* Eigen weekrooster — dag-kaarten exact zoals ontwerp 2e (schone kop, groot dagnummer, tijd-eerst). */
.rg-eigen{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:8px;}
.rg-eigen-dag{background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:13px;padding:12px;min-height:180px;}
.rg-eigen-dag.rg-vandaag{border:1.5px solid var(--oranje);}
.rg-eigen-kop{padding:0;}
.rg-eigen-wd{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs-400);}
.rg-eigen-dag.rg-vandaag .rg-eigen-wd{color:var(--oranje-donker);}
.rg-eigen-dt{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;margin-top:1px;}
.rg-eigen-dag.rg-vandaag .rg-eigen-dt{color:var(--oranje-donker);}
.rg-eigen-cel{margin-top:10px;}
.rg-ed{border-radius:10px;padding:10px;margin-bottom:8px;border:1px solid var(--lijn-zacht);background:var(--wit);}
.rg-ed.kl0{background:var(--fn-bediening-bg);border-color:var(--fn-bediening-rand);}
.rg-ed.kl1{background:var(--fn-keuken-bg);border-color:var(--fn-keuken-rand);}
.rg-ed.kl2{background:var(--fn-bar-bg);border-color:var(--fn-bar-rand);}
.rg-ed.kl3{background:var(--fn-schoonmaak-bg);border-color:var(--fn-schoonmaak-rand);}
.rg-ed.kl4{background:var(--amber-bg);border-color:var(--amber-rand);}
.rg-ed-tijd{font-size:13px;font-weight:750;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.rg-ed-fn{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:11.5px;color:var(--grijs-500);}
.rg-ed-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--grijs-300);}
.rg-ed.kl0 .rg-ed-dot{background:var(--fn-bediening);}
.rg-ed.kl1 .rg-ed-dot{background:var(--fn-keuken);}
.rg-ed.kl2 .rg-ed-dot{background:var(--fn-bar);}
.rg-ed.kl3 .rg-ed-dot{background:var(--fn-schoonmaak);}
.rg-ed-loc{font-size:11px;color:var(--grijs-400);margin-top:2px;}
@media (max-width:720px){.rg-eigen{grid-template-columns:1fr;}.rg-eigen-dag{min-height:0;}}
/* Inline beschikbaarheid-preview op het rooster (ontwerp 2e). */
.wr-besch{margin-top:24px;}
.wr-besch-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.wr-besch-lijst{background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:13px;overflow:hidden;}
.wr-besch-rij{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--lijn-zacht);}
.wr-besch-rij:last-child{border-bottom:none;}
.wr-besch-dag{font-size:13.5px;font-weight:650;}
.wr-besch-seg{max-width:340px;}
@media (max-width:560px){.wr-besch-rij{grid-template-columns:1fr;gap:8px;}}

/* A21 — kleine herbruikbare utility-classes, zodat losse inline styles centraal staan. */
.m-0{margin:0;}
.tekst-midden{text-align:center;}

/* A20 — alleen voor schermlezers (visueel verborgen, wel voorgelezen). */
.visueel-verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* A19 — mobiele "stapel"-weergave voor lijst-tabellen: op smalle schermen wordt elke rij een kaartje met
   label:waarde-paren (i.p.v. horizontaal scrollen). Voeg class="tabel-stapel" toe en geef elke data-cel een
   data-label; de actie-cel (rij-acties) krijgt geen label. */
@media (max-width:560px){
  table.tabel-stapel{min-width:0;width:100%;}
  table.tabel-stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  table.tabel-stapel tr{display:block;border:1px solid var(--lijn);border-radius:12px;padding:10px 12px;margin-bottom:10px;}
  table.tabel-stapel td{display:block;border:none;padding:4px 0;}
  table.tabel-stapel td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--grijs-600);}
  table.tabel-stapel td.rij-acties{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  table.tabel-stapel td.rij-acties::before{content:none;}
}

/* A18 — sessie-verloopwaarschuwing (modal) */
.sessie-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;display:flex;align-items:center;justify-content:center;}
.sessie-dialoog{background:#fff;border-radius:12px;padding:24px;max-width:420px;width:90%;box-shadow:0 10px 40px rgba(0,0,0,.25);}
.sessie-titel{font-weight:600;font-size:18px;}

/* B10 — globale zoekbalk (command palette) */
.zoek-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;}
.zoek-paneel{background:#fff;border-radius:14px;width:92%;max-width:560px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;}
.zoek-input{width:100%;border:none;outline:none;padding:18px 20px;font-size:16px;font-family:inherit;border-bottom:1px solid var(--lijn);}
.zoek-resultaten{max-height:52vh;overflow-y:auto;}
.zoek-groep{padding:8px 16px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs-400);}
.zoek-item{display:flex;align-items:baseline;gap:10px;padding:9px 16px;cursor:pointer;}
.zoek-item.actief{background:rgba(0,0,0,.05);}
.zoek-label{font-weight:600;font-size:14px;}
.zoek-sub{color:var(--grijs-400);font-size:12.5px;}
.zoek-leeg{padding:22px 16px;color:var(--grijs-400);text-align:center;}
.zoek-voet{padding:8px 16px;border-top:1px solid var(--lijn);font-size:11.5px;}

/* B15 — actionabele lege staat in een tabel: bericht + eerste-actie-knop, gecentreerd. */
.lege-cel{text-align:center;padding:34px 16px;color:var(--grijs-400);}
.lege-cel .lege-actie{display:block;margin-top:14px;}

/* B32 — toast-bevestiging (met optioneel "ongedaan maken") */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--antraciet);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--schaduw-lg);display:flex;align-items:center;gap:14px;z-index:10001;font-size:14px;font-weight:600;animation:toast-in .25s ease;}
.toast-undo{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:999px;padding:5px 12px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.toast-undo:hover{border-color:#fff;}
.toast-sluit{background:none;border:none;color:#c8c2ba;font-size:18px;cursor:pointer;line-height:1;padding:0 2px;}
.toast-weg{opacity:0;transition:opacity .4s;}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

/* B14 — audit-tijdlijn (verticale feed op detailpagina's) */
.tijdlijn{list-style:none;margin:0;padding:0;position:relative;}
.tijdlijn-item{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--lijn);}
.tijdlijn-item:last-child{padding-bottom:0;}
.tijdlijn-item::before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--oranje);}
.tijdlijn-actie{font-weight:600;font-size:14px;}

/* B22 — print-vriendelijke weergave (o.a. het rooster): verberg chrome, laat de inhoud netjes afdrukken. */
@media print {
  .topbalk, .overname-balk, #app-toast, #sessie-modal, #zoek-overlay, .ical-abonneer,
  .knop, .rg-nav, .rg-werkbalk, .form-acties, form.inline, .filterbalk, .weergaven-bar, .week-balk { display: none !important; }
  body { background: #fff; color: #000; }
  .content, .content.smal { max-width: 100%; margin: 0; padding: 0; }
  .kaart { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; }
  .kop { margin-bottom: 10px; }
  a { color: inherit; text-decoration: none; }
  table { min-width: 0 !important; }
  .rg-eigen, .rgrid, tr { break-inside: avoid; page-break-inside: avoid; }
}

/* B5: onboarding-voortgangsbalk + autosave-indicatie (zelf-aanvullen-flow) */
.voortgang{position:sticky;top:0;z-index:5;background:var(--wit);padding:12px 0 14px;margin:0 0 6px;}
.voortgang-balk{height:8px;background:var(--grijs-100);border-radius:6px;overflow:hidden;}
.voortgang-vul{height:100%;width:0;background:var(--oranje);border-radius:6px;transition:width .3s ease;}
.voortgang-tekst{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--grijs-600);margin-top:7px;}
.voortgang-tekst strong{color:var(--antraciet);}
.autosave-melding{color:var(--groen);opacity:0;transition:opacity .3s ease;}
.autosave-melding.zichtbaar{opacity:1;}

/* B27: actiecentrum — afgeronde rij gedempt + compacte keuze */
tr.rij-af{opacity:.6;}
tr.rij-af .cnaam{text-decoration:line-through;}
.keuze-klein{padding:5px 8px;font-size:13px;border:1px solid var(--lijn);border-radius:8px;background:var(--wit);max-width:200px;}

/* Contract verlengen in twee stappen: "Verlengen" openklappen, dan hoelang. */
.verleng-details > summary { list-style: none; cursor: pointer; display: inline-block; }
.verleng-details > summary::-webkit-details-marker { display: none; }
.verleng-form { display: flex; flex-direction: column; gap: 2px; max-width: 220px; margin-top: 8px;
  padding: 10px; border: 1px solid var(--rand, #e2e2e2); border-radius: 8px; background: #fafafa; }
.verleng-form label { font-size: .82rem; font-weight: 600; }

/* FB-WC1 uren-raster: bewerkbare Totaal-kolom (typen = verdelen over werkdagen; per dag = som) */
.rr-totaal-in { width: 100%; box-sizing: border-box; text-align: right; font-weight: 600;
  background: #f4f7fb; border: 1px solid #d7dee8; border-radius: 6px; padding: 6px 8px; }
.rr-totaal-in:focus { background: #fff; border-color: var(--accent, #2f6fed); outline: none; }

/* #94 standaardbeschikbaarheid-grid: klikbare cellen, groen = beschikbaar */
.bd-grid { border-collapse: separate; border-spacing: 4px; }
.bd-grid th { font-weight: 600; font-size: .82rem; text-align: center; padding: 2px 6px; }
.bd-grid th[scope="row"] { text-align: right; white-space: nowrap; }
.bd-cel { display: block; cursor: pointer; }
.bd-cel input { position: absolute; opacity: 0; width: 0; height: 0; }
.bd-cel span { display: block; width: 100%; min-width: 40px; height: 32px; border-radius: 8px;
  background: var(--grijs-100); border: 1px solid var(--lijn); transition: background .12s, border-color .12s; }
.bd-cel input:checked + span { background: var(--oranje); border-color: var(--oranje); }
.bd-cel input:focus-visible + span { outline: 2px solid var(--oranje); outline-offset: 2px; }

/* FB-P1 in-portal bevestig-modal */
.bevestig-overlay { position: fixed; inset: 0; background: rgba(20,24,31,.45);
  display: flex; align-items: center; justify-content: center; z-index: 1000; }
.bevestig-box { background: var(--kaart, #fff); border-radius: 14px; padding: 22px 22px 18px;
  max-width: 380px; width: calc(100% - 40px); box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.bevestig-tekst { font-size: 1.02rem; line-height: 1.4; margin-bottom: 18px; }
.bevestig-acties { display: flex; justify-content: flex-end; gap: 10px; }

/* FB: "Meer"-dropdown op de planning-werkbalk (occasionele acties gebundeld) */
.meer-menu{position:relative;}
.meer-menu>summary{list-style:none;cursor:pointer;}
.meer-menu>summary::-webkit-details-marker{display:none;}
.meer-paneel{position:absolute;top:calc(100% + 6px);right:0;z-index:60;background:var(--wit);
  border:1px solid var(--lijn);border-radius:12px;box-shadow:var(--schaduw-lg);padding:6px;min-width:214px;
  display:flex;flex-direction:column;gap:2px;}
.meer-paneel a,.meer-paneel button{display:block;width:100%;text-align:left;background:none;border:none;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--grijs-900);padding:9px 12px;border-radius:8px;
  cursor:pointer;text-decoration:none;}
.meer-paneel a:hover,.meer-paneel button:hover{background:var(--amber-bg);color:var(--oranje-donker);}
.meer-paneel form{margin:0;}
.meer-scheiding{height:1px;background:var(--lijn);margin:4px 2px;}

/* ===== Roosterhome: volgende dienst + deze week + snelacties (ontwerp 2e/1e) ===== */
.rh{max-width:980px;}
.rh-hero{position:relative;background:var(--oranje-zacht);border-radius:14px;padding:18px 20px;margin-bottom:6px;}
.rh-hero-in{position:relative;z-index:1;}
.rh-lab{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--grijs-400);font-weight:700;}
.rh-big{font-size:23px;font-weight:800;letter-spacing:-.035em;margin:6px 0 3px;line-height:1.15;color:var(--oranje-donker);font-variant-numeric:tabular-nums;}
.rh-hero-leeg .rh-big{color:var(--grijs-900);}
.rh-meta{font-size:13px;color:#A8703F;font-weight:600;}
.rh-hero-leeg{background:var(--grijs-100);}
.rh-hero-leeg .rh-meta{color:var(--grijs-600);}
.rh-cta{display:inline-flex;align-items:center;gap:7px;margin-top:14px;background:var(--oranje);color:#fff;
  border-radius:9px;padding:9px 15px;font-weight:700;font-size:13px;text-decoration:none;transition:background .16s ease,transform .14s ease;}
.rh-cta:hover{background:var(--oranje-donker);transform:translateY(-1px);}

.rh-week{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
.rh-day{flex:1 1 0;min-width:112px;background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:13px;
  padding:12px;box-shadow:var(--schaduw);}
.rh-day.rh-vandaag{border:1.5px solid var(--oranje);}
.rh-day-kop{text-align:center;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--lijn-zacht);}
.rh-wd{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs-400);font-weight:700;}
.rh-dt{display:block;font-size:18px;font-weight:800;letter-spacing:-.03em;margin-top:1px;}
.rh-day.rh-vandaag .rh-wd,.rh-day.rh-vandaag .rh-dt{color:var(--oranje-donker);}
.rh-chip{display:flex;flex-direction:column-reverse;gap:1px;border-radius:10px;padding:9px 10px;margin-bottom:6px;
  border:1px solid var(--fn-bediening-rand);background:var(--fn-bediening-bg);}
.rh-chip:last-child{margin-bottom:0;}
.rh-chip-u{font-size:12.5px;font-weight:700;color:var(--grijs-900);letter-spacing:-.01em;line-height:1.2;font-variant-numeric:tabular-nums;}
.rh-chip-t{font-size:11.5px;font-weight:600;color:var(--grijs-600);}
.rh-chip.kl0{background:var(--fn-bediening-bg);border-color:var(--fn-bediening-rand);}
.rh-chip.kl1{background:var(--fn-keuken-bg);border-color:var(--fn-keuken-rand);}
.rh-chip.kl2{background:var(--fn-bar-bg);border-color:var(--fn-bar-rand);}
.rh-chip.kl3{background:var(--fn-schoonmaak-bg);border-color:var(--fn-schoonmaak-rand);}
.rh-chip.kl4{background:var(--amber-bg);border-color:var(--amber-rand);}
.rh-chip.kl5{background:var(--grijs-100);border-color:var(--lijn);}
.rh-vrij{text-align:center;color:var(--grijs-400);font-size:12.5px;font-weight:600;padding:14px 0 8px;}

.rh-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.rh-q{display:flex;align-items:center;gap:12px;background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:14px;
  padding:15px 16px;text-decoration:none;box-shadow:var(--schaduw);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;}
.rh-q:hover{transform:translateY(-2px);box-shadow:var(--schaduw-lg);border-color:var(--grijs-400);}
.rh-q-txt{display:flex;flex-direction:column;gap:2px;flex:1;}
.rh-qt{font-weight:700;font-size:14px;letter-spacing:-.02em;color:var(--grijs-900);}
.rh-qs{font-size:12px;color:var(--grijs-400);}
.rh-q-pijl{color:var(--grijs-300);font-size:18px;font-weight:700;}
@media (max-width:640px){ .rh-quick{grid-template-columns:1fr;} }

/* ===== Planbord-werkbalk (ontwerp 1b) ===== */
/* Werkbalk (1b): witte band, geen kaart — padding 16/24, alleen een zachte onderlijn. */
.pb-bar{background:var(--wit);border-bottom:1px solid var(--lijn-zacht);padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.pb-bar-l{display:flex;align-items:center;gap:16px;}
.pb-datenav{display:flex;align-items:center;border:1px solid var(--lijn);border-radius:9px;overflow:hidden;}
.pb-datenav a{padding:7px 12px;font-size:14px;line-height:1.2;color:var(--grijs-500);text-decoration:none;}
.pb-datenav a:nth-child(2){font-size:13px;font-weight:600;color:var(--grijs-900);border-left:1px solid #EFECE7;border-right:1px solid #EFECE7;}
.pb-datenav a:hover{background:var(--grijs-100);color:var(--grijs-900);}
.pb-week{font-size:19px;font-weight:800;letter-spacing:-.03em;}
.pb-sub{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:12px;color:#8A9099;flex-wrap:wrap;}
.pb-status-pill{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:3px 9px;font-size:11px;font-weight:650;}
.pb-status-pill i{width:6px;height:6px;border-radius:50%;display:block;flex:none;}
.pb-status-pill.amber{background:var(--amber-bg);border:1px solid var(--amber-rand);color:var(--amber-tekst);}
.pb-status-pill.amber i{background:var(--amber);}
.pb-status-pill.groen{background:var(--groen-bg);border:1px solid var(--groen-rand);color:var(--groen-tekst);}
.pb-status-pill.groen i{background:var(--groen);}
.pb-status-pill.grijs{border:1px solid var(--lijn);color:var(--grijs-500);}
.pb-status-pill.grijs i{background:var(--grijs-300);}
.pb-bar-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pb-seg{display:flex;background:#F2F0EC;border-radius:9px;padding:3px;}
.pb-seg a{font-size:13px;font-weight:600;padding:5px 13px;border-radius:6px;color:#8A9099;text-decoration:none;transition:background .12s,color .12s;}
.pb-seg a:hover{color:var(--grijs-700);}
.pb-seg a.actief{background:var(--wit);color:var(--grijs-900);font-weight:650;box-shadow:0 1px 2px rgba(25,29,33,.08);}
.pb-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--grijs-500);border:1px solid var(--lijn);
  border-radius:9px;padding:8px 13px;background:var(--wit);cursor:pointer;font-family:inherit;text-decoration:none;list-style:none;transition:border-color .12s,color .12s;}
.pb-chip:hover{border-color:var(--grijs-400);color:var(--grijs-900);}
.pb-chip::-webkit-details-marker{display:none;}
.pb-chip-icoon{padding:8px 11px;font-size:15px;line-height:1;}
.pb-chip-select{appearance:none;font-size:13px;font-weight:600;color:var(--grijs-500);border:1px solid var(--lijn);border-radius:9px;
  padding:8px 30px 8px 13px;background-color:var(--wit);cursor:pointer;font-family:inherit;
  background-image:linear-gradient(45deg,transparent 50%,var(--grijs-400) 50%),linear-gradient(135deg,var(--grijs-400) 50%,transparent 50%);
  background-position:calc(100% - 15px) 16px,calc(100% - 10px) 16px;background-size:5px 5px;background-repeat:no-repeat;}
.pb-chip-select:hover{border-color:var(--grijs-400);color:var(--grijs-900);}
.pb-publiceren{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#fff;background:var(--oranje);
  border:0;border-radius:9px;padding:9px 15px;cursor:pointer;font-family:inherit;transition:background .16s;}
.pb-publiceren:hover{background:#D65C13;} /* 1b: eigen hover-tint van de Publiceren-knop */
.pb-count{background:rgba(255,255,255,.24);border-radius:20px;padding:1px 7px;font-size:11px;font-weight:700;}
.meer-menu .meer-paneel{right:0;left:auto;}

/* Algemene select-styling (formulieren buiten de modal). */
.veld select{width:100%;padding:11px 13px;border:1px solid var(--lijn);border-radius:10px;font-family:inherit;font-size:14px;font-weight:600;background:var(--wit);outline:none;color:var(--grijs-900);}
.veld select:focus{border-color:var(--oranje);}

/* ===== Werknemer-rooster desktop (ontwerp 2e): weekrooster + zijpaneel ===== */
/* Schil (2e): links weekrooster op de zachte grond, rechts een witte kolom tegen de rand. */
.wr{background:var(--grijs-100);min-height:calc(100vh - 60px);}
.wr-binnen{display:grid;grid-template-columns:1fr 380px;align-items:stretch;}
.wr-hoofd{padding:28px 28px 36px;min-width:0;}
.wr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.wr-head .pb-week{font-size:24px;}
.wr-sub{font-size:13px;color:#8A9099;margin-top:2px;}
.wr-head-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
/* Ontwerp 2e: het zijpaneel is een eigen wit vlak (kaart) naast het weekrooster. */
/* Rechterkolom (2e): wit vlak met linkerlijn, geen zwevende kaart. */
.wr-side{display:flex;flex-direction:column;gap:22px;background:var(--wit);border-left:1px solid var(--lijn-zacht);
  padding:28px 24px 36px;min-height:640px;}
.wr-side-lab{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs-400);}
.wr-side-kop{display:flex;align-items:baseline;justify-content:space-between;}
.wr-side-aantal{font-size:12px;font-weight:650;color:var(--oranje-donker);}
.wr-side .rh-hero{margin-bottom:0;border-radius:13px;padding:16px;}
.wr-side .rh-big{font-size:22px;margin:0 0 3px;}
.wr-side .rh-meta{font-size:13.5px;}
.wr-hero-acties{display:flex;gap:8px;margin-top:14px;}
.wr-details{margin-top:14px;padding-top:12px;border-top:1px solid var(--oranje-rand);display:flex;flex-direction:column;gap:8px;}
.wr-details[hidden]{display:none;} /* de author-flex zou anders het [hidden]-attribuut overrulen (Details-knop leek dood) */
.rg-ed-klikbaar{cursor:pointer;}
.rg-ed-menu{margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:5px;}
.rg-ed-menu[hidden]{display:none;}
.rg-ed-actie{display:block;width:100%;text-align:left;background:#FFFFFF;border:1px solid #E4E1DC;border-radius:8px;padding:7px 10px;font-family:inherit;font-size:12px;font-weight:700;color:var(--grijs-900);cursor:pointer;text-decoration:none;box-sizing:border-box;}
.rg-ed-actie:hover{border-color:var(--oranje);color:var(--oranje);}
.wr-det-rij{font-size:12.5px;color:var(--grijs-700);}
.wr-det-rij a{color:var(--oranje-donker);font-weight:650;}
.wr-det-lab{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs-400);margin-bottom:1px;}
.wr-maand{margin-top:auto;background:var(--grijs-100);border-radius:12px;padding:14px;}
.wr-maand-t{font-size:13px;font-weight:700;}
.wr-maand-u{font-size:13px;color:#8A9099;margin-top:2px;}
.wr-maand-getal{font-size:26px;font-weight:800;letter-spacing:-.035em;color:var(--grijs-900);font-variant-numeric:tabular-nums;margin-right:4px;}
.wr-open{display:flex;align-items:center;gap:12px;border:1.5px dashed #F0A86A;border-radius:12px;padding:12px 14px;margin-top:8px;background:var(--wit);}
.wr-open-info{flex:1;min-width:0;}
.wr-open-t{font-size:14px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.wr-open-s{font-size:12px;color:#8A9099;margin-top:2px;}
/* Open dienst ín een dagkaart (2e) + inline beschikbaarheid-kop. */
.rg-ed-open{border:1.5px dashed #F0A86A;border-radius:10px;padding:10px;margin-bottom:8px;}
.rg-ed-open-tijd{color:var(--oranje-donker);}
.rg-ed-open-fn{font-size:11.5px;color:#8A6A52;margin-top:3px;}
.rg-ed-oppak{display:block;width:100%;text-align:center;font-size:11.5px;font-weight:700;color:#fff;background:var(--oranje);
  border:0;border-radius:7px;padding:6px 0;margin-top:8px;cursor:pointer;font-family:inherit;}
.rg-ed-oppak:hover{background:#D65C13;}
.wr-besch-titel{font-size:15px;font-weight:750;letter-spacing:-.025em;}
.wr-neemover{font-size:12.5px;font-weight:650;color:var(--oranje-donker);background:none;border:0;cursor:pointer;font-family:inherit;padding:0;}
@media (max-width:900px){
  .wr-binnen{grid-template-columns:1fr;}
  .wr-side{border-left:none;border-top:1px solid var(--lijn-zacht);min-height:0;}
}
.wr-ruil{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--lijn-zacht);border-radius:10px;padding:10px 12px;margin-top:8px;}
.wr-ruil-t{font-size:12.5px;font-weight:600;color:var(--grijs-700);}
/* Inkomend ruilverzoek (ontwerp 2f): collega wil mijn dienst overnemen. */
.wr-inruil{border:1px solid var(--lijn-zacht);border-radius:12px;padding:14px;margin-top:8px;background:var(--wit);}
.wr-inruil-kop{display:flex;align-items:center;gap:10px;}
.wr-avatar{width:30px;height:30px;border-radius:50%;background:#F2F0EC;color:var(--grijs-700);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;text-transform:uppercase;}
.wr-inruil-t{font-size:13px;font-weight:650;line-height:1.4;}
.wr-inruil-acties{display:flex;gap:8px;margin-top:12px;}
.wr-inruil-hint{font-size:11.5px;color:var(--grijs-400);margin-top:9px;line-height:1.5;}
.pb-status-pill.oranje{background:var(--oranje-zacht);border:1px solid var(--oranje-rand);color:var(--oranje-donker);}
.pb-status-pill.oranje i{background:var(--oranje);}
@media (max-width:900px){.wr-layout{grid-template-columns:1fr;}}

/* Beschikbaarheid-segment: Beschikbaar / Niet beschikbaar (2 standen; "Liever niet" is vervallen). */
.voorkeur-seg{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;background:#F4F2EE;border-radius:10px;padding:3px;}
.voorkeur-seg label{display:block;margin:0;cursor:pointer;font-size:inherit;color:inherit;font-weight:inherit;text-transform:none;letter-spacing:0;}
.voorkeur-seg input{position:absolute;opacity:0;width:0;height:0;}
.voorkeur-seg span{display:block;text-align:center;font-size:13px;font-weight:600;color:var(--grijs-600);padding:9px 0;border-radius:8px;transition:background .12s,color .12s;}
.voorkeur-seg label:hover span{color:var(--grijs-900);}
.voorkeur-seg input:checked+span{color:#fff;font-weight:700;}
.voorkeur-seg label:nth-of-type(1) input:checked+span{background:var(--oranje);}
.voorkeur-seg label:nth-of-type(2) input:checked+span{background:var(--antraciet-2);}
.voorkeur-seg input:focus-visible+span{outline:2px solid var(--oranje);outline-offset:2px;}

/* Beschikbaarheid week-weergave (ontwerp 1f): kop + week-nav, dag-kaarten, snelacties, doorgeven. */
.bd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.bd-weeknav{display:flex;align-items:center;gap:10px;background:var(--wit);border:1px solid var(--lijn);border-radius:11px;padding:6px 10px;font-size:13.5px;font-weight:650;}
.bd-weeknav a{color:var(--grijs-500);text-decoration:none;font-size:18px;line-height:1;padding:2px 6px;border-radius:7px;}
.bd-weeknav a:hover{background:var(--grijs-100);color:var(--grijs-900);}
.bd-weeknav-dt{color:var(--grijs-400);font-weight:600;margin-left:4px;}
.bd-dagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:10px;margin:16px 0;}
.bd-dag{background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:13px;padding:14px;}
.bd-dag-leeg{opacity:.6;}
.bd-dag-kop{display:flex;align-items:center;justify-content:space-between;}
.bd-dag-nm{font-size:14.5px;font-weight:700;letter-spacing:-.02em;}
.bd-dag-nr{color:var(--grijs-400);font-weight:600;margin-left:4px;}
.bd-dag-hint{font-size:12px;font-weight:600;color:var(--grijs-400);}
.bd-seg{margin-top:10px;}
.bd-snel{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.bd-voet{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--wit);border:1px solid var(--lijn-zacht);border-radius:14px;padding:14px 16px;}
.bd-bewaard{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:#2F4429;background:#F1F5EF;border-radius:10px;padding:9px 12px;}
.bd-bewaard-stip{width:7px;height:7px;border-radius:50%;background:var(--groen);flex:none;}
.bd-reminder{display:flex;align-items:center;gap:9px;background:#FBF6EC;border:1px solid #EADCC0;border-radius:11px;padding:10px 13px;font-size:12.5px;font-weight:600;color:#7A5F16;margin:14px 0 4px;}
.bd-reminder-stip{width:7px;height:7px;border-radius:50%;background:#C99A20;flex:none;}
.bd-hint-tijd{color:var(--oranje-donker) !important;}
.bd-tijd{display:flex;align-items:center;gap:8px;margin-top:9px;}
.bd-tijd input[type=time],.bd-tijd select{width:auto;flex:1;min-width:0;border:1px solid var(--lijn);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:12.5px;font-weight:650;color:var(--grijs-900);background:#FFFFFF;}
.bd-vensters{display:flex;flex-direction:column;gap:6px;}
.bd-tijd-nieuw select{border-style:dashed;color:var(--grijs-400);}
.bd-tijd-plus{font-weight:800;color:var(--grijs-400);padding:0 4px;}
.bd-tijd-tot{font-size:12.5px;color:var(--grijs-400);}
.bd-tijd-wis{background:none;border:none;cursor:pointer;font-family:inherit;font-size:18px;line-height:1;color:var(--grijs-400);padding:0 4px;}
.bd-tijd-wis:hover{color:var(--grijs-900);}

/* Werknemer Ruilen-scherm (ontwerp 2f/2g). */
.rl-layout{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start;}
.rl-wie{display:flex;flex-direction:column;gap:8px;}
.rl-wie-optie{display:flex;align-items:center;gap:11px;border:1px solid var(--lijn);border-radius:12px;padding:11px 13px;cursor:pointer;margin:0;font-weight:inherit;text-transform:none;letter-spacing:0;}
.rl-wie-optie input{position:absolute;opacity:0;width:0;height:0;}
.rl-wie-optie:has(input:checked){border:1.5px solid var(--oranje);background:var(--oranje-zacht);}
.rl-wie-ini{width:34px;height:34px;border-radius:50%;background:#F2F0EC;color:var(--grijs-700);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;text-transform:uppercase;}
.rl-wie-naam{font-size:14px;font-weight:700;letter-spacing:-.02em;}
.rl-hint{font-size:11.5px;color:var(--grijs-400);margin-top:10px;text-align:center;line-height:1.5;}
.rl-uitleg .kaart-body{padding-top:18px;}
.rl-stap{display:flex;align-items:center;gap:11px;border-radius:10px;padding:11px 13px;margin-bottom:8px;font-size:13px;font-weight:600;}
.rl-stap i{width:8px;height:8px;border-radius:50%;flex:none;}
.rl-stap-amber{background:#FBF6EC;border:1px solid #EADCC0;color:#7A5F16;}.rl-stap-amber i{background:#C99A20;}
.rl-stap-oranje{background:var(--oranje-zacht);border:1px solid var(--oranje-rand);color:#A8703F;}.rl-stap-oranje i{background:var(--oranje);}
.rl-stap-groen{background:#F1F5EF;border:1px solid #DFE8DB;color:#2F4429;}.rl-stap-groen i{background:var(--groen);}
.rl-stap-rood{background:#FDEEEB;border:1px solid #EFC7BE;color:#A83A22;}.rl-stap-rood i{background:#C2452A;}
@media (max-width:820px){.rl-layout{grid-template-columns:1fr;}}

/* Werkgever team-beschikbaarheid-overzicht (nav-tab; geen ontwerp-frame). */
.tb-legenda{font-size:12px;color:var(--grijs-500);font-weight:600;}
.tb-legenda i{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;margin:0 2px 0 6px;}
.tb-kan{background:var(--oranje);}.tb-liever{background:var(--amber);}.tb-kanniet{background:var(--antraciet-2);}.tb-leeg{background:var(--grijs-300);}
.tb-grid{width:100%;border-collapse:collapse;min-width:560px;}
.tb-grid th{font-size:11.5px;font-weight:700;color:var(--grijs-400);text-transform:uppercase;letter-spacing:.04em;padding:10px 8px;text-align:center;border-bottom:1px solid var(--lijn);}
.tb-grid th.tb-naamkop{text-align:left;}
.tb-naam{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:650;padding:10px 8px;white-space:nowrap;border-bottom:1px solid var(--lijn-zacht);}
.tb-grid td.tb-cel{text-align:center;padding:10px 8px;border-bottom:1px solid var(--lijn-zacht);}
.tb-ini{width:28px;height:28px;border-radius:50%;background:#F2F0EC;color:var(--grijs-700);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;text-transform:uppercase;}
.tb-vlag{display:inline-block;width:20px;height:20px;border-radius:7px;}
.tb-vlag.tb-kan{background:var(--oranje-zacht);border:1.5px solid var(--oranje);}
.tb-vlag.tb-liever{background:var(--amber-bg);border:1.5px solid var(--amber);}
.tb-vlag.tb-kanniet{background:#EDEBEE;border:1.5px solid var(--antraciet-2);}
.tb-vlag.tb-leeg{background:var(--grijs-100);border:1.5px solid var(--lijn);}