/* Gallery Upload UI Styles */
/* Following the locked design system: 60-30-10 color rule */

/* File input over drop zone: invisible but clickable so mobile (iOS) can open file picker */
.gallery-file-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0;
}

/* Drag & Drop Zone */
#galleryDropZone {
    transition: all 0.2s ease;
}

#galleryDropZone:hover {
    background: #FFFFFF !important;
    border-color: #E11D48 !important;
}

#galleryDropZone.drag-over {
    background: #FFFFFF !important;
    border-color: #E11D48 !important;
    border-style: solid !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

/* File List */
#fileList .border {
    border-color: #E5E7EB !important;
    background: #FFFFFF;
}

#fileList .border:hover {
    background: #F8FAFC;
}

/* Error States */
.text-danger {
    color: #DC2626 !important;
}

/* Remove-file button: clear action, not an error */
.gallery-remove-file {
    flex-shrink: 0;
    white-space: nowrap;
}

/* File Counter */
#fileCounter {
    color: #64748B;
    font-weight: 500;
}

/* ============================================
   Mobile: scrollable Upload Gallery modal
   Ensures modal fits viewport and body scrolls
   without breaking desktop or other modals
   ============================================ */
@media (max-width: 768px) {
    #uploadGalleryModal .modal-dialog {
        max-height: calc(100vh - 2rem);
        margin: 1rem;
        display: flex;
        flex-direction: column;
    }

    #uploadGalleryModal .modal-content {
        max-height: calc(100vh - 2rem);
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    #uploadGalleryModal .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        /* Visible scrollbar on mobile so users know content scrolls */
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 #f1f5f9;
    }

    #uploadGalleryModal .modal-body::-webkit-scrollbar {
        width: 8px;
    }

    #uploadGalleryModal .modal-body::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }

    #uploadGalleryModal .modal-body::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    #uploadGalleryModal .modal-body::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    /* Keep header and footer fixed; only body scrolls */
    #uploadGalleryModal .modal-header,
    #uploadGalleryModal .modal-footer {
        flex-shrink: 0;
    }
}