/* T040 findings
 * Sidebar wrapper: #offcanvasDarkNavbar (.offcanvas.offcanvas-nav.offcanvas-start)
 *   rendered by backend/partials/sidebar.blade.php (admin/staff) and
 *   backend/merchant_panel/partials/sidebar.blade.php (merchant). The super-admin
 *   panel keeps its drawer inside backend/super-admin/partials/navber.blade.php
 *   with the same id.
 * Content wrapper: .main-content inside main.dashboard-ecommerce in
 *   backend/partials/master.blade.php.
 * Toggler: .offcanvas-nav-btn inside backend/partials/navber.blade.php and
 *   backend/merchant_panel/partials/navber.blade.php.
 * RTL detection: header.blade.php sets <html dir="rtl"> when app locale is 'ar'.
 */

body {
    overflow-x: hidden;
}

@media (max-width: 991.98px) {
    /* Off-canvas drawer for the sidebar on phones/tablets */
    #offcanvasDarkNavbar {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        width: 280px;
        z-index: 1050;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .2s;
        display: flex !important;
        flex-direction: column;
        visibility: hidden;
        border: none;
    }

    /* The drawer itself is the only scroll container: the theme's inner
       .offcanvas-body / .nav-left-sidebar boxes get fixed heights with their
       own overflow, which touch devices often refuse to scroll. Let them grow
       to their content and scroll the whole drawer instead. */
    #offcanvasDarkNavbar {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    /* Match the desktop sidebar (white panel, slate links, purple active)
       instead of Bootstrap's dark offcanvas theme. */
    #offcanvasDarkNavbar,
    #offcanvasDarkNavbar .offcanvas-header,
    #offcanvasDarkNavbar .offcanvas-body,
    #offcanvasDarkNavbar .nav-left-sidebar,
    #offcanvasDarkNavbar .navbar {
        background-color: #fff !important;
        color: rgb(69, 85, 96) !important;
    }
    #offcanvasDarkNavbar {
        box-shadow: 0 0 24px rgba(0, 0, 0, .15);
    }
    #offcanvasDarkNavbar .navbar-nav .nav-link,
    #offcanvasDarkNavbar .nav-divider,
    #offcanvasDarkNavbar .lang-dropdown .btn {
        color: rgb(69, 85, 96) !important;
    }
    #offcanvasDarkNavbar .navbar-nav .nav-link:hover,
    #offcanvasDarkNavbar .navbar-nav .nav-link.active {
        color: rgb(126, 0, 149) !important;
        background-color: rgba(106, 2, 124, .07) !important;
    }
    #offcanvasDarkNavbar .btn-close {
        filter: none !important; /* drop btn-close-white: dark X on white */
    }

    #offcanvasDarkNavbar .offcanvas-body,
    #offcanvasDarkNavbar .nav-left-sidebar {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    html[dir="rtl"] #offcanvasDarkNavbar,
    html[lang="ar"] #offcanvasDarkNavbar {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }

    body.sidebar-open #offcanvasDarkNavbar,
    #offcanvasDarkNavbar.show {
        transform: translateX(0);
        visibility: visible;
    }

    /* The fixed-top language bar inside the drawer must not float over the
       viewport when the drawer is open. */
    #offcanvasDarkNavbar .fixed-top {
        position: relative !important;
    }

    /* Menu button on the same side the drawer opens from: the start edge
       (right in Arabic/RTL, left in English/LTR). It is the last item in the
       header list, so move it first; flex follows the page direction. */
    .navbar-nav > li:has(> .offcanvas-nav-btn) {
        order: -1;
        margin-inline-end: auto;
    }

    /* Backdrop shown only when the drawer is open */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .4);
        z-index: 1040;
    }

    body.sidebar-open .sidebar-backdrop {
        display: block;
    }

    /* Main content wrapper: use the full viewport width */
    .main-content {
        margin: 0 !important;
        width: 100% !important;
        padding: 0 12px;
    }

    /* Merchant panel: the compact phone header row (logo, bell, news,
       "+ quick create", wallet balance, avatar, menu) is ~456px wide, which
       widened the page on a 375px phone. Let it wrap onto a second line. */
    .merchant-navbar .navbar-other,
    .merchant-navbar .navbar-other > .navbar-nav {
        flex-wrap: wrap !important;
        row-gap: 6px;
        max-width: 100%;
    }
    .merchant-navbar .navbar-other > .navbar-nav {
        justify-content: flex-end;
        column-gap: 6px;
    }
    .merchant-navbar .navbar-other .btn {
        white-space: nowrap;
    }

    /* Charts never wider than their card */
    .apexcharts-canvas,
    .apexcharts-canvas svg {
        max-width: 100% !important;
    }

    /* Tables scroll horizontally instead of stretching the page */
    .table-responsive,
    .card-body > table {
        display: block;
        overflow-x: auto;
    }

    /* Header items wrap on narrow screens */
    .navbar-other {
        flex-wrap: wrap;
    }

    /* Stack form columns to one column */
    .form-row > [class*="col-"],
    .row > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ---- Fluid sizes (2026-10-25): scale with the screen between a 320px
       phone and a tablet instead of using the desktop sizes. ---- */

    /* Header: To-Do button, icons and logo */
    #todoModal1,
    .merchant-navbar .navbar-other .btn {
        font-size: clamp(12px, 3.4vw, 15px) !important;
        padding: clamp(4px, 1.2vw, 7px) clamp(8px, 2.6vw, 14px) !important;
        margin-left: 4px !important;
        margin-right: 4px !important;
        line-height: 1.3;
        white-space: nowrap;
    }
    .navbar .nav-link i,
    .navbar .offcanvas-nav-btn i,
    .navbar .offcanvas-nav-btn svg {
        font-size: clamp(16px, 4.6vw, 22px);
    }
    .navbar .user-avatar-md,
    .navbar .nav-user img {
        width: clamp(28px, 8vw, 40px) !important;
        height: clamp(28px, 8vw, 40px) !important;
    }
    .navbar-brand img {
        max-height: clamp(28px, 9vw, 44px);
        width: auto;
    }

    /* Dashboard date filter: input and button share one full-width row */
    .dashboard-filter form {
        display: flex;
        width: 100%;
    }
    .dashboard-filter form .dashboard-filter-input {
        order: 1;
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        float: none !important;
    }
    .dashboard-filter form .group-btn {
        order: 2;
        flex: 0 0 auto;
        float: none !important;
    }
    .merchant-dashboard-filter form {
        flex-wrap: wrap;
        gap: 6px;
    }
    .merchant-dashboard-filter input.w200 {
        min-width: 0 !important;
        flex: 1 1 160px;
    }

    /* Summary cards: smaller icon / number / title on small screens */
    .total-card-body {
        padding-top: clamp(10px, 3vw, 20px);
    }
    .total-card-body label.icon,
    .total-card-body label.icon i {
        font-size: clamp(26px, 8vw, 44px) !important;
    }
    .total-card-body h1 {
        font-size: clamp(22px, 7vw, 34px) !important;
    }
    .total-card-body h5 {
        font-size: clamp(12px, 3.6vw, 15px) !important;
    }
    .header-summery .card {
        margin-bottom: clamp(10px, 3vw, 24px);
    }

    /* Cards, headings and breadcrumbs */
    .card-body {
        padding: clamp(12px, 4vw, 24px);
    }
    .h3, h3 {
        font-size: clamp(18px, 5vw, 24px);
    }
    .breadcrumb {
        font-size: clamp(13px, 3.8vw, 16px);
    }

    /* Entry fields: one size everywhere (16px stops iPhone zoom on focus) */
    .form-control,
    .form-control-lg,
    .select2-container .select2-selection--single .select2-selection__rendered {
        font-size: 16px !important;
    }
    .form-control-lg {
        height: auto;
        padding: .45rem .9rem;
    }
    .select2-container {
        width: 100% !important;
        max-width: 100%;
    }
    .form-group label {
        font-size: clamp(13px, 3.6vw, 15px);
    }
}

/* Tablets: two summary cards per row instead of one */
@media (min-width: 576px) and (max-width: 991.98px) {
    .header-summery > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}