/* Gallery Page Styles */

/* Menu Bar */
.menu-bar {
    display: flex;
    width: 100%;
    align-items: center;
    background-color: var(--light-green);
    justify-content: space-between;
}

.gallery-controls {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-right: 2rem;
    align-self: stretch;
}

/* Search Bar */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
}

.search-bar {
    padding: .6rem 2.5rem .6rem .75rem;
    height: 100%;
    border: none;
    background-color: var(--lighter-green);
    color: var(--light-beige);
    font-family: var(--font-family);
    font-size: .9rem;
    outline: none;
    min-width: 200px;
    transition: background-color 180ms ease;
}

.search-bar::placeholder {
    color: rgba(255, 253, 243, 0.6);
}

.search-bar:focus {
    background-color: var(--green);
}

.search-icon {
    position: absolute;
    right: .75rem;
    color: var(--light-beige);
    pointer-events: none;
    opacity: 0.7;
    top: 50%;
    transform: translateY(-50%);
}

/* Sort Dropdown */
.sort-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.sort-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--beige);
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.sort-dropdown.show {
    display: block;
}

.sort-option {
    display: block;
    padding: .75rem 1rem;
    color: var(--green);
    text-decoration: none;
    transition: background-color 180ms ease;
    border-bottom: 1px solid var(--dark-beige);
}

.sort-option:last-child {
    border-bottom: none;
}

.sort-option:hover {
    background-color: var(--dark-beige);
}

/* Menu Bar Buttons */
.sort-btn,
.menu-bar-button {
    padding: .55rem;
    color: var(--beige);
    text-decoration: none;
    align-self: stretch;
    display: flex;
    align-items: center;
    position: relative;
    background-color: transparent;
    transition: background-color 180ms ease, filter 180ms ease;
    height: 100%;
}

.menu-bar-button {
    margin-left: 2rem;
}

.sort-btn {
    white-space: nowrap;
}

.sort-btn:hover,
.menu-bar-button:hover {
    filter: brightness(0.8);
}

.sort-btn:hover {
    background-color: rgba(254, 246, 214, 0.2);
}

.menu-bar-button:hover {
    background-color: rgba(254, 246, 214, 0.2);
}

.menu-bar-button:active,
.menu-bar-button:focus-visible {
    background-color: transparent;
    filter: none;
    transition: none;
}

.sort-btn svg {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .menu-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .gallery-controls {
        margin-right: 0;
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .search-wrapper {
        width: 100%;
    }

    .search-bar {
        width: 100%;
        min-width: 0;
    }

    .sort-wrapper {
        width: 100%;
    }

    .sort-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .menu-bar-button {
        margin-left: 0;
        text-align: center;
    }
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

/* When a modal should appear above the album overlay */
.modal.above-overlay {
    z-index: 1200;
}

.modal-content {
    background-color: var(--beige);
    padding: 2rem;
    /* Let the modal size to its contents. Use a max-height to prevent it
       from exceeding the viewport and enable scrolling when necessary. */
    height: auto;
    width: 70%;
    /* Allow wider modals for upload/detail overlays so drop-zone can be
       comfortably wider on desktop screens. Keep a sensible cap. */
    max-width: 60vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Scoped upload modal styles: copy of relevant modal/drop-zone rules but
   applied only when the modal has the `upload-modal` marker class. This
   prevents global modal sizing changes from affecting other small modals. */
.modal.upload-modal .modal-content {
    /* Keep the same visual treatment but allow larger width for uploads */
    background-color: var(--beige);
    padding: 2rem;
    height: auto;
    width: 70%;
    max-width: 60vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.modal.upload-modal .modal-body {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal.upload-modal .modal-body.single-column {
    flex-direction: column;
}

/* Specific styles for the Create Album modal */
.modal.menu-created-modal .modal-content {
    width: 90%;
    max-width: 400px;
}

.modal.menu-created-modal h2 {
    text-align: center;
    width: 100%;
    margin-top: 0;
}

@media (max-width: 768px) {
    .modal-content,
    .modal.upload-modal .modal-content {
        width: 95%;
        max-width: 95vw;
        padding: 1rem;
    }

    .modal.upload-modal .modal-body {
        flex-direction: column;
    }
}

.modal.upload-modal .drop-zone {
    flex: 1;
    background-color: var(--light-green);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition: background-color 180ms ease;
    position: relative;
    overflow-y: auto;
    padding: 1rem;
}

/* Upload total size text shown under drop-zone */
.modal.upload-modal .upload-total-size {
    color: var(--dark-green);
    font-weight: 600;
    text-align: left;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    /* Ensure it sits to the left inside the modal body */
    align-self: flex-start;
}

/* Stronger rule to ensure the upload total size is dark green and not overridden */
.modal.upload-modal .upload-total-size, .upload-total-size {
    color: var(--green) !important;
    text-align: left !important;
    align-self: flex-start !important;
}

.modal.upload-modal .drop-zone:hover {
    background-color: var(--lighter-green);
}

.modal.upload-modal .drop-zone.drag-over {
    background-color: var(--light-green);
}

.modal.upload-modal .drop-zone-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.modal.upload-modal .drop-zone-prompt p {
    color: var(--light-beige);
    margin: 0;
    font-size: 1.1rem;
}

.modal.upload-modal .image-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    width: 100%;
}

.modal.upload-modal .image-list-header {
    width: 100%;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--darker-beige);
    margin-bottom: .25rem;
}

.modal.upload-modal .image-info-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 1rem;
    align-items: center;
    color: var(--beige);
    font-size: .85rem;
    padding-right: 2.5rem;
}

.modal.upload-modal .image-item {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
    color: var(--light-beige);
    font-size: .9rem;
}

.modal.upload-modal .image-info {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 1rem;
    align-items: center;
}

.modal.upload-modal .total-size-display {
    justify-self: end;
    font-weight: 600;
    color: var(--dark-green);
}

.modal.upload-modal .drop-zone>.total-size-display {
    position: absolute;
    top: 8px;
    right: 12px;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 6;
    font-size: .9rem;
}

.modal.upload-modal .drop-zone-error {
    position: absolute;
    top: 8px;
    right: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--light-error-red);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: .85rem;
    z-index: 6;
}

.modal.upload-modal .remove-image {
    background-color: transparent;
    color: var(--dark-green);
    border: none;
    width: 20px;
    height: 20px;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 180ms ease, transform 120ms ease, filter 120ms ease;
    flex-shrink: 0;
    margin-left: .5rem;
}

.modal.upload-modal .remove-image:hover {
    filter: brightness(.3);
}

.modal-content h2 {
    margin: 0 0 1.5rem 0;
    color: var(--green);
    text-align: center;
}

.modal-body {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-body.single-column {
    flex-direction: column;
}

/* Small allocation/retention modal (pre-album) styles removed */

/* Drop-zone / Upload modal styles - restored so the Add Images modal is
   properly formatted. These styles control the drop target appearance,
   the file list, remove buttons and related layout for the upload UI. */
.drop-zone {
    flex: 1;
    background-color: var(--light-green);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition: background-color 180ms ease;
    position: relative;
    overflow-y: auto;
    padding: 1rem;
    /* Make the drop zone taller so it's easier to drop files and shows the
       file list comfortably on most screens. Use max-height to avoid
       exceeding the viewport. */
    min-height: 300px;
    max-height: 60vh;
    /* Encourage the drop-zone to be wider where possible; it will
       expand to the modal width but won't exceed these bounds. */
    width: 100%;
}

.drop-zone:hover {
    background-color: var(--lighter-green);
}

.drop-zone.drag-over {
    background-color: var(--light-green);
}

.drop-zone-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.drop-zone-prompt p {
    color: var(--light-beige);
    margin: 0;
    font-size: 1.1rem;
}

/* Image List */
.image-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    width: 100%;
}

.image-list-header {
    width: 100%;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--darker-beige);
    margin-bottom: .25rem;
}

.image-info-header {
    display: grid;
    /* Filename | Size | Date */
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 1rem;
    align-items: center;
    color: var(--beige);
    font-size: .85rem;
    font-weight: normal;
    padding-right: 2.5rem;
}

.image-item {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
    color: var(--light-beige);
    font-size: .9rem;
}

.image-info {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 1rem;
    align-items: center;
}

.total-size-display {
    justify-self: end;
    font-weight: 600;
    color: var(--dark-green);
}

.drop-zone>.total-size-display {
    position: absolute;
    top: 8px;
    right: 12px;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 6;
    font-size: .9rem;
}

.drop-zone-error {
    position: absolute;
    top: 8px;
    right: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--light-error-red);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: .85rem;
    z-index: 6;
}

.remove-image {
    background-color: transparent;
    color: var(--dark-green);
    border: none;
    width: 20px;
    height: 20px;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 180ms ease, transform 120ms ease, filter 120ms ease;
    flex-shrink: 0;
    margin-left: .5rem;
}

.remove-image:hover {
    filter: brightness(.3);
}

/* Album Form */
.album-form-row {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    width: 100%;
    align-self: center;
}

.album-form-row:last-child {
    margin-bottom: 0;
}

.title-with-button {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.title-with-button input[type="text"] {
    flex: 1;
}

.album-form-row input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .75rem;
    border: 0;
    font-size: .95rem;
    outline: none;
    background: var(--dark-beige);
    color: var(--green);
    caret-color: var(--green);
    font-family: var(--font-family);
}

.album-form-row textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .75rem;
    border: 0;
    font-size: .95rem;
    outline: none;
    background: var(--dark-beige);
    color: var(--green);
    caret-color: var(--green);
    font-family: var(--font-family);
    resize: vertical;
    min-height: calc(2 * (1.3rem + 2 * .65rem));
    /* 2x the height of input field */
}

/* Ensure modal form controls span full width and stack nicely */
.modal-body .album-form-row {
    width: 100%;
}

.modal-body .album-form-row input[type="range"],
.modal-body .album-form-row select,
.modal-body .album-form-row input[type="text"],
.modal-body .album-form-row button {
    width: 100%;
    box-sizing: border-box;
}

.modal-body .album-form-row label {
    display: block;
    margin-bottom: .25rem;
    color: var(--green);
}

.modal-body .album-form-row h2 {
    margin: 0 0 .5rem 0;
    color: var(--green);
    text-align: left;
}

.modal-body .album-form-row button {
    padding: .65rem 1rem;
    border: none;
    cursor: pointer;
}

.album-form-row select.retention-select-input {
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .75rem;
    border: 0;
    font-size: .95rem;
    outline: none;
    background: var(--dark-beige);
    color: var(--green);
    font-family: var(--font-family);
    cursor: pointer;
    transition: filter 0.2s ease;
}

.album-form-row select.retention-select-input:hover {
    filter: brightness(1.1);
}

.album-form-row input[type="text"]::placeholder {
    color: var(--darker-beige);
}

.album-form-row textarea::placeholder {
    color: var(--darker-beige);
}

.btn-add-album {
    background: var(--light-green);
    color: var(--light-beige);
    border: none;
    padding: .65rem 1.2rem;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: .95rem;
    transition: background-color 180ms ease;
    white-space: nowrap;
}

.btn-add-album:hover,
.btn-add-album:focus-visible {
    filter: brightness(0.8);
}

.btn-add-album:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.album-form-row .errorlist {
    list-style: none;
    padding: 0;
    margin: 0 0 .5rem 0;
    color: var(--dark-error-red);
    font-size: .9rem;
}

/* Albums Display */
.albums-container {
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 768px) {
    .albums-container {
        padding: 1rem;
        grid-template-columns: 1fr;
    }
}

.album-card {
    background-color: var(--beige);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 180ms ease, box-shadow 180ms ease;
    cursor: pointer;
    position: relative;
    /* allow absolutely-positioned badge inside */
}

.album-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Disabled / loading state for album cards: make non-interactive and visually muted */
.album-card.loading {
    /* Visible loading state for individual cards: greyed and non-interactive */
    opacity: 0.6;
    pointer-events: none;
    /* ensure clicks are ignored while loading */
}

.album-card.loading:hover {
    /* Disable hover visuals while loading */
    transform: none;
    box-shadow: none;
}

.album-card.loading .album-card-image img {
    /* slightly desaturate while loading to indicate in-progress state */
    filter: grayscale(30%) brightness(0.96);
}

/* When the whole albums container is loading, grey-out and disable clicks */
.albums-container.loading {
    pointer-events: none;
    opacity: 0.6;
}

.albums-container.loading .album-card:hover {
    transform: none;
    box-shadow: none;
}

.album-card-image {
    width: 100%;
    height: 200px;
    background-color: var(--light-green);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.album-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* No transition: show thumbnails instantly once loaded (no fade) */
    transition: none;
}

/* Show spinner while album thumbnail loads */
.album-card-image.loading img {
    opacity: 0;
}

.card-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border: 3px solid var(--dark-beige);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
    z-index: 2;
}

.no-image-placeholder {
    color: var(--light-beige);
    font-size: 1rem;
}

.album-card-content {
    padding: 1rem;
    position: relative;
}

/* Shared/unshared badge shown at the top-right of an album card */
.album-shared-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    z-index: 6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    text-transform: uppercase;
}

.album-shared-indicator.shared {
    background: var(--correct-green);
}

.album-shared-indicator.unshared {
    background: var(--light-error-red);
}

.album-card-title {
    margin: 0 0 .5rem 0;
    color: var(--green);
    font-size: 1.1rem;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.album-card-desc {
    margin: 0 0 .5rem 0;
    color: var(--darker-beige);
    font-size: .85rem;
    line-height: 1.25rem;
    /* Force single-line truncation with ellipsis for album cards */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-card-info {
    margin: 0 0 .5rem 0;
    color: var(--dark-green);
    font-size: .9rem;
}

.album-card-retention {
    margin: 0 0 .5rem 0;
    color: var(--darker-beige);
    font-size: .85rem;
}

.album-card-date {
    margin: 0 0 .5rem 0;
    color: var(--darker-beige);
    font-size: .85rem;
}

.album-card-shared {
    margin: 0 0 .125rem 0;
    color: var(--darker-beige);
    font-size: .85rem;
}

.album-card-deletion {
    margin: 0 0 .5rem 0;
    color: var(--darker-beige);
    font-size: .85rem;
}

.album-card-delete {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    background: transparent;
    border: none;
    color: var(--light-error-red);
    cursor: pointer;
    font-size: .85rem;
    font-family: var(--font-family);
    padding: .4rem .6rem;
    transition: background-color 180ms ease, filter 180ms ease;
}

.album-card-delete:hover {
    background-color: rgba(115, 14, 14, .2);
    filter: brightness(1.2);
}

.no-albums-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--light-green);
}

.no-albums-message p {
    font-size: 1.1rem;
    margin: 0;
}

/* Album Detail Overlay */
.album-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.album-detail-content {
    width: 95vw;
    height: 95vh;
    background: var(--beige);
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 0;
    position: relative;
    overflow: hidden;
}

/* Common section spacing/border for album info right column */
.album-description,
.album-shares,
.album-retention,
.album-download,
.album-share-button-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px dotted var(--green);
}

/* Overlay toast (swipe in/out at top of modal) */
.overlay-toast {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
    z-index: 20;
    background: var(--green);
    color: var(--light-beige);
    padding: .5rem .9rem;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    max-width: 70%;
    text-align: center;
    white-space: pre-wrap;
}

.overlay-toast.show {
    transform: translate(-50%, 12px);
    opacity: 1;
}

.overlay-toast.error {
    background: var(--light-error-red);
}

/* Page-level toast notifications (for album deletion, etc.) */
.page-toast {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
    z-index: 10000;
    background: var(--green);
    color: var(--light-beige);
    padding: .5rem .9rem;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    max-width: 70%;
    text-align: center;
    white-space: pre-wrap;
}

.page-toast.show {
    transform: translate(-50%, 12px);
    opacity: 1;
}

.page-toast.error {
    background: var(--light-error-red);
}

.album-detail-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: transparent;
    border: none;
    color: var(--green);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: .25rem .5rem;
    z-index: 1;
    display: none;
}

@media (max-width: 768px) {
    .album-detail-close {
        display: block;
    }
}

.modal-content {
    position: relative;
}

.album-detail-close:hover {
    filter: brightness(1.2);
}

.album-detail-images {
    background: var(--light-beige);
    height: 100%;
    overflow: auto;
    padding: 1rem;
    box-sizing: border-box;
    position: relative;
}

/* removed unused: .preload-overlay */

.album-detail-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
}

.album-detail-images-grid img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    cursor: pointer;
    transition: transform 150ms ease;
}

/* Overlay grid thumbnails loading state */
.grid-thumb {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--light-beige);
    transition: transform 180ms ease, box-shadow 180ms ease;
    cursor: pointer;
}

.grid-thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.grid-thumb.loading img {
    opacity: 0;
}

.grid-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 3px solid var(--dark-beige);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}

/* Selection mode visuals */
.album-detail-images-grid.selecting .grid-thumb .select-marker {
    display: block;
}

.album-detail-images-grid.selecting .grid-thumb.selected {
    outline: 3px solid var(--dark-beige);
    background-color: var(--dark-beige);
}

.album-detail-images-grid.selecting .grid-thumb.selected .select-marker {
    background: var(--green);
    border-color: var(--beige);
}

.album-detail-info {
    background: var(--light-green);
    height: 100%;
    overflow: auto;
    padding: 1rem 1rem;
    color: var(--green);
    box-sizing: border-box;
}

.album-detail-info h3 {
    margin: 0 0 .5rem 0;
    font-weight: normal;
    color: var(--beige);
    /* Prevent overlap with the top-right close button */
    padding-right: 2.5rem;
    /* Allow long titles to wrap to new lines */
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    /* Break very long words/URLs gracefully */
    overflow-wrap: anywhere;
    /* Underline the title in album view for visual emphasis */
    text-decoration: underline;
}

/* Inline editable title input styling */
.album-title-input {
    width: 80%;
    box-sizing: border-box;
    padding: 0.15rem 0.25rem;
    font-size: 1.1rem;
    font-family: var(--font-family);
    color: var(--beige);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    outline: none;
}

.album-title-input:focus {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.02);
}

/* Share status line under album title in overlay */
.share-status {
    margin: .25rem 0 .75rem 0;
    color: var(--light-beige);
}

.share-status .state {
    font-weight: normal;
    color: var(--beige);
}

.share-status.shared .state {
    color: var(--correct-green);
}

.share-status.not-shared .state {
    color: var(--light-error-red);
}

.album-detail-info .info-line {
    margin: 0 0 .5rem 0;
    color: var(--light-beige);
    font-size: .95rem;
}

/* Description Section */

.album-description h4 {
    margin: 0 0 .75rem 0;
    font-size: 1rem;
    color: var(--beige);
    font-weight: normal;
}

.album-desc-textarea {
    width: 100%;
    min-height: 80px;
    padding: .65rem .75rem;
    background: var(--dark-beige);
    color: var(--green);
    caret-color: var(--green);
    font-family: var(--font-family);
    font-size: .95rem;
    resize: vertical;
    box-sizing: border-box;
    border: none;
    outline: none;
}

.album-desc-textarea:focus {
    background: var(--dark-beige);
}

.album-desc-textarea::placeholder {
    color: var(--darker-beige);
}

/* Shared With Section */

.album-shares h4 {
    margin: 0 0 .75rem 0;
    font-size: 1rem;
    color: var(--beige);
    font-weight: normal;
}

.shares-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.share-item {
    padding: .4rem .5rem;
    background: var(--green);
    margin: .3rem;
    color: var(--light-beige);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.share-email {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-pin {
    font-family: monospace;
    font-size: .85rem;
    color: var(--beige);
    padding: .2rem .4rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.remove-share-btn {
    background: transparent;
    border: none;
    color: var(--beige);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.remove-share-btn:hover {
    filter: brightness(1.2);
}

.remove-share-btn.confirm {
    color: var(--light-error-red);
}

.remove-share-btn.confirm:hover {
    filter: brightness(1.2);
}

.no-shares {
    color: var(--lighter-green);
    font-size: .9rem;
    font-style: italic;
    margin: 0;
}

/* Share Form */
.share-form {
    margin-top: 1rem;
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}

.share-error {
    width: 100%;
    color: var(--light-error-red);
    font-size: .85rem;
    padding: 0;
}

.share-email-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--dark-green);
    padding: .4rem 0;
    color: var(--light-beige);
    font-size: .9rem;
    font-family: inherit;
    outline: none;
    flex: 1;
    min-width: 0;
}

.share-email-input::placeholder {
    color: var(--lighter-green);
}

.share-email-input:focus {
    border-bottom-color: var(--beige);
}

.share-pin-label {
    width: 95px;
    text-align: center;
    color: var(--lighter-green);
    font-size: .9rem;
    font-style: italic;
    padding: .4rem 0;
    border-bottom: 1px solid transparent;
}

.add-share-btn {
    background: transparent;
    border: none;
    color: var(--beige);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.add-share-btn:hover {
    filter: brightness(1.2);
}

.add-share-btn.confirm {
    color: var(--correct-green);
}

.add-share-btn.confirm:hover {
    filter: brightness(1.2);
}

/* Retention Section */

.album-retention h4 {
    margin: 0 0 .75rem 0;
    font-size: 1rem;
    color: var(--beige);
    font-weight: normal;
}

.retention-display {
    color: var(--light-beige);
    font-size: .95rem;
    /* Match spacing used by .info-line so the retention, first-shared
       and deletion date lines have consistent vertical rhythm */
    margin: 0 0 .5rem 0;
}

/* First-shared display should match retention display styling */
.first-shared-display {
    color: var(--light-beige);
    font-size: .95rem;
    /* Keep same bottom spacing as other info lines */
    margin: 0 0 .5rem 0;
}

/* Deletion date should match first-shared/retention styling */
.deletion-date-display {
    color: var(--light-beige);
    font-size: .95rem;
    /* Keep same bottom spacing as other info lines */
    margin: 0 0 .5rem 0;
}

/* Download Album Section */
.album-download {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.bulk-actions {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}

.select-images-btn {
    width: 30%;
}

.select-images-btn.active {
    filter: brightness(1.2);
}

.download-images-btn {
    flex: 1;
    background: var(--green);
    color: var(--light-beige);
    padding: .6rem 1rem;
    cursor: pointer;
    /* Match select button font-size */
    font-size: .95rem;
    font-weight: normal;
    transition: filter 0.2s ease;
    font-family: var(--font-family);
    border: none;
}

.download-images-btn:hover:not(:disabled) {
    filter: brightness(1.2);
}

.download-images-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Full-view download button (use light green to stand out in top bar) */
.download-images-btn.full-image-download {
    background: var(--light-green);
    color: var(--light-beige);
    font-size: .85rem;
}

.download-images-btn.full-image-download:hover:not(:disabled) {
    filter: brightness(1.06);
}

.delete-images-btn {
    flex: 1;
    background: var(--light-error-red);
    color: var(--light-beige);
    padding: .6rem 1rem;
    cursor: pointer;
    font-size: .95rem;
    font-weight: normal;
    transition: filter 0.2s ease;
    font-family: var(--font-family);
    border: none;
}

.delete-images-btn:hover:not(:disabled) {
    filter: brightness(1.2);
}

.delete-images-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.add-images-btn {
    width: 100%;
}

.download-album-btn {
    width: 100%;
}

.download-album-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Consolidated shared styles for block buttons (dark-beige background) */
.add-images-btn,
.download-album-btn,
.select-images-btn {
    background: var(--dark-beige);
    color: var(--green);
    padding: .6rem 1rem;
    cursor: pointer;
    font-size: .95rem;
    font-weight: normal;
    transition: filter 0.2s ease;
    font-family: var(--font-family);
    border: none;
}

.add-images-btn:hover,
.download-album-btn:hover:not(:disabled),
.select-images-btn:hover {
    filter: brightness(1.2);
}

/* Share Album Button Section */
.album-share-button-section {
    display: flex;
    flex-direction: column;
}

.share-album-btn {
    width: 100%;
    background: var(--green);
    color: var(--beige);
    padding: .6rem 1rem;
    cursor: pointer;
    font-size: .95rem;
    font-weight: normal;
    transition: filter 0.2s ease;
    font-family: var(--font-family);
    border: none;
}

.share-album-btn:hover {
    filter: brightness(1.2);
}

/* When acting as an 'Unshare' action, use the same red style as delete buttons */
.share-album-btn.unshare {
    background: var(--light-error-red);
    color: var(--light-beige);
}

.share-album-btn.unshare:hover {
    filter: brightness(1.2);
}

/* Full Image View */
.full-image-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--light-green);
    display: flex;
    flex-direction: column;
    padding: 0;
    z-index: 5;
}

.full-image-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    background-color: var(--light-beige);
    padding: 1rem 0rem;
}

.full-image-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* removed unused: .image-loading-spinner */

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

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

.full-image-nav-areas {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Days-left status highlights */
.days-left {
    font-weight: 600;
}

.days-left.warning {
    color: #b07b00;
    /* amber / yellow-ish */
}

.days-left.danger {
    color: var(--light-error-red);
    /* red for urgent */
}

.days-left.expired {
    color: var(--light-error-red);
    text-transform: uppercase;
}

.full-image-nav-area {
    width: 50%;
    height: 100%;
    pointer-events: auto;
    cursor: pointer;
    transition: background-color 140ms ease;
}

.full-image-prev-area:not(.disabled):hover {
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(100, 144, 112, .1) 90%, rgb(100, 144, 112, .5) 100%);
}

.full-image-next-area:not(.disabled):hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(100, 144, 112, .1) 90%, rgb(100, 144, 112, .5) 100%);
}

.full-image-nav-area.disabled {
    cursor: default;
}

.full-image-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--light-green);
    color: var(--beige);
    font-size: .85rem;
    gap: .75rem;
}

.full-image-nav-btn {
    background: transparent;
    border: none;
    color: var(--light-beige);
    cursor: pointer;
    font-size: 1.5rem;
    font-family: var(--font-family);
    padding: 0 .5rem;
    line-height: 1;
    transition: filter 140ms ease;
    position: relative;
    top: -.1rem;
}

.full-image-nav-btn:hover {
    filter: brightness(1.2);
}

.full-image-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
    filter: none;
}

.full-image-meta {
    flex: 1;
    text-align: center;
    color: var(--light-beige);
}

.full-image-exit {
    background: transparent;
    border: none;
    color: var(--light-beige);
    cursor: pointer;
    font-size: .85rem;
    font-family: var(--font-family);
    padding: .8rem 1rem;
    transition: background-color 180ms ease, filter 180ms ease;
    align-self: center;
    height: 100%;
}

.full-image-exit:hover {
    background-color: rgba(66, 97, 75, .2);
    filter: brightness(1.5);
}

/* Full image delete icon button */
.full-image-delete {
    background: transparent;
    border: none;
    color: var(--light-error-red);
    /* red text to match request */
    cursor: pointer;
    font-size: .85rem;
    /* match Back to grid */
    font-family: var(--font-family);
    padding: .8rem 1rem;
    /* match Back to grid */
    transition: background-color 180ms ease, filter 180ms ease;
    /* match Back to grid */
    height: 100%;
}

.full-image-delete:hover {
    background-color: rgba(115, 14, 14, .2);
    filter: brightness(1.2);
}

/* Container to keep Delete and Back buttons side by side and touching */
.full-image-actions {
    display: flex;
    align-items: stretch;
}

/* Thumbnails strip */
.full-image-thumbs {
    background: var(--light-beige);
    padding: .4rem .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}

.full-image-thumbs .thumbs-inner {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.full-image-thumbs .thumb {
    height: 72px;
    width: auto;
    object-fit: contain;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, filter 120ms ease;
}

.full-image-thumbs .thumb:hover {
    transform: scale(1.03);
}

.full-image-thumbs .thumb.selected {
    border-color: var(--light-green);
    box-shadow: 0 0 0 2px rgba(254, 246, 214, 0.25);
}

/* Global loading spinner styles used across the gallery */
.loading-spinner,
.grid-loading-spinner,
.stage-loading-spinner,
.card-loading-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.9);
    border-top-color: rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    animation: mp-spin 1s linear infinite;
    z-index: 30;
    background: transparent;
}

/* Default hidden; shown when parent gets `.loading` */
.grid-loading-spinner,
.loading-spinner,
.stage-loading-spinner,
.card-loading-spinner {
    display: none;
}

.grid-thumb.loading .grid-loading-spinner,
.album-card.loading .card-loading-spinner,
.full-image-stage.loading .stage-loading-spinner {
    display: block;
}

@keyframes mp-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Simple rotation animation for spinners placed inside flex containers
   (no translate offset). Use this for .global-upload-spinner so it stays
   visually centered when laid out by flexbox. */
@keyframes mp-spin-simple {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Full-page albums loading overlay */
.albums-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1200;
}

.albums-loading-overlay.hidden {
    display: none;
}

.albums-loading-spinner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, 0.85);
    border-top-color: rgba(0, 0, 0, 0.12);
    animation: mp-spin 1s linear infinite;
}

/* Full-page upload overlay shown while images are uploading */
.global-upload-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2200;
    pointer-events: auto;
}

.global-upload-overlay.hidden {
    display: none;
}

.global-upload-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    background: rgba(0,0,0,0.25);
}

.global-upload-spinner {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 6px solid rgba(255,255,255,0.9);
    border-top-color: var(--green);
    /* Use a simple rotation (no translate) because this spinner is
       centered via flexbox rather than absolute positioning. */
    animation: mp-spin-simple 1s linear infinite;
}

.global-upload-text {
    color: var(--light-beige);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}

/* Subtle dim overlay behind spinner when loading */
.grid-thumb.loading::after,
.album-card.loading::after,
.full-image-stage.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.04);
    z-index: 20;
}

/* Progress bar for global upload overlay */
.global-upload-progress-container {
    width: 300px;
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.global-upload-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--green);
    transition: width 0.2s ease;
}

@media (max-width: 768px) {
    .album-detail-content {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .album-detail-info {
        height: auto;
        max-height: 40vh;
        border-left: none;
        border-top: 1px solid var(--dark-beige);
        padding-bottom: 2rem;
    }

    .album-detail-images {
        height: 100%;
        overflow: auto;
    }
}