/* Global purple scrollbar — uses --dash-primary (normal width, not thin) */

:root {
    --dash-primary: #696cff;
    --das-scrollbar-size: 14px;
    --das-scrollbar-track: rgba(67, 89, 113, 0.08);
}

html.dark-style,
html[data-theme="dark"] {
    --das-scrollbar-track: rgba(255, 255, 255, 0.06);
}

html {
    scrollbar-width: auto;
    scrollbar-color: var(--dash-primary) var(--das-scrollbar-track);
}

*,
*::before,
*::after {
    scrollbar-width: auto;
    scrollbar-color: var(--dash-primary) var(--das-scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: var(--das-scrollbar-size) !important;
    height: var(--das-scrollbar-size) !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: var(--das-scrollbar-track) !important;
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: var(--dash-primary) !important;
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: var(--dash-primary) !important;
    filter: brightness(1.08);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Perfect Scrollbar (notifications, sidebar, etc.) — beat theme .menu-light rules */
.ps__rail-y,
.ps__rail-x,
.menu .ps__rail-y,
.menu .ps__rail-x {
    background: transparent !important;
}

.ps__rail-y:hover,
.ps__rail-y:focus,
.ps__rail-y.ps--clicking,
.ps__rail-x:hover,
.ps__rail-x:focus,
.ps__rail-x.ps--clicking {
    background: var(--das-scrollbar-track) !important;
}

.ps__thumb-y,
.ps__thumb-x,
.menu .ps__thumb-y,
.menu .ps__thumb-x,
.menu-light .ps__thumb-y,
.menu-dark .ps__thumb-y,
.layout-menu .ps__thumb-y,
.dropdown-notifications .ps__thumb-y,
.scrollable-container .ps__thumb-y {
    background: var(--dash-primary) !important;
    background-color: var(--dash-primary) !important;
    border-radius: 999px !important;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y,
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x,
.menu .ps__rail-y:hover > .ps__thumb-y,
.menu-light .ps__rail-y:hover > .ps__thumb-y,
.menu-dark .ps__rail-y:hover > .ps__thumb-y {
    background: var(--dash-primary) !important;
    background-color: var(--dash-primary) !important;
    filter: brightness(1.08);
}

.ps__thumb-y,
.menu .ps__thumb-y,
.menu-light .ps__thumb-y,
.menu-dark .ps__thumb-y,
.layout-menu .ps__thumb-y,
.dropdown-notifications .ps__thumb-y,
.scrollable-container .ps__thumb-y {
    width: 10px !important;
    right: 2px !important;
}

.ps__rail-y,
.menu .ps__rail-y {
    width: 14px !important;
}