/* Base dark mode styles */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-bs-theme="dark"] body {
    background-color: #121212;
    color: #e0e0e0;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: #e0e0e0;
}

[data-bs-theme="dark"] .card {
    background-color: #1e1e1e;
    border-color: #2d2d2d;
}

[data-bs-theme="dark"] .card-header {
    background-color: #2d2d2d;
    border-bottom-color: #3d3d3d;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #2d2d2d;
    border-color: #0d6efd;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .alert-info {
    background-color: #1c2a38;
    border-color: #2d4053;
    color: #9bbade;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: #332c24;
    border-color: #4d3c26;
    color: #ffd699;
}

[data-bs-theme="dark"] .alert-success {
    background-color: #1e3729;
    border-color: #2d4f3c;
    color: #9fdfb9;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: #372424;
    border-color: #4f2d2d;
    color: #dfb9b9;
}

[data-bs-theme="dark"] .progress {
    background-color: #2d2d2d;
}

[data-bs-theme="dark"] .text-muted {
    color: #9e9e9e !important;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    color: #9e9e9e;
    border-color: #3d3d3d;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: #3d3d3d;
    border-color: #4d4d4d;
    color: #e0e0e0;
}

/* Dark mode toggle button styles */
.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1030;
    padding: 0.5rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

[data-bs-theme="dark"] .theme-toggle {
    background: rgba(255, 255, 255, 0.2);
}

.theme-toggle:hover {
    background: rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}