/* Small custom layer on top of Bootstrap. Keep this minimal. */

/* Square, cropped thumbnails for the collection grid. */
.thumb {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  background-color: var(--bs-tertiary-bg);
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-empty {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: .85rem;
  background: var(--bs-tertiary-bg);
}

/* .thumb is itself position:relative (for its spinner overlay), which puts
   it in the same auto-z-index paint layer as the match-badge that precedes
   it in the DOM - without an explicit z-index here, .thumb paints on top and
   fully covers the badge instead of the badge overlaying the photo. */
.match-badge {
  z-index: 1;
}

/* Remove button overlaid on a photo preview needs its own backdrop for
   contrast against arbitrary photo content. */
.photo-item .btn-close {
  background-color: rgba(255, 255, 255, .85);
  border-radius: 50%;
  opacity: 1;
}

/* Location autocomplete menu. Bootstrap's .dropdown-menu defaults its
   background to var(--bs-body-bg) - the same color as the page - and ships
   with no shadow, so on its own it's invisible rather than a readable,
   occluding card floating over the fields below it. */
.autocomplete-menu {
  max-height: 15rem;
  overflow-y: auto;
  box-shadow: var(--bs-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15));
  background-color: var(--bs-tertiary-bg);
}

/* Detail-page thumbnails open the full-res photo viewer modal. */
.photo-trigger {
  cursor: zoom-in;
  position: relative;
  min-height: 4rem;
  background-color: var(--bs-tertiary-bg);
}
.photo-trigger:focus {
  box-shadow: none;
}
#photo-viewer-img {
  cursor: zoom-out;
}

/* Blocking overlay shown while a piece with new photos is saving - upload +
   server-side rendition/embedding work can take a while, so this keeps the
   page visibly busy instead of looking hung. */
.save-overlay {
  z-index: 1080; /* above Bootstrap modals (1055) and their backdrops */
  background-color: rgba(0, 0, 0, .5);
}
/* Fixed (not content-based) width, and a status line tall enough for the
   longest message it ever shows, so swapping between "Uploading…" and
   "Processing… this can take a minute." never resizes the card. */
.save-overlay-card {
  width: min(300px, 90vw);
}
.save-overlay-status {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.save-overlay-elapsed {
  font-variant-numeric: tabular-nums;
}