/* الألوان الأساسية يتم حقنها ديناميكياً من إعدادات النظام في رأس الصفحة */

html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

body {
    font-family: 'Tajawal', sans-serif;
    background-color: #F8FAFC;
    color: #1E293B;
    -webkit-tap-highlight-color: transparent;
}

/* صبغات الألوان الديناميكية */
.bg-primary-theme {
    background-color: var(--primary-color) !important;
}

.hover\:bg-primary-hover:hover {
    background-color: var(--primary-hover) !important;
}

.text-primary-theme {
    color: var(--primary-color) !important;
}

.border-primary-theme {
    border-color: var(--primary-color) !important;
}

.ring-primary-theme:focus {
    --tw-ring-color: var(--primary-color) !important;
}

.bg-accent-theme {
    background-color: var(--accent-color) !important;
}

.text-accent-theme {
    color: var(--accent-color) !important;
}

.bg-primary-soft {
    background-color: color-mix(in srgb, var(--primary-color) 12%, transparent) !important;
}

/* تدرجات ألوان فخمة مستندة إلى اللون الأساسي */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
}

.gradient-hero {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%);
}

/* إخفاء شريط التمرير مع استمرار التمرير الأفقي للأقسام في الموبايل */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* تحسين تجربة الأزرار اللمسية في الهاتف */
.touch-card {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.touch-card:active {
    transform: scale(0.98);
}

/* أنيميشن السلة الجانبية */
.drawer-backdrop {
    transition: opacity 0.3s ease;
}
.drawer-content {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* أنيميشن شاشة التحميل الافتتاحية المبتكرة (App Launch Animation) */
#site-preloader {
    transition: opacity 0.3s ease, visibility 0.3s;
}

#site-preloader.preloader-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* حركة طفو ودوران طفيف للشعار */
@keyframes floatAndGlow {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 10px 30px -10px rgba(79, 70, 229, 0.5);
    }
    50% {
        transform: translateY(-8px) scale(1.04);
        box-shadow: 0 25px 50px -10px rgba(6, 182, 212, 0.6);
    }
}

.preloader-float-icon {
    animation: floatAndGlow 2.5s ease-in-out infinite;
}

/* حركة تموجات إشعاعية دائرية خلف الشعار */
@keyframes rippleEffect {
    0% {
        transform: scale(0.85);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.preloader-ripple {
    animation: rippleEffect 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

/* ظهور تدريجي فخم للنصوص */
@keyframes letterFadeUp {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.preloader-text-reveal {
    animation: letterFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* شريط تحميل نيون حديث بتدرج لوني لامع */
@keyframes shimmerGradient {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.preloader-progress-bar {
    background: linear-gradient(90deg, var(--primary-color) 0%, #38bdf8 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    animation: shimmerGradient 1.5s linear infinite;
}

/* التنبيهات المنبثقة السريعة (Toast) */
.toast-box {
    animation: slideUpFade 0.35s ease forwards;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* iPhone يكبّر الصفحة تلقائياً عند الضغط على أي خانة خطها أقل من 16px ويتركها مكبّرة.
   نجعل خط الخانات 16px على أجهزة iOS فقط حتى لا يتغير التصميم على أندرويد والكمبيوتر */
@supports (-webkit-touch-callout: none) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]),
    textarea,
    select {
        font-size: 16px !important;
    }
}