/* Global scrollbar styling for dark mode */
* {
    scrollbar-width: thin;
    scrollbar-color: #ec4899 #1f2937;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #1f2937;
    border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-radius: 5px;
    border: 1px solid #374151;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #f472b6, #a78bfa);
}

/* Scrollbar variant with visible track - use class="scrollbar-pink" */
.scrollbar-pink {
    scrollbar-width: thin;
    scrollbar-color: #ec4899 #151320;
}

.scrollbar-pink::-webkit-scrollbar {
    width: 10px;
}

.scrollbar-pink::-webkit-scrollbar-track {
    background: #151320;
    border-radius: 9999px;
}

.scrollbar-pink::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-radius: 9999px;
    border: 2px solid #151320;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.35);
}

.scrollbar-pink::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #f472b6, #a855f7);
}

/* Scrollbar variant with transparent track - use class="scrollbar-overlay" */
.scrollbar-overlay {
    scrollbar-width: thin;
    scrollbar-color: #ec4899 transparent;
}

.scrollbar-overlay::-webkit-scrollbar {
    width: 8px;
}

.scrollbar-overlay::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-overlay::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-radius: 9999px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
}

.scrollbar-overlay::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #f472b6, #a855f7);
}