/**
 * Dark Mode Theme
 * CSS Variables override for dark theme
 */

/* Dark mode tokens: design-tokens.css [data-theme="dark"] */
/* Legacy --color-* aliases inherit from --ds-* automatically */

/* Theme Toggle Button */
.theme-icon-dark,
.theme-icon-light {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

[data-theme="light"] .theme-icon-dark {
    opacity: 1;
    transform: rotate(0deg);
}

[data-theme="light"] .theme-icon-light {
    opacity: 0;
    position: absolute;
    transform: rotate(180deg);
}

[data-theme="dark"] .theme-icon-dark {
    opacity: 0;
    position: absolute;
    transform: rotate(180deg);
}

[data-theme="dark"] .theme-icon-light {
    opacity: 1;
    transform: rotate(0deg);
}

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

@media (prefers-reduced-motion: no-preference) {
    body,
    .tw-card,
    .ds-card,
    .modern-card,
    .tw-btn,
    .ds-btn,
    .modern-btn,
    .main-nav {
        transition: var(--transition-theme);
    }
}

/* Dark mode specific adjustments */
[data-theme="dark"] .tw-card,
[data-theme="dark"] .modern-card,
[data-theme="dark"] .ds-card {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .modern-header,
[data-theme="dark"] .te-toolbar {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .tw-table,
[data-theme="dark"] .modern-table {
    background: var(--color-bg-primary);
}

[data-theme="dark"] .tw-table thead,
[data-theme="dark"] .modern-table thead {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .tw-table tbody tr:hover,
[data-theme="dark"] .modern-table tbody tr:hover {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .tw-input,
[data-theme="dark"] .tw-select,
[data-theme="dark"] .tw-textarea,
[data-theme="dark"] .modern-input,
[data-theme="dark"] .modern-select,
[data-theme="dark"] .modern-textarea {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-light);
    color: var(--color-text-primary);
}

[data-theme="dark"] .tw-input:focus,
[data-theme="dark"] .tw-select:focus,
[data-theme="dark"] .tw-textarea:focus,
[data-theme="dark"] .modern-input:focus,
[data-theme="dark"] .modern-select:focus,
[data-theme="dark"] .modern-textarea:focus {
    border-color: var(--color-accent);
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .tw-btn-ghost,
[data-theme="dark"] .modern-btn-ghost {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .tw-btn-ghost:hover,
[data-theme="dark"] .modern-btn-ghost:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

[data-theme="dark"] .tw-btn-secondary,
[data-theme="dark"] .modern-btn-secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .tw-btn-secondary:hover,
[data-theme="dark"] .modern-btn-secondary:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-medium);
}

/* Modal dark mode */
[data-theme="dark"] .modal-content {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--color-border-light);
}

/* Badge dark mode */
[data-theme="dark"] .badge {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* Alert dark mode */
[data-theme="dark"] .alert {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-light);
    color: var(--color-text-primary);
}

/* Dropdown dark mode */
[data-theme="dark"] .dropdown-menu {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .dropdown-item {
    color: var(--color-text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--color-bg-tertiary);
}

/* Code blocks dark mode */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-light);
}

/* Scrollbar dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-medium);
}