/**
 * Theme Transition CSS
 * Ensures smooth transitions when theme changes occur
 * Applied globally to all theme-sensitive elements
 */

/* Global transition setup */
* {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exclude elements that shouldn't animate */
img, svg, video, canvas, object, embed,
.no-transition,
[data-no-transition] {
    transition: none !important;
}

/* Ensure all divs and containers explicitly support dark mode colors */
div, section, article, main, aside {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* Form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="color"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea,
.form-input,
.form-select,
.form-textarea {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Buttons */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-icon,
.action-btn,
[role="button"] {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Containers and surfaces */
.admin-form-wrapper,
.admin-form-header,
.form-section,
.settings-tabs,
.tab-content,
.card,
.container,
.table-wrapper,
.content-card,
.filters-panel,
.search-panel {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease;
}

/* Table elements */
table, thead, tbody, tr, th, td {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease;
}

/* Badges and status indicators */
.badge, .badge-success, .badge-danger, .badge-warning {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* Modal and overlay */
.modal, .modal-content, .modal-header, .modal-body, .modal-footer {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease;
}

/* Alerts */
.alert, .alert-info, .alert-warning, .alert-success, .alert-danger {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease;
}

/* Dropdowns and lists */
.dropdown-menu, .dropdown-item {
    transition: background-color 0.3s ease,
                color 0.3s ease;
}

/* Text and typography */
h1, h2, h3, h4, h5, h6,
p, span, label, a, div {
    transition: color 0.3s ease,
                background-color 0.3s ease;
}

/* Smooth root element changes */
html {
    transition: background-color 0.3s ease;
}

body {
    transition: background-color 0.3s ease,
                color 0.3s ease;
}
