/**
 * LAMINAIS ANTI-FLICKER CSS
 * Comprehensive CSS rules to eliminate visual flickering during DOM updates
 * Works in conjunction with anti-flicker-coordinator.js
 */

/* ===========================================
   1. GLOBAL ANTI-FLICKER PROTECTION
   =========================================== */

/* Disable all transitions and animations when updating */
.updating,
.updating * {
    transition: none !important;
    animation: none !important;
    transform: translateZ(0) !important; /* Force GPU layer */
    backface-visibility: hidden !important;
}

/* Preserve layout during updates */
.updating {
    min-height: var(--current-height, auto);
    overflow: hidden;
}

/* ===========================================
   2. LIST CARD SPECIFIC PROTECTION
   =========================================== */

/* Prevent list card flickering during refresh */
.group-item.updating,
.nested-list-item.updating {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: relative;
}

/* Stable positioning for cards */
.group-item,
.nested-list-item {
    contain: layout style; /* CSS containment for performance */
    transform: translateZ(0); /* GPU acceleration */
    will-change: auto; /* Prevent unnecessary layers when not updating */
}

/* Prevent task item flickering */
.task-item.updating {
    transform: translateZ(0) !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
}

/* ===========================================
   3. NAVIGATION BADGE PROTECTION
   =========================================== */

/* Prevent badge flickering - most critical for user perception */
.nav-badge.updating,
.nav-badge.flicker-protected {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    transform: none !important;
}

/* Ensure badges maintain position during updates */
.nav-badge {
    contain: strict; /* Strict containment for badges */
    transform: translateZ(0); /* GPU layer */
}

/* ===========================================
   4. CONTENT REPLACEMENT EFFECTS
   =========================================== */

/* Smooth content replacement with minimal visual impact */
.content-replacing {
    opacity: 0.95;
    filter: blur(0.5px);
    transition: opacity 0.05s ease, filter 0.05s ease;
}

.content-replaced {
    opacity: 1;
    filter: none;
    transition: opacity 0.1s ease, filter 0.1s ease;
}

/* ===========================================
   5. CONTAINER STABILITY
   =========================================== */

/* Prevent container jumping during updates */
.list-container.updating,
.groups-container.updating {
    min-height: var(--current-height, 200px);
    overflow: hidden;
}

/* Maintain scroll position */
.page.updating {
    scroll-behavior: auto; /* Prevent smooth scrolling during updates */
}

/* ===========================================
   6. PROGRESS BAR STABILITY
   =========================================== */

/* Prevent progress bar flickering */
.progress-bar.updating,
.task-progress-bar.updating {
    transition: none !important;
}

.progress-fill.updating {
    transition: none !important;
    transform: translateZ(0);
}

/* ===========================================
   7. MODAL CONTENT PROTECTION  
   =========================================== */

/* Prevent modal content flickering */
.modal-content.updating {
    opacity: 1 !important;
    transform: none !important;
}

/* ===========================================
   8. PERFORMANCE OPTIMIZATIONS
   =========================================== */

/* GPU acceleration for frequently updated elements */
.group-item,
.nested-list-item,
.task-item,
.nav-badge,
.progress-bar {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce paint complexity during updates */
.updating {
    contain: layout style paint;
}

/* ===========================================
   9. FLASH OF UNSTYLED CONTENT PREVENTION
   =========================================== */

/* Prevent FOUC for dynamically created elements */
.flicker-protected {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Initial state for elements that will be updated */
.will-update {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ===========================================
   10. MOBILE SPECIFIC OPTIMIZATIONS
   =========================================== */

@media (max-width: 768px) {
    /* More aggressive optimizations for mobile */
    .updating {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }
    
    /* Prevent mobile viewport jumping */
    body.updating {
        position: fixed;
        width: 100%;
        top: var(--scroll-position, 0);
    }
}

/* ===========================================
   11. THEME TRANSITION PROTECTION
   =========================================== */

/* Prevent flickering during theme changes */
body.theme-changing,
body.theme-changing * {
    transition: none !important;
    animation: none !important;
}

/* ===========================================
   12. DEBUGGING HELPERS
   =========================================== */

/* Visual debugging for update states (only when debug mode enabled) */
.debug-flicker .updating {
    outline: 2px solid rgba(255, 0, 0, 0.3) !important;
    background: rgba(255, 255, 0, 0.05) !important;
}

.debug-flicker .flicker-protected {
    outline: 2px solid rgba(0, 255, 0, 0.3) !important;
}

/* ===========================================
   13. ANIMATION OVERRIDES FOR CRITICAL ELEMENTS
   =========================================== */

/* Override any existing animations on critical elements during updates */
.nav-badge.updating,
.group-item.updating,
.nested-list-item.updating {
    animation-name: none !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

/* ===========================================
   14. SCROLL STABILITY
   =========================================== */

/* Maintain scroll position during updates */
.scroll-locked {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ===========================================
   15. HIGH CONTRAST PROTECTION
   =========================================== */

/* Ensure visibility in high contrast mode */
@media (prefers-contrast: high) {
    .updating {
        border: 1px solid transparent;
    }
    
    .flicker-protected {
        outline: none !important;
    }
}

/* ===========================================
   16. REDUCED MOTION COMPATIBILITY
   =========================================== */

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .updating,
    .updating * {
        animation: none !important;
        transition: none !important;
    }
    
    .content-replacing,
    .content-replaced {
        transition: none !important;
    }
}

/* ===========================================
   17. FOCUS MANAGEMENT DURING UPDATES
   =========================================== */

/* Maintain focus visibility during updates */
.updating *:focus {
    outline: 2px solid var(--accent-color, #0ea5e9) !important;
    outline-offset: 2px !important;
}

/* ===========================================
   18. CRITICAL ELEMENT PRIORITIZATION
   =========================================== */

/* Ensure critical UI elements are always visible */
.critical-ui {
    z-index: 9999 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Navigation elements are critical */
.nav-btn,
.nav-badge {
    position: relative;
    z-index: 100;
}

/* ===========================================
   19. MEMORY LEAK PREVENTION
   =========================================== */

/* Prevent accumulation of transform layers */
.updating-complete {
    transform: none !important;
    will-change: auto !important;
    contain: none !important;
}

/* ===========================================
   20. BROWSER-SPECIFIC OPTIMIZATIONS
   =========================================== */

/* WebKit specific optimizations */
@supports (-webkit-appearance: none) {
    .updating {
        -webkit-transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        -webkit-perspective: 1000 !important;
    }
}

/* Firefox specific optimizations */
@-moz-document url-prefix() {
    .updating {
        transform: translateZ(0) !important;
    }
}

/* ===========================================
   21. ACCESSIBILITY DURING UPDATES
   =========================================== */

/* Ensure screen readers can still access content */
.updating[aria-live] {
    /* Don't hide from screen readers */
    clip: unset !important;
    overflow: visible !important;
}

/* Announce completion of updates */
.update-complete {
    /* This class can be used to announce update completion to screen readers */
}

/* ===========================================
   22. FINAL SAFETY MEASURES
   =========================================== */

/* Ensure no element becomes permanently invisible */
.updating {
    max-height: none !important;
    overflow: visible !important;
}

/* Prevent infinite update loops */
.updating-timeout {
    transition: all 0.1s ease !important;
    animation: none !important;
}