<style>
.sidebar-wrapper {
    background: var(--cannabus-gradient-ink);
    color: #f5f8f4;
}

.sidebar-header {
    padding: 18px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand-label {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-top: 6px;
}

.order:hover i,
.order:hover .fa-icon {
    display: block !important;
}

.active i,
.active .fa-icon {
    display: block !important;
}

.sidebar-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    padding: 16px 16px 8px 16px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 10px 16px;
}

.icnonDiv {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icnonDiv i,
.icnonDiv .fa-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-wrapper .sidebar-nav .metismenu a {
    padding: 10px 16px;
    font-weight: 500;
    min-height: 44px;
    border-radius: 12px;
    margin: 4px 10px;
    color: rgba(255, 255, 255, 0.82);
}

.sidebar-wrapper .sidebar-nav .metismenu a .menu-title {
    margin-left: 12px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-wrapper .sidebar-nav .metismenu a:hover {
    transform: translateX(2px);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 27, 19, 0.25);
}

.sidebar-wrapper .sidebar-nav .metismenu a.active,
.sidebar-wrapper .sidebar-nav .metismenu li.mm-active > a {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(15, 27, 19, 0.35);
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 12px 0;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: rgba(15, 27, 19, 0.88);
    z-index: 10;
}

.sidebar-footer .metismenu li {
    margin-top: 4px;
}

.sidebar-footer .metismenu a {
    padding: 10px 16px;
    font-weight: 500;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}

.logo-icon img {
    max-width: 140px;
    height: auto;
    filter: brightness(0) invert(1);
}

/* Sidebar Scroll Styling */
.sidebar-wrapper .sidebar-nav {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px);
    overflow: hidden;
    position: relative;
}

.sidebar-wrapper .sidebar-nav .sidebar-nav-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10px;
}

.sidebar-wrapper .sidebar-nav .sidebar-nav-content .metismenu {
    padding-bottom: 20px;
}

/* Custom Scrollbar Styling */
.sidebar-wrapper .sidebar-nav .sidebar-nav-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-wrapper .sidebar-nav .sidebar-nav-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.sidebar-wrapper .sidebar-nav .sidebar-nav-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.sidebar-wrapper .sidebar-nav .sidebar-nav-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* SimpleBar Custom Styling */
.sidebar-wrapper .sidebar-nav .simplebar-scrollbar::before {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px;
    opacity: 1 !important;
}

.sidebar-wrapper .sidebar-nav .simplebar-scrollbar.simplebar-visible:before {
    opacity: 1 !important;
}

.sidebar-wrapper .sidebar-nav .simplebar-track {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
    right: 4px !important;
}

.sidebar-wrapper .sidebar-nav .simplebar-track.simplebar-vertical {
    width: 6px !important;
}

.sidebar-wrapper .sidebar-nav .simplebar-content-wrapper {
    padding-right: 0;
    overflow-y: auto;
}

.sidebar-wrapper .sidebar-nav .simplebar-content {
    padding-right: 0 !important;
}
</style>
<aside class="sidebar-wrapper">
    <div class="sidebar-header" style="display: flex; align-items: center; justify-content: space-between; color: #fff; background: #132118;">
        <div class="logo-icon d-none">
            <img src="<?php echo base_url('assets/images/dplogo.png'); ?>" alt="Cannabus Logo">
        </div>
        <div class="sidebar-brand-label"><h5 style="color: #fff;">DripDrop Admin</h5></div>
        <div class="logo-name flex-grow-1"></div>
        <div class="sidebar-close">
            <span class="material-icons-outlined">close</span>
        </div>
    </div>
    <div class="sidebar-nav" data-simplebar="true" data-simplebar-auto-hide="false">
        <div class="sidebar-nav-content">
            <!--navigation-->
            <ul class="metismenu" id="sidenav">
                <!-- 1. Dashboard & Analytics -->
                <li>
                    <a href="<?php echo base_url('dashboard'); ?>" class="">
                        <div class="icnonDiv">
                            <img class="img2" src="<?php echo base_url('assets/images/daIcon.png'); ?>" alt="">
                        </div>
                        <div class="menu-title">Dashboard</div>
                    </a>
                </li>

                <div class="sidebar-divider"></div>
                
                <!-- 2. User Management -->
                <li class="sidebar-section-title">User Management</li>
                
                <li>
                    <a href="<?php echo base_url('Users'); ?>" class="">
                        <div class="icnonDiv">
                            <i class="fa-solid fa-users fa-icon"></i>
                        </div>
                        <div class="menu-title">Users</div>
                    </a>
                </li>
                
                <li>
                    <a href="<?php echo base_url('Customer'); ?>" class="">
                        <div class="icnonDiv">
                            <img class="img2" src="<?php echo base_url('assets/images/cus.png'); ?>" alt="">
                        </div>
                        <div class="menu-title">Customers</div>
                    </a>
                </li>

                <div class="sidebar-divider"></div>
                
                <!-- 3. Vendor Management -->
                <li class="sidebar-section-title">Vendor Management</li>

                <li>
                    <a href="<?php echo base_url('vendors'); ?>" class="">
                        <div class="icnonDiv">
                            <img class="img2" src="<?php echo base_url('assets/images/ven.png'); ?>" alt="">
                        </div>
                        <div class="menu-title">Vendors</div>
                    </a>
                </li>

                <div class="sidebar-divider"></div>
                
                <!-- 4. Rider Management -->
                <li class="sidebar-section-title">Rider Management</li>

                <li>
                    <a href="<?php echo base_url('drivers'); ?>" class="">
                        <div class="icnonDiv">
                            <img class="img2" src="<?php echo base_url('assets/images/dri.png'); ?>" alt="">
                        </div>
                        <div class="menu-title">Riders</div>
                    </a>
                </li>

                <div class="sidebar-divider"></div>
                
                <!-- 5. Category Management -->
                <li class="sidebar-section-title">Category Management</li>
                
                <li>
                    <a href="<?php echo base_url('Dashboard/categories'); ?>" class="order">
                        <div class="icnonDiv">
                            <i class="fa-solid fa-tags fa-icon d-none"></i>
                        </div>
                        <div class="menu-title">Categories</div>
                    </a>
                </li>
                
                <li>
                    <a href="<?php echo base_url('Dashboard/subcategories'); ?>" class="order">
                        <div class="icnonDiv">
                            <i class="fa-solid fa-tag fa-icon d-none"></i>
                        </div>
                        <div class="menu-title">Sub Categories</div>
                    </a>
                </li>

                <div class="sidebar-divider"></div>
                
                <!-- 6. Revenue & Financial Management -->
                <li class="sidebar-section-title">Revenue & Financial</li>
                
                <li>
                    <a href="<?php echo base_url('Reports/revenue'); ?>" class="order">
                        <div class="icnonDiv">
                            <i class="fa-solid fa-dollar-sign fa-icon d-none"></i>
                        </div>
                        <div class="menu-title">Revenue & Reports</div>
                    </a>
                </li>
                
                <li>
                    <a href="<?php echo base_url('Reports/delivery'); ?>" class="order">
                        <div class="icnonDiv">
                            <i class="fa-solid fa-chart-line fa-icon d-none"></i>
                        </div>
                        <div class="menu-title">Analytics & Reports</div>
                    </a>
                </li>

                <div class="sidebar-divider"></div>
                
                <!-- 7. Dispute Management -->
                <li class="sidebar-section-title">Dispute Management</li>
                
                <li>
                    <a href="<?php echo base_url('Dispute'); ?>" class="order">
                        <div class="icnonDiv">
                            <i class="fa-solid fa-gavel fa-icon d-none"></i>
                        </div>
                        <div class="menu-title">Disputes</div>
                    </a>
                </li>

                <div class="sidebar-divider"></div>
                
                <!-- Additional Operations -->
                <li class="sidebar-section-title">Operations</li>
                
                <li>
                    <a href="<?php echo base_url('Orders'); ?>" class="order">
                        <div class="icnonDiv">
                            <i class="fa-solid fa-shopping-cart fa-icon d-none"></i>
                        </div>
                        <div class="menu-title">Order Management</div>
                    </a>
                </li>
                
                <li>
                    <a href="<?php echo base_url('products'); ?>" class="">
                        <div class="icnonDiv">
                            <img class="img2" src="<?php echo base_url('assets/images/box-fill.svg'); ?>" alt="">
                        </div>
                        <div class="menu-title">Products</div>
                    </a>
                </li>
              

                <div class="sidebar-divider"></div>
                
                <!-- Marketing & Promotions -->
                <li class="sidebar-section-title">Marketing</li>

                <li>
                    <a href="<?php echo base_url('Promotion'); ?>" class="order">
                        <div class="icnonDiv">
                            <i class="fa-solid fa-bullhorn fa-icon d-none"></i>
                        </div>
                        <div class="menu-title">Promotions</div>
                    </a>
                </li>
                
                <li>
                    <a href="<?php echo base_url('Promotion/notification'); ?>" class="order">
                        <div class="icnonDiv">
                            <i class="fa-solid fa-bell fa-icon d-none"></i>
                        </div>
                        <div class="menu-title">Notifications</div>
                    </a>
                </li>
            </ul>
        </div>

        <!-- Footer Section -->
        <div class="sidebar-footer">
            <ul class="metismenu">
                <li>
                    <a href="<?php echo base_url('dashboard/settings'); ?>" class="">
                        <div class="icnonDiv">
                            <i class="fa-solid fa-gear fa-icon"></i>
                        </div>
                        <div class="menu-title">Settings</div>
                    </a>
                </li>
                <li>
                    <a href="<?php echo base_url('login/logout'); ?>" class="">
                        <div class="icnonDiv">
                            <i class="fa-solid fa-right-from-bracket fa-icon"></i>
                        </div>
                        <div class="menu-title">Logout</div>
                    </a>
                </li>
            </ul>
        </div>
        <!--end navigation-->
    </div>
</aside>
<main class="main-wrapper">
    <div class="main-content">