/* Custom Scrollbar Styles */

/* Hide scrollbar on mobile devices */
@media (max-width: 768px) {
    * {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
        justify-content: space-around;
    }
    
    *::-webkit-scrollbar {
        display: none; /* WebKit */
    }
}

/* Custom scrollbar for desktop */
@media (min-width: 769px) {
    /* Scrollbar track */
    ::-webkit-scrollbar {
        width: 32px;
        height: 32px;
    }
    
    /* Scrollbar track background */
    ::-webkit-scrollbar-track {
        background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }
    
    /* Scrollbar thumb (the draggable part) */
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
    }
    
    /* Scrollbar thumb on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        transform: scale(1.05);
    }
    
    /* Scrollbar thumb when active/pressed */
    ::-webkit-scrollbar-thumb:active {
        background: linear-gradient(135deg, #4e5bc6 0%, #5e377e 100%);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }
    
    /* Scrollbar corner */
    ::-webkit-scrollbar-corner {
        background: linear-gradient(135deg, #f1f3f4 0%, #e8eaed 100%);
    }
    
    /* Firefox scrollbar styling */
    * {
        scrollbar-width: auto;
        scrollbar-color: #667eea #f1f3f4;
    }
    
    /* Enhanced scrollbar with glow effect */
    ::-webkit-scrollbar-thumb {
        position: relative;
    }
    
    ::-webkit-scrollbar-thumb::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 10px;
        opacity: 0.8;
        filter: blur(2px);
        z-index: -1;
    }
    
    /* Smooth scrolling behavior */
    html {
        scroll-behavior: smooth;
    }
    
    /* Custom scrollbar for specific containers */
    .custom-scroll {
        scrollbar-width: thin;
        scrollbar-color: #667eea #f1f3f4;
    }
    
    .custom-scroll::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    .custom-scroll::-webkit-scrollbar-track {
        background: rgba(241, 243, 244, 0.5);
        border-radius: 6px;
    }
    
    .custom-scroll::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 6px;
        transition: all 0.3s ease;
    }
    
    .custom-scroll::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
    }
}

/* Animation for scrollbar appearance */
@keyframes scrollbarFadeIn {
    from {
        opacity: 0;
        transform: scaleY(0.8);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* Apply animation to scrollbar */
@media (min-width: 769px) {
    ::-webkit-scrollbar-thumb {
        animation: scrollbarFadeIn 0.3s ease-out;
    }
}

/* Dark mode scrollbar */
@media (prefers-color-scheme: dark) and (min-width: 769px) {
    ::-webkit-scrollbar-track {
        background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    }
    
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #4299e1 0%, #805ad5 100%);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #3182ce 0%, #6b46c1 100%);
    }
    
    ::-webkit-scrollbar-corner {
        background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    }
    
    * {
        scrollbar-color: #4299e1 #2d3748;
    }
}