/**
 * Color Modes CSS - Light/Dark Theme Support
 * Fixes theme switching to properly change background and text colors
 */

/* ============================================
   DEFAULT (DARK MODE) - Override root variables
   ============================================ */
:root,
[data-bs-theme="dark"] {
    /* Dark mode backgrounds */
    --tc-neutral-50: #0e0e0f;
    --tc-neutral-100: #151616;
    --tc-neutral-200: #1a1a1a;
    --tc-neutral-300: #2a2a2a;
    --tc-neutral-400: #3a3a3a;
    --tc-neutral-500: #565656;
    --tc-neutral-600: #9ca3af;
    --tc-neutral-700: #d1d5db;
    --tc-neutral-800: #e5e7eb;
    --tc-neutral-900: #f3f4f6;
    
    /* System colors for dark mode */
    --tc-system-white: #ffffff;
    --tc-system-dark: #000000;
    --tc-system-muted: #9ca3af;
    
    /* Background colors */
    --tc-bg-1: #1c1b1f;
    --tc-bg-2: #1e1c25;
    --tc-bg-3: #141817;
    --tc-bg-4: #131518;
    --tc-bg-5: #100f0e;
}

/* Body default dark mode */
body {
    background-color: var(--tc-neutral-50);
    color: var(--tc-neutral-600);
}

/* ============================================
   LIGHT MODE - Override with light colors
   ============================================ */
[data-bs-theme="light"] {
    /* Light mode backgrounds */
    --tc-neutral-50: #ffffff;
    --tc-neutral-100: #f9fafb;
    --tc-neutral-200: #f3f4f6;
    --tc-neutral-300: #e5e7eb;
    --tc-neutral-400: #d1d5db;
    --tc-neutral-500: #9ca3af;
    --tc-neutral-600: #4b5563;
    --tc-neutral-700: #374151;
    --tc-neutral-800: #1f2937;
    --tc-neutral-900: #111827;
    
    /* System colors for light mode */
    --tc-system-white: #000000;
    --tc-system-dark: #ffffff;
    --tc-system-muted: #6b7280;
    
    /* Background colors for light mode */
    --tc-bg-1: #f2f2e9;
    --tc-bg-2: #e3dcf6;
    --tc-bg-3: #f2fbf9;
    --tc-bg-4: #eef2ff;
    --tc-bg-5: #fff7ee;
}

/* Light mode body */
[data-bs-theme="light"] body {
    background-color: var(--tc-neutral-50);
    color: var(--tc-neutral-600);
}

/* ============================================
   SPECIFIC ELEMENT OVERRIDES FOR LIGHT MODE
   ============================================ */

/* Text colors in light mode */
[data-bs-theme="light"] .tp-text-common-white,
[data-bs-theme="light"] h1,
[data-bs-theme="light"] h2,
[data-bs-theme="light"] h3,
[data-bs-theme="light"] h4,
[data-bs-theme="light"] h5,
[data-bs-theme="light"] h6 {
    color: #111827 !important;
}

[data-bs-theme="light"] .tp-text-grey-2,
[data-bs-theme="light"] p {
    color: #4b5563 !important;
}

[data-bs-theme="light"] .text-white {
    color: #111827 !important;
}

[data-bs-theme="light"] .text-light {
    color: #4b5563 !important;
}

/* Cards and containers in light mode */
[data-bs-theme="light"] .card {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

[data-bs-theme="light"] .shadow-soft {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

[data-bs-theme="light"] .shadow-strong {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Sections background in light mode */
[data-bs-theme="light"] section {
    background-color: transparent;
}

[data-bs-theme="light"] .tp-service-hero-area,
[data-bs-theme="light"] .tp-service-details-area,
[data-bs-theme="light"] .tp-about-process-area,
[data-bs-theme="light"] .tp-service-process-area,
[data-bs-theme="light"] .tp-process-area {
    background-color: transparent;
}

/* Navigation in light mode - IMPORTANT: Don't override all header styles */
[data-bs-theme="light"] .navbar {
    border-bottom: 1px solid #e5e7eb;
}

[data-bs-theme="light"] .nav-link {
    color: #111827 !important;
}

[data-bs-theme="light"] .nav-link:hover {
    color: #6366f1 !important;
}

/* Keep topbar styles intact */
[data-bs-theme="light"] .topbar {
    /* Let original styles apply */
}

/* Breadcrumb in light mode */
[data-bs-theme="light"] .tp-breadcrumb-list a {
    color: #6366f1 !important;
}

[data-bs-theme="light"] .tp-breadcrumb-list li {
    color: #6b7280 !important;
}

/* Form elements in light mode */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

[data-bs-theme="light"] .form-control::placeholder {
    color: #9ca3af !important;
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
    background-color: #ffffff !important;
    border-color: #6366f1 !important;
    color: #111827 !important;
}

/* Buttons remain colorful in both modes - only adjust text if needed */
[data-bs-theme="light"] .btn-outline-light {
    color: #111827 !important;
    border-color: #111827 !important;
}

[data-bs-theme="light"] .btn-outline-light:hover {
    background-color: #111827 !important;
    color: #ffffff !important;
}

/* Badges in light mode */
[data-bs-theme="light"] .badge.text-light {
    color: #ffffff !important;
}

/* Alerts in light mode */
[data-bs-theme="light"] .alert {
    border: 1px solid #e5e7eb;
}

[data-bs-theme="light"] .alert-success {
    background-color: #d1fae5;
    color: #065f46;
}

[data-bs-theme="light"] .alert-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Accordion in light mode */
[data-bs-theme="light"] .accordion-item {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

[data-bs-theme="light"] .accordion-button {
    background-color: #f9fafb !important;
    color: #111827 !important;
}

[data-bs-theme="light"] .accordion-button:not(.collapsed) {
    background-color: #eef2ff !important;
    color: #4f46e5 !important;
}

[data-bs-theme="light"] .accordion-body {
    color: #4b5563 !important;
}

/* Floating menu in light mode */
[data-bs-theme="light"] .floating-menu .cbtn {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

[data-bs-theme="light"] .floating-menu .cbtn-danger {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

/* ============================================
   DARK MODE SPECIFIC OVERRIDES
   ============================================ */

/* Ensure proper contrast in dark mode */
[data-bs-theme="dark"] .tp-text-common-white,
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .text-white {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tp-text-grey-2,
[data-bs-theme="dark"] p {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .text-light {
    color: #d1d5db !important;
}

/* Keep header and navigation original styles */
[data-bs-theme="dark"] header,
[data-bs-theme="dark"] .sticky-header,
[data-bs-theme="dark"] .topbar,
[data-bs-theme="dark"] .navbar {
    /* Don't override - let original CSS handle it */
}

/* Dark mode invert should work properly */
.dark-mode-invert {
    /* Let the original dark-mode-invert work */
}

/* ============================================
   GRADIENT BACKGROUNDS - Work in both modes
   ============================================ */

/* These gradient backgrounds work in both light and dark mode */
.bg-gradient-primary,
.bg-gradient-danger,
.bg-gradient-dark {
    /* Gradients maintain their colors in both modes */
}

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

body,
.card,
.form-control,
.form-select,
.btn,
section {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Force light background */
.bg-light-mode {
    background-color: #ffffff !important;
}

/* Force dark background */
.bg-dark-mode {
    background-color: #0e0e0f !important;
}

/* Text that should always be visible */
.text-always-light {
    color: #f3f4f6 !important;
}

.text-always-dark {
    color: #111827 !important;
}

/* ============================================
   FIX FOR SPECIFIC COMPONENTS
   ============================================ */

/* Ensure hero sections have proper backgrounds */
[data-bs-theme="light"] .tp-service-hero-area {
    background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}

[data-bs-theme="dark"] .tp-service-hero-area {
    background: linear-gradient(180deg, #0e0e0f 0%, #1a1a1a 100%);
}

/* Fix for sections with custom gradient backgrounds */
[data-bs-theme="light"] [style*="background: linear-gradient"] {
    /* Light mode gradient overlays */
}

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

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