/* =====================================================
   PERFORMANCE OPTIMIZATIONS - CLS Prevention
   ===================================================== */

/* Global CLS prevention */
* {
    /* Prevent layout shifts by ensuring consistent sizing */
    box-sizing: border-box;
}

/* Image optimization to prevent CLS */
img {
    /* Ensure images maintain aspect ratio during load */
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

img[height] {
    /* For images with explicit height, maintain it during load */
    height: attr(height px);
}

/* Prevent font loading shifts */
@font-face {
    font-display: swap;
}

/* Layout containment for performance */
.contain-layout {
    contain: layout style paint;
}

/* Critical navigation elements */
.navbar,
.topbar,
.sidebar {
    contain: layout style;
    will-change: transform;
}

/* Auth page specific optimizations */
.account-page {
    min-height: 100vh;
    contain: layout style paint;
    transform: translateZ(0); /* Force GPU acceleration */
}

/* Logo optimization */
.logo,
.auth-logo {
    contain: layout style;
}

.logo img,
.auth-logo img {
    width: auto;
    display: block;
    transform: translateZ(0);
}

/* Background element optimization */
.position-absolute,
.position-fixed {
    /* Prevent reflow from absolute positioned elements */
    contain: layout style paint;
}

/* Form optimization to prevent shifts */
.form-control,
.form-select,
.btn {
    /* Ensure consistent sizing */
    box-sizing: border-box;
}

/* Card and container optimization */
.card,
.modal,
.dropdown-menu {
    contain: layout style;
}

/* Animation performance */
.fade,
.slide,
.zoom {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Critical rendering optimizations */
.critical-above-fold {
    contain: layout style paint;
    content-visibility: auto;
}

/* Lazy loading optimization */
[loading="lazy"] {
    content-visibility: auto;
}

/* Text rendering optimization */
.text-render-optimized {
    text-rendering: optimizeSpeed;
    font-smooth: never;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Grid and flexbox optimization */
.d-grid,
.d-flex {
    contain: layout style;
}

/* Table optimization */
.table {
    table-layout: fixed;
    contain: layout style;
}

/* Pagination optimization */
.pagination {
    contain: layout style;
}

.page-link {
    contain: layout style paint;
}

/* Modal optimization */
.modal {
    contain: layout style paint;
    transform: translateZ(0);
}

/* Scrolling optimization */
.overflow-auto,
.overflow-scroll {
    contain: layout style paint;
    scroll-behavior: smooth;
}

/* Media query for reduced motion */
@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;
    }
}

/* High contrast mode optimization */
@media (prefers-contrast: high) {
    .auth-bg-elements,
    .auth-pattern,
    .brand-accent {
        opacity: 0.8 !important;
        filter: contrast(2);
    }
}

/* Print optimization */
@media print {
    .auth-bg-elements,
    .auth-pattern,
    .brand-accent {
        display: none !important;
    }
}

/* Accessibility optimization */
@media (prefers-reduced-motion: reduce) {
    .will-change-transform {
        will-change: auto;
    }
}

/* Critical resource hints via CSS */
.preload-fonts::before {
    content: '';
    font-family: 'Poppins', sans-serif;
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

/* Performance monitoring classes */
.perf-mark {
    contain: strict;
    content-visibility: auto;
}

/* Container query optimization */
@container (min-width: 768px) {
    .container-responsive {
        contain: layout style;
    }
}

/* GPU acceleration for animations */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Prevent flash of unstyled content */
[data-theme] {
    transition: none !important;
}

/* Critical path rendering */
.critical-resource {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Intersection observer optimization */
.lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
}