/* Theme Switching - Light/Dark Mode */

[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Theme Toggle Button */
#themeToggle {
    position: relative;
}

[data-theme="dark"] .sun-icon {
    display: none;
}

[data-theme="dark"] .moon-icon {
    display: block;
}

.sun-icon {
    display: block;
}

.moon-icon {
    display: none;
}

/* Dark mode specific adjustments */
[data-theme="dark"] .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.2);
}

[data-theme="dark"] .badge-primary {
    background-color: rgba(10, 132, 255, 0.15);
}

[data-theme="dark"] .badge-success {
    background-color: rgba(50, 215, 75, 0.15);
}

[data-theme="dark"] .badge-warning {
    background-color: rgba(255, 159, 10, 0.15);
}

[data-theme="dark"] .badge-error {
    background-color: rgba(255, 69, 58, 0.15);
}

/* Smooth theme transition */
* {
    transition-property: background-color, color, border-color;
    transition-duration: 250ms;
}

/* Exclude transitions for layout changes */
.main-content,
.header-container,
.modal {
    transition: none;
}