/* Public upload gallery: upload/index.php (gallery + upload form) and
   upload/view_image.php (single image + comments).

   Both pages render through the site shell (index-shell.php) and hand this file
   to it via $shellHeadExtra. Everything is scoped under .upload-app (each page's
   outer wrapper): the shell keeps this <link> in the head after the visitor SPA-
   navigates to a release, so an unscoped selector (.caption, .navigation, select...)
   would restyle every page visited afterwards. Keep new rules under the scope.

   Colours come from the theme tokens (css/themes.css) plus the theme-independent
   status colours (css/root_variables.css), so the gallery follows the 9 themes.
   The comment thread itself is styled by the shared css/comments.css.

   The admin pages (edit / create / moderate) still use upload/css/upload_style.css. */

/* ========== PAGE HEADER (logo + pending dot) ========== */

.upload-app .title {
    position: relative;
    text-align: center;
    padding: var(--padding-lg) 0;
    width: 100%;
}

.upload-app .title > img {
    display: block;
    margin: 0 auto;
    max-width: min(400px, 100%);
    height: auto;
    filter: var(--logo-colour);
    transition: filter var(--transition-normal);
}

/* Green dot in the top-left corner of the page content while something waits
   in the moderation queue. Anchored to .title (position: relative, full width),
   which sits inside #releases: right of the desktop sidebar, below the search. */
.upload-app .status-indicator {
    position: absolute;
    top: var(--padding-lg);
    left: var(--padding-lg);
    width: 8px;
    height: 8px;
    background: var(--status-ok);
    border-radius: 50%;
    display: none;
}

.upload-app .title.has-pending .status-indicator {
    display: block;
}

/* ========== UPLOAD FORM + HASHTAG SEARCH ========== */

.upload-app .upload-search-container {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: flex-start;
    width: 95%;
}

.upload-app .uploadbuttonsbody {
    flex: 2;
    display: flex;
    justify-content: center;
    min-width: 50%;
}

.upload-app .uploadbuttons {
    background-color: var(--main-colour_clear);
    padding: var(--padding-lg) var(--padding-lg) 0;
    border-radius: var(--padding-sm);
    display: block;
    width: 100%;
    border: var(--border-width-thin) solid var(--border-colour);
    box-sizing: border-box;
}

.upload-app .hashtag-search {
    flex: 1;
    background-color: var(--main-colour_clear);
    padding: 10px;
    border-radius: 10px;
    border: var(--border-width-thin) solid var(--border-colour);
    box-sizing: border-box;
    min-width: 300px;
}

.upload-app .hashtag-search form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upload-app .hashtag-search input[type="text"] {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: var(--border-width-thin) solid var(--border-colour);
    background-color: var(--sidebar-menu_bg2);
    color: var(--font-colour_offwhite);
    outline: none;
}

.upload-app .hashtag-search button {
    padding: 10px 20px;
    color: var(--font-colour_white);
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--font-body);
}

.upload-app .search-buttons-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    width: 100%;
}

/* Row layout for form fields */
.upload-app .upload-row {
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
    align-items: flex-start;
}

.upload-app .upload-col-left,
.upload-app .upload-col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Individual field containers */
.upload-app .uploadimages,
.upload-app .uploadcaption,
.upload-app .uploaduser,
.upload-app .uploadtype,
.upload-app .uploadhashtags {
    background-color: var(--secondary-colour);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    flex: 1;
}

.upload-app .uploadinfo {
    color: var(--link-colour);
    font-size: var(--font-base);
    text-align: right;
    padding-inline-end: var(--padding-sm);
}

/* The whole drop area is the click target for the hidden file input */
.upload-app .uploadimages {
    border: 2px dashed var(--border-colour);
    background-color: var(--main-colour);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.upload-app .uploadimages .upload-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: var(--font-colour_white);
    font-family: var(--font-body);
}

.upload-app .uploadimages .upload-text {
    padding: 10px;
}

.upload-app .uploadimages #image-preview {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
    margin-bottom: 5px;
    display: block;
}

.upload-app .uploadimages #file-name {
    font-size: x-small;
    color: var(--font-colour_offwhite);
    word-break: break-all;
    padding: 0 10px;
}

.upload-app .uploadhashtags {
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.upload-app select {
    width: 100%;
    background-color: var(--sidebar-menu_bg2);
    color: var(--font-colour_offwhite);
    border: var(--border-width-thin) solid var(--border-colour);
    border-radius: 10px;
    padding: 5px;
}

/* Tag bubbles (upload form hashtags + the hashtag search) */
.upload-app .tag-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--main-colour);
    border-radius: 4px;
    background: var(--desc-bg, rgba(0, 0, 0, 0.5));
    min-height: 32px;
    cursor: text;
}

.upload-app .tag-bubble {
    display: inline-flex;
    align-items: center;
    background: var(--main-colour);
    color: var(--font-colour_white);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    gap: 5px;
}

.upload-app .tag-bubble .tag-remove {
    cursor: pointer;
    font-weight: bold;
    opacity: 0.8;
    font-size: 1.1em;
    line-height: 1;
}

.upload-app .tag-bubble .tag-remove:hover {
    opacity: 1;
}

/* Border, background, colour and outline deliberately come from style.css's
   input[type="text"] (the dark pill). The old inline rule set them to
   none/transparent but always lost to that rule, so the pill is what the page
   has always shown; restating them here would now win and change the look. */
.upload-app .tag-input {
    flex: 1;
    min-width: 120px;
    font-size: 0.9em;
}

.upload-app .tag-input::placeholder {
    color: var(--font-colour_grey);
}

/* Upload form tags: bubbles wrap, the input sits on its own row */
.upload-app #upload-tag-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}

.upload-app #upload-tag-container .tag-bubbles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.upload-app #upload-tag-container .tag-input {
    width: 100%;
}

@media (max-width: 1200px) {
    .upload-app .upload-search-container {
        flex-direction: column;
        width: 95%;
    }

    .upload-app .uploadbuttonsbody,
    .upload-app .hashtag-search {
        width: 100%;
    }

    .upload-app .hashtag-search {
        min-width: unset;
    }
}

@media (max-width: 768px) {
    .upload-app .upload-row {
        flex-direction: row;
        gap: 10px;
    }

    .upload-app .uploadimages {
        min-height: 150px;
    }
}

/* ========== ALBUM / DATE / PER-PAGE NAVIGATION ========== */

.upload-app .album-navbody {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    background-color: var(--main-colour_clear);
    border-radius: 10px;
    width: clamp(50%, 75%, 100%);
    margin: 20px auto;
    border: var(--border-width-thin) solid var(--border-colour);
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .upload-app .album-navbody {
        width: 95%;
        padding: 10px;
    }
}

.upload-app .album-nav {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.upload-app .date-nav {
    border-radius: 5px;
    display: inline-block;
    text-align: center;
}

.upload-app .date-nav a.active {
    font-weight: bold;
    border: var(--border-width-thin) solid var(--border-colour);
}

.upload-app .images-perpage {
    margin-bottom: 15px;
    text-align: center;
}

.upload-app .images-perpage label {
    color: var(--font-colour_white);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1em;
}

.upload-app .images-perpage select {
    padding: 6px 10px;
    border: 1px solid var(--main-colour);
    border-radius: 4px;
    background: var(--desc-bg, rgba(0, 0, 0, 0.7));
    color: var(--font-colour_white);
    font-family: inherit;
    font-size: 0.95em;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.upload-app .images-perpage select:hover {
    border-color: var(--main-colour);
    background: rgba(255, 255, 255, 0.05);
}

.upload-app .images-perpage select:focus {
    outline: none;
    border-color: var(--main-colour);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

/* ========== GALLERY GRID ========== */

.upload-app .uploadbody {
    color: var(--font-colour_offwhite);
    font-family: var(--font-body);
}

.upload-app .uploads-gallery {
    display: inline-block;
    padding: var(--padding-lg) var(--padding-lg) 0;
    margin-top: var(--padding-lg);
    border-radius: var(--padding-sm);
}

.upload-app .uploadcontainer {
    position: relative;
    display: inline-block;
    background-color: var(--secondary-colour);
    margin-right: var(--padding-md);
    margin-bottom: var(--padding-md);
    border-radius: var(--padding-lg);
    padding: var(--padding-md);
    border: 2px solid var(--border-colour);
    overflow: hidden;
}

/* Caption above image */
.upload-app .uploadcontainer .caption {
    color: var(--font-colour_white);
    text-transform: capitalize;
    font-weight: bold;
    padding: 0 0 var(--padding-sm) 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.upload-app .uploadcontainer .image-link {
    display: block;
    overflow: hidden;
    border-radius: var(--padding-sm);
}

.upload-app .upload {
    display: block;
    width: 100%;
    height: var(--vinyl-h);
    object-fit: cover;
    border-radius: var(--padding-sm);
    transition: transform 0.3s ease;
}

.upload-app .uploadcontainer:hover .upload {
    transform: scale(1.05);
}

/* Details below image */
.upload-app .upload-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: var(--padding-sm);
    gap: var(--padding-xs);
}

.upload-app .upload-details .type {
    color: var(--sidebar-menu_bg2);
    font-variant: all-small-caps;
    font-size: 0.85rem;
    text-align: left;
}

.upload-app .upload-details .username {
    color: var(--font-colour_grey);
    font-variant: all-petite-caps;
    font-size: 0.85rem;
    text-align: right;
}

/* "New comments" badge, revealed by upload/js/gallery.js */
.upload-app .comment-indicator {
    height: 100%;
    max-height: 15px;
    width: auto;
    display: none;
    margin: 0 auto;
}

.upload-app .comment-indicator.visible {
    display: inline-block;
    align-self: center;
}

/* ========== SINGLE IMAGE (view_image.php) ========== */

.upload-app .image-viewer {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: var(--desc-bg);
    border: var(--border-width-thin) solid var(--border-colour);
    border-radius: 10px;
}

.upload-app .back-to-gallery {
    text-align: center;
    margin-bottom: 15px;
}

.upload-app .back-to-gallery a {
    color: var(--font-colour_offwhite);
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.upload-app .back-to-gallery a:hover {
    opacity: 1;
}

.upload-app .navigation {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.upload-app .navigation a {
    color: var(--link-colour);
    text-decoration: none;
}

.upload-app .image-viewer img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.upload-app .image-info_viewimage {
    position: relative;
    background-color: var(--sidebar-bg_colour);
    color: var(--font-colour_white);
    padding: 5px;
    font-weight: bold;
}

.upload-app .image-info_viewimage .image-info-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.upload-app .image-info_viewimage .caption {
    flex: 1;
}

.upload-app .image-info-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.upload-app .image-info_viewimage .type {
    color: var(--sidebar-menu_bg2);
    font-variant: all-small-caps;
    font-size: 0.85rem;
}

.upload-app .image-info_viewimage .username {
    color: var(--font-colour_grey);
    font-variant: all-petite-caps;
    font-size: 0.85rem;
}

.upload-app .hashtags {
    color: var(--link-colour);
    margin-top: 5px;
    display: block;
}

.upload-app .hashtag-link {
    color: var(--link-colour);
    text-decoration: none;
    margin-right: 5px;
}

.upload-app .hashtag-link:hover {
    text-decoration: underline;
}