/* STYLE-001 SPECIFIC CHANGES - ENTERPRISE GRADE STYLING */

/* KILL THE GRAY DEATH - Override any bland styling */
body, html {
  background: #ffffff !important;
  color: #1f2937 !important;
}

/* Change OFFLINE button from green to pastel light red */
.health-indicator,
#nav-health-indicator {
  background: #ffb3b3 !important; /* pastel light red */
  color: #000000 !important; /* pure black text for maximum contrast */
}

/* ELIMINATE BLAND TEST PAGE STYLING */
.test-page,
.health-monitor-test,
.file-structure-validation,
.test-section {
  background: #ffffff !important;
  color: #1f2937 !important;
}

/* Force test page to look professional */
body {
  background: #ffffff !important;
  color: #1f2937 !important;
}

/* Override test page inline styles */
.test-section {
  border: 1px solid #3b82f6 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
}

/* Make status indicators look better */
.success {
  background: #dcfce7 !important;
  color: #166534 !important;
  font-weight: 600 !important;
}

.warning {
  background: #fef3c7 !important;
  color: #92400e !important;
  font-weight: 600 !important;
}

.error {
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-weight: 600 !important;
}

/* Fix any gray sections that look like failures */
.section-container,
.main-content,
.content-wrapper {
  background: #ffffff !important;
  color: #1f2937 !important;
}

/* Fix text visibility in health indicator */
.health-indicator .health-text,
#nav-health-indicator .health-text {
  color: #000000 !important; /* pure black text */
  font-weight: 800 !important; /* extra bold for readability */
}

/* Maintain the health dot color for consistency */
.health-indicator .health-dot,
#nav-health-indicator .health-dot {
  background: #dc2626 !important; /* slightly darker red for the dot */
}

/* Change "PROVEN BUSINESS IMPACT" title from white to blue */
.business-impact .section-title {
  color: #3b82f6 !important; /* blue font */
}

/* Ensure the blue title remains accessible on dark background */
.business-impact .section-title {
  font-weight: 900 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Fix hero title contrast - make it readable on light background */
.hero-title {
  color: #1f2937 !important; /* dark gray for maximum contrast on light background */
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* Fix hero subtitle contrast */
.hero-title .hero-subtitle {
  color: #3b82f6 !important; /* blue for subtitle */
  font-weight: 700 !important;
}

/* Fix hero description text visibility */
.hero-description {
  color: #1f2937 !important; /* dark gray for maximum contrast */
  font-weight: 600 !important;
}

/* Make strong elements more visible */
.hero-description strong {
  color: #dc2626 !important; /* red for emphasis numbers */
  font-weight: 800 !important;
}

/* Fix Real-Time API Status title visibility */
.health-dashboard-title {
  color: #1f2937 !important; /* dark gray for maximum contrast */
  font-weight: 800 !important;
}

/* AGGRESSIVE ANTI-GRAY OVERRIDES */

/* Override any test page or bland styling */
div, section, main, article {
  background-color: inherit !important;
}

/* Force proper backgrounds on all major containers */
.hero, .features, .business-impact, .documentation {
  background: #ffffff !important;
}

.quickstart {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

/* Fix metric labels and values visibility on dark cards - BRIGHTER TEXT */
.metric-label {
  color: #f9fafb !important; /* very bright light gray for labels on dark background */
  font-weight: 700 !important; /* increased weight for better visibility */
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; /* subtle shadow for definition */
}

.metric-value {
  color: #ffffff !important; /* pure white for values on dark background */
  font-weight: 800 !important; /* extra bold for prominence */
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; /* stronger shadow for definition */
}

.metric-unit {
  color: #f3f4f6 !important; /* brighter light gray for units on dark background */
  font-weight: 600 !important; /* increased weight */
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; /* light shadow */
}

/* Fix metric card background and ensure readability */
.metric-card {
  background: #374151 !important; /* ensure dark background */
  border-radius: 8px !important;
  padding: 16px !important;
}

/* Fix status indicator text visibility */
.status-indicator,
.status-text,
.status-badge {
  color: #ffffff !important; /* white text for status on dark background */
  font-weight: 700 !important;
}

/* Core AI Capabilities section - light blue background with dark blue header */
.features {
  background: #dbeafe !important; /* light blue background */
  padding: 60px 0 !important;
}

.features .section-title {
  color: #1e40af !important; /* dark blue for header */
  font-weight: 800 !important;
}

/* NEW LAYOUT: Light background cards with left icon alignment */
.feature-card {
  background: #ffffff !important; /* White cards for maximum readability */
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  transition: all 0.2s ease !important;
}

.feature-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px) !important;
}

.feature-card-content {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}

.feature-card-content .feature-icon {
  font-size: 24px !important;
  margin-top: 4px !important; /* Align with text baseline */
  display: block !important;
}

.feature-text {
  display: block !important;
}

.feature-text .feature-title {
  color: #1e40af !important; /* Dark blue - readable on white */
  font-weight: 700 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}

.feature-text .feature-description {
  color: #374151 !important; /* Dark gray - excellent readability */
  line-height: 1.6 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

/* ENTERPRISE-GRADE GET STARTED SECTION */

/* Professional quickstart layout */
.quickstart {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  padding: 80px 0 !important;
}

.quickstart .section-title {
  color: #ffffff !important;
  text-align: center !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  margin-bottom: 60px !important;
}

.quickstart-content {
  display: grid !important;
  grid-template-columns: 400px 1fr !important;
  gap: 60px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  align-items: start !important;
}

/* Sophisticated step design */
.quickstart-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

.step-number {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.step-title {
  color: #f8fafc !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}

.step-description {
  color: #cbd5e1 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* CONSISTENT STYLING FOR ALL STEPS */

/* All steps get consistent background and styling */
.step {
  background: rgba(30, 41, 59, 0.4) !important;
  border: 1px solid rgba(71, 85, 105, 0.3) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.3s ease !important;
}

.step:hover {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* API Key unavailable - light transparent indication */
.step:first-child {
  position: relative !important;
  opacity: 0.7 !important; /* Light transparency instead of full blocking */
}

.step:first-child .step-number {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; /* Keep normal blue but with transparency */
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important; /* Lighter shadow */
}

.step:first-child .step-title::after {
  content: " (Coming Soon)" !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.step:first-child:hover {
  transform: translateY(-1px) !important; /* Slight hover but less pronounced */
  background: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  opacity: 0.8 !important; /* Slightly more visible on hover */
}

/* Professional code example */
.code-example {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.code-header {
  background: #1e293b !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid #334155 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.code-label {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.copy-button {
  background: #374151 !important;
  color: #e5e7eb !important;
  border: 1px solid #4b5563 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.copy-button:hover {
  background: #4b5563 !important;
  border-color: #6b7280 !important;
}

/* Professional action buttons */
.quickstart-actions {
  display: flex !important;
  gap: 20px !important;
  margin-top: 40px !important;
  justify-content: center !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .quickstart-content {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  
  .quickstart .section-title {
    font-size: 2rem !important;
  }
}

/* Fix bullet points - make them darker and more readable */
.feature-card ul li,
.feature-card li,
ul li,
li {
  color: #1f2937 !important; /* dark gray for better readability */
  font-weight: 600 !important;
}

/* Light transparent API Key button */
.btn-primary[href*="authentication"] {
  background: #3b82f6 !important; /* Keep normal blue background */
  color: #ffffff !important; /* Keep white text */
  border-color: #3b82f6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.4 !important; /* Light transparency */
}

.btn-primary[href*="authentication"]:hover {
  background: #3b82f6 !important;
  transform: none !important;
  opacity: 0.4 !important; /* Stay at same transparency */
}

/* DARK TEXT ON WHITE TILES - GLOBAL REQUIREMENT */

/* Business impact tiles alignment and styling */
.impact-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.impact-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 24px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  min-height: 120px !important;
  justify-content: center !important;
}

/* Fix business impact card text visibility */
.impact-label {
  color: #000000 !important; /* pure black for maximum contrast on white cards */
  font-weight: 700 !important;
  margin: 8px 0 !important;
}

.impact-detail {
  color: #1f2937 !important; /* dark gray for details */
  font-weight: 600 !important;
  margin: 4px 0 !important;
}

.impact-number {
  color: #3b82f6 !important; /* blue for numbers */
  font-weight: 800 !important;
  font-size: 2.5rem !important;
  margin-bottom: 8px !important;
}

/* REMOVED: Old dark card styling that caused readability issues */

/* Developer Resources doc cards - consistent styling and header alignment */

/* FORCE ALL 4 TILES ON SAME LINE - Reduced sizing */
.docs-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Ensure consistent 4-column layout on all screen sizes */
@media (min-width: 768px) {
  .docs-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}

/* Larger screens get more spacing */
@media (min-width: 1200px) {
  .docs-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}

/* Force 4th tile to be visible and positioned correctly */
.docs-grid .doc-card:nth-child(4) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  grid-column: auto !important;
}

.doc-card-header {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 8px !important; /* Reduced from 12px */
  gap: 8px !important; /* Reduced from 12px */
}

.doc-card-header .doc-icon {
  display: block !important;
  font-size: 20px !important; /* Reduced from 24px */
  flex-shrink: 0 !important;
}

.doc-card-header .doc-title {
  display: block !important;
  margin: 0 !important;
  flex: 1 !important;
  color: #1f2937 !important; /* dark gray for titles */
  font-weight: 700 !important;
  font-size: 1rem !important; /* Compact title size */
  line-height: 1.3 !important;
}

/* Each doc card gets a unique color - COMPACT SIZE */
.doc-card {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 16px !important; /* Reduced from 24px */
  display: flex !important;
  flex-direction: column !important;
  min-height: 140px !important; /* Reduced from 180px */
  transition: all 0.2s ease !important;
  font-size: 0.9rem !important; /* Slightly smaller text */
}

/* Tile 1: ROI Calculator - Light Orange SOLID - ABSOLUTE MAXIMUM OVERRIDE */
.documentation .docs-grid .doc-card:nth-child(1),
.docs-grid .doc-card:nth-child(1),
a.doc-card:nth-child(1),
.doc-card:nth-child(1)[href*="roi-calculator"] {
  background: #fed7aa !important; /* light orange solid - NO TRANSPARENCY */
  background-color: #fed7aa !important;
  opacity: 1 !important; /* Override any opacity reductions */
  opacity: 1 !important; /* Ensure full opacity */
}

/* Tile 2: 15-Minute Quickstart - Light Blue with transparency */
.docs-grid .doc-card:nth-child(2) {
  background: rgba(219, 234, 254, 0.8) !important; /* light blue with 80% opacity */
}

/* Tile 3: API Reference - Light Green with transparency */
.docs-grid .doc-card:nth-child(3) {
  background: rgba(220, 252, 231, 0.8) !important; /* light green with 80% opacity */
}

/* Tile 4: Integration Guides - Light Purple with transparency */
.docs-grid .doc-card:nth-child(4) {
  background: rgba(243, 232, 255, 0.8) !important; /* light purple with 80% opacity */
}

.doc-card:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* Ensure doc card text is dark and readable - COMPACT */
.doc-card h4,
.doc-card .doc-title {
  color: #1f2937 !important; /* dark gray for titles */
  font-weight: 700 !important;
}

.doc-card p,
.doc-card .doc-description {
  color: #374151 !important; /* dark gray for descriptions */
  font-weight: 500 !important;
  flex: 1 !important;
  line-height: 1.4 !important; /* Tighter line height */
  font-size: 0.85rem !important; /* Smaller description text */
  margin: 0 0 8px 0 !important; /* Compact margins */
}

.doc-card .doc-link {
  color: #3b82f6 !important;
  font-size: 18px !important;
  margin-top: auto !important;
  align-self: flex-end !important;
}