/* PDF Document Mapper — GLOBAL overrides for the pdf.js interactive form layer.
   These live here (not in PdfMapper.razor.css) on purpose: the `.annotationLayer` inputs are created at
   runtime by pdf.js, so they never get Blazor's scoped `b-xxxxx` attribute and a scoped selector would
   never match them. Every rule is prefixed with pdf.js's own `.annotationLayer` class (or the mapper's
   `.pm-place-ghost`), so it stays contained — no app-wide side effects. Linked from index.html AFTER
   pdf_viewer.css so these win the cascade. */

/* ── Zoom feel ──────────────────────────────────────────────────────────────────
   Ctrl+wheel presizes the page containers instantly (PnJsInterop.presizePdfMapperContainers);
   these transitions turn that per-tick snap into a short ease so the gesture reads as one smooth
   scale instead of discrete jumps. The rules are GLOBAL on purpose: the container div belongs to
   PdfCanvasHost (no scoped css) and the canvas/annotationLayer are JS-created, so scoped selectors
   never match any of them. */
.pm-pdfjs { position: relative; }
.pm-pdfjs, .pm-pdfjs > .pm-pdfjs-canvas { transition: width .13s ease-out, height .13s ease-out; }
/* The forms layer is px-positioned at the width it was RENDERED at, so a resized container leaves the
   inputs stranded at their old spots until the sharp re-render. Presize transform-scales the layer in
   sync with the canvas instead (same duration/easing keeps them aligned mid-gesture). Absolute at 0,0:
   a transformed element becomes the containing block for its absolutely-positioned sections, so it must
   share the canvas origin (statically it sits BELOW the inline canvas in flow). */
.pm-pdfjs > .annotationLayer { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform .13s ease-out; }

/* pdf.js draws a dark hover border + a blue focus border on form inputs; the mockup has neither
   (just the field's light highlight + caret), so strip the border/outline/shadow in every state. */
.annotationLayer .textWidgetAnnotation input,
.annotationLayer .textWidgetAnnotation textarea,
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .textWidgetAnnotation input:hover,
.annotationLayer .textWidgetAnnotation input:focus,
.annotationLayer .textWidgetAnnotation textarea:hover,
.annotationLayer .textWidgetAnnotation textarea:focus,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .choiceWidgetAnnotation select:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* FOCUS state only: when the user clicks into a native field to edit, drop the resting blue highlight
   so the field "clears" — but make it TRANSPARENT, not opaque white. The PDF page under the field is
   already white, so a transparent field reads as cleared/active AND lets the form's printed underline
   (page content on the canvas) show through. An opaque white fill hid that line, which broke "the PDF
   stays 100% same." */
.annotationLayer .textWidgetAnnotation input:focus,
.annotationLayer .textWidgetAnnotation textarea:focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
    background-image: none !important;
    background-color: transparent !important;
}

/* Native field RESTING BACKGROUND is intentionally NOT overridden: pdf.js renders each field's true
   background (the PDF's own MK color, else pdf.js's default highlight from
   --annotation-unfocused-field-background) — identical to how the source PDF reads in a viewer. We
   previously forced a flat color here, which visibly recolored the fields; the rule is removed so the
   PDF stays 100% unchanged. We only strip the hover/focus border + outline above; we add nothing to
   the field's fill. */

/* A native field bound to a VARIABLE displays its friendly label (e.g. "First Name"); colour it like a
   token — purple + underline — so it reads as a variable binding, not literal text (parity with the overlay
   value chips). Keyed on data-pm-token containing "{{", which the mapper sets when the field holds a
   {{variable}}. Literal/prefilled fields carry no {{token}} and stay in the PDF's normal text colour. */
.annotationLayer input[data-pm-token*="{{"],
.annotationLayer textarea[data-pm-token*="{{"] {
    color: #5b46a8 !important;
    text-decoration: underline;
    text-decoration-color: rgba(91, 70, 168, 0.55);
    text-underline-offset: 2px;
}
/* A native field whose value contains an UNKNOWN {{token}} (not in the variable catalog) — flag it so the
   admin fixes it before it silently fails to populate at generation. */
.annotationLayer input[data-pm-invalid="1"],
.annotationLayer textarea[data-pm-invalid="1"] {
    color: #b03245 !important;
    outline: 1.5px solid rgba(176, 50, 69, 0.6) !important;
    text-decoration: underline wavy rgba(176, 50, 69, 0.85);
}

/* Inline chip editor over a native TEXT field: {{variables}} render as labelled CHIPS (purple) and literal
   text stays plain in a distinct colour — always shown, never the raw {{token}}, edited in place. It sits
   over the pdf.js input (kept, hidden, for Save's raw value). Transparent bg so the PDF field highlight shows. */
.annotationLayer .pm-chip-field {
    box-sizing: border-box; overflow: hidden; white-space: nowrap;
    font-size: 11px; padding: 0 3px; outline: none; cursor: text; background: transparent;
}
.annotationLayer .pm-chip-field.is-invalid { outline: 1.5px solid rgba(176, 50, 69, 0.6); border-radius: 2px; }
/* Literal (typed) text — a distinct colour from the variable chips, so you can tell them apart. */
.annotationLayer .pm-chip-lit { color: #1a1a1a; }
/* A variable chip — the friendly label, purple pill; clearly distinct from literal text. */
.annotationLayer .pm-chip-tok {
    display: inline-block; vertical-align: middle;
    background: #ece7fb; color: #5b46a8; border: 1px solid rgba(91, 70, 168, 0.3);
    border-radius: 4px; padding: 0 5px; margin: 0 1px; font-size: 10px; line-height: 1.4;
    font-family: 'Inter', sans-serif; white-space: nowrap; user-select: none;
}
.annotationLayer .pm-chip-tok.is-unknown { background: #fde8ea; color: #b03245; border-color: rgba(176, 50, 69, 0.4); }

/* Checked checkbox/radio appearance: with ENABLE_FORMS the glyph is drawn in the interactive layer, and
   pdf.js renders this form's "on" state as an ✗ where the SOURCE PDF shows a ✓. Normalize the CHECKED
   look to a ✓ (matching how the document reads in a real viewer): drop pdf.js's/browser's own glyph
   (appearance:none, neutralize any ::before/::after) and paint a check via an SVG background that scales
   to the field box. Unchecked boxes are untouched. */
.annotationLayer input[type="checkbox"]:checked,
.annotationLayer input[type="radio"]:checked {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 88% 88% !important;
}
.annotationLayer input[type="checkbox"]:checked::before,
.annotationLayer input[type="checkbox"]:checked::after,
.annotationLayer input[type="radio"]:checked::before,
.annotationLayer input[type="radio"]:checked::after { content: none !important; }

/* While PLACING an overlay, the native pdf.js form widgets must not swallow the placement click — so an
   overlay CAN be dropped on top of a native field. pdf.js gives each widget its own `pointer-events: auto`
   (to make forms interactive), which overrides the container's `pointer-events:none`, so the widget would
   otherwise capture the click. Force it off on the widgets themselves during placing so the click lands on
   the overlay layer. (`.pm-page-wrap`/`data-mode` are the mapper's own elements, but `.annotationLayer` is
   pdf.js-created, so this rule lives here in the global sheet.) */
.pm-page-wrap[data-mode="placing"] .annotationLayer,
.pm-page-wrap[data-mode="placing"] .annotationLayer * { pointer-events: none !important; }

/* Placing-mode ghost — a field-sized dashed box with a + that follows the cursor while arming a field
   (mockup `.place-ghost`). JS appends it to <body>, outside the component, so it's styled globally. */
.pm-place-ghost {
    position: fixed; z-index: 9999; display: none; align-items: center; justify-content: center;
    border: 1.5px dashed #7c5cdb; background: rgba(124, 92, 219, 0.12); border-radius: 3px;
    pointer-events: none;
}
.pm-place-ghost-plus { color: #7c5cdb; font-size: 14px; font-weight: 700; line-height: 1; }