/* beta.7-polish2: phone layout cleanup. The hamburger/sidebar is the only global mobile navigation. */
@media(max-width:680px){
  :root{--sf-mobile-nav-h:0px}
  .sf-mobile-bottom-nav{display:none!important}
  .app:not(.hidden){padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
  .sf-update-banner{bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
  #sfMobileMore{display:none!important}

  main>header{position:sticky!important;top:0!important;z-index:70!important;min-height:auto!important;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px!important;gap:8px!important}
  main>header h2{font-size:20px!important;line-height:1.15!important}
  main>header p{font-size:11px!important;margin-top:2px!important}
  main>header .header-actions{width:auto!important;margin-left:auto!important;gap:7px!important;flex-wrap:nowrap!important}
  main>header .header-actions button{min-height:38px!important;padding:8px 11px!important}
  main>header .sf-connection-pill{min-height:36px!important}

  .mobile-menu-open .sidebar{width:min(330px,88vw)!important;padding:14px 12px calc(18px + env(safe-area-inset-bottom,0px))!important}
  .mobile-menu-open .sidebar .brand{margin-bottom:10px!important}
  .mobile-menu-open .sidebar nav{gap:4px!important}
  .mobile-menu-open .sidebar .nav{min-height:46px!important;padding:10px 12px!important;border-radius:10px!important;flex-direction:row!important;justify-content:flex-start!important;gap:10px!important}
  .mobile-menu-open .sidebar .nav-icon{margin:0!important}
  .mobile-menu-open .sidebar .nav-text{font-size:13px!important}

  .panel,.panel-grid>.panel{margin-left:8px!important;margin-right:8px!important;padding:14px!important;border-radius:16px!important}
  .panel-grid,.cards{padding-left:8px!important;padding-right:8px!important}
  .panel-head{align-items:flex-start!important;gap:10px!important}
  .panel-head>button,.panel-head>.button{flex:none}

  /* Dashboard: denser cards and less dead space. */
  #dashboardView .sf-dashboard-intro{padding:16px 12px 10px!important;gap:10px!important}
  #dashboardView .sf-dashboard-intro h3{font-size:25px!important;line-height:1.12!important}
  #dashboardView .sf-dashboard-intro-actions{gap:8px!important}
  #dashboardView .dashboard-status-cards{padding-left:8px!important;padding-right:8px!important;gap:8px!important}
  #dashboardView .dashboard-status-cards .dashboard-card{min-height:94px!important;padding:12px!important}
  #dashboardView .dashboard-status-cards strong{font-size:25px!important}
  #dashboardView .sf-dashboard-grid,#dashboardView .sf-dashboard-primary-grid{padding-left:8px!important;padding-right:8px!important;gap:10px!important}
  #dashboardView .sf-dashboard-panel{padding:14px!important;border-radius:16px!important}
  #dashboardView .sf-dashboard-metric-grid,#dashboardView .sf-dashboard-safety-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #dashboardView .sf-dashboard-metric{padding:11px!important;border-radius:12px!important}
  #dashboardView .sf-dashboard-metric strong{font-size:18px!important}
  #dashboardView .sf-dashboard-mini-chart{height:102px!important;margin-top:8px!important}
  #dashboardView .sf-dashboard-mini-chart svg{height:92px!important}
  #dashboardView .sf-dashboard-summary-list>div{padding:10px 12px!important}

  /* Live Fleet: controls wrap into predictable rows instead of colliding. */
  #liveView .map-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding:0 8px!important;margin-bottom:10px!important}
  #liveView .map-toolbar>div,#liveView .map-tools{width:100%!important;min-width:0!important}
  #liveView .map-tools{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #liveView .map-tools button,#liveView .map-tools .sf-segment{width:100%!important;min-width:0!important}
  #liveView .map-tools .sf-segment{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #liveView .map-tools .sf-segment button{min-width:0!important}
  #liveView .fleet-workspace{margin:0 8px!important;border-radius:16px!important}
  #liveView .fleet-map-panel{height:calc(100dvh - 250px)!important;min-height:430px!important}

  /* Vehicle list filters and cards fit the viewport without clipped controls. */
  #vehiclesView .fleet-toolbar,#vehiclesView .sf-table-tools{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;align-items:stretch!important}
  #vehiclesView .fleet-toolbar>*,#vehiclesView .sf-table-tools>*{width:100%!important;max-width:none!important;min-width:0!important}
  #vehiclesView .fleet-toolbar label,#vehiclesView .sf-table-tools label{width:100%!important;min-width:0!important}
  #vehiclesView input,#vehiclesView select{width:100%!important;max-width:none!important}
  #vehiclesView .sf-mobile-card-table tr{padding:8px 12px!important;border-radius:14px!important}
  #vehiclesView .sf-mobile-card-table td{grid-template-columns:104px minmax(0,1fr)!important;gap:8px!important}
  #vehiclesView .sf-mobile-card-table td button{min-height:40px!important}

  /* Single vehicle: use width for content, not horizontal scrolling. */
  #vehicleDetailView>.sf-vehicle-detail-shell{padding:8px!important}
  .sf-single-vehicle-sidebar{padding:12px!important}
  .sf-single-vehicle-sidebar .sf-vehicle-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important}
  .sf-single-vehicle-sidebar .sf-vehicle-meta .telemetry-card{min-width:0!important}
  .sf-single-vehicle-toolbar{position:static!important;padding:8px!important;gap:8px!important}
  .sf-single-vehicle-toolbar .vehicle-tabs,.sf-mobile-vehicle-sections{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;overflow:visible!important;gap:6px!important}
  .sf-single-vehicle-toolbar .vehicle-tab,.sf-mobile-vehicle-sections button{width:100%!important;min-width:0!important;white-space:normal!important;text-align:center!important}
  .sf-single-vehicle-main .sf-vehicle-map-focus{height:46dvh!important;min-height:310px!important;margin:8px!important}
  .sf-single-vehicle-main .sf-history-map-focus{height:44dvh!important;min-height:300px!important;margin:8px!important}
  .sf-single-vehicle-main .sf-vehicle-status-section,.sf-single-vehicle-main .sf-vehicle-control{margin:0 8px 8px!important}
  .sf-single-vehicle-main .sf-vehicle-status-section #vehicleTelemetry{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Alerts: compact controls and remove large empty filter regions. */
  #alertsView .sf-alert-summary,#alertsView .sf-dashboard-safety-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important}
  #alertsView .alert-filters,#alertsView .sf-alert-more-grid,#alertsView .sf-rule .alert-filters{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  #alertsView .alert-filters>*,#alertsView .sf-alert-more-grid>*{width:100%!important;max-width:none!important;min-width:0!important}
  #alertsView .sf-alert-more{margin-top:4px!important}
  #alertsView .sf-alert-activity-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}

  /* Common phone controls. */
  .sf-toolbar,.history-toolbar,.trip-selector,.report-controls{gap:8px!important}
  .sf-toolbar>*,.history-toolbar>*,.trip-selector>*,.report-controls>*{min-width:0!important;max-width:none!important}
  dialog:not(.sf-mobile-more),.sf-drawer{max-width:100vw!important}
}

@media(max-width:390px){
  main>header .header-actions{width:100%!important;justify-content:flex-end!important}
  #dashboardView .sf-dashboard-metric-grid,#dashboardView .sf-dashboard-safety-grid{grid-template-columns:1fr!important}
  .sf-single-vehicle-sidebar .sf-vehicle-meta{grid-template-columns:1fr!important}
  #liveView .map-tools{grid-template-columns:1fr!important}
}
/* beta.7-polish3: sidebar footer/install action gets its own flow space. */
.sidebar-footer{line-height:1.45!important;padding-bottom:12px!important}
.sidebar-footer .sf-sidebar-footer-copy{display:block;min-width:0}
.sidebar-footer .sf-install-app.sf-install-ready{position:static!important;width:100%!important;max-width:100%!important;margin:10px 0 0!important;justify-content:center!important;box-sizing:border-box!important}