/**
 * SlimSelect FOUC Prevention Styles
 * 
 * These styles prevent Flash of Unstyled Content (FOUC) when initializing
 * SlimSelect dropdowns. Add 'ss-hide' class to select elements that will
 * be converted to SlimSelect, and they will be smoothly revealed once ready.
 */

/* Hide select elements before SlimSelect initialization */
.ss-hide {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
    pointer-events: none !important;
}

/* Show select elements after SlimSelect initialization */
.ss-show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: fadeInSlimSelect 0.3s ease-in-out;
}

/* Smooth fade-in animation */
@keyframes fadeInSlimSelect {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternative slide-in animation (can be activated with class) */
@keyframes slideInSlimSelect {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ss-show-slide {
    animation: slideInSlimSelect 0.3s ease-out !important;
}

/* Scale animation variant */
@keyframes scaleInSlimSelect {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ss-show-scale {
    animation: scaleInSlimSelect 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Loading skeleton placeholder (optional) */
.ss-loading {
    height: 2.5rem;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmerSlimSelect 1.5s infinite;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
}

@keyframes shimmerSlimSelect {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .ss-loading {
        background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
        background-size: 200% 100%;
        border-color: #4b5563;
    }
}

/* Ensure smooth transition for SlimSelect container */
.ss-main {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Prevent layout shift during initialization */
select.ss-hide + .ss-main {
    min-height: 2.5rem;
}

/* Stagger animation support for multiple selects */
.ss-show[data-stagger="1"] { animation-delay: 0.05s; }
.ss-show[data-stagger="2"] { animation-delay: 0.1s; }
.ss-show[data-stagger="3"] { animation-delay: 0.15s; }
.ss-show[data-stagger="4"] { animation-delay: 0.2s; }
.ss-show[data-stagger="5"] { animation-delay: 0.25s; }

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .ss-hide,
    .ss-show,
    .ss-show-slide,
    .ss-show-scale {
        animation: none !important;
        transition: opacity 0.15s ease !important;
    }
    
    @keyframes fadeInSlimSelect {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* Print styles: Show all selects normally */
@media print {
    .ss-hide {
        opacity: 1 !important;
        visibility: visible !important;
    }
}