@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Dancing+Script:wght@500;700&family=Great+Vibes&display=swap');

/* ============ Signature creator ============ */
.sig-section {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sig-section.collapsed { display: none; }
.sig-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.sig-creator { display: flex; flex-direction: column; gap: 12px; }

.sig-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-self: flex-start;
}
.sig-tab {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  transition: background .15s, color .15s;
}
.sig-tab:hover { color: var(--text); }
.sig-tab.active {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.sig-panel { display: none; }
.sig-panel.active { display: flex; flex-direction: column; gap: 12px; }

.sig-canvas-wrap {
  position: relative;
  /* Always paper-white so the dark ink stroke is visible in both themes — */
  /* matches .sig-current-preview and the white PDF the signature embeds into. */
  background: #ffffff;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  width: 100%;
  max-width: 500px;
  aspect-ratio: 500 / 180;
  overflow: hidden;
}
.sig-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.sig-canvas-wrap-type canvas { cursor: default; }
.sig-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--text-mute);
  font-size: 13px;
}
.sig-placeholder.hidden { display: none; }

.sig-controls { display: flex; gap: 8px; }
.sig-actions { display: flex; justify-content: flex-end; }

.sig-current-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sig-current-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sig-current-preview {
  flex: 1;
  min-width: 160px;
  max-width: 280px;
  height: 64px;
  background: #ffffff;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.sig-current-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ============ Page card ============ */
.sign-page-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.sign-page-card .page-thumb {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: filter 0.12s;
}
.sign-page-card .page-thumb:hover { filter: brightness(0.96); }
.sign-page-card .page-thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.sign-page-card.has-signatures { border-color: var(--primary); }

.sign-thumb-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.sign-thumb-actions {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
}
.sign-thumb-actions .btn { flex: 1; }

/* ============ Placement overlay ============ */
.sign-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 16, 0.88);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sign-editor {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  width: 100%;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.sign-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.sign-toolbar-info { display: flex; flex-direction: column; gap: 2px; }
.sign-toolbar-info strong { font-size: 14px; }
.sign-count { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.sign-toolbar-help {
  flex: 1;
  font-size: 12px;
  color: var(--text-soft);
  min-width: 200px;
}
.sign-toolbar-pager {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sign-toolbar-pager .btn { padding: 4px 8px; }

.sign-toolbar-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sign-toolbar-zoom .btn { padding: 4px 8px; }
.sign-zoom-pct {
  font-size: 12px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  text-align: center;
  user-select: none;
}
.sign-toolbar-actions { display: flex; gap: 8px; }
.sign-toolbar-history { display: flex; gap: 2px; }
.sign-toolbar-history .btn { padding: 4px 8px; }
.sign-toolbar-history .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Editor body: optional thumbnails sidebar + the stage. Same flex-row
   architecture as redact. min-height: 0 lets the stage's overflow:auto
   actually scroll instead of bloating the editor. */
.sign-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.sign-thumbs {
  flex: 0 0 156px;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border-right: 1px solid var(--border);
}
.sign-editor[data-single-page="true"] .sign-thumbs { display: none; }

.sign-thumb-strip {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
  overflow: hidden;
}
.sign-thumb-strip:hover { border-color: var(--border-strong); }
.sign-thumb-strip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.sign-thumb-strip.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft, rgba(37, 99, 235, 0.18));
}
.sign-thumb-strip canvas {
  display: block;
  width: 100%;
  height: auto;
}
.sign-thumb-strip .thumb-label {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  pointer-events: none;
  line-height: 1.4;
}
.sign-thumb-strip .thumb-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.sign-stage {
  flex: 1;
  overflow: auto;
  background:
    linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%),
    linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%) 10px 10px,
    var(--bg);
  background-size: 20px 20px;
  padding: 24px;
}
.sign-stage-inner {
  position: relative;
  display: block;
  margin: 0 auto;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.sign-stage-inner canvas { display: block; }

@media (max-width: 720px) {
  .sign-overlay { padding: 8px; }
  .sign-toolbar { gap: 10px; }
  .sign-toolbar-help { display: none; }
  .sign-thumbs { display: none; }
}

.sign-place-layer {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  touch-action: none;
}
/* While a tool is armed and the cursor is over the layer, the ghost shows
 * the size/position that will be placed. A crosshair cursor sits on top of
 * the ghost so the user can pinpoint the exact click/anchor location even
 * when the ghost is large — and during drag-to-size, the crosshair tracks
 * the moving corner of the preview rect. Existing placements re-assert
 * cursor: move so the user still gets a hint when they're about to grab one. */
.sign-place-layer.armed { cursor: crosshair; }

.pf-ghost {
  opacity: 0.5;
  pointer-events: none;
  outline: 1.5px dashed rgba(0, 0, 0, 0.55);
  outline-offset: 2px;
  border-color: transparent !important;
  box-shadow: none !important;
  transition: none;
}
[data-theme="dark"] .pf-ghost {
  outline-color: rgba(255, 255, 255, 0.6);
}
.pf-ghost-hint {
  position: absolute;
  pointer-events: none;
  transform: translateX(-50%);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: rgba(20, 20, 20, 0.88);
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  z-index: 5;
}
[data-theme="dark"] .pf-ghost-hint {
  background: rgba(240, 240, 240, 0.92);
  color: #111;
}
.sign-placement {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: move;
  outline: 1px dashed transparent;
  outline-offset: -1px;
  transition: outline-color .12s, box-shadow .12s;
}
.sign-placement:hover {
  outline-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.sign-placement.dragging,
.sign-placement.resizing {
  outline-color: var(--primary);
  opacity: 0.5;
}
/* The remove button floats just outside the top-right corner for every
   placement so (1) tiny rects still have a full draggable interior and
   (2) all types look the same. The ::after bridge below keeps :hover
   engaged when the cursor crosses the gap from element to button. */
.sign-remove {
  position: absolute;
  top: -26px;
  right: -26px;
  width: 22px;
  height: 22px;
  z-index: 6;
  border-radius: 50%;
  border: none;
  background: var(--danger);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.pf-placement:hover .sign-remove,
.pf-placement.selected .sign-remove {
  opacity: 1;
  pointer-events: auto;
}
.pf-placement.dragging .sign-remove,
.pf-placement.resizing .sign-remove,
.pf-placement.editing .sign-remove {
  opacity: 0 !important;
  pointer-events: none !important;
}
.sign-remove:hover { filter: brightness(1.1); }

.pf-placement::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 36px;
  height: 36px;
  z-index: 1;
}
.pf-placement.dragging::after,
.pf-placement.resizing::after,
.pf-placement.editing::after { display: none; }

/* Resize handles — apply to every placement type. */
.pf-placement .resize-handle {
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1.5px solid var(--primary);
  border-radius: 2px;
  z-index: 5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity .12s;
}
.pf-placement:hover .resize-handle,
.pf-placement.selected .resize-handle,
.pf-placement.resizing .resize-handle,
.pf-placement.editing .resize-handle {
  opacity: 1;
}
/* While dragging the whole element, hide every handle so the user can sight-
   line the placement to content on the page without distraction. */
.pf-placement.dragging .resize-handle {
  opacity: 0 !important;
  pointer-events: none;
}
/* While resizing, only the grabbed handle stays visible — the others would
   just clutter the bounding box the user is trying to size. */
.pf-placement.resizing .resize-handle:not(.resize-active) {
  opacity: 0 !important;
  pointer-events: none;
}
.pf-placement .resize-handle:hover {
  background: var(--primary);
  border-color: #fff;
}
.pf-placement .resize-handle-nw { top: -5px;  left: -5px; cursor: nwse-resize; }
.pf-placement .resize-handle-n  { top: -5px;  left: calc(50% - 5px); cursor: ns-resize; }
.pf-placement .resize-handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.pf-placement .resize-handle-e  { top: calc(50% - 5px); right: -5px; cursor: ew-resize; }
.pf-placement .resize-handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.pf-placement .resize-handle-s  { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.pf-placement .resize-handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.pf-placement .resize-handle-w  { top: calc(50% - 5px); left: -5px; cursor: ew-resize; }

/* ============ Signing receipt explainer ============ */
.receipt-explainer {
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
  margin-bottom: 16px;
}
.receipt-explainer strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 14px;
}
.receipt-explainer code {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

/* ============ Placement editor toolbar — type selector ============ */
.pf-type-row {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pf-type-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pf-type-btn:hover { color: var(--text); }
.pf-type-btn.active {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* ============ Placement element ============ */
.pf-placement {
  position: absolute;
  cursor: move;
  border: 1px dashed transparent;
  box-sizing: border-box;
}
.pf-placement:hover { border-color: var(--accent); }
/* Suppress the hover/selected border (and its sig-placement outline twin)
   while moving the whole element — the chrome gets in the way of precise
   positioning. Also hide the cursor so the element itself is the only thing
   the user has to read. Resize keeps the border so the user can see the
   bounding box they're stretching. */
.pf-placement.dragging,
.pf-placement.dragging:hover {
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: none;
}
.sign-placement.dragging {
  outline-color: transparent !important;
}
.pf-placement.editing {
  cursor: text;
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.05);
  outline: none;
}
.pf-placement-text { padding: 0 4px; }
.pf-placement-check,
.pf-placement-x {
  user-select: none;
  -webkit-user-select: none;
}

/* Inner content span — keeps contenteditable separate from handles/remove. */
.pf-place-content {
  display: inline-block;
  outline: none;
  min-width: 1ch;
}
.pf-place-content-text { user-select: text; }
.pf-place-content-glyph { user-select: none; pointer-events: none; }
.pf-placement.editing .pf-place-content-text {
  cursor: text;
  caret-color: var(--accent);
}
.pf-placement.editing .pf-place-content-text:empty::before {
  content: 'Type here';
  color: var(--text-mute);
  font-style: italic;
  pointer-events: none;
}

.pf-swatch-row {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pf-swatch {
  width: 28px;
  height: 28px;
  padding: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pf-swatch:hover { border-color: var(--border); }
.pf-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.pf-swatch span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.pf-placement.selected { border-color: var(--accent); border-style: solid; }

/* Signature creator inside placement editor */
.pf-sig-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-sig-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.pf-sig-modal-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  width: min(560px, 92vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
}
.pf-sig-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pf-sig-modal-head h3 { margin: 0; font-size: 16px; }
.pf-sig-modal-close {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--text-soft);
}
.pf-sig-modal-close:hover { border-color: var(--border); color: var(--text); }