/* EcoMPDF - High-Performance E-Commerce Shipping Label SaaS Styles */

:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --bg-dark: #070b14;
  --sidebar-bg: #0c101c;
  --card-bg: #131b2e;
  --border-dark: #1e293b;
  --crop-overlay-bg: rgba(7, 11, 20, 0.35);
  --crop-box-border: #3b82f6;
  --handle-bg: #ffffff;
  --handle-border: #3b82f6;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Lock global window so body never scrolls */
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
}

html.dark body,
body.dark {
  background-color: #070b14;
  color: #f1f5f9;
}

/* ============================================================= */
/* INDEPENDENT SIDEBAR & MAIN CONTENT SCROLLING                  */
/* ============================================================= */

/* 1. Independent Left Sidebar */
#app-sidebar {
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important; /* Prevents scroll chaining to window */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

#app-sidebar::-webkit-scrollbar {
  width: 5px;
}
#app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
#app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 9999px;
  transition: background 0.2s ease;
}
#app-sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
}
#app-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.7);
}

/* ============================================================= */
/* MOBILE DRAWER OVERLAY MENU (< 1024px)                         */
/* Matching User Reference (YoyoMedia: Dark Backdrop + Slide-in) */
/* ============================================================= */
@media (max-width: 1023px) {
  #app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 82vw !important;
    max-width: 320px !important;
    min-width: 0 !important;
    z-index: 50 !important;
    transform: translateX(-105%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85) !important;
    border-right: 1px solid rgba(51, 65, 85, 0.8) !important;
    overflow-y: auto !important;
  }

  body.sidebar-open #app-sidebar {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #app-sidebar > div,
  #app-sidebar > nav {
    width: 100% !important;
    min-width: 0 !important;
  }

  #sidebar-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(3, 7, 18, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 45 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }

  body.sidebar-open #sidebar-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #main-content-area {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
    transform: none !important;
  }
}

/* ============================================================= */
/* DESKTOP SIDEBAR IN-FLOW PUSH (>= 1024px)                     */
/* ============================================================= */
@media (min-width: 1024px) {
  #sidebar-backdrop {
    display: none !important;
  }

  #app-sidebar {
    position: relative !important;
    height: 100vh !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    border-right-width: 0px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease-in-out,
                border-width 0.2s ease !important;
  }

  body.sidebar-open #app-sidebar {
    width: 288px !important;
    min-width: 288px !important;
    max-width: 288px !important;
    border-right-width: 1px !important;
    border-right-color: rgba(51, 65, 85, 0.6) !important;
    opacity: 1 !important;
    overflow-y: auto !important;
  }

  #app-sidebar > div,
  #app-sidebar > nav {
    width: 288px !important;
    min-width: 288px !important;
  }

  #main-content-area {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 100% !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

/* 2. Independent Main Workspace */
#main-content-area {
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important; /* Prevents scroll chaining to sidebar or window */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

#main-content-area::-webkit-scrollbar {
  width: 6px;
}
#main-content-area::-webkit-scrollbar-track {
  background: transparent;
}
#main-content-area::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 9999px;
}
#main-content-area::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5);
}

/* Generic Sleek Scrollbars fallback */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.45);
}

/* Custom Scrollbar for Extracted Labels Sidebar */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.45) rgba(15, 23, 42, 0.6);
}
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.45);
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.85);
}

/* Sidebar Nav Item Styling */
.sidebar-nav-item {
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-nav-item.active {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa !important;
  font-weight: 700;
  border-left: 3px solid #3b82f6;
}

/* Platform Pills & Shortcuts */
.platform-pill {
  transition: all 0.15s ease-in-out;
}
.platform-pill.active {
  background-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.platform-shortcut-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.platform-shortcut-btn:hover {
  transform: translateX(3px);
}
.platform-shortcut-btn.active {
  border-color: #3b82f6;
  background: rgba(37, 99, 235, 0.15);
}

/* Bottom Preset Cards */
.preset-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.preset-card:hover {
  transform: translateY(-2px);
  border-color: #3b82f6;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.preset-card.active {
  border-color: #3b82f6 !important;
  background: #15223d !important;
  box-shadow: 0 0 0 1px #3b82f6, 0 8px 24px rgba(37, 99, 235, 0.25);
}

/* Dropzone Hover Effects */
#dropzone {
  transition: all 0.25s ease-in-out;
}
#dropzone.drag-over {
  border-color: #38bdf8;
  background: rgba(14, 25, 48, 0.9);
  transform: scale(1.008);
}

/* Label Preview Cards (Results Grid) */
.label-card {
  background-color: #0e1424;
  border: 1px solid #1e293b;
  border-radius: 1.25rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.label-card:hover {
  transform: translateY(-3px);
  border-color: #3b82f6;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4);
}

/* Modal Canvas & Interactive Crop Box */
.modal-canvas-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
  touch-action: none;
}

.modal-canvas-img {
  display: block;
  pointer-events: none;
  border-radius: 6px;
}

.modal-crop-box {
  position: absolute;
  border: 2.5px solid #3b82f6;
  background: rgba(59, 130, 246, 0.12);
  box-shadow: 0 0 0 9999px var(--crop-overlay-bg);
  cursor: move;
  pointer-events: auto;
  box-sizing: border-box;
}

/* 8 Resize Handles */
.crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #1e293b;
  border: 2px solid #60a5fa;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.handle-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.handle-n  { top: -6px; left: calc(50% - 6px); cursor: ns-resize; }
.handle-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.handle-e  { top: calc(50% - 6px); right: -6px; cursor: ew-resize; }
.handle-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.handle-s  { bottom: -6px; left: calc(50% - 6px); cursor: ns-resize; }
.handle-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.handle-w  { top: calc(50% - 6px); left: -6px; cursor: ew-resize; }

/* Toast Notifications (Completely disabled per user request) */
#toast-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.toast {
  pointer-events: auto;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.45);
  animation: slideInUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.toast-success {
  background: #059669;
  color: #ffffff;
}
.toast-error {
  background: #dc2626;
  color: #ffffff;
}
.toast-info {
  background: #1e293b;
  color: #60a5fa;
  border-color: #3b82f6;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.99); }
  to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn {
  animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* AdSense Slot Containers */
.ad-slot-container {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ad-slot-container:hover {
  border-color: rgba(59, 130, 246, 0.4);
  background-color: rgba(12, 16, 28, 0.95);
}

/* FAQ Accordion Transitions */
.faq-item {
  transition: all 0.2s ease;
}
.faq-item.active {
  border-color: rgba(59, 130, 246, 0.5);
  background-color: rgba(14, 20, 36, 0.9);
}
.faq-chevron {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: #3b82f6;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 0;
}
.faq-item.active .faq-answer {
  max-height: 500px;
  opacity: 1;
}

/* Sticky Bottom Banner Bar */
#sticky-bottom-ad {
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.6);
}

/* ============================================================= */
/* LIGHT / BRIGHT MODE COMPREHENSIVE OVERRIDES                   */
/* ============================================================= */

html.light,
html.light body,
body.light {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light #main-content-area {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Sidebar */
html.light #app-sidebar {
  background-color: #ffffff !important;
  border-right-color: #e2e8f0 !important;
}

html.light #app-sidebar .sticky {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: #e2e8f0 !important;
}

html.light #global-search-input {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 500 !important;
}

html.light #global-search-input::placeholder {
  color: #64748b !important; /* text-slate-500 */
}

/* Sidebar navigation items */
html.light .sidebar-nav-item,
html.light .sidebar-nav-item span {
  color: #1e293b !important; /* text-slate-800 */
}

html.light .sidebar-nav-item:not(.active) {
  color: #1e293b !important;
}

html.light .sidebar-nav-item:not(.active) span {
  color: #1e293b !important;
}

html.light .sidebar-nav-item:not(.active):hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light .sidebar-nav-item:not(.active):hover span {
  color: #0f172a !important;
}

html.light .sidebar-nav-item.active {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}

html.light .sidebar-nav-item.active span {
  color: #1d4ed8 !important;
}

/* Sidebar platform items */
html.light .sidebar-platform-item,
html.light .sidebar-platform-item span {
  color: #1e293b !important; /* text-slate-800 */
}

html.light .sidebar-platform-item:not(.active) {
  color: #1e293b !important;
}

html.light .sidebar-platform-item:not(.active) span {
  color: #1e293b !important;
}

html.light .sidebar-platform-item:not(.active) span[class*="font-mono"] {
  color: #475569 !important; /* text-slate-600 */
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important; /* border-slate-300 */
}

html.light .sidebar-platform-item:not(.active):hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light .sidebar-platform-item:not(.active):hover span {
  color: #0f172a !important;
}

html.light .sidebar-platform-item.active {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}

html.light .sidebar-platform-item.active span {
  color: #1d4ed8 !important;
}

html.light .recent-item {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light .recent-item:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html.light .recent-item div {
  color: #1e293b !important; /* text-slate-800 */
}

/* Top Header */
html.light header {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: #e2e8f0 !important;
}

html.light #theme-toggle-btn,
html.light #top-load-sample-btn {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light #theme-toggle-btn:hover,
html.light #top-load-sample-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Upload Dropzone */
html.light #dropzone {
  background-color: #ffffff !important;
  border-color: #93c5fd !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05) !important;
}

html.light #dropzone:hover {
  background-color: #eff6ff !important;
  border-color: #3b82f6 !important;
}

html.light #load-sample-btn {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

html.light #load-sample-btn:hover {
  background-color: #e2e8f0 !important;
}

/* Platform Preset Cards */
html.light .preset-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

html.light .preset-card.active {
  border-color: #3b82f6 !important;
  background-color: #eff6ff !important;
}

html.light .preset-card:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

html.light .preset-card .text-white {
  color: #0f172a !important;
}

/* Processing Progress Card in Light Mode */
html.light #processing-card {
  background-color: #ffffff !important;
  border-color: #bfdbfe !important;
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.12) !important;
}

html.light #processing-card .text-white,
html.light #processing-card span.text-white {
  color: #0f172a !important;
}

html.light #processing-card p {
  color: #475569 !important;
}

html.light #processing-card .bg-slate-900\/90 {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

/* Feature Showcase Split Rows */
html.light section .grid.items-center.bg-\[\#0c1222\]\/80,
html.light .feature-showcase-row {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

html.light section .grid.items-center.bg-\[\#0c1222\]\/80:hover {
  border-color: #cbd5e1 !important;
}

html.light .bg-\[\#080d1a\],
html.light .bg-\[\#0a0f1d\] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Guides & Blog Cards, How to Use, Workflow, Legal & Container Blocks */
html.light .bg-slate-900\/90,
html.light .bg-slate-900,
html.light .bg-\[\#0e1424\],
html.light .bg-\[\#131b2e\],
html.light .bg-\[\#0b101d\],
html.light .bg-\[\#0c101c\],
html.light .bg-\[\#0c1222\],
html.light .bg-\[\#101626\],
html.light .bg-\[\#101728\],
html.light .bg-\[\#11192e\],
html.light .bg-\[\#162036\],
html.light .bg-\[\#162238\],
html.light .bg-\[\#10192e\],
html.light .bg-\[\#0d1424\],
html.light .bg-\[\#0e2238\],
html.light .bg-\[\#1c1826\],
html.light article.bg-\[\#131b2e\],
html.light article.bg-\[\#0e1424\],
html.light div[data-guide-panel],
html.light #tab-view-how-to-use > div,
html.light #tab-view-privacy > div,
html.light #tab-view-terms > div,
html.light #tab-view-contact > div,
html.light #tab-view-support > div,
html.light #tab-view-templates > div,
html.light #tab-view-settings > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
}

/* Subcards & items within containers (steps, specs, cheatsheets) */
html.light .bg-\[\#070b14\],
html.light .bg-\[\#080d1a\],
html.light .bg-\[\#090d16\],
html.light .bg-\[\#090d18\],
html.light .bg-\[\#0a0f1d\],
html.light .bg-slate-900\/60,
html.light .bg-slate-900\/80,
html.light .bg-slate-950\/60,
html.light .bg-slate-950\/80,
html.light .bg-slate-800\/60,
html.light .bg-slate-800\/80,
html.light div[data-guide-panel] .bg-slate-900\/60,
html.light div[data-guide-panel] .bg-slate-50,
html.light #tab-view-how-to-use .bg-slate-900\/80,
html.light #tab-view-how-to-use .bg-slate-50 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* How to Use Hero Banner & Cheatsheet Gradients */
html.light #tab-view-how-to-use .bg-gradient-to-r,
html.light .bg-gradient-to-r.from-blue-900\/30,
html.light .bg-gradient-to-br.from-\[\#10192e\] {
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 50%, #f8fafc 100%) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
}

/* Platform guide cards */
html.light div[data-guide-panel] {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

/* "Apply to All" instruction boxes */
html.light div[data-guide-panel="custom"] .rounded-xl.border {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}

/* Ad Slots */
html.light .ad-slot-container,
html.light .bg-slate-900\/60 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html.light .ad-slot-container:hover {
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

/* FAQ Accordion */
html.light .faq-item {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light .faq-item.active {
  background-color: #f8fafc !important;
  border-color: #3b82f6 !important;
}

html.light .faq-answer {
  color: #334155 !important;
}

/* Large Preview Card & Results Section */
html.light #large-preview-card,
html.light #results-section > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* File Names & Subtitles - Dark slate (text-slate-800 / text-slate-700) */
html.light #results-filename,
html.light #selected-file-name,
html.light #processing-filename,
html.light #large-preview-title,
html.light .file-name {
  color: #0f172a !important; /* text-slate-900 / dark slate */
  font-weight: 700 !important;
}

html.light #results-subtitle,
html.light #selected-file-info,
html.light #large-preview-subtitle {
  color: #334155 !important; /* text-slate-700 */
}

/* Multi-Label Selector & Thumbnails */
html.light #labels-grid > div,
html.light .label-thumbnail-card {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important; /* border-slate-300 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.light .label-thumbnail-card:hover {
  border-color: #94a3b8 !important;
  background-color: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

html.light .label-thumbnail-card.border-blue-500,
html.light .label-thumbnail-card[class*="border-blue-500"] {
  background-color: #eff6ff !important;
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.15) !important;
}

/* Thumbnail card title: bold dark slate (text-slate-800 / text-slate-900) */
html.light .label-thumbnail-card .text-white,
html.light .label-thumbnail-card span.text-white {
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
}

/* Dimension badges in thumbnail cards: replace faded light gray with dark slate text-slate-800 */
html.light .label-thumbnail-card .font-mono,
html.light .label-thumbnail-card span[class*="font-mono"],
html.light .label-thumbnail-card .text-slate-400 {
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
}

html.light .label-thumbnail-card .bg-\[\#070b14\] {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

html.light .label-thumbnail-card .border-t {
  border-top-color: #e2e8f0 !important;
}

html.light .label-thumbnail-card .adjust-crop-btn,
html.light .adjust-crop-btn {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important; /* border-slate-300 */
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
}

html.light .label-thumbnail-card .adjust-crop-btn span,
html.light .adjust-crop-btn span {
  color: #1e293b !important;
}

html.light .label-thumbnail-card .adjust-crop-btn:hover,
html.light .adjust-crop-btn:hover {
  background-color: #e2e8f0 !important; /* hover:bg-slate-200 */
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

html.light .label-thumbnail-card .adjust-crop-btn:hover span,
html.light .adjust-crop-btn:hover span {
  color: #0f172a !important;
}

html.light #large-preview-img {
  background-color: #ffffff !important;
}

/* ============================================================= */
/* DOWNLOAD ACTION BUTTONS (BELOW MAIN PREVIEW)                  */
/* ============================================================= */
/* Solid white / light slate, crisp border-slate-300, bold dark slate text-slate-800/900 */
html.light #large-download-png,
html.light #large-download-pdf,
html.light a.download-action-btn,
html.light .download-action-btn {
  background-color: #ffffff !important; /* bg-white */
  border: 1px solid #cbd5e1 !important; /* border border-slate-300 */
  color: #0f172a !important; /* bold dark slate text-slate-900 / text-slate-800 */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}

html.light #large-download-png span,
html.light #large-download-pdf span,
html.light a.download-action-btn span,
html.light .download-action-btn span {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html.light #large-download-png:hover,
html.light #large-download-pdf:hover,
html.light a.download-action-btn:hover,
html.light .download-action-btn:hover {
  background-color: #e2e8f0 !important; /* hover:bg-slate-200 */
  border-color: #94a3b8 !important;
  color: #020617 !important;
}

html.light #large-download-png:hover span,
html.light #large-download-pdf:hover span,
html.light a.download-action-btn:hover span,
html.light .download-action-btn:hover span {
  color: #020617 !important;
}

/* Floating Prev/Next page navigation buttons on large preview */
html.light #prev-label-btn,
html.light #next-label-btn {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important; /* border-slate-300 */
  color: #1e293b !important; /* text-slate-800 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

html.light #prev-label-btn:hover:not(:disabled),
html.light #next-label-btn:hover:not(:disabled) {
  background-color: #e2e8f0 !important; /* hover:bg-slate-200 */
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

html.light #prev-label-btn:disabled,
html.light #next-label-btn:disabled {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  opacity: 0.45 !important;
}

/* Clear Light Borders (border-slate-300 = #cbd5e1) for Badges & Status Pills */
html.light .badge,
html.light [id*="badge"],
html.light span[class*="rounded-full"][class*="border"],
html.light span[class*="rounded-lg"][class*="border"],
html.light span[class*="rounded"][class*="border"],
html.light span[class*="font-mono"][class*="rounded"] {
  border-color: #cbd5e1 !important; /* border-slate-300 */
}

html.light #results-count-badge {
  background-color: #ecfdf5 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
}

html.light #large-preview-dims {
  background-color: #eff6ff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
}

html.light #large-preview-badge {
  background-color: #f0fdf4 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
}

html.light #selector-badge-count {
  background-color: #eff6ff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
}

html.light #history-badge-count {
  background-color: #eff6ff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
}

html.light #modal-coords-badge {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
}

/* Marketplace dimension badges in light mode with clear border & dark slate text */
html.light .font-mono[class*="bg-blue-900"],
html.light span[class*="bg-blue-900"],
html.light .font-mono[class*="bg-emerald-900"],
html.light span[class*="bg-emerald-900"],
html.light span[class*="bg-emerald-950"],
html.light .font-mono[class*="bg-pink-900"],
html.light span[class*="bg-pink-900"],
html.light .font-mono[class*="bg-amber-900"],
html.light span[class*="bg-amber-900"],
html.light span[class*="bg-slate-800"],
html.light span[class*="bg-slate-900"] {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important; /* border-slate-300 */
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
}

html.light .preset-card span[class*="font-mono"],
html.light .preset-card .font-mono {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important; /* border-slate-300 */
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
}

html.light .preset-card p,
html.light .preset-card .text-slate-400 {
  color: #334155 !important; /* text-slate-700 */
}

/* Secondary Action Buttons & Controls in Light Mode */
html.light button.border-slate-700,
html.light button.border-slate-800,
html.light a.border-slate-700,
html.light #upload-another-btn,
html.light #modal-cancel-btn,
html.light #modal-reset-btn,
html.light #modal-zoom-out,
html.light #modal-zoom-in,
html.light #modal-zoom-fit,
html.light #modal-zoom-reset,
html.light #modal-reset-crop,
html.light #large-preview-adjust-btn,
html.light #load-sample-btn,
html.light #top-load-sample-btn,
html.light #theme-toggle-btn {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important; /* border-slate-300 */
  color: #1e293b !important; /* text-slate-800 */
  font-weight: 700 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

html.light button.border-slate-700 span,
html.light button.border-slate-800 span,
html.light #upload-another-btn span,
html.light #modal-cancel-btn span,
html.light #modal-reset-btn span,
html.light #modal-zoom-out span,
html.light #modal-zoom-in span,
html.light #modal-zoom-fit span,
html.light #modal-zoom-reset span,
html.light #modal-reset-crop span,
html.light #load-sample-btn span,
html.light #top-load-sample-btn span,
html.light #theme-toggle-btn span {
  color: #1e293b !important; /* text-slate-800 */
}

html.light button.border-slate-700:hover,
html.light button.border-slate-800:hover,
html.light a.border-slate-700:hover,
html.light #upload-another-btn:hover,
html.light #modal-cancel-btn:hover,
html.light #modal-reset-btn:hover,
html.light #modal-zoom-out:hover,
html.light #modal-zoom-in:hover,
html.light #modal-zoom-reset:hover,
html.light #modal-reset-crop:hover,
html.light #load-sample-btn:hover,
html.light #top-load-sample-btn:hover,
html.light #theme-toggle-btn:hover {
  background-color: #e2e8f0 !important; /* hover:bg-slate-200 */
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

html.light button.border-slate-700:hover span,
html.light button.border-slate-800:hover span,
html.light #upload-another-btn:hover span,
html.light #modal-cancel-btn:hover span,
html.light #load-sample-btn:hover span,
html.light #top-load-sample-btn:hover span,
html.light #theme-toggle-btn:hover span {
  color: #0f172a !important;
}

/* Modal Apply Single Button */
html.light #modal-apply-single-btn {
  background-color: #ffffff !important;
  border: 2px solid #3b82f6 !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}
html.light #modal-apply-single-btn span {
  color: #1d4ed8 !important;
}
html.light #modal-apply-single-btn:hover {
  background-color: #eff6ff !important;
}

/* Disabled Action Buttons */
html.light button:disabled,
html.light button[disabled],
html.light button.disabled,
html.light a.disabled {
  opacity: 0.65 !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Modals */
html.light #manual-crop-modal > div,
html.light #auth-modal > div,
html.light #legal-modal > div,
html.light #blog-reader-modal > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2) !important;
}

html.light #manual-crop-modal .bg-\[\#131b2e\],
html.light #auth-modal .bg-\[\#131b2e\],
html.light #legal-modal .bg-\[\#131b2e\],
html.light #blog-reader-modal .bg-\[\#131b2e\],
html.light #manual-crop-modal .bg-\[\#090d16\] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light input:not([type="checkbox"]),
html.light textarea,
html.light select {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light input:not([type="checkbox"]):focus,
html.light textarea:focus,
html.light select:focus {
  border-color: #3b82f6 !important;
  outline: none;
}

/* Sticky Bottom Ad */
html.light #sticky-bottom-ad {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-top-color: #e2e8f0 !important;
  box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.08) !important;
}

html.light #sticky-bottom-ad .text-slate-400 {
  color: #334155 !important;
}

/* Footer */
html.light footer {
  background-color: #f1f5f9 !important;
  border-top-color: #e2e8f0 !important;
}

html.light footer .text-white {
  color: #0f172a !important;
}

html.light footer .text-slate-400 {
  color: #475569 !important;
}

html.light footer .text-slate-500 {
  color: #64748b !important;
}

html.light footer .border-slate-800\/60,
html.light footer .border-slate-800\/80 {
  border-color: #e2e8f0 !important;
}

/* Typography & Headings Contrast Overrides */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6,
html.light .text-white,
html.light strong {
  color: #0f172a !important; /* text-slate-900 */
}

html.light .text-slate-100,
html.light .text-slate-200 {
  color: #1e293b !important; /* text-slate-800 */
}

html.light .text-slate-300 {
  color: #334155 !important; /* text-slate-700 */
}

html.light .text-slate-400 {
  color: #334155 !important; /* text-slate-700 - high contrast, no washed out gray */
}

html.light .text-slate-500 {
  color: #475569 !important; /* text-slate-600 */
}

html.light .border-slate-800,
html.light .border-slate-800\/40,
html.light .border-slate-800\/60,
html.light .border-slate-800\/70,
html.light .border-slate-800\/80,
html.light .border-slate-800\/90,
html.light .border-slate-700,
html.light .border-slate-700\/60,
html.light .border-slate-700\/70,
html.light .border-slate-700\/80 {
  border-color: #e2e8f0 !important;
}

/* Primary Action Buttons: Maintain crisp white text on vivid colored backgrounds */
html.light button.bg-blue-600,
html.light button.bg-emerald-600,
html.light button.bg-gradient-to-r,
html.light a.bg-blue-600,
html.light a.bg-emerald-600,
html.light button.bg-blue-600 *,
html.light button.bg-emerald-600 *,
html.light button.bg-gradient-to-r *,
html.light #modal-apply-all-btn,
html.light #modal-apply-all-btn *,
html.light #download-zip-btn,
html.light #download-zip-btn *,
html.light #download-combined-pdf-btn,
html.light #download-combined-pdf-btn *,
html.light .active-pill,
html.light .bg-blue-500.text-white {
  color: #ffffff !important;
}

/* Guide panel platform action buttons in Light Mode */
html.light div[data-guide-panel] button {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 700 !important;
}
html.light div[data-guide-panel] button:hover {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

/* Dropzone Focus Pulse Animation */
@keyframes dropzoneFocusPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    border-color: #3b82f6;
  }
  50% {
    transform: scale(1.015);
    box-shadow: 0 0 30px 10px rgba(59, 130, 246, 0.55);
    border-color: #60a5fa;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    border-color: rgba(59, 130, 246, 0.4);
  }
}

.dropzone-focus-pulse {
  animation: dropzoneFocusPulse 1.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================================= */
/* EDIT YOUR PDF MODULE STYLES                                   */
/* ============================================================= */
.editor-tool-btn {
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.editor-tool-btn:hover:not(.active) {
  transform: translateY(-1px);
}

.editor-tool-btn.active {
  box-shadow: 0 4px 14px -2px rgba(139, 92, 246, 0.35);
}

#editor-stage-wrapper {
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.editor-item {
  transition: outline 0.1s ease;
}

.editor-item:hover {
  outline: 1px dashed rgba(139, 92, 246, 0.6);
}

.editor-item.ring-2 {
  outline: 2px solid #8b5cf6 !important;
}

.editor-text-item {
  user-select: none;
}

.editor-text-drag-bar {
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.editor-text-drag-bar:active {
  cursor: grabbing;
}

.editor-text-content {
  min-height: 1.2em;
  caret-color: #8b5cf6;
}

.editor-text-content:focus {
  outline: none;
}

.editor-resize-handle {
  opacity: 0.8;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.editor-resize-handle:hover {
  opacity: 1;
  transform: scale(1.3);
}

/* Light mode styles for PDF Editor */
html.light #tab-view-edit-pdf #pdf-editor-welcome > div,
html.light #tab-view-edit-pdf #pdf-editor-workspace > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light #editor-viewport-container {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html.light .editor-tool-btn.active {
  background-color: #ede9fe !important;
  border-color: #8b5cf6 !important;
  color: #6d28d9 !important;
}

html.light .editor-tool-btn:not(.active) {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

html.light .editor-tool-btn:not(.active):hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light #tool-options-panel {
  border-top-color: #e2e8f0 !important;
}

html.light #editor-export-pdf-btn,
html.light #editor-export-pdf-btn * {
  color: #ffffff !important;
}

/* Extracted PDF Text Layer Interactive Hitboxes (Selectable Spans) */
#editor-extracted-text-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.extracted-text-line {
  position: absolute;
  cursor: pointer;
  pointer-events: auto !important;
  border: 1px dashed rgba(59, 130, 246, 0.35);
  border-radius: 2px;
  background-color: rgba(59, 130, 246, 0.04);
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  user-select: text;
  box-sizing: border-box;
}

.extracted-text-line:hover,
.extracted-text-line.is-highlighted {
  background-color: rgba(59, 130, 246, 0.2) !important;
  border: 1.5px solid #2563eb !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.35);
  cursor: text !important;
}

/* Floating Mini-Toolbar for Extracted Text Lines */
#extracted-text-mini-toolbar {
  z-index: 50 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

/* Custom Text Items - Frameless & Natural Typography (Zero Border Boxes, Exact In-Place Alignment) */
.editor-text-item {
  position: absolute;
  border: 1px solid transparent;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.2;
  box-sizing: border-box;
  cursor: text !important;
}

.editor-text-item .editor-text-content {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  caret-color: #2563eb;
  padding: 0 !important;
  margin: 0 !important;
  line-height: inherit;
  display: block;
  min-width: 10px;
}

/* Dedicated Move Button / Drag Bar Handle (Only dragging this moves the text!) */
.editor-text-drag-bar {
  user-select: none;
  touch-action: none;
  cursor: grab !important;
  transition: transform 0.1s ease, background-color 0.1s ease;
}

.editor-text-drag-bar:active {
  cursor: grabbing !important;
  transform: scale(0.96);
}

/* Show Move button when text item is hovered, selected, or being edited */
.editor-text-item:hover .editor-text-drag-bar,
.editor-text-item.is-selected .editor-text-drag-bar,
.editor-text-item.is-editing .editor-text-drag-bar {
  display: flex !important;
}

/* While typing - strictly zero border, zero outline, zero background */
.editor-text-item.is-editing,
.editor-text-item.is-editing .editor-text-content {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 60 !important;
}

/* Faint dashed line only when user hovers or actively selects with the Select tool */
.editor-text-item.can-select:hover {
  border: 1px dashed rgba(148, 163, 184, 0.45) !important;
}

.editor-text-item.is-selected {
  border: 1px dashed rgba(59, 130, 246, 0.6) !important;
}

/* Whiteout Mask Elements - Clean Invisible Patch */
.editor-whiteout-item {
  border: none !important;
  box-shadow: none !important;
}

.editor-whiteout-item.is-selected,
.editor-whiteout-item:hover {
  border: 1px dashed rgba(148, 163, 184, 0.4) !important;
}

.rich-color-dot.active {
  box-shadow: 0 0 0 2px #8b5cf6, 0 0 0 4px rgba(139, 92, 246, 0.4);
}

/* Light mode overrides for rich toolbar */
html.light #editor-rich-toolbar {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light #editor-rich-toolbar select {
  color: #0f172a !important;
}

html.light #editor-rich-toolbar button:not(.rich-color-dot):not(#btn-action-add-text) {
  color: #1e293b !important;
}

html.light #editor-rich-toolbar .bg-violet-600 {
  color: #ffffff !important;
}

/* ============================================================= */
/* Infinite Horizontal Marquee Animation (Jumpshare Style)        */
/* ============================================================= */
@keyframes marqueeLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex !important;
  width: max-content !important;
  animation: marqueeLeft 26s linear infinite !important;
}

.animate-marquee,
.animate-marquee:hover,
.animate-marquee:active,
.animate-marquee:focus {
  animation-play-state: running !important;
}

.marquee-mask {
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* Light mode specific styling for Marquee Cards */
html.light .marquee-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

html.light .marquee-card span {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.light .marquee-card:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.12) !important;
}

/* Dark mode specific styling for Marquee Cards */
html.dark .marquee-card {
  background-color: #131b2e !important;
  border-color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

html.dark .marquee-card span {
  color: #f8fafc !important;
  font-weight: 800 !important;
}

html.dark .marquee-card:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25) !important;
}

/* Dropzone text contrast fixes for Light Mode */
html.light #dropzone h2 {
  color: #0f172a !important;
}
html.light #dropzone p {
  color: #475569 !important;
}