/*
    TechDwar Solutions — Unified Theme System
    Single source of truth for dark/light mode.
    Uses body.dark class. Overrides ALL hardcoded colors.

    IMPORTANT: This file loads LAST so it wins over all others.
*/

/* ================================================================
   0. SMOOTH THEME TRANSITION
   ================================================================ */
body,
body *,
body *::before,
body *::after {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        fill 0.3s ease,
        stroke 0.3s ease;
}

/* Exclude elements where transitions cause jank */
.loader-wrapper,
.loader-wrapper *,
.hero-grid-pattern,
.hero-particles-canvas,
.btn .ripple,
[class*="animate"],
.nav-progress-bar {
    transition: none !important;
}


/* ================================================================
   1. CSS VARIABLES — DARK MODE OVERRIDES
   ================================================================ */
body.dark {
    --primary: #C5D1E8;
    --primary-light: #8DA2C4;
    --primary-dark: #E2E8F0;
    --accent: #F0D060;
    --accent-light: #FDE68A;
    --accent-dark: #D4AF37;

    --bg-white: #0B1120;
    --bg-light: #111827;
    --bg-soft: #1A2332;
    --bg-blue-subtle: rgba(99, 138, 201, 0.08);
    --bg-dark: #060D1A;
    --bg-darker: #040812;

    --text-heading: #E2E8F0;
    --text-body: #94A3B8;
    --text-muted: #64748B;
    --text-white: #F1F5F9;
    --text-on-dark: #94A3B8;

    --glass-bg: rgba(15, 23, 42, 0.75);
    --glass-border: rgba(255, 255, 255, 0.06);
    --card-bg: #131C2E;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 20px 40px -12px rgba(0, 0, 0, 0.5);

    background-color: #0B1120;
    color: #94A3B8;
}


/* ================================================================
   2. BODY & GLOBAL
   ================================================================ */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
    color: var(--text-heading);
}

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

body.dark .section-title { color: #E2E8F0; }
body.dark .section-label { color: #64748B; }
body.dark .text-body,
body.dark .text-muted { color: var(--text-body); }


/* ================================================================
   3. NAVBAR
   ================================================================ */
body.dark #main-nav {
    background: rgba(11, 17, 32, 0.82) !important;
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

body.dark #main-nav.scrolled {
    background: rgba(11, 17, 32, 0.95) !important;
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.25) !important;
}

body.dark .logo-text { color: #E2E8F0 !important; }
body.dark .logo-accent { color: #F0D060 !important; }
body.dark .logo-mark {
    background: linear-gradient(135deg, #1A2D4E, #243B60) !important;
}

body.dark #nav-list {
    background: rgba(11, 17, 32, 0.98) !important;
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

body.dark #nav-list li a.nav-link {
    color: #94A3B8 !important;
    border-bottom-color: rgba(255, 255, 255, 0.03) !important;
}

body.dark #nav-list li a.nav-link:hover,
body.dark #nav-list li a.nav-link.active {
    color: #E2E8F0 !important;
    background: transparent !important;
}

body.dark #mobile-toggle {
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark #mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.dark .hamburger-line { background: #CBD5E1; }

body.dark #nav-overlay {
    background: rgba(0, 0, 0, 0.4);
}


/* ================================================================
   4. THEME TOGGLE BUTTON
   ================================================================ */
body.dark .theme-btn {
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark .theme-btn:hover {
    background: rgba(240, 208, 96, 0.06);
    border-color: rgba(240, 208, 96, 0.2);
}

body.dark .theme-btn .sun-icon {
    opacity: 0;
    transform: scale(0.6) rotate(60deg);
}

body.dark .theme-btn .moon-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    color: #F0D060;
}


/* ================================================================
   5. CARDS
   ================================================================ */
body.dark .card {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: var(--card-shadow);
}

body.dark .card:hover {
    box-shadow: var(--card-shadow-hover), 0 0 40px rgba(240, 208, 96, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}


/* ================================================================
   6. HERO SECTION
   ================================================================ */
body.dark .hero-nextgen {
    background: linear-gradient(180deg, #050D1A 0%, #0A1F44 30%, #0B1120 100%);
}

body.dark .hero-content h1,
body.dark .hero-content .hero-headline { color: #F1F5F9; }
body.dark .hero-subtitle { color: #94A3B8 !important; }
body.dark .hero-badge { color: #94A3B8; }

body.dark .hero-stat__number { color: #F0D060; }
body.dark .hero-stat__label { color: #64748B; }

body.dark .hero-float-chip {
    background: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #CBD5E1 !important;
}


/* ================================================================
   7. SERVICES SECTION
   ================================================================ */
body.dark .svc-section {
    background: linear-gradient(135deg, #0A1F44 0%, #050E22 50%, #0A1F44 100%);
}

body.dark .svc-card {
    background: #131C2E;
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark .svc-card:hover {
    border-color: rgba(240, 208, 96, 0.15);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
}

body.dark .svc-card__title { color: #E2E8F0; }
body.dark .svc-card__desc { color: #94A3B8; }
body.dark .svc-card__icon-box { background: rgba(240, 208, 96, 0.08); }

body.dark .svc-filter-btn {
    color: #94A3B8;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark .svc-filter-btn.active,
body.dark .svc-filter-btn:hover {
    background: rgba(240, 208, 96, 0.1);
    border-color: rgba(240, 208, 96, 0.3);
    color: #F0D060;
}


/* ================================================================
   8. ABOUT / WHY-US SECTIONS
   ================================================================ */
body.dark #about,
body.dark #why-us {
    color: var(--text-body);
}

body.dark .icon-box-gold {
    background: rgba(240, 208, 96, 0.08) !important;
}


/* ================================================================
   9. LIVE PROJECT TRACKER
   ================================================================ */
body.dark .lpt-dashboard {
    background: #0E1726;
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark .lpt-stat {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.04);
}

body.dark .lpt-phase {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.04);
}


/* ================================================================
   10. AI BUSINESS ANALYZER
   ================================================================ */
body.dark .aba-container {
    background: #0E1726;
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark .aba-option {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    color: #CBD5E1;
}

body.dark .aba-option:hover,
body.dark .aba-option.selected {
    border-color: rgba(240, 208, 96, 0.3);
    background: rgba(240, 208, 96, 0.06);
}


/* ================================================================
   11. TRUST & PROOF SECTION
   ================================================================ */
body.dark .tp-section {
    background: linear-gradient(135deg, #0A1F44 0%, #050E22 50%, #0A1F44 100%);
}

body.dark .tp-card {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark .tp-stat {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.04);
}


/* ================================================================
   12. CASE STUDIES
   ================================================================ */
body.dark .tp-case-card {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark .tp-case-card:hover {
    border-color: rgba(240, 208, 96, 0.15);
}


/* ================================================================
   13. TESTIMONIALS
   ================================================================ */
body.dark .testimonial-card {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.06);
}

body.dark .tp-slide {
    background: rgba(15, 23, 42, 0.6);
}


/* ================================================================
   14. FOOTER
   ================================================================ */
body.dark #main-footer {
    background: #060D1A;
    color: #94A3B8;
}

body.dark #main-footer h4,
body.dark #main-footer h5 {
    color: #E2E8F0;
}

body.dark #main-footer a {
    color: #64748B;
}

body.dark #main-footer a:hover {
    color: #F0D060;
}

body.dark .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.04);
    color: #4B5563;
}


/* ================================================================
   15. FORMS
   ================================================================ */
body.dark .form-input {
    background-color: #1A2332;
    border-color: rgba(255, 255, 255, 0.08);
    color: #E2E8F0;
}

body.dark .form-input:focus {
    background-color: #0B1120;
    border-color: #F0D060;
    box-shadow: 0 0 0 3px rgba(240, 208, 96, 0.1);
}

body.dark .form-input::placeholder { color: #4B5563; }
body.dark .form-label { color: #CBD5E1; }

body.dark select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}


/* ================================================================
   16. BUTTONS
   ================================================================ */
body.dark .btn-outline {
    border-color: rgba(255, 255, 255, 0.2);
    color: #CBD5E1;
}

body.dark .btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #F0D060;
    color: #F0D060;
}


/* ================================================================
   17. CHATBOT
   ================================================================ */
body.dark .chatbot-fab {
    background: linear-gradient(135deg, #0E1726, #1A2D4E);
    border-color: rgba(240, 208, 96, 0.2);
}

body.dark .chatbot-panel {
    background: #0E1726;
    border-color: rgba(255, 255, 255, 0.06);
}



/* ================================================================
   19. MOBILE BOTTOM CTA
   ================================================================ */
body.dark .mobile-bottom-cta {
    background: rgba(6, 13, 26, 0.97);
    border-top-color: rgba(240, 208, 96, 0.12);
}


/* ================================================================
   20. SCROLL PROGRESS BAR
   ================================================================ */
body.dark .nav-progress-bar {
    background: linear-gradient(90deg, #F0D060, #FDE68A);
}


/* ================================================================
   21. VOICE SEARCH OVERLAY
   ================================================================ */
body.dark .voice-search-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94A3B8;
}

body.dark .voice-search-btn:hover {
    background: rgba(240, 208, 96, 0.1);
    border-color: #F0D060;
    color: #F0D060;
}


/* ================================================================
   22. INDIA COVERAGE MAP
   ================================================================ */
body.dark .imap-section {
    background: linear-gradient(160deg, #050E22 0%, #0A1F44 50%, #050E22 100%);
}

body.dark .icw-card {
    background: var(--card-bg);
    border-color: rgba(255, 255, 255, 0.06);
}


/* ================================================================
   23. CTA SECTION
   ================================================================ */
body.dark .cta-next {
    background: linear-gradient(160deg, #050E22 0%, #0A1F44 50%, #050E22 100%);
}

body.dark .cta-glass-card {
    border-color: rgba(255, 255, 255, 0.06);
}


/* ================================================================
   24. ANTI-TEMPLATE OVERRIDES
   ================================================================ */
body.dark .card-stack::before,
body.dark .card-stack::after {
    background: #131C2E;
    border-color: rgba(255, 255, 255, 0.04);
}

body.dark body::before {
    opacity: 0.03;
}


/* ================================================================
   25. PAGE HERO (About, Services, etc.)
   ================================================================ */
body.dark .page-hero {
    background: linear-gradient(180deg, #050D1A, #0A1F44) !important;
}

body.dark .page-hero h1 { color: #F1F5F9; }
body.dark .page-hero p { color: #94A3B8; }


/* ================================================================
   26. LIGHT BACKGROUND SECTIONS (Alternating)
   ================================================================ */
body.dark [style*="background: var(--bg-light)"],
body.dark [style*="background: var(--bg-soft)"],
body.dark [style*="background: #F8FAFC"],
body.dark [style*="background: #F1F5F9"],
body.dark [style*="background-color: var(--bg-light)"],
body.dark [style*="background-color: var(--bg-soft)"] {
    background-color: #111827 !important;
    background: #111827 !important;
}

body.dark [style*="background: #FFFFFF"],
body.dark [style*="background: #fff"],
body.dark [style*="background: white"],
body.dark [style*="background-color: #FFFFFF"],
body.dark [style*="background-color: #fff"] {
    background-color: #0B1120 !important;
    background: #0B1120 !important;
}

body.dark [style*="color: #0A1F44"],
body.dark [style*="color: var(--primary)"] {
    color: #E2E8F0 !important;
}

body.dark [style*="color: #475569"],
body.dark [style*="color: var(--text-body)"] {
    color: #94A3B8 !important;
}

body.dark [style*="color: #94A3B8"],
body.dark [style*="color: var(--text-muted)"] {
    color: #64748B !important;
}


/* ================================================================
   27. DIVIDERS / BORDERS
   ================================================================ */
body.dark hr,
body.dark [style*="border-color"] {
    border-color: rgba(255, 255, 255, 0.06) !important;
}


/* ================================================================
   28. INLINE DARK BACKGROUNDS (Already dark — don't double-darken)
   ================================================================ */
body.dark [style*="background: #0A1F44"],
body.dark [style*="background: var(--bg-dark)"],
body.dark [style*="background-color: #0A1F44"],
body.dark [style*="background: linear-gradient"] {
    /* Intentionally empty — these are already dark, no override needed */
    color: inherit;
}


/* ================================================================
   29. PORTFOLIO FILTER BUTTONS
   ================================================================ */
body.dark .filter-btn {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
    color: #94A3B8 !important;
}

body.dark .filter-btn:hover {
    border-color: rgba(240, 208, 96, 0.3) !important;
    background: rgba(240, 208, 96, 0.06) !important;
    color: #F0D060 !important;
}

body.dark .filter-btn.active {
    background: rgba(240, 208, 96, 0.12) !important;
    border-color: rgba(240, 208, 96, 0.4) !important;
    color: #F0D060 !important;
}


/* ================================================================
   30. CONTACT PAGE — SOCIAL ICON BUTTONS
   ================================================================ */
body.dark .icon-box {
    background: rgba(240, 208, 96, 0.08) !important;
    color: #F0D060 !important;
}

body.dark .icon-box svg {
    color: #F0D060 !important;
}


/* ================================================================
   31. SELECT DROPDOWN OPTIONS
   ================================================================ */
body.dark select.form-input option {
    background-color: #1A2332;
    color: #E2E8F0;
}


/* ================================================================
   32. GLOBAL CATCH-ALL — PREVENT WHITE PATCHES
   ================================================================ */
/* Any section with bg-white variable will auto-update via CSS vars.
   These catch remaining cases with hardcoded or class-based bg. */
body.dark main {
    background-color: #0B1120;
}

body.dark section {
    background-color: #0B1120;
}

body.dark .section-padding {
    background-color: inherit;
}

/* Ensure section-dark stays dark in both modes */
body.dark .section-dark {
    background: linear-gradient(135deg, #050D1A 0%, #0A1F44 50%, #050D1A 100%) !important;
}


/* ================================================================
   33. CARD-ICON DARK MODE
   ================================================================ */
body.dark .card-icon {
    background: rgba(240, 208, 96, 0.08);
    color: #F0D060;
}

body.dark .card:hover .card-icon {
    background: linear-gradient(135deg, #1A2D4E, #243B60);
    color: #F0D060;
}


/* ================================================================
   34. STAT SECTION
   ================================================================ */
body.dark .stat-number {
    color: #F0D060;
}


/* ================================================================
   35. CLIP-DIAGONAL SECTIONS — Override background
   ================================================================ */
body.dark .clip-diagonal,
body.dark .clip-diagonal-reverse {
    background-color: #0B1120;
}


/* ================================================================
   36. VOICE SEARCH BUTTON (ensure sync with body.dark)
   ================================================================ */
body.dark .voice-search-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94A3B8;
}

body.dark .voice-search-btn:hover {
    background: rgba(240, 208, 96, 0.1);
    border-color: #F0D060;
    color: #F0D060;
}


/* ================================================================
   37. NAV PROGRESS BAR (sync with body.dark)
   ================================================================ */
body.dark .nav-progress-bar {
    background: linear-gradient(90deg, #F0D060, #FDE68A);
}