/**
 * Barex scrollbar — unified Chrome + Firefox sizing.
 * Load after barex-theme-tokens.css and app CSS so overrides win.
 * Chrome ignores scrollbar-width when ::-webkit-scrollbar is set; keep both in sync via --barex-scrollbar-size.
 */

*,
*::before,
*::after {
    scrollbar-width: thin;
    scrollbar-color: var(--barex-scrollbar-thumb) var(--barex-scrollbar-track);
}

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

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

*::-webkit-scrollbar-thumb {
    background-color: var(--barex-scrollbar-thumb);
    border-radius: 999px;
    border: none;
}

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

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

/**
 * Page scrollbar on the left (RTL).
 * Chrome always draws the viewport scrollbar on the right, even for dir="rtl",
 * so the page scroll is moved onto <body>, which does honor direction at every
 * viewport width.
 */
html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.wrapper {
    height: auto;
    min-height: 100%;
}

/* Intentional hide — keep both engines covered */
.barex-scrollbar-none,
.barex-filter-fields,
.barex-mobile-chips {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.barex-scrollbar-none::-webkit-scrollbar,
.barex-filter-fields::-webkit-scrollbar,
.barex-mobile-chips::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Override legacy theme widths (5px / 12px / 4px) */
.custom-scroll,
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--barex-scrollbar-thumb) var(--barex-scrollbar-track);
}

.custom-scroll::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
    -webkit-appearance: none;
    width: var(--barex-scrollbar-size);
    height: var(--barex-scrollbar-size);
}

.custom-scroll::-webkit-scrollbar:vertical,
.custom-scrollbar::-webkit-scrollbar:vertical {
    width: var(--barex-scrollbar-size);
}

.custom-scroll::-webkit-scrollbar:horizontal,
.custom-scrollbar::-webkit-scrollbar:horizontal {
    height: var(--barex-scrollbar-size);
}

.custom-scroll::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--barex-scrollbar-thumb);
    border-radius: 999px;
    border: none;
}

.custom-scroll::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
    background-color: var(--barex-scrollbar-track);
    border-radius: 999px;
}

.custom-scroll::-webkit-scrollbar-corner,
.custom-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
}

.choices__list--dropdown .choices__list,
.choices__list {
    scrollbar-width: thin;
    scrollbar-color: var(--barex-scrollbar-thumb) var(--barex-scrollbar-track);
}

.choices__list--dropdown .choices__list::-webkit-scrollbar,
.choices__list::-webkit-scrollbar {
    -webkit-appearance: none;
    width: var(--barex-scrollbar-size);
    height: var(--barex-scrollbar-size);
}

.choices__list--dropdown .choices__list::-webkit-scrollbar:vertical,
.choices__list::-webkit-scrollbar:vertical {
    width: var(--barex-scrollbar-size);
    margin-right: 0;
    margin-left: 0;
}

.choices__list--dropdown .choices__list::-webkit-scrollbar:horizontal,
.choices__list::-webkit-scrollbar:horizontal {
    height: var(--barex-scrollbar-size);
}

.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb,
.choices__list::-webkit-scrollbar-thumb {
    background-color: var(--barex-scrollbar-thumb);
    border-radius: 999px;
    border: none;
}

.choices__list--dropdown .choices__list::-webkit-scrollbar-track,
.choices__list::-webkit-scrollbar-track {
    background-color: var(--barex-scrollbar-track);
    border-radius: 999px;
}

/**
 * Overlay reveal — Windows-style: thumb hidden until mouse/scroll activity.
 * Toggled by barex-overlay-scrollbar.js via class on <html>.
 * Track stays transparent so the thumb overlays content without shifting layout.
 */
html:not(.barex-scroll-reveal) *,
html:not(.barex-scroll-reveal) *::before,
html:not(.barex-scroll-reveal) *::after {
    scrollbar-color: transparent var(--barex-scrollbar-track);
}

html.barex-scroll-reveal *,
html.barex-scroll-reveal *::before,
html.barex-scroll-reveal *::after {
    scrollbar-color: var(--barex-scrollbar-thumb) var(--barex-scrollbar-track);
}

html:not(.barex-scroll-reveal) *::-webkit-scrollbar-thumb {
    background-color: transparent;
}

html.barex-scroll-reveal *::-webkit-scrollbar-thumb {
    background-color: var(--barex-scrollbar-thumb);
}

html.barex-scroll-reveal *::-webkit-scrollbar-thumb:hover {
    background-color: var(--barex-scrollbar-thumb-hover);
}

/**
 * Per-container overlay reveal — BarexTable, card list scroll areas, etc.
 * Native scrollbar is always hidden; barex-overlay-scrollbar.js paints a floating
 * thumb (barex-os-bar) on top of content — zero layout gutter.
 */
.barex-overlay-scroll {
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.barex-overlay-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.barex-os-bar {
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.barex-overlay-scroll.barex-scroll-reveal .barex-os-bar {
    opacity: 1;
}

.barex-os-bar--y {
    bottom: 2px;
    inset-inline-end: 2px;
    top: 2px;
    width: var(--barex-scrollbar-size);
}

.barex-os-bar--x {
    bottom: 2px;
    height: var(--barex-scrollbar-size);
    inset-inline-end: 2px;
    inset-inline-start: 2px;
}

.barex-os-bar__thumb {
    background: var(--barex-scrollbar-thumb);
    border-radius: 999px;
    position: absolute;
}

.barex-overlay-scroll.barex-scroll-reveal .barex-os-bar__thumb:hover {
    background: var(--barex-scrollbar-thumb-hover);
}

.barex-os-bar--y .barex-os-bar__thumb {
    inset-inline: 0;
    min-height: 24px;
    top: 0;
    will-change: transform;
}

.barex-os-bar--x .barex-os-bar__thumb {
    inset-block: 0;
    left: 0;
    min-width: 24px;
    will-change: transform;
}