/* ============================================================
   PDF Viewer — shared stylesheet
   Used by flipbook/flipbook.php. Styles cover:
     - body + base layout
     - shared toolbar (Search, Print, Download, View toggle)
     - search panel + result list
     - Normal View (PDF.js scrollable canvases)
     - Flipbook View (DearFlip wrapper)
     - search highlight overlay used by both viewers
     - initial loading spinner
   ============================================================ */

html, body {
    margin: 0;
    padding: 0;
    background: #333;
    height: 100vh;
    overflow: hidden;
    font-family: sans-serif;
}

/* ---------- Shared toolbar ----------
   Sits over both the dark flipbook background AND the white pages of
   Normal View, so the toolbar itself needs an opaque-ish dark backdrop
   so its buttons stay readable in either context. */
#fb-toolbar {
    position: fixed;
    top: 10px;
    right: 14px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: calc(100vw - 28px);
    background: rgba(30, 30, 30, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

#fb-toolbar button,
#fb-toolbar a.toolbar-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    border-radius: 4px;
    padding: 6px 11px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.2;
}

#fb-toolbar button:hover,
#fb-toolbar a.toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

#fb-toolbar button:focus,
#fb-toolbar a.toolbar-btn:focus {
    outline: 2px solid #ffc107;
    outline-offset: 1px;
}

/* View-mode pill (two-segment switch). The active segment is highlighted. */
.view-switch {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    overflow: hidden;
}

.view-switch button {
    border: none !important;
    border-radius: 0 !important;
    background: transparent;
}

.view-switch button.active {
    background: #ffc107;
    color: #111;
    font-weight: 600;
}

.view-switch button.active:hover {
    background: #e0a800;
}

/* ---------- Top-toolbar buttons hidden in Normal mode ----------
   Normal view uses the browser's native PDF viewer (iframe), which has
   its own zoom, page nav, search, and print controls. We hide our
   redundant buttons so the top toolbar shows only the view switch. */
body.mode-normal #btn-toggle-search,
body.mode-normal #btn-print,
body.mode-normal #search-panel {
    display: none !important;
}

/* ---------- Search panel ---------- */
#search-panel {
    display: none;
    position: fixed;
    top: 56px;
    right: 14px;
    z-index: 9999;
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 14px 16px;
    width: 340px;
    max-width: calc(100vw - 28px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
    color: #eee;
}

#search-panel h4 {
    margin: 0 0 10px;
    font-size: 14px;
    color: #ffc107;
}

#search-input-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

#search-query {
    flex: 1;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #666;
    background: #2d2d2d;
    color: #fff;
    font-size: 13px;
}

#search-query::placeholder {
    color: #999;
}

#btn-do-search {
    background: #ffc107;
    border: none;
    border-radius: 4px;
    color: #111;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

#btn-do-search:hover {
    background: #e0a800;
}

#search-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

#search-nav button {
    background: #444;
    border: none;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

#search-nav button:hover {
    background: #666;
}

#search-status {
    font-size: 12px;
    color: #aaa;
}

#search-results-list {
    max-height: 240px;
    overflow-y: auto;
    font-size: 12px;
    color: #ccc;
    border-top: 1px solid #444;
    padding-top: 8px;
    margin-top: 4px;
}

.search-result-item {
    padding: 5px 6px;
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 3px;
    border-left: 3px solid transparent;
    line-height: 1.4;
}

.search-result-item:hover,
.search-result-item.active {
    background: #2d2d2d;
    border-left-color: #ffc107;
}

.search-result-item .page-label {
    font-weight: bold;
    color: #ffc107;
    margin-right: 4px;
}

.search-result-item mark {
    background: #ffc107;
    color: #111;
    border-radius: 2px;
    padding: 0 2px;
}

#search-loading {
    display: none;
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
}

/* ---------- Highlight overlay (shared by both viewers) ---------- */
.df-highlight-layer {
    position: fixed;
    pointer-events: none;
    z-index: 9000;
}

.df-highlight-box {
    position: absolute;
    background: rgba(255, 220, 0, 0.40);
    border: 2px solid rgba(255, 140, 0, 0.95);
    border-radius: 2px;
    pointer-events: none;
}

.df-highlight-box.current {
    background: rgba(255, 80, 0, 0.40);
    border: 2px solid rgba(220, 30, 0, 1);
}

/* ---------- Viewer containers ---------- */
#flipbook-wrapper,
#normal-view-container {
    width: 100%;
    height: 100vh;
}

#flipbook-wrapper.is-hidden,
#normal-view-container.is-hidden {
    display: none !important;
}

/* ---------- Mode-based global hide rules ----------
   DearFlip injects DOM (and uses fullscreen-style positioning) that does
   not all live inside #flipbook-wrapper — its UI bar, the preview-pages
   container, and any fullscreen layer can sit at body level. So we
   force-hide every known DearFlip surface when the user is in Normal
   mode, and vice versa for Normal-View content in Flipbook mode. The
   body class is set by viewer-controller.js on each switch. */
body.mode-normal #flipbook-wrapper,
body.mode-normal .df-container,
body.mode-normal .DRPDF-container,
body.mode-normal .df-ui,
body.mode-normal .df-fullscreen,
body.mode-normal .df-loader,
body.mode-normal #preview-container {
    display: none !important;
    visibility: hidden !important;
}

body.mode-flipbook #normal-view-container {
    display: none !important;
}

/* ---------- Normal View (native browser PDF viewer in iframe) ---------- */
#normal-view-container {
    background: #2b2b2b;
}

#normal-iframe {
    display: block;
    width: 100%;
    height: 100vh;
    border: 0;
    background: #2b2b2b;
}

/* ---------- Loading overlay ---------- */
#viewer-loading {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    z-index: 99999;
    font-size: 14px;
}

#viewer-loading.is-hidden {
    display: none;
}

.viewer-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ffc107;
    border-radius: 50%;
    animation: viewer-spin 0.9s linear infinite;
    margin-bottom: 12px;
}

@keyframes viewer-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Fallback message ---------- */
#fallback-message {
    display: none;
    color: white;
    text-align: center;
    margin-top: 50px;
    font-family: sans-serif;
}

#fallback-message a {
    color: #ffc107;
    text-decoration: underline;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 640px) {
    #fb-toolbar {
        top: 6px;
        right: 6px;
        gap: 4px;
    }

    #fb-toolbar button,
    #fb-toolbar a.toolbar-btn {
        padding: 5px 8px;
        font-size: 12px;
    }

    .view-switch button {
        padding: 5px 8px;
        font-size: 12px;
    }

    #search-panel {
        top: 100px;
        right: 6px;
        left: 6px;
        width: auto;
    }

    /* Hide labels on tiny screens, keep icons */
    .toolbar-label {
        display: none;
    }
}