/* assets/css/style.css */

/* Custom Scrollbar for list panels and selectors */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.45);
}

/* Base Transition for Theme Switching */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Video Player Overrides */
video::-webkit-media-controls {
    display: none !important;
}

/* Range input styling for the custom volume & progress bar controls */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 9999px;
    cursor: pointer;
    height: 4px;
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #E50914;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    transition: transform 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

/* Skeleton animation for loading states */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, rgba(226, 232, 240, 0.08) 25%, rgba(226, 232, 240, 0.18) 37%, rgba(226, 232, 240, 0.08) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

.light .skeleton {
    background: linear-gradient(90deg, rgba(241, 245, 249, 0.8) 25%, rgba(226, 232, 240, 0.9) 37%, rgba(241, 245, 249, 0.8) 63%);
    background-size: 200% 100%;
}