/* ============================================
   Custom Dark Scrollbar Styling
   ============================================ */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(71, 85, 105, 0.5) transparent;
}

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.5);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(100, 116, 139, 0.7);
        border: 2px solid transparent;
        background-clip: padding-box;
    }

    ::-webkit-scrollbar-thumb:active {
        background: rgba(6, 182, 212, 0.6);
        border: 2px solid transparent;
        background-clip: padding-box;
    }

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

/* ============================================
   Thin variant for modals and smaller containers
   ============================================ */

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
}

/* ============================================
   Auto-hide scrollbar (shows on hover/scroll)
   ============================================ */

.scrollbar-auto {
    scrollbar-width: thin;
}

    .scrollbar-auto::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .scrollbar-auto::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px;
        transition: background 0.2s ease;
    }

    .scrollbar-auto:hover::-webkit-scrollbar-thumb {
        background: rgba(71, 85, 105, 0.5);
    }

        .scrollbar-auto:hover::-webkit-scrollbar-thumb:hover {
            background: rgba(100, 116, 139, 0.7);
        }

/* ============================================
   Gutter variant (always visible track)
   ============================================ */

.scrollbar-gutter::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
    margin: 4px 0;
}

/* ============================================
   Accent variant (cyan highlight)
   ============================================ */

.scrollbar-accent::-webkit-scrollbar-thumb {
    background: rgba(6, 182, 212, 0.3);
}

    .scrollbar-accent::-webkit-scrollbar-thumb:hover {
        background: rgba(6, 182, 212, 0.5);
    }

    .scrollbar-accent::-webkit-scrollbar-thumb:active {
        background: rgba(6, 182, 212, 0.7);
    }

/* ============================================
   Hide scrollbar but keep functionality
   ============================================ */

.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .scrollbar-none::-webkit-scrollbar {
        display: none;
    }