/*
 * ===================================================================
 * Multimaart — Panel Mobile Responsiveness (v7, 2026-05-25)
 * ===================================================================
 *
 * One stylesheet, loaded by every backend panel layout (Admin, Vendor,
 * District Coordinator, Vendor Admin Manager) and the customer site
 * master layout. Adds aggressive overrides ONLY at <992px so desktop
 * is untouched.
 *
 * Conventions:
 *   · All rules are wrapped in @media so they're no-ops on desktop.
 *   · Rules use !important when fighting Datta-Able / Bootstrap 5
 *     defaults. Try not to abuse it.
 *   · Tap targets minimum 44×44 (WCAG-friendly).
 *   · Inputs default to 16px font-size to suppress iOS auto-zoom.
 *
 * Layers:
 *   1. Common: tables, forms, modals, buttons, cards.
 *   2. Backend panels: sidebar drawer, datatable filter row, dashboard
 *      cards, breadcrumbs.
 *   3. Customer "My Account" panel: account sidebar, order rows.
 * ===================================================================
 */

/* =========================================================
 * 1. SHARED — Tables, Forms, Buttons, Modals (≤991.98px)
 * ========================================================= */
@media (max-width: 991.98px) {
    /* Tables — make every backend table horizontally scrollable.
       Datta-Able wraps tables in `.dataTables_wrapper` or `.table-responsive`.
       We force overflow-x even when the wrapper is missing. */
    .table-responsive,
    .dataTables_wrapper,
    .card .table-border-style,
    .table-responsive-lg,
    .table-responsive-md {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Better-looking scrollbar for the touch-scrolled tables */
    .table-responsive::-webkit-scrollbar,
    .dataTables_wrapper::-webkit-scrollbar {
        height: 6px;
    }
    .table-responsive::-webkit-scrollbar-thumb,
    .dataTables_wrapper::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }

    /* Tables themselves: prevent ugly word-wrap that bunches columns. */
    table.dataTable,
    table.table {
        white-space: nowrap !important;
        min-width: max-content !important;
    }

    /* Form group rows — stack label above input on mobile. */
    .form-group.row,
    .row.form-group {
        flex-direction: column;
    }
    .form-group.row > [class^="col-"],
    .form-group.row > [class*=" col-"],
    .row.form-group > [class^="col-"],
    .row.form-group > [class*=" col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .form-group.row > label,
    .row.form-group > label {
        text-align: left !important;
        margin-bottom: 6px !important;
    }

    /* iOS zoom kill-switch: input font-size <16px causes auto-zoom on focus. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }

    /* Buttons — minimum tap target */
    .btn,
    button.btn,
    a.btn {
        min-height: 40px;
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Tiny "icon-only" buttons */
    .btn-icon,
    .btn.btn-sm.btn-icon,
    .btn-action {
        min-height: 36px !important;
        min-width: 36px !important;
    }

    /* Cards & dashboard widgets — full width, no fixed widths */
    .card,
    .card-body {
        width: auto !important;
    }
    .dashboard-card,
    .stat-card,
    .small-card,
    .stats-card {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Modals — full screen on mobile so they actually fit */
    .modal-dialog {
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
    }
    .modal-content {
        border-radius: 0 !important;
        min-height: 100vh !important;
    }
    .modal-body {
        padding: 16px !important;
    }
}

/* =========================================================
 * 2. ADMIN / VENDOR / DC / VAM panels (Datta-Able theme)
 * ========================================================= */
@media (max-width: 991.98px) {
    /* DataTables filter row — search box + length selector were placed
       side-by-side and overflowed. Stack them. */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none !important;
        text-align: left !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    .dataTables_wrapper .dataTables_length select {
        max-width: 96px;
    }

    /* DataTables paginate row — wrap on narrow screens. */
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        margin-top: 12px !important;
    }
    .dataTables_wrapper .dataTables_info {
        text-align: center !important;
    }

    /* Sidebar (Datta-Able pcoded-navbar) — turn into off-canvas drawer */
    .pcoded-navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        z-index: 1030 !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease-in-out;
        max-width: 280px !important;
        width: 280px !important;
    }
    .pcoded-navbar.mob-open,
    body.mobile-sidebar-open .pcoded-navbar {
        transform: translateX(0) !important;
    }
    /* Backdrop when drawer is open */
    body.mobile-sidebar-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1029;
    }
    .pcoded-content,
    .pcoded-main-container {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Top header — make hamburger truly tappable */
    .navbar-brand .b-brand,
    .pcoded-header .mobile-menu {
        min-width: 44px;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Dashboard stat cards — full-width grid */
    .row .col-sm-6.col-xl-3,
    .row .col-md-6.col-xl-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Page heading + breadcrumb — wrap and shrink */
    .page-header h5,
    .page-header h4,
    .card-header h5 {
        font-size: 16px !important;
        line-height: 1.3 !important;
        word-break: break-word;
    }

    /* Notifications dropdown — fix overflow off-screen */
    .header-notification .show-notification {
        right: 0 !important;
        left: auto !important;
        max-width: 92vw !important;
        max-height: 70vh !important;
        overflow-y: auto;
    }

    /* Advance Reports search bar overlap fix carry-over */
    .dataTables_wrapper .dataTables_filter input[type="search"] {
        background-image: none !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
 * 3. CUSTOMER "My Account" panel (Tailwind theme)
 * ========================================================= */
@media (max-width: 991.98px) {
    /* Account sidebar → drawer */
    #sidenavbar,
    .account-sidebar,
    aside.account-side-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        max-width: 86vw !important;
        background: #fff !important;
        z-index: 50 !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease-in-out;
        overflow-y: auto;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
    }
    body.account-drawer-open #sidenavbar,
    body.account-drawer-open .account-sidebar,
    body.account-drawer-open aside.account-side-nav {
        transform: translateX(0) !important;
    }
    body.account-drawer-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 49;
    }

    /* Order list items, wishlist cards, address cards — single column */
    .order-card-list,
    .wishlist-card-list,
    .address-card-list,
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Profile + change password forms — full width */
    .profile-form-wrapper,
    .change-password-form,
    form.account-form {
        max-width: 100% !important;
    }

    /* My Account headings */
    .breadcrumb-section h2,
    .account-page-title {
        font-size: 18px !important;
    }
}

/* =========================================================
 * 4. Tiny screens (<420px) — extra squeeze
 * ========================================================= */
@media (max-width: 419.98px) {
    .card-header,
    .card-body {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .btn { padding: 8px 12px !important; }
    .h4, h4 { font-size: 16px !important; }
}