/*
 * Ellezza Retail — phone and tablet fixes (screens narrower than 992px).
 *
 * Why this file exists: when anything on a page is wider than the phone (a
 * table, a row of buttons), the browser widens the whole page to fit it. The
 * theme's menu script then reads the wider window as a desktop screen and
 * turns the side menu off, while the phone styles still hide it. Result: the
 * hamburger and the user menu stop opening. Keeping the page itself inside
 * the screen fixes that on every page at once; wide tables scroll inside
 * their own box instead (see assets/admin/mobile.js).
 *
 * Everything sits inside one media query, so desktop (992px and up) is not
 * affected at all. Not loaded on the POS screen.
 */
@media (max-width: 991.98px) {

    /* 1. The page itself never scrolls sideways. Tested in Chrome at 390px:
          <html> alone does not stop the page widening; <html> + <body> does.
          On <body> we use `clip`, which (unlike `hidden`) does not make the
          body its own scroll box, so window scrolling, scroll events and
          sticky elements keep working. Older browsers without `clip` fall
          back to `hidden`. */
    html {
        overflow-x: hidden;
    }
    body {
        overflow-x: hidden;
        overflow-x: clip;
    }

    /* 2. Wide tables scroll inside their own box (wrapper added by mobile.js). */
    .mobile-table-scroll {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-table-scroll > table {
        margin-bottom: 0;
    }

    /* 3. Card headers and toolbars: let buttons and filters wrap onto several
          lines instead of pushing the page wider. */
    .card .card-header {
        flex-wrap: wrap;
        row-gap: .5rem;
        min-width: 0;
    }
    /* Some pages (e.g. Sales Report tabs) put their filters inside a
       .card-title, which never wraps by default. */
    .card .card-header .card-title {
        flex-wrap: wrap;
        gap: .5rem;
        min-width: 0;
        max-width: 100%;
    }
    .card-toolbar {
        flex-wrap: wrap;
        gap: .5rem;
        max-width: 100%;
        min-width: 0;
    }
    .card-toolbar > *,
    .card-toolbar .d-flex {
        flex-wrap: wrap;
        max-width: 100%;
        min-width: 0;
    }
    /* Drop the fixed side margins between toolbar items once they wrap. */
    .card-toolbar .me-3,
    .card-toolbar .me-4,
    .card-toolbar .me-5 {
        margin-right: 0 !important;
    }

    /* 4. Filter rows built with .d-flex inside a card body. */
    .card-body > .d-flex,
    .card-body > form > .d-flex,
    .card-header .d-flex {
        flex-wrap: wrap;
        gap: .5rem;
        min-width: 0;
    }

    /* 5. Inputs, selects and date pickers with a fixed width never exceed the
          screen. */
    .card input.form-control,
    .card select.form-select,
    .card .select2-container,
    .card .w-200px,
    .card .w-250px,
    .card .w-300px,
    .card .w-350px,
    .card .w-400px,
    .card .w-450px,
    .card .w-500px {
        max-width: 100%;
    }
    .card .d-flex > div:has(> select),
    .card .d-flex > div:has(> .select2-container) {
        max-width: 100%;
        min-width: 0;
    }

    /* 5b. Tab strips (e.g. the Sales Report's report tabs) scroll sideways
           inside the card instead of widening the page. */
    .card .nav-line-tabs,
    .card .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .card .nav-line-tabs .nav-item,
    .card .nav-tabs .nav-item {
        flex-shrink: 0;
    }
    .card .d-flex > .flex-grow-1 {
        min-width: 0;
    }

    /* 6. Long unbroken text (invoice numbers, emails) wraps instead of
          widening the card. */
    .card-title,
    .page-title h1 {
        overflow-wrap: anywhere;
    }

    /* 7. Modals use the full width on phones. */
    .modal-dialog:not(.modal-fullscreen) {
        max-width: calc(100vw - 1rem);
        margin-left: auto;
        margin-right: auto;
    }
}