/* ==========================================================================
   Delta Gulf - Company Profile Viewer
   ==========================================================================
   Renders the profile PDF as an in-site reading experience.
   Mobile-first: app-shell with a bottom bar; desktop gets a thumbnail rail.
   ========================================================================== */

.pv-body {
  min-height: 100dvh;
  background: var(--bg-secondary);
  overflow-x: hidden;
}

/* ========================================
   TOP BAR
   ======================================== */
.pv-topbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-sticky);
  height: 56px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  padding-top: env(safe-area-inset-top);
  background: var(--bg-overlay);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border-subtle);
}

.pv-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-arabic-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: var(--transition-colors);
}
body[dir="ltr"] .pv-back { font-family: var(--font-english-body); }
.pv-back:hover { color: var(--brand-purple); background: var(--bg-tertiary); }
.pv-back svg { width: 18px; height: 18px; flex-shrink: 0; }
body[dir="rtl"] .pv-back svg { transform: scaleX(-1); }

.pv-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-arabic-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[dir="ltr"] .pv-title { font-family: var(--font-english-body); }

.pv-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Toolbar buttons: 44px touch targets, no layout shift on press */
.pv-btn {
  position: relative;   /* the shared theme-toggle icons are absolutely placed */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform 120ms var(--ease-out);
}
.pv-btn:hover { background: var(--bg-tertiary); color: var(--brand-purple); }
.pv-btn:active { transform: scale(0.94); }
.pv-btn:disabled { opacity: 0.35; pointer-events: none; }
.pv-btn svg { width: 20px; height: 20px; }
.pv-btn.is-active { background: var(--brand-gradient-soft); color: var(--brand-purple); }
[data-theme="dark"] .pv-btn.is-active { color: var(--brand-purple-light); }

/* The download button carries a label on wide screens */
.pv-btn-download {
  width: auto;
  padding-inline: var(--space-4);
  background: var(--brand-gradient);
  color: #fff;
  font-family: var(--font-arabic-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-sm);
}
body[dir="ltr"] .pv-btn-download { font-family: var(--font-english-body); }
.pv-btn-download:hover { background: var(--brand-gradient); color: #fff; filter: brightness(1.08); }
.pv-btn-download .pv-btn-label { display: none; }

/* The zoom controls stay on phones too. A spread is two pages wide, so it
   arrives small on purpose — the whole composition first, then zoom in to
   read — which makes them essential here rather than a convenience. The
   title is what gives up the room for them; it already truncates. */

/* "الصفحة الرئيسية" does not fit next to the title on a phone; the arrow
   carries the meaning and the button keeps its aria-label. Without the
   label the button would shrink under the 44px touch minimum. */
.pv-back span { display: none; }
.pv-back {
  min-width: 44px;
  justify-content: center;
}

/* ========================================
   LOADING
   ======================================== */
.pv-loading {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8);
  background: var(--bg-secondary);
  transition: opacity var(--duration-base) var(--ease-out),
              visibility var(--duration-base) var(--ease-out);
}
.pv-loading.is-done { opacity: 0; visibility: hidden; }

/* The theme picks one background image, so only that one is ever fetched.
   The ratio is the artwork's own, which holds the box before it decodes. */
.pv-loading-logo {
  width: min(240px, 62vw);
  aspect-ratio: 3508 / 1188;
  background: url('../images/logo-light.svg') center / contain no-repeat;
  animation: pv-pulse 1.8s var(--ease-in-out) infinite;
}
[data-theme="dark"] .pv-loading-logo {
  background-image: url('../images/logo-dark.svg');
}
@keyframes pv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.pv-loading-text {
  font-family: var(--font-arabic-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
body[dir="ltr"] .pv-loading-text { font-family: var(--font-english-body); }

.pv-progress {
  width: min(280px, 70vw);
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  overflow: hidden;
}
.pv-progress-bar {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--brand-gradient);
  transition: width var(--duration-fast) var(--ease-out);
}

/* Error state — the PDF is missing or unreadable */
.pv-error {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 420px;
  text-align: center;
}
.pv-loading.has-error .pv-loading-logo,
.pv-loading.has-error .pv-progress,
.pv-loading.has-error .pv-loading-text { display: none; }
.pv-loading.has-error .pv-error { display: flex; }
.pv-error svg { width: 40px; height: 40px; color: var(--text-tertiary); }
.pv-error p {
  font-family: var(--font-arabic-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
body[dir="ltr"] .pv-error p { font-family: var(--font-english-body); }

/* ========================================
   READER
   ======================================== */
.pv-reader {
  padding-top: calc(56px + env(safe-area-inset-top));
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  overflow-x: auto;          /* zoomed pages scroll here, never the document */
  overflow-y: visible;
  transition: opacity 200ms ease;
}

/* Crossing the spreads/single-pages breakpoint loads the other export, which
   empties the reader for a moment. Fading covers the gap instead of blinking. */
.pv-reader.is-swapping { opacity: 0.35; }

.pv-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  margin-inline: auto;
  width: max-content;
  min-width: 100%;
}

.pv-page {
  position: relative;
  /* JS sets an explicit px width per page so zooming past the viewport
     scrolls the reader horizontally instead of the document. This is only
     the value used before the document has been measured. */
  width: 92vw;
  aspect-ratio: var(--pv-ratio, 1.2);   /* reserves space -> no layout shift */
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  scroll-margin-top: calc(72px + env(safe-area-inset-top));
}
[data-theme="dark"] .pv-page { box-shadow: var(--shadow-lg); }

/* Absolutely positioned so the bitmap can never feed back into the box size —
   the reserved aspect-ratio box stays the single source of truth. */
.pv-page canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Shimmer placeholder until the page is rasterised */
.pv-page:not(.is-rendered)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--bg-tertiary) 30%,
    var(--bg-secondary) 50%,
    var(--bg-tertiary) 70%
  );
  background-size: 200% 100%;
  animation: pv-shimmer 1.4s linear infinite;
}
@keyframes pv-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-page:not(.is-rendered)::after { animation: none; }
  .pv-loading-logo { animation: none; }
  .pv-reader { transition: none; }
}

.pv-page-num {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  z-index: var(--z-raised);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: rgba(26, 26, 29, 0.55);
  color: #fff;
  font-family: var(--font-english-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.pv-page.is-rendered .pv-page-num { opacity: 1; }

/* ========================================
   BOTTOM BAR (mobile-first app shell)
   ======================================== */
.pv-bottombar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 64px;
  padding-inline: var(--space-3);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg-overlay);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--border-subtle);
}

.pv-counter {
  min-width: 92px;
  text-align: center;
  font-family: var(--font-english-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  direction: ltr;
}
.pv-counter strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* Next/prev follow reading direction, so mirror the chevrons in RTL */
body[dir="rtl"] .pv-nav-btn svg { transform: scaleX(-1); }

/* ========================================
   THUMBNAILS — bottom sheet on mobile, side rail on desktop
   ======================================== */
.pv-thumbs-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(26, 26, 29, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              visibility var(--duration-base) var(--ease-out);
}
.pv-thumbs-backdrop.is-open { opacity: 1; visibility: visible; }

.pv-thumbs {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-modal);
  max-height: 62dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-xl);
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.pv-thumbs.is-open { transform: translateY(0); }

.pv-thumbs-handle {
  width: 40px;
  height: 4px;
  margin: var(--space-3) auto var(--space-2);
  border-radius: var(--radius-full);
  background: var(--border-strong);
  flex-shrink: 0;
}

.pv-thumbs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4) var(--space-2);
  flex-shrink: 0;
}
.pv-thumbs-title {
  font-family: var(--font-arabic-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
body[dir="ltr"] .pv-thumbs-title { font-family: var(--font-english-body); }

/* Fixed columns on purpose: with flexible (1fr) tracks the column width is not
   known while rows are being measured, so neither aspect-ratio nor percentage
   padding can resolve and every row collapses. A fixed column width lets the
   row height be derived in CSS instead. --pv-ratio-doc is set by JS from the
   document's own page ratio. */
.pv-thumbs-grid {
  --pv-thumb-w: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--pv-thumb-w));
  grid-auto-rows: calc(var(--pv-thumb-w) / var(--pv-ratio-doc, 1.2));
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-6);
  overflow-y: auto;
}

.pv-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-xs);
  background: var(--bg-tertiary);
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform 120ms var(--ease-out);
}
.pv-thumb:active { transform: scale(0.95); }
.pv-thumb.is-current { border-color: var(--brand-purple); }
[data-theme="dark"] .pv-thumb.is-current { border-color: var(--brand-purple-light); }
.pv-thumb canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Rows are uniform, so a page with an odd ratio letterboxes rather than
     stretching — relevant if a future edition mixes page sizes. */
  object-fit: contain;
  pointer-events: none;
}
.pv-thumb-num {
  position: absolute;
  pointer-events: none;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 1px;
  background: rgba(26, 26, 29, 0.55);
  color: #fff;
  font-family: var(--font-english-body);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* ========================================
   TABLET / DESKTOP
   ======================================== */
@media (min-width: 768px) {
  .pv-topbar { height: 64px; padding-inline: var(--space-5); }
  .pv-reader { padding-top: calc(64px + env(safe-area-inset-top)); }
  .pv-title { font-size: var(--text-base); }
  .pv-btn-download .pv-btn-label { display: inline; }
  .pv-back span { display: inline; }
  .pv-back { justify-content: flex-start; }
  .pv-pages { gap: var(--space-6); padding: var(--space-6) var(--space-5); }
}

@media (min-width: 1024px) {
  /* The thumbnail rail becomes permanent furniture instead of a sheet */
  .pv-thumbs {
    inset-inline-start: 0;
    inset-inline-end: auto;
    top: 64px;
    bottom: 0;
    width: 200px;
    max-height: none;
    border-radius: 0;
    border-inline-end: 1px solid var(--border-subtle);
    box-shadow: none;
    transform: translateX(0);
    transition: transform var(--duration-base) var(--ease-out);
  }
  body[dir="rtl"] .pv-thumbs:not(.is-open) { transform: translateX(100%); }
  body[dir="ltr"] .pv-thumbs:not(.is-open) { transform: translateX(-100%); }
  .pv-thumbs.is-open { transform: translateX(0); }

  .pv-thumbs-handle { display: none; }
  .pv-thumbs-head { padding-top: var(--space-4); }
  .pv-thumbs-grid { --pv-thumb-w: 72px; }
  .pv-thumbs-backdrop { display: none; }

  /* Reader shifts over to make room for the rail */
  .pv-reader {
    transition: padding var(--duration-base) var(--ease-out);
    padding-bottom: var(--space-8);
  }
  body.pv-rail-open .pv-reader { padding-inline-start: 200px; }

  /* Desktop drives navigation from the top bar and the keyboard */
  .pv-bottombar {
    inset-inline-start: auto;
    inset-inline-end: var(--space-6);
    bottom: var(--space-6);
    height: auto;
    width: auto;
    padding: var(--space-2);
    gap: var(--space-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
  }
  .pv-counter { min-width: 84px; }
}

/* Wide screens: give the page more room but keep a readable measure */
@media (min-width: 1440px) {
  .pv-pages { padding-block: var(--space-8); }
}