/* =============================================================================
   Dark Mode Styles for Raj IT Custom
   Modern dark theme with proper contrast and accessibility
   ============================================================================= */

/* Dark Mode Variables */
[data-theme="dark"] {
    /* Colors */
    --color-primary: #60a5fa;
    --color-primary-hover: #3b82f6;
    --color-primary-light: rgba(96, 165, 250, 0.1);
    --color-accent: #fbbf24;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-error: #f87171;

    /* Backgrounds */
    --color-background: #0f172a;
    --color-background-light: #1e293b;
    --color-background-dark: #020617;
    --color-background-alt: #1e293b;
    --color-card-bg: #1e293b;

    /* Text */
    --color-text: #f1f5f9;
    --color-text-light: #cbd5e1;
    --color-text-lighter: #94a3b8;
    --color-text-white: #ffffff;

    /* Borders */
    --color-border: #334155;
    --color-border-light: #475569;
    --color-border-dark: #1e293b;

    /* Shadows - softer in dark mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);

    /* Spacing - ensure proper spacing in dark mode */
    /* Using existing spacing variables but ensuring they're accessible */
}

/* Dark Mode Specific Adjustments */
[data-theme="dark"] .site-header {
    background-color: rgba(15, 23, 42, 0.95);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .hero-clean {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .section-alt {
    background-color: var(--color-background-light);
}

[data-theme="dark"] .card-clean,
[data-theme="dark"] .service-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .skill-item-clean {
    background-color: var(--color-background-light);
    border-color: var(--color-border);
}

[data-theme="dark"] .card-clean:hover,
[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .project-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .footer-social .social-link-enhanced {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .footer-social .social-link-enhanced:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--color-background-dark);
    border-color: var(--color-border);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background-color: var(--color-background-light);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

/* Theme Toggle Button */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(255, 255, 255, 0.9);
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: rotate(180deg);
}

.theme-toggle .material-icons {
    font-size: 24px;
    transition: opacity 0.3s ease;
}

.theme-toggle .theme-icon-light {
    position: absolute;
    opacity: 0;
}

.theme-toggle .theme-icon-dark {
    opacity: 1;
}

[data-theme="dark"] .theme-toggle .theme-icon-light {
    opacity: 1;
}

[data-theme="dark"] .theme-toggle .theme-icon-dark {
    opacity: 0;
}

/* Smooth transition for theme changes */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Exclude elements that shouldn't transition */
.nav-toggle-line,
.hero-actions-clean *,
button,
a,
.material-icons,
img,
svg {
    transition-property: transform, opacity, box-shadow;
}

/* Dark mode improvements for readability */
[data-theme="dark"] img {
    opacity: 0.9;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Better contrast for links in dark mode */
[data-theme="dark"] a:not(.btn-clean):not(.nav-link) {
    color: var(--color-primary);
}

[data-theme="dark"] a:not(.btn-clean):not(.nav-link):hover {
    color: var(--color-primary-hover);
}

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

/* Hero Section */
[data-theme="dark"] .hero-badge-clean {
    background-color: rgba(96, 165, 250, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

[data-theme="dark"] .hero-title-clean {
    color: var(--color-text);
}

[data-theme="dark"] .hero-title-clean .accent {
    background: linear-gradient(135deg, #60a5fa 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .hero-description-clean {
    color: var(--color-text-light);
}

/* Code Window in Hero */
[data-theme="dark"] .code-window-clean {
    background-color: var(--color-background-dark);
    border-color: var(--color-border);
}

[data-theme="dark"] .code-header-clean {
    background-color: rgba(15, 23, 42, 0.8);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .code-title-clean {
    color: var(--color-text-light);
}

[data-theme="dark"] .code-content-clean {
    background-color: var(--color-background-dark);
}

[data-theme="dark"] .code-comment {
    color: #64748b;
}

[data-theme="dark"] .code-keyword {
    color: #c792ea;
}

[data-theme="dark"] .code-type {
    color: #82aaff;
}

[data-theme="dark"] .code-string {
    color: #c3e88d;
}

[data-theme="dark"] .code-function {
    color: #82aaff;
}

/* Services Section Cards */
[data-theme="dark"] .card-icon-clean .material-icons {
    color: var(--color-primary) !important;
}

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

[data-theme="dark"] .card-description-clean {
    color: var(--color-text-light);
}

/* Featured Projects */
[data-theme="dark"] .featured-projects {
    background-color: var(--color-background);
}

[data-theme="dark"] .section-header .section-title,
[data-theme="dark"] .section-header-clean .section-title-clean {
    color: var(--color-text) !important;
}

[data-theme="dark"] .section-header .section-description,
[data-theme="dark"] .section-header-clean .section-description-clean {
    color: var(--color-text-light) !important;
}

/* Project Cards */
[data-theme="dark"] .project-card,
[data-theme="dark"] .project-portfolio-card {
    background-color: var(--color-background-light) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .project-portfolio-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .project-title,
[data-theme="dark"] .project-portfolio-title {
    color: var(--color-text) !important;
}

[data-theme="dark"] .project-description,
[data-theme="dark"] .project-portfolio-description {
    color: var(--color-text-light) !important;
}

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

/* Tech Tags */
[data-theme="dark"] .tech-tag,
[data-theme="dark"] .tech-badge-enhanced {
    background-color: rgba(96, 165, 250, 0.15) !important;
    color: var(--color-primary) !important;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .tech-tag:hover,
[data-theme="dark"] .tech-badge-enhanced:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* Project Actions and Buttons */
[data-theme="dark"] .project-actions .btn,
[data-theme="dark"] .project-actions .btn-primary {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

[data-theme="dark"] .project-actions .btn-outline {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
}

[data-theme="dark"] .project-actions .btn:hover {
    background-color: var(--color-primary-hover) !important;
    transform: translateY(-2px);
}

[data-theme="dark"] .project-actions .btn-outline:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* CTA Section - Force proper dark mode styling */
[data-theme="dark"] .cta-section,
[data-theme="dark"] section[style*="background-color: var(--color-primary)"],
[data-theme="dark"] .section-primary-bg {
    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%) !important;
    color: white !important;
}

[data-theme="dark"] .cta-section *,
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] h2,
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] p,
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] span:not(.btn-clean):not(.material-icons),
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] div {
    color: white !important;
}

[data-theme="dark"] section[style*="background-color: var(--color-primary)"] .material-icons {
    color: white !important;
}

/* CTA Section Titles */
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] .section-title-clean,
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] h2[style*="color: white"] {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* CTA Buttons with White Background */
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] .btn-clean[style*="background-color: white"],
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] a[style*="background-color: white"] {
    background-color: white !important;
    color: #1e3a8a !important;
    border-color: white !important;
    font-weight: 600 !important;
}

[data-theme="dark"] section[style*="background-color: var(--color-primary)"] .btn-clean[style*="background-color: white"] span,
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] a[style*="background-color: white"] span {
    color: #1e3a8a !important;
}

[data-theme="dark"] section[style*="background-color: var(--color-primary)"] .btn-clean[style*="background-color: white"] .material-icons,
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] a[style*="background-color: white"] .material-icons {
    color: #1e3a8a !important;
}

[data-theme="dark"] section[style*="background-color: var(--color-primary)"] .btn-clean[style*="background-color: white"]:hover,
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] a[style*="background-color: white"]:hover {
    background-color: #f0f9ff !important;
    color: #1e3a8a !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] section[style*="background-color: var(--color-primary)"] .btn-clean[style*="background-color: white"]:hover span,
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] a[style*="background-color: white"]:hover span {
    color: #1e3a8a !important;
}

[data-theme="dark"] section[style*="background-color: var(--color-primary)"] .btn-clean[style*="background-color: white"]:hover .material-icons,
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] a[style*="background-color: white"]:hover .material-icons {
    color: #1e3a8a !important;
}

/* CTA Buttons with Transparent Background */
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] .btn-clean[style*="background-color: transparent"],
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] a[style*="background-color: transparent"] {
    background-color: transparent !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] section[style*="background-color: var(--color-primary)"] .btn-clean[style*="background-color: transparent"]:hover,
[data-theme="dark"] section[style*="background-color: var(--color-primary)"] a[style*="background-color: transparent"]:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: white !important;
    color: white !important;
}

/* Buttons in Hero Section */
[data-theme="dark"] .btn-primary-clean,
[data-theme="dark"] .btn-clean.btn-primary-clean {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

[data-theme="dark"] .btn-primary-clean:hover,
[data-theme="dark"] .btn-clean.btn-primary-clean:hover {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

[data-theme="dark"] .btn-secondary-clean,
[data-theme="dark"] .btn-clean.btn-secondary-clean {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-border) !important;
}

[data-theme="dark"] .btn-secondary-clean:hover,
[data-theme="dark"] .btn-clean.btn-secondary-clean:hover {
    background-color: rgba(96, 165, 250, 0.1) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* All Button Variants */
[data-theme="dark"] .btn,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] button.btn-primary {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

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

[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] button.btn-outline {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
}

[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] button.btn-outline:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

/* Small Buttons */
[data-theme="dark"] .btn-sm {
    font-size: 0.875rem;
}

/* Button with Icons */
[data-theme="dark"] .btn .material-icons,
[data-theme="dark"] .btn-clean .material-icons {
    color: inherit !important;
}

/* Section Spacing and Layout */
[data-theme="dark"] .section-clean {
    background-color: var(--color-background);
}

[data-theme="dark"] .container,
[data-theme="dark"] .container-clean {
    color: var(--color-text);
}

/* Better spacing for card grid */
[data-theme="dark"] .card-grid-clean {
    gap: var(--spacing-lg);
}

/* Ensure proper contrast for all text */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--color-text);
}

[data-theme="dark"] p {
    color: var(--color-text-light);
}

[data-theme="dark"] b,
[data-theme="dark"] strong {
    color: var(--color-text);
}

/* ============================================================================
   RESPONSIVE DARK MODE ADJUSTMENTS
   ============================================================================ */

/* Mobile Devices (768px and below) */
@media (max-width: 768px) {
    [data-theme="dark"] .hero-clean {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    [data-theme="dark"] .hero-title-clean {
        font-size: 2rem;
        line-height: 1.2;
    }

    [data-theme="dark"] .hero-description-clean {
        font-size: 1rem;
        line-height: 1.6;
    }

    [data-theme="dark"] .section-clean {
        padding: var(--spacing-2xl) var(--spacing-md);
    }

    [data-theme="dark"] .card-grid-clean {
        gap: var(--spacing-md);
    }

    [data-theme="dark"] .card-clean {
        padding: var(--spacing-lg);
    }

    /* Code window adjustments */
    [data-theme="dark"] .code-window-clean {
        font-size: 0.75rem;
    }

    /* CTA section on mobile */
    [data-theme="dark"] section[style*="background-color: var(--color-primary)"] {
        padding: var(--spacing-2xl) var(--spacing-md) !important;
    }
}

/* Small Mobile Devices (480px and below) */
@media (max-width: 480px) {
    [data-theme="dark"] .hero-title-clean {
        font-size: 1.75rem;
    }

    [data-theme="dark"] .hero-badge-clean {
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
    }

    [data-theme="dark"] .btn-large-clean {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }

    [data-theme="dark"] .card-icon-clean .material-icons {
        font-size: 2rem !important;
    }

    [data-theme="dark"] .card-title-clean {
        font-size: 1.125rem;
    }

    [data-theme="dark"] .card-description-clean {
        font-size: 0.875rem;
    }
}

/* Tablet Devices (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    [data-theme="dark"] .hero-content-clean {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    [data-theme="dark"] .code-window-clean {
        max-width: 100%;
    }
}

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

/* Focus states for better keyboard navigation in dark mode */
[data-theme="dark"] *:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[data-theme="dark"] button:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus-visible {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] *,
    [data-theme="dark"] *::before,
    [data-theme="dark"] *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
    [data-theme="dark"] {
        --color-text: #ffffff;
        --color-text-light: #e2e8f0;
        --color-border: #64748b;
    }

    [data-theme="dark"] .btn-primary-clean,
    [data-theme="dark"] .btn-clean.btn-primary-clean {
        border: 2px solid white;
    }

    [data-theme="dark"] .card-clean,
    [data-theme="dark"] .project-card {
        border: 2px solid var(--color-border);
    }
}

/* ============================================================================
   SERVICES PAGE DARK MODE FIXES
   ============================================================================ */

/* Service Cards */
[data-theme="dark"] .service-detailed-card {
    background-color: var(--color-background-light) !important;
    border-color: var(--color-border) !important;
}

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

[data-theme="dark"] .service-detailed-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Service Header & Icons */
[data-theme="dark"] .service-icon-large .material-icons {
    color: var(--color-primary) !important;
}

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

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

[data-theme="dark"] .service-description-enhanced {
    color: var(--color-text-light) !important;
}

/* Service Features */
[data-theme="dark"] .features-title {
    color: var(--color-text) !important;
}

[data-theme="dark"] .features-list {
    color: var(--color-text-light) !important;
}

[data-theme="dark"] .features-list li {
    color: var(--color-text-light) !important;
}

/* Tech Badges on Services Page */
[data-theme="dark"] .tech-badge {
    background-color: rgba(96, 165, 250, 0.15) !important;
    color: var(--color-primary) !important;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .tech-badge:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* Technical Stack Section */
[data-theme="dark"] .tech-stack-grid {
    gap: var(--spacing-xl);
}

[data-theme="dark"] .tech-category {
    background-color: var(--color-background-light) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

[data-theme="dark"] .tech-category-title {
    color: var(--color-text) !important;
    border-bottom-color: var(--color-border) !important;
}

[data-theme="dark"] .tech-item {
    background-color: rgba(96, 165, 250, 0.1) !important;
    color: var(--color-primary) !important;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .tech-item:hover {
    background-color: rgba(96, 165, 250, 0.2) !important;
    border-color: var(--color-primary);
}

/* Process Steps */
[data-theme="dark"] .process-steps {
    gap: var(--spacing-xl);
}

[data-theme="dark"] .process-step {
    background-color: var(--color-background-light) !important;
    border: 1px solid var(--color-border);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .process-step:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .step-number {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
    color: white !important;
}

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

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

/* ============================================================================
   ABOUT PAGE DARK MODE FIXES
   ============================================================================ */

/* Resume Download Section - Purple Gradient */
[data-theme="dark"] .section-highlight[style*="linear-gradient(135deg, #667eea"] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}

[data-theme="dark"] .section-highlight h2,
[data-theme="dark"] .section-highlight p {
    color: white !important;
}

/* Resume Download Button */
[data-theme="dark"] .section-highlight a[style*="background: white"] {
    background: white !important;
    color: #5b21b6 !important;
}

[data-theme="dark"] .section-highlight a[style*="background: white"] span {
    color: #5b21b6 !important;
}

[data-theme="dark"] .section-highlight a[style*="background: white"] .material-icons {
    color: #5b21b6 !important;
}

/* Skills Grid */
[data-theme="dark"] .skills-grid-clean {
    gap: var(--spacing-lg);
}

[data-theme="dark"] .skill-item-clean {
    background-color: var(--color-background-light) !important;
    border-color: var(--color-border);
}

[data-theme="dark"] .skill-icon-clean svg {
    color: var(--color-primary);
}

[data-theme="dark"] .skill-name-clean {
    color: var(--color-text) !important;
}

[data-theme="dark"] .skill-level-clean {
    color: var(--color-text-light) !important;
}

/* Backend Expertise Section */
[data-theme="dark"] .bg-light {
    background-color: var(--color-background-light) !important;
}

[data-theme="dark"] .backend-expertise-grid {
    gap: var(--spacing-xl);
}

[data-theme="dark"] .expertise-category {
    background-color: var(--color-background-light) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

[data-theme="dark"] .expertise-icon svg {
    color: white !important;  /* White icons for better visibility in dark mode */
}

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

[data-theme="dark"] .expertise-content {
    color: var(--color-text-light);
}

/* Tech Stack Items in Expertise */
[data-theme="dark"] .tech-stack .tech-item {
    background-color: rgba(96, 165, 250, 0.1) !important;
    color: var(--color-primary) !important;
    border: 1px solid rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .tech-stack .tech-item.primary {
    background-color: rgba(96, 165, 250, 0.15) !important;
    border-color: rgba(96, 165, 250, 0.3);
    font-weight: 600;
}

[data-theme="dark"] .tech-stack .tech-item.secondary {
    background-color: rgba(96, 165, 250, 0.08) !important;
    border-color: rgba(96, 165, 250, 0.15);
}

[data-theme="dark"] .tech-stack .tech-item:hover {
    background-color: rgba(96, 165, 250, 0.2) !important;
    border-color: var(--color-primary);
}

[data-theme="dark"] .expertise-detail {
    color: var(--color-text-lighter) !important;
}

/* Specializations Section */
[data-theme="dark"] .specializations-section {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--color-border);
}

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

[data-theme="dark"] .specializations-grid {
    display: grid;
    gap: var(--spacing-lg);
}

[data-theme="dark"] .specialization-item {
    background-color: var(--color-background-light) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

[data-theme="dark"] .specialization-item h4 {
    color: var(--color-text) !important;
    margin-bottom: var(--spacing-sm);
}

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

/* Timeline Elements */
[data-theme="dark"] .timeline-clean {
    border-left-color: var(--color-border);
}

[data-theme="dark"] .timeline-item-clean {
    position: relative;
}

[data-theme="dark"] .timeline-item-clean::before {
    background-color: var(--color-primary);
    border-color: var(--color-background);
}

[data-theme="dark"] .timeline-date-clean {
    color: var(--color-primary) !important;
}

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

[data-theme="dark"] .timeline-title-clean a {
    color: var(--color-primary) !important;
}

[data-theme="dark"] .timeline-company-clean {
    color: var(--color-text-lighter) !important;
}

[data-theme="dark"] .timeline-description-clean {
    color: var(--color-text-light) !important;
}

/* ============================================================================
   CONTACT PAGE DARK MODE FIXES
   ============================================================================ */

/* Contact Methods Grid */
[data-theme="dark"] .contact-methods-grid {
    gap: var(--spacing-xl);
}

[data-theme="dark"] .contact-method-card {
    background-color: var(--color-background-light) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

[data-theme="dark"] .contact-method-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

[data-theme="dark"] .contact-method-icon {
    background-color: rgba(96, 165, 250, 0.1);
}

[data-theme="dark"] .contact-method-icon svg {
    color: var(--color-primary);
}

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

[data-theme="dark"] .contact-method-description {
    color: var(--color-text-light) !important;
}

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

[data-theme="dark"] .contact-response-time {
    color: var(--color-text-lighter) !important;
}

/* Contact Form Container */
[data-theme="dark"] .contact-form-container {
    background-color: var(--color-background-light) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
}

/* Form Sections */
[data-theme="dark"] .form-section {
    border-bottom-color: var(--color-border);
}

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

/* Form Labels */
[data-theme="dark"] .form-label {
    color: var(--color-text) !important;
}

[data-theme="dark"] .required {
    color: var(--color-error) !important;
}

/* Form Inputs - Already covered but ensure specificity */
[data-theme="dark"] .contact-form .form-input,
[data-theme="dark"] .contact-form .form-select,
[data-theme="dark"] .contact-form .form-textarea {
    background-color: var(--color-background-light) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .contact-form .form-input:focus,
[data-theme="dark"] .contact-form .form-select:focus,
[data-theme="dark"] .contact-form .form-textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

[data-theme="dark"] .contact-form .form-input::placeholder,
[data-theme="dark"] .contact-form .form-textarea::placeholder {
    color: var(--color-text-lighter);
}

/* Form Character Count */
[data-theme="dark"] .form-character-count {
    color: var(--color-text-lighter) !important;
}

/* Form Note */
[data-theme="dark"] .form-note {
    color: var(--color-text-light) !important;
}

[data-theme="dark"] .form-note svg {
    color: var(--color-primary);
}

/* Form Messages */
[data-theme="dark"] .form-message-success {
    background-color: rgba(52, 211, 153, 0.1) !important;
    border-color: var(--color-success) !important;
    color: #10b981 !important;
}

[data-theme="dark"] .form-message-error {
    background-color: rgba(248, 113, 113, 0.1) !important;
    border-color: var(--color-error) !important;
    color: #f87171 !important;
}

/* FAQ Section */
[data-theme="dark"] .faq-container {
    gap: var(--spacing-lg);
}

[data-theme="dark"] .faq-item {
    background-color: var(--color-background-light) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

[data-theme="dark"] .faq-item:hover {
    border-color: var(--color-primary);
}

[data-theme="dark"] .faq-item.active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* FAQ Question Button */
[data-theme="dark"] .faq-question {
    background-color: transparent !important;
    color: var(--color-text);
}

[data-theme="dark"] .faq-question:hover {
    background-color: rgba(96, 165, 250, 0.05) !important;
}

[data-theme="dark"] .faq-question[aria-expanded="true"] {
    background-color: rgba(96, 165, 250, 0.1) !important;
    border-bottom: 1px solid var(--color-border);
}

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

[data-theme="dark"] .faq-question[aria-expanded="true"] .faq-question-text {
    color: var(--color-primary) !important;
}

/* FAQ Icon */
[data-theme="dark"] .faq-icon svg {
    color: var(--color-text-lighter);
}

[data-theme="dark"] .faq-question[aria-expanded="true"] .faq-icon svg {
    color: var(--color-primary);
}

/* FAQ Answer */
[data-theme="dark"] .faq-answer {
    background-color: transparent;
}

[data-theme="dark"] .faq-answer-content {
    color: var(--color-text-light) !important;
}

[data-theme="dark"] .faq-answer-content p {
    color: var(--color-text-light) !important;
}

[data-theme="dark"] .faq-answer-content strong {
    color: var(--color-text) !important;
}

/* FAQ List */
[data-theme="dark"] .faq-list li {
    color: var(--color-text-light) !important;
}

[data-theme="dark"] .faq-list li::before {
    color: var(--color-success) !important;
}

/* FAQ Highlight Box */
[data-theme="dark"] .faq-highlight {
    background-color: rgba(96, 165, 250, 0.1) !important;
    border-left-color: var(--color-primary) !important;
}

[data-theme="dark"] .faq-highlight svg {
    color: var(--color-primary) !important;
}

[data-theme="dark"] .faq-highlight span {
    color: var(--color-text) !important;
}

/* FAQ Process Steps */
[data-theme="dark"] .faq-process-steps {
    gap: var(--spacing-md);
}

[data-theme="dark"] .faq-step {
    background-color: rgba(96, 165, 250, 0.05) !important;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

[data-theme="dark"] .faq-step .step-number {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
    color: white !important;
}

[data-theme="dark"] .faq-step span:not(.step-number) {
    color: var(--color-text) !important;
}

/* Honeypot Field (Hidden) */
[data-theme="dark"] .honeypot-field {
    display: none !important;
}

/* ============================================================================
   FOOTER BUTTON DARK MODE FIXES
   ============================================================================ */

/* Footer CTA Button - Dark text on light blue background */
[data-theme="dark"] .footer-cta-button {
    background-color: var(--color-primary) !important;  /* #60a5fa - light blue */
    color: #0f172a !important;  /* Very dark blue - 8.5:1 contrast with #60a5fa */
    border-color: var(--color-primary) !important;
}

[data-theme="dark"] .footer-cta-button:hover {
    background-color: var(--color-primary-hover) !important;  /* #3b82f6 */
    color: #0f172a !important;  /* 6.8:1 contrast with #3b82f6 */
}

[data-theme="dark"] .footer-cta-button .material-icons {
    color: #0f172a !important;
}

/* Back to Top Button - Dark text on light gradient background */
[data-theme="dark"] .back-to-top-btn {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
    color: #0f172a !important;  /* Very dark blue - 8.5:1 with #60a5fa, 12.5:1 with #fbbf24 */
}

[data-theme="dark"] .back-to-top-btn .material-icons {
    color: #0f172a !important;
}

[data-theme="dark"] .back-to-top-btn:hover {
    color: #0f172a !important;
}

[data-theme="dark"] .back-to-top-text {
    color: #0f172a !important;
}