<style>
/* ============================================
   DESKTOP SIDEBAR (fixed 250px) — unchanged
   ============================================ */
.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 250px !important;
    z-index: 1040 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.sidebar ~ #content-wrapper,
body > #content-wrapper {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 10px; }

/* Hide the mobile close button on desktop. */
@media (min-width: 769px) { .sidebar-close-btn { display: none !important; } }

/* ============================================
   MOBILE SIDEBAR = compact slide-in drawer
   (driven by the existing .mobile-open JS)
   ============================================ */
@media (max-width: 768px) {

    .sidebar {
        width: 250px !important;
        max-width: 82vw !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1055 !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 2rem !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.35);
    }

    .sidebar ~ #content-wrapper,
    body > #content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Inline icon + label links (like the desktop expanded menu). */
    .sidebar .nav-item .nav-link {
        display: block !important;
        text-align: left !important;
        padding: 0.85rem 1.25rem !important;
        font-size: 0.95rem !important;
        width: 100% !important;
    }
    .sidebar .nav-item .nav-link i {
        font-size: 0.95rem !important;
        margin: 0 0.65rem 0 0 !important;
        width: 1.3rem;
        text-align: center;
        display: inline-block;
    }
    .sidebar .nav-item .nav-link span {
        font-size: 0.95rem !important;
        display: inline !important;
    }
    .sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
        width: 1rem; text-align: center; float: right; vertical-align: 0;
        border: 0; font-weight: 900; content: '107'; font-family: 'Font Awesome 5 Free';
    }
    .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
        content: '105';
    }

    /* Submenus expand INLINE inside the drawer. */
    .sidebar .collapse,
    .sidebar .collapsing {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        margin: 0 !important;
        -webkit-animation: none !important;
        animation: none !important;
    }
    .sidebar .collapse .collapse-inner {
        width: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .sidebar .collapse .collapse-inner .collapse-item {
        display: block !important;
        width: 100% !important;
        padding: 0.6rem 1.25rem 0.6rem 2.6rem !important;
        font-size: 0.9rem !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .sidebar .collapse .collapse-inner .collapse-header {
        padding: 0.5rem 1.25rem 0.25rem !important;
        font-size: 0.72rem !important;
    }
    .sidebar .sidebar-brand { padding: 16px 10px !important; }

    /* Close (X) button inside the drawer. */
    .sidebar-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        padding: 10px 15px;
        position: sticky;
        top: 0;
        background: inherit;
        z-index: 10;
    }
    .sidebar-close-btn button {
        background: rgba(255,255,255,0.15);
        border: none;
        color: #fff;
        border-radius: 50%;
        width: 36px; height: 36px;
        font-size: 18px;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }
    .sidebar-close-btn button:hover { background: rgba(255,255,255,0.3); }
}

/* ============================================
   OVERLAY
   ============================================ */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1054;
    -webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.active { display: block; }
</style>

<!-- Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion font-weight-bold" id="accordionSidebar">

    <!-- Close Button (mobile only) -->
    <div class="sidebar-close-btn">
        <button id="sidebarCloseMobile" title="Close menu" aria-label="Close menu">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <!-- Sidebar - Brand -->
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="dashboard.php">
        <div class="sidebar-brand-icon">
            <img src="../img/logo231.png" width="50" height="50">
        </div>
    </a>

    <!-- Divider -->
    <hr class="sidebar-divider my-0">

    <!-- Dashboard -->
    <li class="nav-item">
        <a class="nav-link" href="dashboard.php">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Dashboard</span>
        </a>
    </li>

    <!-- Sale -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapseTwo"
            aria-expanded="false" aria-controls="collapseTwo">
            <i class="fas fa-cash-register"></i>
            <span>Sale</span>
        </a>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">Point Of Sale:</h6>
                <a class="collapse-item" href="mainpos.php">Add Sale</a>
                <a class="collapse-item" href="order_detail_v.php">View Sale Invoice</a>
            </div>
        </div>
    </li>

    <!-- Purchase -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsepur"
            aria-expanded="false" aria-controls="collapsepur">
            <i class="fas fa-fw fa-list"></i>
            <span>Purchase</span>
        </a>
        <div id="collapsepur" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">Purchase:</h6>
                <a class="collapse-item" href="purchase_n.php">Add Purchase</a>
                <a class="collapse-item" href="purchase_detail_v.php">View Purchase Invoice</a>
            </div>
        </div>
    </li>
    
     <li class="nav-item">
        <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsegt"
            aria-expanded="false" aria-controls="collapsegt">
            <i class="fas fa-fw fa-warehouse"></i>
            <span>GatePass</span>
        </a>
        <div id="collapsegt" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">GatePass:</h6>
                <a class="collapse-item" href="add_gp.php">Add Gate Pass</a>
                <a class="collapse-item" href="view_gatepass.php">View Gate Pass</a>
                <a class="collapse-item" href="add_package.php">Add Packings</a>
                <!--<a class="collapse-item" href="purchase_detail_v.php">View Purchase Invoice</a>-->
            </div>
        </div>
    </li>

    <!-- Product -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsePos"
            aria-expanded="false" aria-controls="collapsePos">
            <i class="fas fa-fw fa-box-open"></i>
            <span>Product</span>
        </a>
        <div id="collapsePos" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">Product:</h6>
                <a class="collapse-item" href="addproducts.php">Add Opening Stock</a>
                <a class="collapse-item" href="addproduct.php">View Product List</a>
                <a class="collapse-item" href="category.php">Add Category</a>
                <a class="collapse-item" href="company.php">Add Company</a>
                <a class="collapse-item" href="units.php">Add Units</a>
            </div>
        </div>
    </li>

    <!-- Customer Ledger -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsecus"
            aria-expanded="false" aria-controls="collapsecus">
            <i class="fas fa-fw fa-users"></i>
            <span>Customer Ledger</span>
        </a>
        <div id="collapsecus" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">Customer Ledger:</h6>
                <a class="collapse-item" href="credits.php">Add Customer Ledgers</a>
                <a class="collapse-item" href="view_creditor.php">View Customer Ledgers</a>
                <a class="collapse-item" href="credit_rec.php">Recieving Amount</a>
                <a class="collapse-item" href="loc_trans.php">Add City &amp; Transport</a>
            </div>
        </div>
    </li>

    <!-- Supplier Ledger -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsesup"
            aria-expanded="false" aria-controls="collapsesup">
            <i class="fas fa-fw fa-truck"></i>
            <span>Party Ledger</span>
        </a>
        <div id="collapsesup" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">Party Ledger:</h6>
                <a class="collapse-item" href="supplier.php">Add Party Ledgers</a>
                <a class="collapse-item" href="supplier_view.php">View Party Ledgers</a>
                <a class="collapse-item" href="credit_pay.php">Paid Amount</a>
            </div>
        </div>
    </li>

    <!-- Salary Ledger -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsesal"
            aria-expanded="false" aria-controls="collapsesal">
            <i class="fas fa-fw fa-dollar-sign"></i>
            <span>Salary Ledger</span>
        </a>
        <div id="collapsesal" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">Employee Management:</h6>
                <a class="collapse-item" href="e_salary.php">Add Employee</a>
                <a class="collapse-item" href="view_salari.php">View Employee Ledger</a>
                <a class="collapse-item" href="paid_amount.php">Paid Amount</a>
                <a class="collapse-item" href="pay_amount.php">Payable Amount</a>
            </div>
        </div>
    </li>

    <!-- Expense -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapseexp"
            aria-expanded="false" aria-controls="collapseexp">
            <i class="fas fa-fw fa-dollar-sign"></i>
            <span>Expense</span>
        </a>
        <div id="collapseexp" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">Expense Management:</h6>
                <a class="collapse-item" href="exp_head.php">Add Expense Head</a>
                <a class="collapse-item" href="view_expbyhead.php">View Expense By Head</a>
            </div>
        </div>
    </li>

    <!-- Cash / Bank -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsesb"
            aria-expanded="false" aria-controls="collapsesb">
            <i class="fas fa-fw fa-money-bill-wave"></i>
            <span>Cash / Bank</span>
        </a>
        <div id="collapsesb" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">Cash/Bank Daily Book:</h6>
                <a class="collapse-item" href="report_c.php">Cash Book</a>
                <a class="collapse-item" href="report_bank.php">Meezan Bank </a>
                <a class="collapse-item" href="report_bank2.php">Faysal Bank</a>
                <a class="collapse-item" href="report_bank3.php">Bank AL-Habib</a>
                <a class="collapse-item" href="withdraw.php">Withdraw</a>
                <a class="collapse-item" href="transfer.php">Transfer</a>
            </div>
        </div>
    </li>

    <!-- Reports -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapserp"
            aria-expanded="false" aria-controls="collapserp">
            <i class="fas fa-fw fa-money-bill-wave"></i>
            <span>Reports</span>
        </a>
        <div id="collapserp" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <h6 class="collapse-header">Reporting:</h6>
                <a class="collapse-item" href="report_s.php">Sale Report</a>
                <a class="collapse-item" href="report_pur.php">Purchase Report</a>
                <a class="collapse-item" href="report_in.php">Invoice Report</a>
                <a class="collapse-item" href="report_i.php">Inventory Report</a>
                <a class="collapse-item" href="report_recieve.php">Customer Report</a>
                <a class="collapse-item" href="creditor_closing.php">Customer Closing Report</a>
                <a class="collapse-item" href="report_supplier.php">Party Report</a>
                <a class="collapse-item" href="supplier_closing.php">Party Closing Report</a>
                <a class="collapse-item" href="report_salari.php">Salary Report</a>
                <a class="collapse-item" href="report_pl.php">Profit &amp; Loss</a>
            </div>
        </div>
    </li>

    <!-- Sidebar Toggler (Desktop only) -->
    <div class="text-center d-none d-md-inline">
        <button class="rounded-circle border-0" id="sidebarToggle"></button>
    </div>

</ul>
