/* Dark Mode Styles - Automatic based on system preference */
:root {
    --bg-color: #ffffff;
    --text-color: #212529;
    --card-bg: #f8f9fa;
    --card-border: #dee2e6;
    --footer-bg: #f8f9fa;
    --footer-text: #6c757d;
}

/* Dark mode colors applied when system prefers dark color scheme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #e9ecef;
        --card-bg: #2d2d2d;
        --card-border: #404040;
        --footer-bg: #212529;
        --footer-text: #adb5bd;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-light {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

.card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-color);
}

.card-body {
    background-color: var(--card-bg);
    color: var(--text-color);
}

footer.bg-light {
    background-color: var(--footer-bg) !important;
}

footer .text-muted {
    color: var(--footer-text) !important;
}

.jumbotron {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
}

.text-muted {
    color: var(--footer-text) !important;
}

/* Alert styles for dark mode */
@media (prefers-color-scheme: dark) {
    .alert-info {
        background-color: #1a4d5e;
        border-color: #2c6c80;
        color: #b8e2f0;
    }

    .alert-warning {
        background-color: #5e4a1a;
        border-color: #806b2c;
        color: #f0ddb8;
    }

    /* Card footer in dark mode */
    .card-footer {
        background-color: #242424;
        border-color: var(--card-border);
    }

    /* Badge styles for dark mode */
    .badge {
        background-color: #404040 !important;
        color: #e9ecef !important;
    }

    /* Button styles for dark mode */
    .btn-outline-secondary {
        color: #adb5bd;
        border-color: #6c757d;
    }

    .btn-outline-secondary:hover {
        background-color: #6c757d;
        border-color: #6c757d;
        color: #fff;
    }

    .btn-primary {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
    }
}