/* === Main Stylesheet - Modular Imports === */

/* --- Base Styles --- */
@import url('base/reset.css');
@import url('base/theme.css');
@import url('base/typography.css');
@import url('base/buttons.css');
@import url('base/utils.css');

/* --- Layout Styles --- */
@import url('layout/container.css');
@import url('layout/header.css');
@import url('layout/main_container.css');
@import url('layout/footer.css');

/* --- Component Styles --- */
@import url('components/loading.css');
@import url('components/search.css');
@import url('components/directory_list.css');
@import url('components/image_item.css');
@import url('components/preview_overlay_gallery.css');
@import url('components/modals.css');
@import url('components/zip_jobs_panel.css');
@import url('components/multi_select.css');
@import url('components/video_thumbnail.css');
@import url('components/hero_banner.css');

/* --- View Specific Styles --- */
@import url('views/gallery_view.css');
@import url('views/admin_view.css');
@import url('views/login_view.css');
@import url('views/jet_view.css');

/* --- Library Customizations --- */
@import url('libs/photoswipe_custom.css');

/* Infinite Scroll Spinner Styles */
#load-more-container {
    /* Container is already styled for centering text by uiImageView.js, keep it simple here */
    /* padding: 20px 0; /* Adjust as needed */
}

#load-more-container .loading-spinner {
    display: inline-block; /* Or block if it takes full width */
    padding: 10px 0;
    font-style: italic;
    color: #888; /* Lighter color for the text */
}

/* Optional: Animated spinner using ::after pseudo-element */
#load-more-container .loading-spinner::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(136, 136, 136, 0.3); /* Light grey border (using #888 base) */
    border-radius: 50%;
    border-top-color: #888; /* Spinner accent color */
    animation: spin 1s ease-in-out infinite;
    margin-left: 10px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === Added for Fade-in Animation and UI Smoothness === */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px); /* Optional: slight upward movement */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.list-item-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

#directory-list {
    min-height: 150px; /* Adjust as needed */
}

#search-prompt {
    min-height: 1.5em; /* Adjust based on your font size */
    /* Ensure this is set if you are using visibility:hidden in JS */
    /* visibility: visible; */ /* Default state, JS will toggle to hidden */
}

.loading-placeholder, .error-placeholder {
    padding: 20px;
    text-align: center;
    color: #777;
    opacity: 0.7;
    min-height: 50px; /* Ensure placeholder also contributes to min-height */
    display: flex; /* For centering text vertically if needed */
    align-items: center;
    justify-content: center;
}

/* === Global Loading Overrides (Components handle detailed styling) === */
main.container.user-view {
    position: relative; /* Needed for absolute positioning of #loading-indicator */
}

/* === Homepage Featured Grid Styles === */
.homepage-featured-grid {
    margin-top: 20px;
    min-height: 300px;
}

.homepage-featured-grid.image-group {
    /* Masonry grid styles - reuse same styles as image-item grid */
    column-gap: 16px;
}

.homepage-featured-grid .image-item {
    /* Ensure homepage grid items use same styles as regular album view */
    margin-bottom: 16px;
    break-inside: avoid;
}

.homepage-featured-grid .no-featured-message,
.homepage-featured-grid .error-message {
    text-align: center;
    padding: 40px 20px;
    color: #777;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    margin: 20px 0;
}

.homepage-featured-grid .no-featured-message p,
.homepage-featured-grid .error-message p {
    margin: 0;
    font-size: 1.1em;
}

.homepage-featured-grid .error-message {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* Hide directory list when in homepage mode */
#directory-view.homepage-mode #directory-list {
    display: none;
}

/* Show homepage grid when in homepage mode */
#directory-view.homepage-mode .homepage-featured-grid {
    display: block;
}

/* Hide homepage grid when in search mode */
#directory-view.search-mode .homepage-featured-grid {
    display: none;
}

/* Show directory list when in search mode */
#directory-view.search-mode #directory-list {
    display: block;
}