/* css.css - UPDATED CONTENT */

/* Removed conflicting background/color rules to let Tailwind control them */
body {
    font-family: 'Inter', sans-serif;
    /* Keeping this for a graceful transition, as the Tailwind one is on the body */
    transition: background-color 0.5s ease, color 0.5s ease;
}

.container {
    max-width: 960px;
}
.loading-spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#drop-zone.dragover {
    border-color: #3b82f6; /* Tailwind blue-500 */
    background-color: #eff6ff; /* Tailwind blue-50 */
}
/* This specific rule can stay for drop zone dark mode styling */
html.dark #drop-zone.dragover {
    border-color: #60a5fa; /* Tailwind blue-400 */
    background-color: #1e293b; /* Tailwind slate-800 */
}
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* New CSS for Admin Mode */
.admin-select-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to pass through */
}
.admin-checkbox {
    pointer-events: all;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 24px;
    height: 24px;
}
.gallery-item.selected {
    box-shadow: 0 0 0 4px #f56565; /* Tailwind red-500 */
}
				
/* Placeholder Container for Aspect Ratio */
.media-container {
    position: relative;
    overflow: hidden;
    background-color: transparent; /* Changed to transparent to hide bars */
    
    /* Ensure the container width is always 100% of the column */
    display: block; 
    width: 100%; 
}

/* Updated styles for media tags */
.media-container img,
.media-container video {
    display: block; 
    width: 100%;
    height: auto; /* Video determines the final height */

    object-fit: contain; 
    opacity: 0; /* Initial state: transparent */
    transition: opacity 0.5s ease-in-out;
}

/* *** NEW/MODIFIED: The loaded state makes the media visible (opacity: 1) *** */
.media-container.loaded img,
.media-container.loaded video {
    opacity: 1; /* Final state: fully visible */
}

/* Ensure the background of the gallery item handles the space */
.gallery-item {
    /* Set the container background to match your overall dark background */
    background-color: transparent; /* Let the body/gallery background show through */
}

/* === NEW: Responsive Sort/Name Controls === */
@media (max-width: 550px) {
    #gallery-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #gallery-controls {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 1rem; /* 16px */
    }

    /* Make control groups full-width on mobile */
    #gallery-controls > div {
        width: 100%;
    }

    /* Make name input fill space */
    #gallery-controls #user-name-input {
        flex: 1 1 0%; 
    }
}