/* Shared Startup accent only: keep Moodle's native scrolling and page layout. */
:root {
    --startup-scrollbar-thumb: #007f89;
    --startup-scrollbar-thumb-active: #005e66;
    --startup-scrollbar-track: #edf7f6;
}

/* Standard properties cover Firefox and current Chromium/Safari scroll areas.
   These two narrowly scoped overrides beat Boost's gray drawer/report rules and
   older source tabs that hide their scrollbar, without changing overflow. */
html,
body,
body *,
body .p-detail-tabs,
body .pd-tabs {
    scrollbar-width: thin !important;
    scrollbar-color: var(--startup-scrollbar-current-thumb, var(--p-teal, var(--startup-scrollbar-thumb))) var(--startup-scrollbar-track) !important;
}

/* Native scrollbar hover feedback remains browser-owned. Also emphasize the
   active scrolling panel and keyboard-focused descendants without hiding or
   replacing the original focus indicator. */
html:focus-within,
body :where(.workspace-sidebar, .drawer, .drawercontent, .modal, .modal-body,
    dialog, .op-modal, .table-scroll, .op-table-wrap, textarea):hover,
body :focus-visible,
body :focus-within {
    --startup-scrollbar-current-thumb: var(--startup-scrollbar-thumb-active);
}

/* Older Safari/Chromium need the native WebKit pseudo-elements. In engines
   supporting standard colors, leave geometry and hover behavior to the UA. */
@supports not (scrollbar-color: auto) {
    html,
    body,
    body *,
    body .p-detail-tabs,
    body .pd-tabs {
        scrollbar-width: auto !important;
    }

    ::-webkit-scrollbar {
        width: 10px !important;
        height: 10px !important;
    }

    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
        background-color: var(--startup-scrollbar-track) !important;
        border: 0 !important;
    }

    ::-webkit-scrollbar-thumb {
        min-height: 32px;
        min-width: 32px;
        border: 2px solid var(--startup-scrollbar-track) !important;
        border-radius: 10px !important;
        background-color: var(--startup-scrollbar-current-thumb, var(--p-teal, var(--startup-scrollbar-thumb))) !important;
        background-clip: padding-box;
    }

    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active,
    :focus-visible::-webkit-scrollbar-thumb,
    :focus-within::-webkit-scrollbar-thumb {
        background-color: var(--startup-scrollbar-thumb-active) !important;
    }
}

/* Respect high-contrast/system accessibility settings, including restoring the
   native width on compact tabs. Do not force brand colors in this mode. */
@media (forced-colors: active) {
    html,
    body,
    body *,
    body .p-detail-tabs,
    body .pd-tabs {
        scrollbar-color: auto !important;
        scrollbar-width: auto !important;
    }

    ::-webkit-scrollbar {
        width: auto !important;
        height: auto !important;
    }

    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner,
    ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active,
    :focus-visible::-webkit-scrollbar-thumb,
    :focus-within::-webkit-scrollbar-thumb {
        background-color: revert !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
}