/* ==========================================================================
   FreeProTools — File-upload tool styles
   Used by: merge-pdf, compress-pdf, pdf-to-jpg, image-to-pdf, compress-image.
   ========================================================================== */

.file-shell{ max-width: 920px; }

.dropzone{
  border: 2px dashed var(--line); border-radius: var(--radius-l);
  background: var(--surface); padding: clamp(32px, 6vw, 56px) 24px;
  text-align:center; cursor:pointer; transition: border-color .15s ease, background-color .15s ease;
  margin-bottom: 22px;
}
.dropzone:hover, .dropzone.dragover{ border-color: var(--gold); background: var(--surface-2); }
.dropzone .dz-icon{ width:44px; height:44px; margin:0 auto 14px; color: var(--gold); }
.dropzone .dz-title{ font-weight:700; font-size:1.05rem; margin-bottom:6px; }
.dropzone .dz-sub{ font-size:.86rem; color: var(--text-faint); }
.dropzone input[type="file"]{ display:none; }

.file-list{ display:flex; flex-direction:column; gap:10px; margin-bottom: 22px; }
.file-row{
  display:flex; align-items:center; gap:12px;
  background: var(--surface); border:1px solid var(--line); border-radius: 12px;
  padding: 12px 14px;
}
.file-row .fr-icon{
  width:38px; height:38px; border-radius:9px; background: var(--gold-dim); color: var(--gold);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.file-row .fr-icon svg{ width:19px; height:19px; }
.file-row .fr-thumb{ width:38px; height:38px; border-radius:9px; object-fit:cover; flex-shrink:0; border:1px solid var(--line-soft); }
.file-row .fr-info{ flex:1; min-width:0; }
.file-row .fr-name{ font-size:.9rem; font-weight:600; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-row .fr-meta{ font-size:.78rem; color: var(--text-faint); }
.file-row .fr-actions{ display:flex; gap:6px; flex-shrink:0; }
.file-row .fr-actions button{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background: var(--bg-alt);
  color: var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.file-row .fr-actions button:hover{ border-color: var(--gold); color: var(--gold-soft); }
.file-row .fr-actions button.danger:hover{ border-color: var(--danger); color: var(--danger); }
.file-row .fr-actions svg{ width:15px; height:15px; }

.tool-options{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: clamp(18px, 3vw, 26px); margin-bottom: 22px;
}
.tool-options h2{ font-size:1rem; margin-bottom:16px; }
.opt-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width:560px){ .opt-row{ grid-template-columns:1fr; } }
.opt-field label{ display:block; font-size:.82rem; font-weight:600; color: var(--text-muted); margin-bottom:6px; }
.opt-field select, .opt-field input[type="number"], .opt-field input[type="text"]{
  width:100%; background: var(--bg-alt); border:1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size:.92rem;
}
.opt-field input[type="range"]{ width:100%; accent-color: var(--gold); }
.opt-field .range-value{ font-size:.8rem; color: var(--text-faint); margin-top:4px; }

.radio-chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.radio-chip-row label{ position:relative; cursor:pointer; }
.radio-chip-row input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.radio-chip-row span{
  display:block; padding:9px 14px; border-radius:999px; border:1px solid var(--line);
  color: var(--text-muted); font-size:.86rem; font-weight:600; transition: all .15s;
}
.radio-chip-row input:checked + span{ background: var(--gold); border-color: var(--gold); color:#1A1305; }

.process-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom: 24px; }
.process-status{ font-size:.86rem; color: var(--text-faint); }
.process-status.working{ color: var(--gold-soft); }
.process-status.done{ color: var(--teal); }
.process-status.error{ color: var(--danger); }

.result-panel{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: clamp(20px, 3vw, 28px); margin-bottom: 24px; display:none;
}
.result-panel.visible{ display:block; }
.result-panel h2{ font-size:1rem; margin-bottom:14px; }
.result-compare{ display:flex; gap:24px; flex-wrap:wrap; margin-bottom:18px; }
.result-compare div{ text-align:center; }
.result-compare .rc-label{ font-size:.78rem; color: var(--text-faint); margin-bottom:4px; }
.result-compare .rc-value{ font-family: var(--font-display); font-size:1.3rem; color: var(--text); }
.result-compare .rc-value.gain{ color: var(--gold-soft); }

.thumb-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:14px; margin-bottom:18px; }
.thumb-card{ background: var(--bg-alt); border:1px solid var(--line-soft); border-radius:12px; padding:10px; text-align:center; }
.thumb-card img{ width:100%; border-radius:8px; margin-bottom:8px; border:1px solid var(--line-soft); }
.thumb-card .btn{ width:100%; }

.preview-image-wrap{ text-align:center; margin-bottom:18px; }
.preview-image-wrap img{ max-width:100%; max-height:420px; border-radius: var(--radius-m); border:1px solid var(--line); }
.preview-image-wrap canvas{ max-width:100%; height:auto; border-radius: var(--radius-m); border:1px solid var(--line); }

.privacy-note{
  display:flex; align-items:flex-start; gap:10px; font-size:.82rem; color: var(--text-faint);
  background: var(--bg-alt); border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px; margin-bottom:22px;
}
.privacy-note svg{ width:17px; height:17px; color: var(--teal); flex-shrink:0; margin-top:1px; }

/* ---------- Page navigator (edit / sign / compare) ---------- */
.page-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin: 14px 0; }
.page-nav button{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background: var(--surface-2);
  color: var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.page-nav button:disabled{ opacity:.4; cursor:not-allowed; }
.page-nav span{ font-size:.9rem; color: var(--text-muted); min-width:90px; text-align:center; }

/* ---------- Interactive canvas stage (edit / sign) ---------- */
.canvas-stage{ position:relative; display:inline-block; margin:0 auto; max-width:100%; }
.canvas-stage canvas.page-canvas{ display:block; max-width:100%; height:auto; border:1px solid var(--line); border-radius:8px; background:#fff; }
.canvas-stage-wrap{ text-align:center; overflow-x:auto; padding-bottom:8px; }
.annot-marker{
  position:absolute; background: rgba(232,179,74,0.18); border:1.5px dashed var(--gold);
  border-radius:4px; cursor:move; font-size:12px; color:#1A1305; padding:2px 4px; white-space:nowrap;
}

/* ---------- Selectable thumbnail grid (remove pages) ---------- */
.select-thumb-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap:14px; margin-bottom:18px; }
.select-thumb{
  position:relative; border:2px solid var(--line-soft); border-radius:12px; overflow:hidden; cursor:pointer;
  background: var(--bg-alt); transition: border-color .15s;
}
.select-thumb img{ width:100%; display:block; }
.select-thumb .st-label{ text-align:center; font-size:.78rem; color: var(--text-faint); padding:6px 0; }
.select-thumb.marked{ border-color: var(--danger); }
.select-thumb.marked::after{
  content:"✕ to remove"; position:absolute; inset:0; background: rgba(229,100,107,0.55);
  color:#fff; font-weight:700; font-size:.82rem; display:flex; align-items:center; justify-content:center;
}

/* ---------- Signature pad ---------- */
.sig-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.sig-tabs button{
  flex:1; padding:10px; border-radius:10px; border:1px solid var(--line); background: var(--bg-alt);
  color: var(--text-muted); font-weight:600; cursor:pointer;
}
.sig-tabs button[aria-selected="true"]{ background: var(--gold); border-color: var(--gold); color:#1A1305; }
.sig-pad-wrap{ background:#fff; border-radius:12px; overflow:hidden; margin-bottom:12px; }
canvas#sig-pad{ display:block; width:100%; height:180px; touch-action:none; cursor:crosshair; }
.sig-type-preview{
  background:#fff; border-radius:12px; padding:20px; text-align:center; margin-bottom:12px; min-height:100px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Compare two PDFs ---------- */
.compare-columns{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width: 800px){ .compare-columns{ grid-template-columns:1fr; } }
.compare-col h3{ font-size:.86rem; color: var(--text-faint); text-align:center; margin-bottom:8px; }
.diff-panel{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l);
  padding: 18px; margin-top:20px; font-size:.86rem; line-height:1.7; max-height:340px; overflow-y:auto;
}
.diff-line{ padding:2px 8px; border-radius:4px; white-space:pre-wrap; word-break:break-word; }
.diff-line.added{ background: rgba(79,209,197,0.15); color: var(--teal); }
.diff-line.removed{ background: rgba(229,100,107,0.15); color: var(--danger); text-decoration: line-through; }
.diff-line.same{ color: var(--text-faint); }

/* ---------- Modifier PDF: interactive annotation markers ---------- */
.editor-toolbar{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.editor-toolbar button{
  display:flex; align-items:center; gap:6px; padding:9px 14px; border-radius:999px;
  border:1px solid var(--line); background: var(--bg-alt); color: var(--text-muted);
  font-weight:600; font-size:.86rem; cursor:pointer;
}
.editor-toolbar button svg{ width:16px; height:16px; }
.editor-toolbar button[aria-pressed="true"]{ background: var(--gold); border-color: var(--gold); color:#1A1305; }

.mk{ position:absolute; z-index: 5; }
.mk-text{
  min-width:40px; outline: 1.5px dashed rgba(232,179,74,0.7); padding:2px 4px; cursor:text;
  background: rgba(255,255,255,0.55); border-radius:2px; white-space:pre-wrap;
}
.mk-image{ outline: 1.5px dashed rgba(79,209,197,0.7); }
.mk-image img{ display:block; width:100%; height:auto; pointer-events:none; }
.mk-rect{ background: rgba(255,255,255,0.85); outline: 1.5px dashed rgba(229,100,107,0.7); }

.mk-handle{
  position:absolute; top:-11px; left:-11px; width:22px; height:22px; border-radius:50%;
  background: var(--gold); color:#1A1305; display:flex; align-items:center; justify-content:center;
  cursor:move; font-size:11px; box-shadow:0 2px 6px rgba(0,0,0,.3); z-index:2;
}
.mk-remove{
  position:absolute; top:-11px; right:-11px; width:22px; height:22px; border-radius:50%;
  background: var(--danger); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:13px; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.3); z-index:2;
}
.mk-resize{
  position:absolute; bottom:-9px; right:-9px; width:18px; height:18px; border-radius:4px;
  background: var(--teal); cursor: nwse-resize; box-shadow:0 2px 6px rgba(0,0,0,.3); z-index:2;
}
.mk-text .mk-resize{ cursor: ns-resize; }

.annot-mini{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--bg-alt); border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px; margin-bottom:8px; font-size:.84rem; }
.annot-mini .am-remove{ width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--text-muted);cursor:pointer;flex-shrink:0; }

/* ---------- Real clickable result preview (lightbox) ---------- */
.fpt-modal{
  position: fixed; inset:0; z-index: 300;
  display:none; align-items:center; justify-content:center;
  padding: 24px;
}
.fpt-modal.visible{ display:flex; }
.fpt-modal-backdrop{ position:absolute; inset:0; background: rgba(6,8,12,0.88); backdrop-filter: blur(4px); }
.fpt-modal-panel{
  position:relative; z-index:1; background: var(--surface);
  border:1px solid var(--line); border-radius: var(--radius-l);
  max-width: 900px; width:100%; max-height: 90vh; overflow-y:auto;
  padding: 20px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
}
.fpt-modal-close{
  position: sticky; top:0; float:right; margin-left:12px;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background: var(--surface-2); color: var(--text); font-size:1.2rem;
  cursor:pointer; z-index:2;
}
.fpt-modal-download{
  position: sticky; top:0; float:right; margin-right:12px; z-index:2;
}
.fpt-modal-body{ clear:both; display:flex; flex-direction:column; align-items:center; gap:16px; }
.fpt-modal-body canvas.fpt-modal-page{ max-width:100%; height:auto; border-radius:8px; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); }
.fpt-modal-body img{ max-width:100%; height:auto; border-radius:8px; }

.clickable-preview{ cursor: zoom-in; position:relative; }
.clickable-preview::after{
  content:"Cliquer pour agrandir"; position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  background: rgba(11,14,20,0.75); color:#fff; font-size:.72rem; padding:4px 10px; border-radius:999px;
  opacity:0; transition: opacity .15s ease; pointer-events:none; white-space:nowrap;
}
.clickable-preview:hover::after{ opacity:1; }

/* ---------- Existing (pre-existing) text overlay markers ---------- */
.existing-text-marker{
  position:absolute; cursor:pointer; z-index: 1;
  border: 1.5px dashed rgba(79,209,197,0.55);
  background: rgba(79,209,197,0.06);
  transition: background-color .12s ease;
}
.existing-text-marker:hover{ background: rgba(79,209,197,0.22); border-color: rgba(79,209,197,0.9); }

/* Plain (non-interactive) white patch painted over an original line once
   it has been converted into a real, draggable/editable .mk-text box — see
   convertLineToAnnotation() in edit-pdf.js. */
.line-cover{ position:absolute; z-index: 1; background:#ffffff; pointer-events:none; }