/* =====================================================
   MEDICAL CALCULATORS - DESIGN OVERRIDES
   Forces the React app to match the Global Design System
   ===================================================== */

/* 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 */
#root>div {
  background-color: transparent !important;
}

/* Force backgrounds to match theme */
#root .bg-white {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

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

#root .bg-gray-100 {
  background-color: var(--bg-surface-alt) !important;
}

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

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

/* 3. Inputs & Forms */
#root input[type="text"],
#root input[type="number"],
#root input[type="search"],
#root select,
#root textarea {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
}

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

/* Dark mode specific for inputs */
[data-theme="dark"] #root input:focus,
[data-theme="dark"] #root select:focus,
[data-theme="dark"] #root textarea:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* 4. Cards & Containers */
#root .shadow,
#root .shadow-sm,
#root .shadow-md,
#root .shadow-lg {
  box-shadow: var(--shadow-sm) !important;
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
}

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

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

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

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

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

/* 6. Mobile Sidebar Fixes */
/* Ensure fixed sidebar overlays the site header on mobile */
@media (max-width: 1023px) {

  /* Sidebar must clear the global fixed header (~64px) */
  #root aside[style] {
    top: 0 !important;
    padding-top: 0;
  }

  /* Content area needs top breathing room for the hamburger button */
  #root #calc-main>div {
    padding-top: 5rem !important;
  }
}

/* Ensure the root container does NOT create a new stacking/scrolling context
   that would trap fixed children on mobile */
#root {
  overflow: visible !important;
  isolation: auto !important;
}