/* /css/Styles.css */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Your palette */
  --gallery-accent: #3F6184;

  /* Header palette */
  --header-bg: #5c5c8a;
  --header-fg: #d1d1e0;

  /* Gallery controls bar */
  --gallery-bar-bg: var(--header-bg);         /* fallback */
  --gallery-bar-tint: var(--header-bg);   
  --header-height: 56px;                       /* tune if your header height differs */
}

/* Sitewide */
body {
  background: #d1d1e0;
  font-family: Arial, sans-serif;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--header-bg);
  color: var(--header-fg);
}
.site-header .navbar .nav-link,
.site-header .navbar-brand {
  color: var(--header-fg);
}
.site-header .btn-outline-light {
  --bs-btn-hover-bg: rgba(255,255,255,.15);
}
/* readable on dark header */
.site-header a { color: var(--header-fg); }
.site-header .btn-outline-secondary {
  color: var(--header-fg);
  border-color: rgba(255,255,255,.65);
}
.site-header .btn-outline-secondary:hover {
  background: rgba(255,255,255,.15);
}

/* ---------- Section wrappers ---------- */
section { padding: 50px 0; }

/* ---------- Gallery title ---------- */
.gallery-title {
  font-size: 36px;
  color: var(--gallery-accent);
  text-align: center;
  font-weight: 500;
  margin-bottom: 1.75rem;
}

/* ---------- (Legacy) Filter buttons ----------
   Kept in case you reuse them elsewhere.
   Safe to delete if not used. */
.filter-button {
  font-size: 18px;
  border: 2px solid var(--gallery-accent);
  padding: 6px 12px;
  color: var(--gallery-accent);
  background: transparent;
  margin: 0 .25rem 1rem;
  border-radius: .375rem;
  cursor: pointer;
}
.filter-button:hover,
.filter-button:focus,
.filter-button.active {
  color: #fff;
  background-color: var(--gallery-accent);
  outline: none;
}

/* -----------------GalleryAdmin.php Stuff -----------------*/
    /* Distinct styling for the Select Media card in GalleryAdmin */
    .select-media-card {
        background-color: var(--bs-tertiary-bg); /* matches Bootstrap theme */
        border-radius: 0.5rem; /* slightly rounded corners */
        border: 1px solid var(--bs-border-color);
    }

    /* Make the section heading stand out a bit */
    .select-media-card .card-header h5 {
        font-weight: 600;
        font-size: 1.1rem;
        margin: 0;
    }

    /* Slight padding tweak for cleaner spacing */
    .select-media-card .card-body {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .set-attributes-card {
        background-color: #b3c6ff; /* Maybe make this a variable, someday */
        border-radius: 0.5rem;
        border: 1px solid var(--bs-border-color);
    }

    .set-attributes-card .card-header h5 {
        font-weight: 600;
        font-size: 1.1rem;
        margin: 0;
    }

    .set-attributes-card .card-body {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Set Attributes footer: subtle separation from body */
    .set-attributes-card .card-footer {
        background-color: #b3c6ff; /* set to match the .set-attributes-card bg, above */
        border-top: 1px solid var(--bs-border-color);
        padding: .75rem 1rem;
    }

    /* Keep actions tidy on small screens */
    .set-attributes-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: center;
    }
    .set-attributes-actions .spacer {
        flex: 1 1 auto;  /* pushes Prev/Next to the right */
    }

/* ---------------- GalleryAdmin.php popup image ---------------- */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.popup img {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* ---------- Grid items ---------- */
.gallery-grid .gallery-item { position: relative; }

/* Thumbnails */
.gallery-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;        /* uniform tiles */
  object-fit: contain;         /* no cropping; switch to 'cover' for full-bleed */
  background-color: transparent;
  display: block;
  border-radius: 6px;
}

/* Optional hover overlay */
.gallery-item .img-info {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  color: #fff;
  padding: 16px;
  opacity: 0;
  transition: opacity .25s ease;
  border-radius: 6px;
}
.gallery-item:hover .img-info { opacity: 1; }
.gallery-item .img-info h4 { margin: 0 0 .25rem; font-size: 1rem; }
.gallery-item .img-info p  { margin: 0; font-size: .875rem; }

/* Cards (if used elsewhere) */
.media-card { cursor: pointer; transition: transform .15s ease; }
.media-card:hover { transform: translateY(-2px); }

/* Ensure videos behave like images if used as thumbs */
.gallery-thumb[type="video"],
.gallery-item video.gallery-thumb { background: #000; }

/* ---------- Fancybox tweaks ---------- */
.fancybox__caption {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  z-index: 99999;                 /* above the slide */
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: .5rem 1rem;
  border: 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
}
.fancy-cap-inner { 
    max-width: 1100px; 
    margin: 0 auto; 
}
.fancybox__container { 
    padding-bottom: 72px !important; /* leave room for the caption, matching caption height */
}

/* ---------- Tom Select dropdown layering ---------- */
.ts-dropdown,
.ts-dropdown.upload-tags-dropdown {
  background: #fff !important;
  z-index: 2050;                 /* above cards/nav */
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  opacity: 1 !important;
}
/* Prevent clipping if the select sits inside a card/container */
.upload-card,
.upload-card .card-body { overflow: visible !important; }

/* ---------- Gallery controls (navbar-style) ---------- */
.gallery-controls .nav-label {
  color: var(--header-fg);       /* same color as your header text */
  font-weight: 600;
  font-size: 1.15rem;
  cursor: default;
  pointer-events: none;          /* not clickable */
}
.gallery-controls .nav-link {
  color: var(--header-fg);
  padding: .5rem .75rem;
  border-radius: .5rem;
}
.gallery-controls .nav-link:hover,
.gallery-controls .nav-link:focus {
  background: rgba(0,0,0,.05);
  text-decoration: none;
}
.gallery-controls .dropdown-menu {
  border-radius: .75rem;
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.15);
}
.gallery-controls .dropdown-item.active,
.gallery-controls .dropdown-item:active {
  background-color: var(--bs-primary);
  color: #fff
}
.dropdown-buttons-top {
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin: -0.25rem -0.5rem 0.5rem;
  padding: 0.5rem 0.5rem 0.75rem;
}


/* ---------- Floating gallery controls bar ---------- */
.gallery-controls-bar {
  background: var(--gallery-bar-tint);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  padding: .5rem .75rem;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
@supports (backdrop-filter: blur(4px)) {
  .gallery-controls-bar {
    background: color-mix(in oklab, var(--gallery-bar-tint) 85%, transparent);
    backdrop-filter: blur(4px);
  }
}

/* Optional: sticky controls under header */
@media (min-width: 768px) {
  .gallery-controls-bar.is-sticky {
    position: sticky;
    top: calc(var(--header-height) + .5rem);
    z-index: 1010; /* above content, below header */
  }
}

/* Small, circular help icon for tooltips/popovers */
.help-tip {
  color: #c00;
  text-decoration: none;
  line-height: 1;
  cursor: help;
}
.help-tip:hover {
  color: #a00 
}
.help-tip::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-weight: 700;
  font-size: .7rem;
  margin-left: .35rem;
}
.popover.help-popover { max-width: 320px; }


/* Darker, more visible checkboxes, intended use in Upload.php */
.form-check-input {
  border-color: #555;      /* dark border */
  background-color: #eee;  /* light fill */
}
.form-check-input:checked {
  background-color: #444;  /* dark fill when checked */
  border-color: #222;      /* even darker border */
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(68, 68, 68, 0.25);
}
.site-header .user-name {
  text-transform: none !important;
  font-variant: normal !important;
}
/* Gaming modal stuff */
    .modal-dialog.game-modal .modal-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 2.5rem);
    }

    .modal-dialog.game-modal .modal-body {
        padding: 0;
        display: flex;
    }

    .modal-dialog.game-modal .modal-body iframe {
        flex: 1 1 auto;
        width: 100%;
        /* height is set dynamically via JS */
}