/* Professional Custom Scrollbar Styles */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 10px;
    border: 2px solid #f1f1f1;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
}

/* For horizontal scrollbar */
::-webkit-scrollbar:horizontal {
    height: 10px;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #f1f1f1;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar for specific containers */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 10px;
    border: 1px solid #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
}

/* Modal scrollbar styling */
.modal-backdrop::-webkit-scrollbar,
.modal-backdrop *::-webkit-scrollbar {
    width: 8px;
}

.modal-backdrop::-webkit-scrollbar-thumb,
.modal-backdrop *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 10px;
}

/* Dark mode scrollbar (optional) */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-track {
        background: #1f2937;
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
        border: 2px solid #1f2937;
    }

    * {
        scrollbar-color: #3b82f6 #1f2937;
    }
}