/* استایل اسکرول */
.custom-scroll::-webkit-scrollbar {
    width: 5px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: #4f46e5;
    border-radius: 10px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: #818cf8;
    border-radius: 10px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #c7d2fe;
}

.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: #818cf8 #4f46e5;
}

/* ============================================ */
/* استایل‌های سایدبار */
/* ============================================ */

.sidebar-main {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* بک‌دراپ */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

.sidebar-overlay.active {
    display: block;
}

/* ========== موبایل (عرض کمتر از 1024px) ========== */
@media (max-width: 1023px) {
    .sidebar-main {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px !important;
        height: 100vh;
        z-index: 999;
        transform: translateX(-100%);
        opacity: 0;
        box-shadow: 2px 0 20px rgba(0,0,0,0.3);
        overflow-y: auto;
    }

    .sidebar-main.open {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ========== دسکتاپ (عرض بیشتر از 1024px) ========== */
@media (min-width: 1024px) {
    .sidebar-main {
        transform: translateX(0) !important;
        opacity: 1 !important;
        position: relative !important;
        width: 256px !important;
        height: 100% !important;
        box-shadow: none !important;
    }

    .sidebar-overlay {
        display: none !important;
    }
}



<button id="sidebarToggle" class="lg:hidden text-gray-600 hover:text-indigo-600 focus:outline-none transition-colors duration-200">
    <i class="fas fa-bars text-2xl"></i>
</button>


<div id="sidebar" class="sidebar-main">
    <div class="w-64 bg-gradient-to-b from-indigo-900 to-indigo-800 text-white flex flex-col h-full shadow-xl">
        <!-- دکمه بستن سایدبار (فقط در موبایل) -->
        <div class="lg:hidden absolute top-4 right-4 z-10">
            <button id="sidebarCloseBtn" class="text-white hover:text-gray-300 transition-colors duration-200">
                <i class="fas fa-times text-2xl"></i>
            </button>
        </div>
        
        <!-- لوگو و هدر -->
        <div class="p-5 border-b border-indigo-700 flex-shrink-0">
            <img src="/images/logo.jpg" alt="SmartTravel Logo" class="w-16 h-16 rounded-full object-cover mx-auto mb-3 border-2 border-white">
            <h2 class="text-xl font-bold text-center">SmartTravel</h2>
            <p class="text-indigo-200 text-xs text-center">Travel Agency CRM</p>
        </div>
        
        <!-- منوها -->
        <nav class="flex-1 overflow-y-auto py-4 min-h-0 custom-scroll">
            <div class="px-3 mb-2">
                <p class="text-indigo-300 text-xs uppercase tracking-wider px-3 mb-1">Main</p>
                <a href="/dashboard.html" id="nav-dashboard" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-tachometer-alt w-5 mr-3 text-indigo-300"></i>
                    <span>Dashboard</span>
                </a>
                <!-- <a href="/approvals.html" id="nav-approvals" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-check-double w-5 mr-3 text-indigo-300"></i>
                    <span>Accept / Reject</span>
                </a> -->
            </div>
            
            <div class="px-3 mb-2">
                <p class="text-indigo-300 text-xs uppercase tracking-wider px-3 mb-1">Sales</p>
                <a href="/bookings.html" id="nav-bookings" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-ticket-alt w-5 mr-3 text-indigo-300"></i>
                    <span>Sell Tickets</span>
                </a>
                <a href="/visa.html" id="nav-visa" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-passport w-5 mr-3 text-indigo-300"></i>
                    <span>Sell Visa</span>
                </a>
                <a href="/umrah.html" id="nav-umrah" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-kaaba w-5 mr-3 text-indigo-300"></i>
                    <span>Umrah</span>
                </a>
                <a href="/refund.html" id="nav-refund" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-money-bill-wave w-5 mr-3 text-indigo-300"></i>
                    <span>Refund</span>
                </a>
                <a href="/date-change.html" id="nav-date-change" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-calendar-alt w-5 mr-3 text-indigo-300"></i>
                    <span>Date Change</span>
                </a>
            </div>
            
            <div class="px-3 mb-2">
                <p class="text-indigo-300 text-xs uppercase tracking-wider px-3 mb-1">Management</p>
                <a href="/suppliers.html" id="nav-suppliers" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-truck w-5 mr-3 text-indigo-300"></i>
                    <span>Manage Suppliers</span>
                </a>
                <a href="/bank.html" id="nav-bank" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-university w-5 mr-3 text-indigo-300"></i>
                    <span>Bank / Wallet</span>
                </a>
                <a href="/agents.html" id="nav-agents" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-handshake w-5 mr-3 text-indigo-300"></i>
                    <span>Agents</span>
                </a>
                <a href="/employees.html" id="nav-employees" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-user-tie w-5 mr-3 text-indigo-300"></i>
                    <span>Employees</span>
                </a>
                
            </div>
            
            <div class="px-3 mb-2">
                <a href="/settings.html" id="nav-settings" class="nav-link flex items-center py-2.5 px-3 rounded-lg hover:bg-indigo-700 transition-all duration-200">
                    <i class="fas fa-sliders-h w-5 mr-3 text-indigo-300"></i>
                    <span>Settings</span>
                </a>
            </div>
        </nav>
        
        <!-- دکمه Logout -->
        <div class="p-4 border-t border-indigo-700 flex-shrink-0">
            <button onclick="window.logout()" 
                    class="flex items-center justify-center w-full py-2.5 px-3 bg-red-600 hover:bg-red-700 rounded-lg text-white font-medium transition-all duration-200">
                <i class="fas fa-sign-out-alt mr-2"></i>
                <span>Logout</span>
            </button>
            <div class="text-center text-xs text-indigo-300 mt-2">
                <span>v2.0.0</span>
                <span class="mx-2">|</span>
                <span>© SmartTravel</span>
            </div>
        </div>
    </div>
</div>