/* Shared styles for the on-page editors: Add Image to PDF, Annotate PDF. */
.pe-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-toolbar .spacer { flex: 1; }
.pe-pagenav { display: flex; align-items: center; gap: 6px; }
.pe-pagenav input[type="number"] { width: 64px; text-align: center; padding: 8px 6px; }
.pe-pagenav .of { font-size: 13px; color: var(--ink-500); white-space: nowrap; }
.pe-iconbtn {
  width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1.5px solid var(--ink-200);
  background: var(--white); color: var(--ink-700); cursor: pointer; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pe-iconbtn:hover:not(:disabled) { border-color: var(--brand-500); color: var(--brand-700); }
.pe-iconbtn:disabled { opacity: .4; cursor: default; }
.pe-pill {
  font-size: 12px; font-weight: 700; color: var(--brand-700); background: var(--brand-50);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}

.pe-stage { margin-top: 14px; text-align: center; overflow-x: auto; padding: 4px 2px 8px; }
.pe-preview-wrap {
  position: relative; display: inline-block; max-width: 100%;
  border: 1.5px solid var(--ink-200); border-radius: var(--radius-md);
  background: var(--ink-50); line-height: 0; touch-action: none; user-select: none; text-align: left;
  box-shadow: var(--shadow-sm);
}
.pe-preview-wrap canvas { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.pe-preview-wrap canvas.pe-overlay { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* ---- Add Image items ---- */
.img-item { position: absolute; cursor: move; outline: 1.5px dashed transparent; touch-action: none; }
.img-item img { width: 100%; height: 100%; display: block; pointer-events: none; }
.img-item:hover { outline-color: var(--brand-300); }
.img-item.is-selected { outline: 2px solid var(--brand-500); }
.img-item:focus { outline: 2px solid var(--brand-500); }
.img-handle {
  position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand-500); border: 2px solid var(--white); box-shadow: var(--shadow-sm);
  cursor: nwse-resize; display: none; touch-action: none;
}
.img-del {
  position: absolute; top: -11px; right: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--ink-200); color: var(--ink-600); font-size: 14px; line-height: 1;
  display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.img-del:hover { color: var(--danger); border-color: var(--danger); }
.img-item.is-selected .img-handle, .img-item:hover .img-handle { display: block; }
.img-item.is-selected .img-del, .img-item:hover .img-del { display: flex; }
.img-badge {
  position: absolute; left: 0; top: -20px; font-size: 10.5px; line-height: 1; font-weight: 700;
  background: var(--brand-600); color: white; padding: 4px 6px; border-radius: 5px; white-space: nowrap;
}

.pe-item-panel {
  margin-top: 12px; border: 1.5px solid var(--brand-100); background: var(--brand-50);
  border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center;
}
.pe-item-panel .grow { flex: 1 1 200px; }
.pe-item-panel .field-label { margin-bottom: 4px !important; }
.pe-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-700); cursor: pointer; }
.pe-check input { width: 16px; height: 16px; accent-color: var(--brand-600); }

/* ---- Annotate tool palette ---- */
.an-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.an-tool {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink-200); background: var(--white); color: var(--ink-700);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.an-tool svg { width: 16px; height: 16px; }
.an-tool:hover { border-color: var(--brand-300); }
.an-tool.is-active { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
.an-style { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 12px; }
.an-swatches { display: flex; gap: 6px; align-items: center; }
.an-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1.5px var(--ink-200); cursor: pointer; padding: 0; }
.an-swatch.is-active { box-shadow: 0 0 0 2px var(--brand-600); }
.an-style input[type="color"] { width: 28px; height: 28px; padding: 0; border: 1.5px solid var(--ink-200); border-radius: 6px; background: none; cursor: pointer; }
.an-style .slider-row { min-width: 160px; }
.an-style .lbl { font-size: 12.5px; font-weight: 700; color: var(--ink-600); }

@media (max-width: 760px) {
  .an-tool span { display: none; }
  .pe-toolbar .spacer { display: none; }
}

/* ---- Header & Footer ---- */
.hf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hf-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.hf-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  border: 1px solid var(--brand-300); background: var(--brand-50); color: var(--brand-700);
  border-radius: 6px; padding: 3px 7px; cursor: pointer; margin: 2px 2px 0 0;
}
.hf-chip:hover { background: var(--brand-100); }
input[type="color"] { min-height: 44px; width: 100%; border: 1.5px solid var(--ink-200); border-radius: var(--radius-sm); padding: 4px; background: var(--white); cursor: pointer; }
.an-style input[type="color"] { min-height: 0; }

/* ---- Metadata ---- */
.md-fields { display: flex; flex-direction: column; gap: 16px; transition: opacity .15s; }
.md-fields.is-disabled { opacity: .35; pointer-events: none; }
input[type="datetime-local"] {
  width: 100%; border: 1.5px solid var(--ink-200); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--ink-800); background: var(--white);
}

@media (max-width: 760px) {
  .hf-grid { grid-template-columns: 1fr; }
}