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

/* Imported via HTML */

/* 1. Reset & Typography */
#root {
  font-family: var(--font-primary);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  /* Ensure the app takes the full height of the container */
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

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

/* If the app has a white background wrapper, make it match the theme */
#root .bg-white {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !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 input[type="search"],
#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;
}

/* Placeholder color */
#root ::placeholder {
  color: var(--text-tertiary) !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/Ghost Buttons */
#root button[class*="bg-gray-"],
#root button[class*="bg-white"] {
  background: var(--bg-surface-alt) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
}

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

/* 5. Cards & Lists */
/* If the app uses list items or cards, style them */
#root .border-b {
  border-bottom-color: var(--border-subtle) !important;
}

#root .hover\:bg-gray-50:hover {
  background-color: var(--bg-surface-hover) !important;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--neutral-700);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-400);
}