/*
 * sign_pdf.css — small polish layer specific to the Sign PDF tool, on top
 * of the shared pdf_edit.css workspace styles (toolbar / stage / overlay /
 * modal) that this page also loads, which supplies the bulk of the look
 * (`.pdfedit-toolbar`, `.pe-tool-group`, `.pdfedit-stage`, `.pe-obj`,
 * `.pe-modal*`, `.pe-sig-*`, `.pe-done-row`, etc.). Nothing here invents
 * new design tokens — everything reuses the shared `--accent` / `--border`
 * / `--success` / etc. custom properties from style.css's :root.
 */

/* Placement-mode segmented control ("place on each page" vs "same spot,
   every page") - just the existing .pe-tool/.pe-wide look, tightened up
   a touch since these two sit together as one choice. */
.pe-mode-group { gap: 6px; }
.pe-mode-group .pe-tool.pe-wide { display: inline-flex; align-items: center; gap: 6px; }

/* "Signature added" confirmation - a small badge next to the placement
   counter that fades in on a successful placement and fades back out on
   its own, so the user gets a clear, low-friction acknowledgement without
   a blocking alert(). */
.sp-flash-badge {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--success); font-size: 12.5px; font-weight: 700;
  opacity: 0; transform: translateY(-2px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sp-flash-badge.show { opacity: 1; transform: translateY(0); }

/* Bulk-apply confirmation banner - reuses .pe-done-row's success-tinted
   look from pdf_edit.css. That rule right-aligns a single trailing .btn
   via margin-left:auto; this banner has two, so give the second one its
   own gap instead of hugging the first. */
#spBulkBanner .btn + .btn { margin-left: 8px; }
#spBulkBanner strong { color: inherit; }

/* Saved-signature shortcut in the modal footer. */
.pe-saved-sig-row .btn { white-space: nowrap; }

/* Upload-tab transparency preview: shows the (possibly background-removed)
   signature against a checkerboard, the standard image-editor convention
   for "this is transparent", so the toggle isn't just a blind checkbox -
   the user can actually see whether the auto-removal looks right on their
   photo before committing to it. */
.sp-sig-preview-wrap { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.sp-checker-bg {
  border: 1.5px dashed var(--border); border-radius: 10px; padding: 10px;
  background-image:
    repeating-conic-gradient(#c9c2d6 0% 25%, transparent 0% 50%);
  background-size: 16px 16px;
  background-color: #fff;
  display: flex; align-items: center; justify-content: center; min-height: 100px;
}
:root[data-theme="dark"] .sp-checker-bg,
:root:not([data-theme="light"]) .sp-checker-bg { background-color: #2a2438; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sp-checker-bg { background-color: #2a2438; } }
.sp-checker-bg img { max-width: 100%; max-height: 140px; display: block; }
.sp-toggle-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.sp-toggle-row input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer;
}
.sp-toggle-row span { font-size: 13px; color: var(--text); line-height: 1.45; }
.sp-toggle-subhint { display: inline-block; margin: 2px 0 0; }