:root {
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --card-bg: #ffffff;
    --border-color: #dee2e6;
    --input-bg: #ffffff;
    --input-text: #212529;
}

body.dark-mode {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --card-bg: #1e1e1e;
    --border-color: #333333;
    --input-bg: #2a2a2a;
    --input-text: #e0e0e0;
}

html, body {
    min-height: 100vh;
}

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

    body.dark-mode #app,
    body.dark-mode .page,
    body.dark-mode main,
    body.dark-mode .main,
    body.dark-mode .content {
        background-color: var(--bg-color) !important;
        color: var(--text-color) !important;
    }

    body.dark-mode .card:not(.bg-primary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info),
    body.dark-mode .list-group-item:not(.active):not(.bg-primary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info) {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }

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

    body.dark-mode .card:not(.bg-primary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info) > .card-header,
    body.dark-mode .card:not(.bg-primary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info) > .card-body,
    body.dark-mode .card:not(.bg-primary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info) > .card-footer {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

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

    body.dark-mode .form-control,
    body.dark-mode .form-select,
    body.dark-mode .input-group-text {
        background-color: var(--input-bg) !important;
        color: var(--input-text) !important;
        border-color: var(--border-color) !important;
    }

        body.dark-mode .form-control::placeholder {
            color: #888888 !important;
        }

        body.dark-mode .form-control:focus,
        body.dark-mode .form-select:focus {
            background-color: var(--input-bg) !important;
            color: var(--input-text) !important;
            border-color: #0d6efd !important;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

    body.dark-mode .alert-info {
        background-color: #0c5460 !important;
        color: #d1ecf1 !important;
        border-color: #0a404a !important;
    }

    body.dark-mode .btn-white {
        background-color: var(--input-bg) !important;
        color: var(--text-color) !important;
        border-color: var(--border-color) !important;
    }

    body.dark-mode .modal-content,
    body.dark-mode .modal-header,
    body.dark-mode .modal-footer {
        background-color: var(--card-bg) !important;
        border-color: var(--border-color) !important;
    }

    body.dark-mode .bg-primary {
        background-color: #0d6efd !important;
        color: #ffffff !important;
    }

    body.dark-mode .bg-success {
        background-color: #198754 !important;
        color: #ffffff !important;
    }

    body.dark-mode .bg-warning {
        background-color: #ffc107 !important;
        color: #000000 !important;
    }

    body.dark-mode .bg-danger {
        background-color: #dc3545 !important;
        color: #ffffff !important;
    }

    body.dark-mode .bg-info {
        background-color: #0dcaf0 !important;
        color: #000000 !important;
    }

    body.dark-mode .text-white {
        color: #ffffff !important;
    }

    body.dark-mode .text-primary {
        color: #0d6efd !important;
    }

    body.dark-mode .text-success {
        color: #198754 !important;
    }

    body.dark-mode .text-warning {
        color: #ffc107 !important;
    }

    body.dark-mode .text-danger {
        color: #dc3545 !important;
    }

    body.dark-mode .text-info {
        color: #0dcaf0 !important;
    }