/* Tracking mobile visible-detail parity with Dispatch. Loaded last on purpose. */
@media (max-width:720px){
  html body[data-current-view="tracking"] .topbar.topbar,
  html body:has(#trackingView.active-view) .topbar.topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:40px!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:66px!important;height:auto!important}
  html body[data-current-view="tracking"] .topbar.topbar>div:first-child,
  html body:has(#trackingView.active-view) .topbar.topbar>div:first-child{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;gap:2px!important;height:auto!important}
  html body[data-current-view="tracking"] .topbar.topbar #mainTitle#mainTitle,
  html body:has(#trackingView.active-view) .topbar.topbar #mainTitle#mainTitle{height:auto!important;line-height:1.1!important}
  html body[data-current-view="tracking"] .topbar.topbar .top-actions,
  html body:has(#trackingView.active-view) .topbar.topbar .top-actions{gap:6px!important}
  html body[data-current-view="tracking"] .topbar.topbar .top-actions:before,
  html body:has(#trackingView.active-view) .topbar.topbar .top-actions:before{content:""!important;display:block!important;flex:0 0 1px!important;width:1px!important;height:40px!important;margin:0!important;border:0!important;background:#d7e1eb!important}
  html body[data-current-view="tracking"] .topbar.topbar #newLoad#newLoad,
  html body:has(#trackingView.active-view) .topbar.topbar #newLoad#newLoad{display:grid!important;place-items:center!important;font-size:0!important;line-height:0!important}
  html body[data-current-view="tracking"] .topbar.topbar #refreshBoard svg,
  html body:has(#trackingView.active-view) .topbar.topbar #refreshBoard svg{display:block!important;width:22px!important;min-width:22px!important;max-width:22px!important;height:22px!important;min-height:22px!important;max-height:22px!important;margin:0!important}
  html body[data-current-view="tracking"] #trackingView#trackingView>.shipment-tools.shipment-tools>#trackingSearch,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.shipment-tools.shipment-tools>#trackingSearch{text-align:left!important}

  html body[data-current-view="tracking"] #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric:first-of-type,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric:first-of-type{border-left-color:#2370b5!important;background:#fff!important}
  html body[data-current-view="tracking"] #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-open,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-open{border-left-color:#de3e36!important;background:#fff9f8!important}
  html body[data-current-view="tracking"] #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-covered,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-covered{border-left-color:#ee8917!important;background:#fffaf4!important}
  html body[data-current-view="tracking"] #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-transit,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-transit{border-left-color:#f2c01f!important;background:#fffdf5!important}
  html body[data-current-view="tracking"] #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-delivered,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-delivered{border-left-color:#1d9a55!important;background:#f7fcf9!important}
  html body[data-current-view="tracking"] #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-expired,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-expired{border-left-color:#334155!important;background:#f8fafc!important}
  html body[data-current-view="tracking"] #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-hold,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-hold{border-left-color:#64748b!important;background:#f8fafc!important}
  html body[data-current-view="tracking"] #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-pending,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.tracking-metric-grid.tracking-metric-grid>.metric.metric.status-pending{border-left-color:#3478bd!important;background:#f7faff!important}

  /* Keep the selected Tracking status visually distinct after the mobile
     parity rules assign each chip its status color. */
  html body[data-current-view="tracking"] #trackingView#trackingView>.tracking-metric-grid.status-filter-active>.metric.dimmed,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.tracking-metric-grid.status-filter-active>.metric.dimmed{opacity:.38!important;filter:saturate(.45)!important;box-shadow:none!important}
  html body[data-current-view="tracking"] #trackingView#trackingView>.tracking-metric-grid.status-filter-active>.metric.active,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.tracking-metric-grid.status-filter-active>.metric.active{opacity:1!important;filter:none!important;outline:2px solid rgba(35,87,137,.34)!important}

  /* Final shared density/scrolling lock, loaded after the legacy Tracking
     layout and the shared operational-board stylesheet. */
  html body[data-current-view="tracking"] #trackingView#trackingView.active-view,
  html body:has(#trackingView.active-view) #trackingView#trackingView.active-view{flex:0 0 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
  html body[data-current-view="tracking"] #trackingView#trackingView>.table-section,
  html body:has(#trackingView.active-view) #trackingView#trackingView>.table-section,
  html body[data-current-view="tracking"] #trackingView#trackingView .table-scroll,
  html body:has(#trackingView.active-view) #trackingView#trackingView .table-scroll{flex:0 0 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
  html body[data-current-view="tracking"] #trackingView#trackingView #trackingRows#trackingRows>tr:not(.load-alert-detail-row):not(.load-detail-row),
  html body:has(#trackingView.active-view) #trackingView#trackingView #trackingRows#trackingRows>tr:not(.load-alert-detail-row):not(.load-detail-row),
  html body:has(#boardView.active-view) #boardView#boardView #loadRows#loadRows>tr:not(.group-row):not(.load-alert-detail-row):not(.load-detail-row){height:50px!important;min-height:50px!important;max-height:50px!important;padding-top:5px!important;padding-bottom:5px!important}
}