/**
 * Theme Transitions - Author Portal
 * Smooth transitions for theme switching
 * Optimized for performance (< 16ms switching time)
 */

/* 
 * Performance optimization: Use CSS containment to limit repaint scope
 * This tells the browser that theme changes won't affect layout
 */
:root {
    /* Optimize rendering for theme changes */
    color-scheme: light dark;
}

[data-theme="dark"] {
    color-scheme: dark;
}

/*
 * Smooth transitions for theme-dependent properties
 * Using 200ms as a good balance between smoothness and performance
 * Only apply to elements that actually use theme colors
 */
body,
.header,
.main-content,
.footer,
.card,
.btn,
.modal,
.dropdown-menu,
.form-control,
input,
textarea,
select,
a,
h1, h2, h3, h4, h5, h6,
p,
.text-muted,
.text-secondary {
    /* Only transition color-related properties to minimize repaints */
    transition: color 200ms ease, 
                background-color 200ms ease, 
                border-color 200ms ease, 
                box-shadow 200ms ease;
}

/* 
 * Disable transitions for elements that change frequently
 * to avoid performance issues
 */
*:focus,
*:active,
button:active {
    transition-duration: 0ms;
}

/*
 * Optimize specific high-impact elements
 * Use CSS containment to isolate rendering
 * 
 * NOTE: Do NOT use contain: paint on .header because it breaks dropdown menus!
 * contain: paint creates a new stacking context which prevents position: absolute
 * elements from escaping their container.
 */

.card {
    /* Contain layout and paint for better performance */
    contain: layout paint;
}

/* Do NOT add containment to .modal and .dropdown-menu as they need to escape their containers */

/*
 * Theme icon transitions
 */
[data-theme-icon] {
    transition: opacity 150ms ease, transform 150ms ease;
}

.theme-icon-hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

/*
 * Optimize theme toggle button
 */
[data-theme-toggle] {
    /* Prevent layout shifts during icon changes */
    contain: layout style paint;
    
    /* Ensure smooth icon transitions */
    position: relative;
}

[data-theme-toggle] [data-theme-icon].theme-icon-hidden {
    transform: translate(-50%, -50%) scale(0.8);
}

/*
 * Reduce motion for users who prefer it
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*
 * Performance optimization: Prevent flash during theme initialization
 * The inline script sets data-theme before first paint, but this ensures
 * no visual glitches if there's any delay
 */
html:not([data-theme]) {
    /* Hide content until theme is set to prevent flash */
    visibility: hidden;
}

html[data-theme] {
    visibility: visible;
}