/* Job Photos: the dropzone and queue on a job's Photos tab, the card grid
   shared by that tab and Photo Search, and the search modal. Tokens from
   sc-tokens.css; imported after app.css and before print.css. */

/* ── Dropzone ─────────────────────────────────────────────────────────────── */
.sc-photo-dropzone {
  border: 2px dashed var(--sc-border-strong);
  background: var(--sc-bg-alt);
  color: var(--sc-fg-muted);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.sc-photo-dropzone:hover,
.sc-photo-dropzone:focus-visible {
  border-color: var(--sc-fg-subtle);
  color: var(--sc-fg);
  outline: none;
}
.sc-photo-dropzone.is-dragover {
  border-color: var(--sc-accent);
  background: var(--sc-accent-soft);
  color: var(--sc-fg);
}

/* ── Upload queue ─────────────────────────────────────────────────────────── */
.sc-photo-queue:empty { display: none; }
.sc-photo-queue__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 140px auto;
  gap: 8px 12px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-surface);
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.sc-photo-queue__row.is-done { opacity: 0.6; transition: opacity 600ms ease 2.5s; }
.sc-photo-queue__row.is-failed { border-color: var(--sc-danger); }
.sc-photo-queue__progress { width: 100%; height: 6px; accent-color: var(--sc-accent); }
@media (max-width: 575.98px) {
  .sc-photo-queue__row { grid-template-columns: minmax(0, 1fr) auto; }
  .sc-photo-queue__progress { grid-column: 1 / -1; }
}

/* ── Card grid ────────────────────────────────────────────────────────────── */
.sc-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.sc-photo-grid--search {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.sc-photo-card {
  border-color: var(--sc-border);
  background: var(--sc-surface);
}
/* The clipping that rounds the thumbnail's top corners lives here, not on the
   card: on the card it also clipped the tag picker's dropdown, so the tags
   offered below the last line the card had room for simply weren't there. */
.sc-photo-card__media {
  aspect-ratio: 4 / 3;
  background: var(--sc-bg-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
/* The thumbnail is a button (it opens the lightbox), so it has to shed the
   browser's button chrome and fill the media box like the <a> used to. */
.sc-photo-card__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
/* --sc-fg, not --sc-accent: the dark theme never restates the accent, so an
   accent ring is near-black on a sunken dark thumbnail. */
.sc-photo-card__open:focus-visible { outline: 2px solid var(--sc-fg); outline-offset: -2px; }
.sc-photo-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A video's thumb is its poster frame; these two overlays are what say it is
   a video. Shared by the card and the search tile, whose media boxes are both
   positioned for them. */
.sc-photo-card__open,
.sc-photo-tile__media { position: relative; }
.sc-photo-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sc-photo-play .bi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding-left: 3px; /* optically centre the triangle */
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.75rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.sc-photo-duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 6px;
  border-radius: var(--sc-radius-sm);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  pointer-events: none;
}
.sc-photo-card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  width: 100%;
  height: 100%;
  font-size: 0.875rem;
  color: var(--sc-fg-muted);
  text-align: center;
}
.sc-photo-card__placeholder small { max-width: 100%; color: var(--sc-fg-subtle); }
.sc-photo-card__placeholder--failed { color: var(--sc-danger); }
.sc-photo-card__placeholder--failed .bi { font-size: 1.5rem; }
.sc-photo-card__meta { display: flex; flex-wrap: wrap; gap: 0 4px; line-height: 1.3; }
.sc-photo-card__description { resize: vertical; font-size: 0.875rem; }
.sc-photo-card__status { min-height: 1.2em; }
.sc-photo-card .ts-wrapper { font-size: 0.875rem; }
.sc-photo-card .ts-control { min-height: 31px; padding: 4px 8px; border-color: var(--bs-border-color); }

/* ── Search tiles ─────────────────────────────────────────────────────────── */
.sc-photo-tile {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-surface);
  color: var(--sc-fg);
  text-align: left;
  overflow: hidden;
  cursor: zoom-in;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.sc-photo-tile:hover,
.sc-photo-tile:focus-visible {
  box-shadow: var(--sc-shadow-pop);
  transform: translateY(-1px);
  outline: none;
}
.sc-photo-tile__media { display: block; width: 100%; }
.sc-photo-tile__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--sc-bg-sunken);
}
.sc-photo-tile__caption {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  font-size: 0.78rem;
  line-height: 1.3;
  min-width: 0;
}
.sc-photo-tile__job { font-weight: 600; }
.sc-photo-tile__date { color: var(--sc-fg-subtle); }

/* ── Lightbox ──────────────────────────────────────────── */
/* People page through a job's photos one Next click at a time, so the header
   holding Prev / Next is pinned: a constant distance down the page (no
   modal-dialog-centered, which would re-centre the dialog for every image's
   height) and a constant height. Only the body below it grows and shrinks with
   the image. modal-xl already fixes the width, so the buttons keep both
   co-ordinates and stay under the cursor. */
.sc-photo-modal {
  --sc-photo-modal-top: 3rem;
  --sc-photo-modal-header-height: 60px;
}
.sc-photo-modal .modal-dialog {
  margin-top: var(--sc-photo-modal-top);
  margin-bottom: 1rem;
}
/* Overflow is the body's problem, never the header's: a tall photo on a short
   screen scrolls inside the dialog rather than pushing the pager down or
   scrolling the whole dialog up out from under the cursor. */
.sc-photo-modal .modal-content {
  max-height: calc(100vh - var(--sc-photo-modal-top) - 1rem);
  max-height: calc(100dvh - var(--sc-photo-modal-top) - 1rem);
}
.sc-photo-modal .modal-body { overflow-y: auto; }

/* 1fr auto 1fr: the two outer columns are equal whatever they hold, so the
   pager sits dead centre and a long filename truncating on its left cannot
   nudge it. */
.sc-photo-modal .modal-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 0.75rem;
  height: var(--sc-photo-modal-header-height);
  padding-block: 0;
}
.sc-photo-modal .modal-title { min-width: 0; }
.sc-photo-modal .modal-header .btn-close { margin: 0; justify-self: end; }

.sc-photo-modal__pager {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
/* Fixed width and tabular figures, so "9 of 12" and "10 of 12" don't move the
   buttons either. */
.sc-photo-modal__count {
  min-width: 7rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sc-photo-modal__img {
  display: block;
  width: 100%;
  /* Sized to leave room for the header, the meta block and the footer, so the
     common case needs no scrolling at all. */
  max-height: clamp(180px, calc(100vh - 330px), 70vh);
  max-height: clamp(180px, calc(100dvh - 330px), 70vh);
  object-fit: contain;
  background: var(--sc-bg-sunken);
  border-radius: var(--sc-radius-sm);
}
/* The <video> shares the image's sizing; `object-fit: contain` letterboxes a
   portrait clip inside the same box rather than growing the dialog. */
.sc-photo-modal__video { max-width: 100%; }
.sc-photo-modal__description { white-space: pre-wrap; }
.sc-photo-modal__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
}
.sc-photo-modal__meta dt { color: var(--sc-fg-subtle); font-weight: 500; }
.sc-photo-modal__meta dd { margin: 0; }

/* On a phone there is no cursor to chase and no room for three columns, so the
   filename drops to its own line rather than truncating to nothing. */
@media (max-width: 575.98px) {
  .sc-photo-modal {
    --sc-photo-modal-top: 0.5rem;
    --sc-photo-modal-header-height: 86px;
  }
  .sc-photo-modal .modal-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "pager close"
      "title title";
    align-content: center;
    row-gap: 0.25rem;
  }
  .sc-photo-modal .modal-title { grid-area: title; }
  .sc-photo-modal__pager { grid-area: pager; justify-self: start; }
  .sc-photo-modal .modal-header .btn-close { grid-area: close; }
}

/* ── Dark theme ───────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .sc-photo-modal__tags .badge {
  background: var(--sc-bg-alt) !important;
  color: var(--sc-fg) !important;
  border-color: var(--sc-border) !important;
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
  .sc-photo-dropzone,
  .sc-photo-queue { display: none !important; }
}