/* PDF Viewer - standalone page styles */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: #525659;
    font-family: Arial, sans-serif;
    overflow: hidden;
    direction: rtl;
}

/* ═══════════════════════════════════════════════════════════
   TOOLBAR  —  redesigned from scratch
   Key decisions:
   • Fixed width (68px) so the layout is deterministic
   • NO inner scroll wrapper — overflow:visible everywhere
     so ::after tooltip pseudo-elements are never clipped
   • Buttons are fixed 44×44px squares, period
   • Tooltips appear to the right of each button
   ═══════════════════════════════════════════════════════════ */

:root {
    --tb-width: 50px;       /* toolbar width — also used by JS for left offset */
    --tb-btn:   34px;       /* compact size matching jbtn icon style */
    --tb-bg:    #f5f4ef;
    --tb-border:#ddd;
    --tb-sep:   #ccc;

    /* Button colours — matches real jbtn.css palette */
    --btn-face:    linear-gradient(to bottom, #DDD29E 0%, #D0C38A 45%, #BCA963 100%);
    --btn-face2:   linear-gradient(to bottom, #BCA963 0%, #D0C38A 55%, #DDD29E 100%); /* active (flipped) */
    --btn-hover:   linear-gradient(to bottom, #EAE0AE 0%, #DACB96 45%, #C6B36D 100%);
    --btn-text:    #771E23;
    --btn-border:  #967E35;
    --btn-active-bg: linear-gradient(to bottom, #BCA963 0%, #D0C38A 55%, #DDD29E 100%);
    --btn-active-text: #3b0a0a;

    /* Tooltip */
    --tip-bg:    #222;
    --tip-color: #f5f5f5;
}

/* ── Toolbar shell ── */
#pdfToolbar {
    direction: ltr;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--tb-width);
    height: 100%;
    background: var(--tb-bg);
    border-right: 1px solid var(--tb-border);
    z-index: 200;           /* above viewport (z-index:0) and snip overlay (z-index:200 shares, OK) */
    overflow: visible;      /* CRITICAL — never clip tooltip pseudo-elements */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 6px;
    /* scrollable along the column without clipping x */
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
    scrollbar-color: #bbb transparent;
}

/* ── Separator ── */
.tb-sep {
    width: calc(var(--tb-width) - 16px);
    height: 1px;
    background: var(--tb-sep);
    margin: 4px 0;
    flex-shrink: 0;
}

/* ── Uniform toolbar button ── */
.tb-btn {
    position: relative;
    width:  var(--tb-btn);
    height: var(--tb-btn);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid var(--btn-border);
    background: var(--btn-face);
    color: var(--btn-text);
    user-select: none;
    transition: background 0.15s, filter 0.15s;
}

.tb-btn:hover {
    background: var(--btn-hover);
}

.tb-btn:active {
    background: var(--btn-active-bg);
    color: var(--btn-active-text);
}

.tb-btn.active {
    background: var(--btn-active-bg);
    color: var(--btn-active-text);
    border-color: #5a3e00;
}

.tb-btn[disabled] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ── Tooltips are rendered by JS into #tbTooltip (body child)
      to escape overflow clipping on the scroll container ── */
#tbTooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 0;
    direction: ltr;   /* always caret-then-label regardless of page RTL */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
}

#tbTooltip.visible {
    visibility: visible;
    opacity: 1;
}

#tbTooltip .tb-tip-caret {
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 8px solid #2a2a2a;
    flex-shrink: 0;
    align-self: center;
}

#tbTooltip .tb-tip-label {
    background: #2a2a2a;
    color: #f5f5f5;
    font-size: 13px;
    font-family: Arial, sans-serif;
    padding: 5px 12px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(0,0,0,0.5);
    direction: rtl;
}

/* ── Page counter in toolbar ── */
#pageInfo {
    color: #555;
    font-size: 11px;
    text-align: center;
    line-height: 1.3;
    padding: 4px 2px;
    user-select: none;
}

/* ── Viewer area ── */
#pdfViewport {
    position: absolute;
    top: 0;
    left: var(--tb-width);
    right: 0;
    bottom: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* anchor pages to left edge — keeps left side reachable when zoomed */
    padding: 20px 20px 40px;
    gap: 16px;
    direction: ltr;
}

.pdf-page-wrapper {
    position: relative;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
    display: inline-block;
    line-height: 0;
    margin-left: auto;   /* self-center when narrower than viewport; */
    margin-right: auto;  /* left edge stays at 0 when wider (overflow scrollable) */
}

.pdf-page-wrapper canvas {
    /* Size is set via inline style; block overrides from pdf_viewer.min.css */
    display: block !important;
    max-width: none !important;
}

/* ── Snip overlay (drawn over the viewport, not the toolbar) ── */
#snapOverlay {
    position: fixed;
    top: 0;
    left: 0;   /* adjusted by JS */
    right: 0;
    bottom: 0;
    z-index: 200;
    cursor: crosshair;
    background: rgba(0,0,0,0.22);
}

#snapOverlay .snap-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.65);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 15px;
    pointer-events: none;
    white-space: nowrap;
    direction: rtl;
}

#snapSelection {
    position: fixed;
    border: 2px solid #e74c3c;
    background: rgba(231,76,60,0.07);
    pointer-events: none;
    z-index: 201;
    display: none;
}

/* ── Snip preview modal ── */
#snapPreview {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 300;
    background: rgba(0,0,0,0.6);
    align-items: flex-start;
    justify-content: center;
    padding-top: 60px;
}

#snapPreview.visible {
    display: flex;
}

#snapPreviewBox {
    background: #fff;
    border-radius: 6px;
    padding: 18px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    direction: rtl;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

#snapPreviewBox img {
    max-width: 100%;
    max-height: 60vh;
    border: 1px solid #ddd;
    object-fit: contain;
}

#snapPreviewBox .preview-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#snapPreviewBox input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 14px;
    direction: rtl;
}

#snapPreviewBox .btn-dl,
#snapPreviewBox .btn-close {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: var(--btn-text);
    background: var(--btn-face);
    border: 1px solid var(--btn-border);
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(80,55,0,0.18);
    transition: background 0.15s;
}

#snapPreviewBox .btn-dl:hover,
#snapPreviewBox .btn-close:hover {
    background: var(--btn-hover);
}

#snapPreviewBox .btn-dl:active,
#snapPreviewBox .btn-close:active {
    background: var(--btn-active-bg);
}

/* ── Loading indicator ── */
#pdfLoading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 18px;
    z-index: 50;
}

/* ── Invert colors mode ── */
#pdfViewport.inverted canvas {
    filter: invert(1);
}

/* ── Text layer (PDF.js) ── */
.pdf-page-wrapper .textLayer {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 1;
    line-height: 1;
    /* text spans are invisible but positioned for selection */
    pointer-events: none;   /* disabled until highlight mode is on */
    /* Multiply blending lets the selection colour tint the canvas without
       washing it out: highlight × dark-ink → stays dark; highlight × white → tinted.
       This is how Chrome's built-in PDF viewer avoids blur and stacking. */
    mix-blend-mode: multiply;
}

/* Highlight mode: enable pointer events so text is selectable */
#pdfViewport.highlight-mode .textLayer {
    pointer-events: all;
    cursor: text;
}

/* Highlighted text (browser native ::selection).
   Solid colour — no alpha channel — is essential with mix-blend-mode:multiply:
   semi-transparent colours stack when spans overlap, producing dark bands. */
#pdfViewport.highlight-mode .textLayer ::selection {
    background: rgb(180, 220, 255);   /* solid light-blue; adjust hue to taste */
    color: transparent;               /* keep span text itself invisible */
}

/* ── Pan mode ── */
#pdfViewport.pan-mode {
    cursor: grab;
    user-select: none;
}
#pdfViewport.pan-dragging {
    cursor: grabbing;
}

/* Make text layer spans transparent by default; only show on selection */
.textLayer span {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

/* ── Zoom info & page-jump in toolbar ── */
#zoomInfo {
    color: #555;
    font-size: 11px;
    text-align: center;
    padding: 2px;
    user-select: none;
}

#pageJump {
    width: 38px;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 3px;
    color: #333;
    font-size: 11px;
    text-align: center;
    padding: 3px 0;
    -moz-appearance: textfield;
    flex-shrink: 0;
}

#pageJump::-webkit-outer-spin-button,
#pageJump::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* ── Print: fit each PDF page to paper, no chrome ── */
@media print {
    @page { margin: 0; size: auto; }

    html, body {
        background: #fff !important;
        overflow: visible !important;
    }

    #pdfToolbar,
    #pdfLoading,
    #snapPreview        { display: none !important; }

    #pdfViewport {
        position: static !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
        padding: 0 !important;
        gap: 0 !important;
        background: #fff !important;
    }

    .pdf-page-wrapper {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        page-break-after: always;
        break-after: page;
    }

    /* Scale the canvas to the full paper width; inline style is overridden here */
    .pdf-page-wrapper canvas {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        image-rendering: auto !important;  /* let the printer use its own interpolation */
    }

    .textLayer { display: none !important; }
}