/* v90: management phone presentation only; crew/tablet keeps its existing shell. */
.management-mobile-nav, #home .quick-grid>.management-inbox-action{display:none!important}
@media (max-width:760px){
 body:not(.crew-view) #app .topbar,
 body:not(.crew-view) #app .sidebar,
 body:not(.crew-view) #app .bottom-nav{display:none!important}
 body:not(.crew-view) #app{padding-top:0!important}
 body:not(.crew-view) #app main{margin:0!important;padding-top:0!important;padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;width:100%!important}
 body:not(.crew-view) #app #home.page{width:100%!important;max-width:none!important;margin:0!important;padding:0 16px 24px!important;min-height:calc(100svh - 76px)!important;background-attachment:scroll!important;background-position:center top!important}
 body:not(.crew-view) #app #home .home-hero{height:200px!important;min-height:200px!important;margin:0!important;padding:28px 0 0!important;display:block!important;text-align:center}
 body:not(.crew-view) #app #home .home-hero img{display:block!important;width:285px!important;max-width:90%!important;height:auto!important;max-height:65px!important;margin:0 auto!important}
 body:not(.crew-view) #app #home .home-hero h1,
 body:not(.crew-view) #app #crewWeatherSlot{display:none!important}
 body:not(.crew-view) #app #home .home-hero h2{font-size:13px!important;letter-spacing:3px!important;line-height:1.6!important;margin:20px auto 0!important;padding:0!important;max-width:310px;color:white!important}
 body:not(.crew-view) #app #home .home-hero h2::before,
 body:not(.crew-view) #app #home .home-hero h2::after{display:none!important}
 body:not(.crew-view) #app #home .home-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;width:100%!important;margin:0 auto 24px!important;max-width:none!important}
 body:not(.crew-view) #app #home .home-grid .dash-card{height:150px!important;min-height:150px!important;padding:0 8px 8px!important;border-radius:12px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;align-items:center!important;background-size:100% calc(100% - 34px)!important;background-position:center bottom!important}
 body:not(.crew-view) #app #home .home-grid .dash-card>span{width:calc(100% + 16px)!important;margin:0 -8px!important;padding:10px 2px!important;font-size:13px!important;line-height:16px!important;min-height:36px!important}
 body:not(.crew-view) #app #home .home-grid .dash-card>b{font-size:43px!important;line-height:1!important;margin:auto 0 8px!important}
 body:not(.crew-view) #app #home .home-grid .dash-card>small{position:static!important;font-size:9px!important;line-height:1.3!important;margin:0!important;padding:0!important;min-height:12px!important;white-space:normal!important;width:100%!important}
 body:not(.crew-view) #app #home .quick{width:100%!important;max-width:none!important;margin:0 auto!important;padding:0!important;border:0!important}
 body:not(.crew-view) #app #home .quick h2{display:flex!important;align-items:center;gap:12px;width:100%!important;margin:0 0 14px!important;padding:0!important;background:transparent!important;font-size:13px!important;letter-spacing:3px!important;white-space:nowrap}
 body:not(.crew-view) #app #home .quick h2::before,body:not(.crew-view) #app #home .quick h2::after{content:'';position:static!important;display:block!important;flex:1;height:1px;background:#3298bc}
 body:not(.crew-view) #app #home .quick-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:0!important;background:transparent!important}
 body:not(.crew-view) #app #home .quick-grid>button{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important;min-height:76px!important;padding:12px 10px!important;border-radius:10px!important;font-size:25px!important;text-align:left!important;position:relative}
 body:not(.crew-view) #app #home .quick-grid>button>span{min-width:0}
 body:not(.crew-view) #app #home .quick-grid b{font-size:12px!important;line-height:1.3!important;white-space:normal!important}
 body:not(.crew-view) #app #home .quick-grid small{font-size:10px!important;line-height:1.35!important;white-space:normal!important;margin-top:4px!important}
 body:not(.crew-view) #app #home .quick-grid>[data-page="addcsr"]{order:0;border-color:#218ad1!important}
 body:not(.crew-view) #app #home .quick-grid>.management-inbox-action{order:1;border-color:#218ad1!important}
 body:not(.crew-view) #app #home .quick-grid>[data-page="request"]{order:2;border-color:#bb710b!important}
 body:not(.crew-view) #app #home .quick-grid>[data-page="completed"]{order:3;border-color:#218844!important}
 body:not(.crew-view) .management-inbox-action svg{width:24px;height:24px;flex:0 0 24px}
 body:not(.crew-view) .management-inbox-count{position:absolute;right:5px;top:4px;min-width:18px;height:18px;padding:2px 4px;background:#c86b05;color:white;border-radius:12px;text-align:center;font:700 11px/14px Arial}
 body:not(.crew-view) #app .management-mobile-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;inset:auto 0 0;z-index:100;height:calc(72px + env(safe-area-inset-bottom));padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:rgba(3,22,38,.98);border-top:1px solid #416378}
 body:not(.crew-view) .management-mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:48px;border:0;background:transparent;color:#b0d2ee;padding:0 2px;cursor:pointer}
 body:not(.crew-view) .management-mobile-nav svg{width:26px;height:26px;flex-shrink:0}
 body:not(.crew-view) .management-mobile-nav span{font-size:11px;line-height:16px}
 body:not(.crew-view) .management-mobile-nav button.selected{color:#00c9ed}
 body:not(.crew-view) .management-mobile-nav button:focus-visible{outline:2px solid #00c9ed;outline-offset:-2px;border-radius:8px}
 body.theme-day:not(.crew-view) #app .management-mobile-nav{background:rgba(248,252,254,.98);border-color:#a9c4d2}
 body.theme-day:not(.crew-view) .management-mobile-nav button{color:#31576a}
 body.theme-day:not(.crew-view) .management-mobile-nav button.selected{color:#0874b9}
 body:not(.crew-view).integrated-field-map-open #app .management-mobile-nav,
 body:not(.crew-view).graffiti-map-fullscreen-open #app .management-mobile-nav,
 body:not(.crew-view):has(#navigation.active) #app .management-mobile-nav{display:none!important}
}

/* v91: management Jobs cards and shared mobile back control. */
.management-mobile-back{display:none!important}
@media(max-width:760px){
body:not(.crew-view) #app .management-mobile-back{display:flex!important;align-items:center;justify-content:center;position:fixed;top:calc(12px + env(safe-area-inset-top));left:12px;width:44px;height:44px;border:1px solid #527c96;border-radius:50%;background:#061e30;color:#e2f5ff;z-index:110;padding:10px;cursor:pointer}
body:not(.crew-view) #app main>.page:not(#home){padding-top:calc(76px + env(safe-area-inset-top))!important}
body:not(.crew-view) #app #jobs.page{width:100%!important;max-width:none!important;margin:0!important;padding:calc(76px + env(safe-area-inset-top)) 12px 24px!important;height:auto!important;max-height:none!important;overflow:visible!important;transform:none!important}
body:not(.crew-view) #app #jobs>.page-title{display:block!important;margin:0 0 22px!important;padding:0!important;text-align:center!important}
body:not(.crew-view) #app #jobs>.page-title small{display:none!important}
body:not(.crew-view) #app #jobs>.page-title h1{font-size:25px!important;margin:0!important}
body:not(.crew-view) #app #jobs .open-jobs-toolbar{display:flex!important;justify-content:center!important;margin:0 0 14px!important;padding:0!important}
body:not(.crew-view) #app #jobs .open-job-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;width:80%!important;gap:0!important}
body:not(.crew-view) #app #jobs .open-job-tabs button{min-height:44px!important;font-size:14px!important;width:100%!important;margin:0!important}
body:not(.crew-view) #app #jobs .open-job-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:90%!important;height:auto!important;min-height:0!important;margin:0 auto 18px!important;padding:0!important;overflow:hidden!important;border-radius:12px!important}
body:not(.crew-view) #app #jobs .open-job-stats>div{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;min-width:0!important;min-height:82px!important;padding:12px 8px!important;border:1px solid #27495c!important}
body:not(.crew-view) #app #jobs .open-job-stats img{width:28px!important;height:28px!important}
body:not(.crew-view) #app #jobs .open-job-stats span{display:flex!important;flex-direction:column!important;gap:4px!important}
body:not(.crew-view) #app #jobs .open-job-stats b{font-size:27px!important}
body:not(.crew-view) #app #jobs .open-job-stats small{display:block!important;font-size:10px!important}
body:not(.crew-view) #app #jobs .open-list-panel{width:100%!important;max-width:none!important;padding:10px!important;border-radius:12px!important;overflow:visible!important}
body:not(.crew-view) #app #jobs .open-list-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important;padding:4px 0 12px!important;margin:0!important}
body:not(.crew-view) #app #jobs .open-list-head h2{font-size:21px!important;line-height:1.3!important;margin:0!important}
body:not(.crew-view) #app #jobs .open-list-controls{display:grid!important;grid-template-columns:1.2fr .9fr 1.15fr 40px!important;width:100%!important;gap:6px!important;margin:0!important}
body:not(.crew-view) #app #jobs .open-list-controls button, body:not(.crew-view) #app #jobs .open-list-controls select{min-width:0!important;width:100%!important;min-height:44px!important;padding:6px 4px!important;font-size:11px!important}
body:not(.crew-view) #app #jobs .open-job-columns{display:none!important}
body:not(.crew-view) #app #jobs #jobList{display:flex!important;flex-direction:column!important;gap:12px!important;width:100%!important;min-width:0!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:0!important}
body:not(.crew-view) #app #jobs .open-job-card{display:grid!important;grid-template-columns:1.15fr 1fr .65fr .45fr!important;grid-template-areas:"job job status status" "csr city route direction" "travel travel travel travel" "priority priority created created" "view view view view"!important;gap:16px 8px!important;width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;padding:14px 10px!important;margin:0!important;border:1px solid #285064!important;border-radius:12px!important;cursor:pointer}
body:not(.crew-view) #app #jobs .open-job-card>div{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;text-align:left!important}
body:not(.crew-view) #app #jobs .open-job-card small{display:block!important;font-size:10px!important;color:#9dc0d4!important;margin:0 0 5px!important}
body:not(.crew-view) #app #jobs .open-job-card b{font-size:14px!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere!important}
body:not(.crew-view) #app #jobs .open-job-card>.open-status-icon{display:none!important}
body:not(.crew-view) #app #jobs .open-job-card>.open-status-cell{align-items:flex-end!important;grid-area:status!important}
body:not(.crew-view) #app #jobs .open-status-cell>small{display:none!important}
body:not(.crew-view) #app #jobs .open-job-number{flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;gap:5px!important}
body:not(.crew-view) #app #jobs .open-job-number small, body:not(.crew-view) #app #jobs .open-job-number b{font-size:18px!important;font-weight:700!important;margin:0!important;color:inherit!important}
body:not(.crew-view) #app #jobs .open-route-cell img{width:40px!important;height:40px!important;object-fit:contain!important}
body:not(.crew-view) #app #jobs .open-direction-cell b{font-size:12px!important}
body:not(.crew-view) #app #jobs .open-direction-cell small{font-size:8px!important}
body:not(.crew-view) #app #jobs .open-status-badge{font-size:11px!important;padding:8px 10px!important}
body:not(.crew-view) #app #jobs .open-travel b{width:auto!important;padding:10px!important;font-size:13px!important}
body:not(.crew-view) #app #jobs .open-chevron{position:static!important;transform:none!important;display:flex!important;justify-content:space-between!important;align-items:center!important;min-height:44px!important;border-top:1px solid #285064!important;padding-top:10px!important;color:#24c9ed!important;font-size:24px!important}
body:not(.crew-view) #app #jobs .open-chevron::before{content:"View Job";font-size:15px;font-weight:700}
body:not(.crew-view) #app #jobs #openJobsMapPanel{width:100%!important;margin:0!important;padding:0!important}
body:not(.crew-view) #app #jobs #openJobsMap{display:block!important;width:100%!important;height:clamp(360px,62svh,620px)!important;min-height:360px!important;border:0!important;border-radius:8px!important}
body:not(.crew-view) #app #jobs #openJobsMapCount{font-size:12px!important;margin:8px 0!important}
body:not(.crew-view) #app #jobs.jobs-map-view #jobList{display:none!important}
body:not(.crew-view) #app #jobs #openJobsMapPanel[hidden]{display:none!important}
body:not(.crew-view) #app #jobs .open-job-card>.open-job-number{;grid-area:job!important}
body:not(.crew-view) #app #jobs .open-job-card>.open-csr-number{;grid-area:csr!important}
body:not(.crew-view) #app #jobs .open-job-card>.open-city-cell{;grid-area:city!important}
body:not(.crew-view) #app #jobs .open-job-card>.open-route-cell{;grid-area:route!important}
body:not(.crew-view) #app #jobs .open-job-card>.open-direction-cell{;grid-area:direction!important}
body:not(.crew-view) #app #jobs .open-job-card>.open-travel{;grid-area:travel!important}
body:not(.crew-view) #app #jobs .open-job-card>.open-priority-cell{;grid-area:priority!important}
body:not(.crew-view) #app #jobs .open-job-card>.open-created-cell{;grid-area:created!important}
body:not(.crew-view) #app #jobs .open-job-card>.open-chevron{;grid-area:view!important}
body:not(.crew-view) #app:has(#home.active) .management-mobile-back{display:none!important}
body.theme-day:not(.crew-view) #app #jobs .open-job-card small{color:#527386!important}
}

/* v92: tighten the real Jobs screen to match the approved mobile mockup. */
@media(max-width:760px){
 body:not(.crew-view) #app .management-mobile-back{position:fixed!important;top:calc(14px + env(safe-area-inset-top))!important;left:14px!important;width:44px!important;height:44px!important;z-index:1000!important}
 body:not(.crew-view) #app #jobs.page{padding:calc(72px + env(safe-area-inset-top)) 10px 24px!important}
 body:not(.crew-view) #app #jobs>.page-title{margin:0 0 18px!important}
 body:not(.crew-view) #app #jobs>.page-title h1{font-size:25px!important;line-height:44px!important}
 body:not(.crew-view) #app #jobs .open-job-tabs{width:min(78%,360px)!important}
 body:not(.crew-view) #app #jobs .open-job-stats{width:min(92%,430px)!important;margin-bottom:14px!important}
 body:not(.crew-view) #app #jobs .open-job-stats>div{min-height:72px!important;padding:8px 6px!important}
 body:not(.crew-view) #app #jobs .open-job-stats b{font-size:24px!important}
 body:not(.crew-view) #app #jobs .open-list-panel{padding:10px!important}
 body:not(.crew-view) #app #jobs .open-list-head{gap:10px!important;padding:2px 2px 10px!important}
 body:not(.crew-view) #app #jobs .open-list-head h2{font-size:20px!important}
 body:not(.crew-view) #app #jobs .open-list-controls{display:grid!important;grid-template-columns:minmax(126px,1fr) 44px!important;justify-content:space-between!important;gap:8px!important}
 body:not(.crew-view) #app #jobs .open-list-controls #openJobFilter,
 body:not(.crew-view) #app #jobs .open-list-controls #openJobSort{display:none!important}
 body:not(.crew-view) #app #jobs .open-list-controls button:first-child{grid-column:1!important;width:150px!important;max-width:100%!important;font-size:13px!important}
 body:not(.crew-view) #app #jobs .open-list-controls #refreshOpenJobs{grid-column:2!important;width:44px!important;min-width:44px!important;font-size:20px!important}
 body:not(.crew-view) #app #jobs #jobList{gap:10px!important}
 body:not(.crew-view) #app #jobs .open-job-card{grid-template-columns:1fr 1fr .7fr .42fr!important;grid-template-areas:"job job status status" "csr city route direction" "priority priority created created" "travel travel . ." "view view view view"!important;gap:10px 7px!important;padding:12px!important;border-radius:11px!important}
 body:not(.crew-view) #app #jobs .open-job-card>.open-job-number{display:flex!important;flex-direction:row!important;align-items:baseline!important;justify-content:flex-start!important;gap:5px!important}
 body:not(.crew-view) #app #jobs .open-job-number small{font-size:0!important;margin:0!important}
 body:not(.crew-view) #app #jobs .open-job-number small::before{content:'Job #';font-size:18px!important}
 body:not(.crew-view) #app #jobs.request-list-view .open-job-number small::before{content:'Requester';font-size:13px!important}
 body:not(.crew-view) #app #jobs .open-job-number b{font-size:18px!important;line-height:1.2!important}
 body:not(.crew-view) #app #jobs .open-job-card small{margin-bottom:3px!important}
 body:not(.crew-view) #app #jobs .open-job-card b{font-size:13px!important}
 body:not(.crew-view) #app #jobs .open-route-cell img{width:38px!important;height:38px!important}
 body:not(.crew-view) #app #jobs .open-travel{align-items:flex-start!important}
 body:not(.crew-view) #app #jobs .open-travel b{padding:8px 10px!important;font-size:12px!important}
 body:not(.crew-view) #app #jobs .open-priority-cell{align-items:flex-start!important;text-align:left!important}
 body:not(.crew-view) #app #jobs .open-created-cell{align-items:flex-end!important;justify-content:center!important;text-align:right!important}
 body:not(.crew-view) #app #jobs .open-chevron{width:100%!important;min-height:36px!important;padding:7px 2px 0!important;justify-content:space-between!important;gap:8px!important}
 body:not(.crew-view) #app #jobs .open-chevron::before{font-size:14px!important}
 body:not(.crew-view) #app #jobs #openJobsMap{height:calc(100svh - 285px)!important;min-height:390px!important}
 body:not(.crew-view) #app #jobs .open-jobs-map-toggle{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
 body:not(.crew-view) #app #jobs .open-jobs-map-toggle svg{display:block!important;width:21px!important;height:21px!important;flex:0 0 21px!important}
 body:not(.crew-view) #app #jobs .open-jobs-map-toggle::before,
 body:not(.crew-view) #app #jobs #refreshOpenJobs::before,
 body:not(.crew-view) #app #jobs #refreshOpenJobs::after{display:none!important;content:none!important}
 body:not(.crew-view) #app #jobs #refreshOpenJobs{font-size:0!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important}
 body:not(.crew-view) #app #jobs #refreshOpenJobs svg{display:block!important;width:23px!important;height:23px!important}
}

/* v96 — compact management phone home/footer to match D4 Field Map proportions. */
@media (max-width:760px){
  /* Pull the dashboard composition upward without changing desktop/tablet. */
  body:not(.crew-view) #app #home .home-hero{
    height:165px!important;
    min-height:165px!important;
    padding-top:22px!important;
  }
  body:not(.crew-view) #app #home .home-hero img{
    width:280px!important;
    max-height:60px!important;
  }
  body:not(.crew-view) #app #home .home-hero h2{
    margin-top:14px!important;
  }
  body:not(.crew-view) #app #home .home-grid{
    margin-bottom:16px!important;
  }
  body:not(.crew-view) #app #home .quick h2{
    margin-bottom:10px!important;
  }

  /* D4 Field Map-style compact fixed bottom navigation. */
  body:not(.crew-view) #app main{
    padding-bottom:calc(62px + env(safe-area-inset-bottom))!important;
  }
  body:not(.crew-view) #app #home.page{
    min-height:calc(100svh - 62px)!important;
    padding-bottom:18px!important;
  }
  body:not(.crew-view) #app .management-mobile-nav{
    height:calc(58px + env(safe-area-inset-bottom))!important;
    padding:3px 4px calc(3px + env(safe-area-inset-bottom))!important;
  }
  body:not(.crew-view) .management-mobile-nav button{
    gap:2px!important;
    min-height:42px!important;
    padding:0 2px!important;
  }
  body:not(.crew-view) .management-mobile-nav svg{
    width:23px!important;
    height:23px!important;
  }
  body:not(.crew-view) .management-mobile-nav span{
    font-size:10px!important;
    line-height:13px!important;
  }
}