/**
 * ملف CSS لتحسينات الأداء المتقدمة
 * مخصص لتحسين Largest Contentful Paint (LCP) والأداء العام
 */

/* تحسينات الخطوط للأداء */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Tajawal Regular'), local('Tajawal-Regular');
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Tajawal Medium'), local('Tajawal-Medium');
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Tajawal Bold'), local('Tajawal-Bold');
}

/* تحسينات الأداء العامة */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* تحسين الصور للأداء */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* تحسين العناصر الحرجة */
.critical-content {
    contain: layout style paint;
}

.above-fold {
    will-change: auto;
}

.below-fold {
    contain: layout style;
}

/* تحسين الجداول */
.table-matches {
    contain: layout style;
    transform: translateZ(0); /* تفعيل GPU acceleration */
}

.table-matches tbody tr {
    will-change: background-color;
}

.table-matches tbody tr:hover {
    transform: translateZ(0);
}

/* تحسين الانتقالات */
.transition-optimized {
    transition-property: transform, opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
}

/* تحسين الشبكة */
.container {
    contain: layout style;
}

.row {
    contain: layout;
}

/* تحسين الأزرار والروابط */
a, button {
    touch-action: manipulation;
}

.btn {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

.btn:hover {
    transform: translateY(-1px);
}

/* تحسين النماذج */
input, textarea, select {
    will-change: border-color, box-shadow;
}

/* تحسين الرسوم المتحركة */
@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;
    }
}

/* تحسين الطباعة */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    img {
        max-width: 100% !important;
    }
    
    .no-print {
        display: none !important;
    }
}

/* تحسين الشاشات عالية الكثافة */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .high-dpi-optimized {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* تحسين الأجهزة المحمولة */
@media (max-width: 768px) {
    .mobile-optimized {
        transform: translateZ(0);
    }
    
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    
    /* تقليل تعقيد الظلال على الأجهزة المحمولة */
    .card, .table-matches {
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
}

/* تحسين الشاشات الكبيرة */
@media (min-width: 1200px) {
    .large-screen-optimized {
        contain: strict;
    }
}

/* تحسين الوضع المظلم */
@media (prefers-color-scheme: dark) {
    .auto-dark {
        filter: invert(1) hue-rotate(180deg);
    }
    
    .auto-dark img {
        filter: invert(1) hue-rotate(180deg);
    }
}

/* تحسين التمرير */
.scroll-optimized {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* تحسين الشبكة المرنة */
.flex-optimized {
    display: flex;
    will-change: flex-basis;
}

.grid-optimized {
    display: grid;
    contain: layout style;
}

/* تحسين الصور المتجاوبة */
.responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: attr(width) / attr(height);
}

/* تحسين الأيقونات */
.icon-optimized {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

/* تحسين النصوص الطويلة */
.text-optimized {
    text-rendering: optimizeSpeed;
    font-kerning: auto;
    font-variant-ligatures: common-ligatures;
}

/* تحسين الخلفيات */
.background-optimized {
    background-attachment: local;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* تحسين الحدود */
.border-optimized {
    border-style: solid;
    border-width: 1px;
    border-color: currentColor;
}

/* تحسين الظلال */
.shadow-optimized {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* تحسين التدرجات */
.gradient-optimized {
    background-image: linear-gradient(to bottom, var(--start-color), var(--end-color));
    background-repeat: no-repeat;
    background-attachment: local;
}

/* تحسين الشفافية */
.opacity-optimized {
    will-change: opacity;
    transition: opacity 0.2s ease-in-out;
}

/* تحسين التحويلات */
.transform-optimized {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* تحسين الفلاتر */
.filter-optimized {
    will-change: filter;
    transition: filter 0.2s ease-in-out;
}

/* تحسين المحتوى المتغير */
.dynamic-content {
    contain: layout style paint;
    will-change: contents;
}

/* تحسين العناصر الثابتة */
.static-content {
    contain: strict;
}

/* تحسين العناصر المخفية */
.hidden-optimized {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.visible-optimized {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* تحسين الرسوم المتحركة المخصصة */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-optimized {
    animation: fadeIn 0.3s ease-out;
}

/* تحسين التحميل التدريجي */
.progressive-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* تحسين العناصر التفاعلية */
.interactive-optimized {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.interactive-optimized:hover {
    transform: scale(1.02);
}

.interactive-optimized:active {
    transform: scale(0.98);
}