/* ==========================================================================
   AsadWebs PDF tools — staged UI layer (2026-10-15, owner order; fix1).
   Linked at the END of <body> on PDF tool pages only. Flat, one indigo
   accent, NO gradients, NO rounded buttons: every button in the tool
   working area gets border-radius:2px.

   fix1 (F1): the first version scoped its !important rules to `.tool-panel`,
   but theme.css and tool-page-v2.css both carry
   `.tool-panel button:not(.tox-tinymce *,.jodit *,...)` — the :not() adds a
   class-level component, making that selector (0,2,1) !important
   border-radius:10px, which BEAT `.tool-panel button` (0,1,1) and
   `.tool-panel .pdfs-primary` (0,2,0) regardless of load order. Every
   radius rule below therefore uses the prefix `body .tool-panel.tool-panel`
   (doubled class + body element), giving element selectors (0,2,2) and
   class selectors (0,3,x) — strictly above (0,2,1) — while staying scoped
   to the PDF working area (this file is only linked on PDF tool pages).

   fix2: section 6 adds .pdfstage-prehide — display:none for the baseline
   "Download All" buttons of pdf-to-jpg / pdf-to-png, which sit visible on
   a fresh load because theme.css overrides the blades' display:none.
   The stage JS adds the class at init on those two pages only and
   removes it when the stage machine genuinely reaches stage 3.
   ========================================================================== */

/* ---------- 1. 2px radius: buttons + button-like controls (tool panel) --- */
body .tool-panel.tool-panel button,
body .tool-panel.tool-panel .btn,
body .tool-panel.tool-panel .button,
body .tool-panel.tool-panel a.button,
body .tool-panel.tool-panel a.btn,
body .tool-panel.tool-panel a.pdfs-primary,
body .tool-panel.tool-panel a.pdfs-secondary,
body .tool-panel.tool-panel a[download],
body .tool-panel.tool-panel input[type="button"],
body .tool-panel.tool-panel input[type="submit"],
body .tool-panel.tool-panel .pdfs-primary,
body .tool-panel.tool-panel .pdfs-secondary,
body .tool-panel.tool-panel .pdfs-icon-btn,
body .tool-panel.tool-panel .uploadButton,
body .tool-panel.tool-panel .convertButton,
body .tool-panel.tool-panel .downloadButton,
body .tool-panel.tool-panel .downloadButtonSingle,
body .tool-panel.tool-panel .download-button-single,
body .tool-panel.tool-panel .download-all-btn,
body .tool-panel.tool-panel .downloadAllButton,
body .tool-panel.tool-panel label.uploadButton {
  border-radius: 2px !important;
}

/* chips / badges / pills inside the working area are button-like: 2px */
body .tool-panel.tool-panel .pk-badge,
body .tool-panel.tool-panel [class*="badge"],
body .tool-panel.tool-panel [class*="chip"],
body .tool-panel.tool-panel [class*="pill"] {
  border-radius: 2px !important;
}

/* ---------- 2. 2px radius: working-area surfaces & fields ---------------- */
body .tool-panel.tool-panel .dropzone,
body .tool-panel.tool-panel label.dropzone,
body .tool-panel.tool-panel .dropzone-icon,
body .tool-panel.tool-panel .pdfs-file-row,
body .tool-panel.tool-panel .pdfs-result,
body .tool-panel.tool-panel .pdfs-warn,
body .tool-panel.tool-panel .pk-file,
body .tool-panel.tool-panel .file-item,
body .tool-panel.tool-panel .thumbnail {
  border-radius: 2px !important;
}
body .tool-panel.tool-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
body .tool-panel.tool-panel select,
body .tool-panel.tool-panel textarea {
  border-radius: 2px !important;
}
body .tool-panel.tool-panel .pk-progress,
body .tool-panel.tool-panel .pk-progress > i,
body .tool-panel.tool-panel .progress-bar-container,
body .tool-panel.tool-panel .progress-bar {
  border-radius: 2px !important;
}

/* ---------- 3. Studio / editor roots (Type C: radius only) --------------- */
body .ps-root.ps-root button, body .ep-root.ep-root button, body .cf-root.cf-root button,
body .ps-root.ps-root .ps-preset, body .ep-root.ep-root .ep-thumb, body .cf-root.cf-root .cf-thumb {
  border-radius: 2px !important;
}

/* ---------- 4. Step indicator: 1 Upload → 2 Convert → 3 Download --------- */
.pdfstage-steps {
  display: flex; gap: 0; margin: 0 0 16px;
  border: 1px solid var(--border, #e4e4e7); border-radius: 2px;
  background: var(--surface-2, #f4f4f5); overflow: hidden;
}
.pdfstage-step {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 9px 6px; font-size: 13px; font-weight: 600;
  color: var(--text-muted, #6d6d78); border-right: 1px solid var(--border, #e4e4e7);
  white-space: nowrap;
}
.pdfstage-step:last-child { border-right: 0; }
.pdfstage-step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; border-radius: 2px;
  border: 1px solid currentColor; font-size: 12px; line-height: 1;
}
.pdfstage-step.done { color: var(--accent, #4f46e5); }
.pdfstage-step.done .n { background: var(--accent, #4f46e5); border-color: var(--accent, #4f46e5); color: #fff; }
.pdfstage-step.active { background: var(--accent, #4f46e5); color: #fff !important; }
.pdfstage-step.active .n { border-color: #fff; }
/* fix1 (F4): theme.css forces `.tool-panel span:not(...)` to
   color:var(--text-muted) !important at (0,2,1) — that washed out the step
   label/number spans on the indigo active segment (and the done number).
   These (0,4,0) !important rules pin them to solid, readable colours. */
.pdfstage-steps .pdfstage-step.active .t,
.pdfstage-steps .pdfstage-step.active .n {
  color: #fff !important;
}
.pdfstage-steps .pdfstage-step.active .n { border-color: #fff !important; }
.pdfstage-steps .pdfstage-step.done .t { color: var(--accent, #4f46e5) !important; }
.pdfstage-steps .pdfstage-step.done .n {
  color: #fff !important;
  background: var(--accent, #4f46e5) !important;
  border-color: var(--accent, #4f46e5) !important;
}
@media (max-width: 560px) {
  .pdfstage-step { font-size: 11.5px; gap: 5px; padding: 8px 3px; }
  .pdfstage-step .n { width: 17px; height: 17px; font-size: 11px; }
}

/* ---------- 5. Progress bar (stage 2) ------------------------------------ */
.pdfstage-progress { display: none; margin-top: 14px; }
.pdfstage-progress.on { display: block; }
.pdfstage-bar {
  height: 8px; border-radius: 2px; overflow: hidden;
  background: rgba(127, 127, 127, .22);
}
.pdfstage-fill {
  height: 100%; width: 0; border-radius: 2px;
  background: var(--accent, #4f46e5); transition: width .3s ease;
}
.pdfstage-progress.indet .pdfstage-fill {
  width: 35% !important; transition: none;
  animation: pdfstage-slide 1.05s ease-in-out infinite alternate;
}
@keyframes pdfstage-slide { from { margin-left: 0; } to { margin-left: 65%; } }
.pdfstage-progress.done .pdfstage-fill { background: #059669; }
.pdfstage-label {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 6px; font-size: .88em; color: var(--text-muted, #6d6d78);
}
.pdfstage-pct { font-weight: 700; color: inherit; flex: none; }

/* stage-3 emphasis: the real download control gets a flat accent ring */
.pdfstage-dlready {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .28) !important;
}

/* ---------- 6. fix2: pre-hidden baseline download-all controls ------------
   Only pdf-stage-ui.js adds .pdfstage-prehide, only at init, only on
   /tools/pdf-to-jpg and /tools/pdf-to-png, and it removes the class when
   the stage machine reaches stage 3 (real completion) — so this rule can
   never hide a working download. Specificity (0,3,1) + !important beats
   theme.css `.tool-panel .download-all-btn{display:inline-flex}` (0,2,0)
   AND any inline display the tool sets before completion (the tools set
   style.display='inline-flex' after the first converted page; the button
   must stay hidden until ALL pages are done). */
body .tool-panel.tool-panel .pdfstage-prehide {
  display: none !important;
}