:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --accent: #D4AF37;
    /* Premium Gold */
    --accent-hover: #F2D06B;
    --gap: 16px;
    --modal-bg: rgba(0, 0, 0, 0.95);
    --folder-card-hover: #2a2a2a;
}

/* Category Card (Admin Page) */
.folder-card.is-category {
    border: 1px solid rgba(212, 175, 55, 0.2);
    /* Subtle Gold Border */
    background: linear-gradient(135deg, #1f1f1f, #181818);
    min-height: 180px;
    /* Taller */
}

.folder-card.is-category:hover {
    border-color: var(--accent);
    background: linear-gradient(135deg, #252525, #1e1e1e);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.folder-card.is-category .folder-icon svg {
    width: 60px;
    /* Bigger Icon */
    height: 60px;
    color: var(--accent);
    /* Gold Icon */
    opacity: 0.8;
}

.folder-card.is-category .folder-name {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
    font-weight: 600;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

header {
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.95) 0%, rgba(18, 18, 18, 0) 100%);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(5px);
}

.brand-container {
    display: inline-block;
}

.brand-title {
    font-weight: 700;
    letter-spacing: 4px;
    margin: 0;
    font-size: 2.2rem;
    text-transform: uppercase;
    /* Gold Gradient */
    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 2px 10px rgba(212, 175, 55, 0.2);
}

.brand-subtitle {
    font-weight: 300;
    letter-spacing: 8px;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #888;
    margin-top: 5px;
    border-top: 1px solid #333;
    padding-top: 5px;
}

/* Page Titles */
.page-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
}

.client-header {
    display: flex;
    flex-direction: column;
}

.client-header-date {
    font-size: 0.9rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
    font-weight: 600;
}

.client-header-name {
    font-size: 2rem;
    font-weight: 300;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.client-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 5px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Header Photo Count (Next to Download) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-photo-count {
    color: var(--text-secondary);
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.regular-title {
    font-size: 1.5rem;
    color: var(--accent);
    border-left: 4px solid var(--accent);
    padding-left: 15px;
    margin: 0;
}

h1 {
    display: none;
}

/* Hide old H1 */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* --- Action / Nav --- */
.action-nav {
    padding: 20px 0;
    display: flex;
    justify-content: flex-end;
    /* right aligned */
    gap: 10px;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #000;
    font-weight: 600;
    padding: 12px 24px;
    background-color: var(--accent);
    border-radius: 30px;
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(187, 134, 252, 0.3);
    cursor: pointer;
}

.download-btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(187, 134, 252, 0.5);
}

/* --- Gallery Grid (Photos) --- */
.gallery-grid {
    display: grid;
    /* Desktop: 5 Columns */
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap);
    margin-bottom: 50px;
}

.gallery-item {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--card-bg);
    /* Flex to center the spinner */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Spinner for individual image loading */
.gallery-item::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 0;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.gallery-item img {
    position: absolute;
    /* Stack on top of spinner */
    top: 0;
    left: 0;
    z-index: 1;
    /* Cover spinner when loaded */
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    opacity: 0;
    /* Lazy load start */
    background-color: var(--card-bg);
    /* Opaque background to hide spinner once opacity=1, but lazy starts at 0 */
}

/* When loaded, opacity becomes 1, effectively hiding the spinner behind (or we can hide spinner via sibling selector if specific enough, but stacking is easier) 
   Actually, if opacity is 1, the img BG will cover. */

.gallery-item img.loaded {
    opacity: 1;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* --- Client List View (Vertical List) --- */
.client-list-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto 50px auto;
}

.client-list-view .folder-card.is-client {
    display: flex;
    flex-direction: row;
    /* Horizontal Layout */
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 20px 24px;
    min-height: auto;
    /* Remove grid height constraint */
    aspect-ratio: auto;
    background: linear-gradient(to right, #222, #1a1a1a);
    border-left: 4px solid var(--accent);
}

.client-list-view .folder-card.is-client:hover {
    background: linear-gradient(to right, #2a2a2a, #202020);
    transform: translateX(5px);
    /* Slide right instead of up */
}

.client-list-view .client-date {
    margin-bottom: 0;
    margin-right: 20px;
    min-width: 110px;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
}

.client-list-view .client-name {
    flex: 1;
    /* Take remaining space */
    font-size: 1.2rem;
    margin: 0;
}

.client-list-view .client-count {
    margin-top: 0;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile Adjustments for List */
@media (max-width: 600px) {
    .client-list-view .folder-card.is-client {
        flex-direction: column;
        /* Stack on small mobile */
        align-items: flex-start;
        gap: 8px;
    }

    .client-list-view .client-date {
        margin-right: 0;
        font-size: 0.75rem;
    }

    .client-list-view .client-name {
        font-size: 1.1rem;
    }

    .client-list-view .client-count {
        align-self: flex-start;
        /* Align left */
        padding: 4px 10px;
        font-size: 0.8rem;
    }
}

/* --- Dashboard Folder Grid --- */
.folder-grid {
    display: grid;
    /* 3 Columns for ALL devices as requested */
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-bottom: 50px;
}

.folder-card {
    background: linear-gradient(135deg, #2a2a2a, #1e1e1e);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 24px 16px;
    min-height: 140px;
    /* Ensure consistent height */
    aspect-ratio: 1 / 1;
    /* Make them square */
    position: relative;
    overflow: hidden;
}

/* Client Card Specifics */
.client-date {
    font-size: 0.8rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.client-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}

.folder-card.is-client {
    border-left: 3px solid var(--accent);
    align-items: flex-start;
    /* Left align text for clients looks better */
    text-align: left;
    padding-left: 20px;
}

.folder-card.is-client:hover {
    background: linear-gradient(135deg, #333, #2a2a2a);
    padding-left: 25px;
    /* Slide effect */
}

/* Icon style */
.folder-icon {
    margin-bottom: 12px;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.folder-card:hover {
    transform: translateY(-5px);
    background: linear-gradient(135deg, #333, #252525);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border-color: var(--accent);
}

.folder-card:hover .folder-icon {
    transform: scale(1.1);
    color: #fff;
}

.folder-info {
    z-index: 2;
}

.folder-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    /* Multi-line ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Glow effect on hover */
.folder-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(187, 134, 252, 0.1), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.folder-card:hover::before {
    opacity: 1;
}

/* Make sure photos grid doesn't break */
.no-cover {
    display: none;
}

.folder-cover {
    display: none;
}

/* --- Modal --- */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-bg);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal.active .modal-content {
    transform: scale(1);
}

.close-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 30px;
    background: rgba(255, 255, 255, 0.2);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.close-btn:hover {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    transform: translateX(-50%) scale(1.1);
}

/* --- Loading Overlay --- */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.loading-overlay.active {
    display: flex;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

.loading-text {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 1px;
}

.loading-subtext {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #aaa;
}

.loading-close-btn {
    margin-top: 20px;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid #aaa;
    color: #aaa;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.loading-close-btn:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 1024px) {
    .folder-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .folder-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Force 3 columns as requested */
        gap: 12px;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .folder-card {
        padding: 16px 10px;
        min-height: 100px;
    }

    .folder-name {
        font-size: 0.8rem;
    }

    .client-name {
        font-size: 0.95rem;
    }

    .client-date {
        font-size: 0.7rem;
    }

    .folder-icon svg {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 650px) {

    /* Increased breakpoint to cover large phones forcing 2 cols */
    .folder-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .folder-card {
        padding: 16px 10px;
        min-height: 100px;
        /* Reset base height */
    }

    .folder-card.is-category {
        min-height: 100px;
        /* Allow smaller height */
        padding: 20px 10px;
        aspect-ratio: auto;
        /* DISABLE SQUARE RATIO causing overlap */
        width: 100%;
        /* Force fit */
        height: auto;
    }

    .folder-card.is-category .folder-icon svg {
        width: 40px;
        height: 40px;
    }

    .folder-card.is-category .folder-name {
        font-size: 0.85rem;
        margin-top: 5px;
    }
}

/* --- Selection Mode --- */
.select-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    font-size: 0.9rem;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s;
}

.select-btn:hover,
.select-btn.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}

/* Checkbox Overlay */
.selection-checkbox {
    display: none;
    /* Hidden by default */
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 10;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.selection-checkbox::after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s;
}

/* Selection Mode Active State */
body.selection-mode .selection-checkbox {
    display: flex;
    pointer-events: auto;
    /* Ensure clickable */
}

body.selection-mode .gallery-item {
    cursor: zoom-in;
    /* Change to zoom cursor to indicate viewability */
}

body.selection-mode .gallery-item.selected .selection-checkbox {
    background: #fff;
    border-color: var(--accent);
}

body.selection-mode .gallery-item.selected .selection-checkbox::after {
    transform: scale(1);
}

body.selection-mode .gallery-item.selected img {
    /* Less dim so they can still see it clearly to zoom */
    opacity: 0.8;
    transform: scale(0.98);
}