:root{--bg:#090909;--panel:#141414;--line:#303030;--text:#f7f7f7;--muted:#999;--yellow:#f2b705;--green:#57d487;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}
.topbar{height:76px;padding:0 24px;border-bottom:1px solid #222;display:flex;align-items:center;justify-content:space-between;background:#070707;position:sticky;top:0;z-index:10}
.brand{font-weight:950;letter-spacing:1px}.sub{color:var(--yellow);font-size:11px;letter-spacing:2px;margin-top:3px}
.shell{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 76px)}
.nav{padding:22px 14px;border-right:1px solid #222;background:#0d0d0d;display:flex;flex-direction:column;gap:7px}
.navbtn{border:0;border-radius:10px;background:transparent;color:#aaa;text-align:left;padding:12px;font-weight:800;cursor:pointer}.navbtn.active{background:#2f2500;color:var(--yellow)}.navbtn:hover{background:#171717;color:#fff}
main{padding:28px}.view{max-width:1120px;margin:auto}.hidden{display:none!important}
.heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}h1,h2,h3{margin:0}.heading h1{font-size:32px}.eyebrow{margin:0 0 7px;color:var(--yellow);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:900}.muted{color:var(--muted)}
.primary,.secondary{border-radius:11px;padding:12px 16px;font-weight:900;cursor:pointer}.primary{border:0;background:linear-gradient(135deg,var(--yellow),#ffd45a);color:#111}.secondary{border:1px solid #5f4b00;background:#171717;color:var(--yellow)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.kpis article,.panel,.card{background:linear-gradient(180deg,#171717,#101010);border:1px solid #2d2d2d;border-radius:15px}.kpis article{padding:17px}.kpis span{color:#999;font-size:12px}.kpis strong{display:block;color:var(--yellow);font-size:30px;margin-top:8px}
.twocol{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}.panel{padding:20px}.panelhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.linkbtn{background:none;border:0;color:var(--yellow);font-weight:900;cursor:pointer}
.cards{display:grid;gap:11px}.card{padding:15px;display:flex;justify-content:space-between;align-items:center;gap:16px}.card p{margin:5px 0 0;color:#999}.tag{background:#332700;color:var(--yellow);border-radius:999px;padding:6px 9px;font-size:11px;font-weight:900}.green{color:var(--green);font-weight:900}
.form label{display:flex;flex-direction:column;gap:8px;font-weight:800;font-size:13px;margin-top:16px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px}input,select,textarea{width:100%;border:1px solid #393939;background:#0d0d0d;color:#fff;border-radius:11px;padding:13px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--yellow)}
.jobpack{margin-top:24px;padding-top:20px;border-top:1px solid #2a2a2a}.jobpack small{color:#888;font-size:12px}.uploads{display:grid;grid-template-columns:1fr 1fr;gap:10px}.uploads label{border:1px dashed #444;border-radius:12px;padding:14px}.uploads input{padding:8px;margin-top:5px}.submit{width:100%;margin-top:24px;min-height:56px}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
@media(max-width:850px){.shell{display:block}.nav{flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid #222}.kpis,.twocol,.grid2,.uploads{grid-template-columns:1fr 1fr}}
@media(max-width:600px){main{padding:16px}.kpis,.twocol,.grid2,.uploads{grid-template-columns:1fr}.heading{flex-direction:column}.topbar{padding:0 14px}}

.danger{
  border:1px solid #713a3a;
  background:#221010;
  color:#ff8080;
  border-radius:11px;
  padding:11px 14px;
  font-weight:900;
  cursor:pointer;
}
.compact{margin-bottom:8px}
.vehicle-filters{display:flex;gap:8px;margin-bottom:16px}
.vehicle-filter{
  border:1px solid #303030;
  background:#151515;
  color:#aaa;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:800;
}
.vehicle-filter.active{background:#332700;color:var(--yellow);border-color:#6c5500}
.vehicle-actions{display:flex;align-items:center;gap:10px}
.report-card{cursor:pointer}
.report-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  max-width:1050px;
  margin:0 auto;
}
.report-detail-grid article{
  background:linear-gradient(180deg,#111,#0d0d0d);
  border:1px solid #2b2b2b;
  border-radius:11px;
  padding:12px 14px;
  min-width:0;
}
.report-detail-grid article.wide{grid-column:1/-1}
.report-detail-grid article.report-section-card{min-height:118px}
.report-detail-grid span{display:block;color:#8f8f8f;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:7px}
.report-detail-grid p{margin:0;color:#ddd}
.report-notes{line-height:1.5;white-space:pre-wrap}
.handover-report{display:grid;gap:5px;color:#d8d8d8}
.handover-report>div{display:flex;align-items:flex-start;gap:7px;padding:6px 8px;background:#151515;border:1px solid #252525;border-radius:8px;line-height:1.25}
.handover-report>div::first-letter{color:#66db92}
.movement-timings-report>div{color:#ddd}
.generator-timeline{display:grid;gap:5px}
.generator-timeline .generator-event{padding:6px 8px!important;border-radius:8px!important;margin:0!important}
.report-actions{margin-top:14px;max-width:1050px;margin-left:auto;margin-right:auto}
.report-route-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.report-route-status{color:#d7d7d7;font-size:12px;font-weight:700}
.report-route-legend{display:flex;gap:8px;flex-wrap:wrap}
.route-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #343434;border-radius:999px;background:linear-gradient(180deg,#171717,#111);color:#ededed;font-size:12px;font-weight:800;letter-spacing:.01em;box-shadow:0 1px 0 rgba(255,255,255,.025),0 4px 12px rgba(0,0,0,.14)}
.route-chip::before{content:"";width:10px;height:10px;border-radius:999px;display:inline-block;background:#ffca28;box-shadow:0 0 0 3px rgba(255,202,40,.10)}
.route-chip.outbound{border-color:rgba(74,168,255,.32);background:linear-gradient(180deg,rgba(74,168,255,.10),#111)}
.route-chip.outbound::before{background:#4aa8ff;box-shadow:0 0 0 3px rgba(74,168,255,.13)}
.route-chip.return{border-color:rgba(168,85,247,.40);background:linear-gradient(180deg,rgba(168,85,247,.12),#111)}
.route-chip.return::before{background:#a855f7;box-shadow:0 0 0 3px rgba(168,85,247,.15)}
.route-chip.moving{border-color:rgba(255,159,67,.34);background:linear-gradient(180deg,rgba(255,159,67,.10),#111)}
.route-chip.moving::before{background:#ff9f43;box-shadow:0 0 0 3px rgba(255,159,67,.13)}
.report-route-map{height:320px;border-radius:12px;overflow:hidden;border:1px solid #2b2b2b;background:#101010}
.report-route-map .leaflet-container{height:100%;width:100%;background:#0e0e0e}
.report-route-map .leaflet-control-attribution{font-size:10px}
.ww-route-pin{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.ww-route-pin.start{background:#4aa8ff}
.ww-route-pin.finish{background:#66db92}
@media(max-width:760px){
  .report-detail-grid{grid-template-columns:1fr;max-width:none}
  .report-detail-grid article.wide{grid-column:auto}
  .report-detail-grid article.report-section-card{min-height:0}
  .report-route-map{height:260px}
}

/* Version 3 — live fleet map */
.kpis .kpi-card-button{
  background:linear-gradient(180deg,#171717,#101010);
  border:1px solid #2d2d2d;
  border-radius:15px;
  padding:17px;
  text-align:left;
  color:inherit;
  cursor:pointer;
}
.kpis .kpi-card-button:hover{
  border-color:#665000;
}
.kpis .kpi-card-button span{display:block;color:#999;font-size:12px}
.kpis .kpi-card-button strong{display:block;color:var(--yellow);font-size:30px;margin-top:8px}
.fleet-map-panel{margin-bottom:18px;position:relative}
.map-panel-head{align-items:flex-end}
.locate-control{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:#aaa;
  font-size:12px;
  font-weight:800;
}
.locate-control select{min-width:220px}
.fleet-map{
  position:relative;
  height:390px;
  border-radius:16px;
  overflow:hidden;
  background:
    linear-gradient(35deg,rgba(255,255,255,.025) 25%,transparent 25%) 0 0/36px 36px,
    linear-gradient(145deg,rgba(255,255,255,.018) 25%,transparent 25%) 0 0/44px 44px,
    #121913;
  border:1px solid #2e392f;
}
.map-road{
  position:absolute;
  background:#3b3b38;
  border:2px solid #575750;
  border-radius:999px;
  opacity:.9;
}
.road-one{width:120%;height:18px;left:-10%;top:54%;transform:rotate(-8deg)}
.road-two{width:90%;height:14px;left:4%;top:34%;transform:rotate(22deg)}
.road-three{width:72%;height:12px;left:28%;top:73%;transform:rotate(-28deg)}
.map-water{
  position:absolute;
  width:130%;
  height:34px;
  left:-15%;
  top:62%;
  transform:rotate(-5deg);
  background:#173349;
  border-radius:50%;
  opacity:.8;
}
.map-label{
  position:absolute;
  color:#8da08d;
  font-size:12px;
  font-weight:800;
}
.label-london{left:56%;top:42%}
.label-pinewood{left:18%;top:20%}
.label-richmond{left:72%;top:66%}
.map-marker{
  position:absolute;
  transform:translate(-50%,-50%);
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:4;
}
.marker-dot{
  width:20px;
  height:20px;
  border:4px solid #fff;
  border-radius:50%;
  display:block;
  margin:auto;
  box-shadow:0 2px 12px rgba(0,0,0,.55);
}
.map-marker.to-location .marker-dot{background:#38c774}
.map-marker.on-location .marker-dot{background:#e5a828}
.map-marker.to-base .marker-dot{background:#4c96f5}
.map-marker.complete .marker-dot{background:#7bcf7b}
.marker-label{
  display:block;
  margin-top:7px;
  padding:5px 8px;
  background:rgba(5,5,5,.88);
  color:#fff;
  border:1px solid #3d3d3d;
  border-radius:8px;
  white-space:nowrap;
  font-size:11px;
  font-weight:900;
}
.map-marker.focused .marker-dot{
  outline:5px solid rgba(242,183,5,.25);
  transform:scale(1.18);
}
.map-vehicle-card{
  position:absolute;
  right:34px;
  bottom:34px;
  width:min(370px,calc(100% - 68px));
  background:#0d0d0d;
  border:1px solid #655000;
  border-radius:15px;
  padding:18px;
  z-index:6;
  box-shadow:0 20px 50px rgba(0,0,0,.55);
}
.map-card-close{
  border:0;
  background:#222;
  color:#fff;
  width:34px;
  height:34px;
  border-radius:50%;
  cursor:pointer;
  font-size:20px;
}
.map-vehicle-card>.map-card-close{position:absolute;right:12px;top:12px}
.map-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin:16px 0;
}
.map-card-grid span{display:block;color:#888;font-size:11px;margin-bottom:5px}
.live-status{
  border-radius:999px;
  padding:6px 9px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.live-status.to-location{background:#102c1b;color:#65db91}
.live-status.on-location{background:#362700;color:#f1bd45}
.live-status.to-base{background:#112743;color:#78b2ff}
.live-status.complete{background:#153019;color:#7bdc8a}
.drawer{
  position:fixed;
  top:76px;
  right:0;
  width:min(470px,100%);
  height:calc(100vh - 76px);
  background:#0d0d0d;
  border-left:1px solid #303030;
  z-index:20;
  padding:22px;
  box-shadow:-18px 0 45px rgba(0,0,0,.5);
  overflow:auto;
}
.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.drawer-content{display:grid;gap:10px}
.drawer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px;
  border:1px solid #2e2e2e;
  border-radius:13px;
  background:#141414;
}
.drawer-row h3{font-size:16px}
.drawer-row p{margin:5px 0 0;color:#949494;font-size:13px}
@media(max-width:700px){
  .fleet-map{height:330px}
  .map-panel-head{align-items:stretch;flex-direction:column}
  .locate-control select{min-width:0}
  .map-vehicle-card{right:18px;bottom:18px;width:calc(100% - 36px)}
  .map-card-grid{grid-template-columns:1fr}
}

/* Version 4 — Today / Tomorrow / Future jobs */
.job-date-tabs{
  display:flex;
  gap:9px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.job-date-tab{
  border:1px solid #303030;
  background:#151515;
  color:#aaa;
  border-radius:999px;
  padding:10px 14px;
  font-weight:850;
  cursor:pointer;
}

.job-date-tab span{
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:24px;
  margin-left:7px;
  padding:0 6px;
  border-radius:999px;
  background:#252525;
  color:#ddd;
  font-size:11px;
}

.job-date-tab.active{
  background:#332700;
  color:var(--yellow);
  border-color:#6d5700;
}

.job-date-tab.active span{
  background:#5b4700;
  color:#ffd65f;
}

.job-date-card{
  align-items:flex-start;
}

.job-date-line{
  color:var(--yellow);
  font-size:12px;
  font-weight:900;
  margin-bottom:7px;
}

.empty-jobs{
  padding:34px;
  border:1px dashed #363636;
  border-radius:15px;
  text-align:center;
  color:#888;
}

.empty-jobs h3{
  color:#ddd;
  margin-bottom:7px;
}

.empty-jobs p{
  margin:0;
}

/* Version 5 — obvious calendar date picker */
.date-picker-control{
  display:grid;
  grid-template-columns:1fr 48px;
  gap:8px;
  align-items:stretch;
}

.date-picker-control input{
  min-width:0;
  cursor:pointer;
  color-scheme:dark;
}

.calendar-button{
  border:1px solid #5f4b00;
  border-radius:11px;
  background:#1a1608;
  color:var(--yellow);
  font-size:20px;
  cursor:pointer;
  display:grid;
  place-items:center;
}

.calendar-button:hover{
  background:#2c2308;
  border-color:#8a6c00;
}

.calendar-button:active{
  transform:scale(.97);
}

/* Version 7 — clickable report inbox */
.drawer-report-row{
  width:100%;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.drawer-report-row:hover{
  border-color:#6a5300;
  background:#19170f;
}

.drawer-report-row:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
}

.drawer-report-action{
  display:flex;
  align-items:center;
  gap:10px;
}

.drawer-chevron{
  color:var(--yellow);
  font-size:28px;
  line-height:1;
  font-weight:400;
}

/* Version 8 — clickable dashboard drawer items */
.drawer-click-row{
  width:100%;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.drawer-click-row:hover{
  border-color:#6a5300;
  background:#19170f;
}

.drawer-click-row:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
}

.drawer-row-action{
  display:flex;
  align-items:center;
  gap:10px;
}

.highlight-card{
  border-color:var(--yellow)!important;
  box-shadow:0 0 0 3px rgba(242,183,5,.18);
  transition:box-shadow .2s ease,border-color .2s ease;
}

.profile-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.profile-list-card{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) auto 22px;align-items:center;gap:14px;padding:15px;border:1px solid #2d2d2d;border-radius:15px;background:linear-gradient(180deg,#171717,#101010);color:#fff;text-align:left;cursor:pointer;font:inherit}.profile-list-card:hover{border-color:#6a5300;background:#18160e}.mini-avatar,.mini-vehicle{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#2d2506;color:var(--yellow);font-weight:950}.mini-vehicle{border-radius:13px;font-size:24px}.profile-list-copy strong,.profile-list-copy small,.profile-list-stat b,.profile-list-stat small{display:block}.profile-list-copy small{color:#919191;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-list-stat{text-align:right}.profile-list-stat b{color:var(--yellow);font-size:20px}.profile-list-stat small{color:#858585;margin-top:3px}.profile-chevron{color:var(--yellow);font-size:28px}.profile-detail-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px}.profile-summary{text-align:center}.profile-avatar,.vehicle-photo-placeholder{width:150px;height:150px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:#2d2506;border:2px solid #655000;color:var(--yellow);font-size:44px;font-weight:950}.vehicle-photo-placeholder{width:100%;height:180px;border-radius:14px;font-size:17px;background:#111;color:#777;border:1px dashed #464646}.profile-summary>strong,.profile-summary>span{display:block}.profile-summary>strong{font-size:21px}.profile-summary>span{color:#8f8f8f;margin-top:5px}.profile-stat{margin-top:22px;padding:16px;border-radius:13px;background:#0d0d0d;border:1px solid #292929}.profile-stat small,.profile-stat b{display:block}.profile-stat small{color:#8b8b8b}.profile-stat b{color:var(--yellow);font-size:34px;margin-top:7px}.profile-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.profile-info-grid article{padding:15px;border:1px solid #2d2d2d;border-radius:13px;background:#101010}.profile-info-grid article.wide{grid-column:1/-1}.profile-info-grid span{display:block;color:#8f8f8f;font-size:12px;margin-bottom:7px}.licence-upload-grid,.licence-preview-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.upload-panel,.licence-preview{padding:15px;border:1px dashed #444;border-radius:12px;background:#101010;color:#fff;text-align:left}.licence-preview{min-height:100px}.file-name{color:#8e8e8e;font-size:12px;margin-top:7px}.compact-actions{margin-top:0}.vehicle-status-pill{border-radius:999px;padding:7px 10px;font-size:11px;font-weight:900}.vehicle-status-pill.available{background:#102c1b;color:#66db92}.vehicle-status-pill.on-job{background:#332700;color:var(--yellow)}.vehicle-status-pill.unavailable{background:#321414;color:#ff8585}@media(max-width:900px){.profile-card-grid{grid-template-columns:1fr}.profile-detail-layout{grid-template-columns:1fr}}@media(max-width:620px){.profile-list-card{grid-template-columns:46px minmax(0,1fr) 20px}.profile-list-stat{grid-column:2;text-align:left}.profile-info-grid,.licence-upload-grid,.licence-preview-row{grid-template-columns:1fr}}

/* Version 10 — homepage layout and inline profile editing */
.home-job-panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:18px;
}

.home-map-bottom{
  margin-top:0;
}

.inline-field{
  width:100%;
  margin-top:8px;
}

.profile-stat .inline-field{
  text-align:center;
  font-size:22px;
  font-weight:900;
}

.profile-info-grid textarea.inline-field{
  resize:vertical;
}

@media(max-width:820px){
  .home-job-panels{
    grid-template-columns:1fr;
  }
}

/* Version 12 — date-grouped dashboard */
.home-job-panels{
  grid-template-columns:1fr 1fr;
}

.future-jobs-panel{
  grid-column:1 / -1;
  min-height:230px;
}

.future-jobs-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}

.future-job-card{
  min-height:110px;
  align-items:flex-start;
}

.drawer-job-group{
  display:grid;
  gap:9px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid #292929;
}

.drawer-job-group:last-child{
  border-bottom:0;
  margin-bottom:0;
}

.drawer-group-title{
  color:var(--yellow);
  font-size:15px;
  margin:0 0 3px;
}

.drawer-empty{
  margin:0;
  padding:8px 2px;
}

@media(max-width:820px){
  .home-job-panels,
  .future-jobs-grid{
    grid-template-columns:1fr;
  }
  .future-jobs-panel{
    grid-column:auto;
  }
}

/* Version 13 — Booking Calendar */
.calendar-page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:18px;
}

.calendar-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
  padding:14px 16px;
}

.calendar-nav-controls{
  display:flex;
  align-items:center;
  gap:9px;
}

.calendar-nav-controls h2{
  margin-left:8px;
  min-width:180px;
}

.calendar-icon-btn{
  width:38px;
  height:38px;
  border:1px solid #383838;
  background:#151515;
  color:#fff;
  border-radius:10px;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

.calendar-view-switch{
  display:flex;
  background:#111;
  border:1px solid #303030;
  border-radius:11px;
  padding:3px;
}

.calendar-view-btn{
  border:0;
  background:transparent;
  color:#929292;
  border-radius:8px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
}

.calendar-view-btn.active{
  background:#302600;
  color:var(--yellow);
}

.calendar-shell{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:14px;
}

.calendar-sidebar{
  padding:16px;
  height:max-content;
}

.calendar-sidebar h3{
  font-size:14px;
  margin:0 0 12px;
}

.calendar-sidebar label{
  display:flex;
  align-items:center;
  gap:9px;
  color:#bbb;
  margin:10px 0;
  font-size:13px;
}

.calendar-key{
  border-top:1px solid #292929;
  margin-top:18px;
  padding-top:16px;
  display:grid;
  gap:10px;
  color:#aaa;
  font-size:12px;
}

.calendar-key h3{
  margin-bottom:2px;
}

.calendar-key>div{
  display:flex;
  align-items:center;
  gap:8px;
}

.calendar-key-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

.calendar-key-dot.confirmed,.calendar-event.confirmed,.calendar-agenda-row.confirmed{--event:#477be8}
.calendar-key-dot.ready,.calendar-event.ready,.calendar-agenda-row.ready{--event:#a98ee6}
.calendar-key-dot.awaiting,.calendar-event.awaiting,.calendar-agenda-row.awaiting{--event:#45a178}
.calendar-key-dot.invoiced,.calendar-event.invoiced,.calendar-agenda-row.invoiced{--event:#bf577f}
.calendar-key-dot.mot,.calendar-event.mot,.calendar-agenda-row.mot{--event:#e0a43a}
.calendar-key-dot{background:var(--event)}

.calendar-main{
  min-width:0;
}

.calendar-month-view{
  border:1px solid #2e2e2e;
  border-radius:15px;
  overflow:hidden;
  background:#0d0d0d;
}

.calendar-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border-bottom:1px solid #2e2e2e;
  background:#121212;
}

.calendar-weekdays div{
  padding:11px 8px;
  color:#9a9a9a;
  text-align:center;
  font-size:12px;
  font-weight:900;
}

.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
}

.calendar-day{
  min-height:126px;
  padding:7px;
  border-right:1px solid #252525;
  border-bottom:1px solid #252525;
  background:#101010;
  cursor:pointer;
}

.calendar-day:nth-child(7n){
  border-right:0;
}

.calendar-day.other-month{
  background:#0b0b0b;
  opacity:.52;
}

.calendar-day.today{
  box-shadow:inset 0 0 0 2px var(--yellow);
}

.calendar-day-number{
  text-align:right;
  color:#bdbdbd;
  font-size:12px;
  font-weight:850;
  margin-bottom:5px;
}

.calendar-day.today .calendar-day-number{
  color:#111;
  background:var(--yellow);
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  margin-left:auto;
}

.calendar-day-events{
  display:grid;
  gap:4px;
}

.calendar-event{
  --event:#477be8;
  width:100%;
  border:0;
  border-radius:5px;
  background:color-mix(in srgb,var(--event) 52%,#111);
  color:#fff;
  padding:4px 5px;
  font-size:10px;
  line-height:1.2;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  border-left:3px solid var(--event);
}

.calendar-more{
  border:0;
  background:transparent;
  color:#aaa;
  font-size:10px;
  font-weight:850;
  text-align:left;
  cursor:pointer;
  padding:2px;
}

.calendar-agenda{
  display:grid;
  gap:14px;
}

.calendar-agenda-day{
  border:1px solid #2d2d2d;
  background:#101010;
  border-radius:14px;
  padding:14px;
}

.calendar-agenda-day>h3{
  color:var(--yellow);
  font-size:14px;
  margin-bottom:10px;
}

.calendar-agenda-row{
  --event:#477be8;
  width:100%;
  display:grid;
  grid-template-columns:70px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  border:0;
  border-left:4px solid var(--event);
  background:#161616;
  color:#fff;
  text-align:left;
  padding:11px 12px;
  margin-top:7px;
  border-radius:9px;
  cursor:pointer;
}

.calendar-agenda-row small{
  color:#8f8f8f;
}

.calendar-event-card{
  position:fixed;
  right:28px;
  top:110px;
  width:min(430px,calc(100vw - 40px));
  background:#0c0c0c;
  border:1px solid #665100;
  border-radius:16px;
  padding:20px;
  z-index:50;
  box-shadow:0 24px 70px rgba(0,0,0,.65);
}

.calendar-event-card>.map-card-close{
  position:absolute;
  right:12px;
  top:12px;
}

.calendar-event-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  margin:18px 0;
}

.calendar-event-details>div{
  padding:12px;
  border:1px solid #2c2c2c;
  border-radius:11px;
  background:#111;
}

.calendar-event-details>div.wide{
  grid-column:1/-1;
}

.calendar-event-details span{
  display:block;
  color:#8d8d8d;
  font-size:11px;
  margin-bottom:5px;
}

@media(max-width:900px){
  .calendar-shell{grid-template-columns:1fr}
  .calendar-sidebar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 20px;
  }
  .calendar-key{
    grid-column:1/-1;
  }
}

@media(max-width:720px){
  .calendar-page-head,.calendar-toolbar{
    flex-direction:column;
    align-items:stretch;
  }
  .calendar-nav-controls{
    flex-wrap:wrap;
  }
  .calendar-weekdays{
    display:none;
  }
  .calendar-grid{
    display:block;
  }
  .calendar-day{
    min-height:auto;
    border-right:0;
  }
}

/* Version 14 — booking workflow */
#bookingFormView{
  max-width:950px;
}

.calendar-event.awaiting,.calendar-agenda-row.awaiting{
  --event:#45a178;
}

.calendar-event.ready,.calendar-agenda-row.ready{
  --event:#a98ee6;
}

.calendar-event.invoiced,.calendar-agenda-row.invoiced{
  --event:#bf577f;
}

.calendar-event.confirmed,.calendar-agenda-row.confirmed{
  --event:#477be8;
}

/* Version 15 — larger calendar */
.calendar-options-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:10px 14px;margin-bottom:12px;flex-wrap:wrap}
.calendar-inline-filters,.calendar-inline-key{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.calendar-inline-filters label,.calendar-inline-key span{display:flex;align-items:center;gap:6px;color:#aaa;font-size:12px}
.calendar-options-label{color:#ddd!important;font-weight:900;margin-right:2px}
.calendar-shell-wide{display:block!important}.calendar-main{width:100%}.calendar-month-view,.calendar-grid{width:100%}.calendar-day{min-height:148px}.calendar-weekdays div{padding:13px 8px}.calendar-sidebar{display:none!important}
@media(max-width:900px){.calendar-options-bar{align-items:flex-start;flex-direction:column}}
@media(max-width:720px){.calendar-day{min-height:auto}}

/* Version 16 — multi-day + multi-vehicle bookings */
.wide-label{
  grid-column:1/-1;
}

.booking-vehicle-choices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:2px;
}

.booking-vehicle-option{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:10px!important;
  margin:0!important;
  border:1px solid #363636;
  border-radius:11px;
  padding:11px 12px;
  background:#101010;
  cursor:pointer;
}

.booking-vehicle-option:hover{
  border-color:#665000;
}

.booking-vehicle-option input{
  width:auto;
  margin:0;
}

.booking-vehicle-option span,
.booking-vehicle-option strong,
.booking-vehicle-option small{
  display:block;
}

.booking-vehicle-option small{
  color:#8e8e8e;
  margin-top:3px;
}

.field-help{
  color:#858585;
  font-size:11px;
  font-weight:500;
  margin-top:5px;
}

@media(max-width:700px){
  .booking-vehicle-choices{
    grid-template-columns:1fr;
  }
}

/* Version 18 — booking details + confirm as job */
.booking-call-sheet-upload{
  margin-top:16px!important;
  border:1px dashed #444;
  border-radius:12px;
  padding:14px;
  background:#101010;
}

.calendar-event-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

.calendar-event-actions>button:only-child{
  grid-column:1/-1;
}

.job-contact-line,
.job-call-sheet-line{
  margin-top:6px!important;
  font-size:12px;
}

.job-call-sheet-line{
  color:var(--yellow)!important;
}

@media(max-width:600px){
  .calendar-event-actions{
    grid-template-columns:1fr;
  }
}

/* Version 20 — vehicle/driver assignments */
.booking-assignments{
  display:grid;
  gap:9px;
  margin:8px 0 10px;
}

.booking-assignment-row{
  display:grid;
  grid-template-columns:1fr 1fr 42px;
  gap:8px;
  align-items:center;
}

.remove-booking-assignment{
  height:43px;
  border:1px solid #4b3333;
  background:#211111;
  color:#ff8d8d;
  border-radius:10px;
  font-size:22px;
  cursor:pointer;
}

.small-action{
  padding:9px 12px;
  font-size:12px;
}

.field-label{
  display:block;
  font-weight:800;
  font-size:13px;
}

/* Version 20 — continuous multi-day calendar bars */
.calendar-month-view{
  position:relative;
}

.calendar-booking-overlay{
  position:absolute;
  left:0;
  right:0;
  top:39px;
  bottom:0;
  pointer-events:none;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-template-rows:repeat(6,148px);
  z-index:4;
}

.calendar-range-bar{
  --event:#477be8;
  pointer-events:auto;
  align-self:start;
  margin:calc(34px + (var(--range-lane) * 25px)) 4px 0;
  height:21px;
  border:0;
  border-left:4px solid var(--event);
  border-radius:5px;
  background:color-mix(in srgb,var(--event) 56%,#111);
  color:#fff;
  font-size:10px;
  font-weight:750;
  text-align:left;
  padding:3px 7px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  grid-row:calc(var(--range-row) + 1);
  grid-column:calc(var(--range-col-start) + 1) / span var(--range-col-span);
  box-shadow:0 1px 5px rgba(0,0,0,.35);
}

.calendar-range-bar.confirmed{--event:#477be8}
.calendar-range-bar.ready{--event:#a98ee6}
.calendar-range-bar.awaiting{--event:#45a178}
.calendar-range-bar.invoiced{--event:#bf577f}

@media(max-width:720px){
  .calendar-booking-overlay{
    display:none;
  }
  .booking-assignment-row{
    grid-template-columns:1fr;
  }
  .remove-booking-assignment{
    width:100%;
  }
}

/* Version 21 — Option status + popup status editing */
.calendar-key-dot.option,
.calendar-event.option,
.calendar-agenda-row.option,
.calendar-range-bar.option{
  --event:#d88a3d;
}

#calendarEventStatus{
  margin-top:0;
  padding:9px 10px;
}

.calendar-event-actions{
  grid-template-columns:repeat(3,1fr);
}

.job-status-tag.option{
  background:#4a2d12;
  color:#f0ad63;
}
.job-status-tag.confirmed{
  background:#1a2e57;
  color:#8db5ff;
}
.job-status-tag.ready{
  background:#2d2055;
  color:#baa3ff;
}
.job-status-tag.invoiced{
  background:#53233b;
  color:#f1a3c3;
}

@media(max-width:720px){
  .calendar-event-actions{
    grid-template-columns:1fr;
  }
}

/* Version 22 — TBC allocation and grouped calendar jobs */
.booking-assignment-row select option[value=""]{
  color:#999;
}

/* Version 23 — full-width calendar on large desktop screens */
#calendar.view{
  max-width:none;
  width:100%;
}

#calendar .calendar-page-head,
#calendar .calendar-toolbar,
#calendar .calendar-options-bar,
#calendar .calendar-shell{
  width:100%;
  max-width:none;
}

#calendar .calendar-main,
#calendar .calendar-month-view,
#calendar .calendar-agenda{
  width:100%;
  max-width:none;
}

#calendar .calendar-grid{
  width:100%;
}

@media(min-width:1400px){
  main{
    padding-left:22px;
    padding-right:22px;
  }

  #calendar{
    max-width:none!important;
    width:100%!important;
    margin:0!important;
  }

  #calendar .calendar-day{
    min-height:170px;
  }

  #calendar .calendar-booking-overlay{
    grid-template-rows:repeat(6,170px);
  }
}

@media(min-width:1900px){
  #calendar .calendar-day{
    min-height:190px;
  }

  #calendar .calendar-booking-overlay{
    grid-template-rows:repeat(6,190px);
  }

  #calendar .calendar-event,
  #calendar .calendar-range-bar{
    font-size:11px;
  }
}

/* Version 24 — Wagon Wheels calendar status palette */
.calendar-key-dot.option,
.calendar-event.option,
.calendar-agenda-row.option,
.calendar-range-bar.option{
  --event:#2e9f55;
}

.calendar-key-dot.confirmed,
.calendar-event.confirmed,
.calendar-agenda-row.confirmed,
.calendar-range-bar.confirmed{
  --event:#e48632;
}

.calendar-key-dot.details-sent,
.calendar-event.details-sent,
.calendar-agenda-row.details-sent,
.calendar-range-bar.details-sent{
  --event:#cf3f45;
}

.calendar-key-dot.awaiting,
.calendar-event.awaiting,
.calendar-agenda-row.awaiting,
.calendar-range-bar.awaiting{
  --event:#173c78;
}

.calendar-key-dot.ready,
.calendar-event.ready,
.calendar-agenda-row.ready,
.calendar-range-bar.ready{
  --event:#a98ee6;
}

.calendar-key-dot.invoiced,
.calendar-event.invoiced,
.calendar-agenda-row.invoiced,
.calendar-range-bar.invoiced{
  --event:#62a9dd;
}

/* v430 — MOTs must be immediately visible on the dark diary. */
.calendar-key-dot.mot{
  background:#e0a43a;
  border:1px solid #f4c96f;
}
.calendar-event.mot,
.calendar-agenda-row.mot,
.calendar-range-bar.mot{
  --event:#e0a43a;
  border:1px solid #f4c96f;
  box-shadow:0 1px 5px rgba(0,0,0,.35);
}

.job-status-tag.details-sent{
  background:#4a1719;
  color:#ff969a;
}
.job-status-tag.awaiting{
  background:#10294f;
  color:#8cb4f2;
}

/* Version 26 — per-vehicle driver + call time */
.booking-assignment-row{
  grid-template-columns:1fr 1fr 150px 42px;
}

.assignment-summary-list{
  display:grid;
  gap:8px;
}

.assignment-summary-row{
  display:grid;
  grid-template-columns:90px minmax(0,1fr) 120px;
  gap:10px;
  align-items:center;
  padding:9px 10px;
  border:1px solid #2f2f2f;
  border-radius:9px;
  background:#0d0d0d;
}

.assignment-summary-row span{
  margin:0!important;
  color:#ddd!important;
}

.assignment-summary-row b{
  color:var(--yellow);
  text-align:right;
  font-size:12px;
}

.job-allocation-btn{
  margin-top:10px;
  padding:8px 10px;
  font-size:12px;
}

.job-allocation-editor{
  display:grid;
  grid-template-columns:1fr 150px auto;
  gap:8px;
  margin-top:10px;
  padding:10px;
  border:1px solid #363636;
  border-radius:10px;
  background:#0d0d0d;
}

@media(max-width:800px){
  .booking-assignment-row,
  .job-allocation-editor{
    grid-template-columns:1fr;
  }

  .assignment-summary-row{
    grid-template-columns:1fr;
  }

  .assignment-summary-row b{
    text-align:left;
  }
}

/* Version 27 — scrollable, cleaner calendar job popup */
.calendar-event-card{
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 80px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.calendar-event-card>.map-card-close{
  position:sticky!important;
  top:0;
  align-self:flex-end;
  z-index:20;
  flex:0 0 auto;
}
.calendar-popup-heading{
  display:grid;
  gap:10px;
  margin:0 0 14px;
  flex:0 0 auto;
}
.calendar-popup-heading>div{
  padding:11px 13px;
  border:1px solid #303030;
  border-radius:10px;
  background:#111;
}
.calendar-popup-heading span{
  display:block;
  margin-bottom:4px;
  color:#8f8f8f;
  font-size:11px;
  font-weight:800;
}
.calendar-popup-heading h2,.calendar-popup-heading h3{margin:0;line-height:1.2}
.calendar-popup-heading h2{font-size:21px}
.calendar-popup-heading h3{font-size:18px;color:var(--yellow)}
.calendar-event-actions{
  position:sticky!important;
  bottom:0;
  z-index:15;
  background:#0c0c0c;
  border-top:1px solid #2d2d2d;
  padding-top:12px;
  padding-bottom:4px;
}
.calendar-event-card::-webkit-scrollbar{width:9px}
.calendar-event-card::-webkit-scrollbar-thumb{background:#3b3b3b;border-radius:999px}
@media(max-height:700px){.calendar-event-card{max-height:calc(100vh - 30px)!important}}

/* Version 28 — busy month days */
.calendar-busy-more{
  position:relative;
  z-index:8;
  border:1px solid #3a3a3a;
  background:#1a1a1a;
  color:var(--yellow);
  border-radius:6px;
  padding:4px 6px;
  margin-top:4px;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}
.calendar-busy-more:hover{
  border-color:#6d5700;
  background:#211c0a;
}

/* Version 29 — exact single-job detail page */
#jobDetail .job-detail-info{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#jobDetail .job-detail-info article{
  min-height:86px;
}
#jobDetail .job-detail-info article.wide{
  grid-column:1/-1;
}
.job-date-card{cursor:pointer}
.job-date-card:hover{border-color:#6a5300}
@media(max-width:760px){
  #jobDetail .job-detail-info{grid-template-columns:1fr}
}

/* Version 30 — calendar popup positioning */
.calendar-event-card{
  top:50%!important;
  right:28px!important;
  bottom:auto!important;
  transform:translateY(-50%);
  max-height:calc(100vh - 48px)!important;
  height:auto!important;
}

@media(max-height:760px){
  .calendar-event-card{
    top:24px!important;
    transform:none!important;
    max-height:calc(100vh - 48px)!important;
  }
}

@media(max-width:700px){
  .calendar-event-card{
    left:12px!important;
    right:12px!important;
    top:24px!important;
    transform:none!important;
    width:auto!important;
    max-height:calc(100vh - 48px)!important;
  }
}

/* Version 30 — Job Documents & Uploads */
.job-upload-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:6px;
}

.job-upload-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:7px!important;
  padding:14px!important;
  border:1px dashed #454545!important;
  border-radius:12px!important;
  background:#0d0d0d!important;
  cursor:pointer;
  min-height:145px;
}

.job-upload-card:hover{
  border-color:#6a5300!important;
  background:#14120c!important;
}

.job-upload-card strong{
  color:#fff;
  font-size:14px;
}

.job-upload-card small{
  color:#8d8d8d;
  line-height:1.35;
  word-break:break-word;
  flex:1;
}

.job-upload-card input{
  display:none;
}

.upload-action{
  display:inline-block!important;
  margin:0!important;
  color:var(--yellow)!important;
  font-size:11px!important;
  font-weight:900!important;
}

@media(max-width:900px){
  .job-upload-grid{
    grid-template-columns:1fr;
  }
}

/* Version 31 — compact busy calendar */
.calendar-day{min-height:215px!important}
.calendar-day-events{gap:2px!important}
.calendar-event,.calendar-range-bar{
 min-height:18px!important;height:18px!important;line-height:16px!important;
 padding:1px 5px!important;font-size:9px!important;border-radius:4px!important;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.calendar-booking-overlay{--calendar-lane-height:20px}
.calendar-range-bar{top:calc(var(--lane,0) * var(--calendar-lane-height))!important}
@media(min-width:1600px){
 .calendar-day{min-height:230px!important}
 .calendar-event,.calendar-range-bar{font-size:10px!important;height:19px!important;min-height:19px!important}
 .calendar-booking-overlay{--calendar-lane-height:21px}
}

/* Version 32 — repaired Mac-style month geometry */
.calendar-month-view{
  position:relative!important;
  overflow:hidden!important;
}
.calendar-booking-overlay{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:39px!important;
  bottom:0!important;
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  grid-template-rows:repeat(6,minmax(0,1fr))!important;
  pointer-events:none!important;
  z-index:4!important;
}
.calendar-day{
  position:relative!important;
  min-height:220px!important;
  overflow:hidden!important;
}
.calendar-range-bar{
  pointer-events:auto!important;
  position:relative!important;
  top:auto!important;
  align-self:start!important;
  margin:calc(30px + (var(--range-lane) * 21px)) 4px 0!important;
  height:18px!important;
  min-height:18px!important;
  line-height:16px!important;
  padding:1px 5px!important;
  font-size:9px!important;
  border-radius:4px!important;
  grid-row:calc(var(--range-row) + 1)!important;
  grid-column:calc(var(--range-col-start) + 1) / span var(--range-col-span)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.calendar-event{
  height:18px!important;
  min-height:18px!important;
  line-height:16px!important;
  padding:1px 5px!important;
  font-size:9px!important;
}
@media(min-width:1600px){
  .calendar-day{min-height:235px!important}
  .calendar-range-bar,.calendar-event{
    height:19px!important;
    min-height:19px!important;
    line-height:17px!important;
    font-size:10px!important;
  }
  .calendar-range-bar{
    margin-top:calc(31px + (var(--range-lane) * 22px))!important;
  }
}

/* Version 33 — inline calendar editing */
.calendar-inline-edit{
  width:100%;
  margin-top:4px;
  padding:9px 10px;
  border:1px solid #383838;
  border-radius:9px;
  background:#0e0e0e;
  color:#fff;
  font:inherit;
}

.calendar-inline-edit:focus{
  outline:none;
  border-color:#7b6200;
  box-shadow:0 0 0 2px rgba(255,204,0,.08);
}

.calendar-inline-edit:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.calendar-job-title-edit{
  color:var(--yellow);
  font-weight:900;
}

.calendar-popup-heading label{
  display:block;
}

.calendar-popup-assignments{
  display:grid;
  gap:8px;
}

.calendar-popup-assignment-row{
  display:grid;
  grid-template-columns:1fr 1fr 140px;
  gap:8px;
}

.calendar-popup-assignment-row select{
  width:100%;
  padding:9px 8px;
  border:1px solid #353535;
  border-radius:8px;
  background:#0d0d0d;
  color:#fff;
}

.calendar-event-actions{
  grid-template-columns:1fr 1fr;
}

@media(max-width:680px){
  .calendar-popup-assignment-row{
    grid-template-columns:1fr;
  }
}

/* Version 34 — cleaner calendar popup */
.calendar-event-card{
  padding-bottom:0!important;
}

.calendar-event-actions{
  position:static!important;
  margin-top:18px!important;
  padding:14px 0 0!important;
  border-top:1px solid #2d2d2d!important;
  background:#0c0c0c!important;
  grid-template-columns:1fr 1fr!important;
}

.calendar-event-actions .primary,
.calendar-event-actions .secondary{
  width:100%;
}

#calendarConfirmBooking{
  grid-column:1/-1;
}

.calendar-popup-assignment-row{
  grid-template-columns:minmax(0,1.2fr) minmax(0,1.15fr) minmax(120px,.7fr)!important;
  gap:10px!important;
  padding:11px!important;
  border:1px solid #303030;
  border-radius:10px;
  background:#0d0d0d;
}

.calendar-popup-assignment-row label{
  min-width:0;
  display:block;
}

.calendar-popup-assignment-row label>span{
  display:block;
  margin-bottom:5px;
  color:#8f8f8f;
  font-size:10px;
  font-weight:800;
}

.calendar-popup-assignment-row select{
  width:100%!important;
  min-width:0;
  text-overflow:ellipsis;
}

.calendar-popup-assignments{
  gap:10px!important;
}

@media(max-width:760px){
  .calendar-popup-assignment-row{
    grid-template-columns:1fr!important;
  }
}

/* Version 35 — neater diary popup */
.calendar-popup-date-line{
  margin:2px 0 12px;
  color:#cfcfcf;
  font-size:13px;
  font-weight:800;
}

.calendar-job-title-edit{
  color:#fff!important;
  font-weight:900;
}

.calendar-popup-heading{
  gap:12px!important;
}

.calendar-popup-assignment-row{
  grid-template-columns:minmax(110px,.8fr) minmax(180px,1.3fr) minmax(130px,.8fr)!important;
  gap:12px!important;
  padding:12px!important;
}

.calendar-popup-assignment-row select{
  font-size:12px!important;
}

.calendar-event-details{
  gap:12px!important;
}

.calendar-event-details>div{
  padding:13px!important;
}

.popup-call-sheet-control{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.popup-call-sheet-control strong{
  font-size:12px;
  word-break:break-word;
}

.popup-upload-button{
  display:inline-flex!important;
  width:max-content;
  align-items:center;
  justify-content:center;
  padding:7px 10px!important;
  border:1px solid #3d3d3d;
  border-radius:8px;
  background:#161616;
  color:var(--yellow)!important;
  font-size:11px!important;
  font-weight:900!important;
  cursor:pointer;
}

.popup-upload-button input{
  display:none;
}

@media(max-width:760px){
  .calendar-popup-assignment-row{
    grid-template-columns:1fr!important;
  }
}

/* Version 36 — diary popup polish */
.calendar-job-title-edit{
  font-weight:400!important;
  color:#fff!important;
}

#calendarAssignmentsWrap{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
}

#calendarAssignmentsWrap>span{
  display:block;
  padding:0 0 7px!important;
  margin:0!important;
}

.calendar-popup-assignments{
  display:grid!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  overflow:visible!important;
}

.calendar-popup-assignment-row{
  display:grid!important;
  grid-template-columns:minmax(76px,.62fr) minmax(0,1.5fr) minmax(110px,.8fr)!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:visible!important;
}

.calendar-popup-assignment-row label{
  min-width:0!important;
  width:100%!important;
}

.calendar-popup-assignment-row select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.popup-assignment-vehicle{
  font-size:11px!important;
  font-weight:800!important;
}

.calendar-event-card,
.calendar-event-details,
.calendar-event-details>div{
  overflow-x:hidden!important;
}

#calendarEventStatus{
  font-weight:700;
}

@media(max-width:760px){
  .calendar-popup-assignment-row{
    grid-template-columns:1fr!important;
  }
}

/* Version 37 — simplify diary popup lower section */
.calendar-event-details{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:14px 16px!important;
  background:transparent!important;
  border:0!important;
}

.calendar-event-details>div{
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  min-width:0!important;
}

.calendar-event-details>div.wide{
  grid-column:1/-1!important;
}

.calendar-event-details>div>span{
  display:block!important;
  margin:0 0 6px!important;
  padding:0!important;
  color:#8f8f8f!important;
  font-size:11px!important;
  font-weight:800!important;
}

.calendar-event-details .calendar-inline-edit{
  margin:0!important;
  background:#0e0e0e!important;
  border:1px solid #383838!important;
  border-radius:9px!important;
  box-shadow:none!important;
}

.popup-call-sheet-control{
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
}

#calendarAssignmentsWrap{
  padding:0 0 3px!important;
  border:0!important;
  background:transparent!important;
}

.calendar-popup-assignment-row{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

@media(max-width:680px){
  .calendar-event-details{
    grid-template-columns:1fr!important;
  }
  .calendar-event-details>div.wide{
    grid-column:auto!important;
  }
}

/* Version 38 — status progression workflow */
.calendar-popup-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:2px 0 12px;
}

.calendar-popup-date-line{
  margin:0!important;
}

.calendar-popup-status-line{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.calendar-popup-status-line>span{
  color:#9a9a9a;
  font-size:11px;
  font-weight:800;
}

.calendar-status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid transparent;
}

.calendar-status-badge.option{
  background:#123d22;
  color:#79d995;
  border-color:#2e9f55;
}

.calendar-status-badge.confirmed{
  background:#4b2b0d;
  color:#ffb36f;
  border-color:#e48632;
}

.calendar-status-badge.details-sent{
  background:#491416;
  color:#ff9398;
  border-color:#cf3f45;
}

.calendar-status-badge.awaiting{
  background:#10284d;
  color:#8bb3ee;
  border-color:#173c78;
}

.calendar-status-badge.ready{
  background:#3a2d59;
  color:#e1d7ff;
  border-color:#a98ee6;
}

.calendar-status-badge.invoiced{
  background:#173b55;
  color:#9ed5fa;
  border-color:#62a9dd;
}

#calendarAdvanceStatus{
  grid-column:1/-1;
}

#calendarAdvanceStatus.status-complete{
  opacity:.6;
  cursor:default;
}

@media(max-width:620px){
  .calendar-popup-meta{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* Version 39 — quick booking from Calendar */
.calendar-day{
  user-select:none;
}

/* Version 40 — one scrolling job sheet, no nested scrolling */
.calendar-event-card{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  max-height:calc(100vh - 48px)!important;
  height:auto!important;
  display:block!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.calendar-popup-meta,
.calendar-popup-heading,
.calendar-event-details,
.calendar-popup-assignments,
.calendar-popup-assignment-row,
.popup-call-sheet-control,
.calendar-event-actions{
  overflow:visible!important;
  max-height:none!important;
}

.calendar-event-details{
  display:grid!important;
}

.calendar-event-actions{
  position:static!important;
  bottom:auto!important;
  margin-top:18px!important;
  padding-top:14px!important;
}

.calendar-event-card>.map-card-close{
  position:sticky!important;
  top:0!important;
  float:right;
  z-index:30;
}

/* Inputs/selects stay fixed inside the sheet rather than creating their own scroll area */
.calendar-inline-edit,
.calendar-popup-assignment-row select{
  overflow:hidden!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

.calendar-event-card::-webkit-scrollbar{
  width:9px;
}
.calendar-event-card::-webkit-scrollbar-thumb{
  background:#414141;
  border-radius:999px;
}

/* Version 41 — restore true popup behaviour */
.calendar-event-card.hidden{
  display:none!important;
}

.calendar-event-card{
  position:fixed!important;
  top:50%!important;
  right:24px!important;
  left:auto!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:min(470px,calc(100vw - 320px))!important;
  max-height:calc(100vh - 48px)!important;
  height:auto!important;
  display:block;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  z-index:100!important;
  margin:0!important;
  box-sizing:border-box!important;
}

@media(max-width:1050px){
  .calendar-event-card{
    width:min(460px,calc(100vw - 48px))!important;
    right:20px!important;
  }
}

@media(max-width:700px){
  .calendar-event-card{
    top:20px!important;
    right:12px!important;
    left:12px!important;
    width:auto!important;
    transform:none!important;
    max-height:calc(100vh - 40px)!important;
  }
}

/* Version 42 — add vehicle in diary popup */
.calendar-add-assignment{
  margin-top:10px!important;
  width:auto!important;
  padding:8px 11px!important;
  font-size:11px!important;
}

#calendarAdvanceStatus{
  cursor:pointer!important;
  pointer-events:auto!important;
  position:relative!important;
  z-index:5!important;
}

/* Version 43 — isolated status progression button */
#calendarProgressButton{
  width:100%!important;
  display:block!important;
  position:relative!important;
  z-index:50!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  margin-top:4px!important;
}

#calendarProgressButton:disabled{
  cursor:default!important;
}

/* Version 44 — right-click popup booking + today-circle spacing */
.calendar-new-booking-dates{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:0 0 12px;
}

.calendar-new-booking-dates label>span{
  display:block;
  margin-bottom:5px;
  color:#8f8f8f;
  font-size:11px;
  font-weight:800;
}

/* Keep all booking bars below the date number / today circle */
.calendar-day{
  padding-top:8px!important;
}

.calendar-day-number{
  position:relative!important;
  z-index:12!important;
  margin-bottom:12px!important;
}

.calendar-day-events{
  padding-top:2px!important;
}

.calendar-range-bar{
  margin-top:calc(44px + (var(--range-lane) * 21px))!important;
}

@media(min-width:1600px){
  .calendar-range-bar{
    margin-top:calc(46px + (var(--range-lane) * 22px))!important;
  }
}

@media(max-width:700px){
  .calendar-new-booking-dates{
    grid-template-columns:1fr;
  }
}

/* Version 45 — cancel booking/job */
.calendar-event-actions .danger{
  width:100%;
  border:1px solid #6a2b2b;
  background:#271010;
  color:#ff8f8f;
  border-radius:10px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
}
.calendar-event-actions .danger:hover{
  background:#341414;
}

/* Version 46 — simpler popup close + bottom spacing */
.calendar-event-card{
  padding-bottom:18px!important;
}

.calendar-event-actions{
  margin-bottom:16px!important;
  padding-bottom:4px!important;
}

/* Version 47 */
.calendar-new-booking-dates input[type="date"]{cursor:pointer;min-height:42px}
.calendar-new-booking-dates input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:1}
.calendar-document-grid{display:grid;grid-template-columns:1fr;gap:9px}
.calendar-file-drop{display:flex;flex-direction:column;justify-content:center;min-height:62px;padding:10px 12px;border:1px dashed #505050;border-radius:10px;background:#101010;cursor:pointer;box-sizing:border-box}
.calendar-file-drop:hover,.calendar-file-drop.dragging{border-color:#888;background:#151515}
.calendar-file-drop strong{font-size:12px;margin-bottom:3px}
.calendar-file-drop small{color:#929292;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-movement-orders-wrap{display:flex;flex-direction:column;gap:7px;position:relative}
.calendar-movement-orders-wrap>.calendar-file-drop:first-child{padding-right:52px}
#calendarExtraMovementOrders{display:flex;flex-direction:column;gap:7px}
.calendar-add-movement-order{position:absolute;top:16px;right:12px;z-index:3;width:30px;height:30px;padding:0;border:1px solid #626262;border-radius:8px;background:#1b1b1b;color:#fff;font-size:20px;line-height:28px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.calendar-add-movement-order:hover{background:#181818;border-color:#777}
.calendar-event-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
.calendar-event-actions>button{width:100%!important;min-height:42px!important;margin:0!important;box-sizing:border-box!important}
#calendarOpenJob{grid-column:1/-1}
@media(max-width:520px){.calendar-event-actions{grid-template-columns:1fr!important}}

/* Version 48 — obvious date pickers + matched slide-out actions */
.calendar-date-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
  gap:7px;
  align-items:center;
}

.calendar-date-control .calendar-inline-edit{
  margin:0!important;
  min-height:42px!important;
}

.calendar-date-button{
  width:42px;
  height:42px;
  padding:0;
  border:1px solid #3b3b3b;
  border-radius:9px;
  background:#151515;
  color:#fff;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}

.calendar-date-button:hover{
  border-color:#6f5900;
  background:#1c190d;
}

.calendar-event-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
}

.calendar-event-actions>button{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 14px!important;
  margin:0!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
}

#calendarSaveNewBooking,
#calendarProgressButton{
  grid-column:auto!important;
}

#calendarOpenJob{
  grid-column:1/-1!important;
}

@media(max-width:560px){
  .calendar-event-actions{
    grid-template-columns:1fr!important;
  }

  #calendarOpenJob,
  #calendarSaveNewBooking,
  #calendarProgressButton{
    grid-column:auto!important;
  }
}

/* Version 54 — stable driver-details flow */
#calendarProgressButton{
  grid-column:1/-1!important;
  justify-self:center!important;
  width:min(100%,360px)!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

.email-preview-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.68);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:500;
}

.email-preview-overlay.hidden{
  display:none!important;
}

.email-preview-card{
  position:relative;
  width:min(620px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  background:#f6f6f3;
  color:#171717;
  border-radius:14px;
  padding:28px;
  box-sizing:border-box;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}

.email-preview-close{
  position:absolute;
  top:12px;
  right:12px;
  border:0;
  background:transparent;
  font-size:22px;
  cursor:pointer;
}

.email-preview-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  color:#777;
  margin-bottom:10px;
}

.email-preview-subject{
  font-size:19px;
  font-weight:900;
  margin-bottom:6px;
}

.email-preview-to{
  font-size:12px;
  color:#666;
  padding-bottom:14px;
  border-bottom:1px solid #ddd;
}

.email-preview-body{
  font-size:14px;
  line-height:1.55;
  padding-top:8px;
}

.email-driver-block{
  background:#fff;
  border:1px solid #ddd;
  border-radius:9px;
  padding:12px 14px;
  margin:12px 0;
}

.email-preview-actions{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

.email-preview-actions button{
  min-width:220px;
}

/* Version 57 — direct calendar/button control */
#calendarProgressButton{
  pointer-events:auto!important;
  cursor:pointer!important;
}

/* Version 58 — Save Booking only */
#calendarOpenJob{
  display:none!important;
}

#calendarSaveNewBooking{
  pointer-events:auto!important;
  cursor:pointer!important;
  position:relative!important;
  z-index:30!important;
}

/* Version 61 — dedicated Cancel control */
#calendarCancelItem{
  pointer-events:auto!important;
  cursor:pointer!important;
  position:relative!important;
  z-index:60!important;
}

/* Version 62 — Cancel button physical click layer fix */
#calendarCancelItem{
  grid-column:1 / -1!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  z-index:200!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  isolation:isolate!important;
}

#calendarProgressButton{
  grid-column:1 / -1!important;
  position:relative!important;
  z-index:10!important;
}

.calendar-event-actions{
  position:relative!important;
  overflow:visible!important;
  isolation:isolate!important;
}

/* Version 63 — Save Booking rebuilt like the working Cancel button */
#calendarSaveNewBooking{
  grid-column:1 / -1!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  z-index:210!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  isolation:isolate!important;
}

#calendarSaveNewBooking.hidden{
  display:none!important;
}

.calendar-event-actions{
  position:relative!important;
  overflow:visible!important;
  isolation:isolate!important;
}

/* Version 64 — Continue to Confirmed rebuilt */
#calendarProgressButton{
  grid-column:1 / -1!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  z-index:220!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  isolation:isolate!important;
}

/* Version 65 — Send Driver Details rebuilt */
#calendarProgressButton{
  grid-column:1 / -1!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  z-index:230!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  isolation:isolate!important;
}

.email-preview-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.68);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:500;
}

.email-preview-overlay.hidden{
  display:none!important;
}

.email-preview-card{
  position:relative;
  width:min(620px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  background:#f6f6f3;
  color:#171717;
  border-radius:14px;
  padding:28px;
  box-sizing:border-box;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}

.email-preview-close{
  position:absolute;
  top:12px;
  right:12px;
  border:0;
  background:transparent;
  font-size:22px;
  cursor:pointer;
}

.email-preview-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  color:#777;
  margin-bottom:10px;
}

.email-preview-subject{
  font-size:19px;
  font-weight:900;
  margin-bottom:6px;
}

.email-preview-to{
  font-size:12px;
  color:#666;
  padding-bottom:14px;
  border-bottom:1px solid #ddd;
}

.email-preview-body{
  font-size:14px;
  line-height:1.55;
  padding-top:8px;
}

.email-driver-block{
  background:#fff;
  border:1px solid #ddd;
  border-radius:9px;
  padding:12px 14px;
  margin:12px 0;
}

.email-preview-actions{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

.email-preview-actions button{
  min-width:240px;
}

/* Version 66 — Send Driver Details isolated click */
#calendarProgressButton{
  grid-column:1 / -1!important;
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  z-index:300!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  isolation:isolate!important;
}
.calendar-event-actions{
  position:relative!important;
  overflow:visible!important;
  isolation:isolate!important;
}

/* Version 67 — working email preview actions */
.email-preview-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  position:relative!important;
  z-index:600!important;
  isolation:isolate!important;
}

.email-preview-actions button{
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  position:relative!important;
}

#cancelDriverEmailPreview{
  z-index:610!important;
}

#confirmDriverEmailPreview{
  z-index:620!important;
}

.email-preview-close{
  z-index:630!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

/* Version 73 — Send to Driver stage */
#driverJobEmailPreview .email-preview-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  position:relative!important;
  z-index:700!important;
}

#driverJobEmailPreview .email-preview-actions button{
  width:100%!important;
  min-height:46px!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

#sendDriverJobEmail{
  z-index:720!important;
}

#cancelDriverJobEmailPreview{
  z-index:710!important;
}

/* Version 77 — completely new Create New Booking button */
#calendarQuickCreateBooking{
  pointer-events:auto!important;
  cursor:pointer!important;
  position:relative!important;
  z-index:500!important;
  isolation:isolate!important;
}

#calendarNewBooking.hidden{
  display:none!important;
}

/* Version 78 — keep Create New Booking behind the open side sheet */
#calendarQuickCreateBooking{
  z-index:1!important;
}

.calendar-event-panel,
#calendarEventPanel,
.calendar-event-overlay,
#calendarEventOverlay{
  z-index:1000!important;
}

/* Version 79 — native date-picker button fix */
#openCalendarNewStartDate,
#openCalendarNewEndDate{
  pointer-events:auto!important;
  cursor:pointer!important;
  position:relative!important;
  z-index:80!important;
}

/* Version 82 — Jamie-style driver email preview */
#driverJobEmailPreviewBody p{
  line-height:1.45;
}
#driverJobEmailPreviewBody u{
  text-underline-offset:2px;
}

/* Version 85 — popup Location and Notes layout */
.calendar-notes-edit{
  width:100%;
  min-height:86px;
  max-height:140px;
  overflow-y:auto;
  resize:vertical;
  box-sizing:border-box;
}

/* Version 86 — call sheet indicator on calendar colour strips */
.calendar-range-bar{
  position:absolute;
}

.calendar-range-label{
  display:block;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.calendar-range-bar.has-call-sheet{
  padding-right:20px!important;
}

.calendar-call-sheet-icon{
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  width:11px;
  height:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:.95;
}

.calendar-call-sheet-icon svg{
  display:block;
  width:11px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Version 87 — working call-sheet file selection */
.calendar-file-drop.drag-over{
  outline:2px dashed currentColor;
  outline-offset:2px;
}

#calendarCallSheetName{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Version 89 — remove vehicle from booking/job */
.calendar-popup-assignment-row{
  position:relative;
  padding-right:30px;
}

.popup-assignment-remove{
  position:absolute;
  right:0;
  top:25px;
  width:24px;
  height:24px;
  min-width:24px;
  padding:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

/* Version 90 — subtle remove-vehicle control */
.calendar-popup-assignment-row{
  position:relative;
  padding-right:22px;
}

.popup-assignment-remove{
  position:absolute;
  right:0;
  top:29px;
  width:18px;
  height:18px;
  min-width:18px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:400;
  line-height:1;
  opacity:.5;
  cursor:pointer;
}

.popup-assignment-remove:hover{
  opacity:1;
  background:rgba(255,255,255,.08);
}

.popup-assignment-remove:focus-visible{
  outline:1px solid currentColor;
  outline-offset:2px;
}

/* Version 91 — visible remove-vehicle control in its own column */
.calendar-popup-assignment-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) 26px!important;
  gap:8px!important;
  align-items:end!important;
  position:relative!important;
  padding-right:0!important;
}

.calendar-popup-assignment-row > label{
  min-width:0!important;
}

.popup-assignment-remove{
  position:static!important;
  width:24px!important;
  height:34px!important;
  min-width:24px!important;
  margin:0 0 1px 0!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.04)!important;
  box-shadow:none!important;
  border-radius:6px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:18px!important;
  font-weight:500!important;
  line-height:1!important;
  opacity:.8!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  z-index:5!important;
}

.popup-assignment-remove:hover{
  opacity:1!important;
  background:rgba(255,255,255,.10)!important;
}

.popup-assignment-remove:focus-visible{
  opacity:1!important;
  outline:2px solid currentColor!important;
  outline-offset:2px!important;
}

@media (max-width:700px){
  .calendar-popup-assignment-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) 26px!important;
  }
}

/* Version 92 — clearer remove-vehicle button */
.popup-assignment-remove{
  width:26px!important;
  height:34px!important;
  min-width:26px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.08)!important;
  opacity:1!important;
  font-size:0!important;
  position:relative!important;
}

.popup-assignment-remove::before{
  content:"";
  width:11px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  display:block;
}

.popup-assignment-remove:hover{
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.45)!important;
}

/* Version 93 — align remove button with dropdowns and make minus white */
.calendar-popup-assignment-row{
  align-items:end!important;
}

.popup-assignment-remove{
  align-self:end!important;
  height:38px!important;
  margin:0!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.08)!important;
}

.popup-assignment-remove::before{
  background:#fff!important;
  width:12px!important;
  height:2px!important;
}

.popup-assignment-remove:hover{
  color:#fff!important;
  background:rgba(255,255,255,.16)!important;
}

/* Version 94 — precise minus alignment with select boxes */
.calendar-popup-assignment-row{
  align-items:end!important;
}

.popup-assignment-remove{
  position:static!important;
  align-self:end!important;
  box-sizing:border-box!important;
  width:26px!important;
  min-width:26px!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  transform:none!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.popup-assignment-remove::before{
  background:#fff!important;
  width:12px!important;
  height:2px!important;
  margin:0!important;
}

/* Match the bottom edge of the actual selects rather than the label text. */
.calendar-popup-assignment-row .popup-assignment-vehicle,
.calendar-popup-assignment-row .popup-assignment-driver,
.calendar-popup-assignment-row .popup-assignment-time{
  box-sizing:border-box;
  min-height:42px;
}

/* Version 95 — trailer tow vehicle selector */
.popup-assignment-tow-wrap{
  grid-column:1 / 4;
  min-width:0;
}

.popup-assignment-tow-wrap.hidden{
  display:none!important;
}

.popup-assignment-tow{
  width:100%;
  min-height:42px;
  box-sizing:border-box;
}

.calendar-popup-assignment-row:has(.popup-assignment-tow-wrap:not(.hidden)){
  row-gap:8px!important;
}


/* Supabase v99 separate login */
.supabase-header-controls{display:flex;align-items:center;gap:10px;margin-left:auto}
#supabaseStatus,.supabase-signout{border:1px solid #3a3a3a;background:#151515;color:#aaa;border-radius:999px;padding:8px 11px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
#supabaseStatus[data-state="live"]{border-color:#1d6b3a;color:#72df9a;background:#102719}
#supabaseStatus[data-state="connecting"]{border-color:#7a6200;color:#f3cd28;background:#2b2407}
#supabaseStatus[data-state="error"]{border-color:#7a2d2d;color:#ff9696;background:#2d1111}
.supabase-login-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:20px}
.supabase-login-overlay.hidden{display:none!important}
.supabase-login-card{width:min(440px,100%);background:#151515;border:1px solid #343434;border-radius:18px;padding:28px;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.supabase-login-logo{font-weight:950;letter-spacing:.08em;color:#f1ca21;font-size:22px}
.supabase-login-sub{font-size:11px;letter-spacing:.13em;color:#888;margin:4px 0 22px}
.supabase-login-card h2{margin:0 0 8px}.supabase-login-card form{display:grid;gap:14px;margin-top:20px}.supabase-login-card label{display:grid;gap:7px;color:#aaa;font-size:12px;font-weight:800}.supabase-login-card input{width:100%;box-sizing:border-box;background:#0c0c0c;color:#fff;border:1px solid #383838;border-radius:10px;padding:12px;font:inherit}.supabase-login-error{min-height:18px;color:#ff8d8d;font-size:12px}.supabase-login-button{width:100%}.supabase-login-note{font-size:11px;color:#777;line-height:1.5;margin:18px 0 0}


/* Version 100 — password recovery */
.supabase-forgot-password{
  border:0;
  background:transparent;
  color:#f1ca21;
  padding:2px 0 4px;
  text-align:center;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.supabase-forgot-password:hover{text-decoration:underline}
.supabase-login-error.success{color:#72df9a}


/* v105 driver vehicle permissions */
.driver-permission-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.permission-pill{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:#eef3f7;font-weight:700;font-size:.88rem;color:#22313f}
.driver-permission-editor{margin-top:12px;padding:14px;border:1px solid #dfe5ea;border-radius:14px;background:#fafbfc}
.permission-master,.permission-tow{display:flex;align-items:center;gap:8px;padding:8px 0}
.permission-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;padding:8px 0 12px}
.permission-option{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e4e9ed;border-radius:10px;background:white}
.permission-disabled{opacity:.45}
@media (max-width:700px){.permission-check-grid{grid-template-columns:1fr}}

/* v106 - compact dark driver permissions layout */
.driver-permissions-card{overflow:visible}
.driver-permission-editor{
  margin-top:12px;
  padding:16px;
  border:1px solid #303030;
  border-radius:14px;
  background:#151515;
  color:#f5f5f5;
}
.driver-permission-editor input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  min-width:20px;
  margin:0;
  border:2px solid #696969;
  border-radius:5px;
  background:#0e0e0e;
  display:grid;
  place-content:center;
  cursor:pointer;
}
.driver-permission-editor input[type="checkbox"]::before{
  content:"";
  width:10px;
  height:6px;
  border-left:3px solid #101010;
  border-bottom:3px solid #101010;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
}
.driver-permission-editor input[type="checkbox"]:checked{
  background:#f4c400;
  border-color:#f4c400;
}
.driver-permission-editor input[type="checkbox"]:checked::before{
  transform:rotate(-45deg) scale(1);
}
.permission-master,.permission-tow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  padding:12px 13px;
  margin:0;
  border:1px solid #333;
  border-radius:10px;
  background:#101010;
  color:#f5f5f5 !important;
  cursor:pointer;
}
.permission-master{margin-bottom:10px}
.permission-tow{margin-top:10px}
.permission-master strong,.permission-tow strong{
  color:#f5f5f5 !important;
  font-size:14px;
  line-height:1.2;
}
.permission-check-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:0;
}
.permission-option{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  min-height:46px;
  padding:10px 12px;
  margin:0;
  border:1px solid #333;
  border-radius:10px;
  background:#101010;
  color:#e8e8e8 !important;
  cursor:pointer;
}
.permission-option span{
  color:#e8e8e8 !important;
  font-size:14px;
  font-weight:650;
  line-height:1.2;
}
.permission-option:hover,.permission-master:hover,.permission-tow:hover{
  border-color:#555;
  background:#191919;
}
.permission-disabled{opacity:.38}
.driver-permission-editor .muted{
  display:block;
  margin-top:12px;
  color:#838383 !important;
  font-size:12px;
  line-height:1.45;
}
.driver-permission-summary{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.permission-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border:1px solid #3a3a3a;
  border-radius:999px;
  background:#191919;
  color:#eaeaea;
  font-weight:700;
  font-size:.82rem;
}
@media (max-width:700px){
  .permission-check-grid{grid-template-columns:1fr}
}


/* v107 — vehicle edit photo upload + MOT date picker */
.vehicle-photo-upload{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:10px 0 14px;
  width:100%;
  box-sizing:border-box;
  text-align:center;
}
.vehicle-photo-upload.hidden{display:none}
.vehicle-photo-upload-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  box-sizing:border-box;
  border:1px solid #4b3a00;
  border-radius:11px;
  background:#15130a;
  color:var(--yellow);
  font-weight:900;
  cursor:pointer;
}
.vehicle-photo-upload:hover .vehicle-photo-upload-button{
  border-color:var(--yellow);
  background:#1b1708;
}
.vehicle-photo-upload .file-name{
  display:block;
  max-width:100%;
  margin:0;
  padding:0 6px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#858585;
  font-size:11px;
}
.mot-date-picker{
  cursor:pointer;
  color-scheme:dark;
}
.mot-date-card .mot-date-picker::-webkit-calendar-picker-indicator{
  cursor:pointer;
  filter:invert(82%) sepia(84%) saturate(1163%) hue-rotate(347deg) brightness(102%) contrast(101%);
  opacity:.95;
}


/* v115 — live generator event timeline */
.generator-timeline{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:4px}
.generator-timeline .generator-event{display:inline-flex;align-items:center;padding:8px 11px;border:1px solid #333;border-radius:10px;background:#111;color:#ddd;font-size:13px;line-height:1.25}
.generator-timeline .generator-event strong{color:#ffca28;margin-right:5px;font-size:13px}


/* v116 report archive controls */
.report-view-switch{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.report-view-switch button{min-width:150px}
.report-actions{justify-content:flex-end;gap:12px}
@media(max-width:700px){.report-view-switch{width:100%}.report-view-switch button{flex:1;min-width:0}.report-actions{display:grid;grid-template-columns:1fr}.report-actions button{width:100%}}

.production-dietary-toggle{display:flex!important;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.035);cursor:pointer}
.production-dietary-toggle input{width:18px;height:18px;margin-top:2px;flex:0 0 auto}
.production-dietary-toggle span{display:flex;flex-direction:column;gap:3px}
.production-dietary-toggle small{color:var(--muted,#9ca3af);font-weight:400;line-height:1.35}

.licence-preview{overflow:hidden;position:relative;min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;cursor:pointer}
.licence-thumb{display:block;width:100%;height:150px;object-fit:cover;border-radius:9px;background:#080808;filter:blur(8px);transform:scale(1.06);opacity:.78}.licence-preview:hover .licence-thumb{filter:blur(5px);opacity:.9}
.licence-view-label{font-size:12px;color:var(--yellow);font-weight:800;position:relative;z-index:2}.licence-preview:has(.licence-thumb)::after{content:"Click to view clear image";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;background:rgba(0,0,0,.72);color:#fff;padding:8px 10px;border-radius:8px;font-size:11px;font-weight:800;white-space:nowrap}
.licence-empty{color:#aaa;font-size:14px;text-align:center}

/* v126 — separate MOT / Other calendar entries */
.calendar-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.calendar-range-bar.other{--event:#8d7e55;border:1px solid #a99765}
.calendar-agenda-row.other{--event:#8d7e55}
.simple-calendar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px}
.simple-calendar-overlay.hidden{display:none}
.simple-calendar-card{width:min(520px,100%);background:#151515;border:1px solid #3c3c3c;border-radius:14px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.simple-calendar-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.simple-calendar-head h2{margin:2px 0 0}
.simple-calendar-close{border:0;background:transparent;color:#ddd;font-size:28px;line-height:1;cursor:pointer;padding:2px 6px}
.simple-calendar-form{display:grid;gap:14px}
.simple-calendar-form label{display:grid;gap:7px;font-weight:700}
.simple-calendar-form input,.simple-calendar-form select,.simple-calendar-form textarea{width:100%;box-sizing:border-box}
.simple-calendar-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.simple-calendar-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;margin-top:18px}
@media(max-width:650px){.simple-calendar-dates{grid-template-columns:1fr}.calendar-page-head{align-items:stretch}.calendar-head-actions{width:100%}.calendar-head-actions button{flex:1}}

/* v128 — keep calendar date numbers underneath the sticky app header while scrolling */
.topbar{z-index:1000!important}
.calendar-day-number{z-index:2!important}
.calendar-weekdays{position:relative;z-index:3}


/* Version 130 — matched popup actions + subtle next-step rollover */
.calendar-event-actions > button{
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 14px!important;
  border-radius:10px!important;
  box-sizing:border-box!important;
}
#calendarSaveChanges,
#calendarCancelItem,
#calendarProgressButton{
  min-width:0!important;
}
#calendarProgressButton{
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease;
}
#calendarProgressButton:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(0,0,0,.22);
  filter:brightness(1.04);
}
#calendarProgressButton:active:not(:disabled){
  transform:translateY(0);
  box-shadow:0 2px 7px rgba(0,0,0,.18);
}

/* Version 131 — three equal booking popup actions + visible subtle rollover */
.calendar-event-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
}
.calendar-event-actions > #calendarCancelItem,
.calendar-event-actions > #calendarSaveChanges,
.calendar-event-actions > #calendarProgressButton{
  width:100%!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:0 12px!important;
  box-sizing:border-box!important;
}
#calendarOpenJob,
#calendarSaveNewBooking{
  grid-column:1/-1;
}
#calendarProgressButton{
  transition:transform .16s ease, filter .16s ease, border-color .16s ease, box-shadow .16s ease!important;
}
#calendarProgressButton:hover:not(:disabled){
  transform:translateY(-2px)!important;
  filter:brightness(1.08)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.28)!important;
}
#calendarProgressButton:active:not(:disabled){
  transform:translateY(0)!important;
}
@media(max-width:760px){
  .calendar-event-actions{grid-template-columns:1fr!important;}
}

/* Version 132 — keep calendar booking popup below sticky app header */
.calendar-event-card{
  top:92px!important;
  bottom:16px!important;
  right:24px!important;
  transform:none!important;
  max-height:calc(100vh - 108px)!important;
  z-index:1000!important;
}

@media(max-width:700px){
  .calendar-event-card{
    top:88px!important;
    bottom:12px!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-height:calc(100vh - 100px)!important;
    transform:none!important;
  }
}


/* Version 133 — actual booking popup footer: three equal actions */
.calendar-event-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
}
#calendarCancelItem,
#calendarSaveChanges,
#calendarProgressButton{
  grid-column:auto!important;
  width:100%!important;
  min-width:0!important;
  height:50px!important;
  min-height:50px!important;
  margin:0!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.15!important;
  text-align:center!important;
}
#calendarProgressButton{
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important;
}
#calendarProgressButton:hover:not(:disabled){
  transform:translateY(-2px)!important;
  filter:brightness(1.08)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.28)!important;
}
#calendarProgressButton:active:not(:disabled){transform:translateY(0)!important;}
@media(max-width:760px){
  .calendar-event-actions{grid-template-columns:1fr!important;}
}

/* Driver delete action */
#deleteDriverProfile{
  border-color:#7d2b2b!important;
  background:#2a1111!important;
  color:#ff9a9a!important;
}
#deleteDriverProfile:hover{
  border-color:#b54242!important;
  background:#381515!important;
}

/* v137 — full-width options follow-up panel */
.options-followup-panel{
  grid-column:1 / -1;
}
@media(max-width:820px){
  .options-followup-panel{grid-column:auto;}
}

/* v139 — hired-in fields isolated to booking assignment UI */
.booking-assignment-row .hired-in-fields{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:14px;
  margin-top:4px;
  border:1px solid rgba(242,183,5,.45);
  border-radius:13px;
  background:rgba(242,183,5,.055);
}
.booking-assignment-row .hired-in-fields.hidden{display:none!important}
.booking-assignment-row .hired-in-heading{grid-column:1 / -1;color:var(--yellow);font-size:12px;font-weight:950;letter-spacing:.08em}
.booking-assignment-row .hired-in-fields label{display:block!important}
.booking-assignment-row .hired-in-fields label>span{display:block;margin-bottom:6px;color:#aaa;font-size:12px;font-weight:800}
.booking-assignment-row .hired-in-fields input{width:100%;box-sizing:border-box;min-height:42px;padding:9px 11px;border:1px solid #3b3b3b;border-radius:9px;background:#0c0c0c;color:#fff;font:inherit}
.booking-assignment-row .hired-in-notes-wrap{grid-column:1 / -1}
@media(max-width:850px){.booking-assignment-row .hired-in-fields{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.booking-assignment-row .hired-in-fields{grid-template-columns:1fr}}

.map-empty-live{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.9);padding:9px 12px;border-radius:10px;font-size:12px;color:#666;white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,.08)}

/* Version 143 — dashboard job card spacing + status badge sizing */
#dashboardTodayJobs,
#dashboardTomorrowJobs,
#dashboardOptionsFollowUp{
  display:grid;
  gap:11px;
}

#dashboardTodayJobs .card,
#dashboardTomorrowJobs .card,
#dashboardOptionsFollowUp .card{
  min-width:0;
}

#dashboardTodayJobs .card > div,
#dashboardTomorrowJobs .card > div,
#dashboardOptionsFollowUp .card > div{
  min-width:0;
  flex:1 1 auto;
}

#dashboardTodayJobs .tag,
#dashboardTomorrowJobs .tag,
#dashboardOptionsFollowUp .tag{
  flex:0 0 auto;
  white-space:nowrap;
  line-height:1.1;
}


/* v146 — calendar icon is itself a native date input hit target */
.native-date-icon{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.native-date-icon input[type="date"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0.001;
  cursor:pointer;
  border:0;
  padding:0;
  margin:0;
}
.native-date-icon input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}


/* v149 — direct native date fields; no separate calendar icon buttons */
.calendar-new-booking-dates .calendar-date-control{
  display:block!important;
}
.calendar-new-booking-dates .calendar-direct-date{
  width:100%!important;
  min-height:44px!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  padding-right:12px!important;
}
.calendar-new-booking-dates .calendar-direct-date::-webkit-calendar-picker-indicator{
  cursor:pointer!important;
  opacity:1!important;
}

/* v150 — reliable Wagon Wheels dropdown date picker */
.ww-date-popover{
  position:fixed;
  z-index:100000;
  width:290px;
  padding:12px;
  border:1px solid #3a3a3a;
  border-radius:14px;
  background:#151515;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  color:#fff;
}
.ww-date-popover.hidden{display:none!important}
.ww-date-head{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;margin-bottom:10px}
.ww-date-head strong{text-align:center;font-size:15px}
.ww-date-nav{height:36px;border:1px solid #3b3b3b;border-radius:9px;background:#222;color:#fff;font-size:20px;cursor:pointer}
.ww-date-nav:hover{border-color:#f0ca00;color:#f0ca00}
.ww-date-week,.ww-date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ww-date-week{margin-bottom:5px;color:#888;font-size:11px;text-align:center}
.ww-date-day{height:34px;border:0;border-radius:8px;background:transparent;color:#eee;cursor:pointer;font:inherit}
.ww-date-day:hover{background:#2d2d2d;color:#f0ca00}
.ww-date-day.other{color:#666}
.ww-date-day.selected{background:#f0ca00;color:#111;font-weight:800}
.ww-date-day.today{outline:1px solid #777}
.calendar-new-booking-dates .calendar-direct-date{cursor:pointer!important}
.calendar-new-booking-dates .calendar-direct-date::-webkit-calendar-picker-indicator{display:none!important;-webkit-appearance:none!important}


/* v151 — inline booking date calendar */
.calendar-new-booking-dates{position:relative!important}
.ww-inline-date-calendar{
  grid-column:1 / -1;
  width:100%;
  box-sizing:border-box;
  margin-top:10px;
  padding:12px;
  border:1px solid #3a3a3a;
  border-radius:14px;
  background:#151515;
  color:#fff;
  box-shadow:0 14px 35px rgba(0,0,0,.35);
}
.ww-inline-date-calendar.hidden{display:none!important}
.calendar-new-booking-dates input[data-ww-inline-calendar="1"]{
  cursor:pointer!important;
  caret-color:transparent!important;
}


/* v152 — reliable floating booking date picker */
.ww-floating-date-calendar{
  position:fixed;
  z-index:5000;
  box-sizing:border-box;
  padding:12px;
  border:1px solid #4a4a4a;
  border-radius:14px;
  background:#151515;
  color:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.65);
}
.ww-floating-date-calendar.hidden{display:none!important}
.ww-floating-date-calendar .ww-date-head{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px;margin-bottom:8px}
.ww-floating-date-calendar .ww-date-title{text-align:center}
.ww-floating-date-calendar .ww-date-nav{height:34px;border:1px solid #3b3b3b;border-radius:9px;background:#222;color:#fff;cursor:pointer}
.ww-floating-date-calendar .ww-date-week,
.ww-floating-date-calendar .ww-date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ww-floating-date-calendar .ww-date-week span{font-size:10px;color:#999;text-align:center;padding:3px 0}
.ww-floating-date-calendar .ww-date-day{height:34px;border:0;border-radius:8px;background:transparent;color:#eee;cursor:pointer}
.ww-floating-date-calendar .ww-date-day:hover{background:#2d2d2d;color:#f0ca00}
.ww-floating-date-calendar .ww-date-day.other{color:#666}
.ww-floating-date-calendar .ww-date-day.selected{background:#f0ca00;color:#111;font-weight:800}
.ww-floating-date-calendar .ww-date-day.today{outline:1px solid #777}
.calendar-new-booking-dates .ww-date-box{cursor:pointer!important}


/* Version 155 — robust scrollable diary with cell-local live data */
#calendar .calendar-month-view{
  --calendar-row-height:220px;
  max-height:min(68vh,760px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  position:relative!important;
}
#calendar .calendar-weekdays{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
}
#calendar .calendar-grid{
  grid-auto-rows:var(--calendar-row-height)!important;
}
#calendar .calendar-day{
  min-height:0!important;
  height:var(--calendar-row-height)!important;
}
#calendar .calendar-day-events{
  position:relative!important;
  z-index:6!important;
  display:grid!important;
  gap:3px!important;
}
#calendar .calendar-event{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  text-align:left!important;
  cursor:pointer!important;
}
#calendar .calendar-event span:first-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#calendar .calendar-day.month-start{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.16);
}
#calendar .calendar-month-marker{
  margin-left:6px;
  color:#8f8f8f;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
#calendar .calendar-booking-overlay{display:none!important}
@media(max-width:900px){
  #calendar .calendar-month-view{--calendar-row-height:180px;max-height:64vh!important}
}

/* Version 157 — scrollable rolling diary with original continuous multi-day bars */
#calendar .calendar-month-view{
  --calendar-row-height:220px;
  max-height:min(68vh,760px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  position:relative!important;
}
#calendar .calendar-weekdays{position:sticky!important;top:0!important;z-index:40!important}
#calendar .calendar-grid{grid-auto-rows:var(--calendar-row-height)!important}
#calendar .calendar-day{height:var(--calendar-row-height)!important;min-height:0!important;position:relative!important}
#calendar .calendar-booking-overlay{
  display:grid!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:39px!important;
  height:calc(var(--rolling-weeks) * var(--calendar-row-height))!important;
  bottom:auto!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  grid-template-rows:repeat(var(--rolling-weeks),var(--calendar-row-height))!important;
  pointer-events:none!important;
  z-index:12!important;
}
#calendar .calendar-range-bar{
  display:block!important;
  position:relative!important;
  pointer-events:auto!important;
  top:auto!important;
  align-self:start!important;
  margin:calc(30px + (var(--range-lane) * 21px)) 4px 0!important;
  height:18px!important;
  min-height:18px!important;
  line-height:16px!important;
  padding:1px 5px!important;
  font-size:9px!important;
  border-radius:4px!important;
  grid-row:calc(var(--range-row) + 1)!important;
  grid-column:calc(var(--range-col-start) + 1) / span var(--range-col-span)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:900px){
  #calendar .calendar-month-view{--calendar-row-height:180px;max-height:64vh!important}
}

/* v158 — booking date picker contained within the booking popup */
#calendarNewBookingDates .booking-date-field{
  cursor:pointer!important;
  caret-color:transparent!important;
}
#bookingDatePickerV158{
  grid-column:1 / -1;
  width:100%;
  box-sizing:border-box;
  margin-top:2px;
  padding:12px;
  border:1px solid #454545;
  border-radius:12px;
  background:#151515;
  color:#fff;
}
#bookingDatePickerV158.hidden{display:none!important}
.booking-date-picker-head-v158{
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.booking-date-picker-head-v158 strong{text-align:center}
.booking-date-picker-head-v158 button{
  height:36px;
  border:1px solid #3f3f3f;
  border-radius:9px;
  background:#222;
  color:#fff;
  font-size:21px;
  cursor:pointer;
}
.booking-date-week-v158,.booking-date-grid-v158{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
}
.booking-date-week-v158 span{
  padding:3px 0;
  color:#999;
  font-size:10px;
  text-align:center;
}
.booking-date-day-v158{
  height:34px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#eee;
  cursor:pointer;
}
.booking-date-day-v158:hover{background:#2d2d2d;color:#f0ca00}
.booking-date-day-v158.other{color:#666}
.booking-date-day-v158.selected{background:#f0ca00;color:#111;font-weight:800}
.booking-date-day-v158.today{outline:1px solid #888}


/* v159 — final native booking date picker fix.
   The actual date input owns the browser picker. Its native picker hit target
   fills the whole field, so clicking anywhere in the date box opens it. */
#calendarNewBookingDates .calendar-date-control{
  position:relative!important;
}
#calendarNewBookingDates input.booking-date-field[type="date"]{
  display:block!important;
  width:100%!important;
  min-height:44px!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  color-scheme:dark;
}
#calendarNewBookingDates input.booking-date-field[type="date"]::-webkit-calendar-picker-indicator{
  display:block!important;
  -webkit-appearance:auto!important;
  appearance:auto!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  cursor:pointer!important;
}


/* v160 — visual-only today styling + Add Another Vehicle safety build.
   Do not alter calendar/date-picker behaviour. */
#calendar .calendar-day.today{
  box-shadow:none!important;
}
#calendar .calendar-day.today .calendar-day-number{
  margin-bottom:18px!important;
  margin-top:4px!important;
}


/* v166 — keep Add Another Vehicle directly clickable above popup content */
#calendarAddAssignment{
  position:relative!important;
  z-index:50!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
#calendarEventAssignments{
  position:relative!important;
  z-index:1!important;
}

/* v167 — visual-only breathing room below current-date circle.
   Range bars use their own overlay, so move their lane stack down slightly.
   No calendar logic or interactions changed. */
#calendar .calendar-range-bar{
  margin:calc(42px + (var(--range-lane) * 21px)) 4px 0!important;
}

/* v170 — one-line diary labels + edge-only date resize handles.
   Built from the v167 keeper. The bar itself remains a normal popup click target. */
#calendar .calendar-range-bar{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#calendar .calendar-range-label{
  display:block!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  padding:0 7px!important;
}
#calendar .calendar-resize-handle{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:9px!important;
  z-index:8!important;
  cursor:ew-resize!important;
  pointer-events:auto!important;
  opacity:0!important;
  transition:opacity .12s ease!important;
}
#calendar .calendar-range-bar:hover .calendar-resize-handle,
#calendar .calendar-resize-handle:active{
  opacity:1!important;
}
#calendar .calendar-resize-handle::after{
  content:"";
  position:absolute;
  top:3px;
  bottom:3px;
  width:2px;
  border-radius:2px;
  background:currentColor;
  opacity:.8;
}
#calendar .calendar-resize-left{left:0!important}
#calendar .calendar-resize-left::after{left:3px}
#calendar .calendar-resize-right{right:0!important}
#calendar .calendar-resize-right::after{right:3px}


/* v172 — busy-week auto height + drag-to-date for Options and Confirmed jobs.
   Resize handles remain independent at the true start/end edges. */
#calendar .calendar-range-bar.calendar-option-draggable{
  cursor:grab!important;
}
#calendar .calendar-range-bar.calendar-option-draggable:active,
#calendar .calendar-range-bar.calendar-option-dragging{
  cursor:grabbing!important;
}
#calendar .calendar-range-bar.calendar-option-dragging{
  opacity:.72!important;
  z-index:30!important;
}
#calendar .calendar-day.calendar-drop-target{
  box-shadow:inset 0 0 0 2px rgba(240,202,0,.72)!important;
  background:rgba(240,202,0,.06)!important;
}
body.calendar-drag-active{
  user-select:none!important;
}

/* v173 — popup layout only: production details directly below dates. */
.calendar-popup-production-details{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:12px 0;
}
.calendar-popup-production-details .calendar-popup-detail-wide{
  grid-column:1 / -1;
}
.calendar-popup-production-details label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.calendar-popup-production-details label>span{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
@media (max-width:760px){
  .calendar-popup-production-details{grid-template-columns:1fr;}
}

/* v178 — Apple-style calendar drag preview */
.calendar-option-draggable{
  cursor:grab!important;
  touch-action:none;
}
.calendar-option-draggable:active{
  cursor:grabbing!important;
}
.calendar-option-dragging{
  opacity:.22!important;
}
.calendar-drag-floating{
  position:fixed!important;
  z-index:100000!important;
  margin:0!important;
  pointer-events:none!important;
  opacity:.92!important;
  transform:scale(1.025)!important;
  transform-origin:center center!important;
  box-shadow:0 10px 28px rgba(0,0,0,.42)!important;
  filter:brightness(1.08);
  transition:transform 90ms ease,opacity 90ms ease!important;
  overflow:hidden!important;
}
.calendar-drag-preview{
  pointer-events:none!important;
  opacity:.48!important;
  border-style:dashed!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset!important;
  animation:calendarDragSnapIn 90ms ease-out;
}
.calendar-day.calendar-drop-target{
  box-shadow:inset 0 0 0 2px rgba(255,205,48,.46)!important;
  background:rgba(255,205,48,.035)!important;
}
.calendar-drag-active,
.calendar-drag-active *{
  cursor:grabbing!important;
  user-select:none!important;
}
@keyframes calendarDragSnapIn{
  from{transform:scale(.985);opacity:.25}
  to{transform:scale(1);opacity:.48}
}

/* v179 — remove date-cell highlight while dragging; floating + snap preview remain */
#calendar .calendar-day.calendar-drop-target,
.calendar-day.calendar-drop-target{
  box-shadow:none!important;
  background:inherit!important;
}

/* v180 — Apple-style live resize preview + smaller floating booking */
#calendar .calendar-range-bar.calendar-resize-dragging{
  opacity:.22!important;
}
#calendar .calendar-range-bar.calendar-resize-preview{
  opacity:.52!important;
  border-style:dashed!important;
  animation:calendarResizeSnap 110ms ease-out;
  transition:opacity 110ms ease,transform 110ms ease!important;
}
.calendar-drag-floating{
  transform:scale(.965)!important;
  box-shadow:0 7px 20px rgba(0,0,0,.34)!important;
}
@keyframes calendarResizeSnap{
  from{transform:scaleX(.985);opacity:.30}
  to{transform:scaleX(1);opacity:.52}
}

/* Version 182 — copy booking + linked-copy indicator */
.calendar-copy-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
  margin:14px 0 10px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.calendar-copy-controls.hidden{display:none!important;}
.calendar-copy-controls label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.calendar-copy-controls label>span{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.calendar-copy-controls button{
  min-height:42px;
  white-space:nowrap;
}
#calendar .calendar-range-bar.has-linked-copy{
  padding-right:22px!important;
}
#calendar .calendar-range-bar.has-call-sheet.has-linked-copy{
  padding-right:38px!important;
}
.calendar-linked-copy-icon{
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  width:13px;
  height:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:.82;
}
.calendar-range-bar.has-call-sheet .calendar-linked-copy-icon{right:20px;}
.calendar-linked-copy-icon svg{
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(max-width:520px){
  .calendar-copy-controls{grid-template-columns:1fr;}
}


/* v183 — copy-date picker + compact diary right-click copy menu */
.calendar-copy-controls label{position:relative!important;}
#calendarCopyDate[type="date"]{
  display:block!important;
  width:100%!important;
  min-height:44px!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  color-scheme:dark;
  caret-color:transparent!important;
}
#calendarCopyDate[type="date"]::-webkit-calendar-picker-indicator{
  display:block!important;
  -webkit-appearance:auto!important;
  appearance:auto!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  cursor:pointer!important;
}
.calendar-bar-context-menu{
  position:fixed;
  z-index:10050;
  min-width:164px;
  padding:5px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(28,28,30,.97);
  box-shadow:0 10px 32px rgba(0,0,0,.42);
  backdrop-filter:blur(16px);
}
.calendar-bar-context-menu button{
  display:block;
  width:100%;
  padding:9px 11px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#fff;
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.calendar-bar-context-menu button:hover{
  background:rgba(255,255,255,.10);
}


/* v184 — linked-copy cleanup + always-open-at-top calendar popup */
#calendarEventCard.calendar-event-card{
  position:fixed!important;
  top:92px!important;
  bottom:16px!important;
  transform:none!important;
  max-height:calc(100vh - 108px)!important;
}
@media(max-width:700px){
  #calendarEventCard.calendar-event-card{
    top:88px!important;
    bottom:12px!important;
    max-height:calc(100vh - 100px)!important;
  }
}


/* Version 188 — cleaner progress action, one-stage back, matching copy button */
.calendar-event-actions{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
#calendarProgressButton{
  grid-column:1 / -1!important;
  width:100%!important;
}
#calendarBackToOption,
#calendarCancelItem,
#calendarSaveChanges{
  grid-column:auto!important;
}
#calendarCopyBooking{
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.15!important;
}
@media(max-width:760px){
  #calendarProgressButton{grid-column:1!important;}
}


/* v189 — linked booking status choice */
.linked-status-choice-shade{position:fixed;inset:0;z-index:10050;background:rgba(15,23,42,.28);display:flex;align-items:flex-start;justify-content:center;padding:92px 18px 24px;box-sizing:border-box}
.linked-status-choice{width:min(430px,100%);background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(15,23,42,.25);padding:22px}
.linked-status-choice strong{display:block;font-size:18px;margin-bottom:8px}
.linked-status-choice p{margin:0 0 18px;color:#475569;line-height:1.45}
.linked-status-choice-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.linked-status-choice-actions button{min-height:44px;font-size:15px;font-weight:700;border-radius:12px}

/* v196 — email/production popups must sit above calendar popup */
#driverEmailPreview,
#driverJobEmailPreview,
.email-preview-overlay{
  z-index:20000!important;
}
#driverEmailPreview .email-preview-card,
#driverJobEmailPreview .email-preview-card{
  position:relative;
  z-index:20001!important;
}

/* v209 — Other Documents use the same safe popup-only + pattern as Movement Orders */
.calendar-other-documents-wrap{position:relative;display:grid;gap:8px}
.calendar-other-documents-wrap>.calendar-file-drop:first-child{padding-right:52px}
.calendar-add-other-document{position:absolute;top:16px;right:12px;z-index:3;width:30px;height:30px;padding:0;border:1px solid #626262;border-radius:8px;background:#1b1b1b;color:#fff;font-size:20px;line-height:28px;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.calendar-add-other-document:hover{background:#181818;border-color:#777}
#calendarExtraOtherDocuments{display:grid;gap:8px}


/* v211 — iPhone/mobile-only usability layer.
   Everything here is width-gated so the desktop fleet app stays unchanged. */
@media (max-width:700px){
  html{-webkit-text-size-adjust:100%;scroll-padding-top:132px}
  body{overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}

  .topbar{
    height:64px!important;
    min-height:64px;
    padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))!important;
  }
  .brand{font-size:15px;line-height:1.05}
  .sub{font-size:9px;letter-spacing:1.35px}
  .supabase-header-controls{display:flex;gap:6px;align-items:center}
  #supabaseStatus,#supabaseSignOut{min-height:36px;padding:7px 9px;font-size:11px;white-space:nowrap}

  .shell{min-height:calc(100dvh - 64px)!important}
  .nav{
    position:sticky;
    top:64px;
    z-index:900;
    display:flex!important;
    flex-direction:row!important;
    gap:6px!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))!important;
    background:rgba(13,13,13,.96)!important;
    backdrop-filter:blur(14px);
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .navbtn{
    flex:0 0 auto;
    min-height:42px;
    padding:10px 13px!important;
    border:1px solid transparent;
    border-radius:11px!important;
    text-align:center!important;
    touch-action:manipulation;
  }
  .navbtn.active{border-color:#5e4b05}

  main{padding:14px 12px 26px!important;min-width:0}
  .view{width:100%;max-width:none!important;min-width:0}
  .heading{gap:12px!important;margin-bottom:15px!important}
  .heading h1,.calendar-page-head h1{font-size:25px!important;line-height:1.08}
  .heading .primary,.heading .secondary,.calendar-head-actions button{width:100%}
  .eyebrow{margin-bottom:5px}
  .muted{font-size:13px;line-height:1.45}

  button,.primary,.secondary,input,select,textarea{font-size:16px}
  button,.primary,.secondary{min-height:44px;touch-action:manipulation}
  input,select,textarea{min-height:46px;padding:12px!important}
  textarea{min-height:92px}

  .panel{padding:14px!important;border-radius:13px!important}
  .panelhead{gap:10px;align-items:flex-start;flex-wrap:wrap}
  .panelhead h2{font-size:18px}
  .card{padding:14px!important;align-items:flex-start;flex-wrap:wrap}
  .actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .actions>*{width:100%!important}

  .kpis{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .kpis .kpi-card-button{padding:13px!important;min-height:92px}
  .kpis .kpi-card-button span{font-size:11px}
  .kpis .kpi-card-button strong{font-size:27px;margin-top:6px}
  .home-job-panels,.future-jobs-grid{grid-template-columns:1fr!important}
  .home-job-panels{gap:12px!important}
  .fleet-map{height:260px!important}
  .map-vehicle-card{left:12px!important;right:12px!important;bottom:12px!important;width:auto!important;padding:14px!important}

  .job-date-tabs,.vehicle-filters{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:-12px;
    margin-right:-12px;
    padding:0 12px 8px;
  }
  .job-date-tabs::-webkit-scrollbar,.vehicle-filters::-webkit-scrollbar{display:none}
  .job-date-tab,.vehicle-filter{flex:0 0 auto;min-height:42px}

  .grid2,.uploads,.report-detail-grid,.profile-info-grid,.job-upload-grid{grid-template-columns:1fr!important}
  .profile-layout,.vehicle-profile-layout,.driver-profile-layout{grid-template-columns:1fr!important}
  .profile-summary{position:static!important;width:100%!important}
  .profile-list-card{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:13px!important;
    min-height:68px;
  }
  .profile-list-copy{min-width:0}
  .profile-list-copy strong,.profile-list-copy small{overflow-wrap:anywhere}
  .profile-list-stat{display:none!important}

  .drawer{top:64px!important;height:calc(100dvh - 64px)!important;width:100%!important;padding:16px 12px max(18px,env(safe-area-inset-bottom))!important}
  .drawer-row{align-items:flex-start!important;padding:13px!important}

  /* Calendar: phones default to Day agenda in JS; Week/Month stay available. */
  .calendar-page-head{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-bottom:12px}
  .calendar-head-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .calendar-toolbar{display:grid!important;gap:10px!important;padding:11px!important}
  .calendar-nav-controls{display:grid!important;grid-template-columns:44px auto 44px!important;gap:7px!important;align-items:center!important}
  #calendarMonthTitle{grid-column:1/-1!important;grid-row:1!important;text-align:center;font-size:17px!important;margin:0 0 4px!important}
  #calendarPrev{grid-column:1!important;grid-row:2!important}
  #calendarToday{grid-column:2!important;grid-row:2!important;width:100%!important}
  #calendarNext{grid-column:3!important;grid-row:2!important}
  .calendar-view-switch{display:grid!important;grid-template-columns:repeat(3,1fr)!important;width:100%!important;gap:6px!important}
  .calendar-view-switch button{min-width:0!important;width:100%!important;padding:9px 6px!important;font-size:13px!important}
  .calendar-options-bar{padding:10px!important;overflow:hidden}
  .calendar-inline-filters{display:flex!important;align-items:center;gap:12px!important;flex-wrap:wrap!important}
  .calendar-inline-key{display:none!important}
  .calendar-options-label{font-size:11px}
  .calendar-shell{min-width:0!important;width:100%!important}
  .calendar-main{min-width:0!important}
  .calendar-agenda{display:grid;gap:10px}
  .calendar-agenda-day{padding:0!important}
  .calendar-agenda-day h3{position:sticky;top:122px;z-index:3;background:#090909;padding:10px 2px 8px;font-size:15px}
  .calendar-agenda-row{
    display:grid!important;
    grid-template-columns:70px minmax(0,1fr)!important;
    gap:4px 10px!important;
    width:100%!important;
    min-height:64px!important;
    padding:12px!important;
    text-align:left!important;
  }
  .calendar-agenda-row span{grid-row:1/3;align-self:center}
  .calendar-agenda-row strong,.calendar-agenda-row small{min-width:0;white-space:normal!important;overflow-wrap:anywhere}

  /* Month remains usable if selected: scroll rather than crush seven columns. */
  .calendar-month-view{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .calendar-weekdays,.calendar-grid,#calendarBookingOverlay{min-width:700px!important}
  .calendar-day{min-height:118px!important}

  #calendarEventCard.calendar-event-card{
    top:8px!important;
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    width:auto!important;
    max-height:none!important;
    border-radius:16px!important;
    padding:15px!important;
    z-index:5000!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(18px,env(safe-area-inset-bottom))!important;
  }
  .calendar-popup-production-details,.calendar-new-booking-dates,.calendar-document-grid{grid-template-columns:1fr!important}
  .calendar-popup-assignment-row{grid-template-columns:1fr!important;gap:9px!important}
  .calendar-event-actions{grid-template-columns:1fr!important;gap:8px!important}
  .calendar-event-actions>button,#calendarProgressButton,#calendarSaveChanges,#calendarCancelItem{min-height:48px!important;width:100%!important}
  .calendar-copy-controls{grid-template-columns:1fr!important}

  .simple-calendar-overlay{align-items:flex-end!important;padding:8px!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
  .simple-calendar-card{max-height:92dvh;overflow:auto;border-radius:16px 16px 10px 10px!important;padding:16px!important}
  .simple-calendar-actions{grid-template-columns:1fr!important}
  .simple-calendar-actions>*{width:100%!important}

  .email-preview-overlay{padding:8px!important;align-items:flex-end!important}
  .email-preview-card{width:100%!important;max-height:92dvh!important;overflow:auto!important;border-radius:16px!important}
}

@media (max-width:390px){
  .sub{display:none}
  .kpis{grid-template-columns:1fr 1fr!important}
  .calendar-head-actions{grid-template-columns:1fr!important}
  #supabaseStatus{max-width:126px;overflow:hidden;text-overflow:ellipsis}
}

/* v214 — iPhone continuous Week calendar. Desktop calendar is untouched. */
@media (max-width:700px){
  #calendarAgendaView.calendar-agenda{
    max-height:calc(100dvh - 225px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    scroll-behavior:auto;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  .mobile-calendar-week{
    display:grid;
    gap:8px;
    padding:0 0 18px;
    margin:0 0 8px;
    border-bottom:2px solid rgba(255,255,255,.12);
  }
  .mobile-calendar-week-title{
    position:sticky;
    top:0;
    z-index:5;
    padding:10px 4px 8px;
    background:#090909;
    font-weight:800;
    font-size:15px;
    letter-spacing:.01em;
  }
  #calendar .mobile-continuous-day h3{
    position:static!important;
    top:auto!important;
    padding:7px 2px 5px!important;
    margin:0!important;
    font-size:14px!important;
  }
  .mobile-calendar-empty{
    min-height:42px;
    display:flex;
    align-items:center;
    padding:0 12px;
    border:1px dashed rgba(255,255,255,.12);
    border-radius:10px;
    color:rgba(255,255,255,.42);
    font-size:13px;
  }
}

/* v216 — iPhone rotate-to-month experience. */
.mobile-month-rotate-prompt{
  position:fixed;
  inset:0;
  z-index:30000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px);
}
.mobile-month-rotate-prompt.hidden{display:none!important}
.mobile-month-rotate-card{
  width:min(330px,100%);
  padding:24px 20px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:#161616;
  color:#fff;
  text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.mobile-month-rotate-icon{
  display:block;
  font-size:42px;
  line-height:1;
  margin-bottom:12px;
  transform:rotate(90deg);
}
.mobile-month-rotate-card strong{display:block;font-size:19px;margin-bottom:7px}
.mobile-month-rotate-card span{display:block;color:#bbb;font-size:14px;line-height:1.4}

@media (max-width:1000px) and (max-height:700px) and (orientation:landscape){
  body.mobile-landscape-month{overflow:hidden!important;background:#090909}
  body.mobile-landscape-month .topbar,
  body.mobile-landscape-month .nav,
  body.mobile-landscape-month #calendar .calendar-page-head,
  body.mobile-landscape-month #calendar .calendar-toolbar,
  body.mobile-landscape-month #calendar .calendar-options-bar{
    display:none!important;
  }
  body.mobile-landscape-month .shell{display:block!important;min-height:100dvh!important}
  body.mobile-landscape-month main{padding:0!important;height:100dvh!important;overflow:hidden!important}
  body.mobile-landscape-month #calendar{
    display:block!important;
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.mobile-landscape-month #calendar .calendar-shell,
  body.mobile-landscape-month #calendar .calendar-main,
  body.mobile-landscape-month #calendarMonthView{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  body.mobile-landscape-month #calendarAgendaView{display:none!important}
  body.mobile-landscape-month #calendarMonthView{display:block!important}
  body.mobile-landscape-month .calendar-weekdays,
  body.mobile-landscape-month .calendar-grid,
  body.mobile-landscape-month #calendarBookingOverlay{
    min-width:0!important;
    width:100%!important;
  }
  body.mobile-landscape-month .calendar-weekdays{position:sticky;top:0;z-index:30;background:#111}
  body.mobile-landscape-month .calendar-weekdays div{padding:7px 3px!important;font-size:11px!important}
  body.mobile-landscape-month .calendar-day{min-height:92px!important}
  body.mobile-landscape-month .calendar-day-number{font-size:11px!important}
  body.mobile-landscape-month .calendar-event,
  body.mobile-landscape-month .calendar-range-bar{font-size:9px!important;line-height:1.15!important}
}

/* v217 — iPhone calendar simplification. Desktop remains unchanged. */
@media (max-width:700px){
  /* Phone diary is controlled by orientation, so these controls are unnecessary. */
  #calendar .calendar-view-switch,
  #calendar .calendar-options-bar,
  #calendar .calendar-page-head p.muted{
    display:none!important;
  }

  /* With filters/view buttons gone, give the week diary more vertical room. */
  #calendarAgendaView.calendar-agenda{
    max-height:calc(100dvh - 175px)!important;
  }
}

/* v222 — iPhone landscape is a true calendar-only view.
   Keep desktop and portrait untouched. */
@media (orientation: landscape) and (max-height: 700px){
  body.mobile-landscape-month{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    overflow:hidden!important;
    background:#090909!important;
  }

  /* In rotation mode, absolutely everything except the calendar canvas disappears. */
  body.mobile-landscape-month > .topbar,
  body.mobile-landscape-month .nav,
  body.mobile-landscape-month #calendar > .calendar-page-head,
  body.mobile-landscape-month #calendar > .calendar-toolbar,
  body.mobile-landscape-month #calendar > .calendar-options-bar,
  body.mobile-landscape-month #calendar .calendar-sidebar,
  body.mobile-landscape-month #calendarAgendaView,
  body.mobile-landscape-month #mobileMonthRotatePrompt{
    display:none!important;
  }

  body.mobile-landscape-month .shell{
    display:block!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }

  body.mobile-landscape-month main{
    display:block!important;
    width:100%!important;
    height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  body.mobile-landscape-month main > .view:not(#calendar){display:none!important}

  body.mobile-landscape-month #calendar{
    position:fixed!important;
    left:env(safe-area-inset-left,0px)!important;
    right:env(safe-area-inset-right,0px)!important;
    top:env(safe-area-inset-top,0px)!important;
    bottom:env(safe-area-inset-bottom,0px)!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:4px!important;
    overflow:hidden!important;
    background:#090909!important;
    z-index:5000!important;
  }

  body.mobile-landscape-month #calendar .calendar-shell,
  body.mobile-landscape-month #calendar .calendar-main{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
  }

  body.mobile-landscape-month #calendarMonthView{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    border-radius:8px!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  body.mobile-landscape-month #calendar .calendar-weekdays{
    top:0!important;
    margin:0!important;
  }
}

/* v223 — centre the calendar in the visible iPhone landscape area. */
@media (orientation: landscape) and (max-height: 700px){
  body.mobile-landscape-month #calendar{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:max(6px,env(safe-area-inset-top,0px)) max(6px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))!important;
    box-sizing:border-box!important;
  }
  body.mobile-landscape-month #calendar .calendar-shell,
  body.mobile-landscape-month #calendar .calendar-main{
    width:100%!important;
    height:auto!important;
    max-height:100%!important;
  }
  body.mobile-landscape-month #calendarMonthView{
    width:100%!important;
    height:auto!important;
    max-height:calc(100dvh - 16px)!important;
    margin:auto 0!important;
  }
}


/* v228 — compact portrait calendar controls and quicker phone rotation. */
@media (max-width:700px) and (orientation:portrait){
  #calendar .calendar-head-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:min(100%,300px)!important;
    margin:0 auto!important;
  }
  #calendar .calendar-head-actions #calendarQuickCreateBooking,
  #calendar .calendar-head-actions #calendarQuickOther{
    width:100%!important;
    min-height:34px!important;
    padding:7px 8px!important;
    border-radius:9px!important;
    font-size:12px!important;
    line-height:1.15!important;
    font-weight:800!important;
  }
  #calendar .mobile-calendar-week-title{
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    width:max-content!important;
    max-width:90%!important;
    margin:0 auto 8px!important;
    padding:7px 11px!important;
    border:1px solid #5f4b00!important;
    border-radius:9px!important;
    background:#171717!important;
    color:var(--yellow)!important;
    font-size:12px!important;
    line-height:1.15!important;
    font-weight:800!important;
    text-align:center!important;
    letter-spacing:0!important;
  }
}

/* Keep the compact phone landscape month light and quick to paint. */
@media (orientation:landscape) and (max-height:700px){
  body.mobile-landscape-month .calendar-day{
    min-height:64px!important;
  }
}

/* v229 — cleaner phone portrait controls + instant landscape chrome suppression. */
@media (max-width:700px) and (orientation:portrait){
  /* Two equal compact pill controls, matching the small top action style. */
  #calendar .calendar-head-actions{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    margin:8px auto 10px!important;
  }
  #calendar .calendar-head-actions #calendarQuickCreateBooking,
  #calendar .calendar-head-actions #calendarQuickOther{
    flex:0 0 136px!important;
    width:136px!important;
    min-width:136px!important;
    max-width:136px!important;
    min-height:34px!important;
    height:34px!important;
    padding:0 12px!important;
    border-radius:999px!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }

  /* The continuous-week diary no longer needs a separate date/week badge. */
  #calendar .mobile-calendar-week-title{
    display:none!important;
  }

  /* Phone diary does not need the desktop helper copy. */
  #calendar .calendar-page-head .muted{
    display:none!important;
  }
}

/* Apply this immediately from CSS when an iPhone-sized viewport rotates.
   Do not wait for the JS body class, which prevents the brief desktop-text flash. */
@media (orientation:landscape) and (max-height:700px){
  body > header,
  body > .app-header,
  header.app-header,
  .topbar,
  .main-nav,
  nav.app-nav,
  #calendar .calendar-page-head,
  #calendar .calendar-toolbar,
  #calendar .calendar-options-bar,
  #calendar .mobile-calendar-week-title,
  #calendar .calendar-event-card:not(.hidden){
    display:none!important;
  }

  #calendar:not(.hidden){
    padding:max(6px,env(safe-area-inset-top,0px)) max(6px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))!important;
  }
}


/* v230 — phone portrait cleanup + instant pre-rendered orientation swap. */
@media (max-width:700px) and (orientation:portrait){
  /* Restore the cleaner v228 rectangular action buttons. */
  #calendar .calendar-head-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:min(100%,300px)!important;
    margin:0 auto 10px!important;
  }
  #calendar .calendar-head-actions #calendarQuickCreateBooking,
  #calendar .calendar-head-actions #calendarQuickOther{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:34px!important;
    padding:7px 8px!important;
    border-radius:9px!important;
    font-size:12px!important;
    line-height:1.15!important;
    font-weight:800!important;
    white-space:normal!important;
  }

  /* Phone portrait no longer shows the week/date navigation box at all. */
  #calendar .calendar-toolbar,
  #calendar .calendar-options-bar,
  #calendar .mobile-calendar-week-title,
  #calendar .calendar-page-head .muted{
    display:none!important;
  }

  /* Week diary is the only visible calendar body in portrait. */
  #calendar #calendarMonthView{display:none!important;}
  #calendar #calendarAgendaView{display:block!important;}
}

/* Instant phone landscape swap: Month is already rendered in the background. */
@media (orientation:landscape) and (max-height:700px){
  #calendar:not(.hidden) #calendarMonthView{display:block!important;}
  #calendar:not(.hidden) #calendarAgendaView{display:none!important;}
  #calendar:not(.hidden) .calendar-toolbar,
  #calendar:not(.hidden) .calendar-options-bar,
  #calendar:not(.hidden) .calendar-page-head,
  #calendar:not(.hidden) .mobile-calendar-week-title{display:none!important;}
}

/* v231 desktop right-drag copy cue */
.calendar-copy-drag-floating {
  opacity: .92;
  outline: 2px dashed currentColor;
  outline-offset: 2px;
}
/* v234 — busy-day live insertion preview while dragging/copying on desktop */
@media (min-width: 901px) {
  #calendarBookingOverlay .calendar-range-bar.calendar-live-reflow {
    transition: top 120ms ease, transform 120ms ease;
  }
  #calendarBookingOverlay .calendar-drag-preview {
    transition: top 120ms ease, left 90ms ease, width 90ms ease;
  }
}

/* v235: dashboard job cards open full booking information */
#dashboard .dashboard-booking-card{cursor:pointer;}
#dashboard .dashboard-booking-card:hover{transform:translateY(-1px);}
#dashboard .dashboard-booking-card:focus-visible{outline:2px solid currentColor;outline-offset:2px;}

/* v237 — dashboard booking details stay on Dashboard */
.dashboard-booking-overlay{
  position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.52);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.dashboard-booking-overlay.hidden{display:none!important;}
.dashboard-booking-popup{
  position:relative;width:min(900px,96vw);max-height:90vh;overflow:auto;
  background:var(--panel,#fff);border-radius:18px;padding:28px;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.dashboard-booking-popup h2{margin-top:2px;margin-bottom:20px;}
.dashboard-booking-close{position:absolute;right:14px;top:14px;}
.dashboard-booking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.dashboard-booking-grid article{border:1px solid rgba(127,127,127,.22);border-radius:12px;padding:12px 14px;min-width:0;}
.dashboard-booking-grid article.wide{grid-column:1/-1;}
.dashboard-booking-grid article>span{display:block;font-size:.78rem;opacity:.66;margin-bottom:4px;}
.dashboard-booking-grid strong{display:block;white-space:pre-wrap;overflow-wrap:anywhere;}
.dashboard-booking-assignments{display:grid;gap:7px;}
.dashboard-booking-assignment{display:grid;grid-template-columns:minmax(110px,1fr) minmax(120px,1.3fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:9px;background:rgba(127,127,127,.08);}
.dashboard-booking-actions{display:flex;justify-content:flex-end;margin-top:18px;}
@media(max-width:700px){
  .dashboard-booking-overlay{padding:10px;align-items:flex-start;}
  .dashboard-booking-popup{width:100%;max-height:calc(100vh - 20px);padding:22px 16px 16px;border-radius:14px;}
  .dashboard-booking-grid{grid-template-columns:1fr;}
  .dashboard-booking-grid article.wide{grid-column:auto;}
  .dashboard-booking-assignment{grid-template-columns:1fr;gap:2px;}
  .dashboard-booking-actions .secondary{width:100%;}
}

/* v240 — calendar booking popup close button stays pinned in the top-right corner */
#calendarEventCard.calendar-event-card > #closeCalendarEventCard.map-card-close{
  position:fixed!important;
  top:104px!important;
  right:36px!important;
  margin:0!important;
  float:none!important;
  align-self:auto!important;
  z-index:5100!important;
}

@media(max-width:700px){
  #calendarEventCard.calendar-event-card > #closeCalendarEventCard.map-card-close{
    top:18px!important;
    right:18px!important;
  }
}

/* v244: cleaner categorised vehicle list (display-only) */
#vehicleList{display:block;}
.vehicle-list-category{margin:0 0 24px;}
.vehicle-list-category-title{margin:0 0 10px;padding:0 2px;color:var(--yellow);font-size:14px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;}
.vehicle-list-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.vehicle-list-card{grid-template-columns:minmax(0,1fr) auto 22px;}
@media(max-width:900px){.vehicle-list-category-grid{grid-template-columns:1fr;}}
@media(max-width:620px){.vehicle-list-card{grid-template-columns:minmax(0,1fr) auto 20px;}}


/* v252 — real interactive Leaflet fleet map */
.fleet-map.leaflet-container{
  background:#171717;
  border:1px solid #2e392f;
  font-family:inherit;
}
.fleet-map .leaflet-control-zoom a{
  background:#111;
  color:#fff;
  border-color:#333;
}
.fleet-map .leaflet-control-zoom a:hover{background:#242424;color:var(--yellow)}
.fleet-map .leaflet-control-attribution{
  background:rgba(12,12,12,.78);
  color:#aaa;
  font-size:10px;
}
.fleet-map .leaflet-control-attribution a{color:#ddd}
.ww-live-marker-wrap{background:transparent;border:0}
.ww-live-marker{
  position:relative;
  transform:translate(-50%,-50%);
  width:max-content;
  text-align:center;
  cursor:pointer;
}
.ww-live-marker .marker-dot{
  width:20px;
  height:20px;
  border:4px solid #fff;
  border-radius:50%;
  display:block;
  margin:auto;
  box-shadow:0 2px 12px rgba(0,0,0,.6);
}
.ww-live-marker.to-location .marker-dot{background:#38c774}
.ww-live-marker.on-location .marker-dot{background:#e5a828}
.ww-live-marker.to-base .marker-dot{background:#4c96f5}
.ww-live-marker.complete .marker-dot{background:#7bcf7b}
.ww-live-marker .marker-label{
  display:block;
  margin-top:7px;
  padding:5px 8px;
  background:rgba(5,5,5,.9);
  color:#fff;
  border:1px solid #3d3d3d;
  border-radius:8px;
  white-space:nowrap;
  font-size:11px;
  font-weight:900;
  box-shadow:0 2px 9px rgba(0,0,0,.35);
}
.ww-live-marker.focused .marker-dot{
  outline:5px solid rgba(242,183,5,.3);
  transform:scale(1.18);
}

/* v253 - live map loading/failure indicator */
.fleet-map-boot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5;color:#cfcfcf;font-weight:800;letter-spacing:.01em;background:rgba(10,15,11,.42);pointer-events:none}

/* v260 live GPS diagnostics */
.live-gps-feed-status{margin:5px 0 0;color:#aaa;font-size:12px;font-weight:800}
.live-gps-feed-status.ok{color:#65d891}
.live-gps-feed-status.error{color:#ff8a80}

/* v263 — Mac Calendar-style right-click menu */
.calendar-bar-context-menu{
  min-width:210px;
  overflow:visible;
}
.calendar-context-parent{position:relative;}
.calendar-context-calendar{display:flex!important;align-items:center;justify-content:space-between;gap:18px;}
.calendar-context-arrow{font-size:22px;line-height:14px;opacity:.8;margin-left:auto;}
.calendar-context-submenu{
  display:none;
  position:absolute;
  left:calc(100% + 4px);
  top:-5px;
  min-width:235px;
  padding:5px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(28,28,30,.98);
  box-shadow:0 10px 32px rgba(0,0,0,.42);
  backdrop-filter:blur(16px);
  z-index:10051;
}
.calendar-context-parent:hover .calendar-context-submenu,
.calendar-context-parent:focus-within .calendar-context-submenu{display:block;}
.calendar-context-submenu button{display:flex!important;align-items:center;gap:7px;white-space:nowrap;}
.calendar-context-tick{display:inline-block;width:15px;flex:0 0 15px;text-align:center;}
.calendar-context-submenu .is-current{font-weight:600;}
.calendar-context-separator{height:1px;background:rgba(255,255,255,.13);margin:5px 4px;}


/* v264 — larger, more reliable start/end resize targets on calendar bookings */
#calendar .calendar-resize-handle{width:16px!important;touch-action:none!important;}
#calendar .calendar-resize-left{left:-3px!important;}
#calendar .calendar-resize-right{right:-3px!important;}
#calendar .calendar-resize-left::after{left:6px!important;}
#calendar .calendar-resize-right::after{right:6px!important;}
#calendar .calendar-range-bar.calendar-resize-dragging{cursor:ew-resize!important;}


/* v267 – simplified calendar booking popup. Status/cancel actions now live in the right-click Calendar menu. */
#calendarCopyControls,
#calendarCancelItem,
#calendarBackToOption,
#calendarSaveChanges,
#calendarProgressButton {
  display: none !important;
}


/* v273 — Calendar Entries (MOT / Other) use the same solid near-black diary style. */
.calendar-range-bar.other,
.calendar-event.other,
.calendar-agenda-row.other{
  --event:#111!important;
  border:1px solid #777!important;
  box-shadow:inset 0 0 0 1px #222!important;
}

/* v274 — make New Calendar Entry use the same diary side-sheet look as New Booking */
#calendarOtherOverlay.simple-calendar-overlay{
  position:fixed!important;
  inset:0!important;
  background:transparent!important;
  z-index:10000!important;
  display:block!important;
  padding:0!important;
  pointer-events:none!important;
}
#calendarOtherOverlay.simple-calendar-overlay.hidden{display:none!important}
#calendarOtherOverlay .simple-calendar-card{
  position:fixed!important;
  right:28px!important;
  top:92px!important;
  bottom:16px!important;
  width:min(430px,calc(100vw - 40px))!important;
  max-height:calc(100vh - 108px)!important;
  overflow:auto!important;
  box-sizing:border-box!important;
  background:#0c0c0c!important;
  border:1px solid #665100!important;
  border-radius:16px!important;
  padding:20px!important;
  box-shadow:0 24px 70px rgba(0,0,0,.65)!important;
  pointer-events:auto!important;
}
#calendarOtherOverlay .simple-calendar-head{
  margin-bottom:18px!important;
  padding-right:34px!important;
}
#calendarOtherOverlay .simple-calendar-head .eyebrow{
  margin:0 0 4px!important;
}
#calendarOtherOverlay .simple-calendar-head h2{
  margin:0!important;
  font-size:22px!important;
}
#calendarOtherOverlay .simple-calendar-close{
  position:absolute!important;
  right:12px!important;
  top:12px!important;
  width:34px!important;
  height:34px!important;
  border:1px solid #343434!important;
  border-radius:9px!important;
  background:#151515!important;
  color:#ddd!important;
  font-size:22px!important;
  line-height:30px!important;
  padding:0!important;
}
#calendarOtherOverlay .simple-calendar-form{
  display:grid!important;
  gap:11px!important;
  margin:18px 0!important;
}
#calendarOtherOverlay .simple-calendar-form label{
  padding:12px!important;
  border:1px solid #2c2c2c!important;
  border-radius:11px!important;
  background:#111!important;
  gap:7px!important;
}
#calendarOtherOverlay .simple-calendar-form input,
#calendarOtherOverlay .simple-calendar-form select,
#calendarOtherOverlay .simple-calendar-form textarea{
  background:#0b0b0b!important;
  border:1px solid #3a3a3a!important;
  border-radius:9px!important;
}
#calendarOtherOverlay .simple-calendar-dates{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:11px!important;
}
#calendarOtherOverlay .simple-calendar-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin-top:18px!important;
}
#calendarOtherOverlay .simple-calendar-actions > span{display:none!important}
#calendarOtherOverlay .simple-calendar-actions > button{
  width:100%!important;
  min-height:46px!important;
  border-radius:10px!important;
  box-sizing:border-box!important;
}
#calendarOtherOverlay #calendarOtherDelete{grid-column:1 / -1!important}
@media(max-width:700px){
  #calendarOtherOverlay .simple-calendar-card{
    right:8px!important;
    left:8px!important;
    top:88px!important;
    bottom:12px!important;
    width:auto!important;
    max-height:calc(100vh - 100px)!important;
  }
  #calendarOtherOverlay .simple-calendar-dates{grid-template-columns:1fr!important}
}

/* v275 — Vehicle Defects */
.defects-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.defects-heading h1{margin:2px 0 4px}.defect-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.defect-kpi{appearance:none;text-align:left;padding:18px 20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-radius:14px;color:inherit;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.12)}.defect-kpi:hover{border-color:rgba(214,168,50,.38);transform:translateY(-1px)}.defect-kpi span{display:block;color:var(--muted,#aeb5bd);font-size:13px;margin-bottom:7px}.defect-kpi strong{font-size:30px;line-height:1}.defect-kpi-urgent strong{color:#ff756b}.defect-kpi-complete strong{color:#68c785}.defects-panel{padding:0!important;overflow:hidden}.defect-toolbar{display:flex;gap:10px;padding:14px;border-bottom:1px solid rgba(255,255,255,.08)}.defect-toolbar select,.defect-toolbar input{width:auto;min-width:170px;margin:0;background:rgba(7,11,15,.72);border:1px solid rgba(255,255,255,.12);color:inherit;border-radius:9px;padding:10px 12px}.defect-toolbar input{min-width:260px;flex:1;max-width:420px}.defect-table-wrap{overflow:auto}.defect-table{width:100%;border-collapse:collapse;min-width:920px}.defect-table th{padding:12px 14px;text-align:left;color:#aeb5bd;font-weight:600;font-size:12px;border-bottom:1px solid rgba(255,255,255,.08)}.defect-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.065);vertical-align:middle;font-size:13px}.defect-row{cursor:pointer;transition:.15s ease}.defect-row:hover{background:rgba(255,255,255,.035)}.defect-table td>strong,.defect-table td>small{display:block}.defect-table td>small{color:#8f98a2;margin-top:3px;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.defect-vehicle-cell{display:flex;gap:10px;align-items:center;min-width:180px}.defect-vehicle-cell img,.defect-vehicle-icon{width:46px;height:34px;border-radius:6px;object-fit:cover;background:#13191f;display:grid;place-items:center}.defect-vehicle-cell strong,.defect-vehicle-cell small{display:block}.defect-vehicle-cell small{color:#8f98a2;margin-top:2px}.defect-priority{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.defect-priority i{width:8px;height:8px;border-radius:50%;background:#e8bd42}.defect-priority.urgent i{background:#ff6b62}.defect-priority.offroad i{background:#ff3e36;box-shadow:0 0 0 4px rgba(255,62,54,.12)}.defect-status{display:inline-flex;padding:5px 9px;border-radius:7px;background:#644f07;color:#ffd865;white-space:nowrap}.defect-status.repair-booked{background:#604411;color:#ffc968}.defect-status.being-repaired{background:#65380d;color:#ffb66c}.defect-status.completed{background:#174d29;color:#7de39a}.defect-chevron{font-size:24px;color:#9aa1a8}.defect-empty{text-align:center;padding:36px;color:#9aa1a8}.defect-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:900}.defect-drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,96vw);z-index:910;background:#10161c;border-left:1px solid rgba(255,255,255,.12);box-shadow:-24px 0 60px rgba(0,0,0,.45);overflow:auto}.defect-drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px 16px;background:rgba(16,22,28,.97);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}.defect-drawer-head h2{margin:3px 0 0}.drawer-x{border:0;background:transparent;color:#fff;font-size:30px;line-height:1;cursor:pointer}.defect-form{padding:20px 24px 28px}.defect-form>label,.defect-grid label{display:block;margin-bottom:14px}.defect-form input,.defect-form select,.defect-form textarea{width:100%;box-sizing:border-box}.defect-label,.defect-section-title{display:block;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#d3aa38;margin:4px 0 10px}.defect-photo-section{margin:4px 0 17px}.defect-photo-previews{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:9px}.defect-photo-thumb{position:relative;width:92px;height:72px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.13)}.defect-photo-thumb img{width:100%;height:100%;object-fit:cover}.defect-photo-thumb button{position:absolute;top:4px;right:4px;width:23px;height:23px;border:0;border-radius:50%;background:rgba(0,0,0,.75);color:#fff;cursor:pointer}.defect-add-photo{display:inline-flex!important;width:auto!important;padding:9px 12px;border:1px dashed rgba(255,255,255,.25);border-radius:8px;cursor:pointer;color:#c5cbd1}.defect-status-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:5px 0 22px;position:relative}.defect-status-steps:before{content:"";position:absolute;left:12.5%;right:12.5%;top:16px;height:2px;background:#3a434c}.defect-status-steps button{position:relative;z-index:1;border:0;background:transparent;color:#8f98a2;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px}.defect-status-steps button:before{content:"";position:absolute;top:0;width:32px;height:32px;border-radius:50%;background:#59636e;z-index:-1}.defect-status-steps button{padding-top:8px}.defect-status-steps button span{margin-top:12px}.defect-status-steps button.active:before{background:#b98c16}.defect-status-steps button.current:before{background:#d8a61e;box-shadow:0 0 0 4px rgba(216,166,30,.13)}.defect-status-steps button.active{color:#fff}.defect-repair-box{padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}.defect-form-actions{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}.defect-form-actions .danger{margin-right:auto}.defect-save-state{color:#73d28e;font-size:12px;margin-left:auto}.defect-form-actions .defect-save-state:empty{margin-left:auto}.defect-form-actions .defect-save-state:not(:empty)+button{margin-left:0}@media(max-width:900px){.defect-kpis{grid-template-columns:repeat(2,1fr)}.defect-toolbar{flex-wrap:wrap}.defect-toolbar input{max-width:none}.defects-heading{align-items:center}}@media(max-width:600px){.defect-kpis{grid-template-columns:1fr 1fr}.defect-kpi{padding:14px}.defect-kpi strong{font-size:24px}.defect-drawer{width:100vw}.defect-form{padding:16px}.defect-grid{grid-template-columns:1fr!important}.defect-status-steps button span{font-size:10px}}

/* v276 — Compliance & Documents */
.compliance-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}.compliance-heading h1{margin:.18rem 0 .3rem}.compliance-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.compliance-kpi{appearance:none;text-align:left;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:16px;padding:17px 18px;color:var(--text);cursor:pointer;min-height:92px}.compliance-kpi:hover{border-color:rgba(226,174,45,.45);transform:translateY(-1px)}.compliance-kpi span{display:block;color:var(--muted);font-size:.82rem;margin-bottom:8px}.compliance-kpi strong{font-size:1.9rem;line-height:1}.compliance-kpi-warning strong{color:#f2bd3c}.compliance-kpi-danger strong{color:#ef6b62}.compliance-panel{padding:0;overflow:hidden}.compliance-toolbar{display:grid;grid-template-columns:220px 220px minmax(220px,1fr);gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}.compliance-toolbar select,.compliance-toolbar input{margin:0}.compliance-table-wrap{overflow:auto}.compliance-table{width:100%;border-collapse:collapse;min-width:980px}.compliance-table th{padding:12px 14px;text-align:left;color:var(--muted);font-size:.76rem;font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}.compliance-table td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.055);vertical-align:middle}.compliance-table tr:last-child td{border-bottom:0}.compliance-row{cursor:pointer}.compliance-row:hover{background:rgba(255,255,255,.025)}.compliance-table td strong,.compliance-table td small{display:block}.compliance-table td small{color:var(--muted);margin-top:3px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compliance-status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:.76rem;font-weight:800;white-space:nowrap}.compliance-status.valid{background:rgba(53,167,89,.16);color:#85db9c}.compliance-status.due{background:rgba(232,169,26,.16);color:#f2c34f}.compliance-status.expired{background:rgba(218,67,59,.18);color:#ff817a}.compliance-status.no-expiry{background:rgba(118,131,151,.15);color:#b5becb}.compliance-pdf-pill{display:inline-block;background:rgba(197,145,25,.16);border:1px solid rgba(226,174,45,.28);color:#f1c34d;border-radius:7px;padding:3px 7px;font-size:.72rem;font-weight:900}.compliance-actions-cell{display:flex;align-items:center;justify-content:flex-end;gap:10px}.compliance-actions-cell .secondary{padding:6px 10px;font-size:.76rem}.compliance-filter-hidden{display:none}.compliance-empty{padding:32px;text-align:center;color:var(--muted)}
.compliance-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:899}.compliance-drawer{position:fixed;right:0;top:0;bottom:0;width:min(560px,94vw);background:#11161c;border-left:1px solid rgba(255,255,255,.09);box-shadow:-24px 0 60px rgba(0,0,0,.38);z-index:900;overflow:auto}.compliance-drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;background:rgba(17,22,28,.96);backdrop-filter:blur(12px);padding:21px 24px 16px;border-bottom:1px solid var(--line)}.compliance-drawer-head h2{margin:3px 0 0}.compliance-form{padding:20px 24px 28px;display:grid;gap:14px}.compliance-grid{gap:12px}.compliance-form label{display:grid;gap:7px}.compliance-form textarea{resize:vertical}.field-hint{font-size:.72rem;color:var(--muted);font-weight:400}.compliance-pdf-upload{padding:14px;border:1px dashed rgba(226,174,45,.32);border-radius:12px;background:rgba(226,174,45,.035)}.compliance-pdf-upload input{margin-top:3px}.compliance-file-actions{display:flex;gap:8px;flex-wrap:wrap}.compliance-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;border-top:1px solid var(--line);padding-top:17px;margin-top:2px}.compliance-form-actions .danger{margin-right:auto}.compliance-save-state{color:#8bd59d;font-size:.8rem;margin-right:auto}
@media(max-width:900px){.compliance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.compliance-toolbar{grid-template-columns:1fr}.compliance-heading{align-items:flex-start}.compliance-heading .primary{white-space:nowrap}}@media(max-width:560px){.compliance-heading{display:grid}.compliance-kpis{grid-template-columns:1fr 1fr;gap:8px}.compliance-kpi{padding:13px;min-height:78px}.compliance-kpi strong{font-size:1.45rem}.compliance-drawer{width:100vw}.compliance-form,.compliance-drawer-head{padding-left:16px;padding-right:16px}.compliance-grid{grid-template-columns:1fr}.compliance-file-actions{display:grid;grid-template-columns:1fr}.compliance-form-actions{flex-wrap:wrap}}


/* v278 — keep the desktop left navigation visible while the page scrolls */
@media (min-width: 851px){
  .nav{
    position:sticky;
    top:76px;
    align-self:start;
    height:calc(100vh - 76px);
    max-height:calc(100vh - 76px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    z-index:5;
  }
}


/* v279 — Vehicle Defect popup spacing + date picker */
.defect-form>label,.defect-grid label{display:grid!important;gap:8px!important;margin-bottom:16px!important;color:#d9dee4;font-weight:600;font-size:13px;}
.defect-form>label input,.defect-form>label select,.defect-form>label textarea,.defect-grid label input,.defect-grid label select,.defect-grid label textarea{margin-top:0!important;font-weight:400;}
#defectRepairDate{cursor:pointer;}
#defectRepairDate::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.9;}

/* v282 — keep calendar popup fields dark after browser predictive/autofill selections */
#calendarEventCard input:-webkit-autofill,
#calendarEventCard input:-webkit-autofill:hover,
#calendarEventCard input:-webkit-autofill:focus,
#calendarEventCard input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #0d0d0d inset !important;
  box-shadow: 0 0 0 1000px #0d0d0d inset !important;
  border-color: #393939 !important;
  transition: background-color 9999s ease-out 0s;
}

#calendarEventCard input:autofill {
  color: #fff !important;
  background: #0d0d0d !important;
  box-shadow: 0 0 0 1000px #0d0d0d inset !important;
}


/* v283 — remove uploaded calendar documents */
.calendar-file-drop{position:relative}
.calendar-document-remove{
  position:absolute;
  top:8px;
  right:8px;
  z-index:3;
  width:27px;
  height:27px;
  padding:0;
  border:1px solid #6b3939;
  border-radius:50%;
  background:#251515;
  color:#ff9a9a;
  font-size:20px;
  line-height:23px;
  font-weight:800;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.calendar-document-remove:hover{background:#3a1919;border-color:#a34a4a;color:#fff}
.calendar-document-remove.hidden{display:none!important}
.calendar-file-drop:has(.calendar-document-remove:not(.hidden)){padding-right:46px}


/* v284 — centre document remove controls and restore Call Sheet + after removal */
.calendar-document-remove,
.calendar-document-add{
  position:absolute;
  top:50%;
  right:12px;
  transform:translateY(-50%);
  z-index:3;
  width:30px;
  height:30px;
  padding:0;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  font-family:Arial,Helvetica,sans-serif;
  font-size:21px;
  font-weight:700;
  line-height:1;
  text-align:center;
}
.calendar-document-remove{
  border:1px solid #6b3939;
  background:#251515;
  color:#ff9a9a;
}
.calendar-document-remove:hover{background:#3a1919;border-color:#a34a4a;color:#fff}
.calendar-document-add{
  border:1px solid #626262;
  background:#1b1b1b;
  color:#fff;
}
.calendar-document-add:hover{background:#242424;border-color:#777}
.calendar-document-remove.hidden,
.calendar-document-add.hidden{display:none!important}
.calendar-file-drop:has(.calendar-document-remove:not(.hidden)),
.calendar-file-drop:has(.calendar-document-add:not(.hidden)){padding-right:54px}


/* v287 — Accident reports */
.accident-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px;margin-bottom:14px}.accident-kpis article{background:var(--panel,#111b2d);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px}.accident-kpis span{display:block;color:var(--muted,#9da9ba);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.accident-kpis strong{font-size:26px;display:block;margin-top:5px}
.accident-filter-bar{display:grid;grid-template-columns:1fr 180px;gap:12px;margin-bottom:14px}.accident-report-card{gap:10px}.accident-report-card-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.accident-date{font-size:12px;color:var(--muted,#9da9ba);font-weight:800}.accident-status{border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;background:#5e6673}.accident-status.open{background:#9b2c2c}.accident-status.reviewed{background:#8a6511}.accident-status.closed{background:#237a48}
.accident-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.accident-detail-grid article{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px}.accident-detail-grid article.wide{grid-column:1/-1}.accident-detail-grid article span{display:block;color:var(--muted,#9da9ba);font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}.accident-detail-grid p{margin:0;line-height:1.55}.accident-map-link{display:inline-flex;margin-top:10px;text-decoration:none}.accident-detail-head{display:flex;justify-content:space-between;align-items:center}.accident-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.accident-photo-grid a{display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#111}.accident-photo-grid img{width:100%;height:100%;display:block;object-fit:cover}.accident-status-actions{display:flex;align-items:end;gap:12px}.accident-status-actions label{display:flex;flex-direction:column;gap:6px;min-width:180px}
@media(max-width:700px){.accident-kpis,.accident-filter-bar,.accident-detail-grid{grid-template-columns:1fr}.accident-detail-grid article.wide{grid-column:auto}.accident-photo-grid{grid-template-columns:repeat(2,1fr)}.accident-status-actions{align-items:stretch;flex-direction:column}.accident-status-actions label{min-width:0}}

/* v288 — show calendar status colours in the right-click status menu */
.calendar-context-status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 10px;
  display:inline-block;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
.calendar-context-status-dot.option{background:#2e9f55;}
.calendar-context-status-dot.confirmed{background:#e48632;}
.calendar-context-status-dot.details-sent{background:#cf3f45;}
.calendar-context-status-dot.awaiting{background:#173c78;}
.calendar-context-status-dot.ready{background:#a98ee6;}
.calendar-context-status-dot.invoiced{background:#62a9dd;}

/* v297 — confirmed production button + document add controls */
#calendarSendProductionDetails{
  grid-column:1 / -1!important;
  width:min(520px,78%)!important;
  justify-self:center!important;
  min-height:48px!important;
  margin:4px auto 0!important;
}

/* Movement Order / Other Document + buttons match the Call Sheet + */
.calendar-add-movement-order,
.calendar-add-other-document{
  position:absolute!important;
  top:50%!important;
  right:12px!important;
  transform:translateY(-50%)!important;
  z-index:3!important;
  width:30px!important;
  height:30px!important;
  padding:0!important;
  border:1px solid #626262!important;
  border-radius:50%!important;
  background:#1b1b1b!important;
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:21px!important;
  font-weight:700!important;
  line-height:1!important;
  text-align:center!important;
  cursor:pointer!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  box-shadow:none!important;
}
.calendar-add-movement-order:hover,
.calendar-add-other-document:hover{
  background:#242424!important;
  border-color:#777!important;
}

@media(max-width:520px){
  #calendarSendProductionDetails{width:100%!important;}
}

/* v298 — production action must only appear at Confirmed stage */
#calendarSendProductionDetails.hidden{
  display:none!important;
}

/* v299 — concise vehicle/job summary when a map marker is clicked */
.ww-vehicle-leaflet-popup .leaflet-popup-content-wrapper{border-radius:14px;box-shadow:0 10px 28px rgba(15,23,42,.18)}
.ww-vehicle-leaflet-popup .leaflet-popup-content{margin:14px 16px;min-width:250px}
.ww-map-popup{font-size:13px;color:#172033}
.ww-map-popup-title{font-size:15px;font-weight:800;margin-bottom:9px;color:#111827}
.ww-map-popup-row{display:grid;grid-template-columns:66px 1fr;gap:9px;padding:4px 0;align-items:start}
.ww-map-popup-row span{color:#6b7280}
.ww-map-popup-row strong{font-weight:650;line-height:1.3}
.ww-map-popup-updated{margin-top:9px;padding-top:8px;border-top:1px solid #e5e7eb;color:#6b7280;font-size:12px}





/* v313 - Send Details to Production matches the main Option/Confirm button */
#calendarSendProductionDetails{
  grid-column:1 / -1!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 14px!important;
  margin:0!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
  position:relative!important;
  z-index:210!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  isolation:isolate!important;
}
#calendarSendProductionDetails.hidden{
  display:none!important;
}


/* v314 - Driver Details Sent action matches the main workflow buttons */
#calendarProgressButton{
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
}


/* v315 - dedicated Driver Details Sent action */
#calendarSendDriversApp{
  grid-column:1 / -1!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 14px!important;
  margin:0!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
  position:relative!important;
  z-index:210!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  isolation:isolate!important;
}
#calendarSendDriversApp.hidden{
  display:none!important;
}


/* v317 - Sent to Driver -> Call Sheets Received action */
#calendarCallSheetsReceivedButton{
  grid-column:1 / -1!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 14px!important;
  margin:0!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
  position:relative!important;
  z-index:210!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  isolation:isolate!important;
}
#calendarCallSheetsReceivedButton.hidden{
  display:none!important;
}


/* v318 - Call Sheets Received -> Invoices Received action */
#calendarInvoicesReceivedButton{
  grid-column:1 / -1!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 14px!important;
  margin:0!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
  position:relative!important;
  z-index:210!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  isolation:isolate!important;
}
#calendarInvoicesReceivedButton.hidden{
  display:none!important;
}


/* v319 — multi-day locations + daily call sheets */
.calendar-daily-schedule-wrap{
  border:1px solid #3a321b!important;
  background:#11100c!important;
}
.calendar-daily-schedule-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}
.calendar-daily-schedule-head span{
  display:block;
  color:var(--yellow)!important;
  font-weight:900!important;
}
.calendar-daily-schedule-head small{
  display:block;
  margin-top:4px;
  color:#8f8f8f;
  font-size:11px;
}
.calendar-daily-schedule{
  display:grid;
  gap:10px;
}
.calendar-daily-card{
  border:1px solid #303030;
  background:#151515;
  border-radius:12px;
  padding:12px;
  display:grid;
  grid-template-columns:1fr 160px;
  gap:10px 12px;
}
.calendar-daily-card-head{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-bottom:8px;
  border-bottom:1px solid #292929;
}
.calendar-daily-card-head strong{
  color:#fff;
  font-size:13px;
}
.calendar-daily-card-head span{
  color:#888;
  font-size:11px;
}
.calendar-daily-card label{
  display:block;
}
.calendar-daily-card label>span,
.calendar-daily-call-sheet>div>span{
  display:block;
  margin-bottom:5px;
  color:#a8a8a8;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.calendar-daily-card input{
  width:100%;
}
.calendar-daily-call-sheet{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  align-items:center;
  border-top:1px solid #292929;
  padding-top:10px;
}
.calendar-daily-call-sheet small{
  display:block;
  color:#c8c8c8;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.calendar-daily-upload{
  width:auto!important;
  min-width:86px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 12px!important;
}
.calendar-daily-remove{
  width:36px!important;
  height:36px!important;
  min-height:36px!important;
  border-radius:9px!important;
  border:1px solid #5b2b2b!important;
  background:#241313!important;
  color:#ff9b9b!important;
  font-size:20px!important;
  cursor:pointer;
}
@media(max-width:700px){
  .calendar-daily-card{
    grid-template-columns:1fr;
  }
  .calendar-daily-call-sheet{
    grid-template-columns:1fr auto auto;
  }
}


/* v320 — obvious drag & drop boxes for each day's call sheet */
.calendar-daily-call-sheet{
  grid-column:1/-1;
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:8px!important;
  align-items:center!important;
  border-top:1px solid #292929!important;
  padding-top:10px!important;
}
.calendar-daily-call-sheet>span{
  grid-column:1/-1;
  display:block;
  color:#a8a8a8;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.calendar-daily-drop-zone{
  min-height:72px;
  border:2px dashed #5a5a5a;
  border-radius:11px;
  background:#0f0f0f;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:12px 16px;
  cursor:pointer;
  text-align:center;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.calendar-daily-drop-zone:hover,
.calendar-daily-drop-zone:focus{
  border-color:var(--yellow);
  background:#17140a;
  outline:none;
}
.calendar-daily-drop-zone.dragging{
  border-color:var(--yellow);
  background:#211b08;
  transform:scale(1.01);
}
.calendar-daily-drop-zone strong{
  color:#fff;
  font-size:12px;
  font-weight:900;
}
.calendar-daily-drop-zone small{
  color:#9f9f9f;
  font-size:11px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.calendar-daily-remove{
  align-self:stretch!important;
  width:44px!important;
  height:auto!important;
  min-height:44px!important;
}


/* v322 — daily call time dropdown */
.calendar-daily-call-time{
  width:100%!important;
  min-height:44px!important;
  border:1px solid #393939!important;
  background:#0d0d0d!important;
  color:#fff!important;
  border-radius:11px!important;
  padding:0 13px!important;
  font:inherit!important;
  cursor:pointer!important;
}


/* v326 — Driver App joined indicator */
.driver-list-name-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.driver-app-status{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);
}
.driver-app-status.joined{
  background:rgba(66,185,102,.16);
  border-color:rgba(66,185,102,.45);
}
.driver-app-status.joined::before{
  content:"✓";
  margin-right:4px;
}
.driver-app-status.not-joined{
  opacity:.65;
  background:rgba(255,255,255,.04);
}


/* v327 — What3Words fields */
#calendarEditWhat3Words,
.calendar-daily-what3words{
  letter-spacing:.01em;
}


/* v329 — optional different vehicle details per multi-day date */
.calendar-daily-different-option{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  cursor:pointer;
}
.calendar-daily-different-option input{
  width:18px;
  height:18px;
  flex:0 0 auto;
}
.calendar-daily-different-option span{
  font-weight:800;
  font-size:12px;
}
.calendar-daily-vehicle-details{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(0,0,0,.18);
}
.calendar-daily-vehicle-details-title{
  font-size:12px;
  font-weight:900;
  opacity:.85;
}
.calendar-daily-vehicle-row{
  display:grid;
  grid-template-columns:minmax(135px,.8fr) minmax(120px,.6fr) minmax(180px,1fr) minmax(180px,1fr);
  gap:10px;
  align-items:end;
  padding:10px;
  border-radius:9px;
  background:rgba(255,255,255,.035);
}
.calendar-daily-vehicle-name{
  align-self:center;
  font-size:12px;
}
@media(max-width:800px){
  .calendar-daily-vehicle-row{grid-template-columns:1fr;}
}


/* v331 — make the different-vehicle control unmistakable */
.calendar-daily-different-option{
  margin-top:4px;
  border-width:2px;
}
.calendar-daily-different-option span{
  font-size:13px;
}


/* v332 — single-day per-vehicle variation option */
.calendar-single-vehicle-variation-wrap{
  margin-top:2px;
}
#calendarSingleVehicleDetails{
  margin-top:10px;
}


/* v333 — Different Locations moved under Add Another Vehicle */
.calendar-different-locations-option{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:10px;
  padding:9px 11px;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  cursor:pointer;
}
.calendar-different-locations-option.hidden{display:none}
.calendar-different-locations-option input{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 auto;
}
.calendar-different-locations-option span{
  font-size:12px;
  font-weight:900;
}
#calendarSingleVehicleDetails{
  margin-top:10px;
}
.calendar-different-location-details{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.calendar-different-location-row{
  display:grid;
  grid-template-columns:minmax(130px,.7fr) minmax(190px,1fr) minmax(190px,1fr);
  gap:10px;
  align-items:end;
  padding:10px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:9px;
  background:rgba(0,0,0,.12);
}
.calendar-different-location-name{
  align-self:center;
  font-size:12px;
}
@media(max-width:800px){
  .calendar-different-location-row{grid-template-columns:1fr;}
}


/* v334 — Different Locations compact layout fix */
#calendarAssignmentsWrap{
  min-width:0;
  overflow:hidden;
}
.calendar-different-locations-option{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  padding:7px 9px;
  gap:7px;
  overflow:hidden;
}
.calendar-different-locations-option input{
  width:16px;
  height:16px;
  min-width:16px;
}
.calendar-different-locations-option span{
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  white-space:normal;
  overflow-wrap:anywhere;
  min-width:0;
}
#calendarSingleVehicleDetails{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.calendar-different-location-details{
  width:100%;
  min-width:0;
}
.calendar-different-location-row{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  grid-template-columns:minmax(110px,.7fr) minmax(150px,1fr) minmax(150px,1fr);
}
.calendar-different-location-row label,
.calendar-different-location-row input{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.calendar-different-location-name{
  min-width:0;
  overflow-wrap:anywhere;
}


/* v335 — make Different Locations rows match Vehicle / Driver / Call Time layout */
.calendar-different-location-details{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.calendar-different-location-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) !important;
  column-gap:16px !important;
  row-gap:8px !important;
  align-items:end !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:14px 16px !important;
  overflow:hidden !important;
}

.calendar-different-location-row > *{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

.calendar-different-location-row label{
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  width:100% !important;
  min-width:0 !important;
}

.calendar-different-location-row label > span{
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  color:var(--muted, #9b9b9b) !important;
  white-space:nowrap !important;
}

.calendar-different-location-name{
  align-self:end !important;
  padding-bottom:15px !important;
  font-size:14px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  min-width:0 !important;
  overflow-wrap:anywhere !important;
}

.calendar-different-location-row .calendar-inline-edit{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  font-size:14px !important;
  height:54px !important;
  padding:0 14px !important;
}

.calendar-different-locations-option{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

.calendar-different-locations-option span{
  font-size:12px !important;
  line-height:1.2 !important;
}

@media(max-width:900px){
  .calendar-different-location-row{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .calendar-different-location-name{
    grid-column:1/-1;
    padding-bottom:0 !important;
  }
}

@media(max-width:620px){
  .calendar-different-location-row{
    grid-template-columns:1fr !important;
  }
  .calendar-different-location-name{
    grid-column:auto;
  }
}


/* v336 — uniform text sizing + wider What3Words */
.calendar-different-location-row{
  grid-template-columns:minmax(0,.95fr) minmax(0,.7fr) minmax(0,1.35fr) !important;
}

.calendar-different-location-name,
.calendar-different-location-row label > span,
.calendar-different-location-row .calendar-inline-edit,
.calendar-different-locations-option span{
  font-size:14px !important;
  line-height:1.2 !important;
}

.calendar-different-location-name{
  font-weight:800 !important;
}

.calendar-different-location-row label > span,
.calendar-different-locations-option span{
  font-weight:700 !important;
}

.calendar-different-location-row .calendar-inline-edit{
  height:52px !important;
  padding:0 12px !important;
}

.calendar-different-location-row .calendar-single-vehicle-location,
.calendar-different-location-row .calendar-daily-vehicle-location{
  min-width:0 !important;
}

.calendar-different-location-row .calendar-single-vehicle-what3words,
.calendar-different-location-row .calendar-daily-vehicle-what3words{
  min-width:0 !important;
  width:100% !important;
}

@media(max-width:900px){
  .calendar-different-location-row{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) !important;
  }
  .calendar-different-location-name{
    grid-column:1/-1;
  }
}

@media(max-width:620px){
  .calendar-different-location-row{
    grid-template-columns:1fr !important;
  }
  .calendar-different-location-name{
    grid-column:auto;
  }
}


/* v341 — Different Locations UI rebuilt from scratch */
.ww-diff-locations-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  min-width:0;
  margin-top:10px;
}

.ww-diff-location-card{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:14px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.025) !important;
  overflow:hidden !important;
}

.ww-diff-location-title{
  display:block;
  width:100%;
  min-width:0;
  margin:0 0 12px 0;
  font-size:14px;
  line-height:1.25;
  font-weight:800;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
}

.ww-diff-field{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  margin:0 0 12px 0 !important;
}

.ww-diff-field:last-child{
  margin-bottom:0 !important;
}

.ww-diff-field > span{
  display:block;
  margin:0 0 6px 0;
  font-size:12px !important;
  line-height:1.2;
  font-weight:700;
}

.ww-diff-field .calendar-inline-edit{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:52px !important;
  box-sizing:border-box !important;
  padding:0 12px !important;
  font-size:14px !important;
}

/* neutralise older Different Locations grid rules */
.ww-diff-location-card.calendar-daily-vehicle-row{
  grid-template-columns:none !important;
  column-gap:0 !important;
  row-gap:0 !important;
  align-items:stretch !important;
}


/* v342 — Different Locations & Call Times */
.popup-assignment-time.daily-call-time-summary{
  opacity:.9;
  cursor:default;
  font-weight:800;
}

.ww-diff-location-card .calendar-daily-vehicle-call-time{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:52px !important;
  box-sizing:border-box !important;
  font-size:14px !important;
}


/* v343 — spread per-driver daily details across the popup */
.ww-diff-location-card{
  display:grid !important;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.35fr) !important;
  column-gap:14px !important;
  row-gap:10px !important;
  align-items:end !important;
}

.ww-diff-location-title{
  grid-column:1 / -1 !important;
  margin:0 0 2px 0 !important;
}

.ww-diff-field{
  margin:0 !important;
}

.ww-diff-field > span{
  margin-bottom:6px !important;
}

.ww-diff-field .calendar-inline-edit{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}

@media(max-width:850px){
  .ww-diff-location-card{
    grid-template-columns:1fr 1fr !important;
  }

  .ww-diff-location-title{
    grid-column:1 / -1 !important;
  }

  .ww-diff-field:last-child{
    grid-column:1 / -1 !important;
  }
}

@media(max-width:600px){
  .ww-diff-location-card{
    grid-template-columns:1fr !important;
  }

  .ww-diff-location-title,
  .ww-diff-field:last-child{
    grid-column:auto !important;
  }
}


/* v344 — true spread fix
   This overrides the older, more-specific rule that was forcing
   calendar-daily-vehicle-row back to a single-column layout. */
.ww-diff-location-card.calendar-daily-vehicle-row{
  display:grid !important;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.35fr) !important;
  column-gap:14px !important;
  row-gap:10px !important;
  align-items:end !important;
  width:100% !important;
  max-width:100% !important;
}

.ww-diff-location-card.calendar-daily-vehicle-row .ww-diff-location-title{
  grid-column:1 / -1 !important;
}

.ww-diff-location-card.calendar-daily-vehicle-row .ww-diff-field{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
}

@media(max-width:850px){
  .ww-diff-location-card.calendar-daily-vehicle-row{
    grid-template-columns:1fr 1fr !important;
  }
  .ww-diff-location-card.calendar-daily-vehicle-row .ww-diff-location-title{
    grid-column:1 / -1 !important;
  }
  .ww-diff-location-card.calendar-daily-vehicle-row .ww-diff-field:last-child{
    grid-column:1 / -1 !important;
  }
}

@media(max-width:600px){
  .ww-diff-location-card.calendar-daily-vehicle-row{
    grid-template-columns:1fr !important;
  }
  .ww-diff-location-card.calendar-daily-vehicle-row .ww-diff-location-title,
  .ww-diff-location-card.calendar-daily-vehicle-row .ww-diff-field:last-child{
    grid-column:auto !important;
  }
}


/* v345 — make Different Locations use the FULL width of each Day card */
.calendar-daily-card > .ww-diff-locations-list{
  grid-column:1 / -1 !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Keep each vehicle card fully inside the Day card */
.calendar-daily-card .ww-diff-location-card.calendar-daily-vehicle-row{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  grid-template-columns:minmax(110px,.65fr) minmax(180px,1fr) minmax(230px,1.35fr) !important;
}

/* Every field must be allowed to shrink inside its own grid cell */
.calendar-daily-card .ww-diff-location-card .ww-diff-field,
.calendar-daily-card .ww-diff-location-card .ww-diff-field .calendar-inline-edit{
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

@media(max-width:760px){
  .calendar-daily-card .ww-diff-location-card.calendar-daily-vehicle-row{
    grid-template-columns:1fr 1fr !important;
  }
  .calendar-daily-card .ww-diff-location-card .ww-diff-location-title{
    grid-column:1 / -1 !important;
  }
  .calendar-daily-card .ww-diff-location-card .ww-diff-field:last-child{
    grid-column:1 / -1 !important;
  }
}

@media(max-width:560px){
  .calendar-daily-card .ww-diff-location-card.calendar-daily-vehicle-row{
    grid-template-columns:1fr !important;
  }
  .calendar-daily-card .ww-diff-location-card .ww-diff-location-title,
  .calendar-daily-card .ww-diff-location-card .ww-diff-field:last-child{
    grid-column:auto !important;
  }
}


/* v346 — compact daily driver cards
   Row 1: Call Time | Location
   Row 2: What3Words full width */
.calendar-daily-card .ww-diff-location-card.calendar-daily-vehicle-row{
  grid-template-columns:minmax(130px,.65fr) minmax(0,1.35fr) !important;
  column-gap:12px !important;
  row-gap:8px !important;
  padding:10px 12px !important;
}

.calendar-daily-card .ww-diff-location-card .ww-diff-location-title{
  grid-column:1 / -1 !important;
  margin:0 0 2px 0 !important;
  font-size:14px !important;
  line-height:1.2 !important;
}

/* What3Words is the third field: put it beneath Call Time + Location */
.calendar-daily-card .ww-diff-location-card .ww-diff-field:nth-of-type(3){
  grid-column:1 / -1 !important;
}

/* Shorter controls */
.calendar-daily-card .ww-diff-location-card .ww-diff-field{
  margin:0 !important;
}

.calendar-daily-card .ww-diff-location-card .ww-diff-field > span{
  margin-bottom:4px !important;
  font-size:11px !important;
  line-height:1.1 !important;
}

.calendar-daily-card .ww-diff-location-card .calendar-inline-edit,
.calendar-daily-card .ww-diff-location-card .calendar-daily-vehicle-call-time{
  height:42px !important;
  min-height:42px !important;
  padding:0 10px !important;
  font-size:14px !important;
  line-height:42px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Make the W3W field safely use the whole card width */
.calendar-daily-card .ww-diff-location-card .calendar-daily-vehicle-what3words{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Slightly reduce the outer day/card bulk too */
.calendar-daily-card{
  padding:10px !important;
  gap:8px 10px !important;
}

.calendar-daily-card .ww-diff-locations-list{
  gap:9px !important;
  margin-top:6px !important;
}

/* Do not let older wrapping rules force the third field into a bad column */
@media(max-width:760px){
  .calendar-daily-card .ww-diff-location-card.calendar-daily-vehicle-row{
    grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr) !important;
  }

  .calendar-daily-card .ww-diff-location-card .ww-diff-location-title,
  .calendar-daily-card .ww-diff-location-card .ww-diff-field:nth-of-type(3){
    grid-column:1 / -1 !important;
  }
}

@media(max-width:520px){
  .calendar-daily-card .ww-diff-location-card.calendar-daily-vehicle-row{
    grid-template-columns:1fr !important;
  }

  .calendar-daily-card .ww-diff-location-card .ww-diff-location-title,
  .calendar-daily-card .ww-diff-location-card .ww-diff-field:nth-of-type(3){
    grid-column:auto !important;
  }
}


/* v347 — dedicated Fleet Map page */
#fleetmap{
  min-width:0;
}
.fleet-map-page-heading{
  margin-bottom:14px;
}
.dedicated-fleet-map-panel{
  padding:16px;
  min-width:0;
}
.dedicated-fleet-map-panel .map-panel-head{
  align-items:flex-end;
}
#fleetmap .fleet-map{
  height:clamp(520px, 70vh, 820px);
  min-height:520px;
  width:100%;
  border-radius:14px;
  overflow:hidden;
}
#fleetmap .map-vehicle-card{
  margin-top:14px;
}
@media(max-width:700px){
  #fleetmap .fleet-map{
    height:62vh;
    min-height:430px;
  }
}


/* v348 — Fleet Map menu repair */
#fleetmap .fleet-map{
  height:clamp(520px,70vh,820px);
  min-height:520px;
  width:100%;
}


/* v350 — cleaner dedicated Fleet Map opening view */
#fleetmap .dedicated-fleet-map-panel{
  padding:14px;
}
#fleetmap .fleet-map{
  height:min(68vh,700px) !important;
  min-height:500px !important;
  background:#151515;
}
#fleetmap .map-panel-head{
  margin-bottom:10px;
}
@media(max-width:900px){
  #fleetmap .fleet-map{
    height:62vh !important;
    min-height:440px !important;
  }
}


/* v354 — Vehicle Route menu restored above the map */
.fleet-route-toolbar{
  margin:0 0 12px;
  padding:14px;
  border:1px solid #2d2d2d;
  border-radius:13px;
  background:#111;
}
.fleet-route-toolbar-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:11px;
}
.fleet-route-toolbar-title .eyebrow{
  display:block;
  margin-bottom:4px;
}
.fleet-route-toolbar-title strong{
  display:block;
  font-size:15px;
}
.fleet-route-status{
  color:#9c9c9c;
  font-size:12px;
  font-weight:800;
  text-align:right;
}
.fleet-route-controls{
  display:grid;
  grid-template-columns:minmax(150px,.85fr) minmax(210px,1.25fr) minmax(150px,.8fr) auto auto;
  gap:9px;
  align-items:end;
}
.fleet-route-controls label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.fleet-route-controls label>span{
  color:#9a9a9a;
  font-size:11px;
  font-weight:800;
}
.fleet-route-controls select,
.fleet-route-controls input{
  min-height:42px;
  box-sizing:border-box;
}
.fleet-route-show,
.fleet-route-clear{
  min-height:42px;
  padding:0 15px;
  white-space:nowrap;
}
.fleet-route-show{
  border-color:#6f5900;
  background:#211b08;
}
@media(max-width:900px){
  .fleet-route-controls{
    grid-template-columns:1fr 1fr;
  }
  .fleet-route-show,
  .fleet-route-clear{
    width:100%;
  }
}
@media(max-width:560px){
  .fleet-route-toolbar-title{
    align-items:flex-start;
    flex-direction:column;
  }
  .fleet-route-status{text-align:left}
  .fleet-route-controls{
    grid-template-columns:1fr;
  }
}


/* v355 — ordered vehicle groups + click-open route calendar */
.fleet-route-date-wrap{
  position:relative;
}
.fleet-route-date-button{
  width:100%;
  min-height:42px;
  box-sizing:border-box;
  border:1px solid #393939;
  border-radius:11px;
  background:#0d0d0d;
  color:#fff;
  padding:0 12px;
  text-align:left;
  font:inherit;
  font-size:13px;
  cursor:pointer;
}
.fleet-route-date-button:hover,
.fleet-route-date-button:focus{
  border-color:var(--yellow);
  outline:none;
}
.fleet-route-calendar{
  position:absolute;
  top:calc(100% + 7px);
  left:0;
  z-index:9000;
  width:304px;
  max-width:min(304px,calc(100vw - 32px));
  padding:12px;
  border:1px solid #3a3a3a;
  border-radius:13px;
  background:#151515;
  box-shadow:0 18px 45px rgba(0,0,0,.5);
}
.fleet-route-calendar-head{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
}
.fleet-route-calendar-head strong{
  text-align:center;
  font-size:14px;
}
.fleet-route-calendar-nav{
  width:36px;
  height:34px;
  border:1px solid #343434;
  border-radius:8px;
  background:#0f0f0f;
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.fleet-route-calendar-nav:hover{
  border-color:#665000;
  color:var(--yellow);
}
.fleet-route-calendar-weekdays,
.fleet-route-calendar-days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
}
.fleet-route-calendar-weekdays{
  margin-bottom:4px;
}
.fleet-route-calendar-weekdays span{
  color:#7e7e7e;
  font-size:10px;
  font-weight:800;
  text-align:center;
}
.fleet-route-calendar-day{
  aspect-ratio:1;
  min-width:0;
  border:1px solid transparent;
  border-radius:8px;
  background:#101010;
  color:#ddd;
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
.fleet-route-calendar-day:hover{
  border-color:#6f5900;
  background:#1f1a08;
}
.fleet-route-calendar-day.outside{
  color:#555;
  background:#0c0c0c;
}
.fleet-route-calendar-day.today{
  border-color:#575757;
}
.fleet-route-calendar-day.selected{
  border-color:#9f7d00;
  background:#342900;
  color:var(--yellow);
  font-weight:900;
}
.fleet-route-calendar-today{
  width:100%;
  min-height:36px;
  margin-top:9px;
  padding:6px 10px;
}


/* v356 — restore simpler old-style vehicle dropdown layout */
.fleet-route-controls{
  grid-template-columns:minmax(300px,1.7fr) minmax(190px,.8fr) auto auto !important;
}
.fleet-route-vehicle-wrap select{
  min-width:300px;
}
@media(max-width:900px){
  .fleet-route-controls{
    grid-template-columns:1fr 1fr !important;
  }
  .fleet-route-vehicle-wrap select{
    min-width:0;
  }
}
@media(max-width:560px){
  .fleet-route-controls{
    grid-template-columns:1fr !important;
  }
}


/* v359 — multi-day Notes + Movement Order, with yellow Day/date title */
.calendar-daily-card-head .calendar-daily-day-title{
  color:var(--yellow)!important;
  font-weight:900!important;
}
.calendar-daily-extra-row{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:9px 16px;
  align-items:center;
  padding:2px 0;
}
.calendar-daily-extra-toggle{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:7px!important;
  width:auto!important;
  cursor:pointer;
}
.calendar-daily-extra-toggle input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:#e7c83b;
}
.calendar-daily-extra-toggle span{
  margin:0!important;
  color:#b9b9b9!important;
  font-size:12px!important;
  font-weight:800!important;
}
.calendar-daily-notes-wrap,
.calendar-daily-movement-wrap{
  grid-column:1 / -1;
  position:relative;
}
.calendar-daily-notes-wrap>span,
.calendar-daily-movement-wrap>span{
  display:block;
  margin-bottom:6px;
  color:#9e9e9e;
  font-size:11px;
  font-weight:800;
}
.calendar-daily-notes{
  width:100%!important;
  min-height:72px!important;
  resize:vertical;
  box-sizing:border-box;
  padding:10px 11px!important;
  line-height:1.4!important;
}
.calendar-daily-movement-wrap{
  padding-right:42px;
}
.calendar-daily-movement-drop{
  min-height:58px;
  border:1px dashed #505050;
  border-radius:10px;
  background:#101010;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:9px 11px;
  cursor:pointer;
  box-sizing:border-box;
}
.calendar-daily-movement-drop:hover,
.calendar-daily-movement-drop.dragging{
  border-color:#888;
  background:#151515;
}
.calendar-daily-movement-drop strong{
  font-size:12px;
  margin-bottom:3px;
}
.calendar-daily-movement-drop small{
  color:#929292;
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.calendar-daily-movement-remove{
  position:absolute;
  right:4px;
  bottom:14px;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid #555;
  border-radius:50%;
  background:#1b1b1b;
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

/* v360 — compact daily document controls + stored indicators */
.calendar-daily-extra-toggle{padding:6px 9px;border:1px solid #303030;border-radius:9px;background:#111}
.calendar-daily-extra-toggle:has(input:checked){border-color:#5a4a0b;background:#181506}
.calendar-daily-stored{margin-left:2px;color:#74d999;font-size:10px;font-style:normal;font-weight:900;white-space:nowrap}


/* v361 — daily document ticks on one line */
.calendar-daily-extra-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  align-items:stretch!important;
}
.calendar-daily-extra-toggle{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  padding:7px 8px!important;
  gap:5px!important;
  justify-content:flex-start!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
.calendar-daily-extra-toggle input{
  flex:0 0 15px!important;
  width:15px!important;
  height:15px!important;
}
.calendar-daily-extra-toggle span{
  min-width:0!important;
  font-size:11px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.calendar-daily-stored{
  margin-left:auto!important;
  flex:0 0 auto!important;
  font-size:9px!important;
}
.calendar-daily-stored.pending{
  color:#d9b954!important;
}

/* The old daily call-sheet CSS uses display:grid, so explicitly win when unticked. */
.calendar-daily-call-sheet.hidden{
  display:none!important;
}

@media(max-width:520px){
  .calendar-daily-extra-row{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .calendar-daily-extra-toggle{
    padding:6px 5px!important;
    gap:4px!important;
  }
  .calendar-daily-extra-toggle span{
    font-size:10px!important;
  }
  .calendar-daily-stored{
    font-size:8px!important;
  }
}

/* v363 — stored means the day payload reached Supabase */
.calendar-daily-stored:not(.pending){font-weight:900}


/* v369 — London charging-zone entries */
.london-zone-panel-head{align-items:flex-start;gap:16px}
.london-zone-panel-head .muted{margin:5px 0 0;max-width:720px}
.london-zone-refresh{padding:8px 12px!important;white-space:nowrap}
#dashboardLondonZoneEntries{display:grid;gap:8px}
.london-zone-entry{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px!important;border-left:4px solid #444}
.london-zone-entry.entered{border-left-color:#e2b93b}
.london-zone-entry.exited{border-left-color:#5e9a72}
.london-zone-entry-main{display:flex;align-items:center;gap:13px;min-width:0}
.london-zone-entry-main h3{font-size:14px;margin:0 0 3px}
.london-zone-entry-main p{margin:0;color:#aaa;font-size:12px}
.london-zone-time{font-weight:900;color:var(--yellow);min-width:44px}
.london-zone-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.london-zone-tag.entered{background:#4a3a0b;color:#ffe18a}
.london-zone-tag.exited{background:#173823;color:#9cddb0}
.london-zone-charge-active{background:#552329;color:#ffb2ba}
@media(max-width:720px){.london-zone-entry{align-items:flex-start;flex-direction:column}.london-zone-tags{justify-content:flex-start}}

/* v376: operational info first, static report map, driver performance below */
.report-map-card{margin-top:2px}
.static-report-map{pointer-events:none;user-select:none}
.report-performance-heading{background:linear-gradient(180deg,#171717,#121212)!important;border-color:#363636!important;min-height:auto!important;padding:18px 20px!important}
.report-performance-heading span{margin-bottom:5px!important;color:#d6aa19!important}
.report-performance-heading strong{font-size:16px;color:#f3f3f3}


/* Version 379 — rolling driver scores on main Drivers list */
.driver-list-score b{font-size:19px;white-space:nowrap}
.driver-list-score b:not(:empty){max-width:145px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:620px){
  .driver-list-score{display:block!important;grid-column:2;text-align:left;margin-top:2px}
  .driver-list-score b{font-size:17px}
}

/* v383: keep vehicle cards compact; show 12-month utilisation inside card copy */
.vehicle-list-card .vehicle-jobs-inline{margin-top:3px;color:#b8a15a;font-size:11px;line-height:1.2;}


/* v385 — Add Driver / Add Vehicle modal pop-ups */
.record-modal-backdrop{
  position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(3,8,18,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.record-modal-backdrop.hidden{display:none!important;}
.record-modal-shell{width:min(920px,96vw); max-height:90vh; overflow:auto;}
.record-modal-shell .panel.form{margin:0; box-shadow:0 24px 70px rgba(0,0,0,.45); border-radius:18px;}
@media (max-width:720px){
  .record-modal-backdrop{padding:10px; align-items:flex-start;}
  .record-modal-shell{width:100%; max-height:96vh; margin-top:2vh;}
}

/* v389 — compact Leaflet/OpenStreetMap attribution on Fleet Map */
#fleetmap .fleet-map.leaflet-container .leaflet-control-attribution{
  background:rgba(10,10,10,.78) !important;
  color:rgba(255,255,255,.68) !important;
  font-size:9px !important;
  line-height:1.2 !important;
  padding:3px 6px !important;
  margin:0 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  border-radius:6px 0 0 0 !important;
  max-width:none !important;
}
#fleetmap .fleet-map.leaflet-container .leaflet-control-attribution a{
  color:rgba(255,255,255,.82) !important;
  text-decoration:none !important;
}
#fleetmap .fleet-map.leaflet-container .leaflet-control-attribution a:hover{
  color:#fff !important;
  text-decoration:underline !important;
}

/* Version 390 — email preview Cancel / Skip / Send */
#driverEmailPreview .email-preview-actions,
#driverJobEmailPreview .email-preview-actions{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
#driverEmailPreview .email-preview-actions button,
#driverJobEmailPreview .email-preview-actions button{
  min-width:0!important;
  width:100%!important;
}
#skipDriverEmailPreview,
#skipDriverJobEmail{
  z-index:715!important;
}


/* v394 — clearer Fleet Map journey key */
.fleet-route-legend{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid rgba(255,255,255,.06);
}
@media(max-width:560px){
  .fleet-route-legend{gap:7px}
  .fleet-route-legend .route-chip{font-size:11px;padding:6px 9px}
}


/* v397 — manually link separate diary bookings into one logical job */
.calendar-link-banner{
  position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:12000;
  max-width:min(720px,calc(100vw - 28px));display:flex;align-items:center;gap:14px;
  padding:11px 14px;border-radius:12px;background:#111827;color:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.28);font-size:14px;font-weight:650;
}
.calendar-link-banner span{flex:1;min-width:0;}
.calendar-link-banner button{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:8px;padding:6px 10px;font:inherit;cursor:pointer;}
.calendar-link-mode .calendar-range-bar[data-kind="booking"],
.calendar-link-mode .calendar-range-bar[data-kind="job"],
.calendar-link-mode .calendar-range-bar[data-kind="job-group"]{cursor:crosshair!important;box-shadow:0 0 0 2px rgba(250,204,21,.7) inset;}


/* v399 — linked diary bookings visually join into one continuous run */
#calendar .calendar-range-bar.linked-continuation-after{
  margin-right:0!important;
  border-top-right-radius:0!important;
  border-bottom-right-radius:0!important;
}
#calendar .calendar-range-bar.linked-continuation-before{
  margin-left:0!important;
  border-top-left-radius:0!important;
  border-bottom-left-radius:0!important;
}
#calendar .calendar-range-bar.linked-continuation-after::after{
  content:"";
  position:absolute;
  right:-1px;
  top:0;
  width:2px;
  height:100%;
  background:currentColor;
  opacity:.18;
  pointer-events:none;
}


/* v401 — same-day linked extra vehicles form one connected job-group stack */
#calendar .calendar-range-bar.linked-stack-member{
  border-left-width:4px!important;
  border-left-color:var(--event)!important;
  border-top-left-radius:4px!important;
  border-bottom-left-radius:4px!important;
}
#calendar .calendar-range-bar.linked-stack-member::before{
  content:"";
  position:absolute;
  left:-4px;
  top:-4px;
  bottom:-4px;
  width:4px;
  background:var(--event);
  opacity:.82;
  pointer-events:none;
  z-index:-1;
}

/* v403 — precise linked-group joins. Only an internal group edge loses its gap. */
#calendar .calendar-range-bar.linked-stack-member{
  box-shadow:none!important;
}
#calendar .calendar-range-bar.linked-stack-join-above{
  border-top-left-radius:0!important;
  border-top-right-radius:0!important;
}
#calendar .calendar-range-bar.linked-stack-join-below{
  height:21px!important;
  min-height:21px!important;
  margin-bottom:0!important;
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;
}
#calendar .calendar-range-bar.linked-stack-join-below .calendar-range-label{
  line-height:19px!important;
}
/* Linked marker now has one predictable home instead of floating at the far right. */
#calendar .calendar-range-bar.has-linked-copy{
  padding-left:24px!important;
  padding-right:5px!important;
}
#calendar .calendar-range-bar.has-call-sheet.has-linked-copy{
  padding-right:20px!important;
}
#calendar .calendar-linked-copy-icon,
#calendar .calendar-range-bar.has-call-sheet .calendar-linked-copy-icon{
  left:7px!important;
  right:auto!important;
}
#calendar .calendar-range-bar.has-linked-copy .calendar-range-label{
  padding-left:8px!important;
}

/* v404 — clean horizontal join between consecutive linked driver bookings.
   The continuation bar must not draw its normal 4px status stripe at the date boundary. */
#calendar .calendar-range-bar.linked-continuation-before{
  border-left-width:0!important;
  border-left-color:transparent!important;
  padding-left:5px!important;
}
#calendar .calendar-range-bar.linked-continuation-after::after{
  display:none!important;
  content:none!important;
}

/* v405 — seamless same-driver continuation.
   Once a linked booking continues horizontally onto the next date, the joined
   bar itself communicates the relationship. Hide the duplicate link marker on
   the continuation side and remove the space reserved for it. */
#calendar .calendar-range-bar.linked-continuation-before.has-linked-copy{
  padding-left:5px!important;
}
#calendar .calendar-range-bar.linked-continuation-before .calendar-linked-copy-icon{
  display:none!important;
}
#calendar .calendar-range-bar.linked-continuation-before .calendar-range-label{
  padding-left:0!important;
}

/* v406 — exact seamless linked-day geometry.
   Internal date joins are square and meet edge-to-edge at identical width. */
#calendar .calendar-range-bar.linked-continuation-after{
  margin-right:0!important;
  border-top-right-radius:0!important;
  border-bottom-right-radius:0!important;
  clip-path:none!important;
}
#calendar .calendar-range-bar.linked-continuation-before{
  margin-left:0!important;
  border-top-left-radius:0!important;
  border-bottom-left-radius:0!important;
  border-left:0!important;
  clip-path:none!important;
}
/* Do not draw/offer an inner resize edge where two linked days are one run. */
#calendar .calendar-range-bar.linked-continuation-before .calendar-resize-left,
#calendar .calendar-range-bar.linked-continuation-after .calendar-resize-right{
  display:none!important;
}

/* v407 — keep linked same-day members at normal booking height.
   The upper/continuing booking is never stretched to fill the 3px lane gap;
   instead the extra linked vehicle below moves up by that gap so the group touches. */
#calendar .calendar-range-bar.linked-stack-join-below{
  height:18px!important;
  min-height:18px!important;
  line-height:16px!important;
  margin-bottom:0!important;
}
#calendar .calendar-range-bar.linked-stack-join-below .calendar-range-label{
  line-height:16px!important;
}
#calendar .calendar-range-bar.linked-stack-join-above{
  /* v413: remove the normal 3px gap cumulatively through the linked stack.
     The first linked extra moves 3px, the next 6px, the next 9px, etc. */
  margin-top:calc(42px + (var(--range-lane) * 21px) - (var(--linked-stack-depth, 1) * 3px))!important;
}

/* v414 — group Driver Reports by production/job */
.report-job-group{margin:0 0 18px;border:1px solid rgba(255,255,255,.09);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.025)}
.report-job-group-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.08)}
.report-job-group-head h3{margin:0;font-size:18px}
.report-job-group-head p{margin:4px 0 0;color:var(--muted,#9da9ba);font-size:13px;font-weight:700}
.report-job-group-list{padding:10px;display:grid;gap:8px}
.report-job-group-list .grouped-report-card{margin:0}
.report-job-group-list .grouped-report-card h3{margin:0 0 4px;font-size:16px}
@media(max-width:700px){.report-job-group-head{padding:12px}.report-job-group-list{padding:8px}.report-job-group-list .grouped-report-card{gap:10px}}

/* v427 — give Fleet Map route labels breathing room from colour dots */
.fleet-route-legend .route-chip::before{
  margin-right:7px;
  flex:0 0 auto;
}


/* v435 — vehicle MOTs live directly in the date cell under MOT / Other. */
#calendar .calendar-day-events{position:relative!important;z-index:25!important;}
#calendar .calendar-event.vehicle-mot-direct{
  display:block!important;
  position:relative!important;
  width:calc(100% - 8px)!important;
  margin:40px 4px 2px!important;
  min-height:20px!important;
  height:auto!important;
  padding:3px 6px!important;
  background:#e0a43a!important;
  color:#111!important;
  border:1px solid #f4c96f!important;
  border-radius:4px!important;
  font-size:10px!important;
  line-height:14px!important;
  text-align:left!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  pointer-events:auto!important;
}
#calendar .calendar-event.vehicle-mot-direct strong{color:#111!important;font-weight:800!important;}

/* v439 — Restore MOT / Other calendar styling to black with white border. */
.calendar-key-dot.mot{
  background:#111!important;
  border:1px solid #fff!important;
}
.calendar-event.mot,
.calendar-agenda-row.mot,
.calendar-range-bar.mot{
  --event:#111!important;
  background:#111!important;
  color:#fff!important;
  border:1px solid #fff!important;
  box-shadow:inset 0 0 0 1px #222,0 1px 5px rgba(0,0,0,.35)!important;
}
.calendar-range-bar.other,
.calendar-event.other,
.calendar-agenda-row.other{
  --event:#111!important;
  background:#111!important;
  color:#fff!important;
  border:1px solid #fff!important;
  box-shadow:inset 0 0 0 1px #222,0 1px 5px rgba(0,0,0,.35)!important;
}


/* v443 — Dashboard MOT countdown (60 days) */
.dashboard-mot-panel{margin-bottom:18px;}
.dashboard-mot-warnings{display:grid;gap:10px;}
.dashboard-mot-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;border:1px solid #3a3a3a;border-radius:12px;background:#111;}
.dashboard-mot-card h3{margin:0 0 4px;}
.dashboard-mot-card p{margin:0;color:#999;}
.dashboard-mot-card strong{white-space:nowrap;font-size:14px;}
.dashboard-mot-card.critical strong,.dashboard-mot-card.expired strong{color:#ff6b6b;}
@media(max-width:700px){.dashboard-mot-card{align-items:flex-start;flex-direction:column;gap:8px}.dashboard-mot-card strong{white-space:normal}}

/* Version 452 — large-screen vertical fill for Calendar and Dashboard */
@media (min-width: 1000px) and (min-height: 800px){
  .shell{
    min-height:calc(100dvh - 76px);
  }

  main{
    min-height:calc(100dvh - 76px);
  }

  /* Let the dashboard make useful use of tall office displays without
     changing the compact laptop layout. */
  #dashboard.view{
    min-height:calc(100dvh - 132px);
    display:flex;
    flex-direction:column;
  }

  #dashboard .home-job-panels{
    flex:1 1 auto;
    align-content:stretch;
  }

  #dashboard .future-jobs-panel{
    min-height:clamp(230px,28vh,430px);
  }

  /* The rolling calendar used to be capped at 760px, which left a large
     empty band on 27-inch / high-resolution monitors. Fill the remaining
     viewport instead, while retaining its own scroll when needed. */
  #calendar.view{
    min-height:calc(100dvh - 132px);
    display:flex;
    flex-direction:column;
  }

  #calendar .calendar-shell{
    flex:1 1 auto;
    min-height:0;
  }

  #calendar .calendar-main{
    height:100%;
    min-height:0;
  }

  #calendar .calendar-month-view{
    height:calc(100dvh - 250px)!important;
    min-height:620px;
    max-height:none!important;
  }
}

/* v453 — wider dashboard on large desktop screens */
@media (min-width:1200px){
  #dashboard.view{
    max-width:1320px;
  }
}

/* v454 — consistent wide desktop pages; Fleet Map uses full available width */
@media (min-width:1200px){
  /* All normal office pages use the same comfortable width as Dashboard. */
  .view{
    max-width:1320px;
  }

  /* Fleet Map is the exception: give the map all of the space inside main. */
  #fleetmap.view{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }

  #fleetmap .dedicated-fleet-map-panel{
    width:100%;
  }
}


/* v457 — compact master toggle for optional multi-day detail */
.calendar-daily-master-toggle{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  width:max-content!important;
  max-width:100%!important;
  padding:7px 10px!important;
  margin:2px 0 4px!important;
  border:1px solid #353535!important;
  border-radius:8px!important;
  background:#151515!important;
  cursor:pointer!important;
}
.calendar-daily-master-toggle.hidden{display:none!important;}
.calendar-daily-master-toggle input{
  width:16px!important;
  height:16px!important;
  margin:0!important;
  accent-color:var(--yellow)!important;
}
.calendar-daily-master-toggle span{
  color:#e8e8e8!important;
  font-size:12px!important;
  font-weight:800!important;
}

/* v465 Recovery History */
.recovery-history-panel{max-width:none;}
.recovery-history-toolbar{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin-bottom:14px;}
.recovery-history-toolbar label{display:flex;flex-direction:column;gap:6px;min-width:220px;flex:1;}
.recovery-history-toolbar select{min-width:150px;}
.recovery-history-status{margin:4px 0 14px;}
.recovery-history-list{display:grid;gap:10px;}
.recovery-history-card{display:flex;justify-content:space-between;gap:18px;align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.025);}
.recovery-history-card-main{min-width:0;}
.recovery-history-card h3{margin:6px 0 7px;font-size:16px;}
.recovery-history-card-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;}
.recovery-operation{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-weight:700;letter-spacing:.02em;border:1px solid rgba(255,255,255,.15);}
.recovery-operation-insert{background:rgba(63,185,80,.13);}
.recovery-operation-update{background:rgba(210,153,34,.13);}
.recovery-operation-delete{background:rgba(248,81,73,.13);}
.recovery-history-meta{display:flex;gap:8px 14px;flex-wrap:wrap;font-size:13px;color:var(--muted,#aab0bb);}
.recovery-history-actions{flex:0 0 auto;}
.recovery-no-restore{font-size:12px;}
@media (max-width:760px){.recovery-history-card{align-items:stretch;flex-direction:column}.recovery-history-actions button{width:100%}.recovery-history-toolbar label{min-width:100%;}}