/* =====================================================
   UNIFIED OVERRIDES
   Bridges React apps to the Global Design System.
   NOTE: global-theme.css and shared-styles.css are
   already loaded via <link> tags — no @import needed.
   ===================================================== */

/* 1. Reset & Typography */

#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 .bg-slate-50,
#root .bg-gray-50 {
  background-color: var(--bg-surface-alt) !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;
}

/* 5. Cards */
#root .shadow-sm,
#root .shadow-md,
#root .shadow-lg {
  box-shadow: none !important;
  border: 1px solid var(--border-subtle) !important;
}

/* =====================================================
   NEONATAL NUTRITION CALCULATOR - OVERRIDES
   Modernizes the React App Layout & Fixes Spacing
   ===================================================== */

/* 1. Root Layout & Spacing */

#root {
  min-height: 600px;
  width: 100%;
  padding-top: var(--space-4); /* Space below fixed header */
  padding-bottom: var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-primary);
  color: var(--text-primary);
}

/* Loading state */
#root:empty::before {
  content: 'Loading...';
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  color: var(--primary-600);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* 2. Container Fixes */
/* Ensure the main container respects max-width and centers */
#root > div {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* Even more compact */
}


/* 3. Card Modernization (MUI Overrides) */
#root .MuiPaper-root,
#root [class*="MuiPaper"],
#root [class*="card"],
#root [class*="Card"] {
  height: fit-content !important; /* Prevent stretching in flex rows */
  min-height: auto !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  
  /* Prevent flex item stretching */
  align-self: flex-start !important;
  flex-grow: 0 !important;
  
  /* Modern styling */
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important; /* Compact radius */
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--duration-200) ease, box-shadow var(--duration-200) ease !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: var(--space-3) !important; /* Very compact padding */
}

#root .MuiPaper-root:hover,
#root [class*="MuiPaper"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
  border-color: var(--primary-200) !important;
}

/* 4. Form Layout (Responsive Grid) */
/* FORCE GRID LAYOUT FOR CALCULATOR SECTIONS */
/* Target any Grid container that holds Cards (Content Sections) */
#root div[class*="MuiGrid-container"]:has(.MuiPaper-root) {
  display: grid !important;
  /* Auto-fit columns: at least 280px, but fill space. 
     This ensures side-by-side on desktop, stacked on mobile, 
     and equal width distribution. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: var(--space-4) !important;
  align-items: start !important; /* Prevent vertical stretching */
  width: 100% !important;
  margin: 0 !important;
}

/* Reset the Grid Items to act as simple wrappers in this context */
#root div[class*="MuiGrid-container"]:has(.MuiPaper-root) > div[class*="MuiGrid-item"] {
  width: auto !important;
  max-width: none !important;
  flex-basis: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important; /* Ensure it's a block for the card */
}

/* Internal Form Grid (Inside Cards) */
#root .MuiPaper-root > div,
#root [class*="MuiPaper"] > div {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* Keep 2 columns for inputs inside cards */
  gap: var(--space-2) !important; /* Tight gap */
  padding: 0 !important; 
}

/* Mobile: Single column inputs */
@media (max-width: 640px) {
  #root .MuiPaper-root > div,
  #root [class*="MuiPaper"] > div {
    grid-template-columns: 1fr !important;
  }
}

/* 5. Typography Fixes - Compact */
#root h1, #root h2, #root h3, #root h4, #root h5, #root h6,
#root .MuiTypography-h1, #root .MuiTypography-h2, #root .MuiTypography-h3, 
#root .MuiTypography-h4, #root .MuiTypography-h5, #root .MuiTypography-h6 {
  font-family: var(--font-display) !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-2) !important; /* Tight margin */
  font-size: 1.1em !important; /* Slightly smaller headers */
}

#root p, #root span, #root label,
#root .MuiTypography-body1, #root .MuiTypography-body2 {
  font-family: var(--font-primary) !important;
  color: var(--text-secondary) !important;
  font-size: 0.95em !important; /* Compact text */
}

/* 6. Input Fields Modernization - Compact */
#root input,
#root select,
#root .MuiInputBase-input,
#root .MuiOutlinedInput-input {
  font-family: var(--font-primary) !important;
  padding: var(--space-2) var(--space-3) !important; /* Compact input padding */
  height: auto !important;
  font-size: var(--text-sm) !important; /* Smaller text */
  color: var(--text-primary) !important;
}

#root .MuiOutlinedInput-root {
  border-radius: var(--radius-md) !important; /* Smaller radius */
  background-color: var(--bg-surface-alt) !important;
  min-height: 36px !important; /* Enforce smaller height */
}

#root .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary-400) !important;
}

#root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary-600) !important;
  border-width: 2px !important;
}


/* 7. Buttons Modernization */
#root button,
#root .MuiButton-root {
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  text-transform: none !important; /* Remove ALL CAPS */
  border-radius: var(--radius-lg) !important;
  padding: var(--space-3) var(--space-6) !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

/* Fix for Tailwind buttons text visibility on press/active */
/* Target buttons with specific Tailwind background classes to ensure contrast */
#root button[class*="bg-blue-600"]:active,
#root button[class*="bg-blue-600"]:focus,
#root button[class*="bg-blue-600"]:hover {
  color: white !important;
  background-color: var(--primary-700) !important; /* Maintain dark bg */
}

#root button[class*="bg-white"]:active,
#root button[class*="bg-white"]:focus {
  background-color: var(--neutral-100) !important;
  color: var(--neutral-800) !important;
}

/* Ensure text-white utility always wins */
#root button[class*="text-white"] {
  color: white !important;
}

#root button.MuiButton-containedPrimary {
  background-color: var(--primary-600) !important;
  color: white !important;
}

#root button.MuiButton-containedPrimary:hover {
  background-color: var(--primary-700) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

#root button.MuiButton-outlined {
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

#root button.MuiButton-outlined:hover {
  background-color: var(--bg-surface-hover) !important;
  border-color: var(--primary-300) !important;
}