/* ============================================================
   Admin Background Gallery — superadmin editor for the background
   slideshow and front page category rows.
   ============================================================ */

/* Bootstrap's .tab-content has no padding, so the first element sat flush
   against the tab strip's bottom border. This is the page-level tabset, not
   the boxed one admin_settings uses inside a form field, so it wants vertical
   breathing room only — no border or horizontal inset, which would misalign
   the content from the tabs above it. */
.admin-gallery .tab-content { padding-top: 20px; }

.admin-gallery .slide-grid { list-style: none; padding: 0; margin: 0 0 15px 0; }
.admin-gallery .slide-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; margin-bottom: 6px; background: #fff;
    border: 1px solid #e7eaec; border-left: 3px solid transparent;
    cursor: move; position: relative;
}
.admin-gallery .slide-card.active { border-left-color: #1ab394; }
.admin-gallery .slide-card img { width: 90px; height: 50px; object-fit: cover; flex: none; }
/* Applied by galleryThumbFallback when no generated thumb exists and the card
   is showing the full-size original instead. Run
   scripts/backfill-gallery-thumbnails.php to clear these. */
.admin-gallery .slide-card img.thumb-fallback { outline: 1px dashed #c8c8c8; outline-offset: -1px; }
.admin-gallery .slide-card .meta { flex: 1; min-width: 0; }
.admin-gallery .slide-card .filename { font-size: 12px; word-break: break-all; }
.admin-gallery .slide-card .sub { font-size: 11px; color: #999; }
.admin-gallery .slide-card .remove { flex: none; }
.admin-gallery .slide-grid .empty { padding: 15px; color: #999; }

.admin-gallery .upload-row { margin-bottom: 20px; }
.admin-gallery .upload-row .save-hint { color: #aaa; font-size: 11px; margin-left: 10px; }
.admin-gallery .orphan-header,
.admin-gallery .playback-header {
    font-size: 13px; text-transform: uppercase; color: #676a6c;
    border-bottom: 1px solid #e7eaec; padding-bottom: 6px; margin-top: 25px;
}
.admin-gallery .orphan-list { list-style: none; padding: 0; }
.admin-gallery .orphan-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid #f1f1f1; font-size: 12px;
}
.admin-gallery .orphan-list img { width: 60px; height: 34px; object-fit: cover; flex: none; }
.admin-gallery .orphan-list .filename { flex: 1; word-break: break-all; }
.admin-gallery .orphan-list .dims { color: #999; white-space: nowrap; }

.admin-gallery .slide-preview { position: relative; margin-bottom: 15px; background: #777; }
.admin-gallery .slide-preview > img { width: 100%; display: block; }
.admin-gallery .preview-chrome { position: absolute; inset: 0; display: flex; flex-direction: column; }
.admin-gallery .preview-header {
    background: rgba(0,0,0,0.85); color: #fff; padding: 8px 12px;
    font-weight: bold; text-transform: uppercase; font-size: 12px;
}
.admin-gallery .preview-body { margin: 12px; background: rgba(255,255,255,0.95); padding: 12px; }
.admin-gallery .preview-body h4 { margin-top: 0; }
.admin-gallery .preview-body p { margin-bottom: 0; font-size: 12px; }

.admin-gallery .frontpage-table { background: #fff; }
.admin-gallery .dirty-pill {
    background: #f8ac59; color: #fff; font-size: 11px;
    padding: 2px 8px; border-radius: 3px; vertical-align: middle;
}

/* Sibling-matched: same visual intent as .admin-settings-editor's rules
   for these four classes (public/css/admin_settings.css), scoped to
   .admin-gallery since this view has no "-editor" wrapper. */
.admin-gallery .editor-subheader {
    color: #999; font-size: 12px; margin: 0 0 18px 0;
    padding-bottom: 14px; border-bottom: 1px solid #f0f0f0;
}
.admin-gallery .empty-state {
    background: #fff; border: 1px dashed #ddd; padding: 48px 24px;
    text-align: center; border-radius: 6px; color: #888;
}
.admin-gallery .empty-state .fa-picture-o {
    font-size: 44px; color: #d4d4d4; margin-bottom: 14px;
}
.admin-gallery .empty-state h3 {
    margin-top: 0; margin-bottom: 6px; color: #555;
    font-size: 16px; font-weight: 500;
}
.admin-gallery .form-actions {
    margin-top: 22px; padding: 14px 16px; border-top: 1px solid #e5e5e5;
    background: #fafafa; border-radius: 4px;
    display: flex; align-items: center; gap: 10px;
}
.admin-gallery .form-actions .btn-primary:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(66, 139, 202, 0.25);
}
.admin-gallery .form-actions .btn-primary:disabled {
    background: #cfd6df; border-color: #cfd6df; opacity: 0.85;
}
.admin-gallery .form-actions .save-hint {
    color: #aaa; font-size: 11px; margin-left: auto;
}