/* css/image-preview.css */

/* Image Preview Container */
#imagePreviewContainer {
    position: fixed;
    bottom: 0;
    background-color: rgba(30, 30, 30, 0.9);
    padding: 10px 5px;
    z-index: 1000;
    white-space: nowrap;
    height: 120px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
    overflow-y: hidden;
    /* left и width устанавливаются через JavaScript */
}

/* Скрытие контейнера */
#imagePreviewContainer.hidden {
    display: none;
}

/* Spacer element to push previews to the right */
.preview-spacer {
    flex-grow: 1;
    flex-shrink: 0;
    min-width: 0;
}

/* Preview items */
.preview-item {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0 5px;
    background-color: #444;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    vertical-align: top;
    box-sizing: border-box;
    border: 2px solid transparent;
    flex-shrink: 0;
    transition: all 0.3s ease;
}


.preview-item:hover {
    background-color: #555;
}

.preview-item.selected {
    border: 2px solid #3498db;
}

/* Load More Button */
#loadMoreDatesButton {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0 5px;
    background-color: #444;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    vertical-align: top;
    box-sizing: border-box;
    border: 2px solid transparent;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

#loadMoreDatesButton:hover {
    background-color: #555;
}

/* Upload more text styling */
#loadMoreDatesButton .upload-more-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    background-color: rgba(25, 161, 76, 0.9);
    padding: 2px 4px;
    border-radius: 4px;
}

/* No data placeholder */
.no-data-item {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0 5px;
    background-color: #444;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    vertical-align: top;
    box-sizing: border-box;
    border: 2px solid transparent;
    color: white;
    text-align: center;
    line-height: 100px;
}