/* ==========================================================================
 *  panel-mobile-v9.css   ·   Multimaart   ·   2026-07-15
 *  ----------------------------------------------------------------------
 *  FINAL cross-panel mobile-responsive layer. Loaded LAST (after v7 + v8)
 *  by every back-office panel (Admin, Vendor, District Partner, Vendor
 *  Admin) AND the storefront master (which hosts the Customer "My Account"
 *  panel).
 *
 *  Goals of this pass:
 *    1. Bring the ADMIN panel up to parity with Vendor/DP — admin now also
 *       loads v8, so this file mostly reinforces admin-only dashboard
 *       widgets and safety nets.
 *    2. Give the CUSTOMER "My Account" panel a proper phone layout: full
 *       width content, a well-dimmed drawer overlay, single-column cards,
 *       scrollable order/detail tables and no horizontal page bleed.
 *    3. Universal safety: nothing on any panel may push the page wider
 *       than the viewport on a phone.
 *
 *  Breakpoints:
 *      ≤991.98px → tablet / phone (pcoded sidebar collapses here)
 *      ≤767.98px → customer My Account drawer breakpoint
 *      ≤575px    → small phone
 * ========================================================================== */

/* ===========================================================================
 * A.  UNIVERSAL — never let anything overflow the viewport horizontally
 * =========================================================================== */
@media (max-width: 991.98px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    /* Bootstrap rows inside panels sometimes keep negative margins that add a
       few px of horizontal scroll. Neutralise on phones. */
    body .pcoded-main-container .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body .pcoded-main-container [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ===========================================================================
 * B.  ADMIN PANEL — dashboard widgets + generic stat cards
 *      Admin now loads v8 (tables/cards/forms/header handled there). Here we
 *      cover admin-specific dashboard structures and make every Bootstrap
 *      stat column collapse cleanly.
 * =========================================================================== */
@media (max-width: 991.98px) {
    /* Any Bootstrap 3/4-col stat ribbon → 2 across on tablet. */
    body .pcoded-main-container .row > .col-xl-3,
    body .pcoded-main-container .row > .col-lg-3,
    body .pcoded-main-container .row > .col-md-4,
    body .pcoded-main-container .row > .col-xl-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* Admin dashboard custom widget grids (if present). */
    .mm-admin-grid,
    .mm-stats-grid,
    .dashboard-widgets {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 12px !important;
    }
    /* Recharts / ApexCharts / Chart.js canvases must shrink with the card. */
    body .pcoded-main-container canvas,
    body .pcoded-main-container .chart-container {
        max-width: 100% !important;
    }
}

@media (max-width: 575px) {
    /* One card per row on small phones. */
    body .pcoded-main-container .row > .col-xl-3,
    body .pcoded-main-container .row > .col-lg-3,
    body .pcoded-main-container .row > .col-md-4,
    body .pcoded-main-container .row > .col-xl-4,
    body .pcoded-main-container .row > .col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .mm-admin-grid,
    .mm-stats-grid,
    .dashboard-widgets {
        grid-template-columns: 1fr !important;
    }
}

/* ===========================================================================
 * C.  CUSTOMER "MY ACCOUNT" PANEL  (storefront / Tailwind theme)
 *      Layout: .layout-wrapper > flex(gap) > #sidenavbar(.sidebar-nav) + content
 *      Drawer is toggled by adding `.active` to #sidenavbar and #overlay
 *      (public/js/myaccount.js). tailwind-custom.css turns .sidebar-nav into a
 *      position:fixed drawer ≤767px. Here we polish everything around it.
 * =========================================================================== */

/* The account layout row: at ≤767px the sidebar is a fixed drawer, so the
   content column must take the full width (it was sharing a flex gap with an
   off-canvas element). */
@media (max-width: 767.98px) {
    .layout-wrapper > .flex {
        gap: 0 !important;
    }
    /* @yield('content') is the sibling of #sidenavbar inside the flex row. */
    .layout-wrapper > .flex > #sidenavbar ~ * {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* Drawer polish: solid white surface, comfortable width, above overlay. */
    #sidenavbar.sidebar-nav {
        z-index: 60 !important;
        background: #ffffff !important;
        box-shadow: 4px 0 20px rgba(15, 23, 42, 0.18) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Dim overlay — the base markup only had a faint tint; make it a real
       scrim so the drawer reads as a modal layer. */
    #overlay {
        background: rgba(15, 23, 42, 0.5) !important;
        z-index: 55 !important;
    }

    /* "Profile Menu" toggle button — full width, brand-tinted, easy tap. */
    .collapse-icon {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }
}

/* Account content polish across phones + tablets. */
@media (max-width: 991.98px) {
    /* Kill any horizontal bleed from account tables (orders, order details,
       refund tables) — wrap them in a scroll area. */
    .layout-wrapper table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    /* Multi-column account card grids → single / two column. */
    .layout-wrapper .grid.grid-cols-2,
    .layout-wrapper .grid.grid-cols-3,
    .layout-wrapper .grid.grid-cols-4,
    .layout-wrapper .grid.md\:grid-cols-2,
    .layout-wrapper .grid.md\:grid-cols-3,
    .layout-wrapper .grid.lg\:grid-cols-3,
    .layout-wrapper .grid.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Account forms full width. */
    .layout-wrapper form,
    .layout-wrapper .profile-form-wrapper,
    .layout-wrapper .change-password-form {
        max-width: 100% !important;
    }

    /* Order rows / address cards: allow content to wrap instead of forcing a
       fixed-width flex that overflows. */
    .layout-wrapper .flex.justify-between {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

@media (max-width: 575px) {
    .layout-wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .layout-wrapper h1,
    .layout-wrapper h2 { font-size: 18px !important; }
}

/* ===========================================================================
 * D.  CROSS-PANEL — action button groups in table rows should not overflow
 *      Many list rows render 2-3 icon actions in a flex; make them wrap and
 *      keep tap targets sane on all panels.
 * =========================================================================== */
@media (max-width: 991.98px) {
    body .pcoded-main-container td .btn-group,
    body .pcoded-main-container td .action-buttons,
    body .pcoded-main-container td .d-flex {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    /* Select2 dropdowns must fit the viewport. */
    .select2-container {
        max-width: 100% !important;
    }
    .select2-dropdown {
        max-width: 100vw !important;
    }
}

/* ===========================================================================
 * E.  PROMINENT, ALWAYS-VISIBLE HORIZONTAL SCROLLBAR  (all panels · all widths)
 *      v21.23: `dt-responsive` was removed from every DataTable, so wide grids
 *      (Products, Users, All Orders, activity logs, settings tables…) now scroll
 *      sideways instead of HIDING columns behind a "+" expander. The problem on
 *      tablets/phones is that the native overlay scrollbar auto-hides, so users
 *      never realise the right-hand columns (image, Status, Registered, row
 *      actions) are reachable. Force a real, styled, persistent scrollbar.
 *
 *      Scroll containers covered:
 *        • .yajra-data-table-main          → Admin / Vendor DataTables
 *        • .pcoded-main-container .table-responsive → back-office bootstrap tables
 *          (District Partner, Vendor-Admin, settings pages)
 *        • .layout-wrapper .table-responsive / table → Customer "My Account"
 * =========================================================================== */
.yajra-data-table-main,
.pcoded-main-container .table-responsive,
.layout-wrapper .table-responsive,
.layout-wrapper table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Firefox: keep a normal-width, brand-tinted scrollbar visible. */
    scrollbar-width: auto !important;
    scrollbar-color: #3BAFE2 #e6ebf2 !important;
}

/* WebKit / Blink (Chrome, Edge, Android, Safari) — an explicit height + the
   `-webkit-appearance:none` reset turns the overlay bar into a persistent one
   on Android/desktop and makes it far more visible on iOS. */
.yajra-data-table-main::-webkit-scrollbar,
.pcoded-main-container .table-responsive::-webkit-scrollbar,
.layout-wrapper .table-responsive::-webkit-scrollbar,
.layout-wrapper table::-webkit-scrollbar {
    height: 12px !important;
    -webkit-appearance: none;
}
.yajra-data-table-main::-webkit-scrollbar-track,
.pcoded-main-container .table-responsive::-webkit-scrollbar-track,
.layout-wrapper .table-responsive::-webkit-scrollbar-track,
.layout-wrapper table::-webkit-scrollbar-track {
    background: #e6ebf2 !important;
    border-radius: 8px !important;
}
.yajra-data-table-main::-webkit-scrollbar-thumb,
.pcoded-main-container .table-responsive::-webkit-scrollbar-thumb,
.layout-wrapper .table-responsive::-webkit-scrollbar-thumb,
.layout-wrapper table::-webkit-scrollbar-thumb {
    background: #3BAFE2 !important;
    border-radius: 8px !important;
    border: 2px solid #e6ebf2 !important;
}
.yajra-data-table-main::-webkit-scrollbar-thumb:hover,
.pcoded-main-container .table-responsive::-webkit-scrollbar-thumb:hover,
.layout-wrapper .table-responsive::-webkit-scrollbar-thumb:hover,
.layout-wrapper table::-webkit-scrollbar-thumb:hover {
    background: #2196C8 !important;
}

/* On tablet/phone give the scrollbar a touch more height + breathing room below
   the grid so it's obvious and easy to drag. */
@media (max-width: 991.98px) {
    .yajra-data-table-main,
    .pcoded-main-container .table-responsive {
        padding-bottom: 4px !important;
        /* keep the wide table's min-width so it truly overflows and the bar shows */
    }
    .yajra-data-table-main::-webkit-scrollbar,
    .pcoded-main-container .table-responsive::-webkit-scrollbar,
    .layout-wrapper .table-responsive::-webkit-scrollbar,
    .layout-wrapper table::-webkit-scrollbar {
        height: 14px !important;
    }
    /* Keep every DataTable cell on a single line so columns don't wrap into an
       unreadable stack — the row scrolls sideways as one piece instead. Each
       page keeps its own min-width (e.g. Products = 1100px) so the grid truly
       overflows and the horizontal bar shows. */
    body .pcoded-main-container table.dataTable td,
    body .pcoded-main-container table.dataTable th {
        white-space: nowrap !important;
    }
}

/* ===========================================================================
 * F.  DATATABLES RESPONSIVE — safety net now that dt-responsive is off.
 *      If any table still initialises the Responsive plugin, never let it hide
 *      a column or collapse a row; always keep every cell visible.
 * =========================================================================== */
table.dataTable.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child {
    padding-left: 12px !important;
}
table.dataTable > tbody > tr > td.child,
table.dataTable > tbody > tr.child {
    display: none !important; /* no collapsed child rows — we scroll instead */
}
table.dataTable .dtr-control::before {
    display: none !important; /* hide any leftover "+" expander */
}

/* ===========================================================================
 * G.  BARE BOOTSTRAP TABLES — back-office panels
 *      Sections B–E only rescue tables that sit inside `.table-responsive`,
 *      `.yajra-data-table-main` or `.dataTables_wrapper`. A number of
 *      hand-written tables (Accounts commission summaries, System status,
 *      dashboard widgets, order detail breakdowns, login activities…) are
 *      rendered straight into a `.card-body` with no wrapper, so on a phone
 *      they push the whole page sideways. Give every such table its own
 *      scroll area — same treatment the customer panel already gets from
 *      the `.layout-wrapper table` rule in section C.
 * =========================================================================== */
@media (max-width: 991.98px) {
    body .pcoded-main-container table:not(.dataTable):not(.table-responsive table):not(.table-responsive-md table):not(.table-responsive-lg table):not(.yajra-data-table-main table):not(.dataTables_wrapper table) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body .pcoded-main-container table:not(.dataTable):not(.table-responsive table)::-webkit-scrollbar {
        height: 12px !important;
        -webkit-appearance: none;
    }
    body .pcoded-main-container table:not(.dataTable):not(.table-responsive table)::-webkit-scrollbar-track {
        background: #e6ebf2 !important;
        border-radius: 8px !important;
    }
    body .pcoded-main-container table:not(.dataTable):not(.table-responsive table)::-webkit-scrollbar-thumb {
        background: #3BAFE2 !important;
        border-radius: 8px !important;
        border: 2px solid #e6ebf2 !important;
    }
}