/*
  viewer.css: the in-app document viewer overlay (media-viewer.js). Tokens only (StyleRules), logical
  properties only (CLAUDE.md §12: RTL comes from culture, never a hardcoded left/right).
*/

.bfau-viewer-locked {
  overflow: hidden;
}

.bfau-viewer {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  /* Dark in BOTH modes: --bfau-text is dark on light but flips light in dark mode, which turned this
     backdrop pale and unreadable there. --bfau-dark-section stays dark across the theme. */
  background-color: color-mix(in srgb, var(--bfau-dark-section) 94%, transparent);
  outline: none;
}

.bfau-viewer.bfau-viewer-open {
  display: flex;
}

.bfau-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  /* Light text on the always-dark backdrop: --bfau-on-photo (white in tokens.css, and not themable
     on the staff site). Not --bfau-on-primary: a skin with a light brand colour (Elegant, Soft, Zen…)
     sets that one near-black, which put dark text on this dark bar. --bfau-body-bg would go
     dark-on-dark and vanish in dark mode. */
  background-color: color-mix(in srgb, var(--bfau-on-photo) 8%, transparent);
  color: var(--bfau-on-photo);
  flex-wrap: wrap;
}

.bfau-viewer-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-inline-size: 0;
  overflow: hidden;
}

.bfau-viewer-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bfau-viewer-position {
  opacity: 0.75;
  font-size: 0.85rem;
  white-space: nowrap;
}

.bfau-viewer-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bfau-viewer-pdf-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-inline-end: 0.5rem;
  border-inline-end: 1px solid color-mix(in srgb, var(--bfau-on-photo) 25%, transparent);
}

.bfau-viewer-zoom-label,
.bfau-viewer-page-info {
  color: var(--bfau-on-photo);
  font-size: 0.8rem;
  min-inline-size: 3.5rem;
  text-align: center;
}

.bfau-viewer-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 1rem;
}

.bfau-viewer-image {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  cursor: zoom-in;
  border-radius: var(--bfau-radius);
}

.bfau-viewer-image-actual {
  max-inline-size: none;
  max-block-size: none;
  cursor: zoom-out;
}

.bfau-viewer-video {
  max-inline-size: 100%;
  max-block-size: 100%;
  border-radius: var(--bfau-radius);
}

.bfau-viewer-pdf-page {
  background-color: var(--bfau-surface);
  box-shadow: var(--bfau-shadow);
  max-inline-size: 100%;
}

.bfau-viewer-loading .spinner-border {
  inline-size: 3rem;
  block-size: 3rem;
}

.bfau-viewer-error,
.bfau-viewer-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--bfau-on-photo);
  text-align: center;
  max-inline-size: 26rem;
}

.bfau-viewer-error i,
.bfau-viewer-placeholder i {
  font-size: 3rem;
  opacity: 0.85;
}

.bfau-viewer-placeholder-name {
  font-weight: 600;
}

.bfau-viewer-placeholder-size {
  opacity: 0.75;
  font-size: 0.85rem;
}

.bfau-viewer-nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  border: none;
  background-color: color-mix(in srgb, var(--bfau-on-photo) 15%, transparent);
  color: var(--bfau-on-photo);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bfau-viewer-nav:hover {
  background-color: color-mix(in srgb, var(--bfau-on-photo) 30%, transparent);
}

.bfau-viewer-prev {
  inset-inline-start: 1rem;
}

.bfau-viewer-next {
  inset-inline-end: 1rem;
}

/* The chevrons are drawn pointing left/right; flip them so "previous" always points toward the
   start of reading order and "next" toward the end, in both directions. */
[dir="rtl"] .bfau-viewer-prev i,
[dir="rtl"] .bfau-viewer-next i {
  transform: scaleX(-1);
}

@media (max-width: 575.98px) {
  .bfau-viewer-header {
    padding: 0.5rem 0.75rem;
  }

  .bfau-viewer-actions span {
    display: none;
  }

  .bfau-viewer-nav {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    font-size: 1.1rem;
  }
}