/* ==========================================================================
   CUSTOM PREMIUM SCROLLBAR STYLING
   Optimised for visual excellence, theme responsiveness, and smooth transitions.
   ========================================================================== */

/* ── GLOBAL SCROLLBARS (html, body, and all scrollable elements) ───────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent; /* Seamlessly blends with any element background */
}

/* Dark Mode Default Thumb */
::-webkit-scrollbar-thumb {
    background-color: rgba(108, 99, 255, 0.35); /* Translucent brand indigo */
    border: 2px solid transparent; /* Elegant transparent gutter */
    background-clip: padding-box; /* Clips color inside transparent border */
    border-radius: 99px;
    transition: background-color 0.22s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(108, 99, 255, 0.75); /* Glowing state on hover */
}

/* Light Mode Custom Thumb */
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background-color: rgba(108, 99, 255, 0.28); /* Solid brand color with soft opacity */
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(108, 99, 255, 0.65);
}


/* ── SPECIFIC SIDEBARS (Dashboard sidebars, filter sidebars, etc.) ─────── */
.app-sidebar::-webkit-scrollbar,
.filter-sidebar::-webkit-scrollbar,
[class*="sidebar"]::-webkit-scrollbar,
[id*="sidebar"]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.app-sidebar::-webkit-scrollbar-track,
.filter-sidebar::-webkit-scrollbar-track,
[class*="sidebar"]::-webkit-scrollbar-track,
[id*="sidebar"]::-webkit-scrollbar-track {
    background: transparent;
}

.app-sidebar::-webkit-scrollbar-thumb,
.filter-sidebar::-webkit-scrollbar-thumb,
[class*="sidebar"]::-webkit-scrollbar-thumb,
[id*="sidebar"]::-webkit-scrollbar-thumb {
    background-color: rgba(108, 99, 255, 0.3);
    border: 1.5px solid transparent;
    background-clip: padding-box;
    border-radius: 99px;
    transition: background-color 0.22s ease-in-out;
}

.app-sidebar::-webkit-scrollbar-thumb:hover,
.filter-sidebar::-webkit-scrollbar-thumb:hover,
[class*="sidebar"]::-webkit-scrollbar-thumb:hover,
[id*="sidebar"]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(108, 99, 255, 0.7);
}

[data-theme="light"] .app-sidebar::-webkit-scrollbar-thumb,
[data-theme="light"] .filter-sidebar::-webkit-scrollbar-thumb,
[data-theme="light"] [class*="sidebar"]::-webkit-scrollbar-thumb,
[data-theme="light"] [id*="sidebar"]::-webkit-scrollbar-thumb {
    background-color: rgba(108, 99, 255, 0.25);
}

[data-theme="light"] .app-sidebar::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .filter-sidebar::-webkit-scrollbar-thumb:hover,
[data-theme="light"] [class*="sidebar"]::-webkit-scrollbar-thumb:hover,
[data-theme="light"] [id*="sidebar"]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(108, 99, 255, 0.6);
}


/* ── FIREFOX COMPATIBILITY ────────────────────────────────────────────── */
html,
.app-sidebar,
.filter-sidebar,
[class*="sidebar"],
[id*="sidebar"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 99, 255, 0.35) transparent;
}

[data-theme="light"] html,
[data-theme="light"] .app-sidebar,
[data-theme="light"] .filter-sidebar,
[data-theme="light"] [class*="sidebar"],
[data-theme="light"] [id*="sidebar"] {
    scrollbar-color: rgba(108, 99, 255, 0.28) transparent;
}