/* ==========================================================================
   Craisto — PDF Tool Pages: Permanent Light Theme
   Scope: ONLY activates within .tool-page elements
   All selectors are scoped to .tool-page to avoid affecting:
     - Homepage (hero, popular tools, search)
     - Dashboard (dash-layout, dash-*, stats, tables)
     - Auth pages (login, signup, forgot password)
     - Profile, Settings, My Files
     - Navbar, Footer, Mega menu
   ========================================================================== */

/* ==========================================================================
   1. TOOL PAGE — CSS Custom Properties Override
   Scoped to .tool-page only — does NOT affect :root
   ========================================================================== */
.tool-page {
  /* Background palette — Clean light SaaS */
  --bg0: #F8FAFC;
  --bg1: #F1F5F9;
  --bg2: #F8FAFC;
  --bg3: #E5E7EB;
  --white: #FFFFFF;

  /* Text colors */
  --text: #111827;
  --muted: #6B7280;
  --line: #E5E7EB;

  /* Accent colors — Purple gradient (Adobe/Smallpdf inspired) */
  --accent: #7C3AED;
  --accent2: #6D28D9;
  --accent-soft: #F5F3FF;

  /* Status colors */
  --success: #059669;
  --danger: #DC2626;

  /* Shadows & effects — Enterprise soft */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.05);
  --shadow-3d: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(229, 231, 235, 0.5);
}

/* ==========================================================================
   2. TOOL PAGE — Background
   ========================================================================== */
.tool-page {
  background: #F8FAFC;
}

/* ==========================================================================
   3. TOOL HERO
   ========================================================================== */
.tool-page .tool-hero h1 {
  color: #111827;
}

.tool-page .tool-hero p {
  color: #6B7280;
}

/* ==========================================================================
   4. UPLOAD PANEL — White workspace
   ========================================================================== */
.tool-page .upload-panel {
  background: #FFFFFF;
  border-color: #E5E7EB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   5. UPLOAD CARD — White with purple dashed border
   ========================================================================== */
.tool-page .upload-card {
  background: #FFFFFF;
  border: 2px dashed #C4B5FD;
}

.tool-page .upload-card.dragover {
  border-color: #6D28D9;
  background: #F5F3FF;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

.tool-page .upload-card h2 {
  color: #111827;
}

.tool-page .upload-card p {
  color: #6B7280;
}

.tool-page .upload-meta {
  color: #6B7280;
}

.tool-page .upload-meta span::before {
  color: #7C3AED;
}

/* ==========================================================================
   6. FILE LIST — White cards
   ========================================================================== */
.tool-page .file-card-premium {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

.tool-page .file-card-premium:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tool-page .file-icon-mini {
  background: #F1F5F9;
}

.tool-page .file-info strong {
  color: #111827;
}

.tool-page .file-info span {
  color: #6B7280;
}

/* ==========================================================================
   7. FILE LIST (fallback) — White rows
   ========================================================================== */
.tool-page .file-row {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

.tool-page .file-meta strong {
  color: #111827;
}

.tool-page .file-meta span {
  color: #6B7280;
}

/* ==========================================================================
   8. DROPZONE (QR/PW fallback) — White
   ========================================================================== */
.tool-page .dropzone {
  background: #FFFFFF;
  border-color: #C4B5FD;
}

/* ==========================================================================
   9. FORM FIELDS — White inputs
   ========================================================================== */
.tool-page .field label {
  color: #6B7280;
}

.tool-page .field input,
.tool-page .field select,
.tool-page .field textarea {
  background: #FFFFFF;
  border-color: #E5E7EB;
  color: #111827;
}

.tool-page .field input:focus,
.tool-page .field select:focus,
.tool-page .field textarea:focus {
  border-color: #A78BFA;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

/* ==========================================================================
   10. BUTTONS — Purple gradient primary
   ========================================================================== */
.tool-page .btn-primary {
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #fff;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.25);
}

.tool-page .btn-primary:hover {
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.3);
}

.tool-page .btn-secondary {
  background: #FFFFFF;
  border-color: #E5E7EB;
  color: #111827;
}

.tool-page .btn-secondary:hover {
  border-color: #C4B5FD;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tool-page .btn-ghost:hover {
  background: #F5F3FF;
  color: #6D28D9;
}

/* ==========================================================================
   11. PROCESSING STAGE — Purple accent
   ========================================================================== */
.tool-page .floating-doc {
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  box-shadow: 0 8px 16px rgba(124, 58, 237, 0.3);
}

.tool-page .stage-processing h2 {
  color: #111827;
}

.tool-page .proc-status {
  color: #6D28D9;
}

.tool-page .proc-percent {
  color: #6B7280;
}

/* ==========================================================================
   12. SUCCESS STAGE
   ========================================================================== */
.tool-page .stage-success h2 {
  color: #059669;
}

.tool-page .stage-success > p {
  color: #6B7280;
}

/* ==========================================================================
   13. RESULT STATS — White cards
   ========================================================================== */
.tool-page .stat-item {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

.tool-page .stat-item span {
  color: #6B7280;
}

.tool-page .stat-item strong {
  color: #111827;
}

.tool-page .stat-item.highlight strong {
  color: #059669;
}

/* ==========================================================================
   14. PROGRESS BAR — Purple gradient
   ========================================================================== */
.tool-page .progress {
  background: #E2E8F0;
}

.tool-page .progress > i {
  background: linear-gradient(90deg, #C4B5FD, #7C3AED, #C4B5FD);
  background-size: 200% 100%;
}

/* ==========================================================================
   15. RESULT BOX — Light background
   ========================================================================== */
.tool-page .result-box {
  background: #F8FAFC;
  border-color: #E5E7EB;
}

/* ==========================================================================
   16. FAQ — White cards
   ========================================================================== */
.tool-page .faq details {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

.tool-page .faq details:hover {
  border-color: #C4B5FD;
}

.tool-page .faq details[open] {
  border-color: #7C3AED;
}

.tool-page .faq details p {
  color: #6B7280;
}

/* ==========================================================================
   17. RELATED TOOLS — White cards
   ========================================================================== */
.tool-page .related a {
  background: #FFFFFF;
  border-color: #E5E7EB;
  color: #111827;
}

.tool-page .related a:hover {
  border-color: #C4B5FD;
  background: #F5F3FF;
}

/* ==========================================================================
   18. PREVIEW BOX (QR/PW) — White
   ========================================================================== */
.tool-page .preview-box {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

/* ==========================================================================
   19. PASSWORD OUTPUT — White
   ========================================================================== */
.tool-page .pw-out {
  background: #FFFFFF;
  border-color: #E5E7EB;
  color: #111827;
}

/* ==========================================================================
   20. STRENGTH METER
   ========================================================================== */
.tool-page .strength {
  background: #E2E8F0;
}

/* ==========================================================================
   21. CHECKBOX — Purple accent
   ========================================================================== */
.tool-page .check-row input[type="checkbox"] {
  accent-color: #7C3AED;
}

/* ==========================================================================
   22. STATUS TOAST — Purple info
   ========================================================================== */
.tool-page .status.info {
  background: #F5F3FF;
  color: #6D28D9;
  border-color: #C4B5FD;
}

.tool-page .status.success {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}

.tool-page .status.error {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #FECACA;
}

/* ==========================================================================
   23. TOOL PAGE — Dark mode overrides (scoped)
   Prevents dark theme from affecting tool pages
   ========================================================================== */
html[data-theme="dark"] .tool-page {
  /* Force light theme variables within tool pages */
  --bg0: #F8FAFC;
  --bg1: #F1F5F9;
  --bg2: #F8FAFC;
  --bg3: #E5E7EB;
  --white: #FFFFFF;
  --text: #111827;
  --muted: #6B7280;
  --line: #E5E7EB;
  --accent: #7C3AED;
  --accent2: #6D28D9;
  --accent-soft: #F5F3FF;
  --success: #059669;
  --danger: #DC2626;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.05);
  --shadow-3d: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(229, 231, 235, 0.5);
}

/* Override dark-mode-specific selectors that affect tool page children */
html[data-theme="dark"] .tool-page .upload-panel {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

html[data-theme="dark"] .tool-page .upload-card {
  background: #FFFFFF;
  border-color: #C4B5FD;
}

html[data-theme="dark"] .tool-page .upload-card.dragover {
  background: #F5F3FF;
  border-color: #6D28D9;
}

html[data-theme="dark"] .tool-page .file-card-premium {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

html[data-theme="dark"] .tool-page .file-row {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

html[data-theme="dark"] .tool-page .dropzone {
  background: #FFFFFF;
  border-color: #C4B5FD;
}

html[data-theme="dark"] .tool-page .field input,
html[data-theme="dark"] .tool-page .field select,
html[data-theme="dark"] .tool-page .field textarea {
  background: #FFFFFF;
  border-color: #E5E7EB;
  color: #111827;
}

html[data-theme="dark"] .tool-page .btn-secondary {
  background: #FFFFFF;
  border-color: #E5E7EB;
  color: #111827;
}

html[data-theme="dark"] .tool-page .faq details {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

html[data-theme="dark"] .tool-page .related a {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

html[data-theme="dark"] .tool-page .preview-box {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

html[data-theme="dark"] .tool-page .pw-out {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

html[data-theme="dark"] .tool-page .stat-item {
  background: #FFFFFF;
  border-color: #E5E7EB;
}

html[data-theme="dark"] .tool-page .result-box {
  background: #F8FAFC;
  border-color: #E5E7EB;
}

html[data-theme="dark"] .tool-page .progress {
  background: #E2E8F0;
}

html[data-theme="dark"] .tool-page .strength {
  background: #E2E8F0;
}

html[data-theme="dark"] .tool-page .status.info {
  background: #F5F3FF;
  color: #6D28D9;
  border-color: #C4B5FD;
}

html[data-theme="dark"] .tool-page .status.success {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}

html[data-theme="dark"] .tool-page .status.error {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #FECACA;
}

html[data-theme="dark"] .tool-page .file-icon-mini {
  background: #F1F5F9;
}

html[data-theme="dark"] .tool-page .btn-ghost:hover {
  background: #F5F3FF;
  color: #6D28D9;
}

/* ==========================================================================
   24. RESPONSIVE — Scoped to tool pages
   ========================================================================== */
@media (max-width: 640px) {
  .tool-page .upload-panel {
    padding: 16px;
  }

  .tool-page .upload-card {
    padding: 32px 16px;
  }

  .tool-page .upload-card h2 {
    font-size: 1.4rem;
  }

  .tool-page .upload-card p {
    font-size: 1rem;
  }

  .tool-page .upload-meta {
    flex-direction: column;
    gap: 8px;
  }
}