*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f4f6;color:#111827}header{background:#fff;color:#111827;padding:8px 16px 10px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:sticky;top:0;z-index:5;border-bottom:1px solid #e5e7eb}.headerLogo{display:block;width:360px;height:118px;max-width:82vw;object-fit:contain}.appVersion{font-size:12px;color:#6b7280;margin-top:-4px}.headerLoggedEmployee{font-size:13px;font-weight:700;color:#111827;margin-top:3px}.appHeader #installBtn{position:absolute;right:16px;top:16px}main{max-width:950px;margin:auto;padding:20px 16px 90px}.screen{display:none}.screen.active{display:block}.hero{background:#fff;border-radius:18px;padding:28px 22px;margin-bottom:16px;box-shadow:0 2px 10px #0000000d}.eyebrow{font-size:12px;font-weight:800;letter-spacing:1px;opacity:.55}.hero h1{margin:8px 0 6px;font-size:30px}.hero p{margin:0 0 22px;color:#6b7280}.primary,.secondary,.formrow button{border:0;border-radius:10px;padding:13px 16px;font-weight:700;cursor:pointer}.primary{background:#111827;color:#fff}.secondary{background:#e5e7eb;color:#111827}.big{width:100%;font-size:17px;padding:17px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tile{border:0;background:#fff;border-radius:14px;padding:22px 10px;font-size:26px;box-shadow:0 2px 8px #0000000a;cursor:pointer}.tile span{display:block;font-size:14px;font-weight:700;margin-top:8px}.card{background:#fff;border-radius:16px;padding:18px;margin:15px 0;box-shadow:0 2px 10px #0000000b}.activeCard{border-left:5px solid #16a34a}.row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #e5e7eb;padding:13px 2px}.row:last-child{border-bottom:0}.muted{color:#6b7280;font-size:13px}.formrow{display:flex;gap:8px;margin-bottom:16px}.formrow input,.filters input,.filters select{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:9px;background:#fff;font-size:15px}.formrow button{background:#111827;color:#fff;white-space:nowrap}.filters{display:flex;gap:8px;margin-bottom:12px}.filters>*{flex:1}.badge{display:inline-block;background:#e5e7eb;padding:4px 8px;border-radius:99px;font-size:11px;font-weight:700}.danger{color:#b91c1c;border:0;background:transparent;cursor:pointer;font-weight:700}.full{width:100%;margin-top:14px}.sectionHead{display:flex;align-items:center;gap:10px;margin-bottom:18px}.sectionHead h2{margin:0}.back{border:0;background:#e5e7eb;border-radius:9px;padding:9px 12px;font-size:18px;cursor:pointer}.planrow{background:#fff;border-radius:14px;padding:16px;margin:9px 0;box-shadow:0 2px 8px #0000000a}.planrow h3{margin:0 0 5px}.hours{font-size:22px;font-weight:800}.qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.qr{background:#fff;padding:14px;border-radius:14px;text-align:center}.qr img{width:140px;height:140px;max-width:100%}.scanner{position:fixed;inset:0;background:#111827;color:#fff;z-index:20;padding:0 16px 20px;overflow:auto}.scanner .sectionHead{max-width:900px;margin:0 auto;padding:18px 0}.scanner .back{background:#374151;color:#fff}.cameraWrap{max-width:620px;margin:10px auto;position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:1/1}.cameraWrap video{width:100%;height:100%;object-fit:cover}.scanFrame{position:absolute;inset:18%;border:3px solid #fff;border-radius:18px;box-shadow:0 0 0 999px #0005}.scanner p{max-width:620px;margin:14px auto}.scanner .full{max-width:620px;display:block;margin-left:auto;margin-right:auto}.hint{font-size:12px;opacity:.65}.hidden{display:none!important}#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#111827;color:#fff;padding:11px 15px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:50}#toast.show{opacity:1}nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;height:64px;display:flex;justify-content:center;gap:34px;z-index:10}nav button{border:0;background:none;font-size:20px;color:#374151;cursor:pointer}nav span{display:block;font-size:10px;margin-top:2px}@media(max-width:600px){.formrow{flex-wrap:wrap}.formrow input{min-width:42%}.formrow button{width:100%}.grid2{gap:9px}.hero h1{font-size:26px}.filters{flex-wrap:wrap}}

.planrow{cursor:pointer;transition:.15s}.planrow:active{transform:scale(.995)}.planrow .planAction{margin-top:12px;font-size:12px;font-weight:700;opacity:.55}








/* v0.32 - echte 3-weken planning, bestaande kaartstijl */
.existingPlanningWeekHeader{
  position:sticky;
  top:96px;
  z-index:6;
  background:#fff;
  padding:10px 12px;
  margin:0 0 10px;
  border-bottom:1px solid #e5e7eb;
  font-size:15px;
  font-weight:800;
}

.planningWeekBlock{
  margin-bottom:18px;
}

.planningWeekMarker{
  font-size:12px;
  font-weight:800;
  color:#6b7280;
  padding:8px 4px 4px;
}

.planningDayBlock{
  margin-bottom:14px;
}

.planningDaySummary{
  margin-bottom:8px;
}

#planning .planrow{
  cursor:default !important;
}


/* v0.33 - planningssoort uit Excel-kleur */
.planBadges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:7px 0 3px;
}
.planTypeBadge{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#111827;
  border:1px solid rgba(0,0,0,.12);
}
.planDeadlineBadge{
  background:#ef4444;
  color:#fff;
}


/* v0.34 - planningskleuren ook op het startscherm */
.homePlanRow{
  align-items:flex-start;
}
.homePlanRow .planBadges{
  margin-top:6px;
  margin-bottom:0;
}

/* v0.35 - leveringen als losse dagkopjes zonder uren */
.deliveryNotices,.homeDeliveryNotices{display:flex;flex-direction:column;gap:6px;margin:7px 0 9px}
.deliveryNotice{display:flex;align-items:flex-start;gap:8px;background:#fff;border:1px solid #e5e7eb;border-left:5px solid #d1d5db;border-radius:10px;padding:8px 10px}
.deliveryDot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;margin-top:4px}
.homeDeliveryNotice{display:flex;justify-content:space-between;gap:8px;border-left:5px solid #d1d5db;padding:6px 8px;background:#f9fafb;border-radius:7px;font-size:12px}

.companyChoice{margin-bottom:12px}.companyButtons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:7px 0}
.companyButton{border:1px solid #d1d5db;background:#fff;border-radius:10px;padding:10px 8px;font-weight:800}
.companyButton.active{border:2px solid #111827;background:#f3f4f6}
@media(max-width:520px){.companyButtons{grid-template-columns:1fr}}

/* v0.40 - app pas zichtbaar na medewerkerscan */
.employeeGate{
  max-width:680px;
  margin:20px auto;
}
.gateCard{
  text-align:center;
}
.gateCard h2{
  margin-top:0;
}

/* v0.41 - onderste navigatie volledig vergrendeld voor medewerkerscan */
.loginLocked{
  display:none !important;
  pointer-events:none !important;
}

/* v0.44 - bedrijf duidelijk in header */
.headerLoggedCompany{
  font-size:12px;
  font-weight:800;
  margin-top:2px;
  white-space:nowrap;
}

/* v0.47 - loginstatus op één regel */
.headerLoginLine{
  display:block;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}


/* v0.48 - beheerder kan op pc inloggen zonder QR */
.adminGateDivider{
  margin:12px 0 4px;
  color:#6b7280;
  font-size:12px;
  font-weight:700;
}
.adminGateLogin{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #e5e7eb;
}
.adminGateLogin input{
  width:100%;
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:16px;
  margin-bottom:8px;
}


/* v0.51 - beheerder krijgt alleen beheeromgeving */
.adminOnlyMode nav,
.adminOnlyMode .bottomNav,
.adminOnlyMode .bottom-nav,
.adminOnlyMode .tabbar,
.adminOnlyMode .tabs{
  display:none !important;
}

/* v0.54 - bovenste startblok toont alleen leveringen vandaag */
.deliveryHero{
  text-align:left;
}
.deliveryTodayHero{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.deliveryHeroItem{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:9px 10px;
  border-left:5px solid #d1d5db;
  background:#fff;
  border-radius:8px;
  font-size:13px;
}
.deliveryHeroItem span{
  color:#6b7280;
  white-space:nowrap;
}
.deliveryHeroEmpty{
  padding:10px 0 2px;
  font-size:14px;
  color:#374151;
}


/* v0.69.11 - Vrij deze week */
#weekLeaveCard{
  margin-top:12px;
}
.weekLeaveList{
  margin-top:8px;
}
.weekLeaveRow{
  display:flex;
  gap:8px;
  align-items:baseline;
  padding:7px 0;
  border-top:1px solid rgba(0,0,0,.08);
}
.weekLeaveRow:first-child{
  border-top:0;
}
.weekLeaveName{
  font-weight:700;
}
.weekLeaveDate{
  color:var(--muted, #666);
}


/* v0.69.22 - medewerkerplanning exact in Beheer-stijl */
.employeePlanningCard{
  overflow:hidden;
}
.employeePlanningItem{
  display:grid;
  grid-template-columns:minmax(78px,110px) minmax(90px,.7fr) minmax(150px,1.5fr) minmax(105px,145px);
  gap:10px;
  align-items:center;
  padding:9px 10px;
  margin:6px 0;
  background:#f7f8fa;
  border-radius:10px;
}
.employeePlanningCard .employeePlanningItem:has(.employeePlanningStart){
  grid-template-columns:minmax(78px,110px) minmax(90px,.7fr) minmax(150px,1.5fr) minmax(105px,145px) minmax(120px,145px);
}
.employeePlanningBadge{
  display:inline-block;
  width:max-content;
  max-width:100%;
  padding:5px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid #0002;
}
.employeePlanningStart{
  width:100%;
  min-height:42px;
  white-space:nowrap;
}
@media(max-width:760px){
  .employeePlanningItem,
  .employeePlanningCard .employeePlanningItem:has(.employeePlanningStart){
    grid-template-columns:minmax(72px,90px) minmax(0,1fr);
    gap:4px 10px;
    align-items:center;
  }
  .employeePlanningItem > strong{
    grid-column:1;
    grid-row:1;
  }
  .employeePlanningItem > span:nth-of-type(1){
    grid-column:2;
    grid-row:1;
    font-weight:700;
  }
  .employeePlanningItem > span:nth-of-type(2){
    grid-column:1 / -1;
    grid-row:2;
    color:#65717d;
  }
  .employeePlanningItem > span:nth-of-type(3){
    grid-column:1;
    grid-row:3;
  }
  .employeePlanningStart{
    grid-column:2;
    grid-row:3;
    justify-self:end;
    width:auto;
    min-width:125px;
  }
}

/* v0.69.66 uniforme planning */
.planningUnifiedItem,.employeePlanningItem,#planning .planrow{background:#f7f8fa;border-radius:10px;box-shadow:none;}
.workedHours{color:#4b5563;font-size:12px;}
.homePlanRow{background:#f7f8fa;border-radius:10px;margin:7px 0;padding:11px 10px;border-bottom:0;}
.planningDaySummary{font-weight:800;}
@media(min-width:761px){.planningUnifiedItem{grid-template-columns:minmax(95px,130px) minmax(120px,1fr) minmax(120px,1fr) minmax(140px,210px) auto;}}


/* v0.69.69 - planning medewerker/start exact in Beheer-stijl */
.employeePlanningDay,.homePlanningDay{
  border-top:1px solid #e1e5e9;
  padding:12px 0 4px;
  margin:0;
}
.employeePlanningDay:first-child,.homePlanningDay:first-child{border-top:0}
.employeePlanningDate{
  font-weight:800;
  font-size:18px;
  margin:0 0 8px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.planningDaySummary{display:none!important}
.employeePlanningItem,.planningUnifiedItem,.homePlanRow{
  display:grid;
  grid-template-columns:minmax(95px,130px) minmax(120px,1fr) minmax(120px,1fr) minmax(160px,220px);
  gap:10px;
  align-items:center;
  padding:9px 10px;
  margin:6px 0;
  background:#f7f8fa;
  border-radius:10px;
  box-shadow:none;
}
.employeePlanningItem:has(.planningActions),.homePlanRow:has(.planningActions){
  grid-template-columns:minmax(95px,130px) minmax(120px,1fr) minmax(120px,1fr) minmax(160px,220px);
}
.planningHoursLine{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  align-items:center;
  margin-top:6px;
  font-size:12px;
  color:#4b5563;
  line-height:1.35;
}
.planningHoursLine .workedHours{font-size:12px}
.planningActions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}
.planningActions .employeePlanningStart,.planningActions .vdiPlanRegister,.planningActions .vdwPlanRegister{
  width:auto;
  min-height:38px;
  padding:9px 12px;
  white-space:nowrap;
}
.homePlanRow .planBadges{margin:0}
@media(max-width:760px){
  .employeePlanningDate{font-size:17px;margin-bottom:8px}
  .employeePlanningItem,.planningUnifiedItem,.homePlanRow,
  .employeePlanningItem:has(.planningActions),.homePlanRow:has(.planningActions){
    grid-template-columns:1fr;
    gap:4px;
    align-items:start;
    padding:12px 10px;
  }
  .employeePlanningItem > strong,.homePlanRow > strong,
  .employeePlanningItem > span:nth-of-type(1),.homePlanRow > span:nth-of-type(1),
  .employeePlanningItem > span:nth-of-type(2),.homePlanRow > span:nth-of-type(2),
  .employeePlanningItem > span:nth-of-type(3),.homePlanRow > span:nth-of-type(3){
    grid-column:1!important;
    grid-row:auto!important;
  }
  .employeePlanningItem > span:nth-of-type(1),.homePlanRow > span:nth-of-type(1){font-weight:400}
  .employeePlanningItem > span:nth-of-type(2),.homePlanRow > span:nth-of-type(2){color:#65717d}
  .planningActions{grid-column:1; width:100%; margin-top:7px}
  .planningActions .employeePlanningStart,.planningActions .vdiPlanRegister,.planningActions .vdwPlanRegister{
    width:auto; min-width:0;
  }
}

/* v0.69.69 - startknoppen rustiger onder planningkaart */
.planningActions{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid #e6e9ed;
  justify-content:flex-end;
  align-items:center;
}
.planningActions .employeePlanningStart,
.planningActions .vdiPlanRegister,
.planningActions .vdwPlanRegister{
  min-height:34px;
  padding:7px 11px;
  font-size:13px;
  line-height:1.2;
}
@media(max-width:760px){
  .planningActions{
    justify-content:flex-end;
    margin-top:9px;
    padding-top:8px;
  }
  .planningActions .employeePlanningStart,
  .planningActions .vdiPlanRegister,
  .planningActions .vdwPlanRegister{
    width:auto;
    max-width:100%;
  }
}


/* v0.69.71 - vaste kaartopbouw: info -> uren -> acties */
.planningUnifiedItem,
.employeePlanningItem,
.homePlanRow{
  display:grid;
  grid-template-columns:minmax(95px,130px) minmax(120px,1fr) minmax(120px,1fr) minmax(170px,230px);
  gap:8px 12px;
  align-items:start;
}
.planningUnifiedItem > span:nth-of-type(3),
.employeePlanningItem > span:nth-of-type(3),
.homePlanRow > span:nth-of-type(3){
  min-width:0;
}
.planningHoursLine{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:4px 10px !important;
  width:100% !important;
  margin-top:7px !important;
  line-height:1.35 !important;
}
.planningHoursLine > span,
.planningHoursLine .workedHours{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  margin:0 !important;
}
.planningActions{
  grid-column:1 / -1 !important;
  position:static !important;
  width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
  margin:8px 0 0 !important;
  padding:9px 0 0 !important;
  border-top:1px solid #e6e9ed !important;
}
.planningActions .employeePlanningStart,
.planningActions .vdiPlanRegister,
.planningActions .vdwPlanRegister{
  position:static !important;
  float:none !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:36px !important;
  padding:8px 12px !important;
  margin:0 !important;
  white-space:normal !important;
  text-align:center !important;
  line-height:1.2 !important;
}
@media(max-width:760px){
  .planningUnifiedItem,
  .employeePlanningItem,
  .homePlanRow,
  .employeePlanningItem:has(.planningActions),
  .homePlanRow:has(.planningActions){
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
    padding:12px 10px !important;
  }
  .planningHoursLine{
    margin-top:8px !important;
    gap:3px 8px !important;
  }
  .planningActions{
    justify-content:stretch !important;
    margin-top:9px !important;
    padding-top:9px !important;
  }
  .planningActions .employeePlanningStart,
  .planningActions .vdiPlanRegister,
  .planningActions .vdwPlanRegister{
    width:100% !important;
    display:block !important;
  }
}


/* v0.69.73 - VDW informatief Inkomend/Uitgaand voor Kyano en Niels */
#vdwLogisticsCard{margin-top:12px}
.vdwLogisticsGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.vdwLogisticsSection{min-width:0;padding:10px 12px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px}
.vdwLogisticsSection>strong{display:block;margin-bottom:5px}
.vdwLogisticsRow{display:grid;grid-template-columns:135px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid rgba(0,0,0,.08);align-items:start}
.vdwLogisticsRow:first-child{border-top:0}
.vdwLogisticsDate{font-size:12px;color:var(--muted,#666);white-space:nowrap}
.vdwLogisticsArticle{font-weight:600;overflow-wrap:anywhere}
.vdwLogisticsEmpty{padding:8px 0;color:var(--muted,#666);font-size:13px}
@media(max-width:760px){.vdwLogisticsGrid{grid-template-columns:1fr}.vdwLogisticsRow{grid-template-columns:1fr;gap:2px}}