/* ===== DARK MODE CENTRALIZED STYLES ===== */
/* This file is shared across all pages for consistent dark mode */

:root {
    --bg-dark: #0f1419;
    --text-dark: #e4e4e7;
    --card-dark: #1a1f2e;
    --border-dark: #2d3748;
    --text-muted-dark: #a1a1a6;
}

/* Force dark backgrounds when dark mode is active */
html.dark-mode,
body.dark-mode {
    background-color: var(--bg-dark) !important;
    color: var(--text-dark) !important;
}

/* ALL sections and containers */
body.dark-mode section,
body.dark-mode main,
body.dark-mode article,
body.dark-mode header,
body.dark-mode footer {
    background-color: var(--bg-dark) !important;
    color: var(--text-dark) !important;
}

/* ALL light background colors */
body.dark-mode .bg-white,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100,
body.dark-mode .bg-blue-50,
body.dark-mode .bg-blue-100,
body.dark-mode .bg-green-50,
body.dark-mode .bg-green-100,
body.dark-mode .bg-yellow-50,
body.dark-mode .bg-yellow-100,
body.dark-mode .bg-amber-50,
body.dark-mode .bg-amber-100,
body.dark-mode .bg-brand-light,
body.dark-mode [class*="bg-gray"],
body.dark-mode [class*="bg-blue"],
body.dark-mode [class*="bg-green"],
body.dark-mode [class*="bg-yellow"],
body.dark-mode [class*="bg-amber"] {
    background-color: var(--card-dark) !important;
}

/* Force dark mode for all gradient backgrounds */
body.dark-mode [class*="bg-gradient"],
body.dark-mode .bg-gradient-to-br,
body.dark-mode .bg-gradient-to-r,
body.dark-mode .bg-gradient-to-l,
body.dark-mode .bg-gradient-to-t,
body.dark-mode .bg-gradient-to-b {
    background: linear-gradient(135deg, var(--card-dark) 0%, var(--bg-dark) 100%) !important;
}

/* Text colors - ensure readability */
body.dark-mode .text-gray-400,
body.dark-mode .text-gray-500,
body.dark-mode .text-gray-600 {
    color: var(--text-muted-dark) !important;
}

body.dark-mode .text-gray-700,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-900 {
    color: var(--text-dark) !important;
}

body.dark-mode .text-gray-500 {
    color: var(--text-muted-dark) !important;
}

body.dark-mode .text-brand-blue {
    color: #64b5f6 !important;
}

body.dark-mode .text-brand-green {
    color: #81c784 !important;
}

body.dark-mode .text-blue-200,
body.dark-mode .text-blue-100,
body.dark-mode .text-green-200,
body.dark-mode .text-green-100,
body.dark-mode .text-yellow-200,
body.dark-mode .text-yellow-100 {
    color: var(--text-dark) !important;
}

/* Border colors */
body.dark-mode .border-gray-100,
body.dark-mode .border-gray-200,
body.dark-mode .border-blue-200,
body.dark-mode .border-green-200,
body.dark-mode .border-yellow-200 {
    border-color: var(--border-dark) !important;
}

/* Form elements */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--card-dark) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-dark) !important;
}

/* Brand colors in dark mode */
body.dark-mode .bg-brand-green {
    background-color: #4a7c2c !important;
    color: white !important;
}

body.dark-mode .bg-brand-blue {
    background-color: #004b70 !important;
    color: white !important;
}

/* Buttons */
body.dark-mode button,
body.dark-mode a[class*="bg-brand"] {
    color: white !important;
}

body.dark-mode .text-white {
    color: var(--text-dark) !important;
}

/* Vaccine tabs */
body.dark-mode .vaccine-tab {
    background-color: transparent;
    border-color: var(--border-dark);
    color: var(--text-muted-dark);
}

body.dark-mode .vaccine-tab:hover {
    background-color: var(--card-dark);
}

body.dark-mode .vaccine-tab.active {
    background: linear-gradient(135deg, #8cc63f 0%, #a8d62d 100%);
    color: white;
}

body.dark-mode .vaccine-content {
    background-color: var(--card-dark);
    color: var(--text-dark);
}

body.dark-mode .vaccine-content h4 {
    color: var(--text-dark);
}

body.dark-mode .vaccine-content p {
    color: var(--text-muted-dark);
}

/* Hover states */
body.dark-mode .hover\:bg-blue-50:hover,
body.dark-mode .hover\:bg-green-50:hover {
    background-color: var(--card-dark) !important;
}

/* Links */
body.dark-mode a {
    color: #64b5f6 !important;
}

/* Navigation */
body.dark-mode nav {
    background-color: var(--card-dark) !important;
    border-color: var(--border-dark) !important;
}

/* Footer - Force dark background */
body.dark-mode footer,
body.dark-mode footer.bg-brand-blue {
    background-color: var(--bg-dark) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-dark) !important;
}

body.dark-mode footer p,
body.dark-mode footer span {
    color: var(--text-dark) !important;
}

/* Dark mode toggle button */
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #8cc63f;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

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

body.dark-mode .dark-mode-toggle {
    background: #64b5f6;
    color: white;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .dark-mode-toggle {
        top: 100px;
        right: 20px;
    }
}