/* ============================================
   Manila Polyclinic - Dark Mode Theme
   ============================================ */

/* Dark Mode Color Overrides */
[data-theme="dark"] {
    --color-bg-primary: #0F172A;
    --color-bg-secondary: #1E293B;
    --color-bg-tertiary: #334155;

    --color-text-primary: #F8FAFC;
    --color-text-secondary: #CBD5E1;
    --color-text-muted: #94A3B8;

    /* Adjust primary colors for dark mode contrast */
    --color-primary-light: #0EA5E9;
    --color-secondary: #22D3EE;
}

/* Base Dark Mode Styles */
[data-theme="dark"] body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-secondary);
}

[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-primary);
}

/* Navbar Dark Mode */
[data-theme="dark"] .navbar {
    background-color: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .navbar-link {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .navbar-link:hover,
[data-theme="dark"] .navbar-link.active {
    color: var(--color-primary-light);
}

[data-theme="dark"] .navbar-toggle span {
    background-color: var(--color-text-primary);
}

[data-theme="dark"] .mobile-menu {
    background-color: var(--color-bg-primary);
}

[data-theme="dark"] .mobile-menu-link {
    color: var(--color-text-secondary);
    border-bottom-color: var(--color-bg-tertiary);
}

/* Cards Dark Mode */
[data-theme="dark"] .card {
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

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

/* Sections Dark Mode */
[data-theme="dark"] .bg-white {
    background-color: var(--color-bg-primary);
}

[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
    background-color: var(--color-bg-secondary);
}

[data-theme="dark"] .stats-section {
    background-color: var(--color-bg-secondary);
}

/* Text Colors Dark Mode */
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600 {
    color: var(--color-text-muted);
}

[data-theme="dark"] .text-gray-700 {
    color: var(--color-text-secondary);
}

/* Section Headers Dark Mode */
[data-theme="dark"] .section-badge {
    background-color: rgba(14, 165, 233, 0.2);
    color: var(--color-primary-light);
}

[data-theme="dark"] .section-subtitle {
    color: var(--color-text-muted);
}

/* Testimonials Dark Mode */
[data-theme="dark"] .testimonial-card {
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .testimonial-text {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .testimonial-name {
    color: var(--color-text-primary);
}

[data-theme="dark"] .testimonial-role {
    color: var(--color-text-muted);
}

/* Blog Cards Dark Mode */
[data-theme="dark"] .blog-card {
    background-color: var(--color-bg-secondary);
}

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

[data-theme="dark"] .blog-card-excerpt {
    color: var(--color-text-muted);
}

/* Forms Dark Mode */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select {
    background-color: var(--color-bg-tertiary);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

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

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

[data-theme="dark"] .form-label {
    color: var(--color-text-secondary);
}

/* Contact Info Dark Mode */
[data-theme="dark"] .contact-info-card,
[data-theme="dark"] .contact-form {
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .contact-info-icon {
    background-color: rgba(14, 165, 233, 0.2);
}

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

[data-theme="dark"] .contact-info-value {
    color: var(--color-text-primary);
}

/* FAQ Dark Mode */
[data-theme="dark"] .faq-item {
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

[data-theme="dark"] .faq-question:hover {
    background-color: var(--color-bg-tertiary);
}

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

/* Blog Article Dark Mode */
[data-theme="dark"] .blog-content {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .blog-content h2 {
    color: var(--color-text-primary);
}

/* Branches Dark Mode */
[data-theme="dark"] .branch-card {
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .branch-name {
    color: var(--color-text-primary);
}

[data-theme="dark"] .branch-address,
[data-theme="dark"] .branch-hours {
    color: var(--color-text-muted);
}

/* Buttons Dark Mode Adjustments */
[data-theme="dark"] .btn-secondary {
    background-color: transparent;
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--color-primary-light);
    color: var(--color-bg-primary);
}

/* Chatbot Dark Mode */
[data-theme="dark"] .chatbot-window {
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .chatbot-message.bot {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .chatbot-input {
    background-color: var(--color-bg-tertiary);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

[data-theme="dark"] .chatbot-quick-reply {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .chatbot-quick-replies,
[data-theme="dark"] .chatbot-input-area {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Back to Top Dark Mode */
[data-theme="dark"] .back-to-top {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .back-to-top:hover {
    background-color: var(--color-primary-light);
    color: var(--color-bg-primary);
}

/* Cookie Banner Dark Mode */
[data-theme="dark"] .cookie-banner {
    background-color: var(--color-bg-tertiary);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Scrollbar Dark Mode */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

/* Theme Toggle Button */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    background: transparent;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    color: var(--color-gray-700);
    transition: transform var(--transition-normal);
}

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

.theme-toggle:hover svg {
    transform: rotate(30deg);
}

/* Sun/Moon Icons */
.icon-sun {
    display: none;
}

.icon-moon {
    display: block;
}

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

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