/* Version 3.98315: Main Dashboard mobile — compact 2-col home without the global refresh row. */

@media (max-width: 720px) {
  /* Dashboard cards refresh as part of their own render. The shared board
     topbar otherwise leaves a full-width row containing only Refresh. */
  html body[data-current-view="dashboard"] .main > .topbar,
  html body:has(#dashboardView.active-view) .main > .topbar {
    display: none !important;
  }

  html body[data-current-view="dashboard"] .main,
  html body:has(#dashboardView.active-view) .main {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body #dashboardView.dashboard-view {
    max-width: none !important;
    width: 100% !important;
    padding: 0 0 8px !important;
  }

  /* Topbar carries the greeting on phone — hide duplicate view head. */
  html body #dashboardView .dashboard-view-head,
  html body #dashboardView > .view-head {
    display: none !important;
  }

  html body[data-current-view="dashboard"] #mainTitle,
  html body:has(#dashboardView.active-view) #mainTitle {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  html body[data-current-view="dashboard"] .top-actions #newLoad,
  html body[data-current-view="dashboard"] .top-actions #dispatchActionsMenu,
  html body:has(#dashboardView.active-view) .top-actions #newLoad,
  html body:has(#dashboardView.active-view) .top-actions #dispatchActionsMenu {
    display: none !important;
  }

  html body #dashboardView #dashboardRouteGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  html body #dashboardView .dashboard-section-head {
    margin-bottom: 2px !important;
  }

  html body #dashboardView .dashboard-section-head h3 {
    font-size: 16px !important;
  }

  html body #dashboardView .dashboard-section-head span {
    display: none !important;
  }

  html body #dashboardView .dashboard-attention {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  /* Keep 2 columns even on narrow phones — single column was too sparse. */
  html body #dashboardView .dashboard-insight-grid,
  html body #dashboardRouteGrid .dashboard-insight-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body #dashboardView .dashboard-insight-card,
  html body #dashboardRouteGrid .dashboard-insight-card {
    min-height: 84px !important;
    padding: 10px 8px !important;
    border-radius: 10px !important;
    gap: 2px !important;
    touch-action: manipulation;
  }

  html body #dashboardView .dashboard-insight-card span,
  html body #dashboardRouteGrid .dashboard-insight-card span {
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  html body #dashboardView .dashboard-insight-card strong,
  html body #dashboardRouteGrid .dashboard-insight-card strong {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  html body #dashboardView .dashboard-insight-card em,
  html body #dashboardRouteGrid .dashboard-insight-card em {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  html body #dashboardView .dashboard-insight-card.is-clear {
    opacity: 0.72 !important;
  }

  html body #dashboardView .dashboard-quick-actions,
  html body #dashboardRouteGrid .dashboard-quick-actions {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html body #dashboardView .dashboard-quick-action,
  html body #dashboardRouteGrid .dashboard-quick-action {
    min-height: 58px !important;
    padding: 11px 38px 11px 12px !important;
    border-radius: 10px !important;
    touch-action: manipulation;
  }

  /* Force bottom nav visible whenever markup is present on phone. */
  html body .mobile-bottom-nav:not([hidden]) {
    display: flex !important;
  }
}