/**
 * PDF Merger 2 - Theme Style Isolation & Design System Shield
 * Version: 1.5.0
 * Author: NURUL ABSAR
 * 
 * Guarantees pixel-perfect styling across all WordPress themes (Astra, Elementor,
 * Divi, OceanWP, Avada, GeneratePress, Kadence, Twenty Twenty-Four, etc.)
 * by eliminating theme button, typography, slider, and form overrides.
 *
 * v1.2.2 Fixes:
 *   - Narrowed .grid.grid-cols-2 > button to exclude seq-mode cards
 *   - Scoped .border-dashed button to dropzone container only
 *   - Added dedicated Smart Numbering section isolation rules
 *   - Added checkbox/input isolation for #mask-existing-numbers & #skip-first-page
 *
 * v1.2.3 Fixes:
 *   - Added 3-column sliders grid isolation (Font Size, Margin, Start From Number)
 *   - Added sr-only toggle checkbox isolation (prevents themes from exposing raw checkbox)
 *   - Added full toggle switch pill isolation for both page-number & erase toggles
 *   - Added Erase Existing Page Numbers section header flex-row isolation
 *   - Added WHITEOUT badge and Eraser icon rose-color isolation
 *   - Fixed input[type=range] appearance & display overrides
 *
 * v1.2.4 Fixes:
 *   - Added Section 17: Small Box PDF mode & Document Cards grid isolation
 *   - Isolated #pdf-view-mode-selector buttons (List, Text, Small Box)
 *   - Isolated document cards (#pdf-file-box-*): 4-col desktop grid, border, radius, shadow
 *   - Isolated card header: sequence badge (#1..#4), color tag dot, drag grip icon
 *   - Isolated thumbnail viewport: centered page preview, max-height 70px, neat border & shadow
 *   - Isolated filename and pgs/size metadata row
 *   - Isolated Erase zone select dropdown and Inspect Eye action button
 *   - Isolated card footer quick controls (< > ↺ 🗑) eliminating theme button bloat
 *   - Isolated bottom "+ Add More PDF Documents" full-width dashed action button
 *
 * v1.2.5 Fixes:
 *   - Fixed PDF thumbnail preview rendering across WordPress by dynamically resolving
 *     PDF.js Web Worker URL relative to plugin assets directory.
 *
 * v1.2.6 Fixes:
 *   - Added Section 18: Page Numbering Stamping panel full theme isolation
 *   - Added explicit :checked styling for master switches (#03045e navy pill + translated thumb)
 *   - Isolated Live Stamp Preview banner (eye icon, font-mono stamp badge, position text)
 *   - Isolated Placement on Page sheet canvas & 6 position buttons (unselected & selected)
 *   - Isolated Numbering Style 2-column cards grid (unselected & selected states)
 *   - Isolated Number Color swatches (28px circles, ring-2 active state, checkmark & pipette icons)
 *
 * v1.2.7 Fixes:
 *   - Added Section 19: Structural CSS isolation for Page Numbering Stamping panel header
 *   - Forces outer panel card (white bg, rounded-2xl, border, shadow) via structural selectors
 *   - Forces header flex-row (# icon box + title/subtitle + toggle) — no longer relying on
 *     sm:flex-row Tailwind breakpoint that WordPress themes kill
 *   - Fixes # icon box: 32×32px, navy-10% tinted bg, navy Hash icon color
 *   - Fixes toggle switch: fully CSS-driven ON/OFF states using :has(:checked) selector
 *   - Fixes Live Stamp Preview bar: blue-50 bg, monospace badge, position label
 *   - Fixes Placement on Page interactive diagram layout and 6-button grid
 *   - Fixes Numbering Style 2×2 cards: selected card gets solid navy border + blue tint
 *   - Fixes Number Color swatches: 28px circles with checkmark/pipette + active ring
 *
 * v1.2.8 Fixes:
 *   - Fixed "+ Add More" button border-radius tightened to 0.5rem to match reference design
 *   - Fixed "Rotate All" button border changed from #cbd5e1 to #e2e8f0 (lighter, matches screenshot)
 *   - Fixed "Clear All" button background changed from pure white (#ffffff) to rose-50 (#f0f1ff)
 *     so it shows the correct pink tinted fill matching the reference screenshot
 *   - Consistent 0.5rem border-radius across all three toolbar action buttons
 *
 * v1.2.9 Fixes:
 *   - Added Section 20: Full theme isolation for #pdf-merger-status-bar header, Layers icon box,
 *     emerald "Ready" badge, and subtitle against WordPress theme overrides
 *   - Added Section 20A: 4-column desktop grid for the 4 Core Metric Cards (Total PDFs, Total Pages,
 *     Input Size, Est. Size), individual card backgrounds, icon boxes, labels, large numbers, and units
 *   - Isolated Est. Size highlight card: blue-50 background, navy icon box with sparkles, green savings badge
 *   - Enhanced Section 4: #top-combine-banner flex-row layout, rounded-2xl, icon styling, and responsive spacing
 *
 * v1.3.0 Fixes:
 *   - Fixed "Rotate All" toolbar button being shrunk to 22×22px square: scoped Section 7
 *     button[title*="Rotate"] to exclude #btn-status-rotate-all
 *   - Reinforced #btn-status-rotate-all with explicit width: auto, height: auto, min-height: 34px,
 *     and inline-flex styling so icon and text never clip or break
 *
 * v1.3.1 Fixes:
 *   - Fixed toggle switch thumb overshooting pill by 20px and covering "Enabled" text: neutralized
 *     modern CSS `translate` property collision with `transform: translateX(20px)`
 *
 * v1.3.2 Fixes:
 *   - Added Section 21: Full theme isolation for Erase Existing Page Numbers (Whiteout) section
 *   - Fixed Erase toggle switch active state to show crimson red (#02033B) pill matching reference screenshot
 *   - Fixed 8 Target Erase Zone buttons into a locked 4-column grid with 2px red border on active zone
 *   - Isolated Erase Band Height & Distance from Edge slider rows with red accent color (#02033B)
 *   - Isolated Pinpoint on Page action button (#btn-open-erase-visual-inspector) and blue Tip callout box
 *
 * v1.3.4 Fixes:
 *   - Replaced Section 22.8 footer with fully correct version:
 *     slider explicit widths, 5px track, 16px rose thumb with glow ring,
 *     Firefox ::-moz-range-progress fill, :first-child:not(:last-child)
 *     selector for Remove Mask, improved Apply & Done button shadow.
 *
 * v1.3.5 Fixes:
 *   - Global color swap: all red/rose accent values (#e11d48, #f43f5e,
 *     #be123c, #9f1239, #881337, rgba(244,63,94,...), rgba(225,29,72,...))
 *     replaced with plugin navy #02033B and matching tints (#f0f1ff,
 *     #c7d2fe, #a5b4fc, #818cf8) across Sections 21 & 22 for a fully
 *     brand-consistent Interactive Inspector UI.
 *
 * v1.3.6 Fixes:
 *   - Fixed Scope Selector ("This PDF Only" / "All PDFs") active white pill text:
 *     writing was showing white-on-white due to #root .bg-[#03045e] span override.
 *     Now explicitly styles active button span and icon in dark navy #02033B with
 *     nowrap and full visibility.
 *
 * v1.3.7 Fixes:
 *   - Re-organized Target Erase Zone controls into an intuitive, logical layout:
 *     re-ordered zones to natural spatial sequence (Left -> Center -> Right -> Entire)
 *     with centered button labels, equal heights, and bold navy selected indicator.
 *   - Upgraded Erase container from pale rose to clean neutral slate-50 with navy accents.
 *   - Aligned Erase Band Height & Distance from Edge sliders with clean value badges.
 *   - Fixed Tip callout box text truncation caused by overly broad white-space: nowrap rule.
 *
 * v1.3.8 Fixes:
 *   - Added Section 23: PDF Documents header bar single-row enforcement.
 *     Forces the title row (icon + title + drag hint) and view mode switcher
 *     (Style: label + List/Text/Small Box buttons) to always render on one line.
 *     Removes any responsive flex-col stacking that WordPress themes trigger.
 *
 * v1.3.9 Fixes:
 *   - Reduced "PDF Documents (N)" title font from 0.875rem to 0.75rem (text-xs)
 *     so it never wraps onto a second line on narrow plugin panels.
 *
 * v1.4.0 Fixes:
 *   - Rewrote Section 23 selectors to target pb-3.border-b.border-slate-100
 *     which matches the COMPILED bundle HTML, not the new unbuilt TSX classes.
 *     Previous selectors used .flex.flex-row which didn\'t exist in the bundle.
 *   - Force display:inline + visibility:visible on hidden drag hint and Style label.
 *   - Force flex-direction:row on right group (Style + pill) so it never stacks.
 *
 * v1.4.1 Fixes:
 *   - CRITICAL FIX: Section 19J Placement on Page 3x2 button grid was broken.
 *     CSS selectors used .flex.justify-between but the compiled React bundle
 *     actually outputs .flex.items-center.z-10.gap-1 — justify-between does NOT
 *     exist in the bundle. Added correct selectors for both rows and their buttons.
 *   - Fixed dashed inner guideline: was targeting .absolute.inset-4 (1rem) but
 *     React uses .absolute.inset-3\\.5 (0.875rem). Now targets both.
 *   - Changed button widths from fixed 72px to flex:1 so buttons fill equally
 *     regardless of container width.
 *
 * v1.4.2 Fixes:
 *   - Fixed Metric Card 4 (EST. SIZE) inconsistency vs cards 1-3:
 *     Changed icon box from dark navy (#03045e fill, white icon) to light blue
 *     tint (blue-200/60 bg, navy icon) matching cards 1-3's icon box style.
 *   - Changed card 4 label color from navy to slate-500 to match cards 1-3.
 *   - Changed card 4 value number color from navy to slate-900 to match cards 1-3.
 *   - Added uniform text content area layout (flex-col, flex:1) for all 4 cards.
 *   - Updated both theme-isolation.css and the PHP inline CSS for full override.
 *
 * v1.4.9 Fixes:
 *   - Standardized all 4 metric boxes (Total PDFs, Total Pages, Input Size, Est. Size)
 *     to identical 74px height, exact margin:0, uniform padding, and vertical alignment.
 *   - Enforced align-items:stretch on parent grid container and align-self:stretch on each card.
 *   - Injected critical metric CSS directly alongside the shortcode HTML in render_shortcode()
 *     and via wp_add_inline_style() to bypass all server/CDN/browser CSS caching.
 */


/* =========================================================
   1. ROOT CONTAINER RESET & BASELINE
   ========================================================= */
#root {
  all: initial;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: #1e293b !important;
  background-color: transparent !important;
  text-align: left !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

#root *,
#root *::before,
#root *::after {
  box-sizing: border-box !important;
}

/* =========================================================
   2. TYPOGRAPHY & HEADING CONTRAST DEFENSE
   ========================================================= */
#root h1, #root h2, #root h3, #root h4, #root h5, #root h6,
#root p, #root span, #root label, #root div {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
}

#root h1, #root h2, #root h3, #root h4, #root h5, #root h6, #root p {
  margin-top: 0;
  margin-bottom: 0;
}

/* Ensure white text in dark navy headers is NEVER overridden by dark theme heading colors */
#root .text-white,
#root [class*="text-white"],
#root .bg-\[\#03045e\] h1,
#root .bg-\[\#03045e\] h2,
#root .bg-\[\#03045e\] h3,
#root .bg-\[\#03045e\] h4,
#root .bg-\[\#03045e\] span:not(button.bg-white *):not(button[class*="bg-white"] *):not(#btn-main-merge-action *),
#root .bg-\[\#03045e\] p,
#root #top-combine-banner h3,
#root #top-combine-banner > div:first-child span,
#root [id*="combine-banner"] h3 {
  color: #ffffff !important;
}

/* =========================================================
   3. UNIVERSAL BUTTON BASELINE RESET
   Stops theme rules (like .entry-content button) from forcing
   bright blue backgrounds, white text, and bloated 12px paddings.
   ========================================================= */
#root button {
  box-sizing: border-box !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#root button:focus {
  outline: none !important;
}

/* =========================================================
   3A. DROPZONE: "Browse PDF Files" Button
   Defends against WordPress theme button overrides (e.g. .entry-content button)
   forcing bright blue or incorrect styling on the dropzone browse button.
   ========================================================= */
/* Scope the dropzone button rule to the dropzone container only,
   NOT to every element with .border-dashed in the app */
#root #btn-choose-files,
#root button#btn-choose-files,
#root [id*="choose-files"],
#root [id*="dropzone"] button,
#root .pdf-dropzone button,
#root #pdf-dropzone button {
  background-color: #02033B !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 0.75rem !important;
  padding: 0.625rem 1.375rem !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(2, 3, 59, 0.22) !important;
  transition: all 0.15s ease !important;
}

#root button.bg-\[\#03045e\],
#root button.bg-\[\#02033B\],
#root button.bg-\[\#02033b\] {
  background-color: #02033B !important;
  color: #ffffff !important;
}

#root button.bg-\[\#03045e\]:hover,
#root button.bg-\[\#02033B\]:hover,
#root button.bg-\[\#02033b\]:hover {
  background-color: #010226 !important;
  color: #ffffff !important;
}

#root #btn-choose-files span,
#root button#btn-choose-files span,
#root [id*="choose-files"] span,
#root [id*="dropzone"] button span,
#root .pdf-dropzone button span,
#root #btn-choose-files *,
#root button#btn-choose-files * {
  color: #ffffff !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  display: inline !important;
  line-height: inherit !important;
}

#root #btn-choose-files svg,
#root button#btn-choose-files svg,
#root [id*="choose-files"] svg,
#root [id*="dropzone"] button svg,
#root .pdf-dropzone button svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

#root #btn-choose-files:hover,
#root button#btn-choose-files:hover,
#root [id*="choose-files"]:hover,
#root [id*="dropzone"] button:hover,
#root .pdf-dropzone button:hover {
  background-color: #02033b !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 10px -1px rgba(3, 4, 94, 0.3) !important;
}

#root #btn-choose-files:active,
#root button#btn-choose-files:active {
  transform: scale(0.95) !important;
  background-color: #02033b !important;
}

#root #btn-choose-files:disabled,
#root button#btn-choose-files:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}


/* =========================================================
   4. TOP ACTION BANNER & "COMBINE & DOWNLOAD PDF" (Screenshot 2 Fix)
   ========================================================= */
#root #top-combine-banner {
  background-color: #03045e !important;
  color: #ffffff !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 1rem 1.5rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin-bottom: 1rem !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 10px rgba(3, 4, 94, 0.2) !important;
  width: 100% !important;
  max-width: 100% !important;
}

#root #top-combine-banner > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.625rem !important;
}

#root #top-combine-banner svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: #bfdbfe !important;
  stroke: #bfdbfe !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

#root #top-combine-banner h3 {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

/* Primary "Combine & Download PDF" Button: Solid White, Deep Navy Text & Icon */
#root #btn-main-merge-action {
  background-color: #ffffff !important;
  color: #03045e !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0.75rem !important;
  padding: 0.625rem 1.5rem !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}

/* CRITICAL FIX: Ensure the button label span is Deep Navy #03045e (not white-on-white!) */
#root #btn-main-merge-action span,
#root #btn-main-merge-action * {
  color: #03045e !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

#root #btn-main-merge-action svg {
  color: #03045e !important;
  stroke: #03045e !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  margin: 0 !important;
}

#root #btn-main-merge-action:hover {
  background-color: #eff6ff !important;
  color: #02033b !important;
}

#root #btn-main-merge-action:hover span,
#root #btn-main-merge-action:hover * {
  color: #02033b !important;
}

/* =========================================================
   5. STATUS BAR TOOLBAR & METRICS (Screenshot 1 Fix)
   Ensures + Add More, Rotate All, and Clear All never overlap, squeeze, or wrap
   ========================================================= */

/* Toolbar Container */
#root #pdf-merger-status-bar .flex.items-center.gap-2,
#root [id*="status-bar"] .flex.items-center.gap-2 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}

#root #btn-status-add-more,
#root #btn-status-rotate-all,
#root #btn-status-clear-all {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

#root #btn-status-add-more span,
#root #btn-status-rotate-all span,
#root #btn-status-clear-all span {
  display: inline !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* "+ Add More" Button */
#root #btn-status-add-more {
  background-color: #03045e !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

#root #btn-status-add-more span {
  color: #ffffff !important;
}

#root #btn-status-add-more svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

#root #btn-status-add-more:hover {
  background-color: #02033b !important;
}

/* "Rotate All" Button */
#root #btn-status-rotate-all,
#root button#btn-status-rotate-all {
  background-color: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.875rem !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
  width: auto !important;
  height: auto !important;
  min-width: fit-content !important;
  min-height: 34px !important;
  max-width: none !important;
  max-height: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

#root #btn-status-rotate-all span,
#root button#btn-status-rotate-all span {
  display: inline !important;
  color: #334155 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

#root #btn-status-rotate-all svg,
#root button#btn-status-rotate-all svg {
  display: inline-block !important;
  width: 0.875rem !important; /* 14px */
  height: 0.875rem !important;
  min-width: 0.875rem !important;
  min-height: 0.875rem !important;
  color: #03045e !important;
  stroke: #03045e !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

#root #btn-status-rotate-all:hover,
#root button#btn-status-rotate-all:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

#root #btn-status-rotate-all:hover span,
#root button#btn-status-rotate-all:hover span {
  color: #0f172a !important;
}

#root #btn-status-rotate-all:hover svg,
#root button#btn-status-rotate-all:hover svg {
  color: #02033b !important;
  stroke: #02033b !important;
}

/* "Clear All" Button */
#root #btn-status-clear-all {
  background-color: #f0f1ff !important;
  color: #02033B !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.875rem !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

#root #btn-status-clear-all span {
  color: #02033B !important;
}

#root #btn-status-clear-all svg {
  color: #02033B !important;
  stroke: #02033B !important;
}

#root #btn-status-clear-all:hover {
  background-color: #f0f1ff !important;
  color: #02033B !important;
  border-color: #c7d2fe !important;
}

/* =========================================================
   6. VIEW SWITCHER TABS (List, Text, Small Box) (Screenshot 5)
   ========================================================= */
#root #btn-view-mode-list,
#root #btn-view-mode-text,
#root #btn-view-mode-boxes {
  padding: 0.375rem 0.65rem !important;
  border-radius: 0.5rem !important;
  border: 0 solid transparent !important;
  font-size: 0.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  transition: all 0.15s ease !important;
}

#root #btn-view-mode-list:not(.bg-white),
#root #btn-view-mode-text:not(.bg-white),
#root #btn-view-mode-boxes:not(.bg-white) {
  background-color: transparent !important;
  color: #475569 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

#root #btn-view-mode-list:not(.bg-white):hover,
#root #btn-view-mode-text:not(.bg-white):hover,
#root #btn-view-mode-boxes:not(.bg-white):hover {
  background-color: rgba(226, 232, 240, 0.7) !important;
  color: #0f172a !important;
}

#root #btn-view-mode-list.bg-white,
#root #btn-view-mode-text.bg-white,
#root #btn-view-mode-boxes.bg-white {
  background-color: #ffffff !important;
  color: #03045e !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* =========================================================
   7. FILE CARDS & CONTROLS (Screenshot 5)
   ========================================================= */
#root button[title*="Pinpoint"],
#root button[title*="erase"] {
  background-color: transparent !important;
  color: #02033B !important;
  border: none !important;
  padding: 0 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
}

#root button[title*="Pinpoint"]:hover,
#root button[title*="erase"]:hover {
  background-color: #f0f1ff !important;
  color: #02033B !important;
}

#root button[title*="Move"] {
  background-color: transparent !important;
  color: #94a3b8 !important;
  border: none !important;
  padding: 0 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
}

#root button[title*="Move"]:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

#root button[title*="Rotate"]:not(#btn-status-rotate-all) {
  background-color: transparent !important;
  color: #94a3b8 !important;
  border: none !important;
  padding: 0 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
}

#root button[title*="Rotate"]:not(#btn-status-rotate-all):hover {
  background-color: #eff6ff !important;
  color: #03045e !important;
}

#root button[title*="Remove"] {
  background-color: transparent !important;
  color: #94a3b8 !important;
  border: none !important;
  padding: 0 !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
}

#root button[title*="Remove"]:hover {
  background-color: #f0f1ff !important;
  color: #02033B !important;
}

/* "+ Add More PDF Documents" Dashed Button */
#root #btn-add-more-pdf-list {
  background-color: transparent !important;
  border: 2px dashed #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 0.15s ease !important;
}

#root #btn-add-more-pdf-list:hover {
  border-color: #03045e !important;
  background-color: #eff6ff !important;
  color: #03045e !important;
}

/* =========================================================
   8. PAGE NUMBERING STAMPING PANEL (Screenshot 4 & 5)
   ========================================================= */

/* Placement on Page Sheet Diagram */
#root .h-\[170px\] {
  width: 100% !important;
  max-width: 250px !important;
  height: 170px !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background-color: #f8fafc !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem !important;
}

/* 6 Sheet Position Buttons: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right */
#root .h-\[170px\] button {
  padding: 3px 6px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  border-radius: 0.25rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}

/* Unselected Sheet Button */
#root .h-\[170px\] button:not(.bg-\[\#03045e\]) {
  background-color: #ffffff !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

#root .h-\[170px\] button:not(.bg-\[\#03045e\]):hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Selected Sheet Button (Bottom Center in Screenshot 5): Solid Deep Navy */
#root .h-\[170px\] button.bg-\[\#03045e\] {
  background-color: #03045e !important;
  color: #ffffff !important;
  border: 1px solid #03045e !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(3, 4, 94, 0.2) !important;
}

/* Numbering Style Format Option Cards
   IMPORTANT: Exclude #seq-mode-continuous and #seq-mode-per-doc — those are
   handled by section 9 and have their own card styling. */
#root .grid.grid-cols-2 > button:not(#seq-mode-continuous):not(#seq-mode-per-doc) {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  text-align: left !important;
  min-width: 0 !important;
  min-height: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

/* Unselected Format Button */
#root .grid.grid-cols-2 > button:not(#seq-mode-continuous):not(#seq-mode-per-doc):not(.border-\[\#03045e\]) {
  background-color: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

#root .grid.grid-cols-2 > button:not(#seq-mode-continuous):not(#seq-mode-per-doc):not(.border-\[\#03045e\]):hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* Selected Format Button (Page 1 of Total) - Clean 2px navy border matching reference */
#root .grid.grid-cols-2 > button:not(#seq-mode-continuous):not(#seq-mode-per-doc).border-\[\#03045e\],
#root .grid.grid-cols-2 > button:not(#seq-mode-continuous):not(#seq-mode-per-doc)[class*="border-[#03045e]"] {
  background-color: #ffffff !important;
  color: #03045e !important;
  border: 2px solid #03045e !important;
  box-shadow: none !important;
  outline: none !important;
}

#root .grid.grid-cols-2 > button:not(#seq-mode-continuous):not(#seq-mode-per-doc) > div:first-child {
  color: inherit !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

#root .grid.grid-cols-2 > button:not(#seq-mode-continuous):not(#seq-mode-per-doc) > div:last-child {
  color: #94a3b8 !important;
  font-size: 10px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

/* Number Color Swatches Container & Swatches */
#root .flex.items-center.space-x-2 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#root .flex.items-center.space-x-2 button.rounded-full,
#root .flex.items-center.space-x-2 label.rounded-full,
#root button.rounded-full.w-7.h-7,
#root .flex.items-center.space-x-2 > .rounded-full[style*="background"]:not(span.w-2):not(span.w-3) {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 9999px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Selected swatch: matching reference ring (white ring-offset + #03045e outer ring) */
#root .flex.items-center.space-x-2 button.ring-2,
#root .flex.items-center.space-x-2 label.ring-2,
#root .flex.items-center.space-x-2 button[class*="ring-[#03045e]"],
#root .flex.items-center.space-x-2 label[class*="ring-[#03045e]"] {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4.5px #03045e !important;
  transform: scale(1.05) !important;
}

/* Checkmark and eyedropper icon inside swatch */
#root .flex.items-center.space-x-2 button svg,
#root .flex.items-center.space-x-2 label svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  color: #ffffff !important;
  stroke: currentColor !important;
}

/* =========================================================
   9. SMART NUMBERING & OVERLAP PREVENTION (Screenshot 4)
   ========================================================= */

/* Smart Numbering outer container (slate-50 bg with border) */
#root .bg-slate-50.border.border-slate-200\/80,
#root .rounded-xl.bg-slate-50.border {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  padding: 1rem !important;
}

/* Section header row: ShieldCheck icon + label */
#root .bg-slate-50.border.border-slate-200\/80 > div:first-child,
#root .rounded-xl.bg-slate-50.border > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}

/* The two sequence mode card buttons — must be block-level cards, NOT inline */
#root #seq-mode-continuous,
#root #seq-mode-per-doc {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 0.85rem !important;
  display: block !important;
  text-align: left !important;
  min-height: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  /* Override any grid child auto-sizing */
  align-self: stretch !important;
}

/* The grid wrapping the two seq-mode cards */
#root .grid.grid-cols-1.sm\:grid-cols-2:has(#seq-mode-continuous) {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.625rem !important;
}

/* Selected Sequence Card: Bold Navy Border with Subtle Ring */
#root #seq-mode-continuous.border-\[\#03045e\],
#root #seq-mode-per-doc.border-\[\#03045e\] {
  background-color: #ffffff !important;
  border: 2px solid #03045e !important;
  box-shadow: 0 0 0 3px rgba(3, 4, 94, 0.08) !important;
}

/* Unselected Sequence Card */
#root #seq-mode-continuous:not(.border-\[\#03045e\]),
#root #seq-mode-per-doc:not(.border-\[\#03045e\]) {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

#root #seq-mode-continuous:not(.border-\[\#03045e\]):hover,
#root #seq-mode-per-doc:not(.border-\[\#03045e\]):hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* Inner flex row: title + Recommended badge */
#root #seq-mode-continuous > div,
#root #seq-mode-per-doc > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.375rem !important;
}

/* Title text inside cards */
#root #seq-mode-continuous span.text-xs,
#root #seq-mode-per-doc span.text-xs {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  display: inline !important;
}

/* "Recommended" badge inside seq-mode-continuous */
#root #seq-mode-continuous .bg-blue-100,
#root #seq-mode-continuous span.bg-blue-100 {
  background-color: #eff6ff !important;
  color: #03045e !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Description text inside cards */
#root #seq-mode-continuous p,
#root #seq-mode-per-doc p {
  color: #64748b !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* -------------------------------------------------------
   Checkbox rows inside Smart Numbering section
   Fixes theme override of checkbox accent/display
   ------------------------------------------------------- */

/* "Cover pre-existing page numbers" checkbox */
#root #mask-existing-numbers {
  display: inline-block !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 0.25rem !important;
  accent-color: #03045e !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* "Skip page number on first page" checkbox */
#root #skip-first-page {
  display: inline-block !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 0.25rem !important;
  accent-color: #03045e !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Label text next to checkboxes */
#root label[for="mask-existing-numbers"] {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}

#root label[for="skip-first-page"] {
  font-size: 0.75rem !important;
  color: #374151 !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}

/* Checkbox row containers: flex alignment */
#root .pt-2.border-t.border-slate-200\/60.flex.items-start {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  padding-top: 0.5rem !important;
}

#root .flex.items-center.space-x-2:has(#skip-first-page) {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Numbering Sliders: Navy Fill */
#root input[type="range"].accent-\[\#03045e\],
#root .accent-\[\#03045e\] {
  accent-color: #03045e !important;
}

/* Start From Number input */
#root input[type="number"] {
  font-family: inherit !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#root input[type="number"]:focus {
  border-color: #03045e !important;
  box-shadow: 0 0 0 2px rgba(3, 4, 94, 0.15) !important;
  outline: none !important;
}

/* =========================================================
   10. ERASE EXISTING PAGE NUMBERS SECTION (Screenshot 3)
   ========================================================= */

/* Target Erase Zone Container */
#root .bg-rose-50\/50 {
  background-color: #fff9fa !important;
  border: 1px solid #ffe4e6 !important;
  border-radius: 0.75rem !important;
}

/* 8 Zone Option Buttons */
#root .grid.grid-cols-2.sm\:grid-cols-4 button,
#root .grid.grid-cols-2.sm\:grid-cols-4 > button {
  background-color: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.625rem !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-align: left !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  width: 100% !important;
  transition: all 0.15s ease !important;
}

#root .grid.grid-cols-2.sm\:grid-cols-4 button:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Selected Erase Zone (e.g. Bottom Center in Screenshot 3): Thick Red Border */
#root .grid.grid-cols-2.sm\:grid-cols-4 button.border-rose-500,
#root .grid.grid-cols-2.sm\:grid-cols-4 button.ring-1 {
  background-color: #ffffff !important;
  color: #02033B !important;
  border: 2px solid #02033B !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Erase Sliders: Bright Red Fill */
#root input[type="range"].accent-rose-600,
#root .accent-rose-600 {
  accent-color: #02033B !important;
}

/* "Pinpoint on Page (Visual Drag & Click)" Button (Screenshot 3) */
#root button:has(svg.lucide-eye):has(span):not([title*="Pinpoint"]) {
  background-color: #ffffff !important;
  color: #02033B !important;
  border: 1.5px solid #a5b4fc !important;
  border-radius: 0.75rem !important;
  padding: 0.5rem 1rem !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

#root button:has(svg.lucide-eye):has(span):not([title*="Pinpoint"]):hover {
  background-color: #f0f1ff !important;
  border-color: #818cf8 !important;
  color: #02033B !important;
}

#root button:has(svg.lucide-eye):has(span):not([title*="Pinpoint"]) svg {
  stroke: #02033B !important;
  color: #02033B !important;
}

/* =========================================================
   11. MERGED RESULT SUCCESS MODAL (Screenshot 1)
   ========================================================= */

/* Header & Close Button */
#root .fixed .bg-\[\#03045e\] {
  background-color: #03045e !important;
}

#root .fixed .bg-\[\#03045e\] h3 {
  color: #ffffff !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

#root .fixed .bg-\[\#03045e\] button {
  background-color: transparent !important;
  color: #ffffff !important;
  border: none !important;
  padding: 6px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 0.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#root .fixed .bg-\[\#03045e\] button:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

#root .fixed .bg-\[\#03045e\] button svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Stats Card Numbers in Modal */
#root .fixed .grid.grid-cols-3 .text-slate-800 {
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}

#root .fixed .grid.grid-cols-3 .text-\[\#03045e\] {
  color: #03045e !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}

/* Download Merged PDF Button */
#root #btn-download-final-pdf {
  background-color: #03045e !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 4px 6px -1px rgba(3, 4, 94, 0.25) !important;
}

#root #btn-download-final-pdf:hover {
  background-color: #02033b !important;
}

#root #btn-download-final-pdf svg {
  stroke: #ffffff !important;
}

/* Open in New Tab Button */
#root #btn-view-new-tab {
  background-color: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

#root #btn-view-new-tab:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Keep Editing Footer Link */
#root .fixed .bg-slate-50 button,
#root .fixed button.text-slate-600 {
  background-color: transparent !important;
  color: #64748b !important;
  border: none !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
}

#root .fixed .bg-slate-50 button:hover,
#root .fixed button.text-slate-600:hover {
  background-color: transparent !important;
  color: #0f172a !important;
  text-decoration: underline !important;
}

/* =========================================================
   12. INTERACTIVE INSPECTOR MODAL (Screenshot 2)
   ========================================================= */

/* Scope Selector Pill: This PDF Only vs All PDFs */
#root .fixed .bg-white\/15,
#root .fixed [class*="bg-white/15"] {
  background-color: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 0.5rem !important;
  padding: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}

#root .fixed .bg-white\/15 button,
#root .fixed [class*="bg-white/15"] button {
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 0.375rem !important;
  border: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Active scope button — white pill with dark navy writing */
#root .fixed .bg-white\/15 button.bg-white,
#root .fixed .bg-white\/15 button[class*="bg-white"],
#root .fixed [class*="bg-white/15"] button.bg-white,
#root .fixed [class*="bg-white/15"] button[class*="bg-white"] {
  background-color: #ffffff !important;
  color: #02033B !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

#root .fixed .bg-white\/15 button.bg-white span,
#root .fixed .bg-white\/15 button[class*="bg-white"] span,
#root .fixed [class*="bg-white/15"] button.bg-white span,
#root .fixed [class*="bg-white/15"] button[class*="bg-white"] span,
#root .fixed .bg-white\/15 button.bg-white *,
#root .fixed .bg-white\/15 button[class*="bg-white"] *,
#root .fixed [class*="bg-white/15"] button.bg-white *,
#root .fixed [class*="bg-white/15"] button[class*="bg-white"] * {
  color: #02033B !important;
  stroke: #02033B !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#root .fixed .bg-white\/15 button.bg-white svg,
#root .fixed .bg-white\/15 button[class*="bg-white"] svg,
#root .fixed [class*="bg-white/15"] button.bg-white svg,
#root .fixed [class*="bg-white/15"] button[class*="bg-white"] svg {
  color: #02033B !important;
  stroke: #02033B !important;
  fill: none !important;
}

/* Inactive scope button */
#root .fixed .bg-white\/15 button:not(.bg-white):not([class*="bg-white"]),
#root .fixed [class*="bg-white/15"] button:not(.bg-white):not([class*="bg-white"]) {
  background-color: transparent !important;
  color: #dbeafe !important;
}

#root .fixed .bg-white\/15 button:not(.bg-white):not([class*="bg-white"]) span,
#root .fixed .bg-white\/15 button:not(.bg-white):not([class*="bg-white"]) *,
#root .fixed [class*="bg-white/15"] button:not(.bg-white):not([class*="bg-white"]) span,
#root .fixed [class*="bg-white/15"] button:not(.bg-white):not([class*="bg-white"]) * {
  color: #dbeafe !important;
  stroke: #dbeafe !important;
  white-space: nowrap !important;
}

#root .fixed .bg-white\/15 button:not(.bg-white):not([class*="bg-white"]):hover,
#root .fixed [class*="bg-white/15"] button:not(.bg-white):not([class*="bg-white"]):hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

#root .fixed .bg-white\/15 button:not(.bg-white):not([class*="bg-white"]):hover span,
#root .fixed .bg-white\/15 button:not(.bg-white):not([class*="bg-white"]):hover *,
#root .fixed [class*="bg-white/15"] button:not(.bg-white):not([class*="bg-white"]):hover span,
#root .fixed [class*="bg-white/15"] button:not(.bg-white):not([class*="bg-white"]):hover * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Erase Mask Active Pill */
#root #btn-preview-toggle-eraser {
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 0.5rem !important;
  border: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#root #btn-preview-toggle-eraser.bg-rose-500 {
  background-color: #02033B !important;
  color: #ffffff !important;
}

#root #btn-preview-toggle-eraser:not(.bg-rose-500) {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Header Action Buttons */
#root .fixed .bg-\[\#03045e\] button[title*="Rotate"],
#root .fixed .bg-\[\#03045e\] button[title*="Zoom"] {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: none !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem !important;
  flex-shrink: 0 !important;
}

#root .fixed .bg-\[\#03045e\] button[title*="Rotate"]:hover,
#root .fixed .bg-\[\#03045e\] button[title*="Zoom"]:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

#root .fixed .bg-\[\#03045e\] button[title*="Close"] {
  background-color: transparent !important;
  color: #ffffff !important;
  border: none !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem !important;
  flex-shrink: 0 !important;
}

/* Erase Preset Buttons in Modal (Screenshot 2) */
#root .fixed .bg-rose-50 button,
#root .fixed .bg-rose-50 > div button {
  background-color: #ffffff !important;
  color: #02033B !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 0.375rem !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin: 0 3px !important;
  transition: all 0.15s ease !important;
}

#root .fixed .bg-rose-50 button:hover,
#root .fixed .bg-rose-50 > div button:hover {
  background-color: #ffe4e6 !important;
  border-color: #c7d2fe !important;
  color: #02033B !important;
}

/* Floating Navigation Arrows (< and >) */
#root .fixed button[title*="Previous Page"],
#root .fixed button[title*="Next Page"] {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

#root .fixed button[title*="Previous Page"]:hover,
#root .fixed button[title*="Next Page"]:hover {
  background-color: #ffffff !important;
  scale: 1.05 !important;
  border-color: #94a3b8 !important;
}

#root .fixed button[title*="Previous Page"] svg,
#root .fixed button[title*="Next Page"] svg {
  stroke: #1e293b !important;
  color: #1e293b !important;
  width: 22px !important;
  height: 22px !important;
}

/* Footer Actions in Inspector Modal */
#root .fixed .bg-white.border-t button:last-child,
#root .fixed button:has(svg.lucide-check) {
  background-color: #03045e !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 6px 18px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#root .fixed .bg-white.border-t button:last-child:hover,
#root .fixed button:has(svg.lucide-check):hover {
  background-color: #02033b !important;
}

/* =========================================================
   13. FORM CONTROLS & UTILITIES
   ========================================================= */
#root select {
  font-family: inherit !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  background-color: #f8fafc !important;
  color: #334155 !important;
}

#root input[type="text"] {
  font-family: inherit !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
}

#root input[type="text"]:focus {
  border-color: #03045e !important;
  box-shadow: 0 0 0 2px rgba(3, 4, 94, 0.15) !important;
}

#root input[type="file"] {
  display: none !important;
}

/* Normal checkboxes & radios — but NOT sr-only toggles which are hidden differently */
#root input[type="checkbox"]:not(.sr-only),
#root input[type="radio"] {
  display: inline-block !important;
  margin: 0 !important;
}

#root a {
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

#root svg {
  display: inline-block !important;
  vertical-align: middle !important;
  max-width: none !important;
  overflow: visible !important;
  fill: none !important;
}

#root svg:not([fill]) {
  fill: none !important;
}

#root canvas {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
}

#root .fixed {
  position: fixed !important;
}

/* =========================================================
   14. SLIDERS GRID ROW (3-column: Font Size, Margin, Start From Number)
   ========================================================= */

/* Force 3-column grid layout — themes collapse sm:grid-cols-3 to single column */
#root .grid:has(> div > input[type="range"]) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  align-items: start !important;
  padding-top: 1rem !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 0 !important;
}

/* Each cell in the sliders grid */
#root .grid:has(> div > input[type="range"]) > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  min-width: 0 !important;
}

/* Slider label text (e.g. "Font Size (10pt)") */
#root .grid:has(> div > input[type="range"]) > div > label {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  margin-bottom: 0.25rem !important;
  white-space: nowrap !important;
}

/* Range input — force proper display across all themes */
#root input[type="range"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* =========================================================
   15. TOGGLE SWITCH ISOLATION
   Prevents WordPress themes from exposing the sr-only checkbox
   and breaking the custom pill UI built with Tailwind peer classes.
   ========================================================= */

/* Completely hide the sr-only underlying checkbox — override ANY theme reset */
#root input.sr-only,
#root input[type="checkbox"].sr-only,
#root input[type="checkbox"].peer {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 1px !important;
  max-height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  flex-shrink: 0 !important;
}

/* Toggle label wrapper */
#root label:has(#toggle-page-numbers),
#root label:has(#toggle-remove-existing-numbers) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  gap: 0 !important;
  user-select: none !important;
}

/* Toggle pill — the visible gray/colored oval */
#root label:has(#toggle-page-numbers) > div,
#root label:has(#toggle-remove-existing-numbers) > div {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  min-height: 24px !important;
  max-width: 44px !important;
  max-height: 24px !important;
  border-radius: 9999px !important;
  background-color: #e2e8f0 !important; /* Default OFF = slate-200 */
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  transition: background-color 0.2s ease !important;
  vertical-align: middle !important;
}

/* White thumb inside toggle pill */
#root label:has(#toggle-page-numbers) > div::after,
#root label:has(#toggle-remove-existing-numbers) > div::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
  transition: transform 0.2s ease !important;
  display: block !important;
  translate: none !important;
}

/* Toggle label text: "Enabled" / "Disabled" / "Off" / "Active" */
#root label:has(#toggle-page-numbers) > span,
#root label:has(#toggle-remove-existing-numbers) > span {
  margin-left: 0.625rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  display: inline !important;
  white-space: nowrap !important;
}

/* Toggle ON / Checked state (Navy pill for Page Numbers, Crimson Red pill for Erase/Whiteout) */
#root label:has(#toggle-page-numbers:checked) > div {
  background-color: #03045e !important;
}

#root label:has(#toggle-remove-existing-numbers:checked) > div {
  background-color: #02033B !important;
}

#root label:has(#toggle-page-numbers:checked) > div::after,
#root label:has(#toggle-remove-existing-numbers:checked) > div::after {
  transform: translateX(20px) !important;
  translate: none !important;
  border-color: #ffffff !important;
}

/* =========================================================
   16. ERASE EXISTING PAGE NUMBERS — HEADER ROW ISOLATION
   ========================================================= */

/* Section outer border */
#root .mt-6.pt-5.border-t {
  margin-top: 1.5rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* Erase header row: force flex-row (NOT stacked) */
#root #toggle-remove-existing-numbers ~ * {
  display: inline-flex !important;
}

#root label:has(#toggle-remove-existing-numbers) {
  align-self: flex-start !important;
}

/* Wrapper that holds [icon+text] on left and [toggle] on right */
#root .mt-6.pt-5.border-t > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  flex-wrap: wrap !important;
}

/* Left group: eraser icon + text block */
#root .mt-6.pt-5.border-t > div:first-child > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Eraser icon container (rose-50 bg, rose text) */
#root .bg-rose-50 {
  background-color: #f0f1ff !important;
  border-radius: 0.5rem !important;
}

#root .bg-rose-50 svg,
#root .text-rose-600 svg {
  color: #02033B !important;
  stroke: #02033B !important;
  width: 1rem !important;
  height: 1rem !important;
}

/* Eraser icon wrapper dimensions */
#root .w-8.h-8.rounded-lg.bg-rose-50 {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Erase title h4 */
#root .mt-6.pt-5.border-t h4 {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 !important;
  display: inline !important;
  line-height: 1.3 !important;
}

/* WHITEOUT badge */
#root .text-rose-700 {
  color: #02033B !important;
}

#root .bg-rose-100\/70 {
  background-color: #ffe4e6 !important;
  color: #02033B !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.6 !important;
}

/* Title + badge inline flex row */
#root .mt-6.pt-5.border-t .flex.items-center.space-x-2:not(:has(#skip-first-page)) {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 2px !important;
}

/* Erase description paragraph */
#root .mt-6.pt-5.border-t p {
  font-size: 0.75rem !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}

/* =========================================================
   17. SMALL BOX PDF MODE & DOCUMENT CARDS ISOLATION
   Guarantees pixel-perfect card grid, thumbnail previews,
   dropdowns, quick action buttons, and "+ Add More PDF Documents" button.
   ========================================================= */

/* View Mode Selector buttons (#btn-view-mode-list, #btn-view-mode-text, #btn-view-mode-boxes) */
#root #pdf-view-mode-selector button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0.375rem 0.625rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  background: transparent !important;
  color: #475569 !important;
  transition: all 0.15s ease !important;
}

#root #pdf-view-mode-selector button svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Active tab inside view mode selector */
#root #pdf-view-mode-selector button.bg-white {
  background-color: #ffffff !important;
  color: #03045e !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Small Box Grid Container */
#root .grid:has(> [id^="pdf-file-box-"]) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  width: 100% !important;
}

@media (min-width: 640px) {
  #root .grid:has(> [id^="pdf-file-box-"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 900px) {
  #root .grid:has(> [id^="pdf-file-box-"]) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Individual PDF File Box Card */
#root [id^="pdf-file-box-"] {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: #ffffff !important;
  border-radius: 0.75rem !important; /* rounded-xl = 12px */
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

#root [id^="pdf-file-box-"]:hover {
  border-color: rgba(3, 4, 94, 0.4) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07) !important;
}

/* Card Header: order badge, color dot, grip handle */
#root [id^="pdf-file-box-"] > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.375rem 0.625rem !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

/* Left side of header (dot + #number) */
#root [id^="pdf-file-box-"] > div:first-child > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
}

/* Document Color Tag Dot */
#root [id^="pdf-file-box-"] > div:first-child span.rounded-full {
  display: inline-block !important;
  width: 0.5rem !important;  /* 8px */
  height: 0.5rem !important; /* 8px */
  min-width: 0.5rem !important;
  min-height: 0.5rem !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Document Sequence Number Badge (e.g. #1, #2, #3, #4) */
#root [id^="pdf-file-box-"] > div:first-child span.font-bold {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #03045e !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Drag Grip Handle on right */
#root [id^="pdf-file-box-"] > div:first-child .cursor-grab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  cursor: grab !important;
  padding: 0.125rem !important;
}

#root [id^="pdf-file-box-"] > div:first-child .cursor-grab:hover {
  color: #03045e !important;
}

#root [id^="pdf-file-box-"] > div:first-child .cursor-grab svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  display: block !important;
  stroke: currentColor !important;
}

/* Central Thumbnail Viewport */
#root [id^="pdf-file-box-"] > div:nth-child(2) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 90px !important;
  height: 95px !important;
  padding: 0.5rem !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid #f1f5f9 !important;
  box-sizing: border-box !important;
}

/* Thumbnail wrapper & image */
#root [id^="pdf-file-box-"] > div:nth-child(2) img {
  max-height: 70px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Fallback PDF Icon if thumbnail loading */
#root [id^="pdf-file-box-"] > div:nth-child(2) > div.bg-blue-50 {
  background-color: #eff6ff !important;
  border: 1px solid rgba(191, 219, 254, 0.6) !important;
  border-radius: 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #03045e !important;
  width: 2.75rem !important;
  height: 3.25rem !important;
}

/* Rotation badge inside thumbnail if rotated */
#root [id^="pdf-file-box-"] > div:nth-child(2) span.absolute {
  position: absolute !important;
  top: 0.375rem !important;
  right: 0.375rem !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  line-height: 1.2 !important;
}

/* Card Body (Filename, pgs/size, Erase select, Quick controls) */
#root [id^="pdf-file-box-"] > div:nth-child(3) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 1 auto !important;
  padding: 0.5rem 0.625rem 0.375rem 0.625rem !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
}

/* Filename text */
#root [id^="pdf-file-box-"] p {
  font-size: 0.75rem !important; /* 12px */
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.3 !important;
  margin: 0 0 0.25rem 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Metadata row (e.g. 4 pgs | 450.4 KB) */
#root [id^="pdf-file-box-"] .flex.items-center.justify-between.text-\[11px\] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  color: #64748b !important;
  line-height: 1.2 !important;
  margin-bottom: 0.375rem !important;
}

#root [id^="pdf-file-box-"] .flex.items-center.justify-between.text-\[11px\] span,
#root [id^="pdf-file-box-"] .flex.items-center.justify-between.text-\[11px\] * {
  color: #64748b !important;
  font-size: 11px !important;
}

/* Erase zone selector row (dropdown + inspect eye) */
#root [id^="pdf-file-box-"] .border-t:not(:last-child) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.25rem !important;
  padding-top: 0.375rem !important;
  margin-top: 0.25rem !important;
  border-top: 1px solid #f1f5f9 !important;
}

/* Erase zone select dropdown */
#root [id^="pdf-file-box-"] select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 2px 18px 2px 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  outline: none !important;
  box-shadow: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  background-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#root [id^="pdf-file-box-"] select:focus {
  border-color: #03045e !important;
  background-color: #ffffff !important;
}

/* Inspect Eye button next to dropdown */
#root [id^="pdf-file-box-"] button:has(svg.lucide-eye) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.25rem !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #02033B !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}

#root [id^="pdf-file-box-"] button:has(svg.lucide-eye):hover {
  background-color: #ffe4e6 !important;
  color: #02033B !important;
}

#root [id^="pdf-file-box-"] button:has(svg.lucide-eye) svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  display: block !important;
}

/* Card Footer: Quick Action Controls (< >  ↺ 🗑) */
#root [id^="pdf-file-box-"] > div:nth-child(3) > div:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 0.375rem !important;
  margin-top: 0.375rem !important;
  border-top: 1px solid #f1f5f9 !important;
}

/* Left & right button clusters */
#root [id^="pdf-file-box-"] > div:nth-child(3) > div:last-child > div {
  display: flex !important;
  align-items: center !important;
  gap: 0.125rem !important;
}

/* Quick control buttons reset */
#root [id^="pdf-file-box-"] > div:nth-child(3) > div:last-child button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.25rem !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #94a3b8 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#root [id^="pdf-file-box-"] > div:nth-child(3) > div:last-child button:disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
}

#root [id^="pdf-file-box-"] > div:nth-child(3) > div:last-child button:not(:disabled):hover {
  color: #1e293b !important;
  background-color: #f1f5f9 !important;
}

/* Rotate button hover */
#root [id^="pdf-file-box-"] > div:nth-child(3) > div:last-child button[title*="Rotate"]:hover {
  color: #03045e !important;
  background-color: #eff6ff !important;
}

/* Trash button hover */
#root [id^="pdf-file-box-"] > div:nth-child(3) > div:last-child button[title*="Remove"]:hover {
  color: #02033B !important;
  background-color: #f0f1ff !important;
}

#root [id^="pdf-file-box-"] > div:nth-child(3) > div:last-child button svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  display: block !important;
}

/* Bottom "+ Add More PDF Documents" Action Button */
#root #btn-add-more-pdf-list {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  margin-top: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.75rem !important; /* 12px */
  border: 2px dashed #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #475569 !important;
  font-size: 0.75rem !important; /* 12px */
  font-weight: 600 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  text-transform: none !important;
}

#root #btn-add-more-pdf-list:hover {
  border-color: #03045e !important;
  background-color: #f0f7ff !important;
  color: #03045e !important;
}

#root #btn-add-more-pdf-list svg {
  width: 1rem !important;
  height: 1rem !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
}

/* =========================================================
   18. PAGE NUMBERING STAMPING PANEL ISOLATION
   Protects Placement on Page interactive diagram, 6 position buttons,
   Numbering Style 2-column cards, Number Color swatches, and
   Live Stamp Preview banner.
   ========================================================= */

/* Section headers (PLACEMENT ON PAGE, NUMBERING STYLE, NUMBER COLOR) */
#root label.tracking-wider {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #475569 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}

/* Live Stamp Preview banner */
#root .bg-blue-50\/60 {
  background-color: rgba(239, 246, 255, 0.6) !important;
  border: 1px solid rgba(219, 234, 254, 0.8) !important;
  border-radius: 0.75rem !important;
  padding: 0.875rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

#root .bg-blue-50\/60 svg {
  width: 1rem !important;
  height: 1rem !important;
  color: #03045e !important;
  stroke: #03045e !important;
  flex-shrink: 0 !important;
}

/* Stamp Preview text badge */
#root .bg-blue-50\/60 span.font-mono {
  display: inline-block !important;
  background-color: #ffffff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 0.375rem !important;
  padding: 0.125rem 0.625rem !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  line-height: 1.4 !important;
}

/* Position text in banner */
#root .bg-blue-50\/60 > span.text-\[11px\] {
  font-size: 11px !important;
  color: #64748b !important;
}

/* Placement on Page: Interactive Sheet Diagram Canvas */
#root .max-w-\[260px\] {
  max-width: 260px !important;
  width: 100% !important;
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  background-color: #f8fafc !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 1rem !important; /* 16px rounded-2xl */
  padding: 0.75rem !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

/* Visual Sheet Guideline (dashed inner border) */
#root .max-w-\[260px\] > .border-dashed {
  position: absolute !important;
  inset: 0.875rem !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 0.375rem !important;
  pointer-events: none !important;
}

/* Position button rows (top row and bottom row) */
#root .max-w-\[260px\] > .flex.justify-between {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
}

/* Middle [ Document Body ] text */
#root .max-w-\[260px\] > .text-slate-300 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #cbd5e1 !important;
  font-size: 11px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  user-select: none !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Top Row: 3 Placement position buttons (Top Left, Top Center, Top Right) */
#root .max-w-\[260px\] > .flex.justify-between:first-of-type button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  border-radius: 0.375rem !important; /* 6px rounded-md */
  min-width: 66px !important;
  max-width: 76px !important;
  width: 72px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 32px !important;
  margin: 0 !important;
  cursor: pointer !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Bottom Row: 3 Placement position buttons (Bottom Left, Bottom Center, Bottom Right) */
#root .max-w-\[260px\] > .flex.justify-between:last-of-type button {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 3px 2px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  border-radius: 0.375rem !important; /* 6px rounded-md */
  min-width: 66px !important;
  max-width: 76px !important;
  width: 72px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 50px !important;
  margin: 0 !important;
  cursor: pointer !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  white-space: normal !important;
  word-break: normal !important;
  text-decoration: none !important;
}

/* Unselected position button */
#root .max-w-\[260px\] button:not(.bg-\[\#03045e\]):not(.bg-\[\#02033B\]):not(.bg-\[\#02033b\]) {
  background-color: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #d1d5db !important;
}

#root .max-w-\[260px\] button:not(.bg-\[\#03045e\]):not(.bg-\[\#02033B\]):not(.bg-\[\#02033b\]):hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Selected position button (solid navy fill, bold white text) */
#root .max-w-\[260px\] button.bg-\[\#03045e\],
#root .max-w-\[260px\] button.bg-\[\#02033B\],
#root .max-w-\[260px\] button.bg-\[\#02033b\] {
  background-color: #02033B !important;
  color: #ffffff !important;
  border: 1px solid #02033B !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(2, 3, 59, 0.25) !important;
}

/* Numbering Style 2-column Grid */
#root .grid:has(> button > .font-mono) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

/* Each Numbering Style card */
#root .grid:has(> button > .font-mono) > button {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  padding: 0.5rem 0.625rem !important;
  border-radius: 0.5rem !important; /* 8px */
  font-size: 0.75rem !important; /* 12px */
  line-height: 1.3 !important;
  cursor: pointer !important;
  min-height: 48px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all 0.15s ease !important;
}

/* Unselected style card */
#root .grid:has(> button > .font-mono) > button:not(.border-\[\#03045e\]) {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: none !important;
}

#root .grid:has(> button > .font-mono) > button:not(.border-\[\#03045e\]):hover {
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
}

/* Selected style card (dark blue border, subtle blue tint, bold text) */
#root .grid:has(> button > .font-mono) > button.border-\[\#03045e\] {
  border: 1.5px solid #03045e !important;
  background-color: rgba(239, 246, 255, 0.5) !important;
  color: #03045e !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 1px #03045e !important;
}

/* Style card title */
#root .grid:has(> button > .font-mono) > button > div:first-child {
  font-size: 0.75rem !important;
  font-weight: inherit !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

/* Style card sample text */
#root .grid:has(> button > .font-mono) > button > .font-mono {
  font-size: 10px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

/* Number Color swatches row */
#root .flex.items-center.space-x-2:has(> button.rounded-full) {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Color swatch buttons & custom picker label */
#root .flex.items-center.space-x-2 > button.rounded-full,
#root .flex.items-center.space-x-2 > label.rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.75rem !important;  /* 28px */
  height: 1.75rem !important; /* 28px */
  min-width: 1.75rem !important;
  min-height: 1.75rem !important;
  max-width: 1.75rem !important;
  max-height: 1.75rem !important;
  border-radius: 9999px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
  transition: transform 0.15s ease !important;
}

/* Active color circle ring */
#root .flex.items-center.space-x-2 > button.rounded-full.ring-2,
#root .flex.items-center.space-x-2 > label.rounded-full.ring-2 {
  outline: 2px solid #03045e !important;
  outline-offset: 2px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Checkmark and Pipette inside color swatches */
#root .flex.items-center.space-x-2 > button.rounded-full svg,
#root .flex.items-center.space-x-2 > label.rounded-full svg {
  width: 0.875rem !important;  /* 14px */
  height: 0.875rem !important; /* 14px */
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 2.5 !important;
  display: block !important;
  margin: auto !important;
}

/* Custom color picker input overlay */
#root .flex.items-center.space-x-2 > label.rounded-full input[type="color"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* =========================================================
   19. PAGE NUMBERING STAMPING — STRUCTURAL HEADER & PANEL ISOLATION
   v1.2.7: Forces correct flex-row header, toggle states, banner,
   placement diagram, numbering style cards, and color swatches
   using structural CSS so WordPress theme overrides cannot break them.
   ========================================================= */

/* -------------------------------------------------------
   19A. OUTER PANEL CARD
   The outermost <div> with class bg-white rounded-2xl border border-slate-200 shadow-sm
   ------------------------------------------------------- */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm {
  background-color: #ffffff !important;
  border-radius: 1rem !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  #root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm {
    padding: 1.5rem !important;
  }
}

/* -------------------------------------------------------
   19B. PANEL HEADER ROW
   <div class="flex flex-col sm:flex-row sm:items-center justify-between pb-4 border-b ...">
   Forces single-row flex on ALL viewport widths — no sm: breakpoint needed
   ------------------------------------------------------- */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  flex-wrap: nowrap !important;
}

/* Left group: icon box + text block */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm > div:first-child > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* -------------------------------------------------------
   19C. # ICON BOX
   <div class="w-8 h-8 rounded-lg bg-[#03045e]/10 text-[#03045e] flex items-center justify-center">
   ------------------------------------------------------- */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm .w-8.h-8.rounded-lg {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  border-radius: 0.5rem !important;
  background-color: rgba(3, 4, 94, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #03045e !important;
}

#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm .w-8.h-8.rounded-lg svg {
  width: 1rem !important;
  height: 1rem !important;
  color: #03045e !important;
  stroke: #03045e !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* -------------------------------------------------------
   19D. TITLE & SUBTITLE
   ------------------------------------------------------- */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 0 1px 0 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  text-transform: none !important;
}

#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm > div:first-child p {
  font-size: 0.75rem !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* -------------------------------------------------------
   19E. MASTER TOGGLE SWITCH (Page Numbering Enabled/Disabled)
   The <label> wrapper containing #toggle-page-numbers.
   Forces correct pill + thumb + label text layout.
   ------------------------------------------------------- */

/* Toggle label container */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm > div:first-child > label {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  user-select: none !important;
  align-self: center !important;
}

/* Toggle pill (the colored oval) */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm > div:first-child > label > div {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  min-height: 24px !important;
  max-width: 44px !important;
  max-height: 24px !important;
  border-radius: 9999px !important;
  background-color: #e2e8f0 !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  transition: background-color 0.2s ease !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

/* White thumb circle */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm > div:first-child > label > div::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.2s ease !important;
  display: block !important;
  translate: none !important;
}

/* Enabled text label */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm > div:first-child > label > span {
  margin-left: 0.625rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  display: inline !important;
  white-space: nowrap !important;
}

/* -------------------------------------------------------
   19F. TOGGLE ON STATE — uses :has(:checked) for reliability
   This works in all modern browsers and does NOT depend on
   Tailwind's peer classes that WordPress themes may destroy.
   ------------------------------------------------------- */
#root label:has(#toggle-page-numbers:checked) > div {
  background-color: #03045e !important;
}

#root label:has(#toggle-page-numbers:checked) > div::after {
  transform: translateX(20px) !important;
  translate: none !important;
  border-color: #ffffff !important;
}

#root label:has(#toggle-page-numbers:checked) > span {
  color: #03045e !important;
  font-weight: 600 !important;
}

/* -------------------------------------------------------
   19G. LIVE STAMP PREVIEW BANNER
   <div class="p-3.5 rounded-xl bg-blue-50/60 border border-blue-100/80 flex ...">
   ------------------------------------------------------- */
#root [class*="bg-blue-50"] {
  background-color: rgba(239, 246, 255, 0.65) !important;
  border: 1px solid rgba(191, 219, 254, 0.7) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

/* Left group: eye icon + "Live Stamp Preview:" label + badge */
#root [class*="bg-blue-50"] > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: nowrap !important;
}

/* Eye icon in banner */
#root [class*="bg-blue-50"] > div:first-child svg {
  width: 1rem !important;
  height: 1rem !important;
  color: #03045e !important;
  stroke: #03045e !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* "Live Stamp Preview:" label text */
#root [class*="bg-blue-50"] > div:first-child span:not([class*="font-mono"]) {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #03045e !important;
  white-space: nowrap !important;
}

/* Stamp preview badge (e.g. "Page 1 of 168") */
#root [class*="bg-blue-50"] span[class*="font-mono"],
#root [class*="bg-blue-50"] .font-mono {
  display: inline-block !important;
  background-color: #ffffff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 0.375rem !important;
  padding: 0.1rem 0.625rem !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

/* "Position: Bottom Center" text on right in Live Stamp Preview banner */
#root #pdf-merger-stamp-preview > span,
#root .bg-blue-50\/60 > span.text-\[11px\],
#root [class*="bg-blue-50\/60"] > span {
  font-size: 11px !important;
  color: #64748b !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* -------------------------------------------------------
   19H. TWO-COLUMN MAIN LAYOUT
   <div class="grid grid-cols-1 xl:grid-cols-2 gap-5">
   Forces 2-column layout even without xl: breakpoint working
   ------------------------------------------------------- */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm .mt-5 > .grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: start !important;
}

@media (max-width: 600px) {
  #root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm .mt-5 > .grid {
    grid-template-columns: 1fr !important;
  }
}

/* -------------------------------------------------------
   19I. PLACEMENT ON PAGE — Section label
   ------------------------------------------------------- */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm .mt-5 label.tracking-wider,
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm .space-y-4 label.tracking-wider {
  display: block !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #475569 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}

/* -------------------------------------------------------
   19J. INTERACTIVE SHEET DIAGRAM (max-w-[260px] h-[170px])
   ------------------------------------------------------- */
#root .relative.w-full.max-w-\[260px\].h-\[170px\] {
  position: relative !important;
  width: 100% !important;
  max-width: 260px !important;
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  background-color: #f8fafc !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

/* Dashed inner guideline — React uses inset-3.5 (0.875rem), not inset-4 */
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .absolute.inset-3\.5,
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .absolute.inset-4 {
  position: absolute !important;
  inset: 0.875rem !important;
  border: 1px dashed #d1d5db !important;
  border-radius: 0.25rem !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Top row (3 position buttons) — React uses flex items-center z-10 gap-1, NOT justify-between */
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.items-center.z-10.gap-1:first-of-type,
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.items-center:first-of-type,
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.justify-between:first-of-type {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  gap: 4px !important;
}

/* Bottom row (3 position buttons) — React uses flex items-center z-10 gap-1, NOT justify-between */
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.items-center.z-10.gap-1:last-of-type,
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.items-center:last-of-type,
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.justify-between:last-of-type {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  gap: 4px !important;
}

/* [ Document Body ] middle text */
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > div.flex.items-center.justify-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #cbd5e1 !important;
  font-size: 11px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  user-select: none !important;
  position: relative !important;
  z-index: 5 !important;
  margin: 0 !important;
}

/* Top row position buttons — flex-1 buttons, single-line text */
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.items-center.z-10.gap-1:first-of-type button,
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.items-center:first-of-type button,
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.justify-between:first-of-type button {
  display: inline-flex !important;
  flex: 1 1 0% !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.25rem 0 !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  border-radius: 0.375rem !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  cursor: pointer !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Bottom row position buttons — flex-1, 2-line text (Bottom + Left/Center/Right) */
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.items-center.z-10.gap-1:last-of-type button,
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.items-center:last-of-type button,
#root .relative.w-full.max-w-\[260px\].h-\[170px\] > .flex.justify-between:last-of-type button {
  display: inline-flex !important;
  flex: 1 1 0% !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 3px 2px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  border-radius: 0.375rem !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 50px !important;
  margin: 0 !important;
  cursor: pointer !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* Unselected position button */
#root .relative.w-full.max-w-\[260px\].h-\[170px\] button:not(.bg-\[\#03045e\]):not(.bg-\[\#02033B\]):not(.bg-\[\#02033b\]) {
  background-color: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #d1d5db !important;
}

#root .relative.w-full.max-w-\[260px\].h-\[170px\] button:not(.bg-\[\#03045e\]):not(.bg-\[\#02033B\]):not(.bg-\[\#02033b\]):hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Selected position button — solid navy fill */
#root .relative.w-full.max-w-\[260px\].h-\[170px\] button.bg-\[\#03045e\],
#root .relative.w-full.max-w-\[260px\].h-\[170px\] button.bg-\[\#02033B\],
#root .relative.w-full.max-w-\[260px\].h-\[170px\] button.bg-\[\#02033b\] {
  background-color: #02033B !important;
  color: #ffffff !important;
  border: 1px solid #02033B !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(2, 3, 59, 0.25) !important;
}

/* -------------------------------------------------------
   19K. NUMBERING STYLE — 2×2 CARD GRID
   <div class="grid grid-cols-2 gap-2"> containing format buttons
   ------------------------------------------------------- */

/* Force 2-column grid unconditionally */
#root .grid.grid-cols-2.gap-2:has(> button) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

/* Each format card button */
#root .grid.grid-cols-2.gap-2 > button {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 0.5rem 0.625rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  min-height: 46px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all 0.15s ease !important;
}

/* Unselected format card */
#root .grid.grid-cols-2.gap-2 > button:not(.border-\[\#03045e\]) {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  box-shadow: none !important;
}

#root .grid.grid-cols-2.gap-2 > button:not(.border-\[\#03045e\]):hover {
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
}

/* Selected format card — solid navy border, blue tint background */
#root .grid.grid-cols-2.gap-2 > button.border-\[\#03045e\] {
  background-color: rgba(239, 246, 255, 0.7) !important;
  border: 2px solid #03045e !important;
  color: #03045e !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 0.5px #03045e !important;
}

/* Card label (e.g. "Page 1 of Total") */
#root .grid.grid-cols-2.gap-2 > button > div.truncate {
  font-size: 0.6875rem !important;
  font-weight: inherit !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  line-height: 1.4 !important;
}

/* Card sample text (e.g. "Page 1 of 168") */
#root .grid.grid-cols-2.gap-2 > button > div.font-mono,
#root .grid.grid-cols-2.gap-2 > button .text-slate-400.font-mono {
  font-size: 10px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  line-height: 1.3 !important;
  display: block !important;
}

/* -------------------------------------------------------
   19L. NUMBER COLOR SWATCHES
   Row of 4 colored circles + pipette label
   ------------------------------------------------------- */

/* Swatch row container */
#root .flex.items-center.space-x-2:has(> button.rounded-full),
#root .flex.items-center.space-x-2:has(> label.rounded-full) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

/* Color circle buttons */
#root .flex.items-center.space-x-2 > button.rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 9999px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  box-sizing: border-box !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
}

/* Custom color picker label (pipette) */
#root .flex.items-center.space-x-2 > label.rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 9999px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  border: 1.5px solid #cbd5e1 !important;
  box-sizing: border-box !important;
  transition: transform 0.15s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Active swatch ring */
#root .flex.items-center.space-x-2 > button.rounded-full.ring-2,
#root .flex.items-center.space-x-2 > label.rounded-full.ring-2 {
  outline: 2.5px solid #03045e !important;
  outline-offset: 2px !important;
  transform: scale(1.1) !important;
  box-shadow: 0 2px 6px rgba(3, 4, 94, 0.2) !important;
}

/* Checkmark + Pipette icons inside swatches */
#root .flex.items-center.space-x-2 > button.rounded-full svg,
#root .flex.items-center.space-x-2 > label.rounded-full svg {
  width: 13px !important;
  height: 13px !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 2.5 !important;
  display: block !important;
  margin: auto !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

/* Hidden color input inside pipette label */
#root .flex.items-center.space-x-2 > label.rounded-full input[type="color"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* -------------------------------------------------------
   19M. CUSTOM FORMAT INPUT (visible when Custom Template selected)
   ------------------------------------------------------- */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm input[type="text"] {
  width: 100% !important;
  font-size: 0.75rem !important;
  padding: 0.375rem 0.75rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  outline: none !important;
}

#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm input[type="text"]:focus {
  border-color: #03045e !important;
  box-shadow: 0 0 0 2px rgba(3, 4, 94, 0.12) !important;
}

/* -------------------------------------------------------
   19N. SPACE-Y-6 ANIMATED CONTENT BLOCK (enabled section body)
   ------------------------------------------------------- */
#root .bg-white.rounded-2xl.border.border-slate-200.shadow-sm .mt-5.space-y-6 {
  margin-top: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

/* =========================================================
   20. STATUS BAR & METRIC CARDS THEME ISOLATION (v1.2.9)
   Protects the Merge Status & Metrics panel and the 4 Core
   Metric Cards against WordPress theme resets and collapsing.
   ========================================================= */

/* Outer Status Bar Container */
#root #pdf-merger-status-bar {
  background-color: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 1rem !important; /* rounded-2xl = 16px */
  padding: 1.25rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  width: 100% !important;
}

/* Status Bar Top Header Row (Left: Info, Right: Buttons) */
#root #pdf-merger-status-bar > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  flex-wrap: wrap !important;
}

/* Left Group in Header */
#root #pdf-merger-status-bar > div:first-child > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Layers Icon Box */
#root #pdf-merger-status-bar > div:first-child > div:first-child > div:first-child {
  width: 2.5rem !important; /* 40px */
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: 0.75rem !important; /* rounded-xl */
  background-color: rgba(3, 4, 94, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#root #pdf-merger-status-bar > div:first-child > div:first-child > div:first-child svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: #03045e !important;
  stroke: #03045e !important;
}

/* Header Text Area */
#root #pdf-merger-status-bar h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  display: inline !important;
}

/* Ready Emerald Badge */
#root #pdf-merger-status-bar span.bg-emerald-50,
#root #pdf-merger-status-bar .text-emerald-700 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid rgba(167, 243, 208, 0.7) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

#root #pdf-merger-status-bar span.bg-emerald-50 svg,
#root #pdf-merger-status-bar .text-emerald-700 svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  stroke: #047857 !important;
  color: #047857 !important;
}

/* Subtitle under Merge Status & Metrics */
#root #pdf-merger-status-bar p {
  font-size: 0.75rem !important;
  color: #64748b !important;
  margin: 0.125rem 0 0 0 !important;
  line-height: 1.4 !important;
}

/* -------------------------------------------------------
   20A. METRIC CARDS 4-COLUMN GRID & CARD STYLES
   ------------------------------------------------------- */

/* Metric Cards Grid Container: 4 Columns — all cards same height */
#pdf-merger-status-bar > div:last-child,
#pdf-merger-status-bar .grid,
#root #pdf-merger-status-bar > div:last-child,
#root #pdf-merger-status-bar .grid:has(> #status-metric-pdfs),
#root #pdf-merger-status-bar .grid.grid-cols-2.lg\:grid-cols-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  margin-top: 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

@media (max-width: 768px) {
  #pdf-merger-status-bar > div:last-child,
  #pdf-merger-status-bar .grid,
  #root #pdf-merger-status-bar > div:last-child,
  #root #pdf-merger-status-bar .grid:has(> #status-metric-pdfs),
  #root #pdf-merger-status-bar .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  #pdf-merger-status-bar > div:last-child,
  #pdf-merger-status-bar .grid,
  #root #pdf-merger-status-bar > div:last-child,
  #root #pdf-merger-status-bar .grid:has(> #status-metric-pdfs),
  #root #pdf-merger-status-bar .grid.grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Base style for all 4 Metric Cards — forced uniform height & size */
#status-metric-pdfs,
#status-metric-pages,
#status-metric-input-size,
#status-metric-est-merged-size,
#pdf-merger-status-bar #status-metric-pdfs,
#pdf-merger-status-bar #status-metric-pages,
#pdf-merger-status-bar #status-metric-input-size,
#pdf-merger-status-bar #status-metric-est-merged-size,
#root #status-metric-pdfs,
#root #status-metric-pages,
#root #status-metric-input-size,
#root #status-metric-est-merged-size {
  border-radius: 0.75rem !important;
  padding: 0.625rem 0.875rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: all 0.15s ease !important;
}

/* Content (text) area inside all 4 cards — flex column, fill remaining width */
#root #status-metric-pdfs > div:last-child,
#root #status-metric-pages > div:last-child,
#root #status-metric-input-size > div:last-child,
#root #status-metric-est-merged-size > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  flex: 1 1 0% !important;
  gap: 2px !important;
}

/* Metric labels (TOTAL PDFS, TOTAL PAGES, INPUT SIZE) */
#root #status-metric-pdfs p,
#root #status-metric-pages p,
#root #status-metric-input-size p {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#root #status-metric-pdfs div.flex.items-baseline,
#root #status-metric-pages div.flex.items-baseline,
#root #status-metric-input-size div.flex.items-baseline {
  margin-top: 2px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

/* Metric large numbers */
#root #status-metric-pdfs span.font-bold,
#root #status-metric-pages span.font-bold,
#root #status-metric-input-size span.font-bold {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
}

/* Metric units ("docs", "pages") */
#root #status-metric-pdfs span.font-medium,
#root #status-metric-pages span.font-medium {
  font-size: 0.75rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-left: 0.25rem !important;
}

/* Card 1: Total PDFs */
#root #status-metric-pdfs {
  background-color: rgba(248, 250, 252, 0.9) !important; /* slate-50 */
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

#root #status-metric-pdfs > div:first-child {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  border-radius: 0.5rem !important;
  background-color: rgba(219, 234, 254, 0.8) !important; /* blue-100 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#root #status-metric-pdfs > div:first-child svg {
  width: 1rem !important;
  height: 1rem !important;
  color: #03045e !important;
  stroke: #03045e !important;
}

/* Card 2: Total Pages */
#root #status-metric-pages {
  background-color: rgba(248, 250, 252, 0.9) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

#root #status-metric-pages > div:first-child {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  border-radius: 0.5rem !important;
  background-color: rgba(224, 231, 255, 0.8) !important; /* indigo-100 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#root #status-metric-pages > div:first-child svg {
  width: 1rem !important;
  height: 1rem !important;
  color: #4338ca !important;
  stroke: #4338ca !important;
}

/* Card 3: Input Size */
#root #status-metric-input-size {
  background-color: rgba(248, 250, 252, 0.9) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

#root #status-metric-input-size > div:first-child {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  border-radius: 0.5rem !important;
  background-color: rgba(224, 242, 254, 0.8) !important; /* sky-100 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

#root #status-metric-input-size > div:first-child svg {
  width: 1rem !important;
  height: 1rem !important;
  color: #0369a1 !important;
  stroke: #0369a1 !important;
}

/* Card 4: Est. Size — matches card 1-3 visually: light blue-tinted bg, same structure */
#status-metric-est-merged-size,
#root #status-metric-est-merged-size {
  background-color: rgba(239, 246, 255, 0.85) !important; /* blue-50 subtle tint */
  border: 1px solid rgba(191, 219, 254, 0.8) !important; /* blue-200 */
}

/* Card 4: Icon box — same SIZE as cards 1-3, but blue-100 tint with navy icon (not dark navy bg) */
#status-metric-est-merged-size > div:first-child,
#root #status-metric-est-merged-size > div:first-child {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  border-radius: 0.5rem !important;
  background-color: rgba(191, 219, 254, 0.6) !important; /* blue-200/60 — matches other cards' tint style */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}

/* Card 4: Icon color — navy to match card 1 */
#status-metric-est-merged-size > div:first-child svg,
#root #status-metric-est-merged-size > div:first-child svg {
  width: 1rem !important;
  height: 1rem !important;
  color: #03045e !important;
  stroke: #03045e !important;
}

/* Card 4 label — matches cards 1-3 label color (slate-500 not navy) */
#status-metric-est-merged-size p,
#root #status-metric-est-merged-size p {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important; /* slate-500, same as cards 1-3 */
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Card 4 top label row with badge */
#status-metric-est-merged-size > div:last-child > div:first-child,
#status-metric-est-merged-size div.flex.items-center.justify-between,
#root #status-metric-est-merged-size > div:last-child > div:first-child,
#root #status-metric-est-merged-size div.flex.items-center.justify-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  width: 100% !important;
  height: 14px !important;
  max-height: 14px !important;
}

/* Savings badge in Card 4 */
#status-metric-est-merged-size span.bg-emerald-100\/70,
#status-metric-est-merged-size span.text-emerald-700,
#root #status-metric-est-merged-size span.bg-emerald-100\/70,
#root #status-metric-est-merged-size span.text-emerald-700 {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #047857 !important;
  background-color: rgba(209, 250, 229, 0.85) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Card 4 bottom row: value + (optimized) on single row */
#status-metric-est-merged-size div.flex.items-baseline,
#status-metric-est-merged-size > div:last-child > div:last-child,
#root #status-metric-est-merged-size div.flex.items-baseline,
#root #status-metric-est-merged-size > div:last-child > div:last-child {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* Card 4 large number — matches cards 1-3 color (dark slate, not navy) */
#status-metric-est-merged-size span.text-\[\#03045e\].leading-none,
#root #status-metric-est-merged-size span.text-\[\#03045e\].leading-none {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #0f172a !important; /* slate-900, same as cards 1-3 */
  line-height: 1.1 !important;
}

/* Card 4 "(optimized)" italic text */
#status-metric-est-merged-size span.italic,
#root #status-metric-est-merged-size span.italic {
  font-size: 9.5px !important;
  color: #64748b !important;
  font-style: italic !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* -------------------------------------------------------
   20B. STATUS BAR QUICK ACTIONS GUARANTEE (#btn-status-rotate-all)
   ------------------------------------------------------- */
#root #pdf-merger-status-bar #btn-status-rotate-all,
#root #pdf-merger-status-bar button#btn-status-rotate-all,
#root button[id="btn-status-rotate-all"] {
  width: auto !important;
  height: auto !important;
  min-width: fit-content !important;
  min-height: 34px !important;
  padding: 0.5rem 0.875rem !important;
  background-color: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#root #pdf-merger-status-bar #btn-status-rotate-all span,
#root #pdf-merger-status-bar button#btn-status-rotate-all span,
#root button[id="btn-status-rotate-all"] span {
  display: inline !important;
  color: #334155 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

#root #pdf-merger-status-bar #btn-status-rotate-all svg,
#root #pdf-merger-status-bar button#btn-status-rotate-all svg,
#root button[id="btn-status-rotate-all"] svg {
  display: inline-block !important;
  width: 0.875rem !important;
  height: 0.875rem !important;
  min-width: 0.875rem !important;
  min-height: 0.875rem !important;
  color: #03045e !important;
  stroke: #03045e !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
}

/* -------------------------------------------------------
   20C. TOGGLE SWITCH THUMB POSITIONING FIX (v1.3.1)
   Prevents modern CSS `translate` property from colliding with
   `transform: translateX()`, which previously caused the white thumb
   to overshoot the pill by 20px and cover the "Enabled" text.
   ------------------------------------------------------- */
#root label:has(#toggle-page-numbers) > div::after,
#root label:has(#toggle-remove-existing-numbers) > div::after,
#root label:has(input[type="checkbox"]) > div::after,
#root input.peer + div::after,
#root input.peer ~ div::after {
  translate: none !important;
}

#root label:has(#toggle-page-numbers:checked) > div::after,
#root label:has(#toggle-remove-existing-numbers:checked) > div::after,
#root label:has(input[type="checkbox"]:checked) > div::after,
#root input.peer:checked + div::after,
#root input.peer:checked ~ div::after {
  transform: translateX(20px) !important;
  translate: none !important;
}

/* =========================================================
   21. ERASE EXISTING PAGE NUMBERS / WHITEOUT THEME ISOLATION (v1.3.2)
   Guarantees pixel-perfect styling for the Erase Existing Page Numbers
   container, crimson red toggle, 8 zone grid, sliders, pinpoint button,
   and tip callout box.
   ========================================================= */

/* =========================================================
   21. ERASE EXISTING PAGE NUMBERS / WHITEOUT THEME ISOLATION (v1.3.7)
   Guarantees pixel-perfect, clean styling for the Erase Existing Page Numbers
   container, navy toggle, 8 zone grid, sliders, pinpoint button,
   and tip callout box.
   ========================================================= */

/* Erase Toggle Active State: Plugin Navy (#02033B) */
#root label:has(#toggle-remove-existing-numbers:checked) > div,
#root input#toggle-remove-existing-numbers:checked + div,
#root input#toggle-remove-existing-numbers:checked ~ div {
  background-color: #02033B !important;
}

/* Erase Toggle Text when Active */
#root label:has(#toggle-remove-existing-numbers:checked) > span {
  color: #02033B !important;
  font-weight: 600 !important;
}

/* Outer Target Erase Zone Container — Sleek Neutral Slate Card with Navy Accent */
#root .bg-rose-50\/50,
#root div.p-3\.5.rounded-xl.bg-rose-50\/50,
#root div[class*="bg-rose-50"],
#root div.mt-3.p-4.rounded-xl.bg-slate-50,
#root div[class*="bg-slate-50"] {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  padding: 1.25rem !important;
  box-sizing: border-box !important;
  margin-top: 0.75rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* "TARGET ERASE ZONE" Subheading */
#root .bg-rose-50\/50 label,
#root .bg-rose-50\/50 > div:first-child > label,
#root div[class*="bg-rose-50"] label,
#root div[class*="bg-slate-50"] label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #02033B !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0.625rem !important;
}

/* 8 Zone Grid Container: 4 columns on desktop, 2 on mobile */
#root .bg-rose-50\/50 .grid.grid-cols-2.sm\:grid-cols-4,
#root .bg-rose-50\/50 .grid:has(> button),
#root div[class*="bg-rose-50"] .grid,
#root div[class*="bg-slate-50"] .grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  #root .bg-rose-50\/50 .grid.grid-cols-2.sm\:grid-cols-4,
  #root .bg-rose-50\/50 .grid:has(> button),
  #root div[class*="bg-rose-50"] .grid,
  #root div[class*="bg-slate-50"] .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Zone Option Buttons (Common) */
#root .bg-rose-50\/50 .grid button,
#root .bg-rose-50\/50 .grid > button,
#root div[class*="bg-rose-50"] .grid button,
#root div[class*="bg-slate-50"] .grid button {
  background-color: #ffffff !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem 0.375rem !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  text-align: center !important;
  min-width: 0 !important;
  min-height: 46px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

/* Unselected Zone Buttons */
#root .bg-rose-50\/50 .grid button:not(.border-rose-500):not(.ring-1):not(.border-\[\#02033B\]):not([class*="ring-2"]),
#root div[class*="bg-rose-50"] .grid button:not(.border-rose-500):not(.ring-1):not(.border-\[\#02033B\]):not([class*="ring-2"]),
#root div[class*="bg-slate-50"] .grid button:not(.border-rose-500):not(.ring-1):not(.border-\[\#02033B\]):not([class*="ring-2"]) {
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 500 !important;
}

#root .bg-rose-50\/50 .grid button:not(.border-rose-500):not(.ring-1):not(.border-\[\#02033B\]):not([class*="ring-2"]):hover,
#root div[class*="bg-rose-50"] .grid button:not(.border-rose-500):not(.ring-1):not(.border-\[\#02033B\]):not([class*="ring-2"]):hover,
#root div[class*="bg-slate-50"] .grid button:not(.border-rose-500):not(.ring-1):not(.border-\[\#02033B\]):not([class*="ring-2"]):hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Selected Zone Button: Deep Navy #02033B Border & Font */
#root .bg-rose-50\/50 .grid button.border-rose-500,
#root .bg-rose-50\/50 .grid button.ring-1,
#root .bg-rose-50\/50 .grid button.text-rose-800,
#root div[class*="bg-rose-50"] .grid button.border-rose-500,
#root div[class*="bg-rose-50"] .grid button[class*="border-\[\#02033B\]"],
#root div[class*="bg-slate-50"] .grid button[class*="border-\[\#02033B\]"],
#root div[class*="bg-slate-50"] .grid button[class*="ring-2"] {
  background-color: #ffffff !important;
  border: 2px solid #02033B !important;
  color: #02033B !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 2px rgba(2, 3, 59, 0.1) !important;
  outline: none !important;
}

#root .bg-rose-50\/50 .grid button.border-rose-500 span,
#root .bg-rose-50\/50 .grid button.ring-1 span,
#root .bg-rose-50\/50 .grid button.text-rose-800 span,
#root div[class*="bg-rose-50"] .grid button[class*="border-\[\#02033B\]"] span,
#root div[class*="bg-slate-50"] .grid button span {
  text-align: center !important;
  line-height: 1.25 !important;
}

#root div[class*="bg-slate-50"] .grid button[class*="border-\[\#02033B\]"] span,
#root .bg-rose-50\/50 .grid button.border-rose-500 span {
  color: #02033B !important;
  font-weight: 700 !important;
}

/* Erase Slider Rows (Erase Band Height & Distance from Edge) */
#root .bg-rose-50\/50 .flex.flex-col.sm\:flex-row.sm\:items-center.justify-between,
#root .bg-rose-50\/50 > div.border-t:not(:has(#btn-open-erase-visual-inspector)),
#root div[class*="bg-rose-50"] > div.border-t:not(:has(#btn-open-erase-visual-inspector)),
#root div[class*="bg-slate-50"] > div.border-t:not(:has(#btn-open-erase-visual-inspector)) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid #e2e8f0 !important;
  margin-top: 0 !important;
}

/* Slider Row Left Label & Value */
#root div[class*="bg-slate-50"] span.font-semibold,
#root .bg-rose-50\/50 span.font-semibold.text-slate-700 {
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

#root div[class*="bg-slate-50"] span.font-mono,
#root .bg-rose-50\/50 span.font-mono {
  color: #02033B !important;
  font-size: 12px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

/* Slider Row Subtitle */
#root div[class*="bg-slate-50"] p,
#root .bg-rose-50\/50 p.text-\[10px\].text-slate-500 {
  font-size: 11px !important;
  color: #64748b !important;
  margin: 0.2rem 0 0 0 !important;
  line-height: 1.35 !important;
}

/* Erase Range Inputs */
#root .bg-rose-50\/50 input[type="range"],
#root div[class*="bg-rose-50"] input[type="range"],
#root div[class*="bg-slate-50"] input[type="range"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  accent-color: #02033B !important;
  width: 160px !important;
  max-width: 100% !important;
  height: auto !important;
  cursor: pointer !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* "Pinpoint on Page (Visual Drag & Click)" Button */
#root #btn-open-erase-visual-inspector,
#root button#btn-open-erase-visual-inspector {
  width: 100% !important;
  background-color: #ffffff !important;
  color: #02033B !important;
  border: 1.5px solid #02033B !important;
  border-radius: 0.75rem !important;
  padding: 0.625rem 1rem !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

#root #btn-open-erase-visual-inspector:hover,
#root button#btn-open-erase-visual-inspector:hover {
  background-color: #f0f1ff !important;
  border-color: #02033B !important;
  color: #02033B !important;
  box-shadow: 0 2px 4px rgba(2, 3, 59, 0.12) !important;
}

#root #btn-open-erase-visual-inspector svg,
#root button#btn-open-erase-visual-inspector svg {
  width: 1rem !important;
  height: 1rem !important;
  color: #02033B !important;
  stroke: #02033B !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

#root #btn-open-erase-visual-inspector span,
#root button#btn-open-erase-visual-inspector span {
  color: #02033B !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline !important;
}

/* Blue Tip Callout Box — Fully responsive, no clipped text */
#root .bg-rose-50\/50 .p-2\.5.rounded-lg.bg-blue-50\/70,
#root .bg-rose-50\/50 div.bg-blue-50\/70,
#root div[class*="bg-slate-50"] div[class*="bg-blue-50"],
#root div[class*="bg-rose-50"] div[class*="bg-blue-50"] {
  background-color: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 0.875rem !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: #1e3a8a !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: visible !important;
}

#root .bg-rose-50\/50 .p-2\.5.rounded-lg.bg-blue-50\/70 span,
#root .bg-rose-50\/50 div.bg-blue-50\/70 span,
#root div[class*="bg-slate-50"] div[class*="bg-blue-50"] span,
#root div[class*="bg-rose-50"] div[class*="bg-blue-50"] span {
  white-space: normal !important;
  word-break: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex: 1 1 auto !important;
  display: inline !important;
  line-height: 1.5 !important;
  color: #1e3a8a !important;
}

#root .bg-rose-50\/50 .p-2\.5.rounded-lg.bg-blue-50\/70 span.font-bold,
#root .bg-rose-50\/50 div.bg-blue-50\/70 span.font-bold,
#root div[class*="bg-slate-50"] div[class*="bg-blue-50"] span.font-bold,
#root div[class*="bg-rose-50"] div[class*="bg-blue-50"] span.font-bold {
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  flex: 0 0 auto !important;
}

#root .bg-rose-50\/50 .p-2\.5.rounded-lg.bg-blue-50\/70 strong,
#root .bg-rose-50\/50 div.bg-blue-50\/70 strong,
#root div[class*="bg-slate-50"] div[class*="bg-blue-50"] strong,
#root div[class*="bg-rose-50"] div[class*="bg-blue-50"] strong {
  color: #1e3a8a !important;
  font-weight: 700 !important;
}

/* Whiteout Bottom Explanatory Italic Text */
#root div[class*="bg-slate-50"] p.italic,
#root .bg-rose-50\/50 p.italic {
  font-size: 11px !important;
  color: #64748b !important;
  font-style: italic !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}


/* =========================================================
   22. PAGE PREVIEW MODAL (INTERACTIVE INSPECTOR) ISOLATION
       Covers: top bar, scope toggle, erase button, toolbar presets,
       mask overlay box, bottom footer sliders & action buttons
   ========================================================= */

/* --- 22.0  Modal Backdrop & Container --- */
#root .fixed.inset-0.z-50 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(15,23,42,0.80) !important;
  padding: 0.75rem !important;
}

#root .fixed.inset-0.z-50 > .relative {
  position: relative !important;
  width: 100% !important;
  max-width: 64rem !important; /* max-w-5xl */
  max-height: 94vh !important;
  background-color: #ffffff !important;
  border-radius: 1rem !important; /* rounded-2xl */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
}

/* --- 22.1  Top Bar (Dark Navy Header) --- */
#root .fixed.inset-0.z-50 > .relative > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 1.25rem !important;
  background-color: #03045e !important;
  color: #ffffff !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  flex-wrap: wrap !important;
}

/* File icon box (white/10 translucent) */
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:first-child > div:first-child {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  border-radius: 0.5rem !important;
  background-color: rgba(255,255,255,0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

#root .fixed.inset-0.z-50 > .relative > div:first-child > div:first-child > div:first-child svg {
  width: 1rem !important;
  height: 1rem !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
}

/* Page title (e.g. "Page 1 of 77 • filename.pdf") */
#root .fixed.inset-0.z-50 > .relative > div:first-child h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Subtitle "Interactive Inspector • Click or drag…" */
#root .fixed.inset-0.z-50 > .relative > div:first-child p {
  font-size: 11px !important;
  color: #bfdbfe !important; /* blue-200 */
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Right-side controls wrapper */
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
}

/* --- 22.2  Scope Toggle ("This PDF Only" / "All PDFs") --- */
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background-color: rgba(255,255,255,0.15) !important;
  border-radius: 0.5rem !important;
  padding: 2px !important;
  gap: 0 !important;
}

#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.25rem !important;
  padding: 0.25rem 0.625rem !important;
  border-radius: 0.375rem !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s, color 0.15s !important;
  background-color: transparent !important;
  color: rgba(219,234,254,0.9) !important; /* blue-100 */
  box-shadow: none !important;
  min-height: unset !important;
  height: auto !important;
  width: auto !important;
  box-sizing: border-box !important;
}

/* Active scope button — white pill with dark navy writing (never white on white!) */
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button.bg-white,
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button[class*="bg-white"] {
  background-color: #ffffff !important;
  color: #02033B !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button.bg-white span,
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button[class*="bg-white"] span,
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button.bg-white *,
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button[class*="bg-white"] * {
  color: #02033B !important;
  stroke: #02033B !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button.bg-white svg,
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button[class*="bg-white"] svg {
  color: #02033B !important;
  stroke: #02033B !important;
  width: 0.75rem !important;
  height: 0.75rem !important;
  flex-shrink: 0 !important;
}

#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button:not(.bg-white):not([class*="bg-white"]) span,
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button:not(.bg-white):not([class*="bg-white"]) * {
  color: rgba(219,234,254,0.9) !important;
  stroke: rgba(219,234,254,0.9) !important;
  white-space: nowrap !important;
}

#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button:not(.bg-white):not([class*="bg-white"]):hover span,
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button:not(.bg-white):not([class*="bg-white"]):hover * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  flex-shrink: 0 !important;
}

/* --- 22.3  "Erase Mask Active" / "Mark Old Number to Erase" Button --- */
#root #btn-preview-toggle-eraser {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0.375rem 0.625rem !important;
  border-radius: 0.5rem !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
}

/* Active state — rose/pink pill (Erase Mask Active) */
#root #btn-preview-toggle-eraser.bg-rose-500,
#root button#btn-preview-toggle-eraser[class*="bg-rose"] {
  background-color: #02033B !important;
  color: #ffffff !important;
}

/* Inactive state — ghost translucent */
#root #btn-preview-toggle-eraser:not([class*="bg-rose"]) {
  background-color: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

#root #btn-preview-toggle-eraser:hover {
  filter: brightness(1.1) !important;
}

#root #btn-preview-toggle-eraser svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  color: inherit !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
}

#root #btn-preview-toggle-eraser span {
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* --- 22.4  Icon-only Utility Buttons (Rotate, Zoom-Out, Zoom-In, Close) --- */
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.375rem !important;
  border-radius: 0.5rem !important;
  background-color: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
  min-width: unset !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > button:hover {
  background-color: rgba(255,255,255,0.22) !important;
}

/* Close button gets a rose hover */
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > button:last-child:hover {
  background-color: rgba(2,3,59,0.75) !important;
}

#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > button svg {
  width: 1rem !important;
  height: 1rem !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  display: block !important;
}

/* Close button has a larger icon (w-5 h-5) */
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > button:last-child svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Zoom percentage label (e.g. "100%") */
#root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 12px !important;
  color: #bfdbfe !important; /* blue-200 */
  display: inline-block !important;
  min-width: 2rem !important;
  text-align: center !important;
}

/* --- 22.5  Rose Info Toolbar ("Erase Zone for..." banner) --- */
#root .fixed.inset-0.z-50 > .relative > div.bg-rose-50 {
  background-color: #f0f1ff !important;
  border-bottom: 1px solid rgba(252,165,165,0.7) !important;
  padding: 0.5rem 1rem !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  font-size: 12px !important;
  color: #02033B !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Blinking dot */
#root .fixed.inset-0.z-50 > .relative > div.bg-rose-50 span.animate-ping {
  width: 0.5rem !important;
  height: 0.5rem !important;
  border-radius: 9999px !important;
  background-color: #02033B !important;
  display: inline-block !important;
  animation: ping 1s cubic-bezier(0,0,0.2,1) infinite !important;
  flex-shrink: 0 !important;
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* Erase Zone label (font-semibold in toolbar) */
#root .fixed.inset-0.z-50 > .relative > div.bg-rose-50 span.font-semibold {
  font-weight: 600 !important;
  color: #02033B !important;
}

/* "Drag the red box…" secondary text */
#root .fixed.inset-0.z-50 > .relative > div.bg-rose-50 span.text-slate-600 {
  color: #475569 !important;
}

/* Preset Zone Buttons (Bottom Left, Bottom Center, Bottom Right, Raised, Entire Bottom) */
#root .fixed.inset-0.z-50 > .relative > div.bg-rose-50 button {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: 0.375rem !important;
  background-color: #ffffff !important;
  border: 1px solid #a5b4fc !important;
  color: #02033B !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#root .fixed.inset-0.z-50 > .relative > div.bg-rose-50 button:hover {
  background-color: #f0f1ff !important;
  border-color: #818cf8 !important;
}

/* --- 22.6  Main Viewport (PDF Preview Area) --- */
#root .fixed.inset-0.z-50 > .relative > div.bg-slate-100,
#root .fixed.inset-0.z-50 > .relative > div.flex-1 {
  flex: 1 1 auto !important;
  background-color: #f1f5f9 !important;
  overflow: auto !important;
  padding: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  min-height: 320px !important;
  box-sizing: border-box !important;
}

/* Prev / Next page navigation arrows */
#root .fixed.inset-0.z-50 > .relative div[class*="absolute"][class*="left"] > button,
#root .fixed.inset-0.z-50 > .relative button[title*="Previous"],
#root .fixed.inset-0.z-50 > .relative button[title*="Next"] {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 30 !important;
  padding: 0.625rem !important;
  border-radius: 9999px !important;
  background-color: rgba(255,255,255,0.92) !important;
  color: #1e293b !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  cursor: pointer !important;
  transition: transform 0.15s, background-color 0.15s !important;
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
  min-width: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#root .fixed.inset-0.z-50 > .relative button[title*="Previous"] {
  left: 0.75rem !important;
}

#root .fixed.inset-0.z-50 > .relative button[title*="Next"] {
  right: 0.75rem !important;
}

#root .fixed.inset-0.z-50 > .relative button[title*="Previous"]:hover,
#root .fixed.inset-0.z-50 > .relative button[title*="Next"]:hover {
  background-color: #ffffff !important;
  transform: translateY(-50%) scale(1.05) !important;
}

#root .fixed.inset-0.z-50 > .relative button[title*="Previous"]:disabled,
#root .fixed.inset-0.z-50 > .relative button[title*="Next"]:disabled {
  opacity: 0.2 !important;
  cursor: default !important;
}

#root .fixed.inset-0.z-50 > .relative button[title*="Previous"] svg,
#root .fixed.inset-0.z-50 > .relative button[title*="Next"] svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: #1e293b !important;
  stroke: #1e293b !important;
  stroke-width: 2 !important;
  display: block !important;
}

/* --- 22.7  Interactive Erase Mask Overlay Box --- */
#root #interactive-erase-mask-box {
  position: absolute !important;
  border: 2px dashed #02033B !important;
  background-color: rgba(2,3,59,0.12) !important;
  border-radius: 0.25rem !important;
  cursor: move !important;
  z-index: 20 !important;
  box-shadow: 0 2px 8px rgba(2,3,59,0.20) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0.25rem !important;
  box-sizing: border-box !important;
}

/* Top label bar inside mask box ("Whiteout Zone — 91% from top") */
#root #interactive-erase-mask-box > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: #02033B !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 0.125rem 0.25rem !important;
  border-radius: 0.25rem !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  width: 100% !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  gap: 0.25rem !important;
}

#root #interactive-erase-mask-box > div:first-child svg {
  width: 0.625rem !important;
  height: 0.625rem !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
}

#root #interactive-erase-mask-box > div:first-child span {
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Bottom hint label ("Drag or resize below") */
#root #interactive-erase-mask-box > div:last-child {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: #01022a !important;
  background-color: rgba(255,255,255,0.92) !important;
  padding: 0.125rem 0.25rem !important;
  border-radius: 0.25rem !important;
  align-self: center !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
  white-space: nowrap !important;
}

/* --- 22.8  Bottom Footer (Slider Controls & Action Buttons) --- */
#root .fixed.inset-0.z-50 > .relative > div:last-child {
  padding: 0.75rem 1.25rem !important;
  background-color: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: #475569 !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Slider group container (left side — all 3 slider triplets in a row) */
#root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* Individual slider triplet — label + range + value */
#root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem !important;
  flex-shrink: 0 !important;
}

/* Slider label ("Vertical Position:", "Box Width:", "Height:") */
#root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div > span:first-child {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  white-space: nowrap !important;
}

/* Percentage value label ("91%", "44%", "6%") */
#root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div > span:last-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 11px !important;
  color: #64748b !important;
  min-width: 2rem !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

/* ── Range sliders: full reset ── */
#root .fixed.inset-0.z-50 > .relative > div:last-child input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 5px !important;
  background: #e2e8f0 !important;
  border-radius: 9999px !important;
  outline: none !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* Vertical Position slider */
#root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div:nth-child(1) input[type="range"] {
  width: 110px !important;
  min-width: 80px !important;
}

/* Box Width slider */
#root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div:nth-child(2) input[type="range"] {
  width: 100px !important;
  min-width: 70px !important;
}

/* Height slider */
#root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div:nth-child(3) input[type="range"] {
  width: 80px !important;
  min-width: 55px !important;
}

/* Webkit track */
#root .fixed.inset-0.z-50 > .relative > div:last-child input[type="range"]::-webkit-slider-runnable-track {
  height: 5px !important;
  border-radius: 9999px !important;
  background: #e2e8f0 !important;
  cursor: pointer !important;
}

/* Webkit thumb — large vivid rose circle */
#root .fixed.inset-0.z-50 > .relative > div:last-child input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 9999px !important;
  background-color: #02033B !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 0 0 1.5px rgba(2,3,59,0.40), 0 2px 4px rgba(2,3,59,0.25) !important;
  cursor: pointer !important;
  margin-top: -5.5px !important;
}

/* Firefox track */
#root .fixed.inset-0.z-50 > .relative > div:last-child input[type="range"]::-moz-range-track {
  height: 5px !important;
  border-radius: 9999px !important;
  background: #e2e8f0 !important;
  cursor: pointer !important;
}

/* Firefox fill (left of thumb) */
#root .fixed.inset-0.z-50 > .relative > div:last-child input[type="range"]::-moz-range-progress {
  background-color: #02033B !important;
  height: 5px !important;
  border-radius: 9999px !important;
}

/* Firefox thumb */
#root .fixed.inset-0.z-50 > .relative > div:last-child input[type="range"]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border-radius: 9999px !important;
  background-color: #02033B !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 0 0 1.5px rgba(2,3,59,0.40), 0 2px 4px rgba(2,3,59,0.25) !important;
  cursor: pointer !important;
}

/* Action buttons container (right side) */
#root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}

/* "Remove Mask" — only when NOT the sole button (:first-child:not(:last-child)) */
#root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child > button:first-child:not(:last-child) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: 0.5rem !important;
  border: 1.5px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.15s, border-color 0.15s !important;
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

#root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child > button:first-child:not(:last-child):hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

#root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child > button:first-child:not(:last-child) svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  color: #64748b !important;
  stroke: #64748b !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
}

#root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child > button:first-child:not(:last-child) span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* "Apply & Done" — always the last button */
#root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child > button:last-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0.4rem 1.1rem !important;
  border-radius: 0.5rem !important;
  background-color: #03045e !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  box-shadow: 0 2px 6px rgba(3,4,94,0.30) !important;
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

#root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child > button:last-child:hover {
  background-color: #02033b !important;
}

#root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child > button:last-child svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 2.5 !important;
  flex-shrink: 0 !important;
}

#root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child > button:last-child span,
#root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child > button:last-child span * {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* =========================================================
   23. PDF DOCUMENTS HEADER BAR — SINGLE-ROW ENFORCEMENT (v1.4.0)
   The compiled JS bundle uses: flex flex-col sm:flex-row pb-3 border-b border-slate-100
   We target pb-3.border-b.border-slate-100 which is unique to this header row
   and force everything into a single horizontal line with no wrap.
   ========================================================= */

/* ── Outer header row: force flex-row, never column-stack ── */
#root div.pb-3.border-b.border-slate-100 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

/* ── Left group: icon + title + drag hint ── */
#root div.pb-3.border-b.border-slate-100 > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  min-width: 0 !important;
}

/* Files icon */
#root div.pb-3.border-b.border-slate-100 > div:first-child > svg {
  flex-shrink: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  display: inline-block !important;
}

/* "PDF Documents (N)" title — compact, never wraps */
#root div.pb-3.border-b.border-slate-100 > div:first-child > h4 {
  display: block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.25 !important;
}

/* "— Drag to adjust sequence" hint — force always visible */
#root div.pb-3.border-b.border-slate-100 > div:first-child > span {
  display: inline !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* ── Right group: Style label + pill ── */
#root div.pb-3.border-b.border-slate-100 > div:last-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  margin-left: 0.75rem !important;
}

/* "Style:" label — force always visible (was hidden sm:inline) */
#root div.pb-3.border-b.border-slate-100 > div:last-child > span:first-child {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  font-size: 0.75rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* ── Pill container ── */
#root #pdf-view-mode-selector {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  padding: 0.25rem !important;
  border-radius: 0.75rem !important;
  background-color: #f1f5f9 !important;
  border: 1px solid rgba(226,232,240,0.8) !important;
}

/* ── Individual view mode buttons ── */
#root #btn-view-mode-list,
#root #btn-view-mode-text,
#root #btn-view-mode-boxes {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 0.375rem !important;
  padding: 0.375rem 0.625rem !important;
  border-radius: 0.5rem !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background-color 0.15s, color 0.15s !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  width: auto !important;
  min-width: unset !important;
  height: auto !important;
  line-height: 1 !important;
}

/* Active state: white pill with navy text */
#root #btn-view-mode-list.bg-white,
#root #btn-view-mode-text.bg-white,
#root #btn-view-mode-boxes.bg-white {
  background-color: #ffffff !important;
  color: #03045e !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.10) !important;
}

/* Inactive state */
#root #btn-view-mode-list:not(.bg-white),
#root #btn-view-mode-text:not(.bg-white),
#root #btn-view-mode-boxes:not(.bg-white) {
  color: #475569 !important;
}

/* Icons inside buttons */
#root #btn-view-mode-list svg,
#root #btn-view-mode-text svg,
#root #btn-view-mode-boxes svg {
  flex-shrink: 0 !important;
  width: 0.875rem !important;
  height: 0.875rem !important;
  min-width: 0.875rem !important;
  min-height: 0.875rem !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: none !important;
  stroke-width: 2 !important;
}

/* Active tab icon: Toolfreekit brand dark navy */
#root #btn-view-mode-list.bg-white svg,
#root #btn-view-mode-text.bg-white svg,
#root #btn-view-mode-boxes.bg-white svg,
#root #btn-view-mode-list[class*="bg-white"] svg,
#root #btn-view-mode-text[class*="bg-white"] svg,
#root #btn-view-mode-boxes[class*="bg-white"] svg {
  color: #03045e !important;
  stroke: #03045e !important;
}

/* Inactive tab icon: clean slate gray */
#root #btn-view-mode-list:not([class*="bg-white"]) svg,
#root #btn-view-mode-text:not([class*="bg-white"]) svg,
#root #btn-view-mode-boxes:not([class*="bg-white"]) svg {
  color: #64748b !important;
  stroke: #64748b !important;
}

/* Button text labels */
#root #btn-view-mode-list span,
#root #btn-view-mode-text span,
#root #btn-view-mode-boxes span {
  white-space: nowrap !important;
  display: inline !important;
  visibility: visible !important;
  line-height: 1 !important;
}


/* =========================================================
   SECTION 24. DROPZONE COMPONENT DEFENSE & PIXEL-PERFECT STYLING
   Enforces exact reference design for the Drag & Drop area:
   - Clean dashed border (#cbd5e1), rounded-2xl (1rem / 16px)
   - Crisp white background with ample padding
   - Soft blue badge (#eff6ff) with centered UploadCloud icon (#02033B)
   - Centered title "Drag & drop PDF files to combine" (#0f172a / 600 weight / ~18px)
   - Centered 2-line subtitle (#64748b / 14px / max-width ~480px)
   - Solid dark navy (#02033B) "Browse PDF Files" pill button
   ========================================================= */

/* ── Main Dropzone Card Container ── */
#root #pdf-dropzone,
#root div#pdf-dropzone,
#root div[id*="dropzone"].border-dashed {
  position: relative !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 2px dashed #cbd5e1 !important;
  border-radius: 1rem !important;
  padding: 3.25rem 1.5rem !important;
  text-align: center !important;
  cursor: pointer !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
  margin: 0 auto !important;
  outline: none !important;
}

#root #pdf-dropzone:hover,
#root div#pdf-dropzone:hover {
  border-color: #94a3b8 !important;
  background-color: #fafbfd !important;
}

/* Drag over active state */
#root #pdf-dropzone.border-\[\#03045e\],
#root #pdf-dropzone.border-\[\#02033B\],
#root #pdf-dropzone.bg-blue-50\/70 {
  border-color: #02033B !important;
  background-color: #f0f7ff !important;
  box-shadow: 0 10px 25px -5px rgba(2, 3, 59, 0.1) !important;
}

/* ── Centered Content Wrapper ── */
#root #pdf-dropzone > div,
#root div#pdf-dropzone > div,
#root #pdf-dropzone .max-w-md {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 32rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ── Icon Box / Badge ── */
#root #pdf-dropzone > div > div:first-child,
#root div#pdf-dropzone .rounded-2xl.flex.items-center.justify-center.mb-4,
#root div#pdf-dropzone .w-16.h-16 {
  width: 4.5rem !important;
  height: 4.5rem !important;
  min-width: 4.5rem !important;
  min-height: 4.5rem !important;
  border-radius: 1rem !important;
  background-color: #eff6ff !important;
  border: 1px solid #dbeafe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
}

/* Cloud Icon inside badge */
#root #pdf-dropzone > div > div:first-child svg,
#root div#pdf-dropzone .rounded-2xl.flex.items-center.justify-center.mb-4 svg,
#root div#pdf-dropzone .w-16.h-16 svg {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  color: #02033B !important;
  stroke: #02033B !important;
  fill: none !important;
  stroke-width: 2px !important;
  display: block !important;
  flex-shrink: 0 !important;
  margin: auto !important;
}

/* ── Heading: "Drag & drop PDF files to combine" ── */
#root #pdf-dropzone h2,
#root div#pdf-dropzone h2,
#root #pdf-dropzone .text-slate-800,
#root #pdf-dropzone [class*="font-semibold"] {
  font-family: inherit !important;
  font-size: 1.125rem !important; /* ~18px */
  font-weight: 600 !important;
  color: #0f172a !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 0.375rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  display: block !important;
  width: 100% !important;
  border: none !important;
  text-transform: none !important;
}

/* ── Subtitle Paragraph ── */
#root #pdf-dropzone p,
#root div#pdf-dropzone p,
#root #pdf-dropzone .text-slate-500 {
  font-family: inherit !important;
  font-size: 0.875rem !important; /* ~14px */
  font-weight: 400 !important;
  color: #64748b !important;
  text-align: center !important;
  margin-top: 0.25rem !important;
  margin-bottom: 1.375rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  max-width: 30rem !important; /* Wraps cleanly into 2 lines matching screenshot */
  display: block !important;
  letter-spacing: normal !important;
}

/* ── Button Container ── */
#root #pdf-dropzone .flex.flex-wrap.items-center.justify-center.gap-3,
#root div#pdf-dropzone > div > div:last-of-type {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* ── "Browse PDF Files" Button ── */
#root #pdf-dropzone #btn-choose-files,
#root div#pdf-dropzone button#btn-choose-files,
#root #btn-choose-files {
  background-color: #02033B !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 0.75rem !important; /* 12px */
  padding: 0.625rem 1.375rem !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(2, 3, 59, 0.22) !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  outline: none !important;
  width: auto !important;
  min-width: unset !important;
}

#root #pdf-dropzone #btn-choose-files:hover,
#root div#pdf-dropzone button#btn-choose-files:hover,
#root #btn-choose-files:hover {
  background-color: #010226 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(2, 3, 59, 0.32) !important;
  transform: translateY(-1px) !important;
}

#root #pdf-dropzone #btn-choose-files:active,
#root #btn-choose-files:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Icon inside Browse Button */
#root #pdf-dropzone #btn-choose-files svg,
#root #btn-choose-files svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2px !important;
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  margin: 0 !important;
}

/* Text inside Browse Button */
#root #pdf-dropzone #btn-choose-files span,
#root #btn-choose-files span {
  color: #ffffff !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  display: inline !important;
  line-height: inherit !important;
  white-space: nowrap !important;
  visibility: visible !important;
}


/* =========================================================
   SECTION 25. PLACEMENT ON PAGE INTERACTIVE CARD DEFENSE
   Enforces exact reference design for the "Placement on Page" mockup:
   - Outer card: rounded-2xl (1rem / 16px), 2px solid #cbd5e1 border, slate-50 bg
   - Dashed inner margin guideline: 1px dashed #cbd5e1, absolute inset, transparent bg
   - Top row buttons: single line (Top Left, Top Center, Top Right), rounded-md
   - Bottom row buttons: 2 lines (Bottom \n Left, Bottom \n Center, Bottom \n Right), 44px tall, rounded-md
   - Selected state: solid deep navy (#02033B) with white text
   - Unselected state: crisp white with #d1d5db border and #334155 text
   ========================================================= */

/* Placement on Page container */
#root .max-w-\[260px\].h-\[170px\],
#root [class*="max-w-[260px]"][class*="h-[170px]"],
#root div.max-w-\[260px\] {
  width: 260px !important;
  max-width: 260px !important;
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  border-radius: 12px !important;
  border: 2px solid #cbd5e1 !important;
  background-color: #f8fafc !important;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04) !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
}

/* Inner dashed margin guideline */
#root .max-w-\[260px\] > div.border-dashed,
#root .max-w-\[260px\] .border-dashed,
#root .max-w-\[260px\] div[class*="border-dashed"],
#root [class*="max-w-[260px]"] div[class*="border-dashed"],
#root .max-w-\[260px\] > div:first-child {
  position: absolute !important;
  inset: 14px !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 6px !important;
  pointer-events: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  z-index: 1 !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Label above Placement diagram */
#root .flex.flex-col > label.tracking-wider,
#root label[class*="tracking-wider"] {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #475569 !important;
  margin-bottom: 0.5rem !important;
}

/* Top button row (Child 2 of container) */
#root .max-w-\[260px\] > div:nth-child(2),
#root [class*="max-w-[260px]"] > div:nth-child(2),
#root .max-w-\[260px\] > div.flex.justify-between:first-of-type,
#root .max-w-\[260px\] > div.flex.items-center:first-of-type {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Top row buttons (Top Left, Top Center, Top Right) */
#root .max-w-\[260px\] > div:nth-child(2) button,
#root [class*="max-w-[260px]"] > div:nth-child(2) button,
#root .max-w-\[260px\] > div.flex.justify-between:first-of-type button,
#root .max-w-\[260px\] > div.flex:first-of-type button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 2px 4px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

/* Middle [ Document Body ] text (Child 3 of container) */
#root .max-w-\[260px\] > div:nth-child(3),
#root [class*="max-w-[260px]"] > div:nth-child(3),
#root .max-w-\[260px\] div.font-mono,
#root .max-w-\[260px\] .text-slate-300 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #cbd5e1 !important;
  font-size: 11px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  user-select: none !important;
  position: relative !important;
  z-index: 5 !important;
  margin: 0 !important;
}

/* Bottom button row (Child 4 of container) */
#root .max-w-\[260px\] > div:nth-child(4),
#root [class*="max-w-[260px]"] > div:nth-child(4),
#root .max-w-\[260px\] > div.flex.justify-between:last-of-type,
#root .max-w-\[260px\] > div.flex.items-center:last-of-type,
#root .max-w-\[260px\] > div:last-child {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Bottom row buttons (Bottom Left, Bottom Center, Bottom Right) */
#root .max-w-\[260px\] > div:nth-child(4) button,
#root [class*="max-w-[260px]"] > div:nth-child(4) button,
#root .max-w-\[260px\] > div.flex.justify-between:last-of-type button,
#root .max-w-\[260px\] > div.flex:last-of-type button,
#root .max-w-\[260px\] > div:last-child button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 44px !important;
  padding: 4px 2px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  word-spacing: 100vw !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: all 0.15s ease !important;
}

/* Bottom row button spans if present */
#root .max-w-\[260px\] > div:nth-child(4) button span,
#root .max-w-\[260px\] > div:last-child button span {
  display: block !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;
  word-spacing: normal !important;
}

/* Unselected position buttons */
#root .max-w-\[260px\] button:not(.bg-\[\#03045e\]):not(.bg-\[\#02033B\]):not(.bg-\[\#02033b\]):not([class*="bg-[#03045e]"]):not([class*="bg-[#02033B]"]):not([class*="bg-[#02033b]"]) {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #334155 !important;
  box-shadow: none !important;
}

#root .max-w-\[260px\] button:not(.bg-\[\#03045e\]):not(.bg-\[\#02033B\]):not(.bg-\[\#02033b\]):not([class*="bg-[#03045e]"]):not([class*="bg-[#02033B]"]):not([class*="bg-[#02033b]"]):hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Selected position button (e.g. Bottom Center) */
#root .max-w-\[260px\] button.bg-\[\#03045e\],
#root .max-w-\[260px\] button.bg-\[\#02033B\],
#root .max-w-\[260px\] button.bg-\[\#02033b\],
#root .max-w-\[260px\] button[class*="bg-[#03045e]"],
#root .max-w-\[260px\] button[class*="bg-[#02033B]"],
#root .max-w-\[260px\] button[class*="bg-[#02033b]"] {
  background-color: #02033B !important;
  border: 1px solid #02033B !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(2, 3, 59, 0.25) !important;
}

/* =========================================================
   26. INTERACTIVE INSPECTOR MODAL (VISUAL DRAG & CLICK) MOBILE RESPONSIVENESS
   Ensures Vertical Position, Box Width, and Height sliders, preset buttons,
   and action controls are 100% visible, neatly stacked, and never cut off on mobile
   ========================================================= */
@media (max-width: 768px) {
  /* 1. Modal Overlay & Container Full-Screen Elevation */
  #root .fixed.inset-0.z-50,
  body .fixed.inset-0.z-50 {
    z-index: 999999 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  #root .fixed.inset-0.z-50 > .relative,
  body .fixed.inset-0.z-50 > .relative {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  /* 2. Header Area: Full Title & Tool Wrap */
  #root .fixed.inset-0.z-50 > .relative > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0.625rem 0.75rem !important;
    flex-shrink: 0 !important;
  }
  #root .fixed.inset-0.z-50 > .relative > div:first-child > div:first-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    min-width: 0 !important;
  }
  #root .fixed.inset-0.z-50 > .relative > div:first-child h3 {
    font-size: 0.8125rem !important;
    line-height: 1.25 !important;
  }
  #root .fixed.inset-0.z-50 > .relative > div:first-child p {
    font-size: 0.6875rem !important;
  }
  #root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.35rem !important;
  }

  /* Scope Switcher ("This PDF Only" / "All PDFs") */
  #root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child,
  #root .fixed [class*="bg-white/15"] {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    justify-content: space-between !important;
  }
  #root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > div:first-child button,
  #root .fixed [class*="bg-white/15"] button {
    flex: 1 1 50% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.6875rem !important;
  }

  /* "Erase Mask Active" button */
  #root #btn-preview-toggle-eraser {
    flex: 0 0 auto !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.6875rem !important;
  }

  /* Utility buttons in header (Rotate, Zoom Out, %, Zoom In, Close) */
  #root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > button {
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0.25rem !important;
  }
  #root .fixed.inset-0.z-50 > .relative > div:first-child > div:last-child > span {
    font-size: 0.6875rem !important;
    min-width: 1.75rem !important;
  }

  /* 3. Preset Zone Buttons Banner ("Bottom Left", "Bottom Center", etc.) */
  #root .fixed.inset-0.z-50 > .relative > div.bg-rose-50 {
    padding: 0.4rem 0.625rem !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #root .fixed.inset-0.z-50 > .relative > div.bg-rose-50 > div:first-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
  }
  #root .fixed.inset-0.z-50 > .relative > div.bg-rose-50 > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.3rem !important;
  }
  #root .fixed.inset-0.z-50 > .relative > div.bg-rose-50 button {
    flex: 1 1 auto !important;
    padding: 0.25rem 0.45rem !important;
    font-size: 0.6875rem !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* 4. Canvas Preview Area (Scrollable Viewport) */
  #root .fixed.inset-0.z-50 > .relative > div.bg-slate-100,
  #root .fixed.inset-0.z-50 > .relative > div.flex-1 {
    flex: 1 1 auto !important;
    min-height: 180px !important;
    overflow: auto !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
  }

  /* 5. Bottom Controls Footer — ALL OPTIONS GUARANTEED VISIBLE */
  #root .fixed.inset-0.z-50 > .relative > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0.625rem 0.75rem !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  /* Sliders group container — stack into 3 full-width rows */
  #root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 0.35rem !important;
    box-sizing: border-box !important;
  }

  /* Each individual slider row (Vertical Position, Box Width, Height) */
  #root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
  }

  /* Slider label */
  #root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div > span:first-child {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    width: 95px !important;
    min-width: 95px !important;
    flex-shrink: 0 !important;
  }

  /* Slider range track — fills remaining width dynamically */
  #root .fixed.inset-0.z-50 > .relative > div:last-child input[type="range"],
  #root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div:nth-child(1) input[type="range"],
  #root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div:nth-child(2) input[type="range"],
  #root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div:nth-child(3) input[type="range"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 60px !important;
    max-width: none !important;
    height: 6px !important;
    cursor: pointer !important;
  }

  /* Slider percentage indicator */
  #root .fixed.inset-0.z-50 > .relative > div:last-child > div:first-child > div > span:last-child {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    min-width: 32px !important;
    width: 32px !important;
    text-align: right !important;
    flex-shrink: 0 !important;
  }

  /* Footer Action Buttons Container */
  #root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0.15rem !important;
  }

  /* "Remove Mask" and "Apply & Done" Buttons */
  #root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child > button {
    flex: 1 1 50% !important;
    width: 50% !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    border-radius: 0.625rem !important;
    box-sizing: border-box !important;
    padding: 0.5rem !important;
  }

  /* If only "Apply & Done" is present */
  #root .fixed.inset-0.z-50 > .relative > div:last-child > div:last-child > button:only-child {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}
/* =========================================================
   24. MOBILE RESPONSIVE OVERRIDES
   Breakpoints: ≤639px (mobile), ≤479px (very small phones)
   All rules scoped to #root to avoid touching WP admin.
   These override the Tailwind sm:/md: classes that WordPress
   themes kill by stripping or resetting the stylesheet.
   v1.5.0 — Initial mobile section
   ========================================================= */

/* ---- 24.0 Global: prevent horizontal overflow on mobile ---- */
@media (max-width: 768px) {
  #root {
    overflow-x: hidden !important;
  }

  #root > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ---- 24.1 Top Action Banner (#top-combine-banner) ---- */
/* Stack to column on mobile/tablet so the merge button doesn't overflow */
@media (max-width: 768px) {
  #root #top-combine-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.875rem 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #root #top-combine-banner > div:first-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.625rem !important;
    box-sizing: border-box !important;
  }

  #root #top-combine-banner h3 {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.35 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    flex: 1 1 auto !important;
  }

  #root #top-combine-banner > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Merge button goes full width on mobile */
  #root #btn-main-merge-action {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    min-height: 46px !important; /* touch target */
    box-sizing: border-box !important;
    border-radius: 0.75rem !important;
    white-space: nowrap !important;
  }

  #root #btn-main-merge-action svg {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  #root #btn-main-merge-action span {
    display: inline-block !important;
    vertical-align: middle !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* ---- 24.2 Toolbar Buttons (Add More, Rotate All, Clear All) ---- */
/* Mobile: wrap into a 2-col grid — Add More on top full-width,
   Rotate All + Clear All side-by-side on the second row */
@media (max-width: 768px) {
  #root #pdf-merger-status-bar .flex.items-center.gap-2,
  #root [id*="status-bar"] .flex.items-center.gap-2,
  #pdf-merger-status-bar .flex.items-center.gap-2,
  [id*="status-bar"] .flex.items-center.gap-2,
  #root div:has(> #btn-status-add-more),
  #root #pdf-merger-status-bar div:has(> #btn-status-add-more),
  #pdf-merger-status-bar div:has(> #btn-status-add-more) {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }

  /* Add More spans both columns on the first row */
  #root #btn-status-add-more,
  #btn-status-add-more {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    min-height: 44px !important;
    padding: 0.625rem 1rem !important;
    background-color: #03045e !important;
    color: #ffffff !important;
    border: 1px solid #03045e !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(3, 4, 94, 0.15) !important;
  }

  /* Rotate All and Clear All share the second row equally */
  #root #btn-status-rotate-all,
  #btn-status-rotate-all {
    flex: 1 1 calc(50% - 0.25rem) !important;
    width: calc(50% - 0.25rem) !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0.625rem 0.5rem !important;
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.375rem !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  #root #btn-status-clear-all,
  #btn-status-clear-all {
    flex: 1 1 calc(50% - 0.25rem) !important;
    width: calc(50% - 0.25rem) !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0.625rem 0.5rem !important;
    background-color: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.375rem !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  /* Explicit text and icon guarantees */
  #root #btn-status-add-more span,
  #btn-status-add-more span {
    color: #ffffff !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    display: inline !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  #root #btn-status-rotate-all span,
  #btn-status-rotate-all span {
    color: #334155 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    display: inline !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  #root #btn-status-clear-all span,
  #btn-status-clear-all span {
    color: #e11d48 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    display: inline !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Keep icons at a readable size */
  #root #btn-status-add-more svg,
  #btn-status-add-more svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }

  #root #btn-status-rotate-all svg,
  #btn-status-rotate-all svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    color: #03045e !important;
    stroke: #03045e !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }

  #root #btn-status-clear-all svg,
  #btn-status-clear-all svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    color: #e11d48 !important;
    stroke: #e11d48 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }
}

/* Very small screens (≤ 380px) */
@media (max-width: 380px) {
  #root #btn-status-rotate-all,
  #root #btn-status-clear-all,
  #btn-status-rotate-all,
  #btn-status-clear-all {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.375rem !important;
  }

  #root #btn-status-rotate-all span,
  #root #btn-status-clear-all span,
  #btn-status-rotate-all span,
  #btn-status-clear-all span {
    font-size: 0.75rem !important;
  }
}

/* ---- 24.3 Status Bar Header Row ---- */
/* Stack the header (title/badge) and toolbar onto separate rows */
@media (max-width: 768px) {
  #root #pdf-merger-status-bar > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    padding: 0.75rem 0.875rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Title row (Layers icon + title + Ready badge) */
  #root #pdf-merger-status-bar > div:first-child > div:first-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Toolbar row — full width */
  #root #pdf-merger-status-bar > div:first-child > div:last-child {
    width: 100% !important;
  }
}

/* ---- 24.4 Metric Cards Grid ---- */
/* Already handled by PHP inline CSS, but reinforce here for theme safety */
@media (max-width: 639px) {
  #root #pdf-merger-status-bar > div:last-child,
  #root #pdf-merger-status-bar .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.875rem !important;
  }
}

@media (max-width: 479px) {
  #root #pdf-merger-status-bar > div:last-child,
  #root #pdf-merger-status-bar .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* On very small screens shrink the fixed card height slightly */
  #status-metric-pdfs,
  #status-metric-pages,
  #status-metric-input-size,
  #status-metric-est-merged-size,
  #root #status-metric-pdfs,
  #root #status-metric-pages,
  #root #status-metric-input-size,
  #root #status-metric-est-merged-size {
    height: auto !important;
    min-height: 62px !important;
    max-height: none !important;
    padding: 0.5rem 0.75rem !important;
  }
}

/* ---- 24.4.1 Document List Header & View Mode Switcher ---- */
@media (max-width: 768px) {
  #root .border-b.border-slate-100:has(#pdf-view-mode-selector),
  #root div.flex.flex-col.sm\:flex-row:has(#pdf-view-mode-selector),
  #root div:has(> div > #pdf-view-mode-selector) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.625rem !important;
  }

  #root div:has(> #pdf-view-mode-selector) > div:first-child,
  #root .border-b.border-slate-100 > div:first-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  #root div:has(> #pdf-view-mode-selector) h4,
  #root .border-b.border-slate-100 h4 {
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 0.9375rem !important;
  }

  #root #pdf-view-mode-selector {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.25rem !important;
  }

  #root #btn-view-mode-list,
  #root #btn-view-mode-text,
  #root #btn-view-mode-boxes {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 0.45rem 0.25rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

/* ---- 24.4.2 Document Row / Card Mobile Styling (List Mode) ---- */
@media (max-width: 768px) {
  #root [id^="pdf-file-row-"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.75rem 0.875rem !important;
    gap: 0 !important;
    border-radius: 0.875rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
  }

  /* ── TOP ROW OF CARD: handle + badges wrap so filename gets full width ── */
  #root [id^="pdf-file-row-"] > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Drag handle */
  #root [id^="pdf-file-row-"] .cursor-grab {
    min-width: 32px !important;
    width: 32px !important;
    min-height: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f1f5f9 !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 0.5rem !important;
    touch-action: none !important;
    cursor: grab !important;
    flex-shrink: 0 !important;
  }
  #root [id^="pdf-file-row-"] .cursor-grab svg {
    width: 1rem !important;
    height: 1rem !important;
    color: #03045e !important;
  }

  /* Number badge (#1, #2 …) — Crisp light slate with bold navy text */
  #root [id^="pdf-file-row-"] .w-7.h-7,
  #root [id^="pdf-file-box-"] .w-7.h-7,
  #root [id^="pdf-file-row-"] div[class*="w-7"][class*="h-7"],
  #root [id^="pdf-file-box-"] div[class*="w-7"][class*="h-7"] {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    background-color: #f1f5f9 !important;
    color: #03045e !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #root [id^="pdf-file-row-"] .w-7.h-7 *,
  #root [id^="pdf-file-box-"] .w-7.h-7 * {
    color: #03045e !important;
  }
  #root [id^="pdf-file-row-"]:hover .w-7.h-7,
  #root [id^="pdf-file-box-"]:hover .w-7.h-7,
  #root [id^="pdf-file-row-"] .w-7.h-7:hover,
  #root [id^="pdf-file-box-"] .w-7.h-7:hover,
  #root [id^="pdf-file-row-"].group:hover .w-7.h-7,
  #root [id^="pdf-file-box-"].group:hover .w-7.h-7,
  #root [id^="pdf-file-row-"]:hover div[class*="w-7"][class*="h-7"],
  #root [id^="pdf-file-box-"]:hover div[class*="w-7"][class*="h-7"] {
    background-color: #03045e !important;
    color: #ffffff !important;
    border-color: #03045e !important;
  }
  #root [id^="pdf-file-row-"]:hover .w-7.h-7 *,
  #root [id^="pdf-file-box-"]:hover .w-7.h-7 *,
  #root [id^="pdf-file-row-"] .w-7.h-7:hover *,
  #root [id^="pdf-file-box-"] .w-7.h-7:hover *,
  #root [id^="pdf-file-row-"].group:hover .w-7.h-7 *,
  #root [id^="pdf-file-box-"].group:hover .w-7.h-7 * {
    color: #ffffff !important;
  }

  /* Colour dot */
  #root [id^="pdf-file-row-"] .w-3.h-3.rounded-full {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    flex-shrink: 0 !important;
  }

  /* File-type icon box */
  #root [id^="pdf-file-row-"] .w-8.h-8.rounded-lg.bg-blue-50 {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── FILENAME + META block: WRAP TO FULL WIDTH (100%) ON MOBILE ── */
  #root [id^="pdf-file-row-"] > div:first-child > div:last-child,
  #root [id^="pdf-file-row-"] > div:first-child > div.min-w-0.flex-1 {
    min-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    overflow: hidden !important;
    margin-top: 0.5rem !important;
    margin-left: 0 !important;
    padding-top: 0.25rem !important;
    box-sizing: border-box !important;
  }

  /* Filename paragraph — full width, natural word wrap, comfortable font */
  #root [id^="pdf-file-row-"] p.truncate,
  #root [id^="pdf-file-row-"] .min-w-0.flex-1 p {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #0f172a !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Pages · size row */
  #root [id^="pdf-file-row-"] .min-w-0.flex-1 > div:nth-child(2) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    margin-top: 0.25rem !important;
    color: #64748b !important;
  }
  #root [id^="pdf-file-row-"] .min-w-0.flex-1 > div:nth-child(2) span,
  #root [id^="pdf-file-row-"] .min-w-0.flex-1 > div:nth-child(2) * {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    color: #64748b !important;
  }

  /* ── OLD NUMBERS + PINPOINT ROW ── */
  #root [id^="pdf-file-row-"] .min-w-0.flex-1 > div.flex.flex-wrap,
  #root [id^="pdf-file-row-"] .border-t.border-slate-100.flex.flex-wrap,
  #root [id^="pdf-file-row-"] div:has(> select):has(> button),
  #root [id^="pdf-file-row-"] div:has(> div > select) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.375rem !important;
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Old Numbers dropdown */
  #root [id^="pdf-file-row-"] select {
    font-size: 0.6875rem !important;
    padding: 0.2rem 0.4rem !important;
    max-width: 120px !important;
    min-width: 0 !important;
    border-radius: 0.5rem !important;
  }

  /* Pinpoint on Page button as a clean pill that never overlaps buttons */
  #root [id^="pdf-file-row-"] button[title*="Preview pages"],
  #root [id^="pdf-file-row-"] button[title*="Pinpoint"],
  #root [id^="pdf-file-row-"] button[title*="position erase box"] {
    margin-left: 0 !important;
    padding: 0.35rem 0.625rem !important;
    border-radius: 0.5rem !important;
    background-color: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    color: #e11d48 !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  #root [id^="pdf-file-row-"] > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 0.625rem !important;
    padding-top: 0.625rem !important;
    border-top: 1px solid #f1f5f9 !important;
    box-sizing: border-box !important;
  }

  #root [id^="btn-move-up-"],
  #root [id^="btn-move-down-"] {
    min-width: 48px !important;
    min-height: 42px !important;
    padding: 0.375rem 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    border-radius: 0.625rem !important;
    border: 1.5px solid #cbd5e1 !important;
    background-color: #f8fafc !important;
    color: #03045e !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }

  #root [id^="btn-move-up-"]:active,
  #root [id^="btn-move-down-"]:active {
    background-color: #e2e8f0 !important;
    transform: scale(0.95) !important;
  }

  #root [id^="btn-move-up-"][disabled],
  #root [id^="btn-move-down-"][disabled] {
    opacity: 0.25 !important;
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  #root [id^="btn-move-up-"] svg,
  #root [id^="btn-move-down-"] svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    stroke-width: 2.2 !important;
    color: #03045e !important;
    stroke: #03045e !important;
    display: inline-block !important;
  }

  #root [id^="btn-move-up-"][disabled] svg,
  #root [id^="btn-move-down-"][disabled] svg {
    color: #94a3b8 !important;
    stroke: #94a3b8 !important;
  }

  #root [id^="btn-rotate-file-"],
  #root [id^="btn-delete-file-"] {
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0.375rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.625rem !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }

  #root [id^="btn-rotate-file-"]:active,
  #root [id^="btn-delete-file-"]:active {
    transform: scale(0.95) !important;
  }

  #root [id^="btn-rotate-file-"] svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
    color: #0284c7 !important;
  }

  #root [id^="btn-delete-file-"] svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
    color: #e11d48 !important;
  }
}

/* ---- 24.5 Document Cards (Small Box mode) ---- */
/* Base grid (already defined at line ~1929): 2 cols, stays at 2 on mobile */
/* Override: force 1 column on very small phones */
@media (max-width: 400px) {
  #root .grid:has(> [id^="pdf-file-box-"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- 24.6 View Mode Tabs (List / Text / Small Box) ---- */
/* Reduce padding on very narrow screens so tabs don't clip */
@media (max-width: 400px) {
  #root #btn-view-mode-list,
  #root #btn-view-mode-text,
  #root #btn-view-mode-boxes {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.6875rem !important;
    gap: 0.25rem !important;
  }
}

/* ---- 24.7 Page Numbering Sliders Grid (3 cols → 1 col on mobile) ---- */
/* The :has() rule at section 14 forces 3 columns — override for mobile */
@media (max-width: 639px) {
  #root .grid:has(> div > input[type="range"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Each slider cell takes full width */
  #root .grid:has(> div > input[type="range"]) > div {
    width: 100% !important;
  }

  /* Slider label: allow wrapping */
  #root .grid:has(> div > input[type="range"]) > div > label {
    white-space: normal !important;
  }
}

/* ---- 24.8 Erase Zone Buttons Grid ---- */
/* .grid.grid-cols-2.sm\:grid-cols-4 — on mobile keep 2 cols (already default),
   but ensure buttons are tall enough to tap comfortably */
@media (max-width: 639px) {
  #root .grid.grid-cols-2.sm\:grid-cols-4 button,
  #root .grid.grid-cols-2.sm\:grid-cols-4 > button {
    min-height: 40px !important;
    padding: 0.5rem !important;
    font-size: 11px !important;
  }
}

/* ---- 24.9 Page Numbering Panel Header ---- */
/* Force flex-row even on mobile — theme resets to column */
/* (Already handled by Section 19 sm:flex-row enforcement — reinforce below 640px) */
@media (max-width: 639px) {
  /* Seq mode cards: stay 2 columns (already enforced), reduce padding */
  #root #seq-mode-continuous,
  #root #seq-mode-per-doc {
    padding: 0.625rem 0.75rem !important;
  }

  /* Numbering Style format cards grid — 1 col on very small screens */
}

@media (max-width: 400px) {
  #root .grid.grid-cols-2:has(> button:not(#seq-mode-continuous):not(#seq-mode-per-doc)) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- 24.10 Result / Download Modal ---- */
/* Ensure the fixed modal fits on small screens without clipping */
@media (max-width: 639px) {
  #root .fixed.inset-0 > div {
    max-height: 94vh !important;
    overflow-y: auto !important;
  }

  /* Stats row (3 cols) → 1 col on mobile */
  #root .fixed .grid.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Action buttons stack vertically */
  #root #btn-download-final-pdf,
  #root #btn-view-new-tab {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* Button container — stack vertically */
  #root .fixed .flex.gap-3:has(#btn-download-final-pdf) {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
}

/* ---- 24.11 Inspector Modal ---- */
@media (max-width: 639px) {
  /* Inspector previous/next nav buttons — guaranteed touch size */
  #root .fixed button[title*="Previous Page"],
  #root .fixed button[title*="Next Page"] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Inspector header: allow title to wrap */
  #root .fixed .bg-\[\#03045e\] h3 {
    font-size: 0.9375rem !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
}

/* ---- 24.12 Placement Diagram (Page Numbering position picker) ---- */
/* On very small phones the 260px diagram could overflow — constrain it */
@media (max-width: 479px) {
  #root .h-\[170px\] {
    max-width: 100% !important;
    width: 100% !important;
  }

  #root .max-w-\[260px\] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ---- 24.13 Dropzone & Browse Button ---- */
@media (max-width: 639px) {
  #root #btn-choose-files,
  #root button#btn-choose-files,
  #root [id*="choose-files"],
  #root [id*="dropzone"] button,
  #root .pdf-dropzone button,
  #root #pdf-dropzone button {
    padding: 0.625rem 1rem !important;
    min-height: 44px !important;
    font-size: 0.875rem !important;
  }
}

/* ---- 24.14 Admin Panel (front-end shortcode wrapper) ---- */
/* Ensure the outer wrapper never causes horizontal scroll */
@media (max-width: 639px) {
  #root {
    padding: 0 !important;
  }
}

/* Universal Document Color Dots — ensure they remain small elegant 8px dots */
#root span.w-2.h-2.rounded-full,
#root [id*="pdf-file"] span.rounded-full[style*="background"] {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  border-radius: 9999px !important;
  flex-shrink: 0 !important;
  border: none !important;
  display: inline-block !important;
  box-shadow: none !important;
}

/* ---- 24.15 Text Mode (Compact List) Mobile Responsiveness ---- */
@media (max-width: 768px) {
  /* Hide the cluttered table header with truncated D... on mobile */
  #root div:has(> [id^="pdf-file-text-row-"]) > div:first-child:not([id^="pdf-file-text-row-"]),
  #root .divide-y > div:first-child:has(span.uppercase) {
    display: none !important;
  }

  /* Outer row container: stacked 2-line layout */
  #root [id^="pdf-file-text-row-"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.75rem 0.875rem !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  /* Line 1 (Top): Drag handle + #Index + Color dot + Full Filename */
  #root [id^="pdf-file-text-row-"] > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #root [id^="pdf-file-text-row-"] .cursor-grab {
    min-width: 28px !important;
    width: 28px !important;
    min-height: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #f1f5f9 !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 0.375rem !important;
    touch-action: none !important;
    cursor: grab !important;
    flex-shrink: 0 !important;
  }
  #root [id^="pdf-file-text-row-"] .cursor-grab svg {
    width: 1rem !important;
    height: 1rem !important;
    color: #03045e !important;
  }

  /* Sequence number badge #1, #2... */
  #root [id^="pdf-file-text-row-"] span.w-5 {
    width: auto !important;
    min-width: 24px !important;
    height: 24px !important;
    background-color: #03045e !important;
    color: #ffffff !important;
    border-radius: 0.375rem !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0.375rem !important;
    flex-shrink: 0 !important;
  }

  /* Filename: fully readable with wrap and proper line height */
  #root [id^="pdf-file-text-row-"] span.truncate,
  #root [id^="pdf-file-text-row-"] > div:first-child span.font-medium {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Line 2 (Bottom): Pages + Size on Left, Action Buttons on Right */
  #root [id^="pdf-file-text-row-"] > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-top: 0.375rem !important;
    border-top: 1px dashed #f1f5f9 !important;
    box-sizing: border-box !important;
    gap: 0.5rem !important;
  }

  /* Pages badge */
  #root [id^="pdf-file-text-row-"] > div:last-child > span.font-medium {
    width: auto !important;
    font-size: 0.72rem !important;
    color: #475569 !important;
    font-weight: 600 !important;
    background-color: #f1f5f9 !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 0.375rem !important;
    white-space: nowrap !important;
  }

  /* File size text */
  #root [id^="pdf-file-text-row-"] > div:last-child > span.font-mono {
    width: auto !important;
    font-size: 0.72rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /* Action buttons group */
  #root [id^="pdf-file-text-row-"] > div:last-child > div.flex {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin-left: auto !important;
  }

  #root [id^="pdf-file-text-row-"] button {
    min-width: 34px !important;
    width: 34px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.375rem !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    color: #03045e !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    touch-action: manipulation !important;
  }

  #root [id^="pdf-file-text-row-"] button:active {
    background-color: #e2e8f0 !important;
    transform: scale(0.95) !important;
  }

  #root [id^="pdf-file-text-row-"] button svg {
    width: 1rem !important;
    height: 1rem !important;
    stroke-width: 2 !important;
  }

  #root [id^="pdf-file-text-row-"] button[title*="Remove"] svg,
  #root [id^="pdf-file-text-row-"] button[title*="remove"] svg {
    color: #e11d48 !important;
  }

  #root [id^="pdf-file-text-row-"] button[disabled] {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
  }
}





/* ============================================================
 * Section 26: Interactive Inspector (Pinpoint on Page) Modal
 * Mobile Responsiveness – Full Layout Fix
 * ============================================================ */

/* --- 26.1 Full-screen modal overlay on mobile --- */
@media (max-width: 640px) {
  #root .fixed.inset-0.z-50 {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  #root .fixed.inset-0.z-50 > div {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
}

/* --- 26.2 Header: stacked layout --- */
@media (max-width: 640px) {
  #root .fixed.inset-0.z-50 > div > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.6rem 0.875rem !important;
    gap: 0.5rem !important;
  }
  #root .fixed.inset-0.z-50 > div > div:first-child > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #root .fixed.inset-0.z-50 > div > div:first-child h3 {
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #root .fixed.inset-0.z-50 > div > div:first-child p {
    font-size: 0.6875rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #root .fixed.inset-0.z-50 > div > div:first-child > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.3rem !important;
    width: 100% !important;
  }
  #root .fixed.inset-0.z-50 > div > div:first-child button {
    touch-action: manipulation !important;
  }
}

/* --- 26.3 Pink preset bar: two-column preset buttons --- */
@media (max-width: 640px) {
  #root .fixed.inset-0.z-50 > div > div.bg-rose-50 {
    padding: 0.5rem 0.875rem !important;
    gap: 0.4rem !important;
    flex-direction: column !important;
  }
  #root .fixed.inset-0.z-50 > div > div.bg-rose-50 > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.2rem !important;
    font-size: 0.75rem !important;
  }
  #root .fixed.inset-0.z-50 > div > div.bg-rose-50 > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  #root .fixed.inset-0.z-50 > div > div.bg-rose-50 button {
    flex: 1 1 calc(50% - 0.375rem) !important;
    min-width: 110px !important;
    padding: 0.35rem 0.4rem !important;
    font-size: 0.75rem !important;
    text-align: center !important;
    touch-action: manipulation !important;
    white-space: nowrap !important;
  }
}

/* --- 26.4 PDF preview: constrain height --- */
@media (max-width: 640px) {
  #root .fixed.inset-0.z-50 > div > div.flex-1 {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 0.625rem !important;
  }
  #root .fixed.inset-0.z-50 > div > div.flex-1 img {
    max-height: 42vh !important;
    width: auto !important;
  }
  #root .fixed.inset-0.z-50 > div > div.flex-1 > button {
    padding: 0.5rem !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
}

/* --- 26.5 Footer: stack all 3 sliders vertically --- */
@media (max-width: 640px) {
  #root .fixed.inset-0.z-50 > div > div.bg-white.border-t {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.625rem 0.875rem !important;
    gap: 0.5rem !important;
  }
  #root .fixed.inset-0.z-50 > div > div.bg-white.border-t > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  #root .fixed.inset-0.z-50 > div > div.bg-white.border-t > div:first-child > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  #root .fixed.inset-0.z-50 > div > div.bg-white.border-t span.font-semibold {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 95px !important;
  }
  #root .fixed.inset-0.z-50 > div > div.bg-white.border-t input[type="range"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 4px !important;
    accent-color: #e11d48 !important;
    cursor: pointer !important;
    touch-action: pan-x !important;
  }
  #root .fixed.inset-0.z-50 > div > div.bg-white.border-t span.font-mono {
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 30px !important;
    text-align: right !important;
  }
  #root .fixed.inset-0.z-50 > div > div.bg-white.border-t > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  #root .fixed.inset-0.z-50 > div > div.bg-white.border-t > div:last-child button {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
    border-radius: 0.5rem !important;
    touch-action: manipulation !important;
    min-height: 38px !important;
  }
}


/* ============================================================
 * Section 27: "Pinpoint on Page (Visual Drag & Click)" Button
 * Mobile Fix – Prevent cramped text wrapping
 * ============================================================ */
@media (max-width: 640px) {
  /* The Pinpoint button: give it proper breathing room */
  #root #btn-open-erase-visual-inspector {
    padding: 0.625rem 1rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    gap: 0.5rem !important;
    white-space: normal !important;
    text-align: center !important;
    min-height: 48px !important;
    align-items: center !important;
    border-radius: 0.75rem !important;
    letter-spacing: 0.01em !important;
  }

  /* Icon: keep it from shrinking */
  #root #btn-open-erase-visual-inspector svg {
    flex-shrink: 0 !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  /* Button text span: allow clean wrap, centered */
  #root #btn-open-erase-visual-inspector span {
    display: block !important;
    text-align: center !important;
    line-height: 1.4 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
}


/* ============================================================
 * Section 28: "Distance from Edge" Slider – Mobile Overflow Fix
 * The w-36 fixed-width range slider was overflowing the container
 * ============================================================ */
@media (max-width: 640px) {
  /* The row containing Distance from Edge label + slider:
     Stack vertically instead of side-by-side */
  #root .border-rose-200\/50.flex-col.sm\:flex-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  /* Slider wrapper div */
  #root .border-rose-200\/50.flex-col.sm\:flex-row > div.flex.items-center {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* The slider input itself: full width, no overflow */
  #root .border-rose-200\/50.flex-col.sm\:flex-row input[type="range"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
  }
}