/* =========================================================================
   PDF editor and signer.

   Sits on top of feature-graphic.css, which supplies the dark app shell
   (.fgapp, .fg-bar, .fg-side, .fg-stage). Only the PDF-specific pieces are
   here. The page itself is white paper on a dark surround, the same way every
   desktop PDF viewer does it, so the document reads as the document.
   ========================================================================= */

.fgapp .fg-stage {
  background: #050506;
  background-image: none;
  position: relative;
  overflow: auto;
  display: block;
  padding: 0;
}

/* ----- drop target ------------------------------------------------------- */
.pe-drop {
  position: absolute; inset: 26px;
  display: grid; place-items: center;
  border: 1px dashed var(--border-2); border-radius: 10px;
  color: var(--muted); text-align: center; pointer-events: none;
}
.pe-drop-in b { display: block; font: 600 15px "Inter", sans-serif; color: var(--text-2); margin-bottom: 5px; }
.pe-drop-in span { font-size: 12px; }
body.has-doc .pe-drop { display: none; }

.fgapp .fg-stage.dragover::after {
  content: "Drop to open";
  position: absolute; inset: 18px; z-index: 6;
  display: grid; place-items: center; border-radius: 10px;
  border: 2px dashed var(--accent); background: rgba(10,10,11,.72);
  color: var(--accent-hi); font: 600 14px "Inter", sans-serif;
}

.fgapp .tool-error {
  position: absolute; top: 16px; left: 26px; right: 26px; z-index: 7;
  display: none; padding: 10px 13px; border-radius: 6px;
  background: rgba(180,83,9,.18); border: 1px solid #B45309;
  color: #FDE68A; font-size: 12px; line-height: 1.5;
}
.fgapp .tool-error.show { display: block; }

/* ----- the page ---------------------------------------------------------- */
.pe-viewer { display: none; padding: 28px; min-height: 100%; place-items: center; }
body.has-doc .pe-viewer { display: grid; }

.pe-pagewrap { position: relative; line-height: 0; }
.pe-pagewrap canvas {
  display: block; background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.5), 0 28px 64px -28px rgba(0,0,0,.9);
}

/* Annotations are DOM, not canvas: hit testing, focus and text editing all
   come free, and the export redraws them into the PDF from the same numbers. */
.pe-layer { position: absolute; inset: 0; }

.pe-item {
  position: absolute; cursor: move; line-height: 0;
  outline: 1px dashed transparent;
}
.pe-item:hover { outline-color: rgba(99,102,241,.5); }
.pe-item.sel { outline: 1px solid var(--accent); }
.pe-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pe-item svg { width: 100%; height: 100%; display: block; }
.pe-text {
  display: block; width: 100%; white-space: pre; line-height: 1.25;
  font-weight: 500;
}

.pe-handle {
  position: absolute; right: -6px; bottom: -6px;
  width: 12px; height: 12px; border-radius: 2px;
  background: #FAFAFA; border: 1px solid var(--accent);
  cursor: nwse-resize;
}
.pe-del {
  position: absolute; right: -9px; top: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--danger, #DC2626); cursor: pointer;
}
.pe-del::before, .pe-del::after {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 10px; height: 1.6px; background: #fff;
}
.pe-del::before { transform: rotate(45deg); }
.pe-del::after  { transform: rotate(-45deg); }

/* ----- sidebar ----------------------------------------------------------- */
.pe-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.pe-grid2 .fg-btn { flex: none; justify-content: center; }
.pe-wide { width: 100%; justify-content: center; margin-top: 6px; }

.fgapp .fg-btn.danger { border-color: #7F1D1D; color: #FCA5A5; }
.fgapp .fg-btn.danger:hover:not(:disabled) { background: rgba(127,29,29,.28); color: #FECACA; }

.pe-input {
  flex: 1; min-width: 0; padding: 7px 9px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font: 400 12.5px "Inter", sans-serif;
}
.pe-input:focus { outline: none; border-color: var(--accent-bord); }
select.pe-input { cursor: pointer; }

.pe-item-panel { display: none; }
.pe-item-panel.show { display: block; }
.pe-kind {
  margin-left: auto; padding: 2px 6px; border-radius: 3px;
  background: var(--surface-3); color: var(--accent-hi);
  font: 500 9px var(--mono-f); letter-spacing: .06em;
}

.pe-stamps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pe-stamp {
  position: relative; padding: 6px 8px; cursor: pointer;
  min-width: 74px; height: 42px;
  background: #FAFAFA; border: 1px solid var(--border-2); border-radius: 4px;
}
.pe-stamp:hover { border-color: var(--accent); }
.pe-stamp img { max-width: 100%; max-height: 100%; display: block; margin: auto; }
.pe-stamp-del {
  position: absolute; right: -6px; top: -6px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-2);
}
.pe-stamp-del::before, .pe-stamp-del::after {
  content: ""; position: absolute; left: 3px; top: 6.2px;
  width: 7px; height: 1.4px; background: var(--muted);
}
.pe-stamp-del::before { transform: rotate(45deg); }
.pe-stamp-del::after  { transform: rotate(-45deg); }
.pe-stamp-del:hover::before, .pe-stamp-del:hover::after { background: #FCA5A5; }

.pe-empty {
  margin: 9px 0 0; padding: 11px 10px; text-align: center;
  border: 1px dashed var(--border-2); border-radius: 3px;
  color: var(--muted-3); font-size: 11px; line-height: 1.5;
}

.pe-thumbs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.pe-thumb {
  position: relative; width: 56px; padding: 3px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px;
}
.pe-thumb.on { border-color: var(--accent); background: var(--accent-soft); }
.pe-thumb canvas { display: block; width: 100%; height: auto; background: #fff; }
.pe-thumb .n {
  display: block; text-align: center; padding-top: 2px;
  font: 500 9px var(--mono-f); color: var(--muted-2);
}
.pe-thumb.on .n { color: var(--accent-hi); }

.pe-pagenum {
  min-width: 62px; text-align: center;
  font: 500 11px var(--mono-f); color: var(--muted);
}

/* ----- busy ------------------------------------------------------------- */
.pe-busy {
  position: absolute; inset: 0; z-index: 8; display: none;
  place-items: center; gap: 10px; grid-auto-flow: column;
  background: rgba(5,5,6,.72); color: var(--text-2); font-size: 13px;
}
.pe-busy.show { display: grid; }
.pe-spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--border-2); border-top-color: var(--accent);
  animation: pe-rot .7s linear infinite;
}
@keyframes pe-rot { to { transform: rotate(360deg); } }

/* ----- signature dialog -------------------------------------------------- */
.sig-dlg {
  position: fixed; inset: 0; z-index: 60; display: none;
  place-items: center; background: rgba(5,5,6,.74);
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px
           calc(16px + env(safe-area-inset-bottom, 0px));
}
.sig-dlg.show { display: grid; }
.sig-box {
  width: min(460px, 100%); max-height: 100%; overflow-y: auto;
  background: var(--surface-1, #131316);
  border: 1px solid var(--border, #27272F); border-radius: 10px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.9);
}
.sig-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--border);
}
.sig-head h2 { margin: 0; font: 600 14px "Inter", sans-serif; color: var(--text); }
.sig-x {
  margin-left: auto; width: 26px; height: 26px; cursor: pointer;
  background: none; border: 1px solid var(--border-2); border-radius: 4px;
  color: var(--muted); font-size: 15px; line-height: 1;
}
.sig-x:hover { color: var(--text); border-color: var(--border-2); }

.sig-tabs { display: flex; gap: 4px; padding: 11px 15px 0; }
.sig-tab {
  flex: 1; padding: 8px 6px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); font: 500 12px "Inter", sans-serif;
}
.sig-tab.on { background: var(--accent-soft); border-color: var(--accent-bord); color: var(--accent-hi); }

.sig-pane { display: none; padding: 13px 15px 0; }
.sig-pane.show { display: block; }

/* White pad: people expect to sign on paper, and it exports as ink on
   transparency either way. */
.sig-pad {
  width: 100%; height: 150px; display: block; touch-action: none;
  background: #FAFAFA; border: 1px solid var(--border-2); border-radius: 5px;
  cursor: crosshair;
}
.sig-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.sig-row .fg-lbl { flex: 0 0 42px; font-size: 11.5px; color: var(--muted); }
.sig-row input[type=color] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--border-2); border-radius: 4px; background: none; cursor: pointer; }

.sig-preview {
  min-height: 92px; display: grid; place-items: center; padding: 10px;
  background: #FAFAFA; border: 1px solid var(--border-2); border-radius: 5px;
  color: #111827; font-size: 40px; line-height: 1.2; overflow: hidden;
  text-align: center; word-break: break-word;
}
.sig-preview img { max-width: 100%; max-height: 130px; display: block; }
.sig-hint { font: 400 12px "Inter", sans-serif; color: #6B7280; }

.sig-foot { padding: 13px 15px 15px; }
.sig-foot .fg-btn { width: 100%; justify-content: center; }

/* ----- mobile ------------------------------------------------------------ */
@media (max-width: 900px) {
  .pe-viewer { padding: 14px; }
  .pe-thumb { width: 48px; }
  .sig-pad { height: 130px; }
  .sig-preview { font-size: 30px; }
}

/* ---- Revision 4: reference workspace layout ------------------------------ */
/* Annotate bar sits between the toolbar and the workspace, one shade darker. */
.pdf-annotate {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 20px; background: #17181C;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.an-btn {
  border: 1px solid transparent; background: none; cursor: pointer;
  color: rgba(255,255,255,.72); font: 600 11.5px "Inter", sans-serif;
  padding: 7px 12px; border-radius: 6px;
}
.an-btn:hover:not(:disabled) { color: var(--accent-hi); background: var(--accent-soft); }
.an-btn.on { color: var(--accent-hi); background: var(--accent-soft); border-color: var(--accent-bord); }
.an-btn:disabled { opacity: .4; cursor: not-allowed; }
.an-div { width: 1px; height: 16px; background: rgba(255,255,255,.12); margin: 0 4px; }

/* 172px page rail | canvas | 252px signature rail */
.fgapp .fg-body { grid-template-columns: 172px minmax(0, 1fr) 252px; }
.fg-side.right { border-right: 0; border-left: 1px solid var(--border); }

/* Page rail: one column of full-width thumbnails. */
.pdf-pages .pe-thumbs { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pdf-pages .pe-thumb { width: 100%; }
.pdf-pageops { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.pdf-pageops .fg-btn { flex: 1 1 auto; justify-content: center; padding: 6px 6px; font-size: 13px; }

@media (max-width: 900px) {
  .fgapp .fg-body { display: flex; flex-direction: column; }
  /* Revision 3: the page rail becomes a horizontal strip on mobile. */
  .pdf-pages { order: 1; border-right: 0; border-bottom: 1px solid var(--border); }
  .pdf-pages .pe-thumbs { flex-direction: row; overflow-x: auto; }
  .pdf-pages .pe-thumb { width: 64px; flex: 0 0 auto; }
  .fg-stage { order: 2; }
  .fg-side.right { order: 3; border-left: 0; border-top: 1px solid var(--border); }
}