/* editor.css - Pixel-Accurate Sejda-Style PDF Editor */

/* Editor Main Fullscreen Container */
.editor-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background: #EDF2F7;
  z-index: 2000;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

/* Top Menubar */
.editor-menubar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  z-index: 100;
  height: 52px;
  box-sizing: border-box;
}

.editor-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  color: #0F172A;
}

.editor-logo:hover {
  color: #E52B2F;
}

.editor-filename {
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.editor-filename:hover, .editor-filename:focus {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.editor-menu-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-apply-changes {
  background: #E52B2F;
  color: #FFFFFF;
  border: none;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(229, 43, 47, 0.25);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-apply-changes:hover {
  background: #DC2626;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 43, 47, 0.35);
}

/* Sejda Floating Pill Toolbar */
.sejda-toolbar-container {
  display: flex;
  justify-content: center;
  padding: 10px 16px;
  background: #EDF2F7;
  border-bottom: 1px solid #E2E8F0;
  z-index: 90;
}

.sejda-toolbar {
  display: inline-flex;
  align-items: center;
  background: #EBF8FF;
  border: 1px solid #90CDF4;
  border-radius: 6px;
  padding: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  gap: 2px;
  flex-wrap: wrap;
}

.sejda-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #2B6CB0;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.sejda-tool-btn:hover {
  background: #DBEAFE;
  color: #1E40AF;
}

.sejda-tool-btn.active {
  background: #BEE3F8;
  color: #1A365D;
  border-color: #90CDF4;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.sejda-tool-btn .caret {
  font-size: 9px;
  margin-left: 2px;
  opacity: 0.8;
}

/* Editor Workspace Body */
.editor-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* Canvas Area */
.editor-canvas-area {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 80px 20px;
  background: #EDF2F7;
  position: relative;
}

/* Per-Page Header Controls */
.sejda-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 794px;
  margin-bottom: 8px;
  user-select: none;
}

.sejda-page-number {
  font-size: 16px;
  font-weight: 700;
  color: #2B6CB0;
}

.sejda-page-actions {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  overflow: hidden;
}

.sejda-page-action-btn {
  background: #FFFFFF;
  border: none;
  border-right: 1px solid #E2E8F0;
  padding: 5px 9px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sejda-page-action-btn:last-child {
  border-right: none;
}

.sejda-page-action-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.sejda-insert-page-btn {
  background: #FFFFFF;
  border: 1px solid #90CDF4;
  color: #2B6CB0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s ease;
}

.sejda-insert-page-btn:hover {
  background: #EBF8FF;
  border-color: #63B3ED;
}

/* Page Canvas Wrapper */
.editor-canvas-wrapper {
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0,0,0,0.04);
  background: #FFFFFF;
  margin-bottom: 32px;
  border-radius: 2px;
  box-sizing: border-box;
}

.editor-canvas-wrapper canvas {
  display: block;
  background: #FFFFFF;
}

/* Text Layer & Interactive Items */
.sejda-text-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.pdf-text-item {
  position: absolute;
  pointer-events: auto;
  border: 1px dashed transparent;
  color: transparent;
  cursor: text;
  line-height: 1.1;
  white-space: pre;
  box-sizing: border-box;
  user-select: text;
  transition: border-color 0.1s;
}

.pdf-text-item:hover {
  border-color: #3182CE;
  background: rgba(49, 130, 206, 0.06);
}

.pdf-text-item.editing {
  border: 1px dashed #3182CE !important;
  background: #FFFFFF !important;
  color: #000000;   /* not !important: the format bar sets the colour inline */
  box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.2);
  z-index: 50;
  outline: none;
  min-width: 20px;
  padding: 0 2px;
}

/* Floating Sejda Text Formatting Bar */
.sejda-text-format-bar {
  position: absolute;
  display: none;
  align-items: center;
  background: #EBF8FF;
  border: 1px solid #3182CE;
  border-radius: 5px;
  padding: 2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  gap: 1px;
  user-select: none;
}

.format-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #2B6CB0;
  cursor: pointer;
  transition: all 0.1s;
}

.format-btn:hover {
  background: #BEE3F8;
  color: #1A365D;
}

.format-btn.active {
  background: #3182CE;
  color: #FFFFFF;
}

.format-dropdown {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  height: 26px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #2B6CB0;
  cursor: pointer;
  outline: none;
}

.format-dropdown:hover, .format-dropdown:focus {
  background: #BEE3F8;
}

.format-separator {
  width: 1px;
  height: 18px;
  background: #90CDF4;
  margin: 0 2px;
}

/* Annotation Layer */
.annotation-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  user-select: none;
  z-index: 20;
}

.annotation-layer[data-active-tool="draw"] {
  cursor: crosshair;
}

.annotation-layer[data-active-tool="text"] {
  cursor: text;
}

.annotation-layer[data-active-tool="highlight"],
.annotation-layer[data-active-tool="whiteout"],
.annotation-layer[data-active-tool="rect"],
.annotation-layer[data-active-tool="ellipse"] {
  cursor: crosshair;
}

/* Words in the PDF light up on hover when the Text tool is active, even though the
   annotation layer sits above them (edit.js also forwards the click). */
.annotation-layer[data-active-tool="text"] {
  pointer-events: none;
}
.annotation-layer[data-active-tool="text"] > * {
  pointer-events: auto;
}
.annotation-layer[data-active-tool="text"] > svg.annot-draw {
  pointer-events: none;
}

/* Annotation Elements */
.annot-text {
  position: absolute;
  border: 1px dashed #3182CE;
  min-width: 60px;
  min-height: 24px;
  font-family: 'Helvetica', Arial, sans-serif;
  outline: none;
  line-height: 1.3;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  cursor: move;
  user-select: text;
  z-index: 30;
  box-sizing: border-box;
}

.annot-text:focus, .annot-text.selected {
  border: 1px solid #E52B2F;
  box-shadow: 0 0 0 2px rgba(229, 43, 47, 0.2);
}

/* Wrapper so a text box's delete button is a sibling, never a child of the
   contentEditable (a child would end up inside the saved text). */
.annot-text-holder {
  position: absolute;
  z-index: 30;
}

.annot-text-holder .annot-text {
  position: relative;
}

/* Resize grip for boxed annotations */
.annot-resize-handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  border: 2px solid #3182CE;
  border-radius: 2px;
  cursor: nwse-resize;
  display: none;
  z-index: 41;
}

.annot-whiteout:hover .annot-resize-handle,
.annot-highlight:hover .annot-resize-handle,
.annot-shape:hover .annot-resize-handle,
.annot-image:hover .annot-resize-handle {
  display: block;
}

.annot-delete-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: #EF4444;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 40;
}

.annot-text:hover .annot-delete-btn,
.annot-highlight:hover .annot-delete-btn,
.annot-whiteout:hover .annot-delete-btn,
.annot-shape:hover .annot-delete-btn,
.annot-image:hover .annot-delete-btn {
  display: flex;
}

.annot-highlight {
  position: absolute;
  background: rgba(254, 240, 138, 0.55);
  mix-blend-mode: multiply;
  cursor: move;
  border-radius: 2px;
  border: 1px dashed transparent;
  z-index: 25;
}

.annot-highlight:hover {
  border-color: #EAB308;
}

.annot-whiteout {
  position: absolute;
  background: #FFFFFF;
  border: 1px dashed #CBD5E1;
  cursor: move;
  z-index: 28;
}

.annot-whiteout:hover {
  border-color: #94A3B8;
}

.annot-shape {
  position: absolute;
  cursor: move;
  z-index: 26;
  box-sizing: border-box;
}

.annot-image {
  position: absolute;
  border: 1px dashed #3182CE;
  cursor: move;
  z-index: 29;
}

.annot-image img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.annot-draw {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 27;
}

.annot-draw path {
  pointer-events: stroke;
  cursor: pointer;
}

/* Signature & Shapes Modals */
.editor-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.editor-modal-card {
  background: #FFFFFF;
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  padding: 24px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  position: relative;
}

/* "Your edited PDF is ready" dialog: Download is the one filled button, as on the
   result card of the other tools. */
.saved-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.saved-btn {
  flex: 1 1 auto;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #0F172A;
  cursor: pointer;
}

.saved-btn:hover { background: #F1F5F9; }

.saved-btn-download {
  background: #E52B2F;
  border-color: #E52B2F;
  color: #FFFFFF;
}

.saved-btn-download:hover { background: #C81E22; }

.editor-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E2E8F0;
}

.signature-pad-canvas {
  width: 100%;
  height: 180px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  cursor: crosshair;
  display: block;
}

/* Crop tool: the kept area is outlined and the rest dimmed. The clip layer covers the whole
   page, so it never takes clicks (the Text tool turns pointer events on for every child of
   the annotation layer); only the box itself does, and only in crop mode. */
.page-crop-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none !important; }
.page-crop { position: absolute; box-sizing: border-box; border: 1px dashed rgba(37, 99, 235, 0.7); box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.3); pointer-events: none; }
.page-crop-handle { display: none; position: absolute; width: 12px; height: 12px; background: #FFFFFF; border: 2px solid #2563EB; border-radius: 3px; box-sizing: border-box; }
.annotation-layer[data-active-tool="crop"] { cursor: crosshair; }
.annotation-layer[data-active-tool="crop"] > *:not(.page-crop-clip) { pointer-events: none; }
.annotation-layer[data-active-tool="crop"] .page-crop { pointer-events: auto; cursor: move; border: 2px solid #2563EB; box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.45); }
.annotation-layer[data-active-tool="crop"] .page-crop-handle { display: block; }
.page-crop-h-n, .page-crop-h-s { left: 50%; margin-left: -6px; cursor: ns-resize; }
.page-crop-h-e, .page-crop-h-w { top: 50%; margin-top: -6px; cursor: ew-resize; }
.page-crop-h-n { top: -7px; } .page-crop-h-s { bottom: -7px; } .page-crop-h-e { right: -7px; } .page-crop-h-w { left: -7px; }
.page-crop-h-ne { top: -7px; right: -7px; cursor: nesw-resize; } .page-crop-h-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.page-crop-h-nw { top: -7px; left: -7px; cursor: nwse-resize; } .page-crop-h-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.page-crop-marquee { position: absolute; border: 2px dashed #2563EB; background: rgba(37, 99, 235, 0.08); pointer-events: none; }
.editor-crop-bar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 16px auto; max-width: 820px; padding: 8px 12px; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 8px; font-size: 13px; color: #1E3A8A; }
.editor-crop-bar[hidden] { display: none; }
.editor-crop-bar button { border: 1px solid #93C5FD; background: #FFFFFF; color: #1D4ED8; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.editor-crop-bar .editor-crop-done { background: #2563EB; border-color: #2563EB; color: #FFFFFF; }

/* Create Signature dialog: Draw / Upload image tabs */
.sig-modal-tabs { display: flex; gap: 4px; border-bottom: 1px solid #E2E8F0; margin-bottom: 12px; }
.sig-modal-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: #64748B; cursor: pointer; }
.sig-modal-tab.active { color: #E52B2F; border-bottom-color: #E52B2F; }
.sig-upload-panel, .sig-type-panel { min-height: 180px; margin-bottom: 12px; }
.sig-type-input { width: 100%; padding: 8px 10px; border: 1px solid #CBD5E1; border-radius: 6px; font-size: 14px; box-sizing: border-box; }
.sig-type-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.sig-type-font { border: 1px solid #CBD5E1; border-radius: 6px; background: #FFFFFF; padding: 6px 8px; font-size: 22px; line-height: 1.25; color: #111827; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sig-type-font.active { border-color: #E52B2F; box-shadow: 0 0 0 2px rgba(229, 43, 47, 0.2); }
.sig-type-inks { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; font-weight: 600; }
.sig-type-ink { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px #CBD5E1; padding: 0; cursor: pointer; }
.sig-type-ink.active { box-shadow: 0 0 0 2px #E52B2F; }
.sig-upload-panel[hidden], .sig-type-panel[hidden], .sig-upload-preview[hidden], .sig-modal-error[hidden] { display: none; }
.sig-upload-hint { font-size: 13px; color: #64748B; margin: 0 0 10px 0; }
.sig-upload-name { font-size: 13px; color: #475569; margin-left: 8px; }
.sig-upload-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 10px; cursor: pointer; }
.sig-upload-preview { display: block; max-width: 100%; max-height: 110px; margin-top: 10px; border: 1px solid #E2E8F0; border-radius: 6px; background: repeating-conic-gradient(#F1F5F9 0% 25%, #FFFFFF 0% 50%) 50% / 16px 16px; }
.sig-modal-error { color: #B91C1C; font-size: 13px; font-weight: 600; margin: 0 0 10px 0; }

/* Bottom Floating Apply Changes Bar */
.sejda-bottom-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  margin-top: 10px;
}

/* Phones: the top bar keeps the logo badge, a shrinking filename and both buttons on one
   row (Apply changes was pushed off screen at 375 px). */
@media (max-width: 640px) {
  .editor-menubar { padding: 8px 10px; gap: 8px; }
  .editor-logo > span { display: none; }
  .editor-filename { flex: 1 1 auto; min-width: 0; max-width: none; padding: 4px 6px; font-size: 13px; }
  .editor-menu-actions { gap: 6px; flex-shrink: 0; }
  #closeEditorBtn { padding: 6px 8px; font-size: 12px; white-space: nowrap; }
  .btn-apply-changes { padding: 7px 10px; font-size: 13px; white-space: nowrap; }
  .btn-apply-changes > span { display: none; }
}