/* =====================================================
   NEONATAL GROWTH CALCULATOR - DESIGN OVERRIDES
   Forces the React app to match the Global Design System
   ===================================================== */

/* Imported via HTML */

/* 1. Reset & Typography */

body {
  background-color: var(--bg-page);
  background-image:
    radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.05) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(79, 70, 229, 0.05) 0px, transparent 50%);
  min-height: 100vh;
}

#root {
  font-family: var(--font-primary);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* 2. Backgrounds & Theme Compatibility */
/* Force transparent backgrounds on main containers inside root */
#root>div {
  background-color: transparent !important;
}

/* If the app has a white background wrapper */
#root .bg-white {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

#root .text-gray-900 {
  color: var(--text-primary) !important;
}

#root .text-gray-500,
#root .text-gray-600 {
  color: var(--text-secondary) !important;
}

/* 3. Inputs & Forms */
#root input[type="text"],
#root input[type="number"],
#root select {
  height: 48px !important;
  padding: 0 var(--space-3) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  font-size: var(--text-base) !important;
  font-family: var(--font-primary) !important;
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

#root input:focus,
#root select:focus {
  outline: none !important;
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 3px var(--primary-100) !important;
}

/* 4. Buttons */
#root button {
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-lg) !important;
  transition: all 0.2s ease !important;
}

/* Primary Buttons */
#root button[class*="bg-blue-"],
#root button[class*="bg-primary-"] {
  background: var(--primary-600) !important;
  color: white !important;
}

#root button[class*="bg-blue-"]:hover,
#root button[class*="bg-primary-"]:hover {
  background: var(--primary-700) !important;
}

/* Secondary Buttons */
#root button[class*="bg-white"],
#root button[class*="border"] {
  background: var(--bg-surface-alt) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
}

#root button[class*="bg-white"]:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

/* Charts */
/* Try to make charts look okay in dark mode if they are SVGs */
#root svg text {
  fill: var(--text-secondary) !important;
}

#root svg path.domain,
#root svg line {
  stroke: var(--border-subtle) !important;
}