/**
 * CRITICAL THEME OVERRIDES - Must load LAST
 * Forces our light theme styles over Bootstrap's defaults
 * Uses maximum specificity to win CSS cascade
 */

/* ============================================
   LIGHT THEME CRITICAL OVERRIDES
   Maximum specificity to override Bootstrap
   ============================================ */

/* VARIABLE OVERRIDES for Richer Contrast in Light Mode */
html[data-bs-theme="light"],
html[data-theme="light"] {
  --text-gradient-pink-purple: linear-gradient(135deg, #d53f8c 0%, #805ad5 100%) !important;
  --text-gradient-purple-blue: linear-gradient(135deg, #5a67d8 0%, #4c51bf 100%) !important;
  --sinai-primary: #5a67d8 !important; /* Slightly darker for text contrast */
}

/* SELECTION - Theme colored text selection */
html[data-bs-theme="light"] ::selection,
html[data-theme="light"] ::selection {
  background: rgba(102, 126, 234, 0.3) !important;
  color: #4c3fb5 !important;
}

/* NAVBAR - Force DARK theme styles even in Light Mode (Unified Header) - RESTORED for Lighter Dark Theme */
html[data-bs-theme="light"] body .navbar,
html[data-theme="light"] body .navbar,
[data-bs-theme="light"] .navbar,
[data-theme="light"] .navbar {
  background: rgba(26, 31, 46, 0.85) !important; /* Lighter level of dark header */
  border-bottom: 1px solid rgba(102, 126, 234, 0.2) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* NAV LINKS - Force Light Text for Dark Header - RESTORED */
html[data-bs-theme="light"] .nav-link,
html[data-theme="light"] .nav-link {
  color: #e2e8f0 !important;
}

html[data-bs-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Navbar Brand/Logo text if text-based - RESTORED */
html[data-bs-theme="light"] .navbar-brand,
html[data-theme="light"] .navbar-brand {
  color: #ffffff !important;
}

/* Navbar Toggler (Hamburger) - Dark Theme Grading for Light Header */
html[data-bs-theme="light"] .navbar-toggler,
html[data-theme="light"] .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

html[data-bs-theme="light"] .navbar-toggler-icon,
html[data-theme="light"] .navbar-toggler-icon {
  filter: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
}

/* Mobile Menu - Ensure White Background and Dark Text */
@media (max-width: 991.98px) {
  html[data-bs-theme="light"] .navbar-collapse,
  html[data-theme="light"] .navbar-collapse {
      background: rgba(255, 255, 255, 0.98) !important;
      border-radius: 12px !important;
      padding: 1rem !important;
      margin-top: 0.5rem !important;
      box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
      border: 1px solid rgba(102, 126, 234, 0.1) !important;
  }

  /* Mobile Menu Links - Dark Text */
  html[data-bs-theme="light"] .navbar-collapse .nav-link,
  html[data-theme="light"] .navbar-collapse .nav-link {
      color: #4c3fb5 !important; /* SinAI Purple */
      padding-left: 1rem !important;
  }

  html[data-bs-theme="light"] .navbar-collapse .nav-link:hover,
  html[data-theme="light"] .navbar-collapse .nav-link:hover {
      color: #667eea !important;
      background: rgba(102, 126, 234, 0.1) !important;
      border-radius: 8px !important;
  }
}

/* BUTTONS - Enhanced 3D Glassmorphic with Strong Visual Depth */
html[data-bs-theme="light"] .btn-primary,
html[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: 3px solid rgba(102, 126, 234, 0.75) !important;
  color: #ffffff !important;
  box-shadow: 
    0 9px 36px rgba(102, 126, 234, 0.6),
    0 5px 18px rgba(118, 75, 162, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.23) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  transform: translateY(0) !important;
}

html[data-bs-theme="light"] .btn-primary::after,
html[data-theme="light"] .btn-primary::after {
  content: '' !important;
  position: absolute !important;
  bottom: -5px !important;
  left: 10px !important;
  right: 10px !important;
  height: 5px !important;
  background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.45) 0%, rgba(118, 75, 162, 0.2) 40%, transparent 70%) !important;
  border-radius: 50% !important;
  opacity: 0.8 !important;
  z-index: -1 !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  filter: blur(3px) !important;
}

html[data-bs-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b3f8a 100%) !important;
  border: 2px solid rgba(90, 103, 216, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 
    0 12px 40px rgba(102, 126, 234, 0.5),
    0 6px 20px rgba(118, 75, 162, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-4px) scale(1.02) !important;
}

html[data-bs-theme="light"] .btn-primary:hover::after,
html[data-theme="light"] .btn-primary:hover::after {
  bottom: -10px !important;
  opacity: 1 !important;
  height: 8px !important;
  filter: blur(4px) !important;
}

/* Secondary/Outline Buttons with strong static borders and animated shine */
html[data-bs-theme="light"] .btn-outline-primary,
html[data-theme="light"] .btn-outline-primary {
  border: 3px solid rgba(102, 126, 234, 0.85) !important;
  color: #3a2f8f !important;
  background: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
  box-shadow: 
    0 6px 24px rgba(102, 126, 234, 0.38),
    0 3px 12px rgba(118, 75, 162, 0.23),
    0 2px 5px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(102, 126, 234, 0.15) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Animated shine effect for outline buttons */
html[data-bs-theme="light"] .btn-outline-primary::before,
html[data-theme="light"] .btn-outline-primary::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -100% !important;
  width: 100% !important;
  height: 200% !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(102, 126, 234, 0.2) 50%, 
    transparent 100%) !important;
  transform: skewX(-25deg) !important;
  animation: shine 3s ease-in-out infinite !important;
}

html[data-bs-theme="light"] .btn-outline-primary:hover,
html[data-theme="light"] .btn-outline-primary:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: 3px solid rgba(102, 126, 234, 0.9) !important;
  color: #ffffff !important;
  box-shadow: 
    0 8px 30px rgba(102, 126, 234, 0.45),
    0 4px 15px rgba(118, 75, 162, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* White/Light buttons (like Explore Products) */
html[data-bs-theme="light"] .btn-light,
html[data-theme="light"] .btn-light,
html[data-bs-theme="light"] .btn-outline-secondary,
html[data-theme="light"] .btn-outline-secondary {
  border: 3px solid rgba(102, 126, 234, 0.8) !important;
  background: rgba(255, 255, 255, 1) !important;
  color: #1a202c !important;
  font-weight: 600 !important;
  box-shadow: 
    0 6px 24px rgba(102, 126, 234, 0.35),
    0 3px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(102, 126, 234, 0.15) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html[data-bs-theme="light"] .btn-light::before,
html[data-theme="light"] .btn-light::before,
html[data-bs-theme="light"] .btn-outline-secondary::before,
html[data-theme="light"] .btn-outline-secondary::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -100% !important;
  width: 100% !important;
  height: 200% !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(102, 126, 234, 0.15) 50%, 
    transparent 100%) !important;
  transform: skewX(-25deg) !important;
  animation: shine 3s ease-in-out infinite !important;
}

html[data-bs-theme="light"] .btn-light:hover,
html[data-theme="light"] .btn-light:hover,
html[data-bs-theme="light"] .btn-outline-secondary:hover,
html[data-theme="light"] .btn-outline-secondary:hover {
  border: 3px solid rgba(102, 126, 234, 0.8) !important;
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 
    0 8px 30px rgba(102, 126, 234, 0.35),
    0 4px 15px rgba(118, 75, 162, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* SinAI branded buttons with enhanced 3D depth */
html[data-bs-theme="light"] .btn-sinai,
html[data-theme="light"] .btn-sinai {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: 2px solid rgba(102, 126, 234, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 
    0 6px 24px rgba(102, 126, 234, 0.45),
    0 3px 12px rgba(118, 75, 162, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
  position: relative !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html[data-bs-theme="light"] .btn-sinai::after,
html[data-theme="light"] .btn-sinai::after {
  content: '' !important;
  position: absolute !important;
  bottom: -5px !important;
  left: 10px !important;
  right: 10px !important;
  height: 5px !important;
  background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.5) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  opacity: 0.8 !important;
  z-index: -1 !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html[data-bs-theme="light"] .btn-sinai:hover,
html[data-theme="light"] .btn-sinai:hover {
  box-shadow: 
    0 12px 40px rgba(102, 126, 234, 0.6),
    0 6px 20px rgba(118, 75, 162, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-4px) scale(1.02) !important;
}

html[data-bs-theme="light"] .btn-sinai:hover::after,
html[data-theme="light"] .btn-sinai:hover::after {
  bottom: -10px !important;
  opacity: 1 !important;
  height: 8px !important;
  transform: translateY(-3px) !important;
}

/* CARDS - Enhanced 3D Glassmorphic Effect with Strong Visual Hierarchy */
html[data-bs-theme="light"] .card,
html[data-theme="light"] .card {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%,
    rgba(250, 251, 253, 1) 30%,
    rgba(243, 244, 250, 0.95) 70%,
    rgba(237, 240, 249, 0.92) 100%) !important;
  border: 3px solid rgba(102, 126, 234, 0.6) !important;
  color: #1a202c !important;
  box-shadow: 
    0 15px 60px rgba(102, 126, 234, 0.33),
    0 9px 30px rgba(118, 75, 162, 0.18),
    0 5px 12px rgba(0, 0, 0, 0.15),
    0 2px 5px rgba(0, 0, 0, 0.09),
    inset 0 2px 1px rgba(255, 255, 255, 1),
    inset 0 -2px 1px rgba(102, 126, 234, 0.23),
    inset 1px 0 1px rgba(102, 126, 234, 0.12),
    inset -1px 0 1px rgba(102, 126, 234, 0.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) contrast(110%) !important;
  backdrop-filter: blur(20px) saturate(200%) contrast(110%) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 16px !important;
  position: relative !important;
  transform: translateY(0) !important;
}

/* Card 3D Depth Enhancement - Bottom Shadow */
html[data-bs-theme="light"] .card::after,
html[data-theme="light"] .card::after {
  content: '' !important;
  position: absolute !important;
  bottom: -15px !important;
  left: 10px !important;
  right: 10px !important;
  height: 15px !important;
  background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.52) 0%, rgba(118, 75, 162, 0.23) 40%, transparent 75%) !important;
  border-radius: 50% !important;
  opacity: 0.9 !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: -1 !important;
  filter: blur(6px) !important;
}

html[data-bs-theme="light"] .card:hover,
html[data-theme="light"] .card:hover {
  box-shadow: 
    0 20px 60px rgba(102, 126, 234, 0.25),
    0 12px 30px rgba(118, 75, 162, 0.15),
    0 6px 12px rgba(0, 0, 0, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(102, 126, 234, 0.15) !important;
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(102, 126, 234, 0.45) !important;
  border-width: 2px !important;
}

html[data-bs-theme="light"] .card:hover::after,
html[data-theme="light"] .card:hover::after {
  bottom: -16px !important;
  left: 12px !important;
  right: 12px !important;
  height: 12px !important;
  opacity: 0.8 !important;
  background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.35) 0%, transparent 70%) !important;
}

/* Card Active/Focus State */
html[data-bs-theme="light"] .card:active,
html[data-theme="light"] .card:active {
  transform: translateY(-2px) scale(0.98) !important;
  box-shadow: 
    0 4px 20px rgba(102, 126, 234, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Glass cards - enhanced glassmorphism */
html[data-bs-theme="light"] .card-glass,
html[data-theme="light"] .card-glass,
html[data-bs-theme="light"] .glass,
html[data-theme="light"] .glass {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(237, 233, 254, 0.6) 50%,
    rgba(224, 242, 254, 0.7) 100%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(102, 126, 234, 0.25) !important;
  box-shadow: 
    0 8px 32px rgba(102, 126, 234, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* HERO SECTION - Prevent Bootstrap override */
html[data-bs-theme="light"] .hero,
html[data-theme="light"] .hero {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.04) 0%,
    rgba(118, 75, 162, 0.03) 50%,
    rgba(237, 100, 166, 0.02) 100%
  ) !important;
  color: #0f1419 !important;
}

/* HERO OVERLAY - Use subtle dynamic overlay (handled in master-unified-theme.css) */
/* Do NOT disable - let the theme CSS control this with proper opacity */

/* AGENTIC HERO SECTION - Force VIBRANT dynamic gradient background */
/* Mirrors dark mode's rich gradients but in light spectrum */
html[data-bs-theme="light"] body .agentic-hero-section,
html[data-theme="light"] body .agentic-hero-section,
html[data-bs-theme="light"] .agentic-hero-section,
html[data-theme="light"] .agentic-hero-section {
  background: linear-gradient(135deg,
      #e0e7ff 0%,
      #c7d2fe 20%,
      #ddd6fe 40%,
      #e0f2fe 60%,
      #c7d2fe 80%,
      #e0e7ff 100%) !important;
  background-size: 400% 400% !important;
  animation: gradientFlow 3s ease infinite !important;
}

/* Enable particles for agentic hero in light mode */
html[data-bs-theme="light"] .agentic-hero-section::before,
html[data-theme="light"] .agentic-hero-section::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(102, 126, 234, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(118, 75, 162, 0.2) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 75% 20%, rgba(168, 85, 247, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 25% 80%, rgba(34, 211, 238, 0.12) 0%, transparent 45%) !important;
  animation: particleFloatLight 20s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

@keyframes particleFloatLight {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1) translateY(0) rotate(0deg);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1) translateY(-20px) rotate(3deg);
  }
}

/* LINKS - Force our purple color */
html[data-bs-theme="light"] a:not(.btn):not(.nav-link),
html[data-theme="light"] a:not(.btn):not(.nav-link) {
  color: #4c3fb5 !important;
}

html[data-bs-theme="light"] a:not(.btn):not(.nav-link):hover,
html[data-theme="light"] a:not(.btn):not(.nav-link):hover {
  color: #3a2d8f !important;
}

/* FORMS - Revolutionary Glass Inputs */
html[data-bs-theme="light"] input,
html[data-bs-theme="light"] textarea,
html[data-bs-theme="light"] select,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background-color: rgba(255, 255, 255, 0.8) !important;
  color: #0f1419 !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  transition: all 0.3s ease !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

html[data-bs-theme="light"] input:focus,
html[data-bs-theme="light"] textarea:focus,
html[data-bs-theme="light"] select:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  background-color: #ffffff !important;
  border-color: #667eea !important;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), 0 4px 12px rgba(102, 126, 234, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* CODE BLOCKS - Unified Dark Theme for Code */
html[data-bs-theme="light"] pre,
html[data-bs-theme="light"] code,
html[data-theme="light"] pre,
html[data-theme="light"] code {
  background-color: #1a202c !important; /* Dark bg for code always */
  color: #e2e8f0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(102, 126, 234, 0.2) !important;
}

html[data-bs-theme="light"] :not(pre) > code,
html[data-theme="light"] :not(pre) > code {
  background-color: rgba(102, 126, 234, 0.1) !important;
  color: #5a67d8 !important; /* Purple text for inline code */
  padding: 0.2em 0.4em !important;
  border: none !important;
}

/* BLOCKQUOTES - Glassmorphic Accent */
html[data-bs-theme="light"] blockquote,
html[data-theme="light"] blockquote {
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, transparent 100%) !important;
  border-left: 4px solid #667eea !important;
  padding: 1rem 1.5rem !important;
  border-radius: 0 8px 8px 0 !important;
  color: #2d3748 !important;
  font-style: italic !important;
}

/* FOOTER - Force DARK theme styles even in Light Mode (Unified Footer) */
html[data-bs-theme="light"] .site-footer,
html[data-theme="light"] .site-footer,
html[data-bs-theme="light"] footer,
html[data-theme="light"] footer {
  background: #1a202c !important; /* var(--sinai-dark) */
  border-top: 1px solid rgba(102, 126, 234, 0.2) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
}

html[data-bs-theme="light"] footer a,
html[data-theme="light"] footer a {
  color: #a78bfa !important; /* Light purple */
  transition: color 0.2s ease !important;
}

html[data-bs-theme="light"] footer a:hover,
html[data-theme="light"] footer a:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

html[data-bs-theme="light"] footer .text-muted,
html[data-theme="light"] footer .text-muted {
  color: #a0aec0 !important; /* Lighter gray for dark bg */
}

/* TEXT UTILITIES - Override Bootstrap text colors */
html[data-bs-theme="light"] .text-muted,
html[data-theme="light"] .text-muted {
  color: #718096 !important;
}

html[data-bs-theme="light"] p,
html[data-theme="light"] p {
  color: #4a5568 !important;
}

/* Prevent Bootstrap background overlays on generic sections */
/* EXCLUDE agentic-hero-section and hero which have their own backgrounds */
html[data-bs-theme="light"] section:not(.agentic-hero-section):not(.hero),
html[data-theme="light"] section:not(.agentic-hero-section):not(.hero) {
  background-color: transparent !important;
  background-image: none !important;
}

/* ============================================
   SECTION DIVIDERS - Gradient borders like dark mode
   ============================================ */
html[data-bs-theme="light"] section,
html[data-theme="light"] section {
  border-top: 1px solid rgba(102, 126, 234, 0.15) !important;
  position: relative !important;
}

html[data-bs-theme="light"] section:first-of-type,
html[data-theme="light"] section:first-of-type {
  border-top: none !important;
}

/* Hero divider - gradient fade */
html[data-bs-theme="light"] .hero-divider,
html[data-theme="light"] .hero-divider {
  background: linear-gradient(to bottom, 
    rgba(102, 126, 234, 0.2) 0%,
    rgba(118, 75, 162, 0.15) 40%, 
    transparent 100%) !important;
  height: 120px !important;
  margin-top: -60px !important;
  pointer-events: none !important;
}

/* Section gradient overlays for depth - Enhanced for light mode */
html[data-bs-theme="light"] section::before,
html[data-theme="light"] section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(102, 126, 234, 0.5) 15%,
    rgba(118, 75, 162, 0.45) 50%,
    rgba(102, 126, 234, 0.5) 85%,
    transparent 100%) !important;
  pointer-events: none !important;
  box-shadow: 0 1px 3px rgba(102, 126, 234, 0.2) !important;
}

/* ============================================
   ANIMATIONS - Moving reflection shine effect
   ============================================ */
@keyframes shine {
  0% {
    left: -100%;
  }
  50% {
    left: 200%;
  }
  100% {
    left: 200%;
  }
}

/* ============================================
   MODALS - Enhanced 3D Glassmorphic with Strong Depth
   ============================================ */
html[data-bs-theme="light"] .modal-content,
html[data-theme="light"] .modal-content {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(250, 251, 253, 1) 30%,
    rgba(243, 244, 250, 0.95) 70%,
    rgba(237, 240, 249, 0.92) 100%) !important;
  border: 4px solid rgba(102, 126, 234, 0.65) !important;
  box-shadow: 
    0 45px 120px rgba(102, 126, 234, 0.45),
    0 30px 75px rgba(118, 75, 162, 0.3),
    0 15px 45px rgba(0, 0, 0, 0.23),
    0 8px 23px rgba(0, 0, 0, 0.15),
    inset 0 2px 1px rgba(255, 255, 255, 1),
    inset 0 -2px 1px rgba(102, 126, 234, 0.25),
    inset 2px 0 1px rgba(102, 126, 234, 0.1),
    inset -2px 0 1px rgba(102, 126, 234, 0.1) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) contrast(110%) !important;
  backdrop-filter: blur(24px) saturate(200%) contrast(110%) !important;
  border-radius: 20px !important;
  position: relative !important;
}

html[data-bs-theme="light"] .modal-header,
html[data-theme="light"] .modal-header {
  border-bottom: 1px solid rgba(102, 126, 234, 0.2) !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(102, 126, 234, 0.08) 50%,
    transparent 100%) !important;
}

html[data-bs-theme="light"] .modal-footer,
html[data-theme="light"] .modal-footer {
  border-top: 1px solid rgba(102, 126, 234, 0.2) !important;
  background: rgba(248, 250, 252, 0.5) !important;
}

html[data-bs-theme="light"] .modal-backdrop,
html[data-theme="light"] .modal-backdrop {
  background: linear-gradient(135deg,
    rgba(102, 126, 234, 0.3) 0%,
    rgba(118, 75, 162, 0.25) 50%,
    rgba(102, 126, 234, 0.3) 100%) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

/* ============================================
   DROPDOWNS - Enhanced 3D Glassmorphic Style
   ============================================ */
html[data-bs-theme="light"] .dropdown-menu,
html[data-theme="light"] .dropdown-menu {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(250, 251, 253, 1) 50%,
    rgba(243, 244, 250, 0.95) 100%) !important;
  border: 3px solid rgba(102, 126, 234, 0.6) !important;
  box-shadow: 
    0 23px 90px rgba(102, 126, 234, 0.38),
    0 12px 45px rgba(118, 75, 162, 0.27),
    0 6px 23px rgba(0, 0, 0, 0.18),
    0 3px 9px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(102, 126, 234, 0.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) contrast(110%) !important;
  backdrop-filter: blur(20px) saturate(200%) contrast(110%) !important;
  border-radius: 14px !important;
  position: relative !important;
}

html[data-bs-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .dropdown-item:hover {
  background: linear-gradient(90deg,
    rgba(102, 126, 234, 0.1) 0%,
    rgba(118, 75, 162, 0.08) 100%) !important;
  color: #4c3fb5 !important;
}

/* Agentic area boxes/pills (Orchestration, Ecosystem badges) need extra visibility */
html[data-bs-theme="light"] .badge-secondary,
html[data-theme="light"] .badge-secondary {
  border: 3px solid rgba(102, 126, 234, 0.6) !important;
  background: rgba(250, 251, 253, 0.98) !important;
  color: #4c3fb5 !important;
  box-shadow: 
    0 5px 20px rgba(102, 126, 234, 0.3),
    0 3px 10px rgba(118, 75, 162, 0.2),
    0 1px 4px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(102, 126, 234, 0.2) !important;
  overflow: hidden !important;
  position: relative !important;
}

html[data-bs-theme="light"] .badge-secondary::before,
html[data-theme="light"] .badge-secondary::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -100% !important;
  width: 100% !important;
  height: 200% !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(102, 126, 234, 0.25) 50%, 
    transparent 100%) !important;
  transform: skewX(-25deg) !important;
  animation: shine 4s ease-in-out infinite !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ============================================
   BADGES & PILLS - Enhanced 3D Design with Strong Depth
   ============================================ */
html[data-bs-theme="light"] .badge,
html[data-theme="light"] .badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: 3px solid rgba(102, 126, 234, 0.65) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 
    0 6px 27px rgba(102, 126, 234, 0.6),
    0 3px 12px rgba(118, 75, 162, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0.5em 1em !important;
  border-radius: 50px !important;
  transform: translateY(0) !important;
}

html[data-bs-theme="light"] .badge::after,
html[data-theme="light"] .badge::after {
  content: '' !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 8px !important;
  right: 8px !important;
  height: 3px !important;
  background: radial-gradient(ellipse at center, rgba(102, 126, 234, 0.4) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  opacity: 0.8 !important;
  z-index: -1 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html[data-bs-theme="light"] .badge:hover,
html[data-theme="light"] .badge:hover {
  box-shadow: 
    0 6px 24px rgba(102, 126, 234, 0.5),
    0 3px 12px rgba(118, 75, 162, 0.4),
    0 1px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-2px) scale(1.05) !important;
  border-color: rgba(102, 126, 234, 0.7) !important;
}

html[data-bs-theme="light"] .badge:hover::after,
html[data-theme="light"] .badge:hover::after {
  bottom: -6px !important;
  opacity: 1 !important;
  height: 5px !important;
}

/* Badge text enhancement for better readability */
html[data-bs-theme="light"] .badge,
html[data-theme="light"] .badge {
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  letter-spacing: 0.02em !important;
}

/* Animated shine effect for badges (moving reflection) */
html[data-bs-theme="light"] .badge::before,
html[data-theme="light"] .badge::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -100% !important;
  width: 100% !important;
  height: 200% !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 50%, 
    transparent 100%) !important;
  transform: skewX(-25deg) !important;
  animation: shine 4s ease-in-out infinite !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 50px !important;
  overflow: hidden !important;
}

/* White/light badge pills need extra contrast */
html[data-bs-theme="light"] .badge-light,
html[data-theme="light"] .badge-light,
html[data-bs-theme="light"] .badge.bg-light,
html[data-theme="light"] .badge.bg-light,
html[data-bs-theme="light"] .badge-secondary,
html[data-theme="light"] .badge-secondary {
  border: 3px solid rgba(102, 126, 234, 0.75) !important;
  background: rgba(250, 251, 253, 1) !important;
  color: #3a2f8f !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  box-shadow: 
    0 7px 30px rgba(102, 126, 234, 0.52),
    0 4px 15px rgba(118, 75, 162, 0.38),
    0 2px 6px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(102, 126, 234, 0.38) !important;
  overflow: hidden !important;
  position: relative !important;
}

html[data-bs-theme="light"] .badge-light:hover,
html[data-theme="light"] .badge-light:hover,
html[data-bs-theme="light"] .badge-secondary:hover,
html[data-theme="light"] .badge-secondary:hover {
  border-color: rgba(102, 126, 234, 0.85) !important;
  box-shadow: 
    0 7px 28px rgba(102, 126, 234, 0.45),
    0 4px 14px rgba(118, 75, 162, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-3px) scale(1.05) !important;
}

/* Animated shine effect for badges */
html[data-bs-theme="light"] .badge::before,
html[data-theme="light"] .badge::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -100% !important;
  width: 100% !important;
  height: 200% !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 50%, 
    transparent 100%) !important;
  transform: skewX(-25deg) !important;
  animation: shine 4s ease-in-out infinite !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 50px !important;
}

/* White/light badge pills need extra contrast */
html[data-bs-theme="light"] .badge-light,
html[data-theme="light"] .badge-light,
html[data-bs-theme="light"] .badge.bg-light,
html[data-theme="light"] .badge.bg-light {
  border: 3px solid rgba(102, 126, 234, 0.5) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #4c3fb5 !important;
  box-shadow: 
    0 4px 18px rgba(102, 126, 234, 0.3),
    0 2px 8px rgba(118, 75, 162, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(102, 126, 234, 0.2) !important;
  overflow: hidden !important;
}

html[data-bs-theme="light"] .badge-outline,
html[data-theme="light"] .badge-outline {
  background: transparent !important;
  border: 1px solid rgba(102, 126, 234, 0.5) !important;
  color: #4c3fb5 !important;
}

/* ============================================
   ALERTS - Softer with purple tints
   ============================================ */
html[data-bs-theme="light"] .alert,
html[data-theme="light"] .alert {
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 12px !important;
}

html[data-bs-theme="light"] .alert-info,
html[data-theme="light"] .alert-info {
  background: linear-gradient(135deg,
    rgba(224, 242, 254, 0.9) 0%,
    rgba(199, 210, 254, 0.85) 100%) !important;
  border: 1px solid rgba(96, 165, 250, 0.3) !important;
  color: #1e40af !important;
}

html[data-bs-theme="light"] .alert-success,
html[data-theme="light"] .alert-success {
  background: linear-gradient(135deg,
    rgba(220, 252, 231, 0.9) 0%,
    rgba(187, 247, 208, 0.85) 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  color: #166534 !important;
}

/* ============================================
   TOOLTIPS & POPOVERS
   ============================================ */
html[data-bs-theme="light"] .tooltip-inner,
html[data-theme="light"] .tooltip-inner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

html[data-bs-theme="light"] .popover,
html[data-theme="light"] .popover {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(102, 126, 234, 0.2) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

/* ============================================
   PROGRESS BARS - Gradient fill
   ============================================ */
html[data-bs-theme="light"] .progress,
html[data-theme="light"] .progress {
  background: rgba(224, 231, 255, 0.5) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

html[data-bs-theme="light"] .progress-bar,
html[data-theme="light"] .progress-bar {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%) !important;
  background-size: 200% 100% !important;
  animation: progressShimmer 2s ease infinite !important;
}

@keyframes progressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================
   TABLES - Clean with purple accents
   ============================================ */
html[data-bs-theme="light"] .table,
html[data-theme="light"] .table {
  --bs-table-bg: transparent !important;
}

html[data-bs-theme="light"] .table thead th,
html[data-theme="light"] .table thead th {
  background: linear-gradient(180deg,
    rgba(237, 233, 254, 0.8) 0%,
    rgba(224, 231, 255, 0.6) 100%) !important;
  border-bottom: 2px solid rgba(102, 126, 234, 0.25) !important;
  color: #1a202c !important;
}

html[data-bs-theme="light"] .table tbody tr:hover,
html[data-theme="light"] .table tbody tr:hover {
  background: rgba(102, 126, 234, 0.08) !important;
}

/* ============================================
   SCROLLBAR - Purple themed
   ============================================ */
html[data-bs-theme="light"] ::-webkit-scrollbar,
html[data-theme="light"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-bs-theme="light"] ::-webkit-scrollbar-track,
html[data-theme="light"] ::-webkit-scrollbar-track {
  background: rgba(224, 231, 255, 0.5);
}

html[data-bs-theme="light"] ::-webkit-scrollbar-thumb,
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: 5px;
}

html[data-bs-theme="light"] ::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5a67d8 0%, #6b3f8a 100%);
}

/* ACCORDIONS - Glassmorphic & Clean */
html[data-bs-theme="light"] .accordion-item,
html[data-theme="light"] .accordion-item {
  background-color: transparent !important;
  border: 1px solid rgba(102, 126, 234, 0.2) !important;
  border-radius: 8px !important;
  margin-bottom: 0.5rem !important;
  overflow: hidden !important;
}

html[data-bs-theme="light"] .accordion-button,
html[data-theme="light"] .accordion-button {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #2d3748 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

html[data-bs-theme="light"] .accordion-button:not(.collapsed),
html[data-theme="light"] .accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%) !important;
  color: #4c3fb5 !important;
  box-shadow: inset 0 -1px 0 rgba(102, 126, 234, 0.2) !important;
}

html[data-bs-theme="light"] .accordion-body,
html[data-theme="light"] .accordion-body {
  background: rgba(255, 255, 255, 0.4) !important;
  color: #4a5568 !important;
}

/* TABS - Modern Underline */
html[data-bs-theme="light"] .nav-tabs,
html[data-theme="light"] .nav-tabs {
  border-bottom: 2px solid rgba(102, 126, 234, 0.15) !important;
}

html[data-bs-theme="light"] .nav-tabs .nav-link,
html[data-theme="light"] .nav-tabs .nav-link {
  border: none !important;
  color: #718096 !important;
  margin-bottom: -2px !important;
  transition: all 0.3s ease !important;
}

html[data-bs-theme="light"] .nav-tabs .nav-link:hover,
html[data-theme="light"] .nav-tabs .nav-link:hover {
  color: #4c3fb5 !important;
  background: transparent !important;
}

html[data-bs-theme="light"] .nav-tabs .nav-link.active,
html[data-theme="light"] .nav-tabs .nav-link.active {
  color: #4c3fb5 !important;
  background: transparent !important;
  border-bottom: 2px solid #667eea !important;
  font-weight: 600 !important;
}

/* ============================================
   WCAG AA COLOR OVERRIDES - CRITICAL
   Bootstrap 5.3 default colors fail accessibility
   These override Bootstrap with 4.5:1+ contrast
   ============================================ */

/* Override Bootstrap's CSS Variables ONLY for light mode */
[data-bs-theme="light"] {
  --bs-primary: #063d8a !important;
  --bs-primary-rgb: 6, 61, 138 !important;
  --bs-success: #0f5132 !important;
  --bs-success-rgb: 15, 81, 50 !important;
  --bs-danger: #9e2a2b !important;
  --bs-danger-rgb: 158, 42, 43 !important;
  --bs-warning: #b45309 !important;
  --bs-warning-rgb: 180, 83, 9 !important;
  --bs-info: #0081a1 !important; /* Pa11y recommended value - 4.5:1 contrast */
  --bs-info-rgb: 0, 129, 161 !important;
}

/* Text Colors - Direct Override with Maximum Specificity */
html[data-bs-theme="light"] .text-primary,
html[data-bs-theme="light"] p.text-primary,
html[data-bs-theme="light"] h3.text-primary,
html[data-bs-theme="light"] span.text-primary,
html[data-bs-theme="light"] a.text-primary {
  color: #063d8a !important;
}

html[data-bs-theme="light"] .text-success,
html[data-bs-theme="light"] p.text-success,
html[data-bs-theme="light"] h3.text-success {
  color: #0f5132 !important;
}

html[data-bs-theme="light"] .text-danger,
html[data-bs-theme="light"] p.text-danger,
html[data-bs-theme="light"] h3.text-danger {
  color: #9e2a2b !important;
}

html[data-bs-theme="light"] .text-warning,
html[data-bs-theme="light"] p.text-warning,
html[data-bs-theme="light"] h3.text-warning {
  color: #b45309 !important;
}

html[data-bs-theme="light"] .text-info,
html[data-bs-theme="light"] p.text-info,
html[data-bs-theme="light"] h3.text-info {
  color: #055160 !important;
}

/* Buttons - Outline Variants with Proper Hover States */
html[data-bs-theme="light"] .btn-outline-primary {
  --bs-btn-color: #063d8a !important;
  --bs-btn-border-color: #063d8a !important;
  --bs-btn-hover-color: #063d8a !important;
  --bs-btn-hover-bg: rgba(6, 61, 138, 0.1) !important;
  --bs-btn-hover-border-color: #063d8a !important;
  --bs-btn-active-color: #ffffff !important;
  --bs-btn-active-bg: #063d8a !important;
  color: #063d8a !important;
  border-color: #063d8a !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

html[data-bs-theme="light"] .btn-outline-primary:hover {
  background: rgba(6, 61, 138, 0.1) !important;
  color: #063d8a !important;
  border-color: #063d8a !important;
  box-shadow: 0 4px 12px rgba(6, 61, 138, 0.2) !important;
  transform: translateY(-2px) !important;
}

html[data-bs-theme="light"] .btn-outline-success {
  --bs-btn-color: #0f5132 !important;
  --bs-btn-border-color: #0f5132 !important;
  --bs-btn-hover-color: #0f5132 !important;
  --bs-btn-hover-bg: rgba(15, 81, 50, 0.1) !important;
  --bs-btn-hover-border-color: #0f5132 !important;
  --bs-btn-active-color: #ffffff !important;
  --bs-btn-active-bg: #0f5132 !important;
  color: #0f5132 !important;
  border-color: #0f5132 !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

html[data-bs-theme="light"] .btn-outline-success:hover {
  background: rgba(15, 81, 50, 0.1) !important;
  color: #0f5132 !important;
  border-color: #0f5132 !important;
  box-shadow: 0 4px 12px rgba(15, 81, 50, 0.2) !important;
  transform: translateY(-2px) !important;
}

html[data-bs-theme="light"] .btn-outline-danger {
  --bs-btn-color: #9e2a2b !important;
  --bs-btn-border-color: #9e2a2b !important;
  --bs-btn-hover-color: #9e2a2b !important;
  --bs-btn-hover-bg: rgba(158, 42, 43, 0.1) !important;
  --bs-btn-hover-border-color: #9e2a2b !important;
  --bs-btn-active-color: #ffffff !important;
  --bs-btn-active-bg: #9e2a2b !important;
  color: #9e2a2b !important;
  border-color: #9e2a2b !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

html[data-bs-theme="light"] .btn-outline-danger:hover {
  background: rgba(158, 42, 43, 0.1) !important;
  color: #9e2a2b !important;
  border-color: #9e2a2b !important;
  box-shadow: 0 4px 12px rgba(158, 42, 43, 0.2) !important;
  transform: translateY(-2px) !important;
}

html[data-bs-theme="light"] .btn-outline-warning {
  --bs-btn-color: #b45309 !important;
  --bs-btn-border-color: #b45309 !important;
  --bs-btn-hover-color: #b45309 !important;
  --bs-btn-hover-bg: rgba(180, 83, 9, 0.1) !important;
  --bs-btn-hover-border-color: #b45309 !important;
  --bs-btn-active-color: #ffffff !important;
  --bs-btn-active-bg: #b45309 !important;
  color: #b45309 !important;
  border-color: #b45309 !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

html[data-bs-theme="light"] .btn-outline-warning:hover {
  background: rgba(180, 83, 9, 0.1) !important;
  color: #b45309 !important;
  border-color: #b45309 !important;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.2) !important;
  transform: translateY(-2px) !important;
}

html[data-bs-theme="light"] .btn-outline-info {
  --bs-btn-color: #055160 !important;
  --bs-btn-border-color: #055160 !important;
  --bs-btn-hover-color: #055160 !important;
  --bs-btn-hover-bg: rgba(5, 81, 96, 0.1) !important;
  --bs-btn-hover-border-color: #055160 !important;
  --bs-btn-active-color: #ffffff !important;
  --bs-btn-active-bg: #055160 !important;
  color: #055160 !important;
  border-color: #055160 !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

html[data-bs-theme="light"] .btn-outline-info:hover {
  background: rgba(5, 81, 96, 0.1) !important;
  color: #055160 !important;
  border-color: #055160 !important;
  box-shadow: 0 4px 12px rgba(5, 81, 96, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Badges - Background Colors */
html[data-bs-theme="light"] .badge.bg-primary {
  --bs-badge-color: #ffffff !important;
  background-color: #063d8a !important;
  color: #ffffff !important;
}

html[data-bs-theme="light"] .badge.bg-success {
  --bs-badge-color: #ffffff !important;
  background-color: #0f5132 !important;
  color: #ffffff !important;
}

html[data-bs-theme="light"] .badge.bg-danger {
  --bs-badge-color: #ffffff !important;
  background-color: #9e2a2b !important;
  color: #ffffff !important;
}

html[data-bs-theme="light"] .badge.bg-warning {
  --bs-badge-color: #ffffff !important;
  background-color: #b45309 !important;
  color: #ffffff !important;
}

html[data-bs-theme="light"] .badge.bg-info {
  --bs-badge-color: #ffffff !important;
  background-color: #055160 !important;
  color: #ffffff !important;
}

/* DEBUG: Visual confirmation this file loaded */
html[data-bs-theme="light"]::after {
  content: "Critical overrides loaded ✓";
  position: fixed;
  bottom: 0;
  right: 0;
  background: rgba(16, 185, 129, 0.9);
  color: white;
  padding: 4px 8px;
  font-size: 10px;
  z-index: 99999;
  border-radius: 4px 0 0 0;
  pointer-events: none;
  opacity: 0;
  animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}