/* Global Custom Scrollbar Styles */
/* Prevents layout shift when modals open/close */

html {
    scrollbar-gutter: stable;
}

/* WebKit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #dc143c 0%, #8b0000 100%);
    border-radius: 10px;
    border: 1px solid #0a0a0a;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff1744 0%, #c2185b 100%);
    border: 1px solid #111;
}

::-webkit-scrollbar-thumb:active {
    background: #dc143c;
}

/* Remove scrollbar arrow buttons */
::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #dc143c #0a0a0a;
}

/* Ensure modals also have custom scrollbar */
.modal-body::-webkit-scrollbar {
    width: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #dc143c 0%, #8b0000 100%);
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-radius: 10px;
}

.modal-body::-webkit-scrollbar-button {
    display: none;
}

.modal-body {
    scrollbar-width: thin;
    scrollbar-color: #dc143c #0a0a0a;
}