button.filter {
    float: center;
    border: none;
    outline: blue;
    margin: 2px auto 2px;
    padding: 12px 16px;
    color: #fff;
    background-color: #666;
    cursor: pointer;
    align-items: center;
}
div.btn.on {
    background-color: #777;
    color: white;
}

/*
a.gallery {
	text-decoration: none;
	padding: 5px;
	float: left;
	width: 100%;
  position:
}
*/
/*
img.gallery {
    width: 20%;
    height: auto;
    border-radius: 1px;
    cursor: pointer;
    /* transition: .3s; */
/*}
*/

/*.container .gallery a img {
    float: left;
    width: 20%;
    height: auto;
    border: 1px solid #fff;
    -webkit-transition: -webkit-transform .15s ease;
    -moz-transition: -moz-transform .15s ease;
    -o-transition: -o-transform .15s ease;
    -ms-transition: -ms-transform .15s ease;
    transition: transform .15s ease;
    position: relative;
}*/

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.inlineFuck {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
}
/* Style buttons */
.button {
  border: none;
  outline: none;
  padding: 6px 8px;
  background-color: white;
  cursor: pointer;
}

/* Add a grey background color on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background color to the active button */
.btn.active {
  background-color: #666;
   color: white;
}

.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
}

/* Artist filter and image scale toolbar */
.gallery-toolbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    align-items: center;
    padding: .75rem .9rem;
    border: 1px solid rgba(144, 181, 255, .42);
    border-radius: .55rem;
    background: #0e0e0e;
}

.gallery-filter-group {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: .65rem;
    align-items: center;
}

.gallery-filter-title {
    flex: 0 0 auto;
    margin: 0;
    color: #fff;
    font-size: 1rem;
    white-space: nowrap;
}

.artist-filter-buttons {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: .35rem;
    overflow-x: auto;
    padding: .15rem 0;
    scrollbar-width: thin;
}

button.filter {
    float: none;
    flex: 0 0 auto;
    min-height: 38px;
    margin: 0;
    padding: .45rem .75rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: .35rem;
}

button.filter.active,
button.filter[aria-pressed="true"] {
    border-color: #90b5ff;
    background: #90b5ff;
    color: #090909;
}

.artist-search-field {
    flex: 0 0 180px;
}

.artist-search-field .form-control {
    min-height: 38px;
}

.gallery-scale-group {
    display: flex;
    flex: 0 0 auto;
    gap: .65rem;
    align-items: center;
    padding-left: 1rem;
    border-left: 1px solid rgba(144, 181, 255, .28);
}

.slider-label {
    margin: 0;
    white-space: nowrap;
}

.slider-controls {
    width: 145px;
}

.slider-controls .slider {
    width: 100%;
}

button.filter:focus-visible,
.artist-search-field input:focus-visible,
.slider:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.gallery-status {
    margin: 1rem 0 0;
}

.gallery-status:empty {
    display: none;
}

.gallery-error,
.gallery-empty {
    width: 100%;
    padding: 1.25rem;
    text-align: center;
}

#galleryData[aria-busy="true"] {
    opacity: .55;
    pointer-events: none;
}

@media (max-width: 991px) {
    .gallery-toolbar,
    .gallery-filter-group {
        flex-wrap: wrap;
    }

    .artist-filter-buttons {
        order: 3;
        flex-basis: 100%;
    }

    .artist-search-field {
        margin-left: auto;
    }

    .gallery-scale-group {
        width: 100%;
        padding-top: .65rem;
        padding-left: 0;
        border-top: 1px solid rgba(144, 181, 255, .28);
        border-left: 0;
    }
}

@media (max-width: 575px) {
    .artist-search-field {
        flex-basis: 100%;
        margin-left: 0;
    }

    .gallery-scale-group {
        justify-content: space-between;
    }

    .slider-controls {
        width: min(55vw, 190px);
    }
}

/* Keep gallery thumbnails proportional at every scale. */
#galleryData.gallery {
    --scaleImage: 13vh;
}

#galleryData.gallery > a.gallery {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: clamp(80px, var(--scaleImage), 360px);
    overflow: hidden;
}

#galleryData.gallery > a.gallery > img {
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

@media (max-width: 575px) {
    #galleryData.gallery > a.gallery {
        height: clamp(72px, var(--scaleImage), 52vw);
    }
}

/* Gallery management and uploader */
.gallery-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
    padding: .7rem .85rem;
    border: 1px solid rgba(144, 181, 255, .34);
    border-radius: .25rem;
    background: rgba(14, 14, 14, .94);
}

.gallery-select-all-label {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.gallery-bulk-bar #deleteSelectedImages {
    margin-left: auto;
}

.gallery-management-table th:first-child,
.gallery-management-table td:first-child {
    width: 44px;
    text-align: center;
}

.gallery-management-thumb {
    width: 150px;
    padding: .35rem !important;
}

.gallery-management-thumb img {
    display: block;
    width: 132px;
    height: 110px;
    object-fit: contain;
    background: #111;
}

.gallery-row-actions {
    min-width: 132px;
    white-space: nowrap;
}

.gallery-status-action {
    text-decoration: none;
}

.gallery-upload-page {
    color: #d7e0e1;
}

.gallery-upload-panel {
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid rgba(144, 181, 255, .35);
    border-radius: .25rem;
    background: rgba(39, 39, 39, .96);
}

.gallery-upload-panel .form-control {
    color: #f5f7f8;
    border-color: #555;
    background: #1b1b1b;
}

.gallery-upload-panel .form-control:focus {
    border-color: #90b5ff;
    box-shadow: 0 0 0 .2rem rgba(144, 181, 255, .18);
}

.gallery-upload-selection {
    min-height: 1.5rem;
    color: #90b5ff;
    font-weight: 600;
}

.gallery-edit-preview img {
    display: block;
    width: min(100%, 520px);
    max-height: 520px;
    object-fit: contain;
    background: #111;
}

@media (max-width: 575px) {
    .gallery-bulk-bar #deleteSelectedImages {
        width: 100%;
        margin-left: 0;
    }

    .gallery-management-thumb {
        width: 105px;
    }

    .gallery-management-thumb img {
        width: 90px;
        height: 90px;
    }
}

.gallery-toolbar,
.artist-search-field .form-control,
button.filter {
    border-radius: .25rem;
}


/* Multi-gallery management and per-file uploads */
.gallery-management-page,.gallery-upload-page { color:#d8e0e2; }
.gallery-management-intro,.gallery-muted-text,.gallery-management-table td,.gallery-management-table th { color:#c5d0d2!important; }
.gallery-management-table thead th { color:#edf2f3!important;background:rgba(25,25,25,.88); }
.gallery-manager-switcher { display:flex;align-items:end;justify-content:space-between;gap:1rem;padding:.85rem;border:1px solid rgba(255,255,255,.16);border-radius:.18rem;background:rgba(35,35,35,.72); }
.gallery-type-buttons { display:flex;flex-wrap:wrap;gap:.45rem; }
.gallery-type-buttons .btn-outline { color:#dce5e7!important;border-color:rgba(220,229,231,.42)!important;background:rgba(15,15,15,.28)!important; }
.gallery-type-buttons .btn-outline:hover,.gallery-type-buttons .btn-outline:focus { color:#fff!important;border-color:#90b5ff!important;background:rgba(144,181,255,.12)!important; }
.gallery-type-buttons .active { color:#fff!important;border-color:#90b5ff!important;background:rgba(144,181,255,.22)!important; }
.gallery-upload-help { padding:.8rem;border-left:3px solid rgba(144,181,255,.65);background:rgba(39,39,39,.72); }
.gallery-upload-queue { display:grid;gap:.6rem; }
.gallery-upload-item { padding:.75rem;border:1px solid rgba(255,255,255,.16);border-radius:.18rem;background:rgba(28,28,28,.88); }
.gallery-upload-item-head { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.45rem; }
.upload-file-name { overflow-wrap:anywhere;color:#eef3f4; }
.upload-file-size,.upload-state,.upload-detail { color:#b9c5c8;font-size:.84rem; }
.gallery-upload-item .progress { height:.55rem;background:#111; }
.gallery-upload-item.is-success { border-color:rgba(77,190,111,.58); }
.gallery-upload-item.is-error { border-color:rgba(231,91,91,.65); }
.gallery-upload-item.is-error .upload-detail,.gallery-upload-item.is-error .upload-state { color:#ffb2b2; }
.gallery-upload-summary a { font-weight:500; }
@media(max-width:767px){
 .gallery-manager-switcher{align-items:stretch;flex-direction:column}.gallery-manager-switcher>a{width:100%}.gallery-type-buttons{display:grid;grid-template-columns:1fr 1fr}.gallery-upload-item-head{align-items:flex-start;flex-direction:column;gap:.15rem}.gallery-management-table{min-width:760px}
}

/* 2026-08 mobile gallery correction: use square thumbnail frames without stretching. */
#galleryData.gallery {
    --gallery-thumb-size: 160px;
    align-items: flex-start;
    gap: 4px;
    padding: 4px;
}

#galleryData.gallery > a.gallery {
    display: block;
    flex: 0 0 var(--gallery-thumb-size);
    width: var(--gallery-thumb-size) !important;
    height: var(--gallery-thumb-size) !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .12rem;
    background: #111;
}

#galleryData.gallery > a.gallery > img,
#galleryData.gallery > a.gallery > img.gallery {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 575px) {
    .gallery-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .65rem;
        padding: .65rem;
    }

    .gallery-filter-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .55rem;
    }

    .gallery-filter-title {
        white-space: normal;
    }

    .artist-filter-buttons {
        order: initial;
        width: 100%;
        padding-bottom: .25rem;
    }

    .artist-search-field {
        width: 100%;
    }

    .gallery-scale-group,
    .gallery-scale-group .slider-label,
    .gallery-scale-group .slider-controls,
    .gallery-scale-group .slider {
        visibility: visible !important;
    }

    .gallery-scale-group {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        width: 100%;
        gap: .65rem;
        align-items: center;
        justify-content: initial;
        padding: .55rem 0 0;
        border-top: 1px solid rgba(144, 181, 255, .28);
    }

    .slider-controls {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .slider {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    #galleryData.gallery {
        --gallery-thumb-size: 110px;
        justify-content: center;
        gap: 3px;
        padding: 3px 0;
    }
}

/* 2026-08-07 gallery manager selector readability */
.gallery-type-buttons .btn-outline,
.gallery-type-buttons .btn-outline:link,
.gallery-type-buttons .btn-outline:visited{color:#f2f6f7!important;background:#171717!important;border:1px solid #7a878b!important;opacity:1!important;text-decoration:none!important}
.gallery-type-buttons .btn-outline:hover,
.gallery-type-buttons .btn-outline:focus-visible{color:#fff!important;background:#2d3542!important;border-color:#a8c5ff!important}
.gallery-type-buttons .btn-outline.active,
.gallery-type-buttons .btn-outline[aria-current="page"]{color:#fff!important;background:#394861!important;border-color:#b8ceff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important}
.gallery-management-page .admin-page-heading{text-align:left!important}