/* ===================================
   Candlestick Scrollbar — uses design tokens
   =================================== */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #10B981 var(--bg-app, #080808);
}

/* WebKit — Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-corner {
    background: var(--bg-app, #080808);
}

::-webkit-scrollbar-track {
    background: var(--bg-app, #080808);
    border-left: 1px solid var(--border, rgba(255,255,255,0.06));
}

::-webkit-scrollbar-track:horizontal {
    border-left: none;
    border-top: 1px solid var(--border, rgba(255,255,255,0.06));
}

/* --- Vertical thumb: green candle (wick + body) --- */
::-webkit-scrollbar-thumb:vertical {
    background:
        linear-gradient(#10B981, #10B981)
            center / 2px 100% no-repeat,
        linear-gradient(to bottom, #10B981 0%, #0d9668 100%)
            center / 10px 60% no-repeat;
    border-radius: 1px;
}

::-webkit-scrollbar-thumb:vertical:hover {
    background:
        linear-gradient(#EF4444, #EF4444)
            center / 2px 100% no-repeat,
        linear-gradient(to bottom, #EF4444 0%, #b91c1c 100%)
            center / 10px 60% no-repeat;
}

::-webkit-scrollbar-thumb:vertical:active {
    background:
        linear-gradient(#F87171, #F87171)
            center / 2px 100% no-repeat,
        linear-gradient(to bottom, #F87171 0%, #c62828 100%)
            center / 10px 60% no-repeat;
}

/* --- Horizontal thumb --- */
::-webkit-scrollbar-thumb:horizontal {
    background:
        linear-gradient(#10B981, #10B981)
            center / 100% 2px no-repeat,
        linear-gradient(to right, #10B981 0%, #0d9668 100%)
            center / 60% 10px no-repeat;
    border-radius: 1px;
}

::-webkit-scrollbar-thumb:horizontal:hover {
    background:
        linear-gradient(#EF4444, #EF4444)
            center / 100% 2px no-repeat,
        linear-gradient(to right, #EF4444 0%, #b91c1c 100%)
            center / 60% 10px no-repeat;
}

::-webkit-scrollbar-thumb:horizontal:active {
    background:
        linear-gradient(#F87171, #F87171)
            center / 100% 2px no-repeat,
        linear-gradient(to right, #F87171 0%, #c62828 100%)
            center / 60% 10px no-repeat;
}