/* Rabta — unified scrollbars (pages + modals, light & dark) */

:root {
    --rabta-scroll-size: 7px;
    --rabta-scroll-track: rgba(10, 117, 173, 0.07);
    --rabta-scroll-thumb: rgba(10, 117, 173, 0.32);
    --rabta-scroll-thumb-hover: rgba(10, 117, 173, 0.52);
    --rabta-scroll-thumb-active: rgba(10, 117, 173, 0.68);
}

[data-app-theme="dark"] {
    --rabta-scroll-track: rgba(15, 35, 58, 0.85);
    --rabta-scroll-thumb: rgba(0, 229, 212, 0.22);
    --rabta-scroll-thumb-hover: rgba(0, 229, 212, 0.38);
    --rabta-scroll-thumb-active: rgba(0, 229, 212, 0.52);
}

html,
body,
.page,
.main,
.content,
.tw-page-content,
.sidebar,
.tw-sidebar-nav,
.blazored-modal,
.blazored-modal-content,
.rabta-modal-body,
.rabta-modal-shell,
.rabta-table-panel,
.rabta-table-panel.table-responsive,
.rabta-invoice-side-panel,
.rabta-page-toolbar-filters,
.rabta-cards-grid,
.tw-notifications-dropdown,
.table-responsive,
#PrintDiv {
    scrollbar-width: thin;
    scrollbar-color: var(--rabta-scroll-thumb) var(--rabta-scroll-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.page::-webkit-scrollbar,
.main::-webkit-scrollbar,
.content::-webkit-scrollbar,
.tw-page-content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.tw-sidebar-nav::-webkit-scrollbar,
.blazored-modal::-webkit-scrollbar,
.blazored-modal-content::-webkit-scrollbar,
.rabta-modal-body::-webkit-scrollbar,
.rabta-modal-shell::-webkit-scrollbar,
.rabta-table-panel::-webkit-scrollbar,
.rabta-invoice-side-panel::-webkit-scrollbar,
.rabta-page-toolbar-filters::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
#PrintDiv::-webkit-scrollbar {
    width: var(--rabta-scroll-size);
    height: var(--rabta-scroll-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.page::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.tw-page-content::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.tw-sidebar-nav::-webkit-scrollbar-track,
.blazored-modal::-webkit-scrollbar-track,
.blazored-modal-content::-webkit-scrollbar-track,
.rabta-modal-body::-webkit-scrollbar-track,
.rabta-modal-shell::-webkit-scrollbar-track,
.rabta-table-panel::-webkit-scrollbar-track,
.rabta-invoice-side-panel::-webkit-scrollbar-track,
.rabta-page-toolbar-filters::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
#PrintDiv::-webkit-scrollbar-track {
    background: var(--rabta-scroll-track);
    border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.page::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.tw-page-content::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.tw-sidebar-nav::-webkit-scrollbar-thumb,
.blazored-modal::-webkit-scrollbar-thumb,
.blazored-modal-content::-webkit-scrollbar-thumb,
.rabta-modal-body::-webkit-scrollbar-thumb,
.rabta-modal-shell::-webkit-scrollbar-thumb,
.rabta-table-panel::-webkit-scrollbar-thumb,
.rabta-invoice-side-panel::-webkit-scrollbar-thumb,
.rabta-page-toolbar-filters::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
#PrintDiv::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--rabta-scroll-thumb), var(--rabta-scroll-thumb-hover));
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
    min-height: 28px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover,
.tw-page-content::-webkit-scrollbar-thumb:hover,
.rabta-modal-body::-webkit-scrollbar-thumb:hover,
.rabta-table-panel::-webkit-scrollbar-thumb:hover,
.blazored-modal::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--rabta-scroll-thumb-hover);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
.rabta-modal-body::-webkit-scrollbar-thumb:active,
.rabta-table-panel::-webkit-scrollbar-thumb:active {
    background: var(--rabta-scroll-thumb-active);
}

html::-webkit-scrollbar-corner,
.rabta-modal-body::-webkit-scrollbar-corner,
.rabta-table-panel::-webkit-scrollbar-corner {
    background: var(--rabta-scroll-track);
}