<style>
/* === Sidebar (tablet / desktop) — fixed 250px. Design unchanged. ===
   Mobile (<=767.98px) turns this into an off-canvas drawer; that behaviour
   lives centrally in css/responsive-mobile.css + js/responsive-mobile.js. */
.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;
}

/* Custom scrollbar */
.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; }
</style>

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

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

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

            <!-- Nav Item - 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>
            <li class="nav-item">
                            <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapseTwo"
                                aria-expanded="true" 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>
            <li class="nav-item">
                            <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsepur"
                                aria-expanded="true" aria-controls="collapseExpense">
                                <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="#collapsePos"
                                aria-expanded="true" 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="new_product.php">Add New Product</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>
              <li class="nav-item">
                            <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapseinventry"
                                aria-expanded="true" aria-controls="collapseinventry">
                                <i class="fas fa-fw fa-money-bill-wave"></i>
                                <span>Cash Drawer</span>
                            </a>
                            <div id="collapseinventry" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
                                <div class="bg-white py-2 collapse-inner rounded">
                                    <h6 class="collapse-header">Cash Drawer:</h6>
                                    <a class="collapse-item" href="cashinout.php">Cash Drawer</a>
                                   
                                </div>
                            </div>
                        </li>
             <li class="nav-item">
                            <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsecus"
                                aria-expanded="true" aria-controls="collapseExpense">
                                <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>
                              
                                </div>
                            </div>
                        </li>
            
             <li class="nav-item">
                            <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsesup"
                                aria-expanded="true" aria-controls="collapseExpense">
                                <i class="fas fa-fw fa-truck"></i>
                                <span>Supplier 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">Supplier Ledger:</h6>
                                    <a class="collapse-item" href="supplier.php">Add Supplier Ledgers</a>
                                    <a class="collapse-item" href="supplier_view.php">View Supplier Ledgers</a>
                                    <a class="collapse-item" href="credit_pay.php">Paid Amount</a>
                              
                                </div>
                            </div>
                        </li>
            
            <li class="nav-item">
                            <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsesal"
                                aria-expanded="true" aria-controls="collapseExpense">
                                <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>
                        
                         <li class="nav-item">
                            <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapseexp"
                                aria-expanded="true" aria-controls="collapseExpense">
                                <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<br> Head</a>
                               </div>
                            </div>
                        </li>
                        
                        <li class="nav-item">
                            <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapsesb"
                                aria-expanded="true" aria-controls="collapseExpense">
                                <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">Bank 1</a>
                                    <a class="collapse-item" href="report_bank2.php">Bank 2</a>
                                    <a class="collapse-item" href="report_bank3.php">Bank 3</a>
                                    <a class="collapse-item" href="withdraw.php">Withdraw</a>
                                    <a class="collapse-item" href="transfer.php">Transfer</a>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link collapsed" href="" data-toggle="collapse" data-target="#collapserp"
                                aria-expanded="true" aria-controls="collapseExpense">
                                <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_r.php">Refund Items 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="report_supplier.php">Supplier Reprot</a>
                                     <a class="collapse-item" href="report_salari.php">Salary Reprot</a>
                                      <a class="collapse-item" href="report_pl.php">Profit & Loss</a>
                             </div>
                            </div>
                        </li>

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

        </ul>
        
     