/* ==========================================================================
   AppShiner - Luxury Deep Obsidian & Slate Design System
   ========================================================================== */

:root {
  --bg-primary: #080C14;
  --bg-secondary: #0D1525;
  --bg-card: rgba(15, 23, 42, 0.72);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(99, 102, 241, 0.4);
  
  --accent-cyan: #38BDF8;
  --accent-indigo: #6366F1;
  --accent-emerald: #10B981;
  --accent-amber: #F59E0B;
  --accent-rose: #F43F5E;
}

body {
  background: radial-gradient(circle at 50% 0%, #111C33 0%, #080C14 60%, #05080E 100%);
  color: #E2E8F0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #080C14;
}
::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Ambient Deep Lighting */
.ambient-glow-1 {
  position: absolute;
  width: 750px;
  height: 750px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.16) 0%, rgba(56, 189, 248, 0.06) 45%, transparent 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.ambient-glow-2 {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.10) 0%, rgba(99, 102, 241, 0.05) 50%, transparent 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

/* Glassmorphism Cards */
.glass-panel {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
}

.glass-panel-hover {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-panel-hover:hover {
  border-color: rgba(99, 102, 241, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.2);
  background: rgba(22, 33, 62, 0.75);
}

/* Radiant Gradient Text */
.text-shine {
  background: linear-gradient(135deg, #FFFFFF 20%, #BAE6FD 50%, #818CF8 85%, #6EE7B7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-cyan {
  background: linear-gradient(135deg, #38BDF8 0%, #34D399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glowing Button */
.btn-shine-primary {
  position: relative;
  background: linear-gradient(135deg, #4F46E5 0%, #0284C7 100%);
  transition: all 0.3s ease;
  overflow: hidden;
}

.btn-shine-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.65s ease;
}

.btn-shine-primary:hover::after {
  transform: translateX(100%);
}

.btn-shine-primary:hover {
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.5);
  transform: translateY(-1px);
}

/* Pulse Animation for Scanning */
@keyframes scanningPulse {
  0% { transform: translateY(0%); opacity: 0.9; }
  50% { transform: translateY(100%); opacity: 0.2; }
  100% { transform: translateY(0%); opacity: 0.9; }
}

.scan-beam {
  animation: scanningPulse 2s ease-in-out infinite;
}

/* Animated Circular Score Dial */
.score-circle {
  transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Custom Modal Backdrop */
.modal-backdrop {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(4, 7, 13, 0.85);
}

/* Module Badges */
.badge-auto {
  background: rgba(56, 189, 248, 0.12);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.badge-semi {
  background: rgba(129, 140, 248, 0.12);
  color: #A5B4FC;
  border: 1px solid rgba(129, 140, 248, 0.3);
}

.badge-expert {
  background: rgba(245, 158, 11, 0.12);
  color: #FCD34D;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ==========================================================================
   Print & PDF Generation Optimizations
   Enables multi-page reports with clean document flow and zero viewport clipping
   ========================================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 14mm 16mm 14mm 16mm;
  }

  html, body {
    background: #ffffff !important;
    color: #0f172a !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    font-size: 10.5pt !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide background elements and UI chrome */
  header, footer, nav, button, .ambient-glow-1, .ambient-glow-2,
  #newAuditModal, #scanningModal, main {
    display: none !important;
  }

  /* Unbind modal from screen overlay to natural multi-page document flow */
  #fullReportModal,
  #reportModal {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  #fullReportModal > div,
  #reportModal > div {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Inner scroll containers expand fully */
  #fullReportModal .overflow-y-auto,
  #reportModal .overflow-y-auto {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
  }

  /* Hide action buttons in printed report */
  #fullReportModal button,
  #closeFullReportModalBtn,
  #reportModal button,
  #closeReportModalBtn,
  #repLeadEmail,
  #repSendEmailBtn {
    display: none !important;
  }

  /* Header of report modal */
  #fullReportModal .px-6.py-4,
  #reportModal .px-6.py-4 {
    border-bottom: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
  }

  /* Section cards styling for crisp paper output */
  #fullReportModal .bg-gradient-to-r,
  #fullReportModal .bg-slate-900\/80,
  #fullReportModal .bg-indigo-950\/20,
  #fullReportModal .bg-slate-950\/80,
  #reportModal .bg-gradient-to-r,
  #reportModal .bg-slate-900\/80,
  #reportModal .bg-indigo-950\/20,
  #reportModal .bg-slate-950\/80 {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
  }

  /* High contrast readable text colors for print */
  .text-white, .text-slate-100, .text-slate-200 {
    color: #0f172a !important;
  }
  .text-slate-300, .text-slate-400 {
    color: #334155 !important;
  }
  .text-slate-500, .text-slate-600 {
    color: #64748b !important;
  }
  .text-emerald-400 {
    color: #059669 !important;
    font-weight: 800 !important;
  }
  .text-indigo-400 {
    color: #4338ca !important;
    font-weight: 700 !important;
  }
  .text-cyan-400 {
    color: #0284c7 !important;
    font-weight: 600 !important;
  }

  /* Prevent page breaks inside cards so findings stay together */
  #modalRepPillarsList > div,
  #modalRepQuickWinsList > li,
  .p-4.rounded-xl,
  .p-5.rounded-2xl,
  .p-6.rounded-2xl {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    margin-bottom: 12px !important;
  }
}