/* =============================================================================
   app-scrollbar.css  —  wwwroot/appcss/common/

   One slim scrollbar for the whole application, replacing the browser default
   everywhere it appears: the page, modals, tables, dropdowns, the sidebar and
   any panel that scrolls.

   Loaded LAST in the head so it wins over the theme's own rules.
   ============================================================================= */


/* ============================================================
   TOKENS
   Kept as variables so the size or colour changes in one place,
   and so dark mode is a single override rather than a rewrite.
   ============================================================ */

:root {
    /* Track width. The thumb is narrower than this — see the inset below. */
    --erp-sb-size: 10px;

    /* Slate grey rather than a theme colour: a scrollbar should be furniture,
       not something that competes with the content it sits beside. */
    --erp-sb-thumb: rgba(100, 116, 139, .38);
    --erp-sb-thumb-hover: rgba(100, 116, 139, .62);
}

[data-bs-theme="dark"] {
    --erp-sb-thumb: rgba(255, 255, 255, .22);
    --erp-sb-thumb-hover: rgba(255, 255, 255, .42);
}


/* ============================================================
   FIREFOX
   Only two properties exist here, and they must sit on the
   element that scrolls — hence the universal selector.
   ============================================================ */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--erp-sb-thumb) transparent;
}


/* ============================================================
   CHROME / EDGE / SAFARI
   ============================================================ */

*::-webkit-scrollbar {
    width: var(--erp-sb-size);
    height: var(--erp-sb-size);
}

/* No track and no buttons — the thumb alone is enough to say "this scrolls". */
*::-webkit-scrollbar-track {
    background: transparent;
}

/* The transparent border plus content-box clipping is what makes the thumb
   sit inset inside its track, so it reads as a slim pill rather than a bar
   wedged against the edge. */
*::-webkit-scrollbar-thumb {
    background-color: var(--erp-sb-thumb);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 100px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--erp-sb-thumb-hover);
}

/* Where a vertical and a horizontal bar meet. */
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Chrome draws arrow buttons on some platforms; they belong to the old look. */
*::-webkit-scrollbar-button {
    display: none;
}


/* ============================================================
   SIMPLEBAR  (sidebar, and anything else the theme wraps)
   SimpleBar hides the native bar and draws its own, so it needs
   matching separately or the sidebar keeps the old style.
   ============================================================ */

.simplebar-track.simplebar-vertical {
    width: var(--erp-sb-size);
}

.simplebar-track.simplebar-horizontal {
    height: var(--erp-sb-size);
}

.simplebar-scrollbar::before {
    background-color: var(--erp-sb-thumb);
    border-radius: 100px;
}

.simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
}

.simplebar-track:hover .simplebar-scrollbar::before {
    background-color: var(--erp-sb-thumb-hover);
}