/* ============================================
   MEDICODA — Dark Mode Overrides
   Activated via [data-theme="dark"] on <html>.
   Design tokens already switch in variables.css;
   this file fixes hard-coded light surfaces.
   ============================================ */

/* ── Header ── */
[data-theme="dark"] .site-header {
    background-color: rgba(19, 27, 46, 0.92);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .site-header.is-scrolled {
    background-color: rgba(19, 27, 46, 0.98);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .mobile-nav {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

/* ── Hero ── */
[data-theme="dark"] .hero {
    background: radial-gradient(circle at 85% 15%, rgba(5, 150, 105, 0.18) 0%, transparent 60%),
                radial-gradient(circle at 15% 85%, rgba(2, 132, 199, 0.12) 0%, transparent 50%),
                #0B0F19;
}

[data-theme="dark"] .hero-badge-pill,
[data-theme="dark"] .hero-help-list {
    background: rgba(19, 27, 46, 0.9);
    border-color: var(--color-border);
}

[data-theme="dark"] .hero-help-list span {
    background: var(--color-surface-elevated);
}

[data-theme="dark"] .hero-main-card,
[data-theme="dark"] .quick-booking-card {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .hero-chat-messages {
    background: linear-gradient(180deg, #0B0F19 0%, #131B2E 100%);
}

[data-theme="dark"] .hero-chat-input,
[data-theme="dark"] .quick-select,
[data-theme="dark"] .quick-input,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background-color: var(--color-surface-elevated);
    border-color: var(--color-border);
    color: var(--color-text);
    color-scheme: dark;
}

[data-theme="dark"] .quick-select:focus,
[data-theme="dark"] .quick-input:focus {
    background-color: var(--color-surface-elevated);
}

/* Native dropdown options in dark mode */
[data-theme="dark"] option {
    background-color: #131B2E;
    color: #F1F5F9;
}

/* ── Sections with hard-coded light backgrounds ── */
[data-theme="dark"] .features-section,
[data-theme="dark"] .service-card-modern,
[data-theme="dark"] .doctor-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .clinic-info-card,
[data-theme="dark"] .location-box,
[data-theme="dark"] .faq-item {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .services-section,
[data-theme="dark"] .doctors-section,
[data-theme="dark"] .testimonials-section,
[data-theme="dark"] .clinic-info-section,
[data-theme="dark"] .location-section,
[data-theme="dark"] .faq-section {
    background-color: var(--color-background);
}

/* ── Secondary / icon buttons ── */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-icon,
[data-theme="dark"] .header-staff-link,
[data-theme="dark"] .mobile-menu-btn {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .btn-secondary:hover:not(:disabled),
[data-theme="dark"] .header-staff-link:hover,
[data-theme="dark"] .btn-icon:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

[data-theme="dark"] .filter-chip {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .filter-chip.is-active {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ── Login page ── */
[data-theme="dark"] .login-page {
    background: radial-gradient(circle at 85% 15%, rgba(5, 150, 105, 0.18) 0%, transparent 60%),
                #0B0F19;
}

[data-theme="dark"] .login-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .demo-credentials-box {
    background-color: rgba(5, 150, 105, 0.12);
    color: var(--color-text);
}

/* ── Chat widget surfaces ── */
[data-theme="dark"] .chat-panel,
[data-theme="dark"] .hero-interactive-chat {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .chat-messages {
    background: linear-gradient(180deg, #0B0F19 0%, #131B2E 100%);
}

[data-theme="dark"] .chat-input-container {
    background-color: var(--color-surface);
    border-top-color: var(--color-border);
}

[data-theme="dark"] .chat-input,
[data-theme="dark"] .hero-chat-input {
    background-color: var(--color-surface-elevated);
    color: var(--color-text);
}

/* Map is blinding in dark mode — dim it slightly */
[data-theme="dark"] .location-map-wrap iframe {
    filter: grayscale(0.3) brightness(0.9) contrast(1.05);
}

/* Images stay bright — soften logos slightly */
[data-theme="dark"] .header-logo-img,
[data-theme="dark"] .footer-logo-img {
    filter: brightness(0.95);
}

/* ── Theme toggle button ── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.theme-toggle:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-text-muted);
    transform: translateY(-1px);
}

.theme-toggle .theme-icon-dark {
    display: none;
}

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

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

/* Smooth theme transition */
body,
.site-header,
.card,
.service-card-modern,
.doctor-card,
.testimonial-card,
.quick-booking-card,
.hero-main-card {
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}