/* Innotech BI flipbook viewer. Shared by every report under /reports/. */

:root {
  --fb-navy-950: #081327;
  --fb-navy-900: #0F1F3D;
  --fb-navy-800: #172B52;
  --fb-navy-700: #22396A;
  --fb-gold: #C9A84C;
  --fb-gold-soft: rgba(201, 168, 76, 0.16);
  --fb-text: #F3F1EA;
  --fb-text-muted: rgba(243, 241, 234, 0.62);
  --fb-line: rgba(243, 241, 234, 0.12);
  --fb-bar-h: 60px;
  --fb-foot-h: 64px;
  --fb-ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fb-navy-950);
  color: var(--fb-text);
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#flipbook-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--fb-navy-900);
  isolation: isolate;
}
/* Locked lighthouse photo (same image as the trailer sign-off page), horizon kept in view.
   It sits on its own layer so it can fade in once loaded instead of popping in. */
#flipbook-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(8, 19, 39, 0.55) 0%, rgba(8, 19, 39, 0) 22%, rgba(8, 19, 39, 0) 78%, rgba(8, 19, 39, 0.45) 100%),
    url("lighthouse_bg.jpg") center 80% / cover no-repeat;
  opacity: 0;
  transition: opacity 900ms var(--fb-ease);
}
#flipbook-app.bg-ready::before { opacity: 1; }

/* Top bar */
.fb-bar {
  height: var(--fb-bar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--fb-line);
  background: rgba(8, 19, 39, 0.6);
  backdrop-filter: blur(8px);
  z-index: 5;
}
.fb-logo { height: 30px; width: auto; display: block; }
.fb-logo-link { display: block; flex: 0 0 auto; border-radius: 4px; transition: opacity 180ms var(--fb-ease); }
.fb-logo-link:hover { opacity: 0.8; }
.fb-logo-link:focus-visible { outline: 2px solid var(--fb-gold); outline-offset: 4px; }
.fb-titles { min-width: 0; flex: 0 1 auto; border-left: 1px solid var(--fb-line); padding-left: 16px; }
/* "pages 2 – 3 of 12" beside the title, as FlippingBook shows it */
.fb-pagepill {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--fb-text);
  background: rgba(243, 241, 234, 0.09);
  border: 1px solid var(--fb-line);
  border-radius: 6px;
  padding: 4px 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fb-pagepill:empty { display: none; }
.fb-actions { margin-left: auto; }
.fb-title {
  font-size: 14px; font-weight: 500; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-subtitle {
  font-size: 11px; color: var(--fb-text-muted); letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* Buttons */
.fb-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fb-text);
  height: 38px;
  min-width: 38px;
  padding: 0 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--fb-ease), border-color 180ms var(--fb-ease), color 180ms var(--fb-ease);
}
.fb-btn:hover { background: rgba(243, 241, 234, 0.08); }
.fb-btn:focus-visible { outline: 2px solid var(--fb-gold); outline-offset: 2px; }
.fb-btn[aria-pressed="true"] { background: var(--fb-gold-soft); color: var(--fb-gold); }
.fb-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }
.fb-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.fb-btn--gold {
  border-color: var(--fb-gold);
  color: var(--fb-gold);
}
.fb-btn--gold:hover { background: var(--fb-gold); color: var(--fb-navy-900); }

/* Stage holding the book */
.fb-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 72px;
  z-index: 1;
  isolation: isolate; /* keeps the flip engine's high z-indexes below the drawers */
}
.fb-book-wrap {
  transition: opacity 320ms var(--fb-ease);
}
/* Until the flip engine has laid the pages out and the cover has arrived, keep the book
   invisible (it still takes up space so the engine can measure it), then fade it in */
.fb-stage:not(.is-ready) .fb-book-wrap { opacity: 0; transform: translateY(12px) scale(0.985); pointer-events: none; }
.fb-stage.is-revealing .fb-book-wrap { transition: opacity 550ms var(--fb-ease), transform 650ms var(--fb-ease); }
@media (prefers-reduced-motion: reduce) {
  .fb-stage:not(.is-ready) .fb-book-wrap { transform: none; }
}
.fb-book-wrap.is-jumping { opacity: 0; transition-duration: 220ms; }
.fb-book-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* StPageFlip writes an inline min-width that would overflow small phones */
.fb-book { margin: 0 auto; width: 100%; height: 100%; min-width: 0 !important; min-height: 0 !important; }
.fb-book .fb-page {
  background: #fff;
  overflow: hidden;
}
.fb-book { transition: transform 450ms var(--fb-ease); }

/* Stacked page edges, thickness set in JS from pages left on each side */
.fb-edge {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(to right, #f4f2ec 0 1px, #c9c6bd 1px 2px);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.55);
}
.fb-edge--right { border-radius: 0 2px 2px 0; }
.fb-edge--left { border-radius: 2px 0 0 2px; }

.fb-book .stf__item { box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.55); }

/* Spine shading so an open spread reads as a bound book */
/* Engine-only blank page after a lone back cover: never visible */
.fb-book .fb-page.fb-filler { background: transparent !important; box-shadow: none !important; }
.fb-book .fb-page.fb-filler::after { display: none !important; }

.stf__wrapper.--landscape .stf__item.--soft:not(.fb-page--cover):not(.fb-filler)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}
.stf__wrapper.--landscape .stf__item.--soft.--left::after {
  right: 0;
  width: 14%;
  background: linear-gradient(to left,
    rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.10) 18%, rgba(0, 0, 0, 0.03) 55%, rgba(0, 0, 0, 0) 100%);
}
.stf__wrapper.--landscape .stf__item.--soft.--right::after {
  left: 0;
  width: 10%;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.12) 12%, rgba(255, 255, 255, 0.06) 30%, rgba(0, 0, 0, 0) 100%);
}

.fb-page img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.fb-link {
  position: absolute;
  display: block;
  border-radius: 3px;
  transition: background 160ms var(--fb-ease), box-shadow 160ms var(--fb-ease);
}
.fb-link:hover {
  background: rgba(201, 168, 76, 0.16);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.55);
}

/* Side arrows */
.fb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--fb-line);
  background: rgba(8, 19, 39, 0.55);
  z-index: 4;
}
.fb-arrow:hover { border-color: var(--fb-gold); color: var(--fb-gold); background: rgba(8, 19, 39, 0.8); }
.fb-arrow--prev { left: 14px; }
.fb-arrow--next { right: 14px; }
.fb-arrow[hidden] { display: none; }

/* Back to start: replaces the next arrow on the last page */
.fb-restart {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  height: 48px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  border-color: var(--fb-gold);
  color: var(--fb-gold);
  background: rgba(8, 19, 39, 0.75);
  font-weight: 500;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--fb-ease), background 180ms var(--fb-ease), color 180ms var(--fb-ease);
}
.fb-restart.is-visible { opacity: 1; pointer-events: auto; }
.fb-restart:hover { background: var(--fb-gold); color: var(--fb-navy-900); }

/* Footer controls */
.fb-foot {
  height: var(--fb-foot-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border-top: 1px solid var(--fb-line);
  background: rgba(8, 19, 39, 0.6);
  backdrop-filter: blur(8px);
  z-index: 5;
}
.fb-progress {
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: transparent;
}
.fb-progress span {
  display: block; height: 100%; width: 0;
  background: var(--fb-gold);
  transition: width 400ms var(--fb-ease);
}
.fb-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fb-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 128px;
  justify-content: center;
}
.fb-counter input {
  width: 64px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--fb-line);
  background: rgba(243, 241, 234, 0.06);
  color: var(--fb-text);
  font: inherit;
  font-size: 13px;
  text-align: center;
}
.fb-counter input:focus { outline: none; border-color: var(--fb-gold); }
.fb-sep { width: 1px; height: 24px; background: var(--fb-line); margin: 0 4px; }

/* Thumbnail drawer */
.fb-thumbs {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--fb-foot-h);
  height: 172px;
  display: flex;
  gap: 12px;
  padding: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(8, 19, 39, 0.94);
  border-top: 1px solid var(--fb-line);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 260ms var(--fb-ease), opacity 260ms var(--fb-ease);
  z-index: 4; /* slides out from behind the footer */
  scrollbar-color: var(--fb-navy-700) transparent;
}
.fb-thumbs.is-open { transform: none; opacity: 1; pointer-events: auto; }
.fb-thumb {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: var(--fb-text-muted);
  font: inherit;
  font-size: 11px;
  text-align: center;
}
.fb-thumb img {
  display: block;
  height: 118px;
  width: auto;
  border-radius: 3px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 160ms var(--fb-ease), transform 160ms var(--fb-ease);
  margin-bottom: 6px;
}
.fb-thumb:hover img { transform: translateY(-2px); }
.fb-thumb.is-current img { outline-color: var(--fb-gold); }
.fb-thumb.is-current { color: var(--fb-gold); }

/* Zoom overlay */
.fb-zoom {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(8, 19, 39, 0.97);
  overflow: auto;
  display: none;
  cursor: zoom-out;
}
.fb-zoom.is-open { display: block; }
.fb-zoom-inner {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 72px 16px 40px;
  min-width: min-content;
}
.fb-zoom img {
  width: min(1100px, 92vw);
  height: auto;
  display: block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.fb-zoom-inner.is-spread img { width: min(900px, 46vw); }
.fb-zoom-close {
  position: fixed;
  top: 14px;
  right: 14px;
  background: rgba(8, 19, 39, 0.8);
  border: 1px solid var(--fb-line);
  z-index: 21;
}

/* Loading */
.fb-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--fb-text-muted);
  font-size: 13px;
  z-index: 3;
  pointer-events: none;
  transition: opacity 250ms ease-out;
}
.fb-loading.is-done { opacity: 0; }
/* iR monogram inside a turning gold ring, on a small navy disc so it reads against the horizon */
.fb-spinner {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(8, 19, 39, 0.72);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  /* fades and settles in after a short beat, so a quick load never flashes it.
     "backwards" (not "both") so the overlay's own fade-out still works afterwards */
  animation: fb-pop 600ms cubic-bezier(.2, .7, .2, 1) 120ms backwards;
}
@keyframes fb-pop { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: none; } }
.fb-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: fb-spin 1.1s linear infinite; }
.fb-ring circle { fill: none; stroke-width: 3; }
.fb-ring-track { stroke: rgba(243, 241, 234, 0.12); }
.fb-ring-arc { stroke: var(--fb-gold); stroke-linecap: round; stroke-dasharray: 72 217; }
.fb-mono { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
@keyframes fb-spin { to { transform: rotate(360deg); } }
@keyframes fb-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fb-ring { animation-duration: 3s; }
  .fb-spinner { animation-name: fb-in; } /* fade only, no scaling */
}

.fb-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--fb-text-muted);
  background: rgba(8, 19, 39, 0.75);
  border: 1px solid var(--fb-line);
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 600ms var(--fb-ease);
  white-space: nowrap;
}

.fb-hide-sm { }

@media (max-width: 760px) {
  :root { --fb-bar-h: 54px; --fb-foot-h: 58px; }
  .fb-stage { padding: 12px 16px; }
  .fb-arrow { display: none; }
  .fb-hide-sm { display: none !important; }
  .fb-restart { top: auto; bottom: 16px; right: 50%; transform: translateX(50%); }
  .fb-logo { height: 24px; }
  .fb-titles { padding-left: 12px; }
  .fb-pagepill { display: none; } /* phones: the footer counter already shows the page */
  .fb-btn-label { display: none; }
  .fb-zoom img, .fb-zoom-inner.is-spread img { width: 96vw; }
  .fb-zoom-inner { flex-direction: column; align-items: center; }
}