/* ============================================================================
   Bulk Basket — Supplier admin: global mobile responsiveness safety-net.
   Loaded LAST in suppliers/layouts/header.blade.php (after bb-redesign.css).

   Purpose: make every admin page usable on phones/tablets while the bbx-*
   redesign rolls out page-by-page. Two audiences:
     1. Legacy (not-yet-migrated) Bootstrap pages — the bulk of the fixes here.
     2. bbx-* pages — a few extra small-screen tweaks on top of bb-redesign.css.

   Rules:
   - Everything lives inside a max-width media query, so desktop layout is
     BYTE-IDENTICAL to today. Nothing here fires above 991px.
   - Content-area only: selectors are scoped to #page_layout / .content-inner /
     .bbx so the sidebar off-canvas and the permission-nav JS are never touched.
     The topbar dropdown rules are the one exception (scoped to .iq-navbar).
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Tablet & phone (<= 991px): stop header/toolbar rows from colliding.
   65 legacy pages use `d-flex justify-content-between` for a "title | actions"
   header with no flex-wrap, so the buttons overflow or crush on narrow screens.
   Let those rows wrap; opt out with .flex-nowrap where a row must stay inline.
--------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    #page_layout .d-flex.justify-content-between:not(.flex-nowrap),
    .content-inner .card-header.d-flex:not(.flex-nowrap) {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Action clusters (button rows) wrap instead of shoving off-screen. */
    #page_layout .card-header .btn,
    #page_layout .card-header .btn-group,
    #page_layout .page-header .btn {
        margin-bottom: 2px;
    }

    /* Media hygiene: never let an image or <pre> force the page sideways. */
    #page_layout img { max-width: 100%; height: auto; }
    #page_layout pre { overflow-x: auto; }
}

/* ---------------------------------------------------------------------------
   Topbar dropdowns on phones. The Control Center menu is a very long list;
   without a cap it runs off the bottom/side of the screen.
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .iq-navbar .navbar-list .dropdown-menu {
        max-height: 72vh;
        overflow-y: auto;
        max-width: calc(100vw - 24px);
    }
}

/* ---------------------------------------------------------------------------
   Phone (<= 640px): bbx-* component tweaks on top of bb-redesign.css.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Full-width off-canvas filter drawer (was min(400px, 92vw)). */
    .bbx-drawer {
        width: 100vw;
        max-width: 100vw;
        border-left: 0;
    }

    /* Inline search grows to fill the toolbar row once it wraps. */
    .bbx-toolbar .bbx-search,
    .bbx-toolbar .grow {
        flex: 1 1 100%;
    }

    /* Modal hugs the viewport — but `100%`, not `calc(100vw - 20px)`. The backdrop is a grid box
       with 20px padding, so the track is already the viewport minus the gutters; `100vw` also
       counts the classic scrollbar. The old value put the modal ~20px wider than its own track on
       both sides, which cost the design its gutter and pushed the right edge off-screen. This rule
       wins over the base `.bbx-modal` width for every viewport <= 640 — equal specificity, later
       stylesheet — so the base rule alone cannot fix the narrow case. */
    .bbx-modal { width: 100%; }

    /* Page-head action buttons wrap under the title (page-head already stacks
       at 640 in bb-redesign.css; keep the actions tidy). */
    .bbx-page-head .bbx-head-actions {
        flex-wrap: wrap;
        gap: .4rem;
    }

    /* Two-column bbx form grids collapse to a single column. */
    .bbx-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Small phone (<= 575px): neutralize hard-coded pixel widths on form controls.
   39 legacy pages set inline `style="width:NNNpx"` on inputs/selects, which
   overflow a ~360px viewport. Cap them to the container. Tables are excluded
   on purpose — they must keep their natural width and scroll (see
   table-autowrap.js), so this only touches form fields.
--------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    #page_layout input[style*="width"],
    #page_layout select[style*="width"],
    #page_layout textarea[style*="width"],
    #page_layout .form-control[style*="width"],
    #page_layout .form-select[style*="width"],
    #page_layout .select2-container[style*="width"] {
        max-width: 100% !important;
    }
}