/* PDF editor — full-app layout. Uses the site's design tokens (tools.css). */

.pv-app {
  --pv-toolbar-h: 52px;
  --pv-rail-w: 172px;
  --pv-props-w: 250px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  min-height: 560px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* Toolbar */
.pv-toolbar {
  flex: 0 0 auto; min-height: var(--pv-toolbar-h);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.pv-tb-group { display: flex; align-items: center; gap: 6px; }
.pv-tb-sep { width: 1px; align-self: stretch; margin: 10px 2px; background: var(--border); }
.pv-spacer { flex: 1; }

.pv-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .84rem;
  padding: 7px 12px; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--fg); border: 1px solid var(--border);
  transition: background .15s, border-color .15s, transform .1s;
}
.pv-btn:hover:not(:disabled) { border-color: var(--primary); }
.pv-btn:active:not(:disabled) { transform: translateY(1px); }
.pv-btn:disabled { opacity: .45; cursor: not-allowed; }
.pv-btn.pv-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-color: transparent; }
.pv-btn.pv-ghost { background: transparent; }

/* Tool buttons (select / text / draw / …) */
.pv-tool {
  cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600;
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 52px; padding: 5px 8px; border-radius: var(--r-md);
  background: transparent; color: var(--fg-muted); border: 1px solid transparent;
}
.pv-tool:hover { background: var(--surface-2); color: var(--fg); }
.pv-tool.on { background: color-mix(in srgb, var(--primary) 16%, transparent); border-color: var(--primary); color: var(--fg); }
.pv-tool-ico { font-size: 1rem; line-height: 1.1; }
.pv-inline { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--fg-muted); margin: 0; }
.pv-select { width: auto; padding: 5px 8px; font-size: .8rem; }
.pv-page-num { width: 54px; padding: 5px 6px; font-size: .8rem; text-align: center; }
.pv-count { font-size: .8rem; color: var(--fg-muted); font-family: ui-monospace, Menlo, monospace; }

/* Middle row: thumbnails · pages · properties */
.pv-middle { flex: 1; display: flex; min-height: 0; }

.pv-rail {
  width: var(--pv-rail-w); flex: 0 0 var(--pv-rail-w);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--border);
}
.pv-rail-head, .pv-props-head {
  flex: 0 0 auto; padding: 9px 12px; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.pv-thumbs { flex: 1; overflow-y: auto; padding: 10px; }

.pv-thumb { position: relative; margin-bottom: 12px; cursor: pointer; border-radius: var(--r-md); }
.pv-thumb img {
  display: block; width: 100%; height: auto; border-radius: var(--r-sm);
  border: 2px solid transparent; background: #fff; box-shadow: var(--sh-sm);
}
.pv-thumb.sel img { border-color: var(--primary); }
.pv-thumb.drag-over::before {
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 3px;
  background: var(--primary); border-radius: 2px;
}
.pv-thumb-n {
  position: absolute; left: 4px; bottom: 4px; font-size: .68rem; font-weight: 700;
  background: rgba(0,0,0,.66); color: #fff; padding: 1px 6px; border-radius: var(--r-full);
}
.pv-thumb-acts { position: absolute; top: 4px; right: 4px; display: none; gap: 3px; }
.pv-thumb:hover .pv-thumb-acts { display: flex; }
.pv-mini {
  width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer;
  font-size: .68rem; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--fg);
}
.pv-mini:hover { border-color: var(--primary); }
.pv-mini.danger:hover { border-color: #e5484d; color: #e5484d; }

/* Page viewport */
.pv-stage {
  flex: 1; min-width: 0; overflow: auto; position: relative;
  padding: 20px; background: var(--bg-soft);
  scroll-behavior: smooth;
}
.pv-pages { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pv-page-wrap { position: relative; box-shadow: var(--sh-lg); border-radius: 2px; line-height: 0; background: #fff; }
.pv-page-wrap canvas { display: block; border-radius: 2px; }
.pv-page-layer { position: absolute; inset: 0; z-index: 3; touch-action: none; }
.pv-app[data-tool="select"] .pv-page-layer { cursor: default; }
.pv-app[data-tool="draw"] .pv-page-layer { cursor: crosshair; }
.pv-app[data-tool="text"] .pv-page-layer,
.pv-app[data-tool="highlight"] .pv-page-layer,
.pv-app[data-tool="whiteout"] .pv-page-layer,
.pv-app[data-tool="rect"] .pv-page-layer,
.pv-app[data-tool="ellipse"] .pv-page-layer { cursor: crosshair; }

/* Annotations on the page */
.pv-annot { position: absolute; box-sizing: border-box; }
.pv-annot-inner { width: 100%; height: 100%; overflow: hidden; }
.pv-annot-inner img { width: 100%; height: 100%; object-fit: fill; display: block; }
.pv-annot .pv-text { white-space: pre-wrap; line-height: 1.18; overflow: visible; }
.pv-annot .pv-text.editing {
  /* Outline only — a light tint would read as a grey patch on dark pages. */
  outline: 1.5px dashed var(--primary); outline-offset: 3px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  caret-color: var(--primary);
  cursor: text; min-width: 12px;
}
.pv-annot .pv-text.editing:empty::before { content: "Type…"; opacity: .4; }
.pv-app[data-tool="edittext"] .pv-page-layer { cursor: text; }
.pv-annot svg.pv-ink { width: 100%; height: 100%; overflow: visible; }
.pv-ink-live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pv-app[data-tool="select"] .pv-annot { cursor: move; }
.pv-annot.sel { outline: 1.5px solid var(--primary); outline-offset: 1px; }
.pv-handle {
  position: absolute; width: 11px; height: 11px; background: #fff;
  border: 1.5px solid var(--primary); border-radius: 2px; z-index: 4;
}
.pv-h-nw { left: 0; top: 0; transform: translate(-50%, -50%); cursor: nwse-resize; }
.pv-h-ne { right: 0; top: 0; transform: translate(50%, -50%); cursor: nesw-resize; }
.pv-h-sw { left: 0; bottom: 0; transform: translate(-50%, 50%); cursor: nesw-resize; }
.pv-h-se { right: 0; bottom: 0; transform: translate(50%, 50%); cursor: nwse-resize; }

/* Properties panel */
.pv-props {
  width: var(--pv-props-w); flex: 0 0 var(--pv-props-w);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border-left: 1px solid var(--border);
}
.pv-props-body { flex: 1; overflow-y: auto; padding: 12px; }
.pv-prop { display: block; margin-bottom: 10px; }
.pv-prop-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); margin-bottom: 4px; }
.pv-prop-ctl { width: 100%; }
.pv-prop-btn { width: 100%; justify-content: center; margin-bottom: 8px; }
.pv-group { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.pv-empty { color: var(--fg-muted); font-size: .85rem; line-height: 1.5; margin: 0; }
.pv-note { font-size: .74rem; color: var(--fg-muted); line-height: 1.45; margin: 6px 0 0; }

/* Empty state */
.pv-drop-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; }
.pv-drop-state.off { display: none; }
.pv-drop-inner { max-width: 420px; }
.pv-drop-mark { font-size: 2.4rem; margin-bottom: 10px; }
.pv-drop-state h2 { font-size: 1.15rem; margin: 0 0 6px; }
.pv-drop-state p { color: var(--fg-muted); font-size: .9rem; margin: 0 0 16px; }
.pv-stage.pv-dragover { outline: 2px dashed var(--primary); outline-offset: -10px; }

/* Overlay dialogs */
.pv-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); display: grid; place-items: center; z-index: 30; padding: 20px; }
.pv-overlay[hidden] { display: none; }
.pv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-lg); max-width: 560px; width: 100%; max-height: 90%; overflow: auto; }
.pv-card h2 { margin: 0 0 12px; font-size: 1.1rem; }
.pv-card .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* Signature dialog */
.pv-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.pv-tab { cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600; padding: 8px 12px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--fg-muted); }
.pv-tab.on { color: var(--fg); border-bottom-color: var(--primary); }
.pv-pad-wrap { border: 1px dashed var(--border); border-radius: var(--r-md); background: #fff; }
#sigPad { width: 100%; height: 200px; display: block; touch-action: none; cursor: crosshair; }
.pv-sig-preview { min-height: 90px; display: grid; place-items: center; border: 1px dashed var(--border); border-radius: var(--r-md); background: #fff; padding: 8px; }
.pv-sig-preview img { max-width: 100%; max-height: 110px; }
.pv-saved-sigs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pv-saved-sig { position: relative; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; padding: 6px; cursor: pointer; }
.pv-saved-sig img { height: 40px; display: block; }
.pv-saved-sig:hover { border-color: var(--primary); }

/* Progress + status */
.pv-bar { height: 8px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; margin: 12px 0 6px; }
.pv-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--primary-2)); transition: width .2s; }
.pv-status {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 7px 16px; font-size: .82rem; box-shadow: var(--sh-md); z-index: 20;
}
.pv-err { color: #e5484d; font-size: .84rem; margin-top: 8px; }

@media (max-width: 860px) {
  .pv-app { height: auto; }
  .pv-middle { flex-direction: column; }
  .pv-rail, .pv-props { width: auto; flex: 0 0 auto; border: 0; border-bottom: 1px solid var(--border); max-height: 190px; }
  .pv-thumbs { display: flex; gap: 10px; overflow-x: auto; }
  .pv-thumb { width: 110px; flex: 0 0 110px; margin-bottom: 0; }
  .pv-stage { min-height: 60vh; }
}