/* GUSTI E-Manual — Digital Viewer. Separate module; never loaded by the editor. */

:root {
  color-scheme: light;
  --gusti-blue: #2999d6;
  --gusti-aqua: #54bec5;
  --bg-warm: #efe9e1;
  --bg-warm-2: #e6ddd0;
  --ink: #3d3d3c;
  --ink-soft: #6b6a67;
  --paper-shadow: rgba(60, 45, 20, 0.28);
  --pill-bg: rgba(255, 255, 255, 0.82);
  --pill-border: rgba(255, 255, 255, 0.6);
  --radius-pill: 999px;
  --radius-panel: 16px;
  --top-safe: env(safe-area-inset-top, 0px);
  --bottom-safe: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: var(--bg-warm);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  overflow: hidden;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
button { font-family: inherit; cursor: pointer; }

.viewer {
  position: relative;
  width: 100%; height: 100%;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255,255,255,0.55), transparent 60%),
    linear-gradient(160deg, var(--bg-warm) 0%, var(--bg-warm-2) 100%);
  padding-top: var(--top-safe);
  padding-bottom: var(--bottom-safe);
}

/* ---- Brand (top-left) ---- */
.brand {
  position: absolute; left: 28px; top: calc(24px + var(--top-safe)); z-index: 20;
  display: flex;
}
/* This is the project's only "logo" asset (the editor itself labels it "Logo (Interreg / EU /
   GUSTI)") - a combined co-funding/brand lockup, not a standalone GUSTI wordmark. */
.brand-logo { height: 60px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08)); }

/* ---- Top-right (lang + menu) ---- */
.top-right {
  position: absolute; right: 24px; top: calc(24px + var(--top-safe)); z-index: 20;
  display: flex; align-items: center; gap: 14px;
}
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.45); border: 1px solid var(--pill-border);
  border-radius: var(--radius-pill); padding: 3px;
  backdrop-filter: blur(10px); box-shadow: 0 4px 18px rgba(60,45,20,0.10);
  font-size: 13px; letter-spacing: 0.3px;
}
.lang-btn {
  background: none; border: none; color: var(--ink-soft); padding: 7px 16px; border-radius: var(--radius-pill);
  font-weight: 700; transition: background 0.15s ease, color 0.15s ease;
}
.lang-btn.active { background: #fff; color: var(--gusti-blue); }

/* ---- Search (opened via the "/" keyboard shortcut - no toolbar trigger over the book) ---- */
.search-panel {
  position: absolute; left: 50%; top: calc(24px + var(--top-safe)); transform: translateX(-50%);
  z-index: 21; width: min(420px, 86vw);
  background: var(--pill-bg); border: 1px solid var(--pill-border); border-radius: var(--radius-panel);
  backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(60,45,20,0.16);
  padding: 10px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.search-icon { color: var(--ink-soft); flex: 0 0 auto; }
#search-input {
  flex: 1 1 auto; border: none; background: none; outline: none; font-size: 13.5px; color: var(--ink);
  min-width: 120px;
}
#search-close { border: none; background: none; font-size: 18px; color: var(--ink-soft); line-height: 1; padding: 2px 4px; }
.search-results {
  flex: 1 1 100%; max-height: 220px; overflow-y: auto; border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 6px; padding-top: 6px;
}
.search-result-item {
  display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px;
  padding: 7px 8px; font-size: 12.5px; color: var(--ink);
}
.search-result-item:hover { background: rgba(41,153,214,0.10); }
.search-result-page { color: var(--gusti-blue); font-weight: 700; margin-right: 6px; }
.search-empty { padding: 8px; font-size: 12px; color: var(--ink-soft); }

/* ---- Side arrows - position (left/top) is set by js/viewer.js's positionChrome(), tracked
   against the BOOK's actual rendered bounding box every render/resize, never hard-coded to the
   viewport edge. Only vertical centering and appearance live here. ---- */
.side-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 15;
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--pill-border);
  background: var(--pill-bg); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
  opacity: 0.55; transition: opacity 0.18s ease, left 0.15s ease;
  box-shadow: 0 6px 20px rgba(60,45,20,0.12);
}
.side-arrow:hover { opacity: 1; }
.side-arrow:disabled { opacity: 0.18; cursor: default; }

/* ---- Right vertical toolbar - same JS-driven positioning as the side arrows above. ---- */
.right-toolbar {
  position: absolute; left: 50%; bottom: calc(18px + var(--bottom-safe)); transform: translateX(-50%); z-index: 18;
  display: flex; flex-direction: row; gap: 6px;
  background: var(--pill-bg); border: 1px solid var(--pill-border); border-radius: var(--radius-pill);
  padding: 6px 10px; backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(60,45,20,0.12);
}
.right-tool-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.right-tool-btn:hover { background: rgba(41,153,214,0.10); color: var(--gusti-blue); }

/* ---- Book stage - unpadded; the book's own inline width/height (computed in flipbook.js's
   targetPageWidth() from the real viewport size, with the side arrows/right toolbar and a small
   top/bottom safe margin already factored in) is what actually reserves that room. Centering the
   book inside this full, unpadded box is what keeps it vertically AND horizontally centered with
   even margins on every side - it is never resized to make room for the thumbnail strip, which
   simply floats as an opaque overlay at the bottom (see .thumb-strip below). */
.stage {
  /* dno ostavlja mjesto za alatnu traku ispod knjige */
  position: absolute; inset: 0 0 72px 0; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 860px) and (min-width: 601px) {
  .stage { inset: 78px 0 72px 0; } /* tablet: knjiga ispod logotipa */
}
/* ---- Book chrome: the spread must read as ONE physical object, not two flat canvases side by
   side - a soft unified shadow beneath the whole book, a subtle inner spine shadow where the two
   pages meet, and a couple of px of "stacked paper" depth on the outer edges. None of this ever
   touches the PDF canvas pixels themselves. */
/* Mobile-only bottom nav/utility rows (see @media max-width:600px) - not part of the
   desktop/tablet layout at all. */
.topbar { display: contents; }
.mobile-controls, .mobile-utility-row { display: none; }

.book {
  position: relative;
  border-radius: 3px;
  background: transparent;           /* sjenu nose same stranice: prazna polovica rasklopa ostaje nevidljiva */
  transition: transform 0.6s ease;
}
.book .stf__item .pdf-page { background: #fff; }
.book .stf__item {
  box-shadow:
    0 36px 80px -10px var(--paper-shadow),
    0 14px 34px -8px rgba(60,45,20,0.24),
    0 3px 10px rgba(60,45,20,0.16);
}
/* Zatvorena knjiga: vidi se samo korica, centrirana (pomak za pola stranice) */
.book.closed-front { transform: translateX(-25%); }
.book.closed-back { transform: translateX(25%); }
.book.closed-front::before, .book.closed-back::before { display: none; }
.book canvas { display: block; }
.pdf-page { position: relative; width: 100%; height: 100%; }

/* Stacked-paper edge depth (~3px) on the book's outer left/right edges only. StPageFlip assigns
   --left/--right to whichever page currently occupies that slot (in single/portrait mode the one
   visible page is always --right), so these selectors track the real current spread automatically
   rather than relying on DOM child order. */
.book:not(.single) .stf__item.--left .pdf-page {
  box-shadow: -2px 1px 0 -1px #fbfaf8, -4px 2px 3px -2px rgba(40,30,10,0.16);
}
.book:not(.single) .stf__item.--right .pdf-page {
  box-shadow: 2px 1px 0 -1px #fbfaf8, 4px 2px 3px -2px rgba(40,30,10,0.16);
}
.book.single .stf__item.--right .pdf-page {
  box-shadow:
    -2px 1px 0 -1px #fbfaf8, -4px 2px 3px -2px rgba(40,30,10,0.16),
    2px 1px 0 -1px #fbfaf8, 4px 2px 3px -2px rgba(40,30,10,0.16);
}

/* Center spine: a soft inner shadow gradient where the two pages meet, plus a faint highlight
   right at the fold - no hard line, no graphic, just enough to read as a gutter. */
.book:not(.single)::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 54px;
  transform: translateX(-50%); pointer-events: none; z-index: 4;
  background: linear-gradient(90deg,
    rgba(20,15,5,0) 0%, rgba(20,15,5,0.05) 38%, rgba(20,15,5,0.14) 49%,
    rgba(20,15,5,0.14) 51%, rgba(20,15,5,0.05) 62%, rgba(20,15,5,0) 100%);
}
/* Very subtle at-rest page curvature toward the spine - a faint directional highlight, not an
   actual geometric warp, so text stays perfectly readable. */
.book:not(.single) .stf__item.--left .pdf-page::after,
.book:not(.single) .stf__item.--right .pdf-page::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
}
.book:not(.single) .stf__item.--left .pdf-page::after {
  background: linear-gradient(90deg, transparent 82%, rgba(20,15,5,0.05) 100%);
}
.book:not(.single) .stf__item.--right .pdf-page::after {
  background: linear-gradient(270deg, transparent 82%, rgba(20,15,5,0.05) 100%);
}

/* StPageFlip's own shadow elements (drawShadow/maxShadowOpacity, set in flipbook.js) already give
   an elegant, tunable page-turn shadow - maxShadowOpacity:0.45 keeps it soft rather than the
   library's default max-intensity black. Nothing further to add here. */

/* Real PDF link annotations, positioned per-page by flipbook.js/pdf-renderer.js. The layer itself
   never intercepts pointer events (empty page areas must still start a page-turn drag); only the
   individual link boxes are interactive, and they carry no visible box/outline by default so the
   page still looks exactly like the source PDF. */
.annotationLayer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.annotationLayer a {
  position: absolute; display: block; pointer-events: auto; cursor: pointer;
  background: transparent; outline: none; -webkit-tap-highlight-color: transparent;
}

.loading-indicator {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: transparent; pointer-events: none;
}
.spinner {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(41,153,214,0.18);
  border-top-color: var(--gusti-blue); animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Tablet: side arrows/right toolbar keep tracking the book via positionChrome(); the book's own
   size (computed in flipbook.js, viewport-margin-aware per breakpoint) shrinks to fit here. */
@media (max-width: 1180px) {
  .brand-logo { height: 48px; }
}

/* Single-page breakpoint (tablet portrait and below) */


/* Mobitel: gornji red (logo + HR/EN) -> PDF preko cijele širine -> jedan kompaktni red kontrola */
@media (max-width: 600px) {
  #app { display: flex; flex-direction: column; justify-content: flex-start; height: 100dvh; min-height: 0; }

  .topbar {
    display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between;
    padding: calc(6px + var(--top-safe)) 10px 6px; gap: 10px;
  }
  .brand, .top-right { position: static; }
  /* SVG ima ugrađeni prazni rub (~12 %) - negativne margine ga kompenziraju */
  .brand-logo { height: 64px; margin: -8px 0 -8px -8px; }
  .lang-switch { font-size: 11.5px; padding: 2px; }
  .lang-btn { padding: 4px 11px; }

  .search-panel { top: calc(52px + var(--top-safe)); width: 92vw; }

  .side-arrow { display: none; }
  .right-toolbar { display: none; }

  /* PDF u sredini slobodnog prostora između gornjeg reda i kontrola na dnu ekrana */
  .stage {
    position: relative; inset: auto; flex: 1 1 auto; min-height: 0;
    display: flex; justify-content: center; align-items: center; padding: 0 8px;
  }
  .loading-indicator { position: fixed; }

  .mobile-controls {
    /* kontrole pri dnu ekrana, malo odmaknute od ruba */
    display: flex; flex: 0 0 auto; justify-content: center; align-items: center; gap: 6px;
    padding: 10px 0 calc(18px + var(--bottom-safe));
  }
  .mobile-utility-row { display: flex; align-items: center; gap: 2px; margin: 0 6px; }
  .mobile-nav-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--pill-border); background: var(--pill-bg); backdrop-filter: blur(8px);
    color: var(--ink); display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .mobile-nav-btn:disabled { opacity: 0.3; }
  .mobile-utility-btn {
    width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--ink);
    display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s ease;
  }
  .mobile-utility-btn:active { background: rgba(20,15,5,0.08); }
}