/* Design Enhancements - التحسينات الجمالية العامة */

/* ========================================
   Card Hover Effects - تأثيرات الكاردات
   ======================================== */

.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.card-flush:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* ========================================
   Button Hover Effects - تأثيرات الأزرار
   ======================================== */

.btn {
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
}

/* ========================================
   Statistics Cards - كاردات الإحصائيات
   ======================================== */

.card-flush {
    border-radius: 0.625rem;
    overflow: hidden;
}

.card-flush .card-body {
    padding: 1.5rem;
}

/* Hover effect for statistics cards */
.row .col-xl-3 .card-flush:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* ========================================
   Symbol/Icon Animations - تأثيرات الأيقونات
   ======================================== */

.symbol {
    transition: all 0.3s ease;
}

.symbol:hover {
    transform: scale(1.1) rotate(5deg);
}

.symbol-label {
    transition: all 0.3s ease;
}

/* ========================================
   Badge Animations - تأثيرات الشارات
   ======================================== */

.badge {
    transition: all 0.2s ease;
}

.badge:hover {
    transform: scale(1.05);
}

/* ========================================
   Table Row Hover - تأثيرات صفوف الجدول
   ======================================== */

.table tbody tr {
    transition: all 0.2s ease;
}

.table tbody tr:hover {
    background-color: #f5f8fa;
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ========================================
   Link Hover Effects - تأثيرات الروابط
   ======================================== */

a {
    transition: all 0.2s ease;
}

a:hover {
    transform: translateX(-2px);
}

/* ========================================
   Input Focus Effects - تأثيرات حقول الإدخال
   ======================================== */

.form-control:focus {
    transform: scale(1.01);
    box-shadow: 0 0 0 0.25rem rgba(0, 158, 247, 0.15);
    transition: all 0.2s ease;
}

/* ========================================
   Tab Hover Effects - تأثيرات التابات
   ======================================== */

.nav-link {
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {
    transform: translateY(-2px);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #009ef7 0%, #50cd89 100%);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* ========================================
   Profile Header Effects - تأثيرات رأس الملف الشخصي
   ======================================== */

.symbol-fixed img {
    transition: all 0.3s ease;
}

.symbol-fixed:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ========================================
   Smooth Scrolling - تمرير سلس
   ======================================== */

html {
    scroll-behavior: smooth;
}

/* ========================================
   Loading Animations - تأثيرات التحميل
   ======================================== */

.spinner-border {
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
   Fade In Animation - تأثير الظهور التدريجي
   ======================================== */

.card, .table, .nav-tabs {
    animation: fadeIn 0.5s ease;
}

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

/* ========================================
   Separator Enhancements - تحسينات الفواصل
   ======================================== */

.separator {
    transition: all 0.3s ease;
}

.separator-dashed {
    background: linear-gradient(90deg, transparent, #e4e6ef, transparent);
}

/* ========================================
   Notice Box Effects - تأثيرات صناديق الإشعارات
   ======================================== */

.notice {
    transition: all 0.3s ease;
    animation: slideInRight 0.5s ease;
}

.notice:hover {
    transform: translateX(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   Responsive Enhancements - تحسينات متجاوبة
   ======================================== */

@media (max-width: 991.98px) {
    .card:hover {
        transform: translateY(-3px);
    }
    
    .btn:hover {
        transform: translateY(-1px);
    }
}

/* ========================================
   Dark Mode Support - دعم الوضع الداكن
   ======================================== */

@media (prefers-color-scheme: dark) {
    .card:hover {
        box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
    }
}