/* ============================================================================
   MyCMS app stylesheet — the single site-wide CSS file.
   Theme palettes (:root[data-theme="…"]), component styles, admin sidebar,
   Quill editor dark mode. Bootstrap 5 + Font Awesome come from CDN links in
   partials/head.php; this file only holds the app's own rules.
   ========================================================================== */

.navbar-blur { backdrop-filter: blur(10px); }

:root[data-theme="blue"] {
  --theme-bg-1: #cfdcff;
  --theme-surface: #e6eeff;
  --theme-link: #255fe0;
  --theme-link-hover: #1f4fb8;
  --theme-emphasis: #255fe0;
  --theme-primary: #255fe0;
  --theme-primary-rgb: 37, 95, 224;
  --theme-border: #b9c8f3;
}

:root[data-theme="red"] {
  --theme-bg-1: #f7d4d4;
  --theme-surface: #fae8e8;
  --theme-link: #c92a2a;
  --theme-link-hover: #a61f1f;
  --theme-emphasis: #c92a2a;
  --theme-primary: #c92a2a;
  --theme-primary-rgb: 201, 42, 42;
  --theme-border: #eec0c0;
}

:root[data-theme="green"] {
  --theme-bg-1: #cfe9da;
  --theme-surface: #e5f3ec;
  --theme-link: #2b8a3e;
  --theme-link-hover: #237035;
  --theme-emphasis: #2b8a3e;
  --theme-primary: #2b8a3e;
  --theme-primary-rgb: 43, 138, 62;
  --theme-border: #b7dec7;
}

:root[data-theme="orange"] {
  --theme-bg-1: #f3dfc4;
  --theme-surface: #f9eddc;
  --theme-link: #d97706;
  --theme-link-hover: #b36205;
  --theme-emphasis: #d97706;
  --theme-primary: #d97706;
  --theme-primary-rgb: 217, 119, 6;
  --theme-border: #e6c7a0;
}

:root[data-theme="teal"] {
  --theme-bg-1: #ccebe6;
  --theme-surface: #e3f5f1;
  --theme-link: #0f766e;
  --theme-link-hover: #0b5f59;
  --theme-emphasis: #0f766e;
  --theme-primary: #0f766e;
  --theme-primary-rgb: 15, 118, 110;
  --theme-border: #b1ddd7;
}

:root[data-theme="dark"] {
  --theme-bg-1: #0b1220;
  --theme-surface: #18212f;
  --theme-link: #8ab4f8;
  --theme-link-hover: #6a9fe9;
  --theme-emphasis: #8ab4f8;
  --theme-primary: #6a9fe9;
  --theme-primary-rgb: 106, 159, 233;
  --theme-border: #1f2a3a;
}

:root[data-theme="satanic"] {
  --theme-bg-1: #0a0a0a;
  --theme-surface: #161010;
  --theme-link: #dc2626;
  --theme-link-hover: #b91c1c;
  --theme-emphasis: #dc2626;
  --theme-primary: #dc2626;
  --theme-primary-rgb: 220, 38, 38;
  --theme-border: #3a1212;
}

:root[data-theme] html,
:root[data-theme] body,
:root[data-theme] body.bg-body {
  background-color: var(--theme-bg-1) !important;
}

:root[data-theme] .bg-body {
  background-color: var(--theme-surface) !important;
}

:root[data-theme] .bg-body,
:root[data-theme] .border,
:root[data-theme] .shadow-sm {
  background-color: var(--theme-surface);
}

:root[data-theme] .navbar-blur,
:root[data-theme] header,
:root[data-theme] footer {
  background-color: var(--theme-bg-1) !important;
}

:root[data-theme] footer.bg-body {
  background-color: var(--theme-bg-1) !important;
}

:root[data-theme] header.border-bottom,
:root[data-theme] footer.border-top {
  border-color: var(--theme-border);
}

:root[data-theme] {
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: var(--theme-primary-rgb);
  --bs-link-color: var(--theme-link);
  --bs-link-hover-color: var(--theme-link-hover);
  --bs-emphasis-color: var(--theme-emphasis);
  --bs-border-color: var(--theme-border);
  --bs-body-bg: var(--theme-bg-1);
}

:root[data-theme] .btn-primary {
  background-color: var(--theme-primary);
  border-color: var(--theme-primary);
  color: #ffffff;
}

:root[data-theme] .btn-outline-primary {
  color: var(--theme-primary);
  border-color: var(--theme-primary);
  background-color: transparent;
}

:root[data-theme] .btn-outline-primary:hover,
:root[data-theme] .btn-outline-primary:focus {
  background-color: rgba(var(--theme-primary-rgb), 0.12);
  color: var(--theme-primary);
}

:root[data-theme] .card,
:root[data-theme] .dropdown-menu,
:root[data-theme] .list-group-item,
:root[data-theme] .modal-content {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

:root[data-theme] .form-control,
:root[data-theme] .form-select {
  border-color: var(--theme-border);
}

:root[data-theme] body,
:root[data-theme] body.bg-body {
  color: #111827;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] body.bg-body,
:root[data-theme="satanic"] body,
:root[data-theme="satanic"] body.bg-body {
  color: #e5e7eb;
}

/* Quill editor dark mode */
:root[data-theme="dark"] .ql-toolbar.ql-snow,
:root[data-theme="satanic"] .ql-toolbar.ql-snow {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

:root[data-theme="dark"] .ql-container.ql-snow,
:root[data-theme="satanic"] .ql-container.ql-snow {
  border-color: var(--theme-border);
}

:root[data-theme="dark"] .ql-editor,
:root[data-theme="satanic"] .ql-editor {
  background-color: var(--theme-bg-1);
  color: #e5e7eb;
}

:root[data-theme="dark"] .ql-snow .ql-stroke,
:root[data-theme="satanic"] .ql-snow .ql-stroke {
  stroke: #e5e7eb;
}

:root[data-theme="dark"] .ql-snow .ql-fill,
:root[data-theme="dark"] .ql-snow .ql-stroke.ql-fill,
:root[data-theme="satanic"] .ql-snow .ql-fill,
:root[data-theme="satanic"] .ql-snow .ql-stroke.ql-fill {
  fill: #e5e7eb;
}

:root[data-theme="dark"] .ql-snow .ql-picker-label,
:root[data-theme="satanic"] .ql-snow .ql-picker-label {
  color: #e5e7eb;
}

:root[data-theme="dark"] .ql-snow .ql-picker-options,
:root[data-theme="satanic"] .ql-snow .ql-picker-options {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

:root[data-theme="dark"] .ql-snow .ql-picker-item,
:root[data-theme="satanic"] .ql-snow .ql-picker-item {
  color: #e5e7eb;
}

:root[data-theme="dark"] .ql-editor.ql-blank::before,
:root[data-theme="satanic"] .ql-editor.ql-blank::before {
  color: rgba(229, 231, 235, 0.5);
}

:root[data-theme] .text-body-secondary {
  color: rgba(17, 24, 39, 0.7) !important;
}

:root[data-theme="dark"] .text-body-secondary,
:root[data-theme="satanic"] .text-body-secondary {
  color: rgba(229, 231, 235, 0.7) !important;
}

:root[data-theme] .dropdown-menu {
  color: inherit;
}

:root[data-theme] a,
:root[data-theme] .navbar .nav-link {
  color: var(--theme-link);
}

:root[data-theme] a:hover,
:root[data-theme] a:focus,
:root[data-theme] .navbar .nav-link:hover,
:root[data-theme] .navbar .nav-link:focus {
  color: var(--theme-link-hover);
}

:root[data-theme] .navbar .nav-link[aria-current="page"] {
  color: var(--theme-emphasis);
}

.navbar .nav-link {
  transition: color 160ms ease, font-weight 160ms ease, opacity 160ms ease;
}

.navbar .nav-link[aria-current="page"] {
  font-weight: 700;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.theme-option[data-theme="blue"] {
  background-color: #2b6cff;
  border-color: #2b6cff;
  color: #ffffff;
}

.theme-option[data-theme="red"] {
  background-color: #e03131;
  border-color: #e03131;
  color: #ffffff;
}

.theme-option[data-theme="green"] {
  background-color: #2f9e44;
  border-color: #2f9e44;
  color: #ffffff;
}

.theme-option[data-theme="orange"] {
  background-color: #f08c00;
  border-color: #f08c00;
  color: #1f1300;
}

.theme-option[data-theme="teal"] {
  background-color: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}

.theme-option[data-theme="dark"] {
  background-color: #111827;
  border-color: #0f172a;
  color: #e5e7eb;
}

.theme-option[data-theme="satanic"] {
  background-color: #0a0a0a;
  border-color: #dc2626;
  color: #dc2626;
}

.theme-option:hover,
.theme-option:focus {
  filter: brightness(0.95);
}

.theme-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

/* Admin Sidebar Dropdown Styles */
.admin-sidebar-dropdown {
  position: relative;
}

.admin-sidebar-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 150px;
  margin: 0;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  background: var(--bs-body-bg, #fff);
  z-index: 1000;
  border: 1px solid var(--bs-border-color, #dee2e6);
}

.admin-sidebar-dropdown:hover .admin-sidebar-submenu {
  display: block;
}

.admin-sidebar-submenu .dropdown-item {
  padding: 0.5rem 1rem;
}

.admin-sidebar-submenu .dropdown-item:hover {
  background: var(--bs-tertiary-bg, #f8f9fa);
}

/* Mobile (<lg): the admin sidebar collapses behind a hamburger (partials/admin-sidebar.php).
   The hover-flyout submenus can't be reached by touch, so render them inline/static and
   always visible; the parent nav-link still navigates to its section. */
@media (max-width: 991.98px) {
  .admin-sidebar-submenu {
    position: static;
    display: block;
    left: auto;
    top: auto;
    min-width: 0;
    margin: 0;
    padding-left: 1.5rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* Header profile dropdown on mobile. The header is navbar-expand-lg, so on <lg the whole
   user-menu collapses INTO the navbar and the avatar sits near the LEFT of that stacked block;
   `dropdown-menu-end` then right-aligns the 280px menu to a left-positioned button and pushes
   it off the LEFT edge. Anchor-relative positioning can't reliably fix that, so on <lg pin the
   menu as a FIXED panel (full width minus margins) that can't overflow either edge. NB: the
   header's `.navbar-blur` backdrop-filter creates a containing block, so `position: fixed` here
   anchors to the full-width sticky <header> (not the small .dropdown wrapper) — which is exactly
   what we want. Scoped to the profile menu ONLY — language/theme dropdowns keep their 56px. */
@media (max-width: 991.98px) {
  .user-profile-menu {
    position: fixed !important;
    top: 4rem !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100vh - 5rem) !important;
    overflow-y: auto !important;
    z-index: 1080 !important;   /* above the sticky-top header (1020) */
  }
}

/* =========================================================
   MAIN SIDEBAR
   ========================================================= */

:root {
  --sidebar-width: 260px;
  --sidebar-transition-duration: 250ms;
  --sidebar-z-index: 1040;
}

.site-wrapper {
  position: relative;
  min-height: 0;
}

.site-main {
  min-width: 0;
}

.main-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background-color: var(--theme-surface, var(--bs-body-bg));
  border-right: 1px solid var(--theme-border, var(--bs-border-color));
  transform: translateX(-100%);
  transition: transform var(--sidebar-transition-duration) ease;
  z-index: var(--sidebar-z-index);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  min-height: 57px;
  flex-shrink: 0;
}

.sidebar-nav {
  flex-grow: 1;
  overflow-y: auto;
}

.sidebar-nav .nav {
  padding: 0.5rem 0;
}

.sidebar-link {
  color: var(--theme-link, var(--bs-body-color));
  border-left: 3px solid transparent;
  transition: all 160ms ease;
}

.sidebar-link:hover,
.sidebar-link:focus {
  background-color: rgba(var(--theme-primary-rgb, 0, 0, 0), 0.08);
  color: var(--theme-link-hover, var(--bs-emphasis-color));
  border-left-color: var(--theme-primary, var(--bs-primary));
}

.sidebar-link.active {
  background-color: rgba(var(--theme-primary-rgb, 0, 0, 0), 0.12);
  color: var(--theme-emphasis, var(--bs-emphasis-color));
  font-weight: 600;
  border-left-color: var(--theme-primary, var(--bs-primary));
}

.sidebar-link i {
  width: 20px;
  text-align: center;
}

.sidebar-open .main-sidebar {
  transform: translateX(0);
}

.sidebar-backdrop {
  display: none;
}

.sidebar-toggle-btn {
  flex-shrink: 0;
}

.sidebar-toggle-btn i {
  transition: transform 200ms ease;
}

.sidebar-open .sidebar-toggle-btn i {
  transform: rotate(90deg);
}

/* Desktop (>= 992px) */
@media (min-width: 992px) {
  .main-sidebar {
    top: 0;
    padding-top: 0;
  }

  .sidebar-close-btn {
    display: none !important;
  }

  .sidebar-header {
    min-height: auto;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Mobile (< 992px) */
@media (max-width: 991.98px) {
  .main-sidebar {
    top: 0;
    padding-top: 0;
  }
}

/* Theme Integration */
:root[data-theme] .main-sidebar {
  background-color: var(--theme-surface);
  border-right-color: var(--theme-border);
}

:root[data-theme] .sidebar-header {
  border-bottom-color: var(--theme-border);
}

:root[data-theme] .sidebar-link {
  color: var(--theme-link);
}

:root[data-theme] .sidebar-link:hover,
:root[data-theme] .sidebar-link:focus {
  color: var(--theme-link-hover);
}

:root[data-theme] .sidebar-link.active {
  color: var(--theme-emphasis);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .main-sidebar,
  .sidebar-link,
  .sidebar-toggle-btn i {
    transition: none;
  }
}

/* Focus Styles */
.sidebar-link:focus-visible {
  outline: 2px solid var(--theme-primary, var(--bs-primary));
  outline-offset: -2px;
}

.sidebar-toggle-btn:focus-visible,
.sidebar-close-btn:focus-visible {
  outline: 2px solid var(--theme-primary, var(--bs-primary));
  outline-offset: 2px;
}

/* ── Content images (single images in posts/pages) ── */
.d-flex.flex-column > p > img,
.d-flex.flex-column > img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ── Gallery Embed ── */
.gallery-embed {
  margin: 1.5rem 0;
}

.gallery-embed__title {
  margin-bottom: 0.75rem;
}

/* Masonry layout */
.gallery-embed__masonry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gallery-embed__masonry .gallery-embed__item {
  display: block;
  flex: 0 0 calc(33.333% - 0.334rem);
  border-radius: 0.5rem;
  overflow: hidden;
  line-height: 0;
}

.gallery-embed__masonry .gallery-embed__item img {
  width: 100%;
  height: auto;
  transition: transform 200ms ease;
}

.gallery-embed__masonry .gallery-embed__item:hover img {
  transform: scale(1.03);
}

/* Grid layout */
.gallery-embed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.gallery-embed__grid .gallery-embed__item {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  line-height: 0;
  aspect-ratio: 1;
}

.gallery-embed__grid .gallery-embed__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}

.gallery-embed__grid .gallery-embed__item:hover img {
  transform: scale(1.03);
}

/* Carousel layout */
.gallery-embed__carousel {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}

.gallery-embed__track {
  display: flex;
  transition: transform 300ms ease;
}

.gallery-embed__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.gallery-embed__slide img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-embed__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  font-size: 2rem;
  line-height: 1;
  padding: 0.25rem 0.6rem;
  border-radius: 0.375rem;
  cursor: pointer;
  z-index: 2;
}

.gallery-embed__nav:hover {
  background: rgba(0, 0, 0, 0.75);
}

.gallery-embed__nav--prev {
  left: 0.5rem;
}

.gallery-embed__nav--next {
  right: 0.5rem;
}

/* Image hover info bar */
.gallery-embed__item {
  position: relative;
}

.gallery-embed__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  border-radius: 0 0 0.5rem 0.5rem;
}

.gallery-embed__item:hover .gallery-embed__info {
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .gallery-embed__masonry .gallery-embed__item {
    flex: 0 0 calc(50% - 0.25rem);
  }
  .gallery-embed__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Gallery Lightbox ── */
.gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}

.gallery-lightbox--open {
  display: flex;
}

.gallery-lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 0.375rem;
  user-select: none;
}

.gallery-lightbox__caption {
  color: #fff;
  text-align: center;
  padding: 0.75rem 1rem 0;
  font-size: 0.95rem;
  font-weight: 700;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-lightbox__description {
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 0.25rem 1rem 0;
  font-size: 0.85rem;
  max-width: 90vw;
}

.gallery-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  opacity: 0.8;
  transition: opacity 150ms ease;
}

.gallery-lightbox__close:hover {
  opacity: 1;
}

.gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  z-index: 10;
  transition: background 150ms ease;
}

.gallery-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.3);
}

.gallery-lightbox__nav--prev {
  left: 1rem;
}

.gallery-lightbox__nav--next {
  right: 1rem;
}

/* ── GLightbox caption overrides (item / picture / band / movie popups) ──
   GLightbox's "clean" skin renders the caption in a white box with dark text.
   We want the title + description shown BELOW the image, in white, with no
   background box. GLightbox's own CSS loads after style.css, so these need
   !important to win. */
.glightbox-clean .gslide-description {
  background: transparent !important;
  box-shadow: none !important;
}
.glightbox-clean .gslide-title,
.glightbox-clean .gslide-desc {
  color: #fff !important;
  text-align: center;
}
.glightbox-clean .gslide-desc {
  opacity: 0.9;
}

/* ── Dropdown clipping inside responsive tables ──
   Bootstrap's .table-responsive uses overflow-x: auto, which forces
   overflow-y to compute to auto as well, clipping the open per-row actions
   dropdown on the last/only row. While a menu is open, drop the clip so the
   menu shows fully; horizontal scrolling for wide tables is unaffected when
   no menu is open. */
.table-responsive:has(.dropdown-menu.show) {
  overflow: visible;
}

/* ── Collection item card ──
   Moved out of partials/collection-item-card.php, where it was an inline <style>
   emitted in the body (invalid HTML5 — W3C "style not allowed as child of div").
   Cover fills the card; info overlays on top. Title + band stay visible over a
   bottom gradient; the rest (country/label/badges) reveals on hover. */
.ci-card { position: relative; }
/* Album covers crop to the standard CD cover ratio (1:1 square) for uniform cards. */
.ci-card__cover { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ci-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; }
.ci-card__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: .75rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 35%, rgba(0,0,0,0) 70%);
  transition: background .25s ease;
  pointer-events: none; /* let clicks fall through to the cover link… */
}
.ci-card:hover .ci-card__overlay {
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.4) 100%);
}
.ci-card__overlay a { pointer-events: auto; } /* …except real links */
.ci-card__title { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.ci-card__band { color: rgba(255,255,255,.85); }
.ci-card__band:hover { color: #fff; }
.ci-card__details {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .25s ease, opacity .25s ease;
  color: rgba(255,255,255,.9);
}
.ci-card:hover .ci-card__details, .ci-card:focus-within .ci-card__details {
  max-height: 200px; opacity: 1;
}
/* Year chip — fixed colors (not theme-dependent) so it stays legible on the dark
   cover overlay across every theme, incl. dark & satanic. */
.ci-card__year { background-color: rgba(255, 255, 255, .92); color: #1a1a1a; }

/* ── In-body <style> sweep (2026-07-07): blocks moved out of page/partial bodies
   (invalid HTML5 — W3C "style not allowed as child of div"). All static + unique
   selectors. NOT moved: media-upload.php / galleries/admin-gallery-edit.php (shared
   .upload-item/.drop-zone-active with different values → need namespacing) and
   fonts.php (PHP-interpolated @font-face → needs head injection). ── */

/* Splash screen (partials/splash-screen.php; rendered on the root '/' only) */
#splashScreen {
    position: fixed; inset: 0; z-index: 20000;
    overflow: hidden; background: #000; color: #fff;
}
#splashScreen .splash-mosaic {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 150px; gap: 3px;
}
#splashScreen .splash-mosaic img { width: 100%; height: 150px; object-fit: cover; display: block; }
#splashScreen .splash-welcome {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; max-width: 680px; padding: 2.25rem 3rem;
    background: rgba(0, 0, 0, 0.55); border-radius: 14px;
    text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
}
#splashScreen .splash-welcome__title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3.25rem; font-weight: 700; margin-bottom: 1.25rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 255, 255, 0.25);
}
#splashScreen .splash-welcome__message {
    font-size: 1.15rem; line-height: 1.9; text-align: left;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
#splashScreen .splash-cover {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 2rem;
}
@media (max-width: 575.98px) {
    #splashScreen .splash-welcome { padding: 1.5rem; }
    #splashScreen .splash-welcome__title { font-size: 2.25rem; }
    #splashScreen .splash-mosaic { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: 100px; }
    #splashScreen .splash-mosaic img { height: 100px; }
}

/* Movie poster cards (pages/collection/collection-movies.php) */
.movie-poster-card { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 0.75rem; background: var(--bs-tertiary-bg); }
/* Direct-child selector so the cover fills the card but the nested flag in .meta-hover keeps its own size. */
.movie-poster-card > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.movie-poster-card:hover > img { transform: scale(1.03); }
.movie-poster-card .placeholder-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.movie-poster-card .overlay {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,0) 100%);
  color: #fff; padding: 1.25rem .75rem .5rem; pointer-events: none;
}
.movie-poster-card .overlay h3 { font-size: 0.95rem; line-height: 1.15; margin: 0 0 .15rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.movie-poster-card .overlay .small { color: rgba(255,255,255,.85); }
.movie-poster-card .meta-hover {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.78); color: #fff; padding: 1rem;
  opacity: 0; transition: opacity .2s ease; display: flex; flex-direction: column; gap: .35rem;
  font-size: 0.8rem; overflow: hidden;
}
.movie-poster-card:hover .meta-hover { opacity: 1; }

/* Navigation tree (pages/admin/admin-navigation.php) */
.nav-tree-item { transition: background-color 0.15s; user-select: none; }
.nav-tree-item:hover { background-color: var(--bs-tertiary-bg); }
.nav-tree-item.drag-over-above { border-top: 3px solid var(--bs-primary) !important; }
.nav-tree-item.drag-over-below { border-bottom: 3px solid var(--bs-primary) !important; }
.nav-tree-item.drag-over-nest { background-color: rgba(var(--bs-primary-rgb), 0.1); }
.nav-tree-item.dragging { opacity: 0.4; }
.nav-tree { min-height: 40px; }
.drag-handle:hover { color: var(--bs-primary) !important; }

/* Message rich-text editor heights (pages/messages/compose.php, conversation.php) */
#composeEditorWrap .ql-editor { min-height: 350px; }
#replyEditorWrap .ql-editor { min-height: 250px; }

/* Media drag-and-drop upload UI — moved from in-body <style> (W3C).
   .drop-zone-active is byte-identical in media-upload.php and galleries/admin-gallery-edit.php
   → defined once. .upload-item differs between the two (spacing/font-size), so it is
   scoped under each page's section wrapper to preserve both exactly. */
.drop-zone-active {
  border-color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}
.drag-over { opacity: 0.4; }
/* pages/media/media-upload.php */
.media-upload-page .upload-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}
.upload-item-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.375rem;
  background: #f0f0f0;
}
.upload-item-info { flex: 1; min-width: 0; }
.upload-item-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* pages/galleries/admin-gallery-edit.php (selector name kept for continuity) */
.media-gallery-edit-page .upload-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
}

/* Metal-bands font previews (pages/collection/fonts.php) — moved from in-body <style> (W3C).
   The dynamic @font-face rules (one per uploaded font) are JS-injected into <head> by that page. */
.font-preview { font-size: 48px; line-height: 1.1; }
.font-sample { font-size: 0.95rem; line-height: 1.15; color: var(--bs-body-color); opacity: 0.85; }

/* Entity hover ID-card popover (assets/js/entity-card.js) — band/artist summary on hover. */
.entity-card {
  position: absolute;
  z-index: 1080;
  width: 260px;
  max-width: calc(100vw - 24px);
  padding: 0.75rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
  font-size: 0.875rem;
}
.entity-card__head { display: flex; align-items: center; gap: 0.6rem; }
.entity-card__thumb {
  width: 48px; height: 48px; flex-shrink: 0;
  object-fit: cover; border-radius: 0.5rem; background: var(--bs-tertiary-bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bs-secondary-color, #6c757d);
}
.entity-card__title { font-weight: 600; line-height: 1.2; }
.entity-card__facts { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; }
.entity-card__fact { color: var(--bs-secondary-color, #6c757d); }

/* Combined date+time picker for datetime-local fields (assets/js/time-picker.js). */
/* Hide the browser's native datetime-local calendar indicator so there's only ONE control —
   the combined picker's own button. (WebKit/Blink; Firefox has no such indicator.) */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  pointer-events: none;
  width: 0;
  margin: 0;
}
/* The button sits INSIDE the field on the right (like a native calendar indicator). */
.dtp-field { position: relative; display: block; }
.dtp-field > input { padding-right: 2.25rem; }
.dtp-btn {
  position: absolute; top: 50%; right: 0.4rem; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; line-height: 1;
  padding: 0.2rem 0.35rem; border-radius: 0.25rem; color: var(--bs-secondary-color, #6c757d);
}
.dtp-btn:hover { color: var(--bs-primary); }
.dtp-pop {
  position: absolute; z-index: 1080; width: 280px; max-width: calc(100vw - 1rem);
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); padding: 0.5rem;
}
.dtp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.dtp-title { font-weight: 600; font-size: 0.9rem; }
.dtp-nav { border: 0; background: transparent; cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 0 0.5rem; color: var(--bs-body-color); }
.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.dtp-dow span { text-align: center; font-size: 0.7rem; color: var(--bs-secondary-color, #6c757d); padding: 0.15rem 0; }
.dtp-day, .dtp-empty { text-align: center; padding: 0.3rem 0; font-size: 0.8rem; border: 0; background: transparent; border-radius: 0.3rem; cursor: pointer; color: var(--bs-body-color); }
.dtp-day:hover { background: var(--bs-tertiary-bg); }
.dtp-time-label { font-size: 0.75rem; color: var(--bs-secondary-color, #6c757d); margin: 0.5rem 0 0.2rem; }
.dtp-time-wheels { display: flex; gap: 0.5rem; }
.dtp-wheel-col { flex: 1; }
.dtp-wheel-hd { text-align: center; font-size: 0.7rem; color: var(--bs-secondary-color, #6c757d); margin-bottom: 0.15rem; }
.dtp-wheel { position: relative; height: 132px; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: 0.375rem; }
.dtp-wv { display: block; width: 100%; border: 0; background: transparent; padding: 0.3rem 0; font-size: 0.85rem; text-align: center; cursor: pointer; color: var(--bs-body-color); }
.dtp-wv:hover { background: var(--bs-tertiary-bg); }
.dtp-sel { background: var(--bs-primary) !important; color: #fff !important; }

/* Justified long-form body copy — applied to entity descriptions + page/news/announcement
   bodies only (not labels/tables). hyphens:auto avoids large inter-word gaps in narrow columns. */
.prose { text-align: justify; hyphens: auto; }

/* Gallery display types (pages/galleries/gallery-detail.php renders per gallery.display_type). */
.gallery-masonry { column-count: 2; column-gap: 1rem; }
@media (min-width: 768px)  { .gallery-masonry { column-count: 3; } }
@media (min-width: 1200px) { .gallery-masonry { column-count: 4; } }
.gallery-masonry-item { break-inside: avoid; -webkit-column-break-inside: avoid; }
.gallery-carousel-img { max-height: 70vh; object-fit: contain; background: var(--bs-tertiary-bg); }

/* 5.1 — Dark & Vampire (satanic) themes: Bootstrap's `.text-bg-light` badge keeps a
   near-white background, and when it also carries `.text-body-secondary` the text turns
   a muted light grey → light-on-light, illegible (the quiz "your answer" pill). Re-skin
   `.text-bg-light` badges for the two dark themes to a readable surface + body colour,
   and neutralise the muted-text utility on them. */
:root[data-theme="dark"] .badge.text-bg-light,
:root[data-theme="satanic"] .badge.text-bg-light {
  background-color: var(--theme-surface) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--theme-border);
}
:root[data-theme="dark"] .badge.text-bg-light.text-body-secondary,
:root[data-theme="satanic"] .badge.text-bg-light.text-body-secondary {
  color: var(--bs-body-color) !important;
}

/* 5.3 — The cradle/grave A-Z index links jump to `#{cradle,grave}-letter-X` headings, but
   the sticky top navbar (partials/header.php `.sticky-top`) overlapped the target so the
   jump landed hidden underneath — read as "the A-Z menu does nothing". scroll-margin-top
   offsets the anchor by roughly the navbar height so the heading lands in view. */
[id^="cradle-letter-"],
[id^="grave-letter-"] { scroll-margin-top: 5rem; }