/* Custom Scrollbar for Sidebar */
.sidebar {
    /* Make sure the sidebar content is scrollable */
    overflow-y: auto;
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* For Firefox */
}

/* Webkit browsers (Chrome, Safari, Edge) */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 5px;
}

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

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

/* Modern Topbar Dropdown Scrollbar */
.modern-dropdown-menu {
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: rgba(78, 115, 223, 0.3) transparent; /* For Firefox */
}

.modern-dropdown-menu::-webkit-scrollbar {
    width: 4px;
}

.modern-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.modern-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(78, 115, 223, 0.3);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.modern-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(78, 115, 223, 0.5);
}

/* Hide scrollbar when not in use but keep functionality */
@media (min-width: 992px) {
    .sidebar-menu::-webkit-scrollbar {
        opacity: 0.3;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-menu.scrollbar-visible::-webkit-scrollbar,
    .sidebar-menu:hover::-webkit-scrollbar {
        opacity: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .sidebar::-webkit-scrollbar {
        width: 4px; /* Thinner scrollbar on smaller screens */
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .sidebar {
        scrollbar-color: rgba(255, 255, 255, 0.4) rgba(0, 0, 0, 0.2); /* For Firefox */
    }
    
    .sidebar::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
    }
    
    .sidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.4);
    }
    
    .sidebar::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.6);
    }
}

/* Animation for the scrollbar thumb */
.sidebar::-webkit-scrollbar-thumb {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        background: rgba(255, 255, 255, 0.3);
    }
    50% {
        background: rgba(255, 255, 255, 0.4);
    }
    100% {
        background: rgba(255, 255, 255, 0.3);
    }
}

/* Ensure smooth scrolling */
.sidebar {
    scroll-behavior: smooth;
}