/*
 * pdf_edit.css — the PDF Editor tool's canvas workspace. Kept separate
 * from style.css since this page's layout (toolbar + absolutely
 * positioned overlay objects on top of a rendered <canvas>) is unlike
 * anything else in the app. Reuses the shared token contract
 * (--card, --border, --accent, etc.) so it still repaints correctly
 * for both themes.
 */

.pdfedit-panel { max-width: none; }

.pe-loading {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 60px 20px; color: var(--text-muted); font-size: 14px;
}
.pe-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: peSpin 0.8s linear infinite;
}
@keyframes peSpin { to { transform: rotate(360deg); } }

.pdfedit-editor { margin-top: 4px; }

.pdfedit-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 10px; position: sticky; top: 76px; z-index: 20;
}
.pe-tool-group {
  display: flex; align-items: center; gap: 4px;
  padding-right: 10px; border-right: 1px solid var(--border);
}
.pe-tool-group:last-of-type { border-right: none; }
.pe-tool, .pe-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--text); cursor: pointer; font-size: 13px; font-weight: 700;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.pe-tool.pe-wide, #peHighlightModeBtn, #peBoxModeBtn { width: auto; padding: 0 12px; }
.pe-tool:hover, .pe-icon-btn:hover { background: var(--tint); }
.pe-tool.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pe-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pe-icon-btn:disabled:hover { background: transparent; }

.pe-swatches { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.pe-swatch {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong);
  cursor: pointer; padding: 0; transition: transform 0.15s ease;
}
.pe-swatch.active { transform: scale(1.18); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }

.pdfedit-toolbar select {
  padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-solid);
  color: var(--text); font-size: 13px; font-family: inherit;
}

.pe-zoom-group, .pe-page-group { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.pe-zoom-group span, .pe-page-group span { min-width: 76px; text-align: center; }
.pe-flip { transform: rotate(180deg); }

.pdfedit-toolbar > .btn { margin-left: auto; white-space: nowrap; }

.pe-hint { color: var(--text-muted); font-size: 12.5px; margin: 0 0 14px; }

/* --- OCR-edit banner (scanned pages) --- */
.pe-ocr-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin: 0 0 14px; border-radius: 10px; font-size: 13.5px;
  background: var(--tint); border: 1px solid var(--tint-border); color: var(--text);
  /* A floor, not a fixed height - the OCR prompt legitimately wraps to a
     second line on a narrow screen. What this stops is the ordinary
     one-line states differing in height from each other and nudging the
     page every time the message changes. */
  min-height: 44px; box-sizing: border-box;
}
.pe-ocr-banner.pe-ocr-ready { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
/* The idle state - see setOcrBanner in static/js/pdf_edit.js. Same box,
   same height, deliberately quiet: this line must never collapse, because
   it sits above the page and collapsing it moves the page under the
   cursor. */
.pe-ocr-banner.pe-ocr-idle {
  background: transparent; border-color: var(--border); color: var(--text-muted);
}
.pe-ocr-banner.pe-ocr-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.pe-ocr-banner .pe-spinner-sm {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent);
  animation: peSpin 0.8s linear infinite; flex-shrink: 0;
}
.pe-ocr-banner > .btn { margin-left: auto; white-space: nowrap; }
.pe-ocr-banner small { display: block; width: 100%; font-weight: 400; opacity: 0.85; }
.pe-banner-dismiss {
  margin-left: auto; background: none; border: none; cursor: pointer; color: inherit;
  font-size: 18px; line-height: 1; opacity: 0.6; padding: 0 2px;
}
.pe-banner-dismiss:hover { opacity: 1; }

.pe-obj-ocrword {
  position: absolute; box-sizing: border-box; cursor: text;
  outline: 1px dashed transparent; transition: outline-color 0.15s ease, background 0.15s ease;
}
.pe-obj-ocrword:hover { outline: 1.5px dashed var(--accent); background: var(--tint); }

/* Existing, already-digital text on the page - clickable straight away,
   no OCR round-trip needed since pdf.js already knows exactly where
   every word sits. Same invisible-until-hover affordance as
   .pe-obj-ocrword, in the verdigris accent so the two states never
   look identical. */
.pe-obj-digitalword {
  position: absolute; box-sizing: border-box; cursor: text;
  outline: 1px dashed transparent; transition: outline-color 0.15s ease, background 0.15s ease;
}
.pe-obj-digitalword:hover { outline: 1.5px dashed var(--cyan); background: var(--tint-violet); }

.pdfedit-stage-wrap {
  overflow: auto; max-height: 74vh; border: 1px solid var(--border); border-radius: 12px;
  background: repeating-conic-gradient(var(--surface-soft) 0% 25%, var(--bg) 0% 50%) 0 0/ 20px 20px;
  padding: 24px; display: flex; justify-content: center;
}
.pdfedit-stage { position: relative; box-shadow: var(--shadow-lg); background: #fff; height: fit-content; }
.pdfedit-stage canvas { display: block; }

.pdfedit-overlay {
  position: absolute; inset: 0; top: 0; left: 0;
}
/* Claim the gesture so a drag on a placed object isn't stolen by the
   scrolling stage around it (which cancels the pointer sequence mid-drag
   on touch - see the pointercancel handling in sign_pdf.js). */
.pe-obj { touch-action: none; }
.pe-obj {
  position: absolute; box-sizing: border-box; cursor: move;
  outline: 1px dashed transparent; transition: outline-color 0.1s ease;
}
.pe-obj:hover { outline-color: var(--accent-light); }
.pe-obj.selected { outline: 2px solid var(--accent); z-index: 5; }

.pe-obj-text {
  padding: 2px 4px; min-width: 30px; min-height: 1.2em; white-space: pre-wrap; word-break: break-word;
  font-family: Helvetica, Arial, sans-serif; line-height: 1.2;
}
/* A "text" object is drawn into the exported PDF at an exact position -
   x = obj.x, first baseline = obj.y + fontSize x 0.85, one line every
   fontSize x 1.25 (see drawWrappedText and its two call sites). The box
   on screen has to land in the same place, or clicking a word visibly
   moves it before you have typed anything.
   Measured, in a real browser, on the version before this: clicking any
   word dropped its text 4.0px and inflated its box by ~9px - 2px of
   padding-top plus the half-leading of a 1.2 line-height, and a
   min-height/min-width floor that made a short word's box taller and
   wider than the text it replaced, so its outline sat over the lines
   above and below it. Hence: no padding, no minimum size, and a
   line-height set in pixels from JS to exactly the export's own (see
   placeTextObjectExactly in static/js/pdf_edit.js, which also positions
   the element from real font ascent/descent metrics).
   Sticky notes are excluded on purpose - a note is a fixed-size label
   with its own background, not text pinned to the page's own layout. */
.pe-obj-text-exact {
  padding: 0; min-width: 0; min-height: 0;
}
.pe-obj-text:focus { outline: 2px solid var(--accent); cursor: text; }
.pe-obj-rect { background: transparent; }
.pe-obj-image img { width: 100%; height: 100%; display: block; pointer-events: none; }

.pe-obj-delete {
  position: absolute; top: -11px; right: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--danger); color: #fff; border: 2px solid var(--bg-elevated); display: none;
  align-items: center; justify-content: center; cursor: pointer; font-size: 13px; line-height: 1; z-index: 6;
}
.pe-obj.selected .pe-obj-delete { display: flex; }

.pe-obj-resize {
  position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 3px;
  background: var(--accent); border: 2px solid var(--bg-elevated); cursor: nwse-resize; display: none; z-index: 6;
}
.pe-obj.selected .pe-obj-resize { display: block; }

.pe-done-row {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 16px;
  background: var(--success-bg); border: 1px solid var(--success-border); border-radius: 10px;
  color: var(--success); font-size: 13.5px; font-weight: 600; flex-wrap: wrap;
}
.pe-done-row .btn { margin-left: auto; }
.btn-sm { padding: 6px 14px; font-size: 12.5px; }

@media (max-width: 860px) {
  .pdfedit-toolbar { position: static; }
  .pdfedit-stage-wrap { max-height: 60vh; padding: 12px; }
}

/* ===================== Shapes / freehand draw ===================== */

.pe-obj-line, .pe-obj-arrow, .pe-obj-draw {
  background: transparent; outline: none !important; cursor: pointer;
}
.pe-obj-line:hover, .pe-obj-arrow:hover, .pe-obj-draw:hover { filter: drop-shadow(0 0 0 transparent); }
.pe-obj-line.selected svg, .pe-obj-arrow.selected svg, .pe-obj-draw.selected svg { outline: 1px dashed var(--accent); }
.pe-obj-ellipse { border-radius: 50%; background: transparent; }

/* ===================== Redaction ===================== */

.pe-obj-redact {
  background: #000; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pe-obj-redact::after {
  content: "REDACTED"; color: rgba(255,255,255,0.55); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; white-space: nowrap; pointer-events: none;
}

/* ===================== Sticky notes ===================== */

.pe-obj-note { background: #FEF9C3; border: 1px solid #EAB308; box-shadow: var(--shadow); }
.pe-obj-note .pe-obj-text { color: #713F12; font-size: 12px !important; padding: 6px; }

/* ===================== Form fields ===================== */

.pe-obj-formtext { background: rgba(37, 99, 235, 0.08); border: 1.5px dashed var(--accent); border-radius: 3px; }
.pe-obj-formtext::before {
  content: "Text field"; position: absolute; top: -19px; left: 0; font-size: 10px; font-weight: 700;
  color: var(--accent); white-space: nowrap;
}
.pe-obj-formcheckbox { background: rgba(37, 99, 235, 0.08); border: 1.5px dashed var(--accent); border-radius: 3px; }
.pe-obj-formcheckbox::before {
  content: "Checkbox"; position: absolute; top: -19px; left: 0; font-size: 10px; font-weight: 700;
  color: var(--accent); white-space: nowrap;
}

/* ===================== Watermark preview ===================== */

.pe-watermark-preview {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden; z-index: 1;
}
.pe-watermark-preview span {
  font-size: 8vw; font-weight: 800; color: rgba(120, 120, 120, 0.28);
  transform: rotate(-35deg); white-space: nowrap; font-family: var(--font-heading);
}

/* ===================== Modals (signature / pages) ===================== */

.pe-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.pe-modal {
  width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  background: var(--card-solid); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 24px; box-shadow: var(--shadow-lg);
}
.pe-modal-wide { max-width: 640px; }
.pe-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pe-modal-head h3 { margin: 0; font-family: var(--font-heading); font-size: 19px; }
.pe-modal-close {
  width: 32px; height: 32px; border-radius: 9px; border: none; background: var(--surface-soft);
  color: var(--text-muted); font-size: 18px; cursor: pointer; line-height: 1;
}
.pe-modal-close:hover { background: var(--tint); color: var(--text); }
.pe-modal-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pe-modal-foot .btn:last-child { margin-left: auto; }

.pe-sig-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.pe-sig-tab {
  padding: 8px 14px; border: none; background: none; color: var(--text-muted); font-weight: 600;
  font-size: 13.5px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pe-sig-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.pe-sig-pane canvas {
  width: 100%; height: 180px; border: 1.5px dashed var(--border); border-radius: 10px;
  background: #fff; cursor: crosshair; touch-action: none;
}
.pe-sig-type-input {
  width: 100%; padding: 20px 14px; font-size: 34px; font-family: 'Dancing Script', cursive;
  border: 1.5px solid var(--border); border-radius: 10px; background: #fff; color: #111;
}
.pe-saved-sig-row { margin-right: auto; }

.pe-pages-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.pe-page-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft);
}
.pe-page-row .pe-page-num { font-weight: 700; font-size: 13px; color: var(--text-muted); width: 46px; flex-shrink: 0; }
.pe-page-row .pe-page-actions { display: flex; gap: 4px; margin-left: auto; }
.pe-page-row .pe-page-thumb {
  width: 34px; height: 44px; border: 1px solid var(--border-strong); border-radius: 3px; background: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text-muted); overflow: hidden;
}
.pe-page-row.pe-page-deleted { opacity: 0.4; }
.pe-page-row.pe-page-rotate-90 .pe-page-thumb { transform: rotate(90deg); }
.pe-page-row.pe-page-rotate-180 .pe-page-thumb { transform: rotate(180deg); }
.pe-page-row.pe-page-rotate-270 .pe-page-thumb { transform: rotate(270deg); }
.pe-page-row .pe-page-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Drag-and-drop page reordering (alongside the ↑/↓ buttons, which stay as
   the accessible/no-mouse fallback) */
.pe-page-row[draggable="true"] { cursor: grab; }
.pe-page-row.pe-page-dragging { opacity: 0.45; }
.pe-page-row.pe-page-dragover { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* ===================== Persistent page-thumbnail sidebar ===================== */
/* New in this pass - a collapsible left rail in the main editing view
   (as opposed to the "Manage pages" modal's own list, styled above by
   .pe-pages-list/.pe-page-row) so paging around a long document doesn't
   require opening a modal. .pdfedit-body is a plain flex row sibling of
   nothing in the ORIGINAL markup - only pdf_edit.html wraps
   .pdfedit-stage-wrap in it, so this rule can never affect sign_pdf.html
   (it shares this stylesheet but has no .pdfedit-body element). */
.pdfedit-body { display: flex; align-items: flex-start; gap: 12px; }
.pdfedit-body .pdfedit-stage-wrap { flex: 1 1 auto; min-width: 0; }

/* .pe-icon-btn has no "pressed" state of its own in the original rules
   above (only .pe-tool.active does) - needed here so peSidebarToggleBtn
   visibly shows whether the rail is open. Purely additive: a new
   selector, not a change to .pe-icon-btn's own base rule. */
.pe-icon-btn.active { background: var(--accent); color: #fff; }

.pdfedit-pages-sidebar {
  flex: 0 0 118px; width: 118px; max-height: 74vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft);
  padding: 10px;
}
.pe-sidebar-list { display: flex; flex-direction: column; gap: 8px; }
/* Sidebar rows reuse .pe-page-row's own look (border/background/radius -
   see that rule above) by carrying BOTH classes in the markup; these
   modifiers only ever apply on top of it, nothing here overrides or
   renames anything .pe-page-row already declares. */
.pe-sidebar-row {
  flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; cursor: pointer;
  text-align: center;
}
.pe-sidebar-row .pe-page-thumb { width: 100%; height: 84px; }
.pe-sidebar-row .pe-sidebar-page-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.pe-sidebar-row.pe-sidebar-active { border-color: var(--accent); background: var(--tint); }
.pe-sidebar-row.pe-sidebar-active .pe-sidebar-page-label { color: var(--accent); }
.pe-sidebar-row.pe-sidebar-blank .pe-page-thumb { font-size: 10px; }

@media (max-width: 860px) {
  .pdfedit-body { flex-direction: column; }
  .pdfedit-pages-sidebar { width: 100%; flex: 0 0 auto; max-height: 140px; overflow-x: auto; overflow-y: hidden; }
  .pe-sidebar-list { flex-direction: row; }
  .pe-sidebar-row { flex: 0 0 74px; }
}

/* ===================== Whiteout ===================== */
/* Mechanically the same as Redact (an opaque rectangle baked into the
   export) but deliberately styled/labelled as its own tool - see the
   toolbar tooltip in pdf_edit.html for why (visual cleanup vs hiding
   sensitive info are different intents even when the pixels end up
   looking similar). White fill would be invisible against a white page
   with nothing else to mark its bounds while editing, so it gets a
   dashed border + label the same way .pe-obj-redact gets its own
   ::after label. */
.pe-obj-whiteout {
  background: #fff; border: 1.5px dashed var(--text-muted);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pe-obj-whiteout::after {
  content: "WHITEOUT"; color: rgba(33, 29, 44, 0.4); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; white-space: nowrap; pointer-events: none;
}

/* ===================== Polygon / freeform shape ===================== */

.pe-obj-polygon { background: transparent; outline: none !important; cursor: pointer; }
.pe-obj-polygon.selected svg { outline: 1px dashed var(--accent); }

/* ===================== Radio button group ===================== */

.pe-obj-radio {
  border-radius: 50%; background: rgba(37, 99, 235, 0.08); border: 1.5px dashed var(--accent);
}
.pe-obj-radio-label {
  position: absolute; top: -19px; left: 0; font-size: 10px; font-weight: 700;
  color: var(--accent); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}

/* ===================== Dropdown form field ===================== */

.pe-obj-formdropdown { background: rgba(37, 99, 235, 0.08); border: 1.5px dashed var(--accent); border-radius: 3px; }
.pe-obj-formdropdown::before {
  content: "Dropdown"; position: absolute; top: -19px; left: 0; font-size: 10px; font-weight: 700;
  color: var(--accent); white-space: nowrap;
}

/* ===================== Redo button (mirrored Undo icon) ===================== */

.pe-icon-flip { display: inline-flex; transform: scaleX(-1); }

/* ===================== Keyboard shortcuts legend ===================== */

.pe-shortcuts-list { display: flex; flex-direction: column; gap: 10px; }
.pe-shortcut-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 13.5px; color: var(--text);
}
.pe-shortcut-keys { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--text-muted); font-size: 12.5px; }
.pe-shortcuts-list kbd, .pe-hint kbd {
  display: inline-block; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border-strong);
  background: var(--surface-soft); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 700;
  box-shadow: 0 1.5px 0 var(--border-strong);
}