/* 3.98071: cleaner, information-first Dispatch layout for phones. */
@media (max-width:720px){
  html body[data-current-view="board"],html body:has(#boardView.active-view){--m-navy:#112131;--m-ink:#18283a;--m-muted:#66768a;--m-line:#dce4ed;--m-canvas:#f3f6f9;background:var(--m-canvas)!important}
  html body[data-current-view="board"] .app-shell,html body:has(#boardView.active-view) .app-shell{min-height:100dvh!important;background:var(--m-canvas)!important}

  /* Compact app bar */
  html body[data-current-view="board"] .app-shell>.sidebar,html body:has(#boardView.active-view) .app-shell>.sidebar{position:fixed!important;inset:0 0 auto 0!important;z-index:50!important;width:100%!important;max-width:100vw!important;min-height:calc(62px + env(safe-area-inset-top,0px))!important;height:calc(62px + env(safe-area-inset-top,0px))!important;padding:env(safe-area-inset-top,0px) 14px 0!important;border:0!important;border-bottom:1px solid rgb(255 255 255/.1)!important;background:var(--m-navy)!important;box-shadow:0 2px 10px rgb(15 31 47/.14)!important;box-sizing:border-box!important}
  html body[data-current-view="board"] .sidebar .brand,html body:has(#boardView.active-view) .sidebar .brand{position:absolute!important;inset:env(safe-area-inset-top,0px) 72px auto!important;display:flex!important;align-items:center!important;justify-content:center!important;height:62px!important;margin:0!important;padding:0!important}
  html body[data-current-view="board"] .sidebar .brand-logo,html body:has(#boardView.active-view) .sidebar .brand-logo{width:108px!important;max-width:108px!important;height:44px!important;object-fit:contain!important;border-radius:7px!important}
  html body[data-current-view="board"] .mobile-menu-toggle,html body:has(#boardView.active-view) .mobile-menu-toggle{position:absolute!important;top:calc(10px + env(safe-area-inset-top,0px))!important;left:14px!important;width:42px!important;height:42px!important;margin:0!important;border:1px solid rgb(255 255 255/.18)!important;border-radius:11px!important;background:rgb(255 255 255/.07)!important}
  html body[data-current-view="board"] .sidebar .user-avatar,html body:has(#boardView.active-view) .sidebar .user-avatar{top:calc(10px + env(safe-area-inset-top,0px))!important;right:14px!important;width:42px!important;height:42px!important}
  html body[data-current-view="board"] .main,html body:has(#boardView.active-view) .main{padding:calc(62px + env(safe-area-inset-top,0px)) 0 calc(76px + env(safe-area-inset-bottom,0px))!important;background:var(--m-canvas)!important}
  html body[data-current-view="board"] #boardView,html body:has(#boardView.active-view) #boardView{padding:0 14px 18px!important}

  /* Clear command row */
  html body[data-current-view="board"] .topbar,html body:has(#boardView.active-view) .topbar{margin:0 -14px!important;padding:13px 14px 13px 22px!important;border-bottom:1px solid var(--m-line)!important;background:#fff!important}
  html body[data-current-view="board"] #mainTitle,html body:has(#boardView.active-view) #mainTitle{margin:2px 0 0!important;color:var(--m-ink)!important;font-size:22px!important;font-weight:850!important;letter-spacing:-.025em!important}
  html body[data-current-view="board"] .top-actions,html body:has(#boardView.active-view) .top-actions{gap:7px!important}
  html body[data-current-view="board"] .topbar .top-actions:before,html body:has(#boardView.active-view) .topbar .top-actions:before{content:none!important;display:none!important}
  html body[data-current-view="board"] .top-actions #newLoad,html body[data-current-view="board"] .top-actions #refreshBoard,html body[data-current-view="board"] .top-actions #dispatchActionsMenu,html body:has(#boardView.active-view) .top-actions #newLoad,html body:has(#boardView.active-view) .top-actions #refreshBoard,html body:has(#boardView.active-view) .top-actions #dispatchActionsMenu{width:40px!important;min-width:40px!important;min-height:40px!important;height:40px!important;border-radius:11px!important}
  html body[data-current-view="board"] .topbar .top-actions #newLoad:before,html body[data-current-view="board"] .topbar .top-actions #newLoad:after,html body:has(#boardView.active-view) .topbar .top-actions #newLoad:before,html body:has(#boardView.active-view) .topbar .top-actions #newLoad:after{content:none!important;display:none!important}
  html body[data-current-view="board"] .topbar .top-actions #newLoad .new-load-plus-icon,html body:has(#boardView.active-view) .topbar .top-actions #newLoad .new-load-plus-icon{display:block!important;width:20px!important;height:20px!important;margin:0!important;fill:none!important;stroke:#fff!important;stroke-width:4!important;stroke-linecap:square!important;pointer-events:none!important}

  /* Compact swipeable counts */
  html body #boardView>.metric-grid{gap:7px!important;margin:0 -14px!important;padding:10px 14px 9px!important;border-bottom:1px solid var(--m-line)!important;background:#fff!important;scroll-padding-inline:14px!important;overscroll-behavior-inline:contain!important}
  html body #boardView>.metric-grid:before,html body #boardView>.metric-grid:after{content:""!important;display:block!important;flex:0 0 1px!important}
  html body #boardView>.metric-grid .metric{min-height:38px!important;padding:7px 12px!important;border:1px solid var(--m-line)!important;border-left-width:4px!important;background:#fff!important;box-shadow:none!important}
  html body #boardView>.metric-grid .metric[data-status="All"]{border-left-color:#2370b5!important}
  html body #boardView>.metric-grid .metric.status-open{border-left-color:#de3e36!important;background:#fff9f8!important}
  html body #boardView>.metric-grid .metric.status-covered{border-left-color:#ee8917!important;background:#fffaf4!important}
  html body #boardView>.metric-grid .metric.status-transit{border-left-color:#f2c01f!important;background:#fffdf5!important}
  html body #boardView>.metric-grid .metric.status-delivered{border-left-color:#1d9a55!important;background:#f7fcf9!important}
  html body #boardView>.metric-grid .metric.status-expired{border-left-color:#334155!important;background:#f8fafc!important}
  html body #boardView>.metric-grid .metric.status-hold{border-left-color:#64748b!important;background:#f8fafc!important}
  html body #boardView>.metric-grid .metric.status-pending{border-left-color:#3478bd!important;background:#f7faff!important}
  html body #boardView>.metric-grid .metric span{color:var(--m-muted)!important;font-size:12px!important;font-weight:650!important}
  html body #boardView>.metric-grid .metric strong{color:var(--m-ink)!important;font-size:14px!important;font-weight:850!important}
  html body #boardView#boardView>.metric-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;overflow:visible!important;padding:10px 14px!important}
  html body #boardView#boardView>.metric-grid:before,html body #boardView#boardView>.metric-grid:after{display:none!important;content:none!important}
  html body #boardView#boardView>.metric-grid .metric{display:flex!important;width:100%!important;min-width:0!important;max-width:none!important;min-height:38px!important;padding:6px 7px!important;gap:4px!important;justify-content:center!important;overflow:hidden!important}
  html body #boardView#boardView>.metric-grid .metric span{min-width:0!important;font-size:10px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html body #boardView#boardView>.metric-grid .metric strong{flex:0 0 auto!important;font-size:13px!important}
  @media (max-width:360px){html body #boardView#boardView>.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
  html body #boardView#boardView>.metric-grid{position:sticky!important;top:calc(62px + env(safe-area-inset-top,0px))!important;z-index:41!important;display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:10px 14px!important;border-bottom:0!important;scroll-padding-inline:14px!important;scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch!important;box-shadow:none!important}
  html body #boardView#boardView>.metric-grid .metric{order:1!important;flex:0 0 auto!important;width:auto!important;min-width:max-content!important;max-width:none!important;padding:7px 12px!important;overflow:visible!important;scroll-snap-align:start!important}
  html body #boardView#boardView>.metric-grid .metric[data-status="All"]{order:0!important}
  html body #boardView#boardView>.metric-grid .metric span{font-size:12px!important;overflow:visible!important;text-overflow:clip!important}
  html body #boardView#boardView>.metric-grid .metric strong{font-size:14px!important}

  /* Search sits against the list */
  html body[data-current-view="board"] #boardView .board-tools,html body:has(#boardView.active-view) #boardView .board-tools{top:calc(120px + env(safe-area-inset-top,0px))!important;z-index:40!important;width:100vw!important;max-width:100vw!important;gap:8px!important;margin:0 -14px!important;padding:9px 14px!important;border:0!important;background:var(--m-canvas)!important;backdrop-filter:none!important;box-shadow:0 8px 12px -10px rgb(15 31 47/.65)!important;box-sizing:border-box!important}
  html body #boardView .board-tools>.search-wrap input,html body #boardView .board-tools #searchInput,html body #boardView .board-tools>#dispatchMobileFiltersToggle{min-height:42px!important;height:42px!important;border:1px solid #cfd9e5!important;border-radius:11px!important;background:#fff!important;box-shadow:0 1px 2px rgb(24 40 58/.04)!important}
  html body #boardView .board-tools>.search-wrap input,html body #boardView .board-tools #searchInput{padding-inline:14px!important;color:var(--m-ink)!important;font-size:16px!important;text-align:left!important}
  html body #boardView .board-tools>#dispatchMobileFiltersToggle{width:44px!important;min-width:44px!important;padding:0!important;color:var(--m-ink)!important;font-size:0!important}
  html body #boardView .board-tools>#dispatchMobileFiltersToggle svg{display:block!important;width:21px!important;height:21px!important;fill:currentColor!important}
  html body #boardView#boardView .board-tools>#dispatchMobileFiltersToggle#dispatchMobileFiltersToggle svg{display:none!important}
  html body #boardView#boardView .board-tools>#dispatchMobileFiltersToggle#dispatchMobileFiltersToggle:before{content:""!important;display:block!important;width:21px!important;height:19px!important;background:currentColor!important;clip-path:polygon(5% 8%,95% 8%,62% 46%,62% 86%,42% 96%,42% 46%)!important}

  /* Dense load cards: load/status first, customer/route second */
  html body #boardView #loadsSection{width:100vw!important;max-width:100vw!important;margin:-1px -14px 0!important;padding-top:0!important;border-top:0!important;border-radius:0!important;box-shadow:none!important;box-sizing:border-box!important}
  html body #boardView #loadsBody,html body #boardView #loadsBody table,html body #boardView #loadsBody tbody{width:100vw!important;max-width:100vw!important;margin:0!important;padding:0!important;border-top:0!important;border-radius:0!important;box-sizing:border-box!important}
  html body #boardView #loadRows{gap:0!important;width:100vw!important;max-width:100vw!important;margin:0!important;padding-top:0!important;border-top:0!important;border-bottom:1px solid var(--m-line)!important;background:#fff!important;box-sizing:border-box!important}
  html body #boardView #loadRows>tr:not(.group-row):not(.load-alert-detail-row):not(.load-detail-row){grid-template-columns:minmax(62px,auto) minmax(82px,auto) minmax(0,1fr) 26px 30px!important;grid-template-rows:1fr!important;column-gap:5px!important;row-gap:0!important;align-items:center!important;width:100vw!important;max-width:100vw!important;min-height:54px!important;margin:0!important;padding:8px 12px!important;border:0!important;border-bottom:1px solid var(--m-line)!important;border-left:4px solid #8aa4bf!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;box-sizing:border-box!important}
  html body #boardView #loadRows>tr.mobile-row-alt:not(.group-row):not(.load-alert-detail-row):not(.load-detail-row){background:#f2f6fa!important}
  html body #boardView #loadRows>tr:not(.group-row):not(.load-alert-detail-row):not(.load-detail-row):last-child{border-bottom:0!important}
  html body #boardView#boardView #loadRows#loadRows>tr:not(.group-row):not(.load-alert-detail-row):not(.load-detail-row)>.dispatch-load-number-col{grid-column:2!important;grid-row:1!important;justify-self:start!important;max-width:none!important}
  html body #boardView #loadRows .dispatch-load-copy{min-height:28px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
  html body #boardView #loadRows .dispatch-load-copy strong{color:var(--m-ink)!important;font-size:16px!important;font-weight:850!important;letter-spacing:.01em!important}
  html body #boardView#boardView #loadRows#loadRows>tr:not(.group-row):not(.load-alert-detail-row):not(.load-detail-row)>.dispatch-status-col{grid-column:1!important;grid-row:1!important;justify-self:start!important;min-width:0!important;max-width:none!important}
  html body #boardView #loadRows .status-pill-select{min-width:60px!important;max-width:74px!important;height:28px!important;min-height:28px!important;padding:0 18px 0 7px!important;border:1px solid currentColor!important;border-radius:999px!important;font-size:9px!important;font-weight:850!important;letter-spacing:.02em!important;text-transform:uppercase!important}
  html body #boardView#boardView #loadRows#loadRows>tr:not(.group-row):not(.load-alert-detail-row):not(.load-detail-row)>.dispatch-status-col.dispatch-status-col{width:58px!important;min-width:58px!important;max-width:58px!important;margin:0!important;padding:0!important;justify-content:flex-start!important;overflow:hidden!important}
  html body #boardView#boardView #loadRows#loadRows .dispatch-status-col.dispatch-status-col>.status-pill-select.status-pill-select{display:block!important;width:58px!important;min-width:58px!important;max-width:58px!important;height:28px!important;margin:0!important;padding:0!important;appearance:none!important;-webkit-appearance:none!important;background-image:none!important;font-size:9px!important;text-align:center!important;text-align-last:center!important;text-indent:0!important;box-sizing:border-box!important}
  html body #boardView #loadRows .status-pill-select.pill-open{color:#b42318!important;background:#fff1f0!important}
  html body #boardView #loadRows .status-pill-select.pill-covered{color:#b45309!important;background:#fff7ed!important}
  html body #boardView #loadRows .status-pill-select.pill-transit{color:#8a6500!important;background:#fffbea!important}
  html body #boardView #loadRows .status-pill-select.pill-delivered{color:#147a43!important;background:#effbf4!important}
  html body #boardView #loadRows .status-pill-select.pill-expired{color:#fff!important;background:#303844!important;border-color:#303844!important}
  html body #boardView #loadRows .status-pill-select.pill-hold{color:#475569!important;background:#f1f5f9!important}
  html body #boardView #loadRows .status-pill-select.pill-pending{color:#155da8!important;background:#eff6ff!important}
  html body #boardView#boardView #loadRows#loadRows>tr:not(.group-row):not(.load-alert-detail-row):not(.load-detail-row)>.dispatch-alert-col{grid-column:4!important;grid-row:1!important;width:26px!important;min-width:26px!important}
  html body #boardView#boardView #loadRows#loadRows>tr:not(.group-row):not(.load-alert-detail-row):not(.load-detail-row)>.dispatch-actions-col{display:flex!important;grid-column:5!important;grid-row:1!important;align-self:stretch!important;align-items:center!important;justify-content:center!important;width:30px!important;min-width:30px!important;height:100%!important;margin:0!important;padding:0!important}
  html body #boardView #loadRows .row-actions{display:flex!important;align-items:center!important;justify-content:center!important;width:30px!important;min-width:30px!important;height:100%!important;min-height:100%!important;margin:0!important;padding:0!important}
  html body #boardView #loadRows .row-action-dot-button{width:30px!important;min-width:30px!important;height:36px!important;min-height:36px!important;margin:auto 0!important}
  html body #boardView #loadRows .row-action-dot-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:10px!important;color:var(--m-muted)!important}
  html body #boardView #loadRows .row-action-dot-button:after{position:static!important;display:block!important;margin:0!important;line-height:1!important;transform:none!important}
  html body #boardView#boardView #loadRows#loadRows>tr:not(.group-row):not(.load-alert-detail-row):not(.load-detail-row)>.dispatch-customer-cell{grid-column:3!important;grid-row:1!important;min-width:0!important;text-align:left!important}
  html body #boardView #loadRows .mobile-customer-route{display:block!important;min-width:0!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;-webkit-line-clamp:unset!important}
  html body #boardView #loadRows .mobile-customer-route strong{display:block!important;overflow:hidden!important;color:var(--m-ink)!important;font-size:12px!important;font-weight:800!important;line-height:1.25!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  html body #boardView #loadRows .mobile-customer-route>:not(strong){display:none!important}
  html body #boardView #loadRows .mobile-customer-route .mobile-route-separator{display:none!important}
  html body #boardView #loadRows .mobile-route-arrow{padding-inline:3px!important;color:#1767a7!important}
  html body #boardView #loadRows>tr.group-row{margin-top:4px!important;border-radius:10px!important;background:var(--m-navy)!important}
  html body #boardView #loadRows>tr.group-row>td{padding:9px 12px!important;font-size:12px!important}

  /* Calm bottom navigation */
  .mobile-bottom-nav:not([hidden]){min-height:calc(62px + env(safe-area-inset-bottom,0px))!important;padding:5px 7px calc(5px + env(safe-area-inset-bottom,0px))!important;border-top-color:rgb(255 255 255/.1)!important;background:var(--m-navy)!important;box-shadow:0 -4px 16px rgb(15 31 47/.14)!important}
  .mobile-bottom-tab{position:relative!important;min-height:50px!important;gap:3px!important;border-radius:10px!important;color:#aebdcb!important;font-size:10px!important}
  .mobile-bottom-tab.is-active,.mobile-bottom-tab[aria-current="page"]{background:#20364a!important;color:#fff!important}
  .mobile-bottom-tab.is-active:before,.mobile-bottom-tab[aria-current="page"]:before{content:""!important;position:absolute!important;top:3px!important;width:22px!important;height:2px!important;border-radius:999px!important;background:#59a9e6!important}
  html body .dispatch-jump-top-button{width:46px!important;height:46px!important;right:14px!important;bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;border:2px solid #fff!important;box-shadow:0 6px 18px rgb(24 40 58/.2)!important}
}

/* Keep route loading and error states visually self-contained on mobile. */
@media (max-width:720px){
  html[data-route-processing="loading"] body #boardView#boardView,
  html[data-route-processing="error"] body #boardView#boardView{display:none!important}
}