/* App-wide stylish scrollbars (Chrome, Edge, Safari, Firefox) */

:root {
    --ei-scroll-size: 10px;
    --ei-scroll-track: #e8ecf1;
    --ei-scroll-track-border: #d5dce6;
    --ei-scroll-thumb: #5b9bd5;
    --ei-scroll-thumb-hover: #3985d2;
    --ei-scroll-thumb-active: #2a6fb8;
    --ei-scroll-corner: #e8ecf1;
}

html[data-ei-theme="dark"] {
    --ei-scroll-track: #1e2228;
    --ei-scroll-track-border: #2d323a;
    --ei-scroll-thumb: #4a5568;
    --ei-scroll-thumb-hover: #4b91ea;
    --ei-scroll-thumb-active: #3a7fd4;
    --ei-scroll-corner: #1e2228;
}

/* Firefox */
html,
body,
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ei-scroll-thumb) var(--ei-scroll-track);
}

/* WebKit (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
    width: var(--ei-scroll-size);
    height: var(--ei-scroll-size);
}

*::-webkit-scrollbar-track {
    background: var(--ei-scroll-track);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--ei-scroll-track-border);
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--ei-scroll-thumb-hover) 0%, var(--ei-scroll-thumb) 100%);
    border-radius: 999px;
    border: 2px solid var(--ei-scroll-track);
    min-height: 40px;
    min-width: 40px;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--ei-scroll-thumb-active) 0%, var(--ei-scroll-thumb-hover) 100%);
    border-color: var(--ei-scroll-track-border);
}

*::-webkit-scrollbar-thumb:active {
    background: var(--ei-scroll-thumb-active);
}

*::-webkit-scrollbar-corner {
    background: var(--ei-scroll-corner);
}

/* Primary scroll regions — slightly wider for easier grab */
html,
body,
.sidebar,
.main-sidebar .sidebar,
.content-wrapper,
.modal-body,
.select2-results__options,
.dataTables_scrollBody,
.table-responsive,
.card-body,
.dropdown-menu,
.control-sidebar,
.nav-sidebar,
textarea,
.html-print-preview-modal .modal-body.html-print-modal-zoom-body,
.os-viewport,
.os-content {
    scrollbar-width: thin;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.content-wrapper::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.select2-results__options::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Hide scrollbar track line on very small areas but keep scroll */
.ei-scroll-thin {
    scrollbar-width: thin;
}