/* 
   Dark Mode Styles
   This file contains all dark mode styles using CSS custom properties
   Light mode styles remain completely unchanged
*/

/* CSS Custom Properties for Theme Switching */
:root {
    /* Light mode colors (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    --shadow-heavy: rgba(0, 0, 0, 0.25);
    --navbar-bg: #ffffff;
    --footer-bg: #1f2937;
    --footer-text: #ffffff;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
    --card-hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Dark mode colors */
[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --border-primary: #374151;
    --border-secondary: #4b5563;
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.6);
    --navbar-bg: #1f2937;
    --footer-bg: #111827;
    --footer-text: #f9fafb;
    --card-bg: #1f2937;
    --input-bg: #374151;
    --card-hover-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 12px 20px -8px rgba(0, 0, 0, 0.4);
    --card-blue-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --card-blue-hover-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Dark mode specific card styles */
[data-theme="dark"] .bg-blue-200 {
    background: var(--card-blue-gradient) !important;
    color: white !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

[data-theme="dark"] .bg-blue-200:hover {
    background: var(--card-blue-hover-gradient) !important;
    transform: translateY(-8px) !important;
    box-shadow: var(--card-hover-shadow) !important;
}

/* Dark mode text and icon styles for cards */
[data-theme="dark"] .bg-blue-200 h1,
[data-theme="dark"] .bg-blue-200 h2,
[data-theme="dark"] .bg-blue-200 h3,
[data-theme="dark"] .bg-blue-200 h4,
[data-theme="dark"] .bg-blue-200 h5,
[data-theme="dark"] .bg-blue-200 h6 {
    color: white !important;
}

[data-theme="dark"] .bg-blue-200 p {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .bg-blue-200 .bg-blue-300,
[data-theme="dark"] .bg-blue-200 .bg-blue-100 {
    background-color: rgba(96, 165, 250, 0.3) !important;
    border: 1px solid rgba(147, 197, 253, 0.4) !important;
}

[data-theme="dark"] .bg-blue-200:hover .bg-blue-300,
[data-theme="dark"] .bg-blue-200:hover .bg-blue-100 {
    background-color: rgba(147, 197, 253, 0.4) !important;
    transform: scale(1.1) !important;
}

/* Dark mode styles for contact cards */
[data-theme="dark"] .contact-section .bg-white.rounded-xl {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .contact-section .bg-white.rounded-xl h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .contact-section .bg-white.rounded-xl p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .contact-section .bg-white.rounded-xl .bg-blue-100 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .contact-section .bg-white.rounded-xl:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .contact-section .bg-white.rounded-xl:hover .bg-blue-100 {
    background-color: var(--accent-blue) !important;
    border: 1px solid rgba(96, 165, 250, 0.6) !important;
    box-shadow: 
        0 0 25px rgba(96, 165, 250, 0.5),
        0 0 50px rgba(96, 165, 250, 0.3),
        0 8px 16px rgba(96, 165, 250, 0.4) !important;
}

[data-theme="dark"] .contact-section .bg-white.rounded-xl:hover .text-blue-600 {
    color: white !important;
}

[data-theme="dark"] .contact-section .bg-white.rounded-xl a {
    color: #60a5fa !important;
}

[data-theme="dark"] .contact-section .bg-white.rounded-xl a:hover {
    color: #93c5fd !important;
}

/* Dark mode styles for social icons */
[data-theme="dark"] .social-icon {
    color: #9ca3af;
}

/* Dark Mode Toggle Button Styles */
.dark-mode-toggle {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    transition: color 0.3s ease;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151; /* text-gray-800 */
    justify-content: center;
    user-select: none;
    white-space: nowrap;
}

.dark-mode-toggle:hover {
    color: #3b82f6; /* text-blue-500 - same as nav-link hover */
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.dark-mode-toggle:active {
    transform: translateY(0);
}

.dark-mode-toggle .toggle-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
}

.dark-mode-toggle:hover .toggle-icon {
    transform: scale(1.05); /* More subtle than before */
}

.dark-mode-toggle .toggle-text {
    font-weight: 500; /* Match nav-link font-weight */
    letter-spacing: 0;
}

/* Prevent flash of unstyled content during theme loading */
html {
    transition: none !important;
}

html.theme-loading * {
    transition: none !important;
}

/* Re-enable transitions after theme is set */
html:not(.theme-loading) * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Theme loading class to prevent FOUC */
.theme-loading {
    visibility: hidden;
}

.theme-loaded {
    visibility: visible;
}

/* Apply theme colors to body and main elements */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Navbar Dark Mode Styles */
[data-theme="dark"] nav,
[data-theme="dark"] .site-navbar,
[data-theme="dark"] #navbar-container > nav,
[data-theme="dark"] #navbar-container nav,
[data-theme="dark"] header > nav {
    background-color: var(--navbar-bg) !important;
    border-bottom: 2px solid var(--border-primary) !important;
    box-shadow: 0 1px 3px var(--shadow-medium) !important;
}

/* Navbar link text colors - more specific selectors */
[data-theme="dark"] .nav-link,
[data-theme="dark"] nav a,
[data-theme="dark"] nav .text-gray-800,
[data-theme="dark"] .site-navbar a,
[data-theme="dark"] .site-navbar .nav-link,
[data-theme="dark"] nav ul li a,
[data-theme="dark"] .site-navbar ul li a,
[data-theme="dark"] #navbar-container a,
[data-theme="dark"] header a:not([class*="btn"]),
[data-theme="dark"] #mobile-menu a {
    color: white !important;
}

/* Override navigation-footer.css specific styles */
[data-theme="dark"] .nav-link,
[data-theme="dark"] #navbar-container a,
[data-theme="dark"] .site-navbar a,
[data-theme="dark"] nav a,
[data-theme="dark"] header a:not([class*="btn"]),
[data-theme="dark"] #mobile-menu a {
    color: white !important;
    background-color: transparent !important;
}

/* Navbar hover states */
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] nav a:hover,
[data-theme="dark"] nav .text-gray-800:hover,
[data-theme="dark"] .site-navbar a:hover,
[data-theme="dark"] .site-navbar .nav-link:hover,
[data-theme="dark"] nav ul li a:hover,
[data-theme="dark"] .site-navbar ul li a:hover,
[data-theme="dark"] #navbar-container a:hover,
[data-theme="dark"] header a:not([class*="btn"]):hover,
[data-theme="dark"] #mobile-menu a:hover {
    color: var(--accent-blue) !important;
    background-color: transparent !important;
}

/* Override specific Tailwind text color classes in navbar */
[data-theme="dark"] nav .text-gray-800,
[data-theme="dark"] .site-navbar .text-gray-800 {
    color: white !important;
}

[data-theme="dark"] nav .text-gray-800:hover,
[data-theme="dark"] .site-navbar .text-gray-800:hover {
    color: var(--accent-blue) !important;
}

[data-theme="dark"] .hamburger-line {
    background-color: var(--text-primary) !important;
}

/* Dark mode toggle button styles */
[data-theme="dark"] .dark-mode-toggle,
[data-theme="dark"] .mobile-dark-toggle {
    color: white !important;
    background-color: transparent !important;
}

/* Dark mode styles for unified badge system */
[data-theme="dark"] .section-badge,
[data-theme="dark"] .category-badge,
[data-theme="dark"] .industry-badge {
    background: rgba(37, 99, 235, 0.2) !important; /* Semi-transparent blue */
    color: var(--accent-blue) !important;
    border: 1px solid rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .section-badge:hover,
[data-theme="dark"] .category-badge:hover,
[data-theme="dark"] .industry-badge:hover {
    background: var(--accent-blue) !important;
    color: white !important;
    border-color: var(--accent-blue);
}

/* Dark Mode Blue Shadow System */
/* Base blue shadows for cards in dark mode */
[data-theme="dark"] .bg-white.rounded-lg,
[data-theme="dark"] .bg-white.rounded-xl,
[data-theme="dark"] .product-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .industry-card,
[data-theme="dark"] .process-step,
[data-theme="dark"] .alphacode-section-card,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(96, 165, 250, 0.15), 
                0 2px 4px -1px rgba(96, 165, 250, 0.1),
                0 0 0 1px rgba(96, 165, 250, 0.05) !important;
}

/* Enhanced blue shadows on hover in dark mode */
[data-theme="dark"] .bg-white.rounded-lg:hover,
[data-theme="dark"] .bg-white.rounded-xl:hover,
[data-theme="dark"] .product-card:hover,
[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .industry-card:hover,
[data-theme="dark"] .process-step:hover,
[data-theme="dark"] .alphacode-section-card:hover,
[data-theme="dark"] .hover\\:shadow-lg:hover,
[data-theme="dark"] .hover\\:shadow-xl:hover {
    box-shadow: 0 10px 15px -3px rgba(96, 165, 250, 0.25), 
                0 4px 6px -2px rgba(96, 165, 250, 0.2),
                0 0 0 1px rgba(96, 165, 250, 0.1) !important;
}

/* Special glow effect for dark mode cards */
[data-theme="dark"] .bg-white.rounded-lg:hover,
[data-theme="dark"] .bg-white.rounded-xl:hover,
[data-theme="dark"] .product-card:hover,
[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .industry-card:hover,
[data-theme="dark"] .process-step:hover,
[data-theme="dark"] .alphacode-section-card:hover {
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

/* Mobile menu dark mode */
[data-theme="dark"] .px-2.pt-2.pb-3,
[data-theme="dark"] .mobile-menu,
[data-theme="dark"] .px-2.pt-2.pb-3.bg-white {
    background-color: var(--navbar-bg) !important;
}

/* Mobile menu links */
[data-theme="dark"] .px-2.pt-2.pb-3 a,
[data-theme="dark"] .mobile-menu a,
[data-theme="dark"] .px-2.pt-2.pb-3 .nav-link,
[data-theme="dark"] .px-2.pt-2.pb-3 .text-gray-800 {
    color: white !important;
}

[data-theme="dark"] .px-2.pt-2.pb-3 a:hover,
[data-theme="dark"] .mobile-menu a:hover,
[data-theme="dark"] .px-2.pt-2.pb-3 .nav-link:hover,
[data-theme="dark"] .px-2.pt-2.pb-3 .text-gray-800:hover {
    color: var(--accent-blue) !important;
}

/* Corporate Footer Dark Mode Styles */
[data-theme="dark"] .corporate-footer {
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-primary) !important;
}

[data-theme="dark"] .footer-tagline {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .footer-address {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .footer-column h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .footer-column a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .footer-column a:hover {
    color: var(--accent-blue) !important;
}

[data-theme="dark"] .footer-bottom {
    background-color: var(--bg-primary) !important;
    border-top: 1px solid var(--border-primary) !important;
}

[data-theme="dark"] .footer-bottom p {
    color: var(--text-secondary) !important;
}

/* Cards and Content Areas */
[data-theme="dark"] .card,
[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-gray-200 {
    background-color: var(--bg-tertiary) !important;
}

/* Text Colors */
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-500 {
    color: var(--text-tertiary) !important;
}

/* Borders */
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .border-gray-400 {
    border-color: var(--border-secondary) !important;
}

/* Blue text colors */
[data-theme="dark"] .text-blue-500,
[data-theme="dark"] .text-blue-600 {
    color: var(--accent-blue) !important;
}


/* Button hover states - preserve text color */
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .project-btn:hover,
[data-theme="dark"] button:hover,
[data-theme="dark"] .cta-button:hover,
[data-theme="dark"] a.bg-blue-600:hover,
[data-theme="dark"] a.bg-blue-500:hover,
[data-theme="dark"] a.bg-blue-700:hover,
[data-theme="dark"] .inline-block.bg-blue-600:hover,
[data-theme="dark"] .inline-block.bg-blue-500:hover,
[data-theme="dark"] .inline-block.bg-blue-700:hover,
[data-theme="dark"] .inline-flex.bg-blue-600:hover,
[data-theme="dark"] .inline-flex.bg-blue-500:hover,
[data-theme="dark"] .inline-flex.bg-blue-700:hover {
    color: white !important;
}

/* Comprehensive button text color overrides for dark mode */
/* Ensure all button-like elements have proper text color */
[data-theme="dark"] a[class*="bg-blue"]:not([class*="text-white"]),
[data-theme="dark"] button[class*="bg-blue"]:not([class*="text-white"]),
[data-theme="dark"] .btn[class*="bg-blue"]:not([class*="text-white"]),
[data-theme="dark"] .project-btn[class*="bg-blue"]:not([class*="text-white"]) {
    color: white !important;
}

/* Fallback for any button elements that might not have explicit text color */
[data-theme="dark"] .bg-blue-600,
[data-theme="dark"] .bg-blue-700,
[data-theme="dark"] .bg-blue-500 {
    color: white !important;
}

/* Ensure hover states maintain text color */
[data-theme="dark"] .bg-blue-600:hover,
[data-theme="dark"] .bg-blue-700:hover,
[data-theme="dark"] .bg-blue-500:hover {
    color: white !important;
}

/* Override any conflicting text color classes on buttons */
[data-theme="dark"] .project-btn.text-white,
[data-theme="dark"] .btn.text-white,
[data-theme="dark"] a.text-white[class*="bg-blue"],
[data-theme="dark"] button.text-white[class*="bg-blue"] {
    color: white !important;
}

/* Handle specific button patterns from the HTML */
[data-theme="dark"] .inline-block.bg-blue-600.hover\\:bg-blue-700.text-white,
[data-theme="dark"] .inline-flex.bg-blue-600.text-white,
[data-theme="dark"] a.inline-block[class*="bg-blue"][class*="text-white"],
[data-theme="dark"] a.inline-flex[class*="bg-blue"][class*="text-white"] {
    color: white !important;
}

/* Special case for CTA buttons in hero sections */
[data-theme="dark"] .inline-flex.items-center.px-8.py-4.bg-white.text-blue-700 {
    background-color: var(--card-bg) !important;
    color: var(--accent-blue) !important;
    border: 1px solid var(--border-primary) !important;
}

[data-theme="dark"] .inline-flex.items-center.px-8.py-4.bg-white.text-blue-700:hover {
    background-color: var(--accent-blue) !important;
    color: white !important;
}

/* Form Elements */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--input-bg) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* Shadows and Box Shadows */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm {
    box-shadow: 0 1px 3px var(--shadow-light), 0 1px 2px var(--shadow-light) !important;
}

[data-theme="dark"] .shadow-md {
    box-shadow: 0 4px 6px var(--shadow-medium), 0 2px 4px var(--shadow-light) !important;
}

[data-theme="dark"] .shadow-lg {
    box-shadow: 0 10px 15px var(--shadow-medium), 0 4px 6px var(--shadow-light) !important;
}

[data-theme="dark"] .shadow-xl {
    box-shadow: 0 20px 25px var(--shadow-medium), 0 10px 10px var(--shadow-light) !important;
}

/* Footer Styles */
[data-theme="dark"] footer,
[data-theme="dark"] .corporate-footer {
    background-color: var(--footer-bg) !important;
    color: var(--footer-text) !important;
}

[data-theme="dark"] footer a,
[data-theme="dark"] .corporate-footer a {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] footer a:hover,
[data-theme="dark"] .corporate-footer a:hover {
    color: var(--accent-blue) !important;
}

/* Service Icons and Special Elements */
[data-theme="dark"] .service-icon-container {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .service-icon-container:hover {
    background-color: var(--accent-blue) !important;
}

/* Carousel and Hero Section */
[data-theme="dark"] .carousel-slide::before {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Scrollbar Dark Mode */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

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

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Special Backgrounds and Sections */
[data-theme="dark"] section {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .hero-section {
    background-color: var(--bg-primary) !important;
}

/* Images and Media - exclude logo images from general image opacity changes */
[data-theme="dark"] img:not(.carousel-slide img):not(.logo):not(.nav-logo img):not([src*="aclogo"]) {
    opacity: 0.9;
}

/* Preserve logo visibility and ensure consistent sizing - logos are handled by JavaScript */
[data-theme="dark"] .logo,
[data-theme="dark"] .nav-logo img,
[data-theme="dark"] .footer-logo img,
[data-theme="dark"] [src*="aclogo"] {
    opacity: 1 !important;
    filter: none !important;
}

/* BULLETPROOF logo sizing - override everything */
[data-theme="dark"] .nav-logo img,
[data-theme="dark"] img[src*="aclogo(d).png"] {
    height: 40px !important;
    width: auto !important;
    max-height: 40px !important;
    min-height: 40px !important;
    object-fit: contain !important;
    display: inline-block !important;
}

[data-theme="dark"] .footer-logo .logo,
[data-theme="dark"] .footer-logo img,
[data-theme="dark"] .logo[src*="aclogo(d).png"] {
    height: 50px !important;
    width: auto !important;
    max-height: 50px !important;
    min-height: 50px !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* Links */
[data-theme="dark"] a:not(.nav-link):not(.btn):not(footer a) {
    color: var(--accent-blue) !important;
}

[data-theme="dark"] a:not(.nav-link):not(.btn):not(footer a):hover {
    color: var(--accent-blue-hover) !important;
}

/* Special content areas */
[data-theme="dark"] .content,
[data-theme="dark"] .main-content,
[data-theme="dark"] main {
    background-color: var(--bg-primary) !important;
}

/* Dark mode responsive adjustments */
@media (max-width: 768px) {
    .dark-mode-toggle {
        padding: 0;
        font-size: 14px;
        gap: 6px;
    }
    
    .dark-mode-toggle .toggle-icon {
        font-size: 16px;
    }
    
    .dark-mode-toggle .toggle-text {
        font-size: 14px;
    }
    
    /* Mobile menu specific styling */
    .mobile-dark-toggle {
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        margin: 8px 0 !important;
        padding: 12px 16px !important;
        color: #374151 !important; /* text-gray-800 */
        font-weight: 500 !important;
    }
    
    .mobile-dark-toggle:hover {
        background: #f9fafb !important; /* bg-gray-50 */
        color: #3b82f6 !important; /* text-blue-500 */
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Ensure smooth transitions for all theme changes */
/* Prevent flash of unstyled content during theme loading */
html {
    transition: none !important;
}

html.theme-loading * {
    transition: none !important;
}

/* Re-enable transitions after theme is set */
html:not(.theme-loading) * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Theme loading class to prevent FOUC */
.theme-loading {
    visibility: hidden;
}

.theme-loaded {
    visibility: visible;
}

/* Page-Specific Dark Mode Styles */

/* Contact Page Dark Mode */
[data-theme="dark"] .input-field {
    background-color: var(--input-bg) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .input-field:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}

[data-theme="dark"] .input-field.error {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2) !important;
}

[data-theme="dark"] .contact-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .submit-btn {
    background-color: var(--button-bg) !important;
    color: white !important;
}

[data-theme="dark"] .submit-btn:hover {
    background-color: var(--button-hover-bg) !important;
    color: white !important;
}

/* Special button cases */
[data-theme="dark"] .bg-white.text-blue-600,
[data-theme="dark"] .bg-white.text-blue-700 {
    background-color: var(--card-bg) !important;
    color: var(--accent-blue) !important;
    border: 1px solid var(--border-primary) !important;
}

[data-theme="dark"] .bg-white.text-blue-600:hover,
[data-theme="dark"] .bg-white.text-blue-700:hover {
    background-color: var(--accent-blue) !important;
    color: white !important;
}

/* Services Page Dark Mode */
[data-theme="dark"] .service-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .service-card:hover {
    box-shadow: 0 10px 25px -5px rgba(96, 165, 250, 0.2), 0 8px 10px -6px rgba(96, 165, 250, 0.1) !important;
}

[data-theme="dark"] .feature-tag {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .feature-tag:hover {
    box-shadow: 0 4px 6px -1px rgba(96, 165, 250, 0.2) !important;
}

[data-theme="dark"] .process-step {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .process-number {
    background-color: var(--accent-blue) !important;
    color: white !important;
}

/* Products Page Dark Mode */
[data-theme="dark"] .product-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .product-feature {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Industries Page Dark Mode */
[data-theme="dark"] .industry-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .industry-stat {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
}

/* Table Dark Mode */
[data-theme="dark"] table {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] td {
    color: var(--text-secondary) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] tr:nth-child(even) {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] tr:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Modal and Popup Dark Mode */
[data-theme="dark"] .modal,
[data-theme="dark"] .popup {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .modal-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Badge and Tag Dark Mode */
[data-theme="dark"] .badge,
[data-theme="dark"] .tag {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Alert and Notification Dark Mode */
[data-theme="dark"] .alert {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: #22c55e !important;
    color: #22c55e !important;
}

[data-theme="dark"] .alert-error {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
}

/* Dropdown and Select Dark Mode */
[data-theme="dark"] .dropdown {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
    box-shadow: 0 4px 6px var(--shadow-medium) !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-blue) !important;
}

/* Code and Pre Dark Mode */
[data-theme="dark"] code {
    background-color: var(--bg-tertiary) !important;
    color: var(--accent-blue) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] pre {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Progress Bar Dark Mode */
[data-theme="dark"] .progress {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .progress-bar {
    background-color: var(--accent-blue) !important;
}

/* Breadcrumb Dark Mode */
[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .breadcrumb-item {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-primary) !important;
}

/* Pagination Dark Mode */
[data-theme="dark"] .pagination {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .page-link {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-blue) !important;
}

[data-theme="dark"] .page-link.active {
    background-color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
    color: white !important;
}

/* Tooltip Dark Mode */
[data-theme="dark"] .tooltip {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
    box-shadow: 0 2px 8px var(--shadow-medium) !important;
}

/* Additional Tailwind Dark Mode Overrides */
[data-theme="dark"] .text-white {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-black {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100 {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-slate-200,
[data-theme="dark"] .bg-slate-300 {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-800 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-slate-900 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-300 {
    border-color: var(--border-primary) !important;
}

/* Hero Section and Carousel Specific Dark Mode */
[data-theme="dark"] .hero-section {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .carousel-slide .text-white {
    color: white !important; /* Keep carousel text white for contrast */
}

/* Ensure carousel buttons have white text */
[data-theme="dark"] .carousel-slide .project-btn,
[data-theme="dark"] .carousel-slide a.inline-block,
[data-theme="dark"] .carousel-slide a[class*="bg-blue"] {
    color: white !important;
}

[data-theme="dark"] .carousel-slide .project-btn:hover,
[data-theme="dark"] .carousel-slide a.inline-block:hover,
[data-theme="dark"] .carousel-slide a[class*="bg-blue"]:hover {
    color: white !important;
}

/* Ensure About AlphaCode section button has white text */
[data-theme="dark"] .project-btn,
[data-theme="dark"] a.project-btn {
    color: white !important;
}

[data-theme="dark"] .project-btn:hover,
[data-theme="dark"] a.project-btn:hover {
    color: white !important;
}

/* Ensure images maintain proper contrast */
[data-theme="dark"] .service-development,
[data-theme="dark"] .service-modernization,
[data-theme="dark"] .service-support,
[data-theme="dark"] .service-analytics,
[data-theme="dark"] .service-governance {
    filter: brightness(0.9) contrast(1.1);
}

/* Dark mode for specific utility classes */
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .ring-gray-300 {
    --tw-ring-color: var(--border-primary) !important;
}

[data-theme="dark"] .placeholder-gray-400::placeholder {
    color: var(--text-tertiary) !important;
}

/* Focus ring colors for dark mode */
[data-theme="dark"] .focus\:ring-blue-500:focus {
    --tw-ring-color: rgba(96, 165, 250, 0.5) !important;
}

/* Hover state improvements */
[data-theme="dark"] .hover\:bg-gray-50:hover {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .hover\:text-gray-900:hover {
    color: var(--text-primary) !important;
}

/* Group hover states */
[data-theme="dark"] .group:hover .group-hover\:text-blue-600 {
    color: var(--accent-blue) !important;
}

/* Dark mode for specific components that might be missed */
[data-theme="dark"] .prose {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .prose h1,
[data-theme="dark"] .prose h2,
[data-theme="dark"] .prose h3,
[data-theme="dark"] .prose h4,
[data-theme="dark"] .prose h5,
[data-theme="dark"] .prose h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .prose p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .prose a {
    color: var(--accent-blue) !important;
}

[data-theme="dark"] .prose blockquote {
    border-left-color: var(--border-secondary) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .prose code {
    background-color: var(--bg-tertiary) !important;
    color: var(--accent-blue) !important;
}

/* Dark mode for AlphaCode Section Cards - "Why Choose AlphaCode" section */
[data-theme="dark"] .alphacode-section-card.variant-1,
[data-theme="dark"] .alphacode-section-card.variant-2,
[data-theme="dark"] .alphacode-section-card.variant-3,
[data-theme="dark"] .alphacode-section-card.variant-4,
[data-theme="dark"] .alphacode-section-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
    box-shadow: 0 10px 15px -3px rgba(96, 165, 250, 0.2), 
                0 4px 6px -2px rgba(96, 165, 250, 0.15),
                0 2px 4px 0 rgba(96, 165, 250, 0.1) !important;
}

[data-theme="dark"] .alphacode-section-card:hover {
    box-shadow: 0 20px 25px -5px rgba(96, 165, 250, 0.3), 
                0 10px 15px -3px rgba(96, 165, 250, 0.2),
                0 4px 8px -2px rgba(96, 165, 250, 0.15) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

[data-theme="dark"] .alphacode-card-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alphacode-card-description {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .alphacode-icon-container {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Contact icons to match alphacode icons exactly */
[data-theme="dark"] .contact-icon-container {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .contact-card:hover .contact-icon-container {
    background-color: var(--accent-blue) !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 
        0 0 25px rgba(96, 165, 250, 0.5),
        0 0 50px rgba(96, 165, 250, 0.3),
        0 8px 16px rgba(96, 165, 250, 0.4) !important;
}

/* Fix standalone Core Values section icon to match other icons */
[data-theme="dark"] .bg-blue-100.p-4.rounded-full.w-16.h-16 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Fix contact page icons to match other icons */
[data-theme="dark"] .inline-flex.bg-blue-100.rounded-full.w-16.h-16,
[data-theme="dark"] .contact-card .bg-blue-100.rounded-full,
[data-theme="dark"] .bg-blue-100.rounded-full.mb-6 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Contact card hover effects for icons */
[data-theme="dark"] .contact-card:hover .bg-blue-100.rounded-full {
    background-color: var(--accent-blue) !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 
        0 0 25px rgba(96, 165, 250, 0.5),
        0 0 50px rgba(96, 165, 250, 0.3),
        0 8px 16px rgba(96, 165, 250, 0.4) !important;
}

/* FINAL OVERRIDE - Force remove ALL blue backgrounds from contact icons */
[data-theme="dark"] .contact-section .bg-blue-100,
[data-theme="dark"] .contact-card .bg-blue-100,
[data-theme="dark"] div.bg-blue-100.rounded-full {
    background-color: rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* SPECIFIC FIX - Target exact contact icon structure to match Why Choose AlphaCode */
[data-theme="dark"] .inline-flex.items-center.justify-center.w-16.h-16.bg-blue-100.rounded-full.mb-6,
[data-theme="dark"] div.inline-flex.items-center.justify-center.w-16.h-16.bg-blue-100.rounded-full,
[data-theme="dark"] .contact-card div.inline-flex.bg-blue-100.rounded-full {
    background-color: rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Contact card hover effects - match Why Choose AlphaCode exactly */
[data-theme="dark"] .contact-card:hover .inline-flex.bg-blue-100.rounded-full,
[data-theme="dark"] .contact-card:hover div.inline-flex.items-center.justify-center.bg-blue-100 {
    background-color: var(--accent-blue) !important;
    background: var(--accent-blue) !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 
        0 0 25px rgba(96, 165, 250, 0.5),
        0 0 50px rgba(96, 165, 250, 0.3),
        0 8px 16px rgba(96, 165, 250, 0.4) !important;
}

/* NUCLEAR OPTION - Override ANY bg-blue-100 in contact pages with maximum specificity */
[data-theme="dark"] body .contact-section .bg-blue-100[class*="bg-blue-100"],
[data-theme="dark"] body .contact-card .bg-blue-100[class*="bg-blue-100"],
[data-theme="dark"] body div.bg-blue-100[class*="bg-blue-100"][class*="rounded-full"] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Additional nuclear option for inline-flex specifically */
[data-theme="dark"] body .inline-flex[class*="bg-blue-100"] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .alphacode-section-card:hover .alphacode-icon-container {
    background-color: var(--accent-blue) !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 
        0 0 25px rgba(96, 165, 250, 0.5),
        0 0 50px rgba(96, 165, 250, 0.3),
        0 8px 16px rgba(96, 165, 250, 0.4) !important;
}

/* Dark mode for Product Cards */
[data-theme="dark"] .product-card.bg-white {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .product-card h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .product-card p {
    color: var(--text-secondary) !important;
}

/* Make product section icons match Why Choose AlphaCode section icons - NO blue background */
[data-theme="dark"] .product-icon-wrapper,
[data-theme="dark"] .product-card .bg-blue-100 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .product-card:hover .product-icon-wrapper,
[data-theme="dark"] .product-card:hover .bg-blue-100 {
    background-color: var(--accent-blue) !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 
        0 0 25px rgba(96, 165, 250, 0.5),
        0 0 50px rgba(96, 165, 250, 0.3),
        0 8px 16px rgba(96, 165, 250, 0.4) !important;
}

/* Specific overrides for products section to ensure consistency - MATCH Why Choose AlphaCode */
[data-theme="dark"] .product-card .product-icon-wrapper.bg-blue-100,
[data-theme="dark"] .product-card div.bg-blue-100.p-4.rounded-full {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .product-card:hover .product-icon-wrapper.bg-blue-100,
[data-theme="dark"] .product-card:hover div.bg-blue-100.p-4.rounded-full {
    background-color: var(--accent-blue) !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 
        0 0 25px rgba(96, 165, 250, 0.5),
        0 0 50px rgba(96, 165, 250, 0.3),
        0 8px 16px rgba(96, 165, 250, 0.4) !important;
}

/* FORCE REMOVE blue background from product section icons - MATCH Why Choose AlphaCode section */
[data-theme="dark"] .product-card .product-icon-wrapper.bg-blue-100.p-4.rounded-full.w-20.h-20,
[data-theme="dark"] .product-card div.product-icon-wrapper.bg-blue-100.p-4.rounded-full,
[data-theme="dark"] .product-card .bg-blue-100.product-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .product-card:hover .product-icon-wrapper.bg-blue-100.p-4.rounded-full.w-20.h-20,
[data-theme="dark"] .product-card:hover div.product-icon-wrapper.bg-blue-100.p-4.rounded-full,
[data-theme="dark"] .product-card:hover .bg-blue-100.product-icon-wrapper {
    background-color: var(--accent-blue) !important;
    background: var(--accent-blue) !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
    box-shadow: 
        0 0 25px rgba(96, 165, 250, 0.5),
        0 0 50px rgba(96, 165, 250, 0.3),
        0 8px 16px rgba(96, 165, 250, 0.4) !important;
}

/* Additional dark mode fixes for any remaining white cards */
[data-theme="dark"] .border-gray-100 {
    border-color: var(--border-primary) !important;
}

/* Dark mode for Strategic Guidance Cards (if present on other pages) */
[data-theme="dark"] .strategic-guidance-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .strategic-guidance-card h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .strategic-guidance-card p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .strategic-guidance-card:hover h3 {
    color: var(--accent-blue) !important;
}

/* Strategic Guidance cards icon hover effects - same as Why Choose AlphaCode section */
[data-theme="dark"] .strategic-guidance-card:hover .service-icon {
    background-color: #60a5fa !important;
    transform: scale(1.1);
    box-shadow: 
        0 0 25px rgba(96, 165, 250, 0.6),
        0 0 50px rgba(96, 165, 250, 0.4),
        0 8px 16px rgba(96, 165, 250, 0.5);
    border: 1px solid rgba(96, 165, 250, 0.7);
}

[data-theme="dark"] .strategic-guidance-card:hover .service-icon svg {
    color: white !important;
    filter: brightness(0) invert(1);
    transform: scale(1.05);
}

/* Comprehensive fix for any missed white background cards */
[data-theme="dark"] .bg-white.rounded-lg.shadow-lg,
[data-theme="dark"] .bg-white.rounded-xl.shadow-lg,
[data-theme="dark"] .bg-white.shadow-md,
[data-theme="dark"] .bg-white.shadow-sm {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

/* Ensure all card text content is properly colored in dark mode */
[data-theme="dark"] .bg-white h1,
[data-theme="dark"] .bg-white h2,
[data-theme="dark"] .bg-white h3,
[data-theme="dark"] .bg-white h4,
[data-theme="dark"] .bg-white h5,
[data-theme="dark"] .bg-white h6 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-white p,
[data-theme="dark"] .bg-white span {
    color: var(--text-secondary) !important;
}

/* Fix any blue background elements that should be darker in dark mode - EXCEPT contact icons */
[data-theme="dark"] .bg-blue-100:not(.contact-card .bg-blue-100):not(.contact-section .bg-blue-100) {
    background-color: rgba(96, 165, 250, 0.15) !important;
}

/* OVERRIDE the general bg-blue-100 rule for contact icons specifically */
[data-theme="dark"] .contact-card .bg-blue-100,
[data-theme="dark"] .contact-section .bg-blue-100 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Remove blue backgrounds from card icons specifically */
[data-theme="dark"] .product-card .bg-blue-100,
[data-theme="dark"] .alphacode-section-card .bg-blue-100,
[data-theme="dark"] .card .bg-blue-100.rounded-full,
[data-theme="dark"] .bg-blue-100.p-4.rounded-full {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .bg-blue-50 {
    background-color: rgba(96, 165, 250, 0.1) !important;
}

/* Remove blue backgrounds from card icons with bg-blue-50 */
[data-theme="dark"] .product-card .bg-blue-50,
[data-theme="dark"] .alphacode-section-card .bg-blue-50,
[data-theme="dark"] .card .bg-blue-50.rounded-full,
[data-theme="dark"] .bg-blue-50.p-4.rounded-full {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Loading states and skeletons */
[data-theme="dark"] .animate-pulse {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%) !important;
}

/* Alpine.js Dark Mode Compatibility */
[data-theme="dark"] [x-cloak] {
    display: none !important;
}

/* Dark mode for Alpine.js components */
[data-theme="dark"] [x-data] {
    background-color: inherit;
    color: inherit;
}

/* Transition group dark mode */
[data-theme="dark"] .transition-all {
    transition-property: background-color, border-color, color, transform, opacity !important;
}

/* Final catch-all for any missed elements */
[data-theme="dark"] * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-secondary) var(--bg-secondary);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    [data-theme="dark"] {
        --text-primary: #ffffff;
        --text-secondary: #e5e7eb;
        --border-primary: #6b7280;
        --border-secondary: #9ca3af;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] * {
        transition: none !important;
        animation: none !important;
    }
    
    .dark-mode-toggle {
        transition: none !important;
    }
    
    .dark-mode-toggle .toggle-icon {
        transition: none !important;
    }
}

/* Section Background Alternation for Dark Mode */
/* This creates the same visual separation pattern as in light mode */

/* White sections in light mode become primary background in dark mode */
[data-theme="dark"] section.bg-white {
    background-color: var(--section-primary) !important;
}

/* Gray-50 sections in light mode become secondary background in dark mode */
[data-theme="dark"] section.bg-gray-50 {
    background-color: var(--section-secondary) !important;
}

/* Ensure proper contrast between alternating sections */
[data-theme="dark"] {
    --section-primary: #111827;    /* Darker background for primary sections */
    --section-secondary: #1f2937;  /* Lighter background for secondary sections */
}

/* Specific section overrides to match the light mode pattern */
[data-theme="dark"] section.py-20.bg-white {
    background-color: var(--section-primary) !important;
    padding: 5rem 0 !important;
}

[data-theme="dark"] section.py-20.bg-gray-50 {
    background-color: var(--section-secondary) !important;
    padding: 5rem 0 !important;
}

[data-theme="dark"] section.py-16:not(.bg-gray-50) {
    background-color: var(--section-primary) !important;
    padding: 4rem 0 !important;
}

[data-theme="dark"] section.py-16.bg-gray-50 {
    background-color: var(--section-secondary) !important;
    padding: 4rem 0 !important;
}

/* Hero section special handling */
[data-theme="dark"] section.hero-section {
    background: linear-gradient(to right, #1e3a8a, #1e40af) !important; /* Keep gradient but darker */
}

/* Cards within sections should maintain their own backgrounds */
[data-theme="dark"] section .bg-white.rounded-lg,
[data-theme="dark"] section .bg-white.shadow-lg,
[data-theme="dark"] .card.bg-white {
    background-color: var(--card-bg) !important;
}

/* Service cards and product cards */
[data-theme="dark"] .service-card,
[data-theme="dark"] .product-card {
    background-color: var(--card-bg) !important;
}

/* Special backgrounds for feature cards */
[data-theme="dark"] .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Override blue backgrounds for card icons in all sections */
[data-theme="dark"] .product-card .bg-blue-50,
[data-theme="dark"] .alphacode-section-card .bg-blue-50,
[data-theme="dark"] .service-card .bg-blue-50,
[data-theme="dark"] .card .bg-blue-50.rounded-full {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .product-card .bg-blue-100,
[data-theme="dark"] .alphacode-section-card .bg-blue-100,
[data-theme="dark"] .service-card .bg-blue-100,
[data-theme="dark"] .card .bg-blue-100.rounded-full {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Why Choose section cards */
[data-theme="dark"] .bg-blue-50.rounded-lg {
    background-color: rgba(96, 165, 250, 0.1) !important;
}

/* Content containers within sections */
[data-theme="dark"] section .container {
    background-color: transparent !important;
}

/* Ensure text visibility on alternating backgrounds */
[data-theme="dark"] section h1,
[data-theme="dark"] section h2,
[data-theme="dark"] section h3,
[data-theme="dark"] section p {
    color: var(--text-primary) !important;
}

/* Maintain proper section spacing - this is crucial */
[data-theme="dark"] .py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

[data-theme="dark"] .py-16 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

/* Enhanced Section Separation for All Pages */
/* Preserve all original spacing while changing backgrounds */

/* Override any conflicting styles that might affect spacing */
[data-theme="dark"] section {
    position: relative;
    /* Don't override padding/margin here - let individual classes handle it */
}

/* Remove the automatic border that might interfere with spacing */
[data-theme="dark"] section + section {
    border-top: none;
}

/* Section content text colors - preserve readability */
[data-theme="dark"] section h1,
[data-theme="dark"] section h2,
[data-theme="dark"] section h3,
[data-theme="dark"] section h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] section p,
[data-theme="dark"] section span:not(.text-white) {
    color: var(--text-secondary) !important;
}

/* Special handling for inline elements with specific colors */
[data-theme="dark"] .text-blue-700 {
    color: var(--accent-blue) !important;
}

[data-theme="dark"] .text-gray-900 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-700 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-600 {
    color: var(--text-tertiary) !important;
}

/* Visual enhancement for section boundaries - subtle separation */
[data-theme="dark"] section {
    position: relative;
}

/* Final Section Background Optimization */

/* Ensure consistent background inheritance for body and main */
[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] main {
    background-color: var(--bg-primary) !important;
}

/* Ensure proper contrast for text elements in sections */
[data-theme="dark"] section .text-white {
    color: white !important; /* Keep white text white (for hero sections, etc.) */
}

/* Special handling for gradient backgrounds */
[data-theme="dark"] .bg-gradient-to-r {
    background: linear-gradient(to right, #1e3a8a, #1e40af) !important;
}

/* Card backgrounds within sections - remove blue backgrounds from icons */
[data-theme="dark"] section .bg-blue-50,
[data-theme="dark"] section .bg-blue-100 {
    background-color: rgba(96, 165, 250, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Override blue backgrounds specifically for card icons */
[data-theme="dark"] section .bg-blue-50.rounded-full,
[data-theme="dark"] section .bg-blue-100.rounded-full,
[data-theme="dark"] section .bg-blue-50.p-4.rounded-full,
[data-theme="dark"] section .bg-blue-100.p-4.rounded-full {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ensure button and interactive element backgrounds are preserved */
[data-theme="dark"] section .bg-blue-600,
[data-theme="dark"] section .bg-blue-700,
[data-theme="dark"] section .bg-blue-800 {
    background-color: var(--accent-blue) !important;
    color: white !important;
}

/* Smooth transitions for section backgrounds only - not layout properties */
[data-theme="dark"] section {
    transition: background-color 0.3s ease !important;
}

/* Dark Mode Card Hover Effects - Matching Application Solutions Cards */
/* Apply the exact same hover effects from light mode to all cards in dark mode */

/* Main card hover effects - lift and shadow */
[data-theme="dark"] .card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .industry-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .bg-white.rounded-lg,
[data-theme="dark"] .bg-white.rounded-xl,
[data-theme="dark"] .rounded-lg.shadow-md,
[data-theme="dark"] .rounded-xl.shadow-md,
[data-theme="dark"] .shadow-lg.rounded-lg,
[data-theme="dark"] .bg-blue-50.rounded-lg,
[data-theme="dark"] .bg-blue-100.rounded-lg {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    transform: translateY(0) !important;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .product-card:hover,
[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .industry-card:hover,
[data-theme="dark"] .team-card:hover,
[data-theme="dark"] .bg-white.rounded-lg:hover,
[data-theme="dark"] .bg-white.rounded-xl:hover,
[data-theme="dark"] .rounded-lg.shadow-md:hover,
[data-theme="dark"] .rounded-xl.shadow-md:hover,
[data-theme="dark"] .shadow-lg.rounded-lg:hover,
[data-theme="dark"] .bg-blue-50.rounded-lg:hover,
[data-theme="dark"] .bg-blue-100.rounded-lg:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 10px 25px -5px rgba(96, 165, 250, 0.2), 0 8px 10px -6px rgba(96, 165, 250, 0.15) !important;
}

/* Reset card transform for buttons inside cards to prevent inheritance */
[data-theme="dark"] .product-card:hover .project-btn,
[data-theme="dark"] .service-card:hover .project-btn,
[data-theme="dark"] .industry-card:hover .project-btn,
[data-theme="dark"] .product-card:hover .cta-button,
[data-theme="dark"] .service-card:hover .cta-button,
[data-theme="dark"] .industry-card:hover .cta-button,
[data-theme="dark"] .product-card:hover a[href="contact.html"],
[data-theme="dark"] .service-card:hover a[href="contact.html"],
[data-theme="dark"] .industry-card:hover a[href="contact.html"] {
    transform: translateY(0) !important;
}

/* Icon hover effects - scale and background color change */
[data-theme="dark"] .service-icon,
[data-theme="dark"] .bg-blue-50.rounded-full,
[data-theme="dark"] .bg-blue-100.rounded-full,
[data-theme="dark"] .bg-blue-200.rounded-full,
[data-theme="dark"] .bg-blue-100.p-3.rounded-full,
[data-theme="dark"] .product-icon-wrapper {
    transition: all 0.3s ease !important;
}

[data-theme="dark"] .card:hover .service-icon,
[data-theme="dark"] .product-card:hover .service-icon,
[data-theme="dark"] .service-card:hover .service-icon,
[data-theme="dark"] .industry-card:hover .service-icon,
[data-theme="dark"] .rounded-lg:hover .bg-blue-50.rounded-full,
[data-theme="dark"] .rounded-lg:hover .bg-blue-100.rounded-full,
[data-theme="dark"] .rounded-lg:hover .bg-blue-200.rounded-full,
[data-theme="dark"] .rounded-xl:hover .bg-blue-100.p-3.rounded-full,
[data-theme="dark"] .card:hover .product-icon-wrapper,
[data-theme="dark"] .card:hover .alphacode-icon-container,
[data-theme="dark"] .product-card:hover .product-icon-wrapper,
[data-theme="dark"] .service-card:hover .service-icon,
[data-theme="dark"] .industry-card:hover .industry-icon,
[data-theme="dark"] .alphacode-section-card:hover .alphacode-icon-container,
[data-theme="dark"] .contact-card:hover .contact-icon {
    background-color: #60a5fa !important;
    transform: scale(1.1);
    box-shadow: 
        0 0 25px rgba(96, 165, 250, 0.6),
        0 0 50px rgba(96, 165, 250, 0.4),
        0 8px 16px rgba(96, 165, 250, 0.5);
    border: 1px solid rgba(96, 165, 250, 0.7);
}

/* Feature tag hover effects */
[data-theme="dark"] .feature-tag,
[data-theme="dark"] .px-3.py-1.text-sm.rounded-full,
[data-theme="dark"] .bg-gray-100.text-gray-600 {
    transition: all 0.3s ease !important;
}

[data-theme="dark"] .card:hover .feature-tag,
[data-theme="dark"] .service-card:hover .feature-tag,
[data-theme="dark"] .product-card:hover .feature-tag,
[data-theme="dark"] .rounded-lg:hover .px-3.py-1.text-sm.rounded-full,
[data-theme="dark"] .rounded-xl:hover .px-3.py-1.text-sm.rounded-full {
    background-color: var(--accent-blue) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Icon SVG and image hover effects */
[data-theme="dark"] .card svg,
[data-theme="dark"] .service-icon svg,
[data-theme="dark"] .service-icon img,
[data-theme="dark"] .product-icon,
[data-theme="dark"] .rounded-lg svg,
[data-theme="dark"] .rounded-xl svg {
    transition: all 0.3s ease !important;
}

[data-theme="dark"] .card:hover svg,
[data-theme="dark"] .service-card:hover .service-icon svg,
[data-theme="dark"] .service-card:hover .service-icon img,
[data-theme="dark"] .product-card:hover .product-icon,
[data-theme="dark"] .rounded-lg:hover svg,
[data-theme="dark"] .rounded-xl:hover svg {
    transform: scale(1.1) !important;
}

/* Enhanced icon content hover effects for dark mode */
[data-theme="dark"] .card:hover .alphacode-icon-container svg,
[data-theme="dark"] .card:hover .alphacode-icon-container i,
[data-theme="dark"] .product-card:hover .product-icon-wrapper svg,
[data-theme="dark"] .product-card:hover .product-icon-wrapper i,
[data-theme="dark"] .service-card:hover .service-icon svg,
[data-theme="dark"] .service-card:hover .service-icon i,
[data-theme="dark"] .industry-card:hover .industry-icon svg,
[data-theme="dark"] .industry-card:hover .industry-icon i,
[data-theme="dark"] .alphacode-section-card:hover .alphacode-icon-container svg,
[data-theme="dark"] .alphacode-section-card:hover .alphacode-icon-container i,
[data-theme="dark"] .contact-card:hover .contact-icon svg,
[data-theme="dark"] .contact-card:hover .contact-icon i,
[data-theme="dark"] .rounded-lg:hover .bg-blue-50.rounded-full svg,
[data-theme="dark"] .rounded-lg:hover .bg-blue-50.rounded-full i,
[data-theme="dark"] .rounded-lg:hover .bg-blue-100.rounded-full svg,
[data-theme="dark"] .rounded-lg:hover .bg-blue-100.rounded-full i,
[data-theme="dark"] .rounded-lg:hover .bg-blue-200.rounded-full svg,
[data-theme="dark"] .rounded-lg:hover .bg-blue-200.rounded-full i {
    color: white !important;
    filter: brightness(0) invert(1);
    transform: scale(1.05);
}

/* Enhanced icon image hover effects for dark mode */
[data-theme="dark"] .card:hover .alphacode-icon-container img,
[data-theme="dark"] .product-card:hover .product-icon-wrapper img,
[data-theme="dark"] .service-card:hover .service-icon img,
[data-theme="dark"] .industry-card:hover .industry-icon img,
[data-theme="dark"] .alphacode-section-card:hover .alphacode-icon-container img,
[data-theme="dark"] .contact-card:hover .contact-icon img {
    filter: brightness(0) invert(1);
    transform: scale(1.05);
}

/* Image hover effects for cards with images - DISABLED */
[data-theme="dark"] .card img,
[data-theme="dark"] .product-card img,
[data-theme="dark"] .service-card img,
[data-theme="dark"] .w-full.h-full.object-cover {
    transition: none !important;
    transform: none !important;
}

[data-theme="dark"] .overflow-hidden:hover .w-full.h-full.object-cover,
[data-theme="dark"] .card:hover img:not(.service-icon img),
[data-theme="dark"] .product-card:hover img:not(.service-icon img) {
    transform: none !important;
}

/* Badge and pill hover effects */
[data-theme="dark"] .inline-block.px-3.py-1.rounded-full,
[data-theme="dark"] .inline-block.px-4.py-1.rounded-full {
    transition: all 0.3s ease !important;
}

[data-theme="dark"] .card:hover .inline-block.px-3.py-1.rounded-full,
[data-theme="dark"] .service-card:hover .inline-block.px-3.py-1.rounded-full,
[data-theme="dark"] .product-card:hover .inline-block.px-4.py-1.rounded-full {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(96, 165, 250, 0.2) !important;
}

/* List item hover effects for feature lists */
[data-theme="dark"] .card li,
[data-theme="dark"] .service-card li,
[data-theme="dark"] .product-card li,
[data-theme="dark"] .list-disc li,
[data-theme="dark"] .feature-item {
    transition: all 0.25s ease !important;
}

[data-theme="dark"] .card:hover li,
[data-theme="dark"] .service-card:hover li,
[data-theme="dark"] .product-card:hover li,
[data-theme="dark"] .card:hover .list-disc li,
[data-theme="dark"] .rounded-lg:hover .list-disc li {
    transform: translateX(5px) !important;
    color: var(--accent-blue) !important;
}

/* Special hover effects for value cards (About page style cards) */
[data-theme="dark"] .bg-blue-800.rounded-lg,
[data-theme="dark"] .bg-blue-700.rounded-lg,
[data-theme="dark"] .bg-blue-600.rounded-lg {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

[data-theme="dark"] .bg-blue-800.rounded-lg:hover,
[data-theme="dark"] .bg-blue-700.rounded-lg:hover,
[data-theme="dark"] .bg-blue-600.rounded-lg:hover:not(.project-btn):not(.cta-button):not(a[href]) {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px -10px rgba(96, 165, 250, 0.4) !important;
}

[data-theme="dark"] .bg-blue-800.rounded-lg:hover .bg-white.p-4.rounded-full,
[data-theme="dark"] .bg-blue-700.rounded-lg:hover .bg-white.p-4.rounded-full,
[data-theme="dark"] .bg-blue-600.rounded-lg:hover .bg-white.p-4.rounded-full {
    transform: scale(1.1) !important;
}

/* Basic button text color for dark mode */
[data-theme="dark"] .btn,
[data-theme="dark"] .project-btn,
[data-theme="dark"] .cta-button,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] a[class*="bg-blue"] {
    color: white !important;
}

[data-theme="dark"] .transition-all[class*="bg-blue"] {
    color: white !important;
}

/* Additional navbar text visibility fixes */
/* Ensure all navbar text elements are visible in dark mode */
[data-theme="dark"] nav *,
[data-theme="dark"] .site-navbar * {
    color: inherit;
}

/* Force override for any remaining text color issues in navbar */
[data-theme="dark"] nav li a,
[data-theme="dark"] .site-navbar li a,
[data-theme="dark"] header nav a,
[data-theme="dark"] header .site-navbar a {
    color: white !important;
}

[data-theme="dark"] nav li a:hover,
[data-theme="dark"] .site-navbar li a:hover,
[data-theme="dark"] header nav a:hover,
[data-theme="dark"] header .site-navbar a:hover {
    color: var(--accent-blue) !important;
}

/* Navbar brand/logo text */
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .nav-logo a {
    color: white !important;
}

/* Override any font weight or other text styling that might affect visibility */
[data-theme="dark"] nav .font-medium,
[data-theme="dark"] .site-navbar .font-medium {
    color: white !important;
}

[data-theme="dark"] nav .font-medium:hover,
[data-theme="dark"] .site-navbar .font-medium:hover {
    color: var(--accent-blue) !important;
}

/* Ultra-specific overrides for navigation-footer.css conflicts */
/* These selectors match exactly what's in navigation-footer.css but with dark mode prefix */
[data-theme="dark"] .nav-link,
[data-theme="dark"] #navbar-container a,
[data-theme="dark"] .site-navbar a,
[data-theme="dark"] nav a,
[data-theme="dark"] header a:not([class*="btn"]),
[data-theme="dark"] #mobile-menu a {
    color: white !important;
    background-color: transparent !important;
    font-weight: 500 !important;
    padding: initial !important;
    border-radius: 0 !important;
    transition: color 0.3s ease !important;
    transform: none !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] #navbar-container a:hover,
[data-theme="dark"] .site-navbar a:hover,
[data-theme="dark"] nav a:hover,
[data-theme="dark"] header a:not([class*="btn"]):hover {
    color: var(--accent-blue) !important;
    background-color: transparent !important;
    transform: none !important;
}

/* Force override with highest specificity */
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] #navbar-container a,
html[data-theme="dark"] .site-navbar a,
html[data-theme="dark"] nav a,
html[data-theme="dark"] header a:not([class*="btn"]),
html[data-theme="dark"] #mobile-menu a {
    color: white !important;
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] #navbar-container a:hover,
html[data-theme="dark"] .site-navbar a:hover,
html[data-theme="dark"] nav a:hover,
html[data-theme="dark"] header a:not([class*="btn"]):hover {
    color: var(--accent-blue) !important;
}

/* ==============================
   SPECIFIC CARD FIXES FOR ABOUT, INDUSTRIES, CONTACT PAGES
   These styles complement the main .bg-blue-200 rules defined earlier
   ============================== */

/* About Us, Industries, Contact cards - use consistent colors with main system */
[data-theme="dark"] .bg-blue-50 {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    color: white !important;
}

[data-theme="dark"] .bg-blue-100 {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: white !important;
}

/* Icon containers - use consistent gradient approach */
[data-theme="dark"] .bg-blue-50 .bg-blue-100,
[data-theme="dark"] .bg-blue-100 .bg-blue-200,
[data-theme="dark"] .bg-blue-200 .bg-blue-300 {
    background: rgba(96, 165, 250, 0.3) !important;
    border: 1px solid rgba(147, 197, 253, 0.4) !important;
}

[data-theme="dark"] .bg-blue-300 {
    background: rgba(96, 165, 250, 0.3) !important;
    border: 1px solid rgba(147, 197, 253, 0.4) !important;
}

/* Text colors - consistent with main system */
[data-theme="dark"] .bg-blue-50 h3,
[data-theme="dark"] .bg-blue-100 h3,
[data-theme="dark"] .bg-blue-200 h3 {
    color: white !important;
}

[data-theme="dark"] .bg-blue-50 p,
[data-theme="dark"] .bg-blue-100 p,
[data-theme="dark"] .bg-blue-200 p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Icon colors - simplified approach */
[data-theme="dark"] .bg-blue-50 .text-blue-600,
[data-theme="dark"] .bg-blue-50 svg,
[data-theme="dark"] .bg-blue-50 .fas,
[data-theme="dark"] .bg-blue-100 .text-blue-700,
[data-theme="dark"] .bg-blue-100 svg,
[data-theme="dark"] .bg-blue-100 .fas,
[data-theme="dark"] .bg-blue-200 .text-blue-800,
[data-theme="dark"] .bg-blue-200 svg,
[data-theme="dark"] .bg-blue-200 .fas,
[data-theme="dark"] .bg-blue-300 .text-blue-800,
[data-theme="dark"] .bg-blue-300 svg {
    color: #dbeafe !important;
}

/* Maintain original shadow effects adapted for dark mode */
[data-theme="dark"] .bg-blue-50.rounded-lg,
[data-theme="dark"] .bg-blue-100.rounded-lg,
[data-theme="dark"] .bg-blue-200.rounded-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

/* Maintain exact hover effects but with darker blue gradients */
[data-theme="dark"] .bg-blue-50.rounded-lg:hover {
    background-color: #1d4ed8 !important; /* Slightly lighter than base */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}

[data-theme="dark"] .bg-blue-100.rounded-lg:hover {
    background-color: #2563eb !important; /* Slightly lighter than base */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}

[data-theme="dark"] .bg-blue-200.rounded-lg:hover {
    background-color: #3b82f6 !important; /* Slightly lighter than base */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* NUCLEAR OVERRIDE FOR THIRD CARD ISSUE - FORCE EXACT SAME STYLING */
/* This will force the third card to behave exactly like the first two cards */

/* Force bg-blue-200 to behave exactly like bg-blue-50 and bg-blue-100 in dark mode */
[data-theme="dark"] .bg-blue-200,
[data-theme="dark"] div[class*="bg-blue-200"],
[data-theme="dark"] *[class~="bg-blue-200"] {
    background-color: var(--dark-blue-200) !important;
    color: white !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

/* Force hover state for bg-blue-200 */
[data-theme="dark"] .bg-blue-200:hover,
[data-theme="dark"] div[class*="bg-blue-200"]:hover,
[data-theme="dark"] *[class~="bg-blue-200"]:hover {
    background-color: #3b82f6 !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
}

/* Force text colors inside bg-blue-200 cards */
[data-theme="dark"] .bg-blue-200 *,
[data-theme="dark"] div[class*="bg-blue-200"] *,
[data-theme="dark"] *[class~="bg-blue-200"] * {
    color: white !important;
}

[data-theme="dark"] .bg-blue-200 p,
[data-theme="dark"] div[class*="bg-blue-200"] p,
[data-theme="dark"] *[class~="bg-blue-200"] p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Force icon styling for bg-blue-200 cards */
[data-theme="dark"] .bg-blue-200 .bg-blue-300,
[data-theme="dark"] .bg-blue-200 .rounded-full,
[data-theme="dark"] div[class*="bg-blue-200"] .bg-blue-300,
[data-theme="dark"] div[class*="bg-blue-200"] .rounded-full {
    background-color: var(--dark-icon-bg-3) !important;
}

[data-theme="dark"] .bg-blue-200 svg,
[data-theme="dark"] .bg-blue-200 i,
[data-theme="dark"] .bg-blue-200 .fas,
[data-theme="dark"] div[class*="bg-blue-200"] svg,
[data-theme="dark"] div[class*="bg-blue-200"] i,
[data-theme="dark"] div[class*="bg-blue-200"] .fas {
    color: var(--dark-icon-color-3) !important;
}

/* Override ANY possible conflicts from Tailwind or other CSS */
[data-theme="dark"] .bg-blue-200.rounded-lg.shadow-md.p-6.text-center,
[data-theme="dark"] .text-center.p-6.bg-blue-200.rounded-lg.shadow-md {
    background-color: var(--dark-blue-200) !important;
    color: white !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

[data-theme="dark"] .bg-blue-200.rounded-lg.shadow-md.p-6.text-center:hover,
[data-theme="dark"] .text-center.p-6.bg-blue-200.rounded-lg.shadow-md:hover {
    background-color: #3b82f6 !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
}

/* Enhanced Card Background Colors in Dark Mode */
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-50.rounded-lg,
[data-theme="dark"] .bg-blue-50.rounded-lg.shadow-md {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
}

[data-theme="dark"] .bg-blue-100,
[data-theme="dark"] .bg-blue-100.rounded-lg,
[data-theme="dark"] .bg-blue-100.rounded-lg.shadow-md {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
}

[data-theme="dark"] .bg-blue-200,
[data-theme="dark"] .bg-blue-200.rounded-lg,
[data-theme="dark"] .bg-blue-200.rounded-lg.shadow-md {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-secondary) !important;
}

/* Specific Section Card Hover Effects */
[data-theme="dark"] .bg-blue-50.rounded-lg.shadow-md:hover,
[data-theme="dark"] .bg-blue-100.rounded-lg.shadow-md:hover,
[data-theme="dark"] .bg-blue-200.rounded-lg.shadow-md:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 30px -10px rgba(96, 165, 250, 0.4), 0 8px 15px -6px rgba(96, 165, 250, 0.2) !important;
    border-color: var(--accent-blue) !important;
}

/* Icon Container Hover Effects in Dark Mode */
[data-theme="dark"] .bg-blue-50.rounded-lg.shadow-md:hover .bg-blue-100.rounded-full,
[data-theme="dark"] .bg-blue-100.rounded-lg.shadow-md:hover .bg-blue-200.rounded-full,
[data-theme="dark"] .bg-blue-200.rounded-lg.shadow-md:hover .bg-blue-300.rounded-full {
    transform: scale(1.15) !important;
    background-color: var(--accent-blue) !important;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3) !important;
}

/* Icon Color Changes on Hover */
[data-theme="dark"] .bg-blue-50.rounded-lg.shadow-md:hover .bg-blue-100.rounded-full .text-blue-600,
[data-theme="dark"] .bg-blue-100.rounded-lg.shadow-md:hover .bg-blue-200.rounded-full .text-blue-700,
[data-theme="dark"] .bg-blue-200.rounded-lg.shadow-md:hover .bg-blue-300.rounded-full .text-blue-800,
[data-theme="dark"] .bg-blue-50.rounded-lg.shadow-md:hover .bg-blue-100.rounded-full i,
[data-theme="dark"] .bg-blue-100.rounded-lg.shadow-md:hover .bg-blue-200.rounded-full i,
[data-theme="dark"] .bg-blue-200.rounded-lg.shadow-md:hover .bg-blue-300.rounded-full i {
    color: white !important;
}

/* Enhanced Text Contrast in Dark Mode Cards */
[data-theme="dark"] .bg-blue-50.rounded-lg.shadow-md h3,
[data-theme="dark"] .bg-blue-100.rounded-lg.shadow-md h3,
[data-theme="dark"] .bg-blue-200.rounded-lg.shadow-md h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-blue-50.rounded-lg.shadow-md p,
[data-theme="dark"] .bg-blue-100.rounded-lg.shadow-md p,
[data-theme="dark"] .bg-blue-200.rounded-lg.shadow-md p {
    color: var(--text-secondary) !important;
}

/* Glow Effect on Card Hover in Dark Mode */
[data-theme="dark"] .bg-blue-50.rounded-lg.shadow-md:hover::before,
[data-theme="dark"] .bg-blue-100.rounded-lg.shadow-md:hover::before,
[data-theme="dark"] .bg-blue-200.rounded-lg.shadow-md:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(96, 165, 250, 0.1), transparent);
    border-radius: inherit;
    z-index: -1;
    opacity: 0.6;
}

/* Ensure relative positioning for glow effect */
[data-theme="dark"] .bg-blue-50.rounded-lg.shadow-md,
[data-theme="dark"] .bg-blue-100.rounded-lg.shadow-md,
[data-theme="dark"] .bg-blue-200.rounded-lg.shadow-md {
    position: relative !important;
}

/* 
   BUTTON TRANSFORM OVERRIDES FOR CONSISTENT HOVER EFFECTS
   Override excessive transforms for buttons to match light theme
*/

/* Specific button transform overrides to use consistent -2px instead of -8px */
[data-theme="dark"] .project-btn:hover,
[data-theme="dark"] .cta-button:hover,
[data-theme="dark"] a.project-btn:hover,
[data-theme="dark"] a.cta-button:hover,
[data-theme="dark"] .product-card a[href="contact.html"]:hover,
[data-theme="dark"] .application-solution-card a[href="contact.html"]:hover,
[data-theme="dark"] .industry-card a[href="contact.html"]:hover,
[data-theme="dark"] div[class*="-card"]:not(.service-card) a[href="contact.html"]:hover,
[data-theme="dark"] div[class*="-card"]:not(.service-card) a.cta-button:hover,
[data-theme="dark"] .service-card a.cta-button:hover,
[data-theme="dark"] .application-solution-card a.cta-button:hover {
    transform: translateY(-2px) !important;
}

/* Override active states for buttons */
[data-theme="dark"] .project-btn:active,
[data-theme="dark"] .cta-button:active,
[data-theme="dark"] a.project-btn:active,
[data-theme="dark"] a.cta-button:active,
[data-theme="dark"] .product-card a[href="contact.html"]:active,
[data-theme="dark"] .application-solution-card a[href="contact.html"]:active,
[data-theme="dark"] .industry-card a[href="contact.html"]:active,
[data-theme="dark"] div[class*="-card"]:not(.service-card) a[href="contact.html"]:active,
[data-theme="dark"] div[class*="-card"]:not(.service-card) a.cta-button:active,
[data-theme="dark"] .service-card a.cta-button:active,
[data-theme="dark"] .application-solution-card a.cta-button:active {
    transform: translateY(-1px) !important;
}

/* Specific overrides for buttons that might inherit from card hover effects */
[data-theme="dark"] .inline-block.bg-blue-600:hover,
[data-theme="dark"] .inline-flex.bg-blue-600:hover,
[data-theme="dark"] a[class*="bg-blue-6"]:hover,
[data-theme="dark"] button[class*="bg-blue-6"]:hover {
    transform: translateY(-2px) !important;
}

/* Strategic Guidance & Expertise section button overrides */
[data-theme="dark"] .strategic-guidance-card .project-btn:hover,
[data-theme="dark"] .strategic-guidance-card a[href="contact.html"]:hover,
[data-theme="dark"] .strategic-guidance-card .cta-button:hover {
    transform: translateY(-2px) !important;
}

[data-theme="dark"] .strategic-guidance-card .project-btn:active,
[data-theme="dark"] .strategic-guidance-card a[href="contact.html"]:active,
[data-theme="dark"] .strategic-guidance-card .cta-button:active {
    transform: translateY(-1px) !important;
}

/* Reset card transform for buttons inside Strategic Guidance cards - CRITICAL OVERRIDE */
[data-theme="dark"] .service-card.strategic-guidance-card:hover .project-btn,
[data-theme="dark"] .service-card.strategic-guidance-card:hover a[href="contact.html"],
[data-theme="dark"] .service-card.strategic-guidance-card:hover .cta-button,
[data-theme="dark"] .service-card.strategic-guidance-card:hover .inline-block.bg-blue-600,
[data-theme="dark"] .service-card.strategic-guidance-card:hover .bg-blue-600.hover\:bg-blue-700 {
    transform: translateY(0) !important;
}

/* Force button hover transform for Strategic Guidance buttons - NUCLEAR OPTION */
[data-theme="dark"] .service-card.strategic-guidance-card .project-btn:hover,
[data-theme="dark"] .service-card.strategic-guidance-card a.inline-block.bg-blue-600:hover,
[data-theme="dark"] .service-card.strategic-guidance-card .bg-blue-600.hover\:bg-blue-700:hover {
    transform: translateY(-2px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Strategic Guidance buttons text color - force white in dark mode */
[data-theme="dark"] .strategic-guidance-card .project-btn,
[data-theme="dark"] .strategic-guidance-card a[href="contact.html"],
[data-theme="dark"] .strategic-guidance-card .cta-button,
[data-theme="dark"] .strategic-guidance-card .inline-block.bg-blue-600,
[data-theme="dark"] .strategic-guidance-card .bg-blue-600.hover\:bg-blue-700,
[data-theme="dark"] .service-card.strategic-guidance-card .project-btn,
[data-theme="dark"] .service-card.strategic-guidance-card a.inline-block.bg-blue-600,
[data-theme="dark"] .service-card.strategic-guidance-card .bg-blue-600 {
    color: white !important;
}

/* Strategic Guidance buttons text color on hover - ensure white stays white */
[data-theme="dark"] .strategic-guidance-card .project-btn:hover,
[data-theme="dark"] .strategic-guidance-card a[href="contact.html"]:hover,
[data-theme="dark"] .strategic-guidance-card .cta-button:hover,
[data-theme="dark"] .strategic-guidance-card .inline-block.bg-blue-600:hover,
[data-theme="dark"] .strategic-guidance-card .bg-blue-600.hover\:bg-blue-700:hover,
[data-theme="dark"] .service-card.strategic-guidance-card .project-btn:hover,
[data-theme="dark"] .service-card.strategic-guidance-card a.inline-block.bg-blue-600:hover,
[data-theme="dark"] .service-card.strategic-guidance-card .bg-blue-600:hover {
    color: white !important;
}

/* Additional catch-all rule for any button-like elements in Strategic Guidance cards */
[data-theme="dark"] .strategic-guidance-card a[class*="bg-blue"],
[data-theme="dark"] .strategic-guidance-card button[class*="bg-blue"],
[data-theme="dark"] .strategic-guidance-card [class*="project-btn"],
[data-theme="dark"] .service-card.strategic-guidance-card a[class*="bg-blue"],
[data-theme="dark"] .service-card.strategic-guidance-card button[class*="bg-blue"],
[data-theme="dark"] .service-card.strategic-guidance-card [class*="project-btn"] {
    color: white !important;
}

[data-theme="dark"] .strategic-guidance-card a[class*="bg-blue"]:hover,
[data-theme="dark"] .strategic-guidance-card button[class*="bg-blue"]:hover,
[data-theme="dark"] .strategic-guidance-card [class*="project-btn"]:hover,
[data-theme="dark"] .service-card.strategic-guidance-card a[class*="bg-blue"]:hover,
[data-theme="dark"] .service-card.strategic-guidance-card button[class*="bg-blue"]:hover,
[data-theme="dark"] .service-card.strategic-guidance-card [class*="project-btn"]:hover {
    color: white !important;
}

/* COMPREHENSIVE BUTTON TEXT COLOR OVERRIDES FOR ALL BUTTONS IN DARK MODE */

/* All primary buttons - project-btn class and similar */
[data-theme="dark"] .project-btn,
[data-theme="dark"] .project-btn:hover,
[data-theme="dark"] .project-btn:active,
[data-theme="dark"] .project-btn:focus,
[data-theme="dark"] a.project-btn,
[data-theme="dark"] a.project-btn:hover,
[data-theme="dark"] a.project-btn:active,
[data-theme="dark"] a.project-btn:focus {
    color: white !important;
}

/* ===== CAROUSEL TEXT SLIDE-UP ANIMATIONS ===== */

/* Carousel Text Slide-Up Animation Keyframes */
@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Force animation reset for carousel slides */
.carousel-slide h1,
.carousel-slide p,
.carousel-slide .flex {
    animation: none;
    opacity: 0;
    transform: translateY(30px);
    transition: none;
}

/* Apply slide-up animation to carousel text elements when slide becomes active */
.carousel-slide.active h1 {
    animation: slideUpFadeIn 0.8s ease-out 0.2s both !important;
}

.carousel-slide.active p {
    animation: slideUpFadeIn 0.8s ease-out 0.4s both !important;
}

.carousel-slide.active .flex {
    animation: slideUpFadeIn 0.8s ease-out 0.6s both !important;
}

/* Dark mode carousel text animations - Higher specificity */
[data-theme="dark"] .carousel-slide.active .text-white h1 {
    animation: slideUpFadeIn 0.8s ease-out 0.2s both !important;
    color: white !important;
}

[data-theme="dark"] .carousel-slide.active .text-white p {
    animation: slideUpFadeIn 0.8s ease-out 0.4s both !important;
    color: white !important;
}

[data-theme="dark"] .carousel-slide.active .text-white .flex {
    animation: slideUpFadeIn 0.8s ease-out 0.6s both !important;
}

/* Alternative selectors for dark mode */
[data-theme="dark"] .carousel-slide.active h1 {
    animation: slideUpFadeIn 0.8s ease-out 0.2s both !important;
    color: white !important;
}

[data-theme="dark"] .carousel-slide.active p {
    animation: slideUpFadeIn 0.8s ease-out 0.4s both !important;
    color: white !important;
}

[data-theme="dark"] .carousel-slide.active .flex {
    animation: slideUpFadeIn 0.8s ease-out 0.6s both !important;
}

/* Initial state for dark mode - hide text elements before animation */
[data-theme="dark"] .carousel-slide:not(.active) h1,
[data-theme="dark"] .carousel-slide:not(.active) p,
[data-theme="dark"] .carousel-slide:not(.active) .flex {
    opacity: 0 !important;
    transform: translateY(30px) !important;
}

/* Initial state for dark mode with .text-white wrapper */
[data-theme="dark"] .carousel-slide:not(.active) .text-white h1,
[data-theme="dark"] .carousel-slide:not(.active) .text-white p,
[data-theme="dark"] .carousel-slide:not(.active) .text-white .flex {
    opacity: 0 !important;
    transform: translateY(30px) !important;
}

/* Initial state - hide text elements before animation (light mode) */
[data-theme="light"] .carousel-slide:not(.active) h1,
[data-theme="light"] .carousel-slide:not(.active) p,
[data-theme="light"] .carousel-slide:not(.active) .flex,
.carousel-slide:not(.active) h1,
.carousel-slide:not(.active) p,
.carousel-slide:not(.active) .flex {
    opacity: 0;
    transform: translateY(30px);
}

/* ===== END OF DARK MODE STYLES ===== */