/* Only needed for the radar chart – everything else is Tailwind */
.radar {
  width: 180px;
  height: 180px;
  margin: 1.5rem auto;
  display: block;
}

/* Smooth theme transitions */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Health score radar fill */
.health-score polygon {
  fill: rgba(16, 185, 129, 0.3);
}
.health-score h2 {
  margin-bottom: 0.5rem;
}

/* Big Score Number Colors - Light Mode */
.score-low  { color: #ef4444 !important; }   /* Red <60 */
.score-mid  { color: #fb923c !important; }   /* Orange 60-79 */
.score-high { color: #22c55e !important; }   /* Green ≥80 */

/* Big Score Number Colors - Dark Mode */
.dark .score-low  { color: #f87171 !important; }
.dark .score-mid  { color: #fdba74 !important; }
.dark .score-high { color: #86efac !important; }

/* /100 suffix - consistent gray */
.score-slash {
  color: #9ca3af !important;
}
.dark .score-slash {
  color: #6b7280 !important;
}

/* Score number shadow for readability */
.score-number {
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* ── MOST IMPORTANT FIX ── */
/* Detail paragraphs in .text-left (Why AI Content Matters? etc.) */
.text-left p {
  color: #1f2937 !important;          /* gray-800 light */
}
.dark .text-left p {
  color: #e5e7eb !important;          /* gray-200 dark */
}

/* Predictive forecast info text */
.text-blue-300, .text-green-300, .text-orange-300 {
  color: #6b7280 !important;          /* gray-500 light */
}
.dark .text-blue-300,
.dark .text-green-300,
.dark .text-orange-300 {
  color: #e5e7eb !important;          /* gray-200 dark */
}

/* Small/italic notes */
.dark .text-sm,
.dark .text-sm.italic {
  color: #9ca3af !important;          /* gray-400 dark – softer & readable */
}

/* Hero text below h2 */
h2 + p {
  color: #6b7280;                     /* gray-500 light */
}
.dark h2 + p {
  color: #9ca3af;                     /* gray-400 dark */
}

/* Metric card titles */
.bg-white h4,
.dark .bg-gray-900 h4 {
  color: #1f2937;                     /* gray-800 light */
}
.dark .bg-gray-900 h4 {
  color: #f3f4f6;                     /* gray-100 dark */
}

/* Loading spinner */
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Mobile-first responsive report fixes */
@media (max-width: 1024px) {
  .container, .max-w-5xl, .max-w-4xl, .max-w-3xl {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .p-12, .p-10, .p-8 {
    padding: 1.5rem !important;
  }
  .text-5xl { font-size: 2rem !important; line-height: 1.1 !important; }
  .text-9xl { font-size: 6rem !important; line-height: 1 !important; }
}

@media (max-width: 768px) {
  .grid, .md\:grid-cols-3, .md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  .p-8, .p-6, .p-12 { padding: 1.5rem !important; }
  .text-7xl, .text-8xl { font-size: 4rem !important; }
  .text-5xl { font-size: 2.5rem !important; }
  .text-4xl { font-size: 2rem !important; }
  table { font-size: 0.875rem !important; }
  table th, table td { padding: 0.75rem !important; }
}

@media (max-width: 480px) {
  .p-8, .p-6, .p-12 { padding: 1rem !important; }
  .text-7xl, .text-8xl { font-size: 3.5rem !important; }
  .text-5xl { font-size: 2.25rem !important; }
}

/* Prevent iOS rubber-band bounce */
html, body {
  overscroll-behavior-x: none;
}

/* Table safety for results */
#results .max-w-5xl,
#results .overflow-x-auto,
#results table {
  max-width: 100% !important;
  width: 100% !important;
}
#results table {
  table-layout: fixed;
}
#results table th,
#results table td {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}