/* ========================================================================== 
   iPHONE / iOS RESPONSIVE HARDENING · 2026-09-20
   Final cascade guard for Safari viewport sizing, safe areas, drawers, sheets
   and Operations layouts. Loaded after existing presentation styles.
   ========================================================================== */

html{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip;
}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
img,svg,video,canvas{max-width:100%}
main,section,article,aside,header,footer,nav,form,fieldset{min-width:0}

/* Public navigation ------------------------------------------------------- */
@media(max-width:900px){
  .public-site-header{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }
  .public-site-header .public-brand,
  .public-site-header .brand,
  .public-site-header .seo-brand,
  .public-site-header .brand-copy,
  .public-site-header .seo-brand>span{
    min-width:0!important;
    max-width:100%!important;
  }
  .public-site-header .public-brand,
  .public-site-header .brand,
  .public-site-header .seo-brand{overflow:hidden}
  .public-site-header .brand-copy strong,
  .public-site-header .seo-brand strong{
    display:block;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .public-site-header .public-menu-toggle{flex:0 0 auto}

  /* Avoid 100vw on iOS: layout viewport and visible viewport can diverge. */
  .public-site-header .public-nav,
  .topbar .marketing-nav,
  .seo-header .seo-nav{
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    width:auto!important;
    inline-size:auto!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
    max-height:min(620px,calc(100dvh - 112px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .public-site-header .public-nav a,
  .public-site-header .public-nav .nav-link,
  .topbar .site-link,
  .topbar .marketing-nav .nav-link,
  .seo-header .seo-nav a{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .public-nav-menu-head,
  .public-nav-menu-foot{min-width:0;max-width:100%;box-sizing:border-box}
  .public-nav-menu-head>span,
  .public-nav-menu-foot span,
  .public-nav-text{min-width:0;overflow-wrap:anywhere}
  .public-nav-menu-foot{flex-wrap:wrap}
}

@media(max-width:430px){
  .public-site-header{padding-left:max(9px,env(safe-area-inset-left))!important;padding-right:max(9px,env(safe-area-inset-right))!important}
  .public-site-header .bft-brand-mark{width:40px!important;height:40px!important;flex:0 0 40px!important}
  .public-site-header .brand-copy strong,
  .public-site-header .seo-brand strong{font-size:13px!important}
  .public-nav-menu-head em{display:none!important}
  .public-nav-menu-head{align-items:flex-start!important}
  .public-site-header .public-nav,
  .topbar .marketing-nav,
  .seo-header .seo-nav{left:max(6px,env(safe-area-inset-left))!important;right:max(6px,env(safe-area-inset-right))!important}
}

/* Public content: allow cards and long copy to actually shrink on Safari. */
@media(max-width:760px){
  .seo-hero,.seo-section,.seo-section-inner,.seo-heading,.seo-grid-3,.seo-grid-4,
  .fleet-grid,.route-box,.seo-crosslink,.link-cluster,.directory-grid,.contact-grid,
  #customer-view,#customer-view .hero,#customer-view #booking-card,#customer-view .form-step{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .seo-crosslink,.route-list>div,.seo-footer-top,.seo-footer-bottom{min-width:0}
  .route-list>div{flex-wrap:wrap}
  .route-list strong{min-width:0;overflow-wrap:anywhere}
  #customer-view input,#customer-view select,#customer-view textarea,
  .customer-portal-surface input,.customer-portal-surface select,.customer-portal-surface textarea{
    max-width:100%;
    font-size:16px;
  }
}

/* Operations / staff workspace ------------------------------------------ */
@media(max-width:900px){
  body.operations-active,
  #admin-view,
  #admin-view .operations-shell,
  #admin-view .operations-content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #admin-view .operations-content{overflow-x:clip!important}
  @supports not (overflow:clip){#admin-view .operations-content{overflow-x:hidden!important}}

  /* Safe-area pinned drawer: no 100vw calculations, no right-edge spill. */
  #admin-view .operations-sidebar{
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    top:max(8px,env(safe-area-inset-top))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box!important;
    max-height:none!important;
    transform:translate3d(calc(-100% - 24px),0,0)!important;
    overflow:hidden!important;
  }
  #admin-view .operations-shell.ops-menu-open .operations-sidebar{transform:translate3d(0,0,0)!important}
  #admin-view .operations-sidebar-brand,
  #admin-view .operations-sidebar-tools,
  #admin-view .operations-nav,
  #admin-view .operations-sidebar-foot{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  #admin-view .operations-sidebar-brand>div,
  #admin-view .ops-sidebar-tool>span,
  #admin-view .operations-nav-link>span:last-child{min-width:0}
  #admin-view .operations-sidebar-brand strong,
  #admin-view .operations-sidebar-brand small,
  #admin-view .ops-sidebar-tool strong,
  #admin-view .ops-sidebar-tool small,
  #admin-view .operations-nav-link strong,
  #admin-view .operations-nav-link small{overflow-wrap:anywhere}
  #admin-view .operations-nav{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.ops-nav-open{overflow:hidden!important;touch-action:none}
}

@media(max-width:680px){
  #admin-view.workspace{
    width:100%!important;
    max-width:100%!important;
    padding-left:max(8px,env(safe-area-inset-left))!important;
    padding-right:max(8px,env(safe-area-inset-right))!important;
  }
  #admin-view .operations-sidebar{
    bottom:calc(78px + env(safe-area-inset-bottom))!important;
  }
  #admin-view .ops-mobile-dock{
    left:max(7px,env(safe-area-inset-left))!important;
    right:max(7px,env(safe-area-inset-right))!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
  #admin-view .ops-mobile-dock-item{min-width:0!important;max-width:100%!important}

  /* Quick actions no longer look like a panel hanging off the right edge. */
  #admin-view .ops-quick-access{overflow:visible!important}
  #admin-view .ops-quick-access-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  #admin-view .ops-quick-card{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:72px!important;
    flex:none!important;
  }

  #admin-view .dispatch-head,
  #admin-view .panel,
  #admin-view .dispatch-filter-panel,
  #admin-view .dispatch-queue,
  #admin-view .finance-module,
  #admin-view .integration-card,
  #admin-view .geofence-pricing-panel,
  #admin-view .internal-booking{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #admin-view .dispatch-search-wrap{min-width:0!important;max-width:100%!important}
  #admin-view .dispatch-search-wrap>*{min-width:0!important}
  #admin-view input,#admin-view select,#admin-view textarea{max-width:100%;font-size:16px}

  /* Keep deliberately scrollable KPI strips inside the workspace rather than
     allowing their negative margins to contribute to document width. */
  #admin-view .dispatch-stats,
  #admin-view .finance-stats,
  #admin-view .driver-comp-stats,
  #admin-view .driver-commission-stats{
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

@media(max-width:420px){
  #admin-view .ops-quick-access-grid{grid-template-columns:1fr!important}
  #admin-view .dispatch-filter-panel.filters-open .dispatch-filters{grid-template-columns:1fr!important}
  #admin-view .dispatch-search-wrap{grid-template-columns:minmax(0,1fr) 78px!important}
  #admin-view .dispatch-search-button{width:78px!important;min-width:78px!important}
}

/* Dispatch table: Operations redesign previously reintroduced a 1180px table
   after the mobile card rules. Reassert the phone/tablet card layout last. */
@media(max-width:820px){
  #admin-view .dispatch-schedule-panel .table-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    -webkit-overflow-scrolling:auto!important;
  }
  #admin-view .dispatch-schedule-panel .dispatch-table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    table-layout:auto!important;
  }
  #admin-view .dispatch-schedule-panel .dispatch-table thead{display:none!important}
  #admin-view .dispatch-schedule-panel .dispatch-table tbody{
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    gap:9px!important;
    padding:8px!important;
  }
  #admin-view .dispatch-schedule-panel .dispatch-table tbody tr,
  #admin-view .dispatch-schedule-panel .dispatch-table tbody tr:has(td[colspan]){
    display:grid!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:58px minmax(0,1fr) auto!important;
    grid-template-areas:"time customer status" "time journey fare" "driver driver payment" "actions actions actions"!important;
    column-gap:9px!important;
    row-gap:6px!important;
    padding:10px!important;
    box-sizing:border-box!important;
    border:1px solid #e8dfd7!important;
    border-radius:14px!important;
    background:#fff!important;
  }
  #admin-view .dispatch-schedule-panel .dispatch-table th{display:none!important}
  #admin-view .dispatch-schedule-panel .dispatch-table td,
  #admin-view .dispatch-schedule-panel .dispatch-table td.ops-actions-cell,
  #admin-view .dispatch-schedule-panel .dispatch-table td[colspan]{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  #admin-view .dispatch-schedule-panel .dispatch-table td:nth-child(1){grid-area:time}
  #admin-view .dispatch-schedule-panel .dispatch-table td:nth-child(2){grid-area:customer}
  #admin-view .dispatch-schedule-panel .dispatch-table td:nth-child(3){grid-area:journey}
  #admin-view .dispatch-schedule-panel .dispatch-table td:nth-child(4){grid-area:driver}
  #admin-view .dispatch-schedule-panel .dispatch-table td:nth-child(5){grid-area:status}
  #admin-view .dispatch-schedule-panel .dispatch-table td:nth-child(6){grid-area:payment}
  #admin-view .dispatch-schedule-panel .dispatch-table td:nth-child(7){grid-area:fare;text-align:right}
  #admin-view .dispatch-schedule-panel .dispatch-table td:nth-child(8){grid-area:actions}
  #admin-view .dispatch-schedule-panel .dispatch-table td[colspan]{grid-column:1/-1!important;grid-area:auto!important;text-align:center}
  #admin-view .dispatch-schedule-panel .dispatch-table .ops-journey-cell{min-width:0!important;max-width:100%!important}
  #admin-view .dispatch-schedule-panel .dispatch-table .ops-journey-cell>div{min-width:0!important;max-width:100%!important}
  #admin-view .dispatch-schedule-panel .driver-assignment{width:100%!important;max-width:100%!important;min-width:0!important}
  #admin-view .dispatch-schedule-panel .ops-actions-cell{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important}
}

@media(max-width:390px){
  #admin-view .dispatch-schedule-panel .dispatch-table tbody tr{
    grid-template-columns:54px minmax(0,1fr) auto!important;
    padding:9px!important;
  }
}

/* Full-screen mobile edit sheets ---------------------------------------- */
@media(max-width:680px){
  .booking-edit-modal{
    align-items:stretch!important;
    justify-content:stretch!important;
    padding:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  .booking-edit-card,
  #staff-edit-modal .staff-edit-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    box-sizing:border-box!important;
    padding-top:max(16px,env(safe-area-inset-top))!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
    padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .booking-edit-head,.booking-edit-grid,.booking-edit-card form,
  .multi-pickup-wrap,.multi-pickup-row,.multi-pickup-row .pickup-stop-main{
    min-width:0!important;
    max-width:100%!important;
  }
  .booking-edit-card input,.booking-edit-card select,.booking-edit-card textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box;font-size:16px}
  .booking-edit-actions,
  #staff-edit-modal .staff-edit-actions{
    left:0!important;
    right:0!important;
    width:auto!important;
    max-width:none!important;
    box-sizing:border-box!important;
    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
  }
}

/* Customer + driver portal containment --------------------------------- */
@media(max-width:700px){
  .customer-portal-shell,.customer-portal-grid,.customer-actions-grid,
  .driver-shell,.job-list,.job-card,.driver-company-balance{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .customer-request-history-item,.driver-company-case{min-width:0;max-width:100%}
  .customer-booking-ref,.customer-summary-route,.customer-summary-vehicle{min-width:0}
  .customer-summary-route h3,.customer-details-grid dd,.driver-company-case *{overflow-wrap:anywhere}
}