/* Dark Theme Styles */
:root {
    --light-bg: #ffffff;
    --light-text: #212529;
    --light-card-bg: #ffffff;
    --light-border: #dee2e6;
    --light-secondary-bg: #f8f9fa;
    
    --dark-bg: #212529;
    --dark-text: #ffffff;
    --dark-card-bg: #343a40;
    --dark-border: #495057;
    --dark-secondary-bg: #495057;
    --dark-navbar-bg: #1a1d20;
    --dark-hover-bg: #6c757d;
}

/* Light theme (default) */
body {
    background-color: var(--light-bg);
    color: var(--light-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
    background-color: var(--light-card-bg);
    border-color: var(--light-border);
    color: var(--light-text);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.list-group-item {
    background-color: var(--light-card-bg);
    border-color: var(--light-border);
    color: var(--light-text);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.list-group-item:hover {
    background-color: var(--light-secondary-bg);
}

.list-group-item.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: white !important;
}

/* Dark theme */
[data-theme="dark"] body {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .card {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .card-header {
    background-color: var(--dark-secondary-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .card-footer {
    background-color: var(--dark-secondary-bg) !important;
    border-color: var(--dark-border) !important;
}

[data-theme="dark"] .list-group-item {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--dark-hover-bg) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .list-group-item.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: white !important;
}

[data-theme="dark"] .navbar {
    background-color: var(--dark-navbar-bg) !important;
}

[data-theme="dark"] .footer {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .progress {
    background-color: var(--dark-secondary-bg) !important;
}

[data-theme="dark"] .badge {
    background-color: var(--dark-secondary-bg) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--dark-secondary-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .btn-success {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

[data-theme="dark"] .btn-outline-light {
    border-color: var(--dark-text);
    color: var(--dark-text);
}

[data-theme="dark"] .btn-outline-light:hover {
    background-color: var(--dark-text);
    color: var(--dark-bg);
}

/* Text colors for dark theme */
[data-theme="dark"] .text-muted {
    color: #adb5bd !important;
}

[data-theme="dark"] .text-white {
    color: var(--dark-text) !important;
}

[data-theme="dark"] .lead {
    color: var(--dark-text) !important;
}

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--dark-text) !important;
}

[data-theme="dark"] p {
    color: var(--dark-text) !important;
}

/* Card specific styles for dark theme */
[data-theme="dark"] .bg-success {
    background-color: #198754 !important;
}

[data-theme="dark"] .bg-danger {
    background-color: #dc3545 !important;
}

[data-theme="dark"] .bg-info {
    background-color: #0dcaf0 !important;
}

[data-theme="dark"] .bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

[data-theme="dark"] .bg-primary {
    background-color: #0d6efd !important;
}

/* Theme toggle button */
#theme-toggle {
    transition: all 0.3s ease;
}

#theme-toggle:hover {
    transform: scale(1.1);
}

/* Icon transitions */
#theme-icon {
    transition: transform 0.3s ease;
}

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Progress bar in dark theme */
[data-theme="dark"] .progress-bar {
    background-color: #0d6efd !important;
}

/* Breadcrumb for dark theme */
[data-theme="dark"] .breadcrumb {
    background-color: var(--dark-secondary-bg) !important;
}

[data-theme="dark"] .breadcrumb-item a {
    color: #0d6efd !important;
}

/* Form elements in dark theme */
[data-theme="dark"] .form-control {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--dark-card-bg) !important;
    border-color: #0d6efd !important;
    color: var(--dark-text) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Alert components */
[data-theme="dark"] .alert {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    [data-theme="dark"] .card {
        margin-bottom: 1rem;
    }
    
    [data-theme="dark"] .navbar-nav {
        background-color: var(--dark-navbar-bg) !important;
    }
}