/* ==========================================
   AzriaSolutions Dark Mode Theme System
   ========================================== */

/* ===== Theme Toggle Button ===== */
.theme-toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(43, 155, 138, 0.3);
    border-color: rgba(43, 155, 138, 0.6);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.theme-toggle .sun-icon {
    display: block;
    color: #f59e0b;
}

.theme-toggle .moon-icon {
    display: none;
    color: #fbbf24;
}

/* ===== Dark Theme Toggle State ===== */
[data-theme="dark"] .theme-toggle {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(251, 191, 36, 0.3);
}

[data-theme="dark"] .theme-toggle:hover {
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.2);
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: block;
}

/* ===== Dark Theme - Complete Override ===== */
/* [data-theme="dark"] has high specificity - !important only where inline styles compete */

/* Body and main backgrounds */
[data-theme="dark"] body {
    background-color: #0f172a;
    color: #e2e8f0;
}

/* All sections */
[data-theme="dark"] section {
    background-color: #0f172a;
}

[data-theme="dark"] .about,
[data-theme="dark"] .services,
[data-theme="dark"] .portfolio,
[data-theme="dark"] .tools,
[data-theme="dark"] .contact {
    background: #0f172a;
}

[data-theme="dark"] .pain-points,
[data-theme="dark"] .testimonials {
    background: #1e293b;
}

/* Hero section - keep dark gradient but enhance */
[data-theme="dark"] .hero {
    background: linear-gradient(145deg, #020617 0%, #0f172a 25%, #1e3a5a 60%, #1e40af 100%) !important;
}

/* Navigation */
[data-theme="dark"] nav {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .nav-links a {
    color: #e2e8f0;
}

[data-theme="dark"] .nav-links a:hover {
    color: #3dbaa7;
}

/* Typography */
[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: #f1f5f9;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] li {
    color: #cbd5e1;
}

[data-theme="dark"] .highlight {
    color: #3dbaa7;
}

/* Section headers */
[data-theme="dark"] .section-header h2,
[data-theme="dark"] .section-header p {
    color: #f1f5f9;
}

[data-theme="dark"] .section-subtitle {
    color: #94a3b8;
}

/* Cards and boxes */
[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .pain-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .flip-card-front,
[data-theme="dark"] .flip-card-back,
[data-theme="dark"] .portfolio-card,
[data-theme="dark"] .stat-item {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

[data-theme="dark"] .flip-card-front,
[data-theme="dark"] .flip-card-back {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
}

[data-theme="dark"] .pain-card {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .pain-card h3,
[data-theme="dark"] .pain-card p {
    color: #e2e8f0;
}

/* Stats section */
[data-theme="dark"] .stats-container {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .stat-number,
[data-theme="dark"] .stat-label {
    color: #f1f5f9;
}

/* About section */
[data-theme="dark"] .about-content p,
[data-theme="dark"] .about-text {
    color: #cbd5e1;
}

[data-theme="dark"] .skill-item {
    background: rgba(43, 155, 138, 0.1);
    border-color: rgba(43, 155, 138, 0.3);
    color: #e2e8f0;
}

/* Badges */
[data-theme="dark"] .badge {
    background: rgba(43, 155, 138, 0.15);
    border-color: rgba(43, 155, 138, 0.4);
    color: #3dbaa7;
}

/* Buttons */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn.btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: #e2e8f0;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Forms */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748b;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    border-color: #3dbaa7;
    box-shadow: 0 0 0 3px rgba(43, 155, 138, 0.2);
}

/* Contact section */
[data-theme="dark"] .contact-info,
[data-theme="dark"] .contact-form {
    background: #1e293b;
}

/* Tools section - override inline <style> hardcoded colors */
[data-theme="dark"] .tools-section {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}

[data-theme="dark"] .tools-section::before {
    background: radial-gradient(circle at 30% 50%, rgba(43, 155, 138, 0.15) 0%, transparent 50%);
}

[data-theme="dark"] .tools-section h2 {
    color: #f1f5f9;
}

[data-theme="dark"] .tools-section .section-subtitle {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .tools-section .badge {
    background: rgba(43, 155, 138, 0.15);
    border-color: rgba(43, 155, 138, 0.4);
    color: #3dbaa7;
}

[data-theme="dark"] .tools-grid .tool-card {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .tools-grid .tool-card:hover {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(43, 155, 138, 0.3);
}

[data-theme="dark"] .tool-name {
    color: #f1f5f9;
}

[data-theme="dark"] .tool-desc {
    color: rgba(255, 255, 255, 0.6);
}

/* Testimonials */
[data-theme="dark"] .testimonial-card {
    background: #1e293b;
}

[data-theme="dark"] .testimonial-text,
[data-theme="dark"] .testimonial-author {
    color: #e2e8f0;
}

/* Footer - keep dark */
[data-theme="dark"] footer,
[data-theme="dark"] .footer {
    background: #020617;
}

[data-theme="dark"] footer p,
[data-theme="dark"] footer a,
[data-theme="dark"] .footer p,
[data-theme="dark"] .footer a {
    color: #94a3b8;
}

[data-theme="dark"] footer a:hover,
[data-theme="dark"] .footer a:hover {
    color: #3dbaa7;
}

/* Pain solution box */
[data-theme="dark"] .pain-solution {
    background: rgba(43, 155, 138, 0.1);
    border-color: rgba(43, 155, 138, 0.3);
}

[data-theme="dark"] .pain-solution p {
    color: #e2e8f0;
}

/* Mobile menu */
[data-theme="dark"] .mobile-menu span {
    background: #e2e8f0;
}

[data-theme="dark"] .drawer,
[data-theme="dark"] .mobile-nav-menu {
    background: #1e293b;
}

/* Accessibility widget */
[data-theme="dark"] .accessibility-widget {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Links */
[data-theme="dark"] a {
    color: #3dbaa7;
}

[data-theme="dark"] a:hover {
    color: #5dd3bc;
}

/* FAQ Popup */
[data-theme="dark"] .faq-popup-overlay {
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .faq-popup {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .faq-popup-header {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .faq-popup .faq-question,
[data-theme="dark"] .faq-popup .faq-question span {
    color: #f1f5f9;
}

[data-theme="dark"] .faq-popup .faq-answer {
    color: #cbd5e1;
}

[data-theme="dark"] .faq-popup .faq-item {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .faq-popup .faq-category {
    color: #3dbaa7;
    border-color: rgba(255, 255, 255, 0.1);
}

/* ===== Dark Mode Scrollbar ===== */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e293b;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #475569;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

[data-theme="dark"] {
    scrollbar-color: #475569 #1e293b;
}

/* ===== Smooth Theme Transition ===== */
/* Only transition key containers to avoid massive style recalc */
.theme-transitioning body,
.theme-transitioning section,
.theme-transitioning nav,
.theme-transitioning .card,
.theme-transitioning .service-card,
.theme-transitioning .pain-card,
.theme-transitioning .testimonial-card,
.theme-transitioning .tool-card,
.theme-transitioning .flip-card-front,
.theme-transitioning .flip-card-back,
.theme-transitioning .portfolio-card,
.theme-transitioning .contact-info,
.theme-transitioning .contact-form,
.theme-transitioning footer,
.theme-transitioning .faq-popup,
.theme-transitioning .stats-container,
.theme-transitioning input,
.theme-transitioning textarea {
    transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease !important;
}

/* ===== Responsive adjustments ===== */
@media (max-width: 768px) {
    .theme-toggle {
        top: 10px;
        left: 10px;
        width: 36px;
        height: 36px;
    }

    .theme-toggle svg {
        width: 18px;
        height: 18px;
    }
}