/* PhazTrack simple mobile UX standard · 2026-10-03
   Locked model: Live · Vehicles · Trips · Alerts · More.
   Mobile presentation only; tracking, telemetry and APIs are unchanged. */
@media (max-width:900px){
  body[data-product="phaztrack"]{background:#f4f6f9!important;color:#142033}
  body[data-product="phaztrack"] #customerApp>.main{padding:10px 10px 92px!important;background:#f4f6f9!important}
  body[data-product="phaztrack"] #customerApp>.main>.top{position:sticky;top:0;z-index:18;min-height:56px!important;margin:-10px -10px 10px;padding:8px 12px!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid #e5e9ef;backdrop-filter:blur(12px)}
  body[data-product="phaztrack"] #appNotice{display:none!important}
  body[data-product="phaztrack"] .card{border-radius:18px!important;border-color:#e1e6ed!important;box-shadow:none!important}
  body[data-product="phaztrack"] .section-title h2,
  body[data-product="phaztrack"] .tracking-map-head h2{font-size:1.05rem!important}
  body[data-product="phaztrack"] button,
  body[data-product="phaztrack"] input,
  body[data-product="phaztrack"] select{min-height:48px}
  body[data-product="phaztrack"] .tracking-map-card{padding:10px!important;border-radius:20px!important}
  body[data-product="phaztrack"] .tracking-map-head{padding:4px 2px 8px!important}
  body[data-product="phaztrack"] .tracking-tools{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
  body[data-product="phaztrack"] .tracking-tools button{font-size:.72rem!important;padding:8px 5px!important;border-radius:12px!important}
  body[data-product="phaztrack"] #phazLiveMap{min-height:52dvh!important;border-radius:16px!important}
  body[data-product="phaztrack"] .vehicle-filter{display:flex!important;gap:6px!important;overflow-x:auto!important;scrollbar-width:none}
  body[data-product="phaztrack"] .vehicle-filter::-webkit-scrollbar{display:none}
  body[data-product="phaztrack"] .vehicle-filter button{flex:0 0 auto!important;min-height:40px!important;border-radius:999px!important;padding:7px 12px!important}
  body[data-product="phaztrack"] .tracking-vehicle{min-height:64px!important;border-radius:14px!important;padding:10px!important}
  body[data-product="phaztrack"].pt-simple-vehicles section[data-view="hardware"]>.two,
  body[data-product="phaztrack"].pt-simple-vehicles section[data-view="hardware"]>.card:last-child{display:none!important}
  body[data-product="phaztrack"] section[data-view="hardware"]>.card:first-child{margin-top:0!important}
  body[data-product="phaztrack"] section[data-view="hardware"] .setup-form{border-radius:16px!important}
  body[data-product="phaztrack"] section[data-view="hardware"] .setup-form h3{font-size:1.05rem!important}
  body[data-product="phaztrack"] section[data-view="hardware"] .setup-form p{font-size:.82rem!important;line-height:1.45!important}
  body[data-product="phaztrack"] .mobilebar{display:grid!important;grid-template-columns:repeat(5,1fr)!important;left:8px!important;right:8px!important;bottom:7px!important;width:auto!important;min-height:68px!important;padding:5px!important;border:1px solid #dfe5ec!important;border-radius:20px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 12px 36px rgba(16,24,40,.16)!important;backdrop-filter:blur(16px)!important;z-index:4300!important}
  body[data-product="phaztrack"] .mobilebar button{min-height:56px!important;padding:5px 2px!important;border-radius:14px!important;color:#687386!important;background:transparent!important;font-size:.66rem!important;font-weight:800!important;touch-action:manipulation}
  body[data-product="phaztrack"] .mobilebar button:before{width:23px!important;height:23px!important;margin:0 auto 3px!important;background:currentColor!important}
  body[data-product="phaztrack"] .mobilebar button.active{color:#d7192d!important;background:#fff0f2!important}
  body[data-product="phaztrack"] .mobilebar button[data-simple-more]:before{content:"•••";display:grid!important;place-items:center!important;width:26px!important;height:23px!important;margin:0 auto 3px!important;-webkit-mask:none!important;mask:none!important;background:transparent!important;font-size:1rem!important;line-height:1!important;font-weight:950!important}
}
.pt-simple-more-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:4398;opacity:0;pointer-events:none;transition:.18s}
.pt-simple-more-backdrop.open{opacity:1;pointer-events:auto}
.pt-simple-more-sheet{position:fixed;left:0;right:0;bottom:0;z-index:4399;background:#fff;border-radius:26px 26px 0 0;padding:10px 16px max(22px,env(safe-area-inset-bottom));transform:translateY(105%);transition:.22s;box-shadow:0 -18px 48px rgba(16,24,40,.18);max-height:76dvh;overflow:auto;color:#142033}
.pt-simple-more-sheet.open{transform:none}
.pt-simple-more-grab{width:42px;height:4px;border-radius:999px;background:#d6dce4;margin:0 auto 13px}
.pt-simple-more-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pt-simple-more-head h2{margin:0;font-size:1.25rem}
.pt-simple-more-close{width:40px;height:40px!important;min-height:40px!important;border:0;border-radius:50%;background:#f1f3f6;color:#172033;font-size:1.2rem}
.pt-simple-more-copy{margin:5px 0 14px;color:#6b7585;font-size:.8rem;line-height:1.45}
.pt-simple-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.pt-simple-more-item{min-height:70px!important;border:1px solid #e2e7ee;border-radius:16px;background:#fff;color:#172033;text-align:left;padding:12px;font:inherit;font-size:.8rem;font-weight:850;touch-action:manipulation}
.pt-simple-more-item small{display:block;margin-top:4px;color:#788395;font-size:.65rem;font-weight:600;line-height:1.35}
.pt-simple-toast{position:fixed;left:16px;right:16px;bottom:92px;z-index:4500;padding:12px 14px;border-radius:14px;background:#172033;color:#fff;font-size:.8rem;text-align:center;box-shadow:0 12px 30px rgba(16,24,40,.22)}
@media (min-width:901px){.pt-simple-more-backdrop,.pt-simple-more-sheet,.pt-simple-toast{display:none!important}}

/* Phone-only map decluttering: keep real filters/actions accessible inside their menus. */
@media (max-width:600px){
  body[data-product="phaztrack"] .view[data-view="fleet"] .tracking-map-card > .tracking-tools,
  body[data-product="phaztrack"] .view[data-view="fleet"] .tracking-map-card #phazShowAll,
  body[data-product="phaztrack"] .view[data-view="fleet"] .tracking-map-card #phazMapViewButton{
    display:none!important;
  }
  body[data-product="phaztrack"] #pt3MapDock{
    position:absolute!important;top:10px!important;left:10px!important;right:10px!important;
    width:auto!important;max-width:none!important;display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:7px!important;align-items:start!important;pointer-events:none!important;
  }
  body[data-product="phaztrack"] #ptSimpleStatusToggle{
    grid-column:1!important;grid-row:1!important;justify-self:start!important;
    display:inline-flex!important;align-items:center!important;max-width:100%!important;
    min-height:42px!important;height:42px!important;padding:0 12px!important;
    border:1px solid #d3dce5!important;border-radius:13px!important;
    background:rgba(255,255,255,.97)!important;color:#10283b!important;
    box-shadow:0 5px 15px rgba(7,24,39,.16)!important;
    font:800 .74rem/1.2 system-ui,sans-serif!important;white-space:nowrap!important;
    cursor:pointer!important;pointer-events:auto!important;
  }
  body[data-product="phaztrack"] #pt3MapDock .pt3-action-row{
    grid-column:2!important;grid-row:1!important;justify-self:end!important;
    display:flex!important;width:auto!important;max-width:none!important;overflow:visible!important;
  }
  body[data-product="phaztrack"] #pt3PhoneToolsToggle{
    height:42px!important;min-height:42px!important;min-width:108px!important;
    border-radius:13px!important;background:rgba(255,255,255,.97)!important;
    color:#10283b!important;box-shadow:0 5px 15px rgba(7,24,39,.16)!important;
  }
  body[data-product="phaztrack"] #pt3MapDock .pt3-status-row{
    grid-column:1/-1!important;grid-row:2!important;display:none!important;
    width:100%!important;max-width:100%!important;gap:5px!important;
    padding:5px!important;border:1px solid #dce5ec!important;border-radius:13px!important;
    box-sizing:border-box!important;background:rgba(255,255,255,.96)!important;
    box-shadow:0 8px 18px rgba(7,24,39,.13)!important;overflow-x:auto!important;
    pointer-events:auto!important;
  }
  body[data-product="phaztrack"] #pt3MapDock.pt-simple-filters-open .pt3-status-row{
    display:flex!important;
  }
  body[data-product="phaztrack"] #pt3PhoneToolsMenu{
    top:59px!important;left:auto!important;right:10px!important;
    max-height:60dvh!important;overflow:auto!important;
  }
  html[data-st-theme="dark"] body[data-product="phaztrack"] #ptSimpleStatusToggle,
  html[data-st-theme="dark"] body[data-product="phaztrack"] #pt3PhoneToolsToggle,
  html[data-st-theme="dark"] body[data-product="phaztrack"] #pt3MapDock .pt3-status-row{
    color:#f8fafc!important;background:rgba(15,30,48,.97)!important;
    border-color:#395066!important;
  }
  html[data-st-theme="dark"] body[data-product="phaztrack"] #pt3PhoneToolsMenu{
    background:#122238!important;border-color:#395066!important;
  }
  html[data-st-theme="dark"] body[data-product="phaztrack"] #pt3PhoneToolsMenu button{
    color:#f8fafc!important;background:#1c3048!important;border-color:#395066!important;
  }
  html[data-st-theme="dark"] body[data-product="phaztrack"] #pt3PhoneToolsMenu button.active{
    background:#bd1731!important;
  }
}

/* Approved 2026-10-08 customer phone navigation redesign.
   Desktop styling, GPS layers and Leaflet touch gestures are unchanged. */
@media(max-width:600px){
 body[data-product="phaztrack"] .pt3-mobile-header{
   grid-template-columns:40px minmax(0,1fr)!important;padding:8px 14px!important;
 }
 body[data-product="phaztrack"] .pt3-mobile-header .pt3-mobile-language,
 body[data-product="phaztrack"] .pt3-mobile-header .pt3-mobile-signout{display:none!important}
 body[data-product="phaztrack"] .pt3-mobile-brand{justify-content:center!important;font-size:1.08rem!important}
 body[data-product="phaztrack"] .mobilebar{
   bottom:0!important;left:0!important;right:0!important;width:100%!important;
   border-radius:18px 18px 0 0!important;border:0!important;border-top:1px solid #dfe5ec!important;
   min-height:72px!important;padding:6px 5px max(7px,env(safe-area-inset-bottom))!important;
   background:#fff!important;box-shadow:0 -4px 20px rgba(7,24,39,.07)!important;
 }
 body[data-product="phaztrack"] .mobilebar button{
   display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
   gap:4px!important;min-width:0!important;min-height:57px!important;padding:5px 1px!important;
   white-space:nowrap!important;overflow:visible!important;border-radius:11px!important;
   font:750 .67rem/1.1 system-ui,sans-serif!important;color:#627186!important;background:transparent!important;
   box-shadow:none!important;touch-action:manipulation!important;
 }
 body[data-product="phaztrack"] .mobilebar button:before{display:none!important;content:none!important}
 body[data-product="phaztrack"] .mobilebar button .pt-tab-icon{
   display:block!important;width:23px!important;height:23px!important;flex:none!important;
   fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;
 }
 body[data-product="phaztrack"] .mobilebar button.active{
   background:#fff1f3!important;color:#cf1f38!important;box-shadow:none!important;
 }
 body[data-product="phaztrack"] .mobilebar button span{display:block!important;font:inherit!important}
 body[data-product="phaztrack"] .view[data-view="fleet"] .tracking-map-head,
 body[data-product="phaztrack"] .view[data-view="fleet"] .tracking-tools{display:none!important}
 body[data-product="phaztrack"] #pt3MapDock .pt3-status-row button,
 body[data-product="phaztrack"] #ptSimpleStatusToggle{touch-action:manipulation!important}
 body[data-product="phaztrack"] .view[data-view="fleet"] .vehicle-panel.phaz-sheet-open{
   border-radius:19px 19px 0 0!important;background:#fff!important;
   box-shadow:0 -10px 32px rgba(7,24,39,.18)!important;
   max-height:66dvh!important;bottom:76px!important;padding-bottom:9px!important;
 }
 body[data-product="phaztrack"] .vehicle-panel .tracking-vehicle{
   border:1px solid #e0e7ee!important;background:#fff!important;
   border-radius:13px!important;margin-bottom:8px!important;
 }
 .pt-simple-more-sheet{
   max-height:84dvh!important;padding:11px 18px max(24px,env(safe-area-inset-bottom))!important;
   border-radius:24px 24px 0 0!important;
 }
 .pt-simple-more-grid{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
 .pt-simple-account-group{
   display:block!important;margin:15px 0 2px!important;padding:7px 2px 0!important;
   border-top:1px solid #e4e9ef!important;color:#6d7989!important;
   font:800 .72rem/1.1 system-ui,sans-serif!important;letter-spacing:.045em!important;
   text-transform:uppercase!important;
 }
 .pt-simple-account-group:first-child{border:0!important;margin-top:2px!important}
 .pt-simple-more-item{
   min-height:56px!important;padding:10px 13px!important;border-radius:12px!important;
   border:1px solid #e1e7ed!important;background:#fff!important;text-align:left!important;
 }
 .pt-simple-more-item[hidden]{display:none!important}
 .pt-simple-more-item strong{font:800 .85rem/1.2 system-ui,sans-serif!important}
 .pt-simple-more-item small{font:.68rem/1.3 system-ui,sans-serif!important;margin-top:3px!important}
 html[data-st-theme="dark"] body[data-product="phaztrack"] .pt-simple-account-group{color:#acbad0!important;border-color:#35465a!important}
 html[data-st-theme="dark"] body[data-product="phaztrack"] .mobilebar{
   background:#132338!important;border-color:#31465d!important;
 }
 html[data-st-theme="dark"] body[data-product="phaztrack"] .mobilebar button{color:#ced8e5!important}
 html[data-st-theme="dark"] body[data-product="phaztrack"] .mobilebar button.active{color:#fff!important;background:#9e1730!important}
}

/* October 8 Android acceptance repair: one summary + one map-tools control.
   Explicit selectors win over the locked V3 nav pseudo-icon rules; no map or
   tracking behaviour changes. */
@media (max-width:600px){
 body[data-product="phaztrack"] #customerApp #pt3MobileHeader{
   grid-template-columns:40px minmax(0,1fr)!important;
 }
 body[data-product="phaztrack"] #customerApp #pt3MobileHeader .pt3-mobile-language,
 body[data-product="phaztrack"] #customerApp #pt3MobileHeader .pt3-mobile-signout{
   display:none!important;
 }
 body[data-product="phaztrack"] #customerApp #pt3MobileHeader .pt3-mobile-brand{
   justify-content:center!important;overflow:hidden!important;
 }
 body[data-product="phaztrack"] #customerApp > .mobilebar{
   display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
   width:100%!important;left:0!important;right:0!important;bottom:0!important;
   height:auto!important;min-height:72px!important;
   background:#fff!important;border-top:1px solid #dfe5ec!important;
   border-radius:18px 18px 0 0!important;
 }
 body[data-product="phaztrack"] #customerApp > .mobilebar button{
   display:flex!important;flex-direction:column!important;align-items:center!important;
   justify-content:center!important;gap:4px!important;min-width:0!important;
   color:#536477!important;background:transparent!important;
   border:0!important;border-radius:10px!important;box-shadow:none!important;
 }
 body[data-product="phaztrack"] #customerApp > .mobilebar button[data-simple-view]::before,
 body[data-product="phaztrack"] #customerApp > .mobilebar button[data-simple-more]::before,
 body[data-product="phaztrack"] #customerApp > .mobilebar button::after{
   display:none!important;content:none!important;width:0!important;height:0!important;
   margin:0!important;padding:0!important;background:none!important;
   -webkit-mask:none!important;mask:none!important;box-shadow:none!important;
 }
 body[data-product="phaztrack"] #customerApp > .mobilebar button .pt-tab-icon{
   display:block!important;width:23px!important;height:23px!important;
   flex:0 0 23px!important;stroke:currentColor!important;
   stroke-width:1.8!important;fill:none!important;background:none!important;
 }
 body[data-product="phaztrack"] #customerApp > .mobilebar button.active{
   background:#fff1f3!important;color:#c81934!important;box-shadow:none!important;
 }
 body[data-product="phaztrack"] #customerApp #pt3MapDock{
   position:absolute!important;display:grid!important;top:8px!important;
   left:8px!important;right:8px!important;width:auto!important;max-width:none!important;
   grid-template-columns:minmax(0,1fr) auto!important;column-gap:7px!important;
   align-items:start!important;pointer-events:none!important;
 }
 body[data-product="phaztrack"] #customerApp #ptSimpleStatusToggle{
   grid-column:1!important;grid-row:1!important;justify-self:start!important;
   pointer-events:auto!important;min-height:42px!important;
 }
 body[data-product="phaztrack"] #customerApp #pt3MapDock .pt3-action-row{
   grid-column:2!important;grid-row:1!important;
   display:flex!important;width:auto!important;justify-self:end!important;
   pointer-events:auto!important;
 }
 body[data-product="phaztrack"] #customerApp #pt3StatusRow{
   grid-column:1/-1!important;grid-row:2!important;display:none!important;
   pointer-events:auto!important;
 }
 body[data-product="phaztrack"] #customerApp #pt3MapDock.pt-simple-filters-open #pt3StatusRow{
   display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;
 }
 body[data-product="phaztrack"] #customerApp #pt3StatusRow button[data-filter]{
   display:inline-flex!important;flex:0 0 auto!important;min-height:36px!important;
 }
 html[data-st-theme="dark"] body[data-product="phaztrack"] #customerApp > .mobilebar{
   background:#132338!important;border-color:#31465d!important;
 }
 html[data-st-theme="dark"] body[data-product="phaztrack"] #customerApp > .mobilebar button{
   color:#ced8e5!important;
 }
 html[data-st-theme="dark"] body[data-product="phaztrack"] #customerApp > .mobilebar button.active{
   background:#9e1730!important;color:#fff!important;
 }
}