/* pdf-viewer.css - Professional Styling (Theme Support) */

/* Default dimensions for the <pdf-viewer> custom element so it's visible
   even before the JS loads. Consumers can override via their own CSS or
   via the height="..." attribute. */
pdf-viewer {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    /* Container queries let the hamburger menu, stamp grid, and other responsive
       rules respond to the VIEWER'S own width — not the browser viewport. Critical
       for embedded scenarios where the viewport is wide but the viewer is narrow. */
    container-type: inline-size;
}

:root {
    /* DARK THEME (Default) */
    --pdf-bg-dark: #0d1117;
    --pdf-bg-panel: #161b22;
    --pdf-border: #30363d;
    --pdf-text-main: #c9d1d9;
    --pdf-text-muted: #8b949e;
    --pdf-accent: #58a6ff;
    --pdf-accent-bg: rgba(56, 139, 253, 0.15);
    --pdf-hover: rgba(177, 186, 196, 0.12);
    --pdf-success: #238636;
    --pdf-danger: #da3633;
    --pdf-shadow: rgba(0,0,0,0.5);
    --pdf-input-bg: #0d1117;

    /* Form fields on the page: the page is white paper in both themes and the field text is the PDF's own (nearly
       always black), so these do not change with the theme. --pdf-input-bg is the viewer's own inputs (toolbars,
       dialogs), which do. */
    --pdf-field-bg: rgba(49, 131, 200, 0.2);
    --pdf-field-text: #1f2328;
}

/* The browser draws a field's checkbox, dropdown arrow and date picker light too, whatever the host page's
   color-scheme. */
.pdf-form-field {
    color-scheme: light;
}

/* LIGHT THEME OVERRIDES */
[data-theme="light"] {
    --pdf-bg-dark: #f0f2f5;
    --pdf-bg-panel: #ffffff;
    --pdf-border: #d1d9e0;
    --pdf-text-main: #1f2328;
    --pdf-text-muted: #656d76;
    --pdf-accent: #0969da;
    --pdf-accent-bg: rgba(9, 105, 218, 0.1);
    --pdf-hover: rgba(208, 215, 222, 0.3);
    --pdf-success: #1a7f37;
    --pdf-danger: #cf222e;
    --pdf-shadow: rgba(0,0,0,0.15);
    --pdf-input-bg: rgba(49, 131, 200, 0.2); 
}

/* --- Main Layout Container --- */
.layout-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%; 
    background: var(--pdf-bg-dark);
    color: var(--pdf-text-main);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    z-index: 0;
    transition: background 0.2s, color 0.2s;
    /* Create isolated stacking context to contain all child z-index elements */
    /* This prevents dropdowns/tooltips from bleeding through when multiple viewers are stacked */
    isolation: isolate;
}

/* --- Primary Toolbar --- */
.toolbar {
    min-height: 56px;
    background: var(--pdf-bg-panel);
    border-bottom: 1px solid var(--pdf-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 16px;
    flex-shrink: 0;
    z-index: 20;
    gap: 8px 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.toolbar-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

/* Compact toolbar (compact-toolbar="true"): ONE line, tighter spacing. For a host
   that gives the viewer part of a split screen, where a wrapped toolbar costs a
   whole row of document. Deliberately no overflow scrolling -- the toolbar holds
   the zoom dropdown, and a scrolling container would clip it. The host keeps the
   toolbar short instead (read-only, no theme toggle), and at narrow widths the
   rotate buttons and mode labels give way. More specific than the narrow-container
   rule below that turns wrapping back on, so it wins there too. */
pdf-viewer[compact-toolbar] .toolbar {
    flex-wrap: nowrap;
    min-height: 44px;
    padding: 4px 8px;
    gap: 4px 6px;
}
pdf-viewer[compact-toolbar] .toolbar-group { flex-shrink: 0; gap: 4px; }
pdf-viewer[compact-toolbar] .toolbar-btn { padding: 0 8px; }
/* Edit session (edit-session="annotate" on a read-only viewer): the edit button
   while viewing; Save and Done while editing; the discard question in their place
   when Done is pressed with unsaved changes. These rules only HIDE -- whether a
   button shows at all is still decided by .needs-document, which sets an inline
   display once a document has loaded. */
pdf-viewer .edit-confirm { display: none; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
pdf-viewer:not(.pdf-editing) .edit-when-editing { display: none !important; }
pdf-viewer.pdf-editing .edit-when-viewing { display: none !important; }
pdf-viewer.pdf-edit-confirming .edit-when-editing { display: none !important; }
pdf-viewer.pdf-edit-confirming .edit-confirm { display: inline-flex; }
pdf-viewer .edit-confirm-text { color: var(--pdf-text-main); }
pdf-viewer .edit-discard-btn { color: #dc3545; border-color: #dc3545; }

@container (max-width: 560px) {
    pdf-viewer[compact-toolbar] .toolbar [data-action="rotate-ccw"],
    pdf-viewer[compact-toolbar] .toolbar [data-action="rotate-cw"] { display: none; }
    pdf-viewer[compact-toolbar] .mode-switch .toolbar-btn span { display: none; }
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background-color: var(--pdf-border);
    margin: 0 4px;
    display: inline-block;
}

.toolbar-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--pdf-text-main);
    margin-left: 8px;
    white-space: nowrap;
}

/* --- Toolbar Buttons --- */
.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--pdf-text-main);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    gap: 8px;
    user-select: none;
}

.toolbar-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.toolbar-btn:hover:not(:disabled) {
    background-color: var(--pdf-hover);
    color: var(--pdf-text-main);
}

.toolbar-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.toolbar-btn.active {
    background-color: var(--pdf-accent-bg);
    color: var(--pdf-accent);
    border-color: rgba(56, 139, 253, 0.4);
}

.toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Primary Action Button (Save/Sign) */
.toolbar-btn.primary {
    background-color: var(--pdf-success);
    color: white;
    border: 1px solid rgba(240, 246, 252, 0.1);
}

.toolbar-btn.primary:hover:not(:disabled) {
    background-color: #2ea043;
    color: white;
}

/* Icon Only Button Variant */
.toolbar-btn.icon-only {
    padding: 0;
    width: 32px;
}

/* Hamburger menu toggle — hidden on wide screens; revealed only at the phone breakpoint */
.toolbar-btn.toolbar-menu-toggle {
    display: none;
}

/* Segmented "editor" control: Fill / Annotate / Form Designer / Crop / Organize */
.mode-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--pdf-bg-dark);
    border: 1px solid var(--pdf-border);
    border-radius: 6px;
    padding: 2px;
}
.mode-switch .toolbar-btn {
    height: 28px;
    padding: 0 10px;
    gap: 6px;
}
.mode-switch .toolbar-divider {
    height: 18px;
    margin: 0 2px;
}

/* --- Secondary Annotation Toolbar --- */
.annot-toolbar {
    background: var(--pdf-bg-dark);
    border-bottom: 1px solid var(--pdf-border);
    padding: 4px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow-x: auto;
    box-shadow: inset 0 4px 6px -4px rgba(0,0,0,0.1);
}

/* Property Inputs */
.prop-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--pdf-border);
}

.prop-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--pdf-text-muted);
    font-weight: 600;
}

.color-input {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--pdf-border);
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
}

.range-input {
    width: 80px;
    accent-color: var(--pdf-accent);
}

.stamp-select {
    background: var(--pdf-bg-panel);
    color: var(--pdf-text-main);
    border: 1px solid var(--pdf-border);
    padding: 2px 8px;
    height: 24px;
    border-radius: 4px;
    font-size: 12px;
}

/* --- Content Area & jtt-sidebar --- */
.content-area {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.jtt-pdf-viewer-left-sidebar {
    width: 240px;
    min-width: 150px;
    max-width: 600px;
    background: var(--pdf-bg-panel);
    border-right: 1px solid var(--pdf-border);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Grid properties will be set dynamically by JavaScript */
     display: grid;
     gap: 10px;
     padding: 16px;
     justify-content: center;
     align-content: start;
     flex-shrink: 0;
     /* Use flex-based height from parent .content-area instead of fixed calc.
        The parent is display:flex with overflow:hidden so this fills available space. */
     min-height: 0;
}


/* jtt-sidebar Scrollbar */
.jtt-pdf-viewer-left-sidebar::-webkit-scrollbar {
    width: 8px;
}
.jtt-pdf-viewer-left-sidebar::-webkit-scrollbar-track {
    background: var(--pdf-bg-dark);
}
.jtt-pdf-viewer-left-sidebar::-webkit-scrollbar-thumb {
    background: var(--pdf-border);
    border-radius: 4px;
}
.jtt-pdf-viewer-left-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--pdf-text-muted);
}

.jtt-pdf-viewer-left-sidebar.collapsed {
    display: none;
}

/* jtt-sidebar Splitter */
.jtt-pdf-viewer-left-sidebar-splitter {
    width: 4px;
    background: var(--pdf-border);
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s;
}

.jtt-pdf-viewer-left-sidebar-splitter:hover {
    background: var(--pdf-accent);
}

.jtt-pdf-viewer-left-sidebar-splitter:active {
    background: var(--pdf-accent);
}

.jtt-pdf-viewer-left-sidebar-splitter.collapsed {
    display: none;
}

.thumbnail-item {
    /* Width and height controlled by JavaScript */
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: all 0.2s;
    border-radius: 6px;
    overflow: hidden;
    background: var(--pdf-bg-panel);
    box-shadow: 0 4px 6px var(--pdf-shadow);
    display: flex;
    flex-direction: column;
}

.thumbnail-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.2);
    border-color: var(--pdf-text-muted);
}

.thumbnail-item.active {
    border-color: var(--pdf-accent);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.4);
}

.page-number {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,0.75);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* --- Viewer Area --- */
.viewer-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--pdf-bg-dark);
    display: flex;
    flex-direction: column;
}

.pdf-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: grab;
    /* Subtle dot grid pattern */
    background-color: var(--pdf-bg-dark);
    background-image: radial-gradient(var(--pdf-border) 1px, transparent 1px);
    background-size: 20px 20px;
    touch-action: none;
}

.pdf-container:active {
    cursor: grabbing;
}

/* Page Wrapper */
.pdf-page-wrapper {
    margin-bottom: 60px;
    position: relative;
    background: white;
    box-shadow: 0 10px 30px var(--pdf-shadow);
    /* PDF.js sizes the text layer with round(down, ..., var(--scale-round-x)).
       Undefined, that whole declaration is invalid and the layer silently falls
       back to the wrapper's size -- which is the wrong way round on a rotated
       page. */
    --scale-round-x: 1px;
    --scale-round-y: 1px;
}

/* Form field layer — holds the absolutely-positioned form fields in full-page
   coordinates so it can be offset together with the page content when cropped. */
.pdf-form-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* fields set pointer-events:auto; empty areas pass through */
}

/* --- Form Designer: crosshair while a drawing tool is active --- */
.pdf-designer-drawing .pdf-page-wrapper,
.pdf-designer-drawing .pdf-page-wrapper * {
    cursor: crosshair !important;
}

/* --- Form Designer: selectable / selected placed fields --- */
.pdf-form-field.pdf-designer-selectable {
    cursor: move;
    outline: 1px dashed var(--pdf-accent, #58a6ff);
    outline-offset: 1px;
}
.pdf-form-field.pdf-designer-selected {
    outline: 2px solid var(--pdf-accent, #58a6ff);
    outline-offset: 1px;
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.25);
}
.pdf-form-field.pdf-designer-dragging,
.pdf-form-field.pdf-designer-resizing {
    opacity: 0.85;
}
.pdf-designer-resize {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: var(--pdf-accent, #58a6ff);
    border: 2px solid #fff;
    border-radius: 2px;
    cursor: nwse-resize;
    z-index: 30;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* --- Crop Mode --- */
.crop-toolbar-hint {
    font-size: 12px;
    color: var(--pdf-text-muted);
}

/* Always-readable badge naming the page being cropped (lives in the toolbar, unscaled). */
.crop-page-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--pdf-accent);
    background: var(--pdf-accent-bg);
    border: 1px solid var(--pdf-accent);
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* Bright outline marking which page wrapper is currently being cropped. */
.pdf-page-wrapper.crop-active-page {
    outline: 3px solid var(--pdf-accent);
    outline-offset: 2px;
}

/* Selection overlay sits on top of the page wrapper, in render-scale px (scaled by zoom). */
.pdf-crop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    overflow: hidden;       /* clip the box-shadow dimmer to the page */
    cursor: crosshair;
    touch-action: none;
}

.pdf-crop-rect {
    position: absolute;
    box-sizing: border-box;
    border: 1px dashed var(--pdf-accent);
    /* Dim everything outside the selection */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    cursor: move;
}

.pdf-crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--pdf-accent);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.pdf-crop-handle[data-handle="nw"] { top: -6px;  left: -6px;  cursor: nwse-resize; }
.pdf-crop-handle[data-handle="n"]  { top: -6px;  left: calc(50% - 6px); cursor: ns-resize; }
.pdf-crop-handle[data-handle="ne"] { top: -6px;  right: -6px; cursor: nesw-resize; }
.pdf-crop-handle[data-handle="e"]  { top: calc(50% - 6px); right: -6px; cursor: ew-resize; }
.pdf-crop-handle[data-handle="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; }
.pdf-crop-handle[data-handle="s"]  { bottom: -6px; left: calc(50% - 6px); cursor: ns-resize; }
.pdf-crop-handle[data-handle="sw"] { bottom: -6px; left: -6px;  cursor: nesw-resize; }
.pdf-crop-handle[data-handle="w"]  { top: calc(50% - 6px); left: -6px; cursor: ew-resize; }

/* In crop mode, disable text selection / link clicks on the active page */
.content-area.crop-mode .pdf-text-layer,
.content-area.crop-mode .pdf-link-layer {
    pointer-events: none;
}

/* --- Read Only Badge --- */
.read-only-badge {
    color: var(--pdf-danger);
    font-weight: 600;
    font-size: 12px;
    background: rgba(218, 54, 51, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(218, 54, 51, 0.2);
}

/* --- SVG Layer & Annotations --- */
.pdf-svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: inherit;
}

/* Text Layer for Selection - PDF.js 5.x compatible */
.pdf-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    line-height: 1;
    text-align: initial;
    pointer-events: none;
    z-index: 2;
    transform-origin: 0 0;
}

/* PDF.js lays the text layer out in UNROTATED page space and hands the rotation
   to the stylesheet as data-main-rotation -- these three rules are that half of
   the contract. Without them a rotated page's spans stay in the unrotated
   positions, which puts selectable text (and anything measured against it, such
   as a search highlight) most of a page away from the glyphs it belongs to.
   The layer keeps the page's unrotated size, so each rule turns it about its own
   origin and then slides it back over the wrapper. */
.pdf-text-layer[data-main-rotation="90"] {
    transform: rotate(90deg) translateY(-100%);
}

.pdf-text-layer[data-main-rotation="180"] {
    transform: rotate(180deg) translate(-100%, -100%);
}

.pdf-text-layer[data-main-rotation="270"] {
    transform: rotate(270deg) translateX(-100%);
}

.pdf-text-layer :is(span, br) {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0 0;
    pointer-events: auto;
}

.pdf-text-layer span.markedContent {
    top: 0;
    height: 0;
}

.pdf-text-layer .highlight {
    margin: -1px;
    padding: 1px;
    background-color: rgba(180, 0, 170, 0.2);
    border-radius: 4px;
}

.pdf-text-layer ::selection {
    background: var(--pdf-accent-bg);
}

.pdf-text-layer br::selection {
    background: transparent;
}

/* Sentinel that keeps a drag-selection from inverting when the pointer runs off
   the end of the text -- attachTextLayerSelectionGuard() in pdf-loader.js creates
   it and toggles .active for the length of a drag. Parked below the layer
   (top: 100% with bottom: 0 leaves it zero-height) until then.
   pointer-events must be restored here: the layer sets none so clicks reach the
   form fields underneath, and this element is only useful if the browser can
   resolve a selection onto it. Sitting at z-index -1 keeps it behind the spans,
   which are hit first. */
.pdf-text-layer .endOfContent {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    right: 0;
    bottom: 0;
    z-index: -1;
    cursor: default;
    user-select: none;
    pointer-events: auto;
}

.pdf-text-layer .endOfContent.active {
    top: 0;
}

/* --- Hyperlink Layer --- */
.pdf-link-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.pdf-link-layer .pdf-link {
    pointer-events: auto;
    display: block;
    cursor: pointer;
    background: transparent;
    border-radius: 2px;
    transition: background 0.15s, box-shadow 0.15s;
}

.pdf-link-layer .pdf-link:hover {
    background: var(--pdf-accent-bg);
    box-shadow: 0 0 0 1px var(--pdf-accent);
}

/* Disable hyperlink clicks in annotate/designer modes so they don't intercept drawing */
.annotation-mode .pdf-link-layer,
.designer-mode .pdf-link-layer {
    pointer-events: none;
}
.annotation-mode .pdf-link-layer .pdf-link,
.designer-mode .pdf-link-layer .pdf-link {
    pointer-events: none;
}

.annotation-mode .pdf-container {
    cursor: default;
}

.annotation-mode .pdf-svg-layer {
    z-index: 100;
    cursor: crosshair;
}

/* While a pending-edit (just-placed adhoc signature) is active, lift the SVG
   layer above form fields (z:10) and any other overlays so drag across the
   full page stays smooth and the signature can't be obscured.
   !important needed because `_setMode` writes pointer-events inline on the
   SVG element when leaving annotate mode, and inline style would otherwise
   beat this class rule. */
.pending-edit-active .pdf-svg-layer {
    z-index: 1000;
    pointer-events: auto !important;
}

.pdf-pending-apply-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    height: 100%;
    width: 100%;
    border: none;
    background: var(--pdf-accent, #2563eb);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    font-family: inherit;
}
.pdf-pending-apply-btn:hover { background: #1d4ed8; }

.pdf-apply-confirm-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pdf-apply-confirm-modal {
    background: var(--pdf-bg-panel);
    color: var(--pdf-text-main);
    border: 1px solid var(--pdf-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    padding: 20px 22px;
    width: min(380px, 92vw);
    font-size: 14px;
}
.pdf-apply-confirm-modal .apply-modal-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}
.pdf-apply-confirm-modal .apply-modal-body {
    color: var(--pdf-text-muted);
    line-height: 1.4;
    margin-bottom: 18px;
}
.pdf-apply-confirm-modal .apply-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.pdf-apply-confirm-modal .pdf-apply-btn {
    padding: 7px 14px;
    border: 1px solid var(--pdf-border);
    border-radius: 6px;
    background: var(--pdf-bg-panel);
    color: var(--pdf-text-main);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.pdf-apply-confirm-modal .pdf-apply-btn:hover { background: var(--pdf-hover); }
.pdf-apply-confirm-modal .pdf-apply-btn.primary {
    background: var(--pdf-accent, #2563eb);
    color: white;
    border-color: var(--pdf-accent, #2563eb);
}
.pdf-apply-confirm-modal .pdf-apply-btn.primary:hover { background: #1d4ed8; }

.annotations-hidden .annot-shape {
    display: none !important;
}

/* --- Designer Mode Updates --- */
.designer-mode {
    user-select: none;
    -webkit-user-select: none;
}

.designer-mode .pdf-text-layer span {
    pointer-events: none !important;
}

.signature-field {
    background: transparent !important;
}

.annot-shape {
    cursor: pointer;
    pointer-events: all;
    transition: stroke-opacity 0.2s;
}

.annot-shape:hover {
    stroke-opacity: 0.6;
}

.selection-box {
    fill: rgba(88, 166, 255, 0.1);
    stroke: var(--pdf-accent);
    stroke-width: 1px;
    stroke-dasharray: 4, 4;
    pointer-events: none;
}

.resize-handle {
    fill: var(--pdf-bg-panel);
    stroke: var(--pdf-accent);
    stroke-width: 2px;
    r: 5px;
    pointer-events: all;
    transition: r 0.15s;
}

.resize-handle:hover {
    fill: var(--pdf-accent);
    r: 7px;
}

.cursor-nwse { cursor: nwse-resize; }
.cursor-nesw { cursor: nesw-resize; }
.cursor-move { cursor: move; }

/* --- Text Annotation Input --- */
.floating-textarea {
    position: absolute;
    background: var(--pdf-bg-panel);
    border: 1px dashed var(--pdf-accent);
    resize: none;
    overflow: hidden;
    z-index: 200;
    font-family: sans-serif;
    padding: 0;
    margin: 0;
    outline: none;
    line-height: 1.2;
    min-width: 50px;
    min-height: 1.2em;
    white-space: pre;
    color: var(--pdf-text-main);
}

/* --- Modals --- uses absolute positioning to stay within component bounds */
.jtt-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.jtt-modal-content {
    background: var(--pdf-bg-panel);
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--pdf-border);
    width: 500px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--pdf-text-main);
}

.sig-tabs, .settings-tabs {
    display: flex;
    background: var(--pdf-bg-dark);
    border-radius: 6px;
    padding: 4px;
    border: 1px solid var(--pdf-border);
}

.sig-tabs button, .settings-tabs button {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--pdf-text-muted);
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
}

.sig-tabs button.active, .settings-tabs button.active {
    background: var(--pdf-accent);
    color: white;
}

.sig-body {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sig-input {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--pdf-border);
    background: var(--pdf-input-bg);
    color: var(--pdf-text-main);
    font-size: 18px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.sig-input:focus {
    outline: none;
    border-color: var(--pdf-accent);
}

.sig-preview-text {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Brush Script MT', cursive;
    font-size: 48px;
    color: var(--pdf-text-main);
    border: 2px dashed var(--pdf-border);
    border-radius: 6px;
    background: rgba(125,125,125,0.05);
}

.canvas-wrapper {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    height: 240px;
    border: 1px solid var(--pdf-border);
}

.canvas-wrapper canvas {
    width: 100%;
    height: 100%;
    cursor: crosshair;
    display: block;
}

.jtt-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    border-top: 1px solid var(--pdf-border);
    padding-top: 16px;
}

/* Utilities */
.btn-clear {
    margin-top: 8px;
    background: transparent;
    color: var(--pdf-danger);
    border: 1px solid rgba(218, 54, 51, 0.3);
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    align-self: flex-end;
}
.btn-clear:hover { background: rgba(218, 54, 51, 0.1); }

.error-box {
    margin: 20px;
    padding: 16px;
    background: rgba(218, 54, 51, 0.1);
    border: 1px solid var(--pdf-danger);
    color: #ff7b72;
    border-radius: 6px;
    text-align: center;
}

/* --- Custom Scrollbar --- */
.custom-scrollbar {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    width: 10px;
    background: rgba(125, 125, 125, 0.1);
    border-radius: 5px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: auto;
}
.custom-scrollbar:hover, .pdf-container:hover .custom-scrollbar, .custom-scrollbar.active, .custom-scrollbar.dragging {
    opacity: 1;
}
.custom-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(125, 125, 125, 0.4);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.custom-scroll-thumb:hover, .custom-scroll-thumb.dragging {
    background: var(--pdf-accent);
}

/* --- Designer Field Specific --- */
.designer-mode .designer-field {
    border: 1px solid var(--pdf-accent);
    background: rgba(88, 166, 255, 0.1);
}

.designer-field.selected {
    border-style: dashed !important;
    border-width: 2px !important;
    border-color: var(--pdf-accent) !important;
}

.designer-resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--pdf-bg-panel);
    border: 2px solid var(--pdf-accent);
    border-radius: 50%;
    z-index: 100;
}

.designer-resize-handle.tl { top: -6px; left: -6px; cursor: nwse-resize; }
.designer-resize-handle.tr { top: -6px; right: -6px; cursor: nesw-resize; }
.designer-resize-handle.bl { bottom: -6px; left: -6px; cursor: nesw-resize; }
.designer-resize-handle.br { bottom: -6px; right: -6px; cursor: nwse-resize; }

.designer-field-drag-target {
    position: absolute;
    inset: 0;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: center;
}

.designer-field-name {
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    pointer-events: none;
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Spinner animation for loading states */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading overlay for document load and save operations */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-panel {
    background: var(--pdf-bg-panel);
    padding: 24px 48px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.loading-spinner-large {
    width: 48px;
    height: 48px;
    border: 4px solid var(--pdf-border);
    border-top: 4px solid var(--pdf-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-message {
    color: var(--pdf-text-main);
    font-size: 14px;
}

/* Zoom Rendering Spinner - shown during high-quality re-render */
.zoom-spinner-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    background: var(--pdf-bg-panel);
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--pdf-border);
    border-top: 3px solid var(--pdf-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Search Highlight overlays on PDF pages */
.pdf-search-highlight {
    position: absolute;
    background: rgba(255, 235, 59, 0.35) !important; 
    pointer-events: none;
    z-index: 50 !important;
    animation: highlight-pulse 0.3s ease-out;
}

/* highlightBand(): a printed row the host pointed at (e.g. an AP line item). */
.pdf-row-band {
    position: absolute;
    background: rgba(255, 193, 7, 0.28);
    outline: 2px solid rgba(255, 152, 0, 0.85);
    pointer-events: none;
    z-index: 52;
    animation: pdf-row-band-in 0.25s ease-out;
}

/* focusRowValue(): the one value on the row the host asked about. */
.pdf-value-box {
    position: absolute;
    outline: 3px solid rgba(220, 53, 69, 0.9);
    background: rgba(255, 235, 59, 0.25);
    border-radius: 2px;
    pointer-events: none;
    z-index: 53;
    animation: pdf-row-band-in 0.25s ease-out;
}

@keyframes pdf-row-band-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pdf-search-highlight.active {
    background: rgba(255, 152, 0, 0.35) !important; 
    box-shadow: 0 0 10px rgba(255, 152, 0, 0.8);
    z-index: 51 !important;
}

@keyframes highlight-pulse {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
 
/* Begin Search Panel */
.search-panel {
    width: 320px;
    min-width: 250px;
    max-width: 500px;
    background: var(--pdf-bg-panel, white);
    border-left: 2px solid var(--pdf-border);
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.search-panel.collapsed {
    display: none;
}

/* Search Splitter */
.search-splitter {
    width: 4px;
    background: var(--pdf-border);
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s;
}

.search-splitter:hover {
    background: var(--pdf-accent);
}

.search-splitter:active {
    background: var(--pdf-accent);
}

.search-splitter.collapsed {
    display: none;
}

.search-result-item {
    border: solid 1px var(--pdf-border);
    border-radius: 15px;
    margin: 5px;
    cursor: pointer;
    font-size: 13px;
    background: var(--pdf-bg-panel);
    transition: all 0.2s ease;
    overflow: hidden;
}

.search-result-item:hover {
    border-color: var(--pdf-accent, #58a6ff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.search-result-item.active {
    background: var(--pdf-accent-bg);
    border-color: var(--pdf-accent);
    border-width: 2px;
    box-shadow: 0 6px 16px rgba(88, 166, 255, 0.4);
}

.search-result-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(88, 166, 255, 0.08);
    border-bottom: 1px solid rgba(88, 166, 255, 0.15);
}

.search-result-item.active .search-result-header {
    background: rgba(88, 166, 255, 0.2);
}

.search-result-number {
    display: none; 
}

.search-result-item.active .search-result-number {
    background: linear-gradient(135deg, #0366d6 0%, #005cc5 100%);
    box-shadow: 0 2px 6px rgba(3, 102, 214, 0.5);
}

.search-result-page {
    color: var(--pdf-text-muted, #666);
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-result-text {
    color: var(--pdf-text-main);
    line-height: 1.6;
    padding: 12px;
    background: var(--pdf-bg-panel);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.search-result-item.active .search-result-text {
    background: var(--pdf-accent-bg);
}

.search-result-match {
    background: linear-gradient(to bottom, #fff176 0%, #ffeb3b 100%);
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid #ffd54f;
    box-shadow: 0 1px 2px rgba(255, 193, 7, 0.3);
}
/* End Search Panel */

/* --- Custom Checkbox/Radio Button Styles --- */
.pdf-check-field {
    border: 1px solid var(--pdf-border);
    background: var(--pdf-bg-panel);
    user-select: none;
}

.pdf-check-field.checkbox {
    border-radius: 2px;
}

.pdf-check-field.radio {
    border-radius: 50%;
}

.pdf-check-field:focus {
    outline: 2px solid var(--pdf-accent, #0969da);
    outline-offset: 1px;
}

.pdf-check-field:hover:not([aria-disabled="true"]) {
    border-color: var(--pdf-accent, #0969da);
}

.pdf-check-field .check-indicator {
    display: none;
    width: 70%;
    height: 70%;
    color: var(--pdf-text-main);
}

.pdf-check-field .check-indicator svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.pdf-check-field.checked .check-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style-specific adjustments */
.pdf-check-field[data-check-style="circle"] .check-indicator {
    width: 50%;
    height: 50%;
}

.pdf-check-field[data-check-style="square"] .check-indicator {
    width: 65%;
    height: 65%;
}

.pdf-check-field[data-check-style="diamond"] .check-indicator {
    width: 60%;
    height: 60%;
}

.pdf-check-field[data-check-style="star"] .check-indicator {
    width: 75%;
    height: 75%;
}

/* Read-only/disabled state */
.pdf-check-field[aria-disabled="true"],
.pdf-check-field[tabindex="-1"] {
    opacity: 0.7;
    cursor: not-allowed;
}
/* End Custom Checkbox/Radio Button Styles */

/* ═══════════════════════════════════════════════════════════════════════
   Modal & Overlay Styles (previously in PdfViewer.razor.css / Blazor-scoped)
   Now included here for both Blazor and pure JS Web Component usage.
   ═══════════════════════════════════════════════════════════════════════ */

.content-area.annotation-mode .pdf-svg-layer { cursor: default; }
.content-area.annotation-mode.drawing-mode .pdf-svg-layer { cursor: crosshair; }

/* Modal Styling - uses absolute positioning to stay within component bounds */
.jtt-modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
    padding: 16px;
    box-sizing: border-box;
}

/* Sized against the overlay (the viewer), not the viewport — the viewer is often
   shorter/narrower than the window, and vw/vh here pushed the dialog's header and
   its Save/Cancel row outside the clipped .layout-container. */
.jtt-modal-content {
    background: var(--pdf-bg-panel);
    color: var(--pdf-text-main);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    padding: 20px;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    max-height: 100%;
    overflow: hidden;
    width: 100%;
    max-width: 900px;
    /* Without this the dialog's min-content width (long nowrap labels + 180px
       selects) beats max-width and the dialog overflows the viewer. */
    min-width: 0;
}

.jtt-modal-content h3 {
    margin-top: 0; margin-bottom: 16px;
    font-size: 18px;
    border-bottom: 1px solid var(--pdf-border);
    padding-bottom: 10px;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--pdf-border);
}

/* Settings Layout */
.settings-layout {
    display: flex; gap: 16px; flex: 1;
    min-height: 0; overflow: hidden;
}

.settings-jtt-sidebar {
    width: 150px;
    flex-shrink: 0;
    border-right: 1px solid var(--pdf-border);
    padding-right: 10px;
    overflow-y: auto;
}

.settings-item {
    padding: 8px 12px; cursor: pointer;
    border-radius: 4px; margin-bottom: 4px;
    transition: background 0.2s;
}
.settings-item:hover { background: var(--pdf-bg-hover); }
.settings-item.active { background: var(--pdf-accent); color: white; }

.settings-editor {
    flex: 1; padding-left: 10px; overflow-y: auto; min-width: 0;
}

/* The body must be a flex container, otherwise the flex:1 on the tab panes is
   inert, they never get a definite height, and their overflow-y:auto can't
   scroll — the overflowing settings are simply clipped and unreachable. */
.settings-body {
    display: flex;
    min-height: 0;
}
.settings-tab-content {
    flex: 1 1 0; min-height: 0; min-width: 0;
}
/* The annotations pane delegates scrolling to the two columns inside
   .settings-layout, so it needs to be a column flex container itself. */
.annotations-settings {
    display: flex; flex-direction: column;
}

/* Tabs */
.settings-tabs {
    display: flex; gap: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--pdf-border);
    flex-shrink: 0;
}

.settings-tabs button {
    background: none; border: none;
    padding: 8px 16px; cursor: pointer;
    color: var(--pdf-text-muted);
    border-bottom: 2px solid transparent;
    font-weight: 500;
}
.settings-tabs button.active { border-bottom-color: var(--pdf-accent); }
.settings-tabs button:hover:not(.active) { color: var(--pdf-text-main); }

/* Property Rows */
.prop-row {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 12px; gap: 16px;
}
.prop-row label {
    font-size: 14px; color: var(--pdf-text-main);
    white-space: nowrap; flex-shrink: 0;
}
.prop-row select,
.prop-row input[type="text"],
.prop-row input[type="number"] { min-width: 180px; }

/* --- Narrow-viewer settings dialog (container query, with @media fallback) --- */
/* Below ~560px a label + 180px control no longer fit side by side, so the label
   takes its own line and the controls share the next one. */
@container (max-width: 560px) {
    .jtt-modal-content { padding: 14px; }
    .prop-row { flex-wrap: wrap; gap: 6px 10px; }
    .prop-row label { flex: 1 0 100%; white-space: normal; }
    .prop-row select,
    .prop-row input[type="text"],
    .prop-row input[type="number"] { min-width: 0; flex: 1 1 auto; box-sizing: border-box; }
    .prop-row select { width: 100%; }
    .range-input { flex: 1 1 auto; width: auto; }
    .settings-layout { flex-direction: column; }
    .settings-jtt-sidebar {
        width: auto; max-height: 108px; flex-shrink: 0;
        border-right: none; border-bottom: 1px solid var(--pdf-border);
        padding-right: 0; padding-bottom: 8px;
    }
    .settings-editor { padding-left: 0; padding-top: 10px; }
}
@media (max-width: 560px) {
    .jtt-modal-content { padding: 14px; }
    .prop-row { flex-wrap: wrap; gap: 6px 10px; }
    .prop-row label { flex: 1 0 100%; white-space: normal; }
    .prop-row select,
    .prop-row input[type="text"],
    .prop-row input[type="number"] { min-width: 0; flex: 1 1 auto; box-sizing: border-box; }
    .prop-row select { width: 100%; }
    .range-input { flex: 1 1 auto; width: auto; }
    .settings-layout { flex-direction: column; }
    .settings-jtt-sidebar {
        width: auto; max-height: 108px; flex-shrink: 0;
        border-right: none; border-bottom: 1px solid var(--pdf-border);
        padding-right: 0; padding-bottom: 8px;
    }
    .settings-editor { padding-left: 0; padding-top: 10px; }
}

/* Inputs */
.color-input {
    width: 40px; height: 28px;
    padding: 0; border: none; background: none; cursor: pointer;
}
.range-input { width: 120px; }

/* Context Menu */
.context-menu {
    position: absolute;
    background: var(--pdf-bg-panel);
    border: 1px solid var(--pdf-border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-radius: 4px;
    z-index: 3000; min-width: 150px; padding: 4px 0;
}
.context-menu-item {
    padding: 8px 16px; cursor: pointer;
    font-size: 14px; color: var(--pdf-text-main);
}
.context-menu-item:hover { background: var(--pdf-bg-hover); }
.context-menu-item.delete { color: #da3633; }

.context-menu-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2999; background: transparent;
}

/* Stamp Dropdown */
.stamp-option { transition: background-color 0.15s ease; }
.stamp-option:hover { background-color: var(--pdf-bg-hover) !important; }

.stamp-jtt-modal-overlay { isolation: isolate; }
.stamp-dropdown { scrollbar-width: thin; }
.stamp-dropdown::-webkit-scrollbar { width: 6px; }
.stamp-dropdown::-webkit-scrollbar-track { background: transparent; }
.stamp-dropdown::-webkit-scrollbar-thumb { background-color: var(--pdf-border); border-radius: 3px; }

/* Page Organizer Overlay */
.page-organizer-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--pdf-bg-panel);
    z-index: 1500;
    display: flex; flex-direction: column; overflow: hidden;
}
.page-organizer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--pdf-border);
    flex-shrink: 0;
}
/* Selection toolbar — appears when more than one page is selected */
.organizer-selection-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    background: var(--pdf-accent-bg, rgba(56,139,253,0.12));
    border-bottom: 1px solid var(--pdf-border);
    flex-shrink: 0;
}
.organizer-selection-count {
    font-size: 13px; font-weight: 600;
    color: var(--pdf-text-main);
}
.organizer-selection-bar .organizer-delete-selected {
    background: #da3633;
    color: #fff;
    border-color: #da3633;
}
.organizer-selection-bar .organizer-delete-selected:hover:not(:disabled) {
    background: #c12e2b;
    color: #fff;
}
.page-organizer-grid {
    flex: 1;
    /* min-height:0 is required: this grid is also a flex item, and a grid
       container's automatic minimum size is its content. Without this it would
       expand to fit all rows (cramming every page in) instead of scrolling. */
    min-height: 0;
    overflow-y: auto; padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    /* grid-auto-rows:min-content is REQUIRED. With the default `auto`, when the
       grid has a definite height the implicit rows collapse to share that height
       (resolving to a few px each), and the card's overflow:hidden then clips the
       thumbnail to those few pixels. min-content sizes each row to its card so
       the grid overflows and scrolls instead. */
    grid-auto-rows: min-content;
    gap: 16px; align-content: start;
}
.organizer-page-card {
    position: relative;
    border: 2px solid var(--pdf-border);
    border-radius: 6px;
    background: var(--pdf-bg-dark);
    cursor: grab;
    transition: border-color 0.15s, opacity 0.15s, box-shadow 0.15s;
    overflow: hidden;
    user-select: none;
}
.organizer-page-card:hover {
    border-color: var(--pdf-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.organizer-page-card.selected {
    border-color: var(--pdf-accent);
    box-shadow: 0 0 0 2px var(--pdf-accent) inset;
}
/* Selection checkbox — top-left corner */
.organizer-select-check {
    position: absolute; top: 6px; left: 6px; z-index: 2;
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.85);
    background: rgba(0,0,0,0.45);
    color: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.organizer-page-card:hover .organizer-select-check { opacity: 1; }
.organizer-page-card.selected .organizer-select-check {
    opacity: 1;
    background: var(--pdf-accent);
    border-color: var(--pdf-accent);
    color: #fff;
}
.organizer-page-card.dragging {
    opacity: 0.4;
    border-color: var(--pdf-accent);
    border-style: dashed;
}
.organizer-thumb-wrapper {
    display: flex; align-items: center; justify-content: center;
    /* Fixed height keeps every card uniform and gives the card a stable size
       before its lazy thumbnail loads (so the grid doesn't reflow as images
       stream in). The thumbnail image scales to fit via max-width/height:100%. */
    height: 180px; padding: 8px;
    background: var(--pdf-bg-panel);
}
/* Placeholder for an inserted blank page (no rendered thumbnail). */
.organizer-blank-thumb {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px dashed var(--pdf-border);
    border-radius: 2px;
    color: #9aa0a6; font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.organizer-page-number {
    position: absolute; bottom: 6px; left: 6px;
    background: rgba(0,0,0,0.6); color: #fff;
    font-size: 11px; font-weight: 600;
    padding: 2px 7px; border-radius: 4px; line-height: 1.4;
}
.organizer-page-actions {
    position: absolute; top: 6px; right: 6px;
    display: flex; gap: 4px;
    opacity: 0; transition: opacity 0.15s;
}
.organizer-page-card:hover .organizer-page-actions { opacity: 1; }
.organizer-action-btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: none; background: rgba(0,0,0,0.55);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.organizer-action-btn:hover { background: rgba(0,0,0,0.75); }
.organizer-action-btn.danger:hover { background: #da3633; }

/* Field Order Modal */
.field-order-hint {
    color: var(--pdf-text-muted);
    font-size: 12px;
    margin: 0 0 12px;
}
.field-order-page {
    font-size: 12px;
    font-weight: 600;
    color: var(--pdf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 12px 0 6px;
}
.field-order-page:first-child { margin-top: 0; }
.field-order-item {
    padding: 8px;
    border: 1px solid var(--pdf-border);
    margin-bottom: 4px;
    border-radius: 4px;
    cursor: grab;
    background: var(--pdf-bg-panel);
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 10px;
}
.field-order-item.dragging { opacity: 0.5; }
.field-order-grip { color: var(--pdf-text-muted); cursor: grab; flex: none; }
.field-order-seq {
    flex: none;
    min-width: 22px;
    text-align: right;
    color: var(--pdf-text-muted);
    font-variant-numeric: tabular-nums;
}
.field-order-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.field-order-note { color: var(--pdf-text-muted); font-size: 11px; }
.field-order-type {
    flex: none;
    color: var(--pdf-text-muted);
    font-size: 12px;
}
.field-order-move { flex: none; display: flex; gap: 4px; }
.field-order-move .toolbar-btn { padding: 2px 6px; line-height: 1; }
.field-order-move .toolbar-btn[disabled] { opacity: 0.35; cursor: default; }

/* --- Narrow-Screen Toolbar (container-query based, with @media fallback) --- */
/* Container queries respond to the <pdf-viewer> element's own width, so the
   toolbar adapts correctly even when the component is embedded in a sidebar or
   a narrow panel on a wide viewport.  @media rules are kept as fallbacks for
   browsers that don't support @container (pre-2022). */

@container (max-width: 700px) {
    .toolbar {
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        padding: 4px 8px;
        gap: 6px;
        row-gap: 4px;
    }
    .toolbar-group {
        gap: 4px;
    }
    .toolbar-divider {
        margin: 0 2px;
    }
    .toolbar-btn {
        height: 30px;
        padding: 0 8px;
        font-size: 12px;
        gap: 4px;
    }
    .toolbar-btn.icon-only {
        width: 30px;
    }
    .toolbar-title {
        font-size: 14px;
        margin-left: 4px;
    }
    .annot-toolbar {
        padding: 4px 8px;
        gap: 6px;
    }
    .page-input {
        width: 34px !important;
    }
    /* Collapse the editor-group labels to icons on narrow embeds (tooltips remain). */
    .mode-switch .toolbar-btn span { display: none; }
    .mode-switch .toolbar-btn { padding: 0 8px; }
}

@container (max-width: 480px) {
    .toolbar {
        padding: 4px 6px;
        gap: 4px;
    }
    .toolbar-btn {
        padding: 0 6px;
    }
    /* Hide trailing text on labeled buttons; SVGs have fixed pixel sizes so remain visible */
    .toolbar-btn[data-action="save"],
    .toolbar-btn[data-action="adhoc-signature"],
    .toolbar-btn[data-action="cancel"],
    label.toolbar-btn.primary {
        font-size: 0;
    }
    .toolbar-btn[data-action="cancel"]::before {
        content: "\00d7";
        font-size: 18px;
        line-height: 1;
    }
    /* Collapse dividers to save horizontal space */
    .toolbar-divider {
        display: none;
    }
}

/* @media fallback for browsers without container query support */
@media (max-width: 700px) {
    .toolbar { height: auto; min-height: 56px; flex-wrap: wrap; padding: 4px 8px; gap: 6px; row-gap: 4px; }
    .toolbar-group { gap: 4px; }
    .toolbar-divider { margin: 0 2px; }
    .toolbar-btn { height: 30px; padding: 0 8px; font-size: 12px; gap: 4px; }
    .toolbar-btn.icon-only { width: 30px; }
    .toolbar-title { font-size: 14px; margin-left: 4px; }
    .annot-toolbar { padding: 4px 8px; gap: 6px; }
    .page-input { width: 34px !important; }
    .mode-switch .toolbar-btn span { display: none; }
    .mode-switch .toolbar-btn { padding: 0 8px; }
}
@media (max-width: 480px) {
    .toolbar { padding: 4px 6px; gap: 4px; }
    .toolbar-btn { padding: 0 6px; }
    .toolbar-btn[data-action="save"], .toolbar-btn[data-action="adhoc-signature"],
    .toolbar-btn[data-action="cancel"], label.toolbar-btn.primary { font-size: 0; }
    .toolbar-btn[data-action="cancel"]::before { content: "\00d7"; font-size: 18px; line-height: 1; }
    .toolbar-divider { display: none; }
}

/* --- Stamp Picker (built-in + custom stamps) --- */
.stamp-dropdown { min-width: 260px; width: 300px; }
.stamp-category-header {
    font-size: 11px;
    color: var(--pdf-text-muted);
    padding: 6px 4px 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stamp-grid {
    display: grid;
    grid-template-columns: 1fr;          /* < 400px (phone): 1 column */
    gap: 6px;
    padding: 0 2px 6px;
}
/* Container query (responds to viewer width, not viewport) */
@container (min-width: 400px) { .stamp-dropdown { width: 380px; } .stamp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 600px) { .stamp-dropdown { width: 540px; } .stamp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 820px) { .stamp-dropdown { width: 700px; } .stamp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* @media fallback */
@media (min-width: 400px) { .stamp-dropdown { width: 380px; } .stamp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 600px) { .stamp-dropdown { width: 540px; } .stamp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .stamp-dropdown { width: 700px; } .stamp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stamp-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--pdf-border);
    background: var(--pdf-bg-dark);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
    min-height: 70px;
}
.stamp-option:hover {
    border-color: var(--pdf-accent);
    background: var(--pdf-hover);
}
.stamp-option:active { transform: translateY(1px); }
.stamp-preview-slot {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.stamp-preview-slot img { max-width: 100%; max-height: 100%; border-radius: 3px; }
.stamp-option-label {
    font-size: 11px;
    color: var(--pdf-text-main);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.stamp-option--builtin { min-height: 60px; }
.stamp-option--builtin .stamp-preview-slot { height: 40px; }
.stamp-option--add {
    border-style: dashed;
    background: transparent;
    color: var(--pdf-text-muted);
}
.stamp-option--add:hover { color: var(--pdf-accent); }
.stamp-add-icon {
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
}
.stamp-tile-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.stamp-option:hover .stamp-tile-actions { opacity: 1; }
.stamp-tile-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(0,0,0,0.5);
    color: white;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.stamp-tile-btn:hover { background: #2563eb; }
.stamp-tile-btn.danger:hover { background: var(--pdf-danger, #c92a2a); }

/* --- Create Custom Stamp Modal --- */
.custom-stamp-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-stamp-modal {
    width: min(480px, 92vw);
    max-height: 90vh;
    background: var(--pdf-bg-panel);
    color: var(--pdf-text-main);
    border: 1px solid var(--pdf-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 13px;
}
.csm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pdf-border);
    background: var(--pdf-bg-dark);
}
.csm-title { font-weight: 600; font-size: 15px; }
.csm-close {
    background: transparent;
    border: none;
    color: var(--pdf-text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
}
.csm-close:hover { background: var(--pdf-hover); color: var(--pdf-text-main); }
.csm-body { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.csm-tabs { display: flex; gap: 4px; background: var(--pdf-bg-dark); border-radius: 6px; padding: 3px; }
.csm-tab {
    flex: 1;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: var(--pdf-text-main);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.csm-tab.active { background: var(--pdf-bg-panel); box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.csm-field { display: flex; flex-direction: column; gap: 4px; }
.csm-field > span { font-size: 11px; color: var(--pdf-text-muted); }
.csm-field input[type="text"], .csm-field input[type="file"] {
    padding: 6px 8px;
    border: 1px solid var(--pdf-border);
    border-radius: 4px;
    background: var(--pdf-bg-dark);
    color: var(--pdf-text-main);
    font-size: 13px;
}
.csm-row { display: flex; gap: 10px; align-items: stretch; }
.csm-row .csm-field { flex: 1; min-width: 0; }
.csm-row input[type="number"], .csm-row select {
    padding: 6px 8px;
    border: 1px solid var(--pdf-border);
    border-radius: 4px;
    background: var(--pdf-bg-dark);
    color: var(--pdf-text-main);
    font-size: 13px;
}
.csm-colors { display: flex; gap: 10px; }
.csm-color { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 11px; color: var(--pdf-text-muted); }
.csm-color input[type="color"] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--pdf-border); border-radius: 4px; background: transparent; cursor: pointer; }
.csm-preview-wrap { display: flex; flex-direction: column; gap: 4px; }
.csm-preview-label { font-size: 11px; color: var(--pdf-text-muted); }
.csm-preview-box {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-conic-gradient(#e9eef7 0% 25%, #f4f6fa 0% 50%) 50%/20px 20px;
    border: 1px solid var(--pdf-border);
    border-radius: 6px;
    padding: 4px;
}
[data-theme="dark"] .csm-preview-box { background: repeating-conic-gradient(#1e293b 0% 25%, #0f172a 0% 50%) 50%/20px 20px; }
.csm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--pdf-border);
    background: var(--pdf-bg-dark);
}
.csm-btn {
    padding: 7px 14px;
    border: 1px solid var(--pdf-border);
    border-radius: 6px;
    background: var(--pdf-bg-panel);
    color: var(--pdf-text-main);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.csm-btn:hover { background: var(--pdf-hover); }
.csm-btn.primary { background: var(--pdf-accent); color: white; border-color: var(--pdf-accent); }
.csm-btn.primary:hover { background: #1d4ed8; }

/* --- Signature Fields Popup --- */
.pdf-signature-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    z-index: 149;
}

.pdf-signature-panel {
    position: absolute;
    width: 300px;
    max-height: calc(100% - 96px);
    background: var(--pdf-bg-panel);
    color: var(--pdf-text-main);
    border: 1px solid var(--pdf-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    z-index: 150;
    overflow: hidden;
    font-size: 13px;
}

.pdf-signature-panel .sig-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--pdf-border);
    background: var(--pdf-bg-dark);
}

.pdf-signature-panel .sig-panel-title {
    font-weight: 600;
    font-size: 14px;
}

.pdf-signature-panel .sig-panel-close {
    background: transparent;
    border: none;
    color: var(--pdf-text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 4px;
}
.pdf-signature-panel .sig-panel-close:hover {
    background: var(--pdf-hover);
    color: var(--pdf-text-main);
}

.pdf-signature-panel .sig-panel-list {
    overflow-y: auto;
    padding: 6px;
    flex: 1 1 auto;
}

.pdf-signature-panel .sig-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pdf-signature-panel .sig-field-row:hover {
    background: var(--pdf-hover);
    border-color: var(--pdf-border);
}
.pdf-signature-panel .sig-field-row + .sig-field-row {
    margin-top: 2px;
}

.pdf-signature-panel .sig-field-info {
    flex: 1 1 auto;
    min-width: 0;
}
.pdf-signature-panel .sig-field-label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdf-signature-panel .sig-field-meta {
    margin-top: 2px;
    font-size: 11px;
    color: var(--pdf-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-signature-panel .sig-field-sign-btn {
    flex-shrink: 0;
    background: var(--pdf-success);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.pdf-signature-panel .sig-field-sign-btn:hover {
    background: #2ea043;
}

.pdf-signature-panel .sig-field-check {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-signature-panel .sig-field-row.is-signed .sig-field-label,
.pdf-signature-panel .sig-field-row.is-signed .sig-field-meta {
    color: var(--pdf-text-muted);
}

.pdf-signature-panel .sig-panel-footer {
    border-top: 1px solid var(--pdf-border);
    padding: 10px;
    background: var(--pdf-bg-dark);
}

.pdf-signature-panel .sig-freehand-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px dashed var(--pdf-border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--pdf-text-main);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pdf-signature-panel .sig-freehand-btn:hover {
    border-color: var(--pdf-accent);
    background: var(--pdf-hover);
}
.pdf-signature-panel .sig-freehand-title {
    font-weight: 600;
    font-size: 13px;
}
.pdf-signature-panel .sig-freehand-desc {
    margin-top: 2px;
    font-size: 11px;
    color: var(--pdf-text-muted);
}

/* Signature panel responsive — container query with @media fallback */
@container (max-width: 480px) {
    .pdf-signature-panel { left: 8px; right: 8px; width: auto; top: 64px; }
}
@media (max-width: 480px) {
    .pdf-signature-panel { left: 8px; right: 8px; width: auto; top: 64px; }
}

/* --- Phone: slim mode strip on top + thumb-zone bottom bar + "More" sheet --- */
/* The mobile chrome is desktop-hidden; the phone queries below reveal it and hide
   the standard top toolbar. Layout order is done with flex `order` on children of
   .layout-container (the chrome wrapper is display:contents so its parts become
   direct flex items). Every control reuses a data-action, so the existing
   dispatcher + state sync (.needs-document / mode .active / .m-page) drive it. */
.m-chrome { display: none; }

@container (max-width: 480px) {
    .toolbar { display: none !important; }
    .m-chrome { display: contents; }

    .m-topbar {
        order: -1; display: flex; align-items: center; gap: 8px;
        padding: 7px 10px; background: var(--pdf-bg-panel); border-bottom: 1px solid var(--pdf-border);
    }
    .m-topbar .m-side { flex: 0 0 auto; width: 42px; height: 42px; }
    .m-modes {
        flex: 1 1 auto; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
        background: var(--pdf-bg-dark); border: 1px solid var(--pdf-border); border-radius: 9px; padding: 3px;
    }
    .m-modes::-webkit-scrollbar { display: none; }
    .m-modes .m-mode {
        flex: 1 0 auto; min-width: 60px; height: 38px; border-radius: 6px;
        font-size: 13px; font-weight: 600; color: var(--pdf-text-muted); justify-content: center;
    }
    .m-modes .m-mode.active { background: var(--pdf-accent-bg); color: var(--pdf-accent); }

    .m-bottombar {
        order: 100; display: flex; align-items: center; gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: var(--pdf-bg-panel); border-top: 1px solid var(--pdf-border); z-index: 30;
    }
    .m-bottombar .toolbar-btn { height: 46px; }
    .m-bottombar .toolbar-btn.icon-only { width: 46px; }
    .m-bottombar .m-save, .m-bottombar .m-accent { padding: 0 16px; gap: 7px; font-size: 14px; font-weight: 600; }
    .m-bottombar .m-accent { color: var(--pdf-accent); background: var(--pdf-accent-bg); border-radius: 10px; }
    .m-pager { display: inline-flex; align-items: center; gap: 2px; background: var(--pdf-bg-dark); border: 1px solid var(--pdf-border); border-radius: 11px; padding: 2px; }
    .m-pager .toolbar-btn.icon-only { width: 42px; height: 42px; }
    .m-page { min-width: 48px; text-align: center; font-size: 13px; color: var(--pdf-text-main); font-variant-numeric: tabular-nums; }
    .m-spacer { flex: 1 1 auto; }

    /* Pager + Sign belong to form-fill; outside it the mode's own sub-toolbar carries the tools. */
    .m-chrome[data-mode="annotate"] .m-fill-only,
    .m-chrome[data-mode="formdesigner"] .m-fill-only,
    .m-chrome[data-mode="crop"] .m-fill-only { display: none !important; }

    /* The real annotate/designer/crop sub-toolbars sit just above the bottom bar. */
    [id^="annot-toolbar-"], [id^="designer-toolbar-"], [id^="crop-toolbar-"] { order: 99; }

    .m-sheet-backdrop { position: absolute; inset: 0; z-index: 9998; background: rgba(1,4,9,.5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
    .m-sheet {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 9999;
        background: var(--pdf-bg-panel); border-top: 1px solid var(--pdf-border);
        border-radius: 18px 18px 0 0; box-shadow: 0 -16px 40px -12px var(--pdf-shadow);
        transform: translateY(101%); transition: transform .32s cubic-bezier(.22,.61,.36,1);
        padding: 6px 12px calc(16px + env(safe-area-inset-bottom)); max-height: 74%; overflow-y: auto;
    }
    .m-chrome.sheet-open .m-sheet-backdrop { opacity: 1; visibility: visible; }
    .m-chrome.sheet-open .m-sheet { transform: none; }
    .m-grab { width: 40px; height: 4px; border-radius: 3px; background: var(--pdf-border); margin: 8px auto 10px; }
    .m-sheet-sec { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pdf-text-muted); font-weight: 600; margin: 12px 4px 6px; }
    .m-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .m-sheet-row {
        display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border-radius: 10px;
        background: var(--pdf-bg-dark); border: 1px solid var(--pdf-border); color: var(--pdf-text-main);
        font: inherit; font-size: 13.5px; cursor: pointer; text-align: left;
    }
    .m-sheet-row svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 18px; }
    .m-sheet-row:active { border-color: var(--pdf-accent); }
}

/* @media fallback for browsers without container-query support (same rules). */
@media (max-width: 480px) {
    .toolbar { display: none !important; }
    .m-chrome { display: contents; }

    .m-topbar {
        order: -1; display: flex; align-items: center; gap: 8px;
        padding: 7px 10px; background: var(--pdf-bg-panel); border-bottom: 1px solid var(--pdf-border);
    }
    .m-topbar .m-side { flex: 0 0 auto; width: 42px; height: 42px; }
    .m-modes {
        flex: 1 1 auto; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
        background: var(--pdf-bg-dark); border: 1px solid var(--pdf-border); border-radius: 9px; padding: 3px;
    }
    .m-modes::-webkit-scrollbar { display: none; }
    .m-modes .m-mode {
        flex: 1 0 auto; min-width: 60px; height: 38px; border-radius: 6px;
        font-size: 13px; font-weight: 600; color: var(--pdf-text-muted); justify-content: center;
    }
    .m-modes .m-mode.active { background: var(--pdf-accent-bg); color: var(--pdf-accent); }

    .m-bottombar {
        order: 100; display: flex; align-items: center; gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: var(--pdf-bg-panel); border-top: 1px solid var(--pdf-border); z-index: 30;
    }
    .m-bottombar .toolbar-btn { height: 46px; }
    .m-bottombar .toolbar-btn.icon-only { width: 46px; }
    .m-bottombar .m-save, .m-bottombar .m-accent { padding: 0 16px; gap: 7px; font-size: 14px; font-weight: 600; }
    .m-bottombar .m-accent { color: var(--pdf-accent); background: var(--pdf-accent-bg); border-radius: 10px; }
    .m-pager { display: inline-flex; align-items: center; gap: 2px; background: var(--pdf-bg-dark); border: 1px solid var(--pdf-border); border-radius: 11px; padding: 2px; }
    .m-pager .toolbar-btn.icon-only { width: 42px; height: 42px; }
    .m-page { min-width: 48px; text-align: center; font-size: 13px; color: var(--pdf-text-main); font-variant-numeric: tabular-nums; }
    .m-spacer { flex: 1 1 auto; }

    .m-chrome[data-mode="annotate"] .m-fill-only,
    .m-chrome[data-mode="formdesigner"] .m-fill-only,
    .m-chrome[data-mode="crop"] .m-fill-only { display: none !important; }

    [id^="annot-toolbar-"], [id^="designer-toolbar-"], [id^="crop-toolbar-"] { order: 99; }

    .m-sheet-backdrop { position: absolute; inset: 0; z-index: 9998; background: rgba(1,4,9,.5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
    .m-sheet {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 9999;
        background: var(--pdf-bg-panel); border-top: 1px solid var(--pdf-border);
        border-radius: 18px 18px 0 0; box-shadow: 0 -16px 40px -12px var(--pdf-shadow);
        transform: translateY(101%); transition: transform .32s cubic-bezier(.22,.61,.36,1);
        padding: 6px 12px calc(16px + env(safe-area-inset-bottom)); max-height: 74%; overflow-y: auto;
    }
    .m-chrome.sheet-open .m-sheet-backdrop { opacity: 1; visibility: visible; }
    .m-chrome.sheet-open .m-sheet { transform: none; }
    .m-grab { width: 40px; height: 4px; border-radius: 3px; background: var(--pdf-border); margin: 8px auto 10px; }
    .m-sheet-sec { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--pdf-text-muted); font-weight: 600; margin: 12px 4px 6px; }
    .m-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .m-sheet-row {
        display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px; border-radius: 10px;
        background: var(--pdf-bg-dark); border: 1px solid var(--pdf-border); color: var(--pdf-text-main);
        font: inherit; font-size: 13.5px; cursor: pointer; text-align: left;
    }
    .m-sheet-row svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 18px; }
    .m-sheet-row:active { border-color: var(--pdf-accent); }
}
/* ──────────────────────────────────────────────────────────────────────────
   Field picking: assigning the document's OWN form fields to people.

   Eight colours, one per signer, so a page full of fields reads at a glance.
   They are hues rather than a scale -- signer 2 is not "more" than signer 1 --
   and each is paired with a badge carrying the person's initials, so the
   assignment survives being printed, screenshotted or read by someone who
   cannot separate the hues.
   ────────────────────────────────────────────────────────────────────────── */
.pdf-pick-selectable {
    cursor: pointer;
    outline: 1px dashed rgba(13, 110, 253, 0.55);
    outline-offset: 1px;
    transition: outline-color 0.12s ease, box-shadow 0.12s ease;
}

.pdf-pick-selectable:hover {
    outline: 2px solid rgba(13, 110, 253, 0.9);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18);
}

.pdf-pick-badge {
    position: absolute;
    top: -9px;
    left: -6px;
    z-index: 6;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font: 600 10px/18px system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    background: #6c757d;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.pdf-pick-assigned { outline-style: solid; }

.pdf-pick-c0 { outline-color: #0d6efd; }
.pdf-pick-c0 .pdf-pick-badge { background: #0d6efd; }
.pdf-pick-c1 { outline-color: #198754; }
.pdf-pick-c1 .pdf-pick-badge { background: #198754; }
.pdf-pick-c2 { outline-color: #d63384; }
.pdf-pick-c2 .pdf-pick-badge { background: #d63384; }
.pdf-pick-c3 { outline-color: #fd7e14; }
.pdf-pick-c3 .pdf-pick-badge { background: #fd7e14; }
.pdf-pick-c4 { outline-color: #6f42c1; }
.pdf-pick-c4 .pdf-pick-badge { background: #6f42c1; }
.pdf-pick-c5 { outline-color: #20c997; }
.pdf-pick-c5 .pdf-pick-badge { background: #20c997; }
.pdf-pick-c6 { outline-color: #b02a37; }
.pdf-pick-c6 .pdf-pick-badge { background: #b02a37; }
.pdf-pick-c7 { outline-color: #495057; }
.pdf-pick-c7 .pdf-pick-badge { background: #495057; }

/* Flashed when picked from a list outside the viewer, so "which one is that?"
   is answered on the page rather than by the field's internal name. */
@keyframes pdfPickFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
    25%      { box-shadow: 0 0 0 6px rgba(255, 193, 7, 0.85); }
    60%      { box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.45); }
}

.pdf-pick-flash { animation: pdfPickFlash 1.5s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .pdf-pick-flash { animation: none; outline: 3px solid #ffc107 !important; }
}

/* While a drag is in progress (moving or resizing an annotation, drawing freehand,
   cropping) nothing may start a selection or a touch pan -- either one scrolls the
   page out from under the thing being placed. Applied by window.pausePan and removed
   by window.resumePan, which also releases it on pointercancel/blur so a gesture the
   OS steals cannot leave the viewer unselectable. */
.pdf-gesture-active,
.pdf-gesture-active * {
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important;
}

/* Annotations are drag targets by nature, so a touch starting on one must never be
   interpreted as a scroll. */
.pdf-svg-layer {
    touch-action: none;
}