/* --- Base Styles & Font --- */
body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* --- Theme Colors --- */
/* Light Theme */
.light {
    --bg-color: #F9FAFB; /* gray-50 */
    --text-color: #111827; /* gray-900 */
    --text-strong-color: #111827; /* black */
    --card-bg: #FFFFFF;
    --border-color: #E5E7EB; /* gray-200 */
    --input-bg: #FFFFFF;
    --input-border: #D1D5DB; /* gray-300 */
    --text-secondary: #6B7280; /* gray-500 */
    --slideshow-bg: rgba(255, 255, 255, 0.95);
    --slideshow-text: #111827;
    --footer-link: #4B5563;
    --footer-link-hover: #3B82F6;
    --logo-accent-color: #374151; /* Dark gray for light theme */
    --radio-card-bg: #E5E7EB;
    --radio-checked-bg: #FFFFFF;
    --radio-checked-text: #3B82F6;
}
/* Dark Theme */
.dark {
    --bg-color: #111827; /* gray-900 */
    --text-color: #F3F4F6; /* gray-100 */
    --text-strong-color: #F3F4F6; /* white */
    --card-bg: #1F2937; /* gray-800 */
    --border-color: #374151; /* gray-700 */
    --input-bg: #374151; /* gray-700 */
    --input-border: #4B5563; /* gray-600 */
    --text-secondary: #9CA3AF; /* gray-400 */
    --slideshow-bg: rgba(10, 10, 10, 0.95);
    --slideshow-text: #F3F4F6;
    --footer-link: #9CA3AF;
    --footer-link-hover: #60A5FA;
    --logo-accent-color: #FFFFFF; /* White for dark theme */
    --radio-card-bg: #111827;
    --radio-checked-bg: #374151;
    --radio-checked-text: #60A5FA;
}

/* --- Applying Theme Variables --- */
body { background-color: var(--bg-color); color: var(--text-color); }
.theme-card, .page-content { background-color: var(--card-bg); border: 1px solid var(--border-color); }
.theme-input { background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-color); }
.theme-input::placeholder { color: var(--text-secondary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-text-strong { color: var(--text-strong-color); }
.theme-border { border-color: var(--border-color); }
.footer-link { color: var(--footer-link); }
.footer-link:hover, .footer-link.active { color: var(--footer-link-hover); }
.logo-accent { fill: var(--logo-accent-color); }

/* --- Custom Styles --- */
.drag-over { border-color: #3B82F6; background-color: rgba(59, 130, 246, 0.1); }
.card-selected { border-color: #3B82F6 !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.page-content a { color: #3B82F6; text-decoration: underline; }

/* --- Data Type Radio Switcher --- */
.data-type-switcher { background-color: var(--radio-card-bg); }
.data-type-switcher input[type="radio"] { display: none; }
.data-type-switcher label { transition: all 0.2s ease-in-out; }
.data-type-switcher input[type="radio"]:checked + label {
    background-image: linear-gradient(to right, #3B82F6, #22D3EE);
    color: #FFFFFF;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
    transform: scale(1.05);
}

/* --- NEW Upload Mode Switcher --- */
.data-upload-switcher { background-color: var(--radio-card-bg); }
.data-upload-switcher input[type="radio"] { display: none; }
.data-upload-switcher label { transition: all 0.2s ease-in-out; }
.data-upload-switcher input[type="radio"]:checked + label {
    background-color: #3B82F6;
    color: #FFFFFF;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
}

/* --- Progress Bar --- */
#uploadProgressBarContainer { background-color: var(--input-bg); border: 1px solid var(--input-border); }
#uploadProgressBar { transition: width 0.3s ease-in-out; }

/* --- Compression Slider --- */
#compressionQuality.video-compression-slider {
    background: linear-gradient(to right, #ef4444 0%, #f97316 30%, #eab308 60%, #22c55e 100%);
}


/* Fullscreen Panel Style */
.panel-fullscreen { position: fixed !important; top: 0; left: 0; width: 100vw !important; height: 100vh !important; z-index: 1000; margin: 0 !important; padding: 2rem !important; overflow-y: auto; display: flex; flex-direction: column; }
body.fullscreen-active { overflow: hidden; }

/* Group Card Stack Effect */
.group-card .group-image-stack { position: relative; width: 100%; padding-top: 56.25%; }
.group-card .group-image-stack img, .group-card .group-image-stack .file-icon-placeholder, .group-card .group-image-stack .video-thumbnail-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0.375rem; border: 2px solid var(--card-bg); transition: transform 0.2s ease-in-out; }
.group-card .group-image-stack > *:nth-child(1) { z-index: 3; }
.group-card .group-image-stack > *:nth-child(2) { transform: rotate(-5deg) scale(0.95); z-index: 2; }
.group-card .group-image-stack > *:nth-child(3) { transform: rotate(5deg) scale(0.9); z-index: 1; }
.group-card:hover .group-image-stack > *:nth-child(1) { transform: translateY(-10px) scale(1.05); z-index: 4; }
.group-card:hover .group-image-stack > *:nth-child(2) { transform: translateX(-10px) rotate(-8deg) scale(0.95); }
.group-card:hover .group-image-stack > *:nth-child(3) { transform: translateX(10px) rotate(8deg) scale(0.9); }
.file-icon-placeholder, .video-thumbnail-container { display: flex; align-items: center; justify-content: center; background-color: var(--input-bg); }
.video-thumbnail-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- UPDATED Collage Maker Styles --- */
#collageCanvas {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: grid; /* Use CSS Grid for layout */
    /* gap, background, padding, and borderRadius are set by JS */
}
.collage-slot {
    position: relative; /* Changed from absolute */
    box-sizing: border-box;
    overflow: hidden; /* Added to contain media-wrapper */
    /* borderRadius is set by JS */
}
.media-wrapper {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* borderRadius is set by JS */
}
.collage-slot img, .collage-slot video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.collage-template-btn.active {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* Crop & Enhance Styles */
#cropEnhancePreviewContainer { max-height: 60vh; }
#cropEnhanceImage { max-width: 100%; }
.cropper-container { margin: 0 auto; }

/* Mobile-specific Fullscreen Adjustments */
@media (max-width: 768px) {
    .panel-fullscreen { padding: 1rem !important; }
    .panel-fullscreen h2 { font-size: 1.5rem; }
    .panel-fullscreen h3 { font-size: 1.25rem; }
    .panel-fullscreen p, .panel-fullscreen label, .panel-fullscreen span, .panel-fullscreen li { font-size: 1rem; }
    .panel-fullscreen .theme-input, .panel-fullscreen select { font-size: 1rem; padding: 0.75rem; }
    .panel-fullscreen button { font-size: 1rem; padding: 0.75rem 1rem; }
    .panel-fullscreen .text-xs { font-size: 0.875rem; }
}