/* ========================================================================== 
   PERFORMANCE OPTIMIZATIONS
   CSS optimizations for better loading times and smoother interactions
   ========================================================================== */

/* ============== CRITICAL CSS OPTIMIZATIONS ============== */

/* Prevent layout shifts during loading */
.prevent-cls {
    contain: layout style paint;
}

/* Optimize font loading */
@font-face {
    font-family: 'Cairo';
    font-display: swap;
    font-weight: 300 900;
    src: url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');
}

@font-face {
    font-family: 'Inter';
    font-display: swap;
    font-weight: 300 700;
    src: url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
}

/* ============== GPU ACCELERATION ============== */

/* Force GPU acceleration for smooth animations */
.gpu-accelerated,
.will-animate,
.animate-fade-in,
.animate-slide-in-up,
.animate-scale-in,
.hover-lift,
.hover-scale,
.card:hover,
.btn:hover {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimize transforms for better performance */
.optimized-transform {
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* Remove will-change after animations complete */
.animation-complete {
    will-change: auto;
}

/* ============== EFFICIENT SELECTORS ============== */

/* Use efficient selectors to reduce CSS parsing time */
.btn,
.card,
.form-control,
.nav-link {
    /* Avoid descendant selectors where possible */
    /* Use class selectors instead of complex hierarchies */
}

/* ============== LAYOUT OPTIMIZATIONS ============== */

/* Use containment for better layout performance */
.sidebar {
    contain: layout style;
}

.main-content {
    contain: layout;
}

.card {
    contain: layout style paint;
}

.table-container {
    contain: layout;
}

/* Optimize flexbox and grid layouts */
.flex-optimized {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Use specific flex properties instead of shorthand */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

.grid-optimized {
    display: grid;
    /* Define explicit grid areas for better performance */
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: auto 1fr auto;
}

/* ============== PAINT OPTIMIZATIONS ============== */

/* Reduce paint complexity */
.simple-border {
    border: 1px solid var(--neutral-200);
    /* Avoid complex border styles that require more paint time */
}

.simple-shadow {
    box-shadow: var(--shadow-sm);
    /* Use simple shadows instead of complex multi-layer shadows */
}

/* Optimize background rendering */
.optimized-background {
    background-color: var(--neutral-0);
    /* Use solid colors instead of gradients where possible */
}

.optimized-gradient {
    background: linear-gradient(180deg, var(--neutral-0) 0%, var(--neutral-50) 100%);
    /* Use simple gradients with fewer color stops */
}

/* ============== SCROLLING OPTIMIZATIONS ============== */

/* Smooth scrolling optimizations */
.smooth-scroll {
    scroll-behavior: smooth;
    /* Use CSS scroll snapping for better performance */
    scroll-snap-type: y mandatory;
}

.scroll-item {
    scroll-snap-align: start;
}

/* Optimize scrollable areas */
.scrollable-optimized {
    overflow-y: auto;
    overflow-x: hidden;
    /* Use momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Optimize scrollbar rendering */
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-300) transparent;
}

.scrollable-optimized::-webkit-scrollbar {
    width: 6px;
}

.scrollable-optimized::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable-optimized::-webkit-scrollbar-thumb {
    background-color: var(--neutral-300);
    border-radius: 3px;
}

/* ============== IMAGE OPTIMIZATIONS ============== */

/* Optimize image loading and rendering */
.optimized-image {
    /* Use object-fit for better image handling */
    object-fit: cover;
    object-position: center;
    
    /* Prevent layout shifts */
    width: 100%;
    height: auto;
    
    /* Optimize decoding */
    decoding: async;
    
    /* Enable lazy loading */
    loading: lazy;
}

.image-placeholder {
    background-color: var(--neutral-100);
    background-image: linear-gradient(45deg, 
        var(--neutral-200) 25%, 
        transparent 25%, 
        transparent 75%, 
        var(--neutral-200) 75%);
    background-size: 20px 20px;
    animation: placeholder-shimmer 1.5s ease-in-out infinite;
}

@keyframes placeholder-shimmer {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

/* ============== FORM OPTIMIZATIONS ============== */

/* Optimize form rendering and interaction */
.form-optimized .form-control {
    /* Reduce repaints during typing */
    will-change: border-color, box-shadow;
    
    /* Optimize input rendering */
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-optimized .form-control:focus {
    /* Use transform instead of changing border for better performance */
    transform: translateZ(0);
    will-change: transform;
}

/* ============== TABLE OPTIMIZATIONS ============== */

/* Optimize large table rendering */
.table-optimized {
    /* Use table-layout fixed for better performance with large tables */
    table-layout: fixed;
    width: 100%;
    
    /* Enable virtual scrolling container */
    contain: layout style paint;
}

.table-optimized th,
.table-optimized td {
    /* Prevent text wrapping for better performance */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Virtual scrolling for large datasets */
.virtual-scroll-container {
    height: 400px;
    overflow-y: auto;
    position: relative;
}

.virtual-scroll-item {
    position: absolute;
    width: 100%;
    will-change: transform;
}

/* ============== ANIMATION OPTIMIZATIONS ============== */

/* Optimize animations for 60fps */
.animation-optimized {
    /* Use transform and opacity for animations */
    transition: transform 0.3s ease, opacity 0.3s ease;
    
    /* Avoid animating expensive properties */
    /* Don't animate: width, height, padding, margin, border-width */
    /* Do animate: transform, opacity, filter */
}

/* Efficient micro-animations */
.micro-animation {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.micro-animation:hover {
    transform: translateY(-1px) scale(1.02);
}

/* Optimize staggered animations */
.stagger-optimized {
    animation-fill-mode: both;
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============== CRITICAL RENDERING PATH ============== */

/* Above-the-fold content optimizations */
.above-fold {
    /* Ensure critical content renders first */
    contain: layout style paint;
    
    /* Optimize initial render */
    transform: translateZ(0);
}

/* Below-the-fold content can be lazy-loaded */
.below-fold {
    /* Use content-visibility for better performance */
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

/* ============== MEMORY OPTIMIZATIONS ============== */

/* Reduce memory usage */
.memory-optimized {
    /* Use efficient CSS properties */
    contain: layout style paint;
    
    /* Avoid complex selectors */
    /* Use specific class names instead of complex hierarchies */
}

/* Clean up after animations */
.cleanup-after-animation {
    animation-fill-mode: forwards;
}

.cleanup-after-animation.animation-complete {
    animation: none;
    will-change: auto;
}

/* ============== RESPONSIVE OPTIMIZATIONS ============== */

/* Optimize responsive images */
.responsive-image-optimized {
    width: 100%;
    height: auto;
    
    /* Use srcset for different screen densities */
    /* <img srcset="image-1x.jpg 1x, image-2x.jpg 2x" alt="Description"> */
}

/* Optimize responsive layouts */
.responsive-layout-optimized {
    /* Use CSS Grid for complex layouts */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    
    /* Avoid complex media queries where possible */
}

/* ============== LOADING OPTIMIZATIONS ============== */

/* Skeleton loading for better perceived performance */
.skeleton-loader {
    background: linear-gradient(90deg, 
        var(--neutral-200) 25%, 
        var(--neutral-100) 50%, 
        var(--neutral-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: var(--space-2);
}

.skeleton-text:last-child {
    width: 60%;
    margin-bottom: 0;
}

/* Progressive loading */
.progressive-load {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.progressive-load.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* ============== DARK MODE OPTIMIZATIONS ============== */

/* Optimize theme switching */
[data-theme="dark"] .theme-optimized {
    /* Use efficient color transitions */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Reduce repaints during theme changes */
.theme-transition-optimized {
    will-change: background-color, color, border-color;
}

.theme-transition-optimized.theme-complete {
    will-change: auto;
}

/* ============== PRINT OPTIMIZATIONS ============== */

@media print {
    /* Optimize for printing */
    .print-optimized {
        /* Remove unnecessary elements */
        box-shadow: none !important;
        background: white !important;
        color: black !important;
        
        /* Optimize page breaks */
        page-break-inside: avoid;
    }
    
    .no-print {
        display: none !important;
    }
    
    /* Optimize text for printing */
    .print-text {
        font-size: 12pt;
        line-height: 1.4;
        color: black;
    }
}

/* ============== ACCESSIBILITY PERFORMANCE ============== */

/* Optimize for screen readers */
.screen-reader-optimized {
    /* Use semantic HTML for better performance */
    /* Avoid complex ARIA when simple HTML works */
}

/* Optimize focus management */
.focus-optimized:focus {
    /* Use outline instead of box-shadow for better performance */
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* ============== BROWSER-SPECIFIC OPTIMIZATIONS ============== */

/* Safari optimizations */
@supports (-webkit-touch-callout: none) {
    .safari-optimized {
        /* Optimize for Safari's rendering engine */
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
    }
}

/* Chrome optimizations */
@supports (display: -webkit-box) {
    .chrome-optimized {
        /* Optimize for Chromium-based browsers */
        contain: layout style paint;
    }
}

/* Firefox optimizations */
@supports (-moz-appearance: none) {
    .firefox-optimized {
        /* Optimize for Firefox's rendering engine */
        will-change: transform;
    }
}

/* ============== PERFORMANCE MONITORING ============== */

/* Classes for performance monitoring */
.perf-monitor {
    /* Add performance markers */
    contain: layout style paint;
}

.perf-critical {
    /* Mark critical rendering path elements */
    contain: layout;
    will-change: transform;
}

.perf-lazy {
    /* Mark elements that can be lazy-loaded */
    content-visibility: auto;
}

/* ============== UTILITY CLASSES FOR OPTIMIZATION ============== */

/* Quick performance fixes */
.no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.no-drag {
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
}

.no-highlight {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.hardware-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.efficient-opacity {
    /* Use opacity for show/hide instead of display */
    opacity: 1;
    transition: opacity 0.2s ease;
}

.efficient-opacity.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ============== DEBUGGING PERFORMANCE ============== */

/* Development-only performance debugging */
@media screen and (min-width: 1px) {
    .debug-performance {
        /* Highlight performance-critical elements in development */
        outline: 2px dashed red;
    }
    
    .debug-layout-shift {
        /* Highlight elements that might cause layout shifts */
        background: rgba(255, 0, 0, 0.1);
    }
    
    .debug-paint {
        /* Highlight elements that trigger repaints */
        background: rgba(255, 255, 0, 0.1);
    }
}

/* Remove debug styles in production */
@media print, (prefers-reduced-motion: reduce) {
    .debug-performance,
    .debug-layout-shift,
    .debug-paint {
        outline: none !important;
        background: transparent !important;
    }
}