body.dark-mode {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* General containers and cards */
.dark-mode .card,
.dark-mode .form-control,
.dark-mode .table {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

/* Buttons: transparent with gray border */
.dark-mode .btn {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid gray !important;
}

/* Links and hover states */
.dark-mode a {
    color: #ffffff !important;
    text-decoration: none;
}
.dark-mode a:hover {
    text-decoration: underline;
}
body.dark-mode .background {
    background: #000000 !important;
}
body.dark-mode .btn {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid gray !important;
}
/* Override Bootstrap primary/info buttons in dark mode */
body.dark-mode .btn-primary,
body.dark-mode .btn-info,
body.dark-mode .btn-secondary {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid gray !important;
}
body.dark-mode .btn,
body.dark-mode .btn-primary,
body.dark-mode .btn-info {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid gray !important;
    box-shadow: none !important;
}