/* ============================================
   GrazingPlan.component.mobile.css
   Mobile overrides only (max-width: 767.98px)
   Companion to GrazingPlan.component.css
   ============================================ */

@media (max-width: 767.98px) {

    /* ----------------------------------------
       Fix #1a: Offcanvas full-width on mobile
       Desktop uses w-25 (25% width) which is
       ~98px on a 390px screen — unusable.
       Use 100vw so the panel locks to the
       viewport, not the (wider) document.
       ---------------------------------------- */
    #add_grazing_move_offcanvas.w-25 {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* ----------------------------------------
       Fix #1b: Move grids — horizontal scroll
       The Actual/Planned move tables need ~580px
       to render without awkward text wrapping.
       Wrap each grid section in a scroll context
       and set a min-width on the table so columns
       stay readable. Users can swipe the grid
       while the rest of the page stays viewport-width.
       ---------------------------------------- */
    #grazing_moves_actual,
    #grazing_moves_planned {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #grazingmove-grid,
    #grazingmove-planned-grid {
        min-width: 580px;
    }
}