/**
 * CLS (Cumulative Layout Shift) Optimizations
 * Targeted fixes to reduce CLS score without breaking functionality
 */

/* 1. SKELETON LOADING - Fix the animation to not change dimensions */
.stream-block-skeleton {
    /* Ensure skeleton doesn't change block dimensions */
    overflow: hidden !important;
}

.stream-block-skeleton::before {
    /* Use transform instead of position for animation */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 200% !important; /* Double width for smooth animation */
    height: 100% !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.05) 25%, 
        transparent 50%) !important;
    /* Use transform for animation instead of left position */
    animation: skeleton-shimmer-optimized 1.5s infinite !important;
    transform: translateX(-100%) !important;
    will-change: transform !important;
}

@keyframes skeleton-shimmer-optimized {
    0% { 
        transform: translateX(-100%);
    }
    100% { 
        transform: translateX(0);
    }
}

/* 2. LANE MONITOR LOADING - Similar fix */
.lane-monitor-loading {
    overflow: hidden !important;
}

.lane-monitor-loading::before {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 200% !important;
    height: 100% !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(var(--center-color-rgb, 255, 255, 255), 0.2) 25%, 
        transparent 50%) !important;
    animation: loading-sweep-optimized 2s infinite !important;
    transform: translateX(-100%) !important;
    will-change: transform !important;
}

@keyframes loading-sweep-optimized {
    0% { 
        transform: translateX(-100%);
    }
    100% { 
        transform: translateX(0);
    }
}

/* 3. LOADING OVERLAY - Force GPU acceleration */
/* Removed to prevent conflict with main CSS animations */

/* 4. CONNECTION STATUS - Moved to inline CSS in _DisplayLayout.cshtml */

/* 5. IMAGE CONTAINERS - Reserve space */
.lane-monitor-image-container {
    /* Reserve aspect ratio space */
    aspect-ratio: 16/9 !important;
    /* Prevent layout shift during load */
    overflow: hidden !important;
}

.lane-image {
    /* Ensure images don't cause shifts */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* REMOVED - Let Bootstrap handle all modal behavior */

/* 7. GENERAL OPTIMIZATIONS */
/* Disable all transitions during initial page load */
body:not(.loaded) * {
    transition: none !important;
    animation-duration: 0s !important;
}

/* Special case: body itself should NEVER have transitions or dimension changes */
body.v2-display-body,
body.v2-display-body.loaded {
    transition: none !important;
    /* Lock dimensions to prevent any shift when loaded class is added */
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Skip skeleton animations during initial load */
body:not(.loaded) .stream-block-skeleton::before,
body:not(.loaded) .lane-monitor-loading::before {
    animation: none !important;
    opacity: 0.03 !important;
}

/* Hide all skeletons when loading overlay is active */
.loading-overlay.active ~ * .stream-block-skeleton::before,
.loading-overlay.active ~ * .lane-monitor-loading::before {
    animation: none !important;
    opacity: 0 !important;
}

/* Add loaded class after initial render */
body.loaded * {
    /* Re-enable ONLY animations after load */
    animation-duration: revert;
    /* DO NOT re-enable transitions globally - handle selectively below */
}

/* Ensure body and app-container never get transitions re-enabled */
body.loaded,
body.loaded #app-container {
    transition: none !important;
}

/* Override any width/height/layout transitions to prevent CLS */
body .stream-block,
body .stream-container,
body .stream-wrapper,
body .grid-layout,
body .overlay-layout {
    /* Force instant layout changes - no transitions on layout properties */
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease !important;
}

/* Safe transitions for interactive elements after load */
body.loaded .center-card,
body.loaded .floating-panel,
body.loaded .modal .modal-dialog,
body.loaded button,
body.loaded .btn,
body.loaded .dropdown-menu {
    /* Only allow non-layout-affecting transitions */
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Explicitly prevent any transitions on size/position changes */
.stream-block {
    /* Override the problematic width/height transitions from stream-block.css */
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Grid specific - no layout transitions */
.grid-container,
.grid-layout,
[class*="grid-"] {
    /* No grid transitions that cause reflow */
    transition: none !important;
}

/* After loaded, only allow transform-based animations */
body.loaded .floating-controls,
body.loaded .settings-trigger {
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Force GPU acceleration for animated elements */
.stream-block-skeleton::before,
.lane-monitor-loading::before {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* For v2 display pages, respect the overflow: hidden from inline styles */
/* Regular pages can have scrollbar-gutter for stability */
html:not(.v2-display-html) {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
}

/* 11. FLOATING PANEL - Prevent render before transform */
.floating-streams-panel.hidden {
    /* Start completely off-screen to prevent any initial render */
    visibility: hidden !important;
    opacity: 0 !important;
    /* Keep the transform for when it becomes visible */
    transform: translateX(calc(100% + 40px)) !important;
}

/* When panel is shown, make it visible */
.floating-streams-panel:not(.hidden) {
    visibility: visible !important;
    opacity: 1 !important;
    transition: transform 0.3s ease, opacity 0.2s ease !important;
}

/* 12. LOADING OVERLAY - Moved to inline CSS in _DisplayLayout.cshtml */

/* 13. FONT LOADING - Prevent FOUT (Flash of Unstyled Text) */
body.v2-display-body {
    /* Use font-display: block to prevent text from showing until font loads */
    font-synthesis: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* System fonts don't need @font-face - they're already available */
/* Instead, ensure text doesn't reflow when styles load */
body.v2-display-body * {
    /* Prevent text reflow during load */
    text-rendering: optimizeLegibility !important;
}

/* 16. BODY STABILIZATION FOR CLS */
/* Minimal body styles - let Bootstrap work normally */
body.v2-display-body {
    /* Basic layout only */
    margin: 0;
    padding: 0;
    /* No transitions on body to prevent shifts */
    transition: none !important;
}

/* REMOVED - Let Bootstrap handle modal-open state */

/* 14. AGGRESSIVE CLS PREVENTION */
/* Hide all potentially shifting elements until CSS fully loads */
.floating-streams-panel {
    /* Ensure these start invisible to prevent flash */
    opacity: 0 !important;
}

/* Loading overlay styles moved to inline CSS in _DisplayLayout.cshtml */

.floating-streams-panel:not(.hidden) {
    opacity: 1 !important;
}

/* Connection status should always be visible when it has a state */
.connection-status {
    /* Don't hide by default - it needs to show connection state */
    opacity: 0.7 !important;
}

.connection-status.connected {
    opacity: 0.7 !important;
}

.connection-status.disconnected {
    opacity: 1 !important;
}

/* 15. APP CONTAINER STABILIZATION */
/* All critical app-container styles moved to inline CSS in _DisplayLayout.cshtml
   to prevent CLS from CSS loading order issues */

/* Main display area should maintain size */
#main-display {
    /* Fill parent completely */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* min-height: 100vh removed - was causing unit conflict with height: 100% */
}

/* Removed fadeIn animation - might be causing CLS */

/* Skeleton placeholder for initial load */
.skeleton-placeholder {
    /* Ensure it fills the container */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #111 !important;
    /* Will be replaced without affecting layout */
    will-change: opacity !important;
}

/* REMOVED - Let Bootstrap handle ALL modal behavior */

/* Modal CLS Prevention - Minimal intervention */
#color-picker-modal {
    /* Ensure modal is properly positioned to prevent shifts */
    position: fixed !important;
    /* Isolate modal layout from affecting page */
    contain: layout style !important;
}

/* Prevent body padding changes when modals open */
body.modal-open {
    /* Override Bootstrap's scrollbar compensation */
    padding-right: 0 !important;
}

/* 8. STREAM BLOCKS - Add containment without breaking sizing */
.stream-block {
    /* Isolate layout changes within the block */
    contain: layout style !important;
}

/* 9. VIDEO ELEMENTS - Ensure stable sizing */
.stream-video {
    /* Ensure video maintains aspect ratio */
    object-fit: fill !important;
}

/* 10. FLOATING CONTROLS - More stable positioning */
.floating-controls {
    /* Ensure controls don't shift during load */
    will-change: transform !important;
}