/* =========================================================================
   Dispatch board — tablet + mobile makeover.
   The desktop layout (shared map on the left, rides rail on the right) is
   defined inline in pages/dispatch.html. On stacked screens we hide the big
   shared map and instead give each ride card its own map button (next to the
   ⋯) that reveals a mini-map under that card. We also drop the inner scroll
   so the page scrolls naturally, compact the cards, and tighten the header.

   Uses !important because the global tablet-optimized.css / mobile-optimized.css
   set several layout properties with !important; matching them keeps our
   #dispatch rules winning the cascade.
   ========================================================================= */

/* ---- Tablet & down: single column, no global map ----
   On stacked layouts we drop the big shared map entirely and give each ride
   its own map button (next to the ⋯) that reveals a mini-map under the card. */
@media (max-width: 1024px) {
    #dispatch .dispatch-grid {
        display: block !important;
    }
    /* the shared map panel is replaced by per-card maps */
    #dispatch .dispatch-map-wrap { display: none !important; }
    /* each ride card gets its own map toggle */
    #dispatch .d-mapbtn { display: inline-flex !important; }
    /* no scroll-within-scroll: let the whole page scroll */
    #dispatch .dispatch-list { max-height: none !important; overflow: visible !important; }
}

/* ---- Phone ---- */
@media (max-width: 767px) {
    /* compact cards: keep the dots+bars progress, drop the labels
       (the status chip already names the current state) */
    #dispatch .d-step { margin: 0.55rem 2px !important; }
    #dispatch .d-step .s label { display: none !important; }
    /* labels hidden → drop the bar's reserved label gap so it centres on the dots */
    #dispatch .d-step .bar { margin: 0 2px !important; }
    #dispatch .d-card { padding: 0.8rem 0.85rem 0.75rem 1rem !important; }

    /* hide the big "Despacho" title/subtitle — the app header + bottom nav
       already say where you are; keep only a slim live + refresh bar in its
       place (live pill on the left, Atualizar on the right) */
    #dispatch .dispatch-title-block { display: none !important; }
    #dispatch .dispatch-head { padding: 0 !important; margin-bottom: 0.55rem !important; background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; align-items: center !important; }
    /* tighten the vertical rhythm between the stacked section cards on mobile */
    #dispatch .dispatch-stats { margin-bottom: 0.55rem !important; }
    #dispatch .dispatch-rail { gap: 0.55rem !important; }
    #dispatch .dispatch-list { gap: 0.55rem !important; }
    #dispatch .dispatch-head-actions { width: 100% !important; justify-content: space-between !important; }
    #dispatch .dispatch-live { flex: 0 1 auto !important; }

    /* stat strip: number stacked over label so labels don't wrap awkwardly */
    #dispatch .dispatch-stat { flex-direction: column !important; align-items: flex-start !important; gap: 0.15rem !important; min-width: 0 !important; padding: 0.7rem 0.75rem !important; }
    #dispatch .dispatch-stat b { font-size: 1.35rem !important; }

    /* filter tabs: a touch tighter */
    #dispatch .dispatch-tab { font-size: 0.74rem !important; padding: 8px 8px !important; }
}

/* ---- Small phone ---- */
@media (max-width: 480px) {
    #dispatch .dispatch-stat span { font-size: 0.62rem !important; }
    #dispatch .d-route { font-size: 0.92rem !important; }
    #dispatch .d-act { padding: 9px 12px !important; }
    /* keep the footer row on one line: driver shrinks, action + menu hold */
    #dispatch .d-r4 { gap: 6px !important; }
}