/* ========================================
   ENHANCED DARK MODE - Medical Professional Theme
   Designed for Royal Blue (#1e3a8a) Brand
   ======================================== */

/* Dark Mode Color Variables - Medical Professional Palette */
.dark {
  /* Backgrounds - Deep Navy/Slate tones that complement royal blue */
  --dark-bg-primary: #0a1628;        /* Deep navy - main background */
  --dark-bg-secondary: #0f1f3a;      /* Rich navy - cards and sections */
  --dark-bg-tertiary: #1a2847;       /* Lighter navy - hover states */
  --dark-bg-elevated: #1e3152;       /* Elevated elements */
  --dark-bg-accent: #1e3a8a;         /* Brand blue for accents */
  
  /* Text colors - Optimized for readability on dark navy */
  --dark-text-primary: #f0f4f8;      /* Almost white - headings */
  --dark-text-secondary: #cbd5e1;    /* Light gray - body text */
  --dark-text-tertiary: #94a3b8;     /* Medium gray - muted text */
  --dark-text-muted: #64748b;        /* Dark gray - disabled/placeholder */
  --dark-text-inverse: #1a202c;      /* Dark text for light backgrounds */
  
  /* Borders and dividers */
  --dark-border: rgba(148, 163, 184, 0.15);
  --dark-border-strong: rgba(148, 163, 184, 0.25);
  --dark-border-accent: rgba(30, 58, 138, 0.3);
  
  /* Brand colors - Subtle adjustment for readability */
  --dark-brand-blue: #4a90e2;        /* Medium blue - professional & readable */
  --dark-brand-blue-hover: #5a9ff0;  /* Slightly lighter on hover */
  --dark-brand-blue-bg: rgba(74, 144, 226, 0.1);  /* Subtle background */
  --dark-brand-blue-light: #60a5fa;  /* Light brand blue */
  
  /* Status colors */
  --dark-success: #10b981;
  --dark-warning: #f59e0b;
  --dark-error: #ef4444;
  --dark-info: #4a90e2;
  
  /* Shadows for dark mode */
  --dark-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --dark-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --dark-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --dark-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
  --dark-shadow-brand: 0 4px 14px rgba(30, 58, 138, 0.3);
}

/* ========================================
   GLOBAL DARK MODE STYLES
   ======================================== */

.dark body {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-secondary);
}

/* Typography */
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: var(--dark-text-primary);
}

.dark p {
  color: var(--dark-text-secondary);
}

/* ========================================
   LINKS - Only change when truly needed
   ======================================== */

.dark a {
  color: var(--dark-brand-blue);
}

.dark a:hover {
  color: var(--dark-brand-blue-hover);
}

/* Keep Tailwind's brand-blue classes using the original color where appropriate */
.dark .text-brand-blue {
  color: #3b82f6 !important;  /* Brighter only for text that needs it */
}

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

.dark .header {
  background: rgba(10, 22, 40, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--dark-border);
  box-shadow: var(--dark-shadow);
}

.dark .header.scrolled {
  box-shadow: var(--dark-shadow-lg);
}

/* Navigation links */
.dark .nav-link-premium {
  color: var(--dark-text-secondary);
}

.dark .nav-link-premium:hover {
  color: var(--dark-brand-blue-hover);
  background: var(--dark-brand-blue-bg);
}

.dark .nav-link-premium::after {
  background: var(--dark-brand-blue);
}

/* ========================================
   MEGA MENU
   ======================================== */

.dark .mega-menu {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-xl);
}

.dark .mega-menu::before {
  border-bottom-color: var(--dark-bg-secondary);
}

.dark .mega-menu-category {
  border-color: transparent;
}

.dark .mega-menu-category:hover {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
}

.dark .mega-menu-category h4 {
  color: var(--dark-text-primary);
}

.dark .mega-menu-category p {
  color: var(--dark-text-tertiary);
}

.dark .mega-menu-category-icon {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

.dark .mega-menu-promo {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

/* ========================================
   FORMS & INPUTS
   ======================================== */

.dark input[type="search"],
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="tel"],
.dark input[type="number"],
.dark select,
.dark textarea {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--dark-text-primary);
}

.dark input[type="search"]::placeholder,
.dark input[type="text"]::placeholder,
.dark input[type="email"]::placeholder,
.dark input[type="password"]::placeholder,
.dark input[type="tel"]::placeholder,
.dark textarea::placeholder {
  color: var(--dark-text-muted);
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-brand-blue);
  box-shadow: 0 0 0 3px var(--dark-brand-blue-bg);
}

/* ========================================
   CARDS & CONTAINERS
   ======================================== */

.dark .bg-white {
  background-color: var(--dark-bg-secondary) !important;
}

.dark .bg-gray-50 {
  background-color: var(--dark-bg-tertiary) !important;
}

.dark .bg-gray-100 {
  background-color: var(--dark-bg-tertiary) !important;
}

/* Card hover effects */
.dark .hover\:bg-gray-50:hover {
  background-color: var(--dark-bg-tertiary) !important;
}

/* ========================================
   TEXT COLOR OVERRIDES
   ======================================== */

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

.dark .text-gray-800,
.dark .text-gray-700,
.dark .text-gray-600 {
  color: var(--dark-text-secondary) !important;
}

.dark .text-gray-500,
.dark .text-gray-400 {
  color: var(--dark-text-tertiary) !important;
}

.dark .text-gray-300 {
  color: var(--dark-text-secondary) !important;
}

/* ========================================
   BORDERS
   ======================================== */

.dark .border,
.dark .border-gray-200,
.dark .border-gray-300 {
  border-color: var(--dark-border) !important;
}

.dark .border-t,
.dark .border-b,
.dark .border-l,
.dark .border-r {
  border-color: var(--dark-border);
}

.dark .divide-gray-200 > * + * {
  border-color: var(--dark-border);
}

/* ========================================
   BUTTONS
   ======================================== */

/* Keep button gradients vibrant */
.dark .cart-btn-premium {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  box-shadow: var(--dark-shadow);
}

.dark .cart-btn-premium:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  box-shadow: var(--dark-shadow-lg);
}

/* Primary buttons should stay vibrant */
.dark button[class*="bg-brand-blue"],
.dark a[class*="bg-brand-blue"] {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
}

/* ========================================
   DROPDOWNS
   ======================================== */

.dark .dropdown-menu {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  box-shadow: var(--dark-shadow-xl);
}

.dark .dropdown-link {
  color: var(--dark-text-secondary);
}

.dark .dropdown-link:hover {
  background: var(--dark-bg-tertiary);
  color: var(--dark-brand-blue-hover);
}

/* ========================================
   MOBILE MENU
   ======================================== */

.dark .mobile-menu {
  background: var(--dark-bg-primary);
}

.dark .mobile-submenu {
  background: var(--dark-bg-secondary);
}

/* ========================================
   FOOTER
   ======================================== */

.dark .footer {
  background: var(--dark-bg-primary);
  border-top-color: var(--dark-border);
}

/* ========================================
   STATS & METRICS
   ======================================== */

.dark .stats-section,
.dark .stat-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */

.dark .toast {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-strong);
  box-shadow: var(--dark-shadow-xl);
}

/* ========================================
   MODALS
   ======================================== */

.dark #vikingModal > div {
  background: var(--dark-bg-secondary) !important;
}

/* ========================================
   TABLES
   ======================================== */

.dark table {
  background: var(--dark-bg-secondary);
}

.dark thead {
  background: var(--dark-bg-tertiary);
}

.dark tbody tr {
  border-bottom-color: var(--dark-border);
}

.dark tbody tr:hover {
  background: var(--dark-bg-tertiary);
}

.dark th,
.dark td {
  color: var(--dark-text-secondary);
}

/* ========================================
   BADGES & PILLS
   ======================================== */

.dark .badge,
.dark .pill {
  background: var(--dark-bg-elevated);
  color: var(--dark-text-primary);
  border-color: var(--dark-border);
}

/* ========================================
   SPECIFIC COMPONENT FIXES
   ======================================== */

/* Product cards */
.dark .product-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

.dark .product-card:hover {
  background: var(--dark-bg-tertiary);
  box-shadow: var(--dark-shadow-lg);
}

/* Feature sections */
.dark .feature-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

.dark .feature-card:hover {
  background: var(--dark-bg-tertiary);
}

/* Breadcrumbs */
.dark .breadcrumb {
  background: var(--dark-bg-secondary);
  border-bottom-color: var(--dark-border);
}

/* ========================================
   HOME PAGE SPECIFIC DARK MODE STYLES
   ======================================== */

/* Hero Section Dark Mode */
.dark .hero-split {
  background: var(--dark-bg-accent);
}

.dark .hero-content-side {
  background: linear-gradient(135deg, var(--dark-bg-accent) 0%, var(--dark-bg-accent) 100%);
}

.dark .hero-video-side {
  background: var(--dark-bg-accent);
}

/* Stats Bar Dark Mode */
.dark .stats-bar-clinical {
  background: linear-gradient(135deg, var(--dark-bg-accent) 0%, var(--dark-bg-accent) 100%);
}

.dark .stat-number-clinical {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark .stat-label-clinical {
  color: rgba(255, 255, 255, 0.95);
}

/* Product Category Cards Dark Mode */
.dark .product-category-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-accent);
  box-shadow: var(--dark-shadow);
}

.dark .product-category-card:hover {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-brand-blue);
  box-shadow: var(--dark-shadow-brand);
}

.dark .product-category-image {
  background: var(--dark-bg-primary);
}

.dark .product-category-title {
  color: var(--dark-text-primary);
}

.dark .product-category-desc {
  color: var(--dark-text-tertiary);
}

.dark .product-category-features li {
  color: var(--dark-text-secondary);
  border-bottom-color: var(--dark-border);
}

.dark .product-category-link {
  color: var(--dark-brand-blue);
}

/* Section Headers Dark Mode */
.dark .section-label-clinical {
  background: rgba(30, 58, 138, 0.2);
  color: var(--dark-brand-blue-light);
  border-color: var(--dark-border-accent);
}

.dark .section-title-clinical {
  color: var(--dark-text-primary);
}

.dark .section-subtitle-clinical {
  color: var(--dark-text-tertiary);
}

/* Testimonials Dark Mode */
.dark .testimonials-section {
  background: linear-gradient(135deg, var(--dark-bg-accent) 0%, #1e40af 100%);
}

.dark .testimonial-card {
  background: rgba(30, 58, 138, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Featured Products Dark Mode */
.dark .featured-products-section {
  background-color: var(--dark-bg-primary);
}

.dark .product-card-white {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-accent);
  box-shadow: var(--dark-shadow);
}

.dark .product-card-white:hover {
  border-color: var(--dark-brand-blue);
  box-shadow: var(--dark-shadow-brand);
}

.dark .product-image-white {
  background: var(--dark-bg-primary);
  border-bottom-color: var(--dark-border);
}

.dark .product-badge-white {
  background: linear-gradient(135deg, var(--dark-brand-blue) 0%, var(--dark-brand-blue-light) 100%);
  box-shadow: var(--dark-shadow-brand);
}

/* Final CTA Dark Mode */
.dark .final-cta {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

.dark .final-cta-title {
  color: var(--dark-text-primary);
}

.dark .final-cta-desc {
  color: var(--dark-text-tertiary);
}

.dark .btn-clinical-cta {
  background: var(--dark-brand-blue);
  border-color: var(--dark-brand-blue);
}

.dark .btn-clinical-cta:hover {
  background: var(--dark-brand-blue-hover);
  border-color: var(--dark-brand-blue-hover);
}

/* What We Do Cards Dark Mode */
.dark .what-we-do-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

.dark .what-we-do-card:hover {
  border-color: var(--dark-brand-blue);
  box-shadow: var(--dark-shadow-brand);
}

.dark .what-we-do-image {
  background: var(--dark-bg-primary);
}

.dark .what-we-do-title {
  color: var(--dark-text-primary);
}

.dark .what-we-do-desc {
  color: var(--dark-text-tertiary);
}

.dark .what-we-do-link {
  color: var(--dark-brand-blue);
}

/* Capabilities Section Dark Mode */
.dark .capabilities-image-large,
.dark .capabilities-image-small {
  border-color: var(--dark-border);
}

.dark .capabilities-label {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--dark-brand-blue);
}

.dark .capabilities-stat-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

.dark .capabilities-stat-card:hover {
  border-color: var(--dark-brand-blue);
}

.dark .capabilities-stat-number,
.dark .capabilities-stat-title,
.dark .capabilities-stat-desc {
  color: var(--dark-text-primary);
}

/* Commitment Section Dark Mode */
.dark .commitment-section {
  background: linear-gradient(135deg, var(--dark-bg-accent) 0%, var(--dark-bg-accent) 100%);
}

.dark .commitment-badge {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.dark .commitment-title {
  color: white;
}

.dark .commitment-text {
  color: rgba(255, 255, 255, 0.95);
}

/* Carousel Controls Dark Mode */
.dark .carousel-control {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--dark-brand-blue);
  box-shadow: var(--dark-shadow);
}

.dark .carousel-control:hover {
  background: linear-gradient(135deg, var(--dark-brand-blue) 0%, var(--dark-brand-blue-light) 100%);
  border-color: var(--dark-brand-blue);
  color: white;
  box-shadow: var(--dark-shadow-brand);
}

/* Gradient Orbs Dark Mode - Make them more subtle */
.dark .gradient-orb {
  opacity: 0.3;
}

/* Alert Messages Dark Mode */
.dark .alert {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
  color: var(--dark-text-secondary);
}

.dark .alert-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--dark-success);
  color: var(--dark-success);
}

.dark .alert-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--dark-error);
  color: var(--dark-error);
}

.dark .alert-info {
  background: rgba(74, 144, 226, 0.1);
  border-color: var(--dark-info);
  color: var(--dark-info);
}

/* ========================================
   SMOOTH TRANSITIONS
   ======================================== */

* {
  transition: background-color 0.2s ease, 
              border-color 0.2s ease, 
              color 0.2s ease,
              box-shadow 0.2s ease;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.dark :focus-visible {
  outline: 2px solid var(--dark-brand-blue);
  outline-offset: 2px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .dark {
    background: white !important;
    color: black !important;
  }
}