/* ==========================================================================
   Modern Custom Scrollbar & Smooth Scroll Styles
   ========================================================================== */

/* Smooth scrolling baseline */
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #51B5FB rgba(226, 232, 240, 0.6);
}

/* WebKit Custom Scrollbar (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.7);
    border-radius: 10px;
    margin: 2px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #51B5FB 0%, #51B5FB 100%);
    border-radius: 10px;
    border: 2px solid rgba(241, 245, 249, 0.7);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5b4bc4 0%, #1d4ed8 100%);
    box-shadow: 0 0 8px rgba(108, 92, 231, 0.5);
}

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

/* Dark mode / dark section fallback for scrollbar track */
[data-theme="dark"] ::-webkit-scrollbar-track,
.dark-theme ::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.8);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
.dark-theme ::-webkit-scrollbar-thumb {
    border-color: rgba(15, 23, 42, 0.8);
}