/* ============================================================
   MOBILE OVERLAYS — platform-wide modal behaviour
   ============================================================
   Linked from customer_base.html and from the staff/driver FAB
   partial, so customer, staff and driver pages all behave the
   same way on a phone.

   Fixes three things that were broken everywhere:

     1. The fixed bottom nav (z-index 900-950) painted OVER modals,
        so dialogs opened underneath it.
     2. Dragging a sheet's grab handle triggered the browser's
        pull-to-refresh and reloaded the page instead of closing it.
     3. Scrolling to the end of a modal body chained the scroll to
        the page behind it.

   Everything here is mobile-only. Desktop is untouched.
   ============================================================ */

@media (max-width: 768px) {

    /* ── 1. Overlays sit above the bottom nav ────────────────
       Bottom bars are 900-950. Anything modal must clear that. */
    .modal,
    .modal-overlay,
    .product-preview-modal,
    .cart-overlay,
    .cart-drawer,
    .detail-modal,
    .order-modal,
    .recent-sales-modal,
    .receipt-modal,
    .staff-more-sheet,
    [role="dialog"] {
        z-index: 1300 !important;
    }

    /* Anything the modal itself stacks on top (nested confirms,
       receipts) still needs headroom above that. */
    .modal-backdrop { z-index: 1290 !important; }

    /* ── 2. Hide the bottom bar while a dialog is open ───────
       Even above it, a nav bar under an open sheet is noise and
       eats the safe-area the sheet wants. :has() covers every
       page without needing each one to set a body class; the
       body.modal-open rule is the fallback for older engines. */
    body:has(.modal.active) .staff-mobile-nav,
    body:has(.modal.show) .staff-mobile-nav,
    body:has(.modal[style*="flex"]) .staff-mobile-nav,
    body:has(.product-preview-modal.active) .bottom-nav,
    body:has(.cart-overlay.active) .bottom-nav,
    body:has(.modal.active) .bottom-nav,
    body:has(.modal.show) .bottom-nav,
    body:has(.driver-bottom-nav ~ .modal.active) .driver-bottom-nav,
    body.modal-open .staff-mobile-nav,
    body.modal-open .bottom-nav,
    body.modal-open .driver-bottom-nav {
        display: none !important;
    }

    /* The FAB stack would float over an open sheet too */
    body:has(.modal.active) #fabStack,
    body:has(.modal.show) #fabStack,
    body:has(.product-preview-modal.active) #fabStack,
    body:has(.cart-overlay.active) #fabStack,
    body.modal-open #fabStack {
        display: none !important;
    }

    /* ── 3. Kill pull-to-refresh inside overlays ─────────────
       Dragging a sheet handle downwards was reaching the browser's
       native pull-to-refresh and reloading the page. `contain`
       stops the gesture propagating past the overlay; the sheet
       still scrolls internally. */
    .modal,
    .modal-overlay,
    .product-preview-modal,
    .cart-overlay,
    .cart-drawer,
    .staff-more-sheet,
    [role="dialog"] {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .modal-content,
    .modal-body,
    .product-preview-content,
    .product-preview-body,
    .cart-content,
    .staff-more-panel,
    .d-thread {
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Grab handles and headers are drag targets, not scroll
       surfaces — let the browser treat a vertical drag on them as
       a gesture for the sheet rather than a page scroll. */
    .modal-content::before,
    .product-preview-header,
    .modal-header,
    .staff-more-panel::before,
    .sheet-handle,
    .drag-handle {
        touch-action: none;
    }

    /* While a dialog is open the page behind must not scroll or
       bounce. Pages that set body.modal-open get this for free. */
    body.modal-open {
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }
    body.modal-open .modal,
    body.modal-open .modal-content,
    body.modal-open .modal-body { touch-action: auto; }
}