/*
 * OneLedger scrollbars – one look for the whole app.
 * Load LAST (after child.css / new-style.css / ol-shell.css) so it wins over the older generic rules.
 * Included by: layouts/app, layouts/basic_app, layouts/setup_app, Auth/header.
 *
 * Why the @supports split: Chrome 121+ ignores every ::-webkit-scrollbar rule on an element that has
 * scrollbar-color / scrollbar-width set (child.css sets them on *). So WebKit/Blink browsers get those
 * reset to auto and use the pseudo-elements below; Firefox (no ::-webkit-scrollbar) gets the standard props.
 */
:root {
    --ol-sb-size: 8px;
    --ol-sb-thumb: rgba(0, 76, 109, .28);
    --ol-sb-thumb-hover: rgba(0, 76, 109, .5);
    --ol-sb-thumb-active: #00a6b4;
    --ol-sb-track: transparent;
    /* dark surfaces (sidebar) */
    --ol-sb-thumb-dark: rgba(207, 224, 236, .28);
    --ol-sb-thumb-dark-hover: rgba(207, 224, 236, .5);
}

/* ---------- Chrome / Edge / Safari / Android WebView ---------- */
@supports selector(::-webkit-scrollbar) {
    *, html, body { scrollbar-width: auto; scrollbar-color: auto; }

    ::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .sidebar::-webkit-scrollbar { width: var(--ol-sb-size); height: var(--ol-sb-size); }

    ::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track,
    .sidebar::-webkit-scrollbar-track { background: var(--ol-sb-track); }

    ::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb,
    .sidebar::-webkit-scrollbar-thumb {
        background-color: var(--ol-sb-thumb);
        border-radius: 999px;
        /* transparent border = slim pill with breathing room */
        border: 2px solid transparent;
        background-clip: padding-box;
        min-height: 32px;
    }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--ol-sb-thumb-hover); }
    ::-webkit-scrollbar-thumb:active { background-color: var(--ol-sb-thumb-active); }
    ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

    /* dark sidebar */
    .aside ::-webkit-scrollbar-thumb { background-color: var(--ol-sb-thumb-dark); }
    .aside ::-webkit-scrollbar-thumb:hover { background-color: var(--ol-sb-thumb-dark-hover); }

    /* small inner scroll areas (dropdowns, tables, modals, the More sheet) get a slimmer bar */
    .dropdown-menu::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar,
    .table-responsive::-webkit-scrollbar,
    .ol-sheet-body::-webkit-scrollbar,
    .aside .ol-menu::-webkit-scrollbar { width: 6px; height: 6px; }
}

/* ---------- Firefox ---------- */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--ol-sb-thumb) var(--ol-sb-track); }
    .aside, .aside * { scrollbar-color: var(--ol-sb-thumb-dark) transparent; }
}

/* Phones: overlay-style scrollbars feel native; keep them out of the way */
@media (hover: none) and (pointer: coarse) {
    @supports selector(::-webkit-scrollbar) {
        ::-webkit-scrollbar,
        body::-webkit-scrollbar,
        .ol-sheet-body::-webkit-scrollbar,
        .table-responsive::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-thumb,
        body::-webkit-scrollbar-thumb { border-width: 0; }
    }
}