/* ==========================================================================
   App-wide scrollbars
   --------------------------------------------------------------------------
   Thin, rounded scrollbars in the theme's primary colour (--bs-primary-rgb,
   which the template customizer sets), for native scroll areas - page body,
   DevExpress grids, modals, dropdowns - and for the perfect-scrollbar rails
   the template uses in the sidebar menu.

   Pages can override the --app-scrollbar-* variables; the login pages use
   gold (assets/MyCss/login.css).
   ========================================================================== */

:root {
    --app-scrollbar-size: 10px;
    --app-scrollbar-track: transparent;
    --app-scrollbar-thumb: rgba(var(--bs-primary-rgb, 13, 147, 148), .45);
    --app-scrollbar-thumb-hover: rgba(var(--bs-primary-rgb, 13, 147, 148), .8);
}

/* ---- Chromium, Edge, Safari ---------------------------------------------- */
::-webkit-scrollbar {
    width: var(--app-scrollbar-size);
    height: var(--app-scrollbar-size);
}

::-webkit-scrollbar-track {
    background: var(--app-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--app-scrollbar-thumb);
    border-radius: 999px;
    /* Transparent border + padding-box clip = a slim pill that floats in the track. */
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--app-scrollbar-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--app-scrollbar-thumb-hover);
    border-width: 1px;
}

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

/* ---- Firefox --------------------------------------------------------------
   Only where ::-webkit-scrollbar is unsupported: in current Chromium the
   standard properties would override the styled scrollbar above. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
    }
}

/* ---- Template sidebar (perfect-scrollbar) -------------------------------- */
.ps__rail-x,
.ps__rail-y {
    background-color: transparent !important;
}

.ps__thumb-x,
.ps__thumb-y {
    background-color: var(--app-scrollbar-thumb) !important;
    border-radius: 999px !important;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x,
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: var(--app-scrollbar-thumb-hover) !important;
}