/* /Layout/AdminLayout.razor.rz.scp.css */
/* =========================================
   1. تنسيقات الصفحة العامة والهيكل
   ========================================= */
body[b-t2ucrtd3lm] {
    background-color: #f8f9fa;
    overflow-x: hidden;
    font-family: 'Cairo', sans-serif;
    margin: 0;
}

.admin-wrapper[b-t2ucrtd3lm] {
    min-height: 100vh;
    background-color: #f4f6f9;
    position: relative;
}

.admin-main-content[b-t2ucrtd3lm] {
    margin-right: 260px;
    min-height: 100vh;
    display: block;
    width: auto;
    transition: margin-right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.content-body[b-t2ucrtd3lm] {
    padding: 1.5rem;
    width: 100%;
}

.admin-topbar[b-t2ucrtd3lm] {
    background-color: #fff;
    padding: 15px 30px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
}

.user-welcome[b-t2ucrtd3lm] {
    color: #008456;
}

/* ==================================================
   2. شاشات الكمبيوتر حالة طي القائمة - Collapse
   ================================================== */
@media (min-width: 769px) {
    /* تقليص مساحة المحتوى */
    .admin-wrapper.sidebar-collapsed .admin-main-content[b-t2ucrtd3lm] {
        margin-right: 80px !important;
    }

    /* تقليص عرض القائمة الجانبية باستخدام ::deep */
    .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .sidebar-wrapper {
        width: 80px !important;
    }

    /* إخفاء النصوص (اسم المركز، الأقسام، النصوص) */
    .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .brand-name,
    .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .menu-label,
    .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .nav-link-item span {
        display: none !important;
    }

    /* إخفاء نصوص أزرار الخروج والزيارة السفلية مع الاحتفاظ بالأيقونة */
    .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .btn-logout-sidebar,
    .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .btn-home {
        font-size: 0 !important;
        padding: 15px 0 !important;
    }

        .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .btn-logout-sidebar i,
        .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .btn-home i {
            font-size: 18px !important;
        }

    /* توسيط الأيقونات بشكل مثالي */
    .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .logo-area {
        justify-content: center !important;
        width: 100%;
    }

    .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .nav-link-item {
        justify-content: center !important;
        padding: 15px 0 !important;
    }

        .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .nav-link-item .icon {
            margin: 0 !important;
            font-size: 22px !important;
        }

    /* إصلاح مشكلة مط الشعار عند الطي */
    .admin-wrapper.sidebar-collapsed[b-t2ucrtd3lm]  .logo-area img {
        object-fit: contain !important; /* يحافظ على أبعاد الصورة بدون تشويه */
        max-width: 100% !important;
        height: 35px !important; /* تصغير طفيف ليناسب المساحة الضيقة */
    }
}

/* =========================================
   3. شاشات الموبايل والتابلت (Hamburger Menu)
   ========================================= */
@media (max-width: 768px) {
    .admin-main-content[b-t2ucrtd3lm] {
        margin-right: 0 !important; /* المحتوى يأخذ كامل الشاشة */
    }

    .admin-topbar[b-t2ucrtd3lm] {
        padding: 15px;
    }

    /* إخفاء القائمة الجانبية بسحبها خارج الشاشة يميناً */
    [b-t2ucrtd3lm] .sidebar-wrapper {
        right: -280px !important;
    }

    /* إظهار القائمة الجانبية بانزلاق عند الضغط على الهامبرغر */
    .admin-wrapper.mobile-open[b-t2ucrtd3lm]  .sidebar-wrapper {
        right: 0 !important;
        box-shadow: -5px 0 25px rgba(0,0,0,0.5) !important;
    }

    /* الخلفية المعتمة خلف القائمة */
    .mobile-overlay[b-t2ucrtd3lm] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(3px);
        z-index: 1050; /* أقل من القائمة الجانبية بدرجة */
        animation: fadeIn-b-t2ucrtd3lm 0.3s ease-out;
    }

    /* إجبار القائمة الجانبية لتكون فوق التظليل */
    .admin-wrapper[b-t2ucrtd3lm]  .sidebar-wrapper {
        z-index: 1100 !important;
    }
}

@keyframes fadeIn-b-t2ucrtd3lm {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Layout/Footer.razor.rz.scp.css */
/*
    تحديث الألوان بناءً على الشعار:
    اللون الذهبي الأساسي: #d4af37 (للعناوين، الأيقونات، التفاعل)
    الخلفية الداكنة: #121212
    خلفية الحقوق: #0a0a0a
    لون النص الفاتح: #b0b0b0
*/

ul[b-lev35b1afc] {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.footer-section[b-lev35b1afc] {
    background: #121212; /* خلفية أغمق قليلاً */
    position: relative;
    color: #b0b0b0;
}

/* خط ذهبي رفيع في أعلى الفوتر */
.footer-top-border[b-lev35b1afc] {
    height: 3px;
    background: linear-gradient(to left, #121212, #d4af37, #121212);
    width: 100%;
}

.footer-content[b-lev35b1afc] {
    position: relative;
    z-index: 2;
}

.footer-logo[b-lev35b1afc] {
    margin-bottom: 30px;
}

    .footer-logo h3[b-lev35b1afc] {
        font-size: 24px;
        margin-top: 10px;
        color: #fff;
    }

.footer-text p[b-lev35b1afc] {
    margin-bottom: 14px;
    font-size: 15px; /* تكبير الخط قليلاً */
    color: #b0b0b0;
    line-height: 1.8;
}

/* --- تحسين أيقونات التواصل الاجتماعي --- */
.footer-social-icon span[b-lev35b1afc] {
    color: #fff;
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-social-icon a[b-lev35b1afc] {
    color: #fff;
    font-size: 16px;
    margin-left: 10px; /* للعربية */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05); /* خلفية شفافة خفيفة */
    transition: all 0.3s ease-in-out;
    border: 1px solid rgba(255,255,255,0.1);
}

    /* تأثير التحويم: تغيير اللون للذهبي ورفع الأيقونة قليلاً */
    .footer-social-icon a:hover[b-lev35b1afc] {
        background: #d4af37; /* اللون الذهبي */
        color: #fff;
        transform: translateY(-3px);
        border-color: #d4af37;
    }

/* --- تحسين العناوين --- */
.footer-widget-heading h3[b-lev35b1afc] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 35px;
    position: relative;
    padding-bottom: 15px;
}

    /* الخط التحتي الذهبي */
    .footer-widget-heading h3[b-lev35b1afc]::before {
        content: "";
        position: absolute;
        right: 0; /* للعربية */
        bottom: 0;
        height: 3px;
        width: 60px;
        background: #d4af37; /* اللون الذهبي من الشعار */
        border-radius: 2px;
    }

/* --- تحسين قائمة الروابط --- */
.footer-widget ul li[b-lev35b1afc] {
    display: block; /* جعلها تحت بعضها أفضل للقراءة */
    margin-bottom: 12px;
}

    .footer-widget ul li a[b-lev35b1afc] {
        color: #b0b0b0;
        text-transform: capitalize;
        text-decoration: none;
        transition: all 0.3s;
        display: flex;
        align-items: center;
    }

        /* تأثير التحويم على الروابط: تغيير اللون وانزلاق لليسار */
        .footer-widget ul li a:hover[b-lev35b1afc] {
            color: #d4af37; /* الذهبي */
            padding-right: 8px; /* تحريك الرابط قليلاً لليسار */
        }

        /* تنسيق السهم الصغير بجانب الرابط */
        .footer-widget ul li a i[b-lev35b1afc] {
            font-size: 12px;
            color: #d4af37;
            opacity: 0.7;
            transition: 0.3s;
        }

        .footer-widget ul li a:hover i[b-lev35b1afc] {
            opacity: 1;
        }


/* --- تحسين قسم التواصل (CTA) --- */
.single-cta[b-lev35b1afc] {
    display: flex;
    align-items: flex-start; /* محاذات للأعلى */
}

.cta-icon[b-lev35b1afc] {
    flex-shrink: 0;
    margin-left: 15px; /* للعربية */
}

    .cta-icon i[b-lev35b1afc] {
        color: #d4af37; /* الذهبي */
        font-size: 25px;
    }

.cta-text[b-lev35b1afc] {
    /* padding-right: 15px; removed, using flexbox gap via margin on icon */
}

    .cta-text h4[b-lev35b1afc] {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .cta-text span[b-lev35b1afc] {
        color: #b0b0b0;
        font-size: 15px;
        line-height: 1.6;
        display: block;
    }

/* --- منطقة حقوق النشر --- */
.copyright-area[b-lev35b1afc] {
    background: #0a0a0a; /* لون أغمق جداً للأسفل */
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.copyright-text p[b-lev35b1afc] {
    margin: 0;
    font-size: 14px;
    color: #878787;
}

    .copyright-text p a[b-lev35b1afc] {
        color: #d4af37; /* الذهبي */
        text-decoration: none;
        font-weight: 600;
        transition: 0.3s;
    }

        .copyright-text p a:hover[b-lev35b1afc] {
            color: #fff;
            text-decoration: underline;
        }

/* --- تنسيق صندوق الدعاء الاحترافي --- */
.footer-duaa-box[b-lev35b1afc] {
    background: rgba(255, 255, 255, 0.03); /* خلفية شفافة جداً */
    border-right: 3px solid #d4af37; /* الحد الذهبي على اليمين */
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    display: flex; /* لتنسيق الأيقونة بجانب النص */
    align-items: flex-start;
    transition: 0.3s;
}

/* تأثير بسيط عند مرور الماوس */
.footer-duaa-box:hover[b-lev35b1afc] {
    background: rgba(212, 175, 55, 0.08); /* تلميح ذهبي خفيف جداً في الخلفية */
}

.duaa-icon[b-lev35b1afc] {
    margin-left: 12px; /* مسافة بين الأيقونة والنص */
    padding-top: 2px;
}

.duaa-icon i[b-lev35b1afc] {
    color: #d4af37; /* اللون الذهبي */
    font-size: 20px;
}

.duaa-text p[b-lev35b1afc] {
    margin: 0;
    font-size: 13px; /* خط أصغر قليلاً وشاعري */
    color: #cccccc;
    line-height: 1.6;
    
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ================================================== */
/* ===  1. ������� ������ �������� (Layout Styles) === */
/* ================================================== */

.page[b-2uip1a6my5] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-2uip1a6my5] {
    flex: 1;
}

.sidebar[b-2uip1a6my5] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-2uip1a6my5] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-2uip1a6my5]  a, .top-row[b-2uip1a6my5]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

 .top-row[b-2uip1a6my5]  a:hover, .top-row[b-2uip1a6my5]  .btn-link:hover {
     text-decoration: underline;
 }

 .top-row[b-2uip1a6my5]  a:first-child {
     overflow: hidden;
     text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row[b-2uip1a6my5] {
        justify-content: space-between;
    }

    .top-row[b-2uip1a6my5]  a, .top-row[b-2uip1a6my5]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-2uip1a6my5] {
        flex-direction: row;
    }

    .sidebar[b-2uip1a6my5] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-2uip1a6my5] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-2uip1a6my5]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
        }

    .top-row[b-2uip1a6my5], article[b-2uip1a6my5] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* =============================================================================== */
/* ===  2. ����� ������� ������ ����� ����� ������ (Modern Glassmorphism)   === */
/* =============================================================================== */

/* ����� ������� ������� ������ */
.login-modal-overlay[b-2uip1a6my5] {
    --jjc-yellow: #fee256;
    --jjc-blue: #2baae2;
    --jjc-black: #1d1d1d;
    --jjc-dark-blue: #052767;
    --jjc-green: #008456;
}

/* --- ������� �������� --- */
.login-modal-overlay[b-2uip1a6my5] {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /* ����� ������ ����� */
    background: rgba(5, 39, 103, 0.6);
    backdrop-filter: blur(8px); /* ����� ������ ������ */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.login-modal-overlay.active[b-2uip1a6my5] {
    visibility: visible;
    opacity: 1;
    }

/* --- ������� ������� --- */
.modern-login-card[b-2uip1a6my5] {
    background: #ffffff;
    width: 100%;
    max-width: 420px;
    padding: 40px;
    border-radius: 20px;
    position: relative;
    text-align: center;
    font-family: 'Tajawal', 'Cairo', sans-serif;
    /* �� ���� ���� ����� */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    /* ����� ������ ��� ������ */
    transform: translateY(30px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* ���� ����� ������ ������ */
    border-top: 5px solid var(--jjc-yellow);
    overflow: hidden;
}

    /* ����� �� ���� ���� ���� ������ */
.modern-login-card[b-2uip1a6my5]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--jjc-blue);
    transform: scaleX(0); /* ���� ���� */
    transform-origin: left;
    transition: transform 0.6s ease;
    }

/* ��� ��� ������� ����� ���� ������ */
.login-modal-overlay.active .modern-login-card[b-2uip1a6my5]::before {
    transform: scaleX(1);
    transition-delay: 0.3s;
}

.login-modal-overlay.active .modern-login-card[b-2uip1a6my5] {
    transform: translateY(0) scale(1);
}

/* --- ����� ������� --- */
.card-header .logo-circle[b-2uip1a6my5] {
    width: 80px;
    height: 80px;
    margin: -60px auto 15px auto; /* ���� ������ ������ ����� ������ */
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-header .logo-circle img[b-2uip1a6my5] {
    max-width: 100%;
    max-height: 100%;
}

.card-header h3[b-2uip1a6my5] {
    color: var(--jjc-black);
    font-weight: 800;
    margin-bottom: 5px;
}

.card-header p[b-2uip1a6my5] {
    color: #888;
    font-size: 14px;
    margin-bottom: 30px;
}

/* --- ������ ������� (Floating Labels) --- */
.floating-input-group[b-2uip1a6my5] {
    position: relative;
    margin-bottom: 25px;
}

.floating-input-group input[b-2uip1a6my5] {
    width: 100%;
    padding: 15px 15px 15px 45px;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
    color: #333;
    font-weight: 600;
    text-align: right;
    direction: rtl;
    }

    /* ������ (�������) */
.floating-input-group label[b-2uip1a6my5] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none; /* ���� ������ �� ����� */
    transition: all 0.3s ease;
    font-size: 15px;
    background: transparent;
    padding: 0 5px;
    }

    /* �������� */
.floating-input-group .input-icon[b-2uip1a6my5] {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    transition: color 0.3s;
    }

    /* ��� ������ (��� ������� �� ���� ��) */
.floating-input-group input:focus[b-2uip1a6my5],
.floating-input-group input:not(:placeholder-shown)[b-2uip1a6my5] {
    background: #fff;
    border-color: var(--jjc-blue);
    box-shadow: 0 5px 15px rgba(43, 170, 226, 0.15);
    }

        /* ����� ������� ������ */
.floating-input-group input:focus ~ label[b-2uip1a6my5],
.floating-input-group input:not(:placeholder-shown) ~ label[b-2uip1a6my5] {
    top: 0;
    right: 10px;
    background: #fff;
    font-size: 12px;
    color: var(--jjc-blue);
    font-weight: bold;
}

.floating-input-group input:focus ~ .input-icon[b-2uip1a6my5] {
    color: var(--jjc-blue);
}

/* --- �������� (Checkbox) --- */
.form-options[b-2uip1a6my5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 14px;
}

.custom-checkbox[b-2uip1a6my5] {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.forgot-pass[b-2uip1a6my5] {
    color: var(--jjc-dark-blue);
    font-weight: 600;
    transition: 0.3s;
    text-decoration: none;
}

.forgot-pass:hover[b-2uip1a6my5] {
    color: var(--jjc-blue);
    text-decoration: underline;
}

/* --- �� ������ ������ --- */
.login-btn-animate[b-2uip1a6my5] {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--jjc-yellow) 0%, #ffd700 100%);
    color: var(--jjc-black);
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(254, 226, 86, 0.4);
}

.login-btn-animate:hover[b-2uip1a6my5] {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(254, 226, 86, 0.6);
    padding-left: 25px; /* ���� ����� ���� */
}

    .login-btn-animate i[b-2uip1a6my5] {
        transition: transform 0.3s;
    }

    .login-btn-animate:hover i[b-2uip1a6my5] {
        transform: translateX(-5px); /* ����� ����� ������ */
    }

/* --- �� ������� --- */
.close-btn[b-2uip1a6my5] {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #f0f0f0;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #333;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

    .close-btn:hover[b-2uip1a6my5] {
        background: #ffecec;
        color: red;
        transform: rotate(90deg);
    }

/* --- ������� --- */
.card-footer[b-2uip1a6my5] {
    margin-top: 25px;
    font-size: 14px;
    color: #666;
}

    .card-footer a[b-2uip1a6my5] {
        color: var(--jjc-blue);
        font-weight: 700;
        text-decoration: none;
    }

/* ========================================================= */
/* ===  ������ ���� ������� (Switch Animation)         === */
/* ========================================================= */

/* ���� ���� ����� ��� ������� ��� �������� */
.fade-in-up[b-2uip1a6my5] {
    animation: fadeInUp-b-2uip1a6my5 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes fadeInUp-b-2uip1a6my5 {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. ����� ���� �� ����� ������ ����� ���� ����� �� ������ */
.register-btn-color[b-2uip1a6my5] {
    /* ���� ���� ���� ��� ������ �� ������ */
    background: linear-gradient(135deg, var(--jjc-green) 0%, #005c3c 100%);
    color: #fff;
    /* �� ���� ����� */
    box-shadow: 0 5px 15px rgba(0, 132, 86, 0.4);
}

.register-btn-color:hover[b-2uip1a6my5] {
    /* ����� ������ ��� ������� */
    box-shadow: 0 10px 25px rgba(0, 132, 86, 0.6);
    transform: translateY(-3px);
}
/* ������ �� �� �������� ������ ������ ������ */
.register-btn-color i[b-2uip1a6my5],
.register-btn-color span[b-2uip1a6my5] {
    color: #fff !important;
}

/* ========================================================= */
/* ===  ����� ������: ����� ������� ������� �������� ������� === */
/* ========================================================= */
/*  ������� ������ ����� �� ������� ������ (Input Icons) ��� ������� */

.floating-input-group input:focus ~ .input-icon[b-2uip1a6my5] {
    color: var(--jjc-green); /* �������� ���� ����� ��� ������� */
}

.floating-input-group input:focus ~ label[b-2uip1a6my5],
.floating-input-group input:not(:placeholder-shown) ~ label[b-2uip1a6my5] {
    color: var(--jjc-green); /* ������� ���� ���� ����� */
}

/* ================================================== */
/*              ===  �� ������ �����   === */
/* ================================================== */

#backToTopBtn[b-2uip1a6my5] {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 10px;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid rgba(135, 206, 235, 0.5);
    /* ���� ����� */
    animation: pulse-shadow-b-2uip1a6my5 2s infinite;
}

#backToTopBtn:hover[b-2uip1a6my5] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(42, 82, 152, 0.4);
    background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
}

/*(����� ��������� (����� */
@keyframes pulse-shadow-b-2uip1a6my5 {
    0% {
        /* ��� ���� */
        box-shadow: 0 0 0 0 rgba(15, 151, 212, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(15, 151, 212, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(15, 151, 212, 0);
    }
}

/* ���� ������� (Shine Effect) */
#backToTopBtn[b-2uip1a6my5]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    color: var(--accent-yellow);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transform: skewX(-25deg);
    transition: none;
}

#backToTopBtn:hover[b-2uip1a6my5]::after {
    opacity: 1;
    left: 130%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ================================================== */
/* ===  1. تعريف المتغيرات وإعدادات الحاوية الرئيسية === */
/* ================================================== */

.navbar-container[b-n2z9et7xo0] {
    /* تعريف ألوان الهوية البصرية للمشروع */
    --jjc-green: #008456;
    --jjc-blue: #0F97D4;
    --jjc-yellow: #fee256;
    --jjc-black: #1d1d1d;
    /* إعدادات الخط والتموضع */
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 16px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 0 2rem;
    /* تثبيت القائمة في الأعلى */
    position: sticky;
    top: 0;
    z-index: 1000;
    text-decoration: none !important;
}

.main-nav[b-n2z9et7xo0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

/* ================================================== */
/* ===  تنسيق منطقة الهوية البصرية (الشعار) الاحترافي === */
/* ================================================== */

/* الحاوية التي تجمع الشعار والنص والفاصل */
.brand-wrapper[b-n2z9et7xo0] {
    display: flex;
    align-items: center;
    gap: 20px; /* مسافة بين الشعار والقائمة */
    padding-left: 20px; /* مسافة عن القائمة */
    flex: 0 0 auto;
}

/* رابط الهوية نفسه */
.brand-identity[b-n2z9et7xo0] {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease; /* إضافة حركة ناعمة للحاوية نفسها إن لزم */
}

/* --- 1. تنسيق صورة الشعار --- */
.logo-icon-container[b-n2z9et7xo0] {
    position: relative;
    width: 50px; /* حجم أيقونة الشعار */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .logo-icon-container img[b-n2z9et7xo0] {
        max-height: 100%;
        width: auto;
        z-index: 2;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* حركة مطاطية ناعمة */
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    }

/* تأثير التوهج الخلفي (Glow) */
.logo-glow[b-n2z9et7xo0] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(19, 151, 212, 0.4) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s ease;
    z-index: 1;
    border-radius: 50%;
}

/* التفاعل عند مرور الماوس على الشعار */
.brand-identity:hover .logo-icon-container img[b-n2z9et7xo0] {
    transform: scale(1.1) rotate(5deg); /* تكبير ودوران بسيط */
    filter: drop-shadow(0 8px 12px rgba(212, 175, 55, 0.3)); /* ظل ذهبي */
}

.brand-identity:hover .logo-glow[b-n2z9et7xo0] {
    opacity: 1;
    transform: scale(1.4);
}

/* --- 2. تنسيق النصوص (اسم المركز) --- */
.brand-text[b-n2z9et7xo0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.company-name[b-n2z9et7xo0] {
    font-family: 'Cairo', sans-serif; /* أو خطك المفضل */
    font-weight: 800;
    font-size: 18px;
    color: #1d1d1d; /* الأسود */
    letter-spacing: -0.5px;
    transition: color 0.3s ease;
}

.company-sub[b-n2z9et7xo0] {
    font-family: 'Tajawal', sans-serif;
    font-size: 11px;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* تغيير الألوان عند التحويم */
.brand-identity:hover .company-name[b-n2z9et7xo0] {
    color: #0F97D4; /* الأزرق الخاص بكم */
}

.brand-identity:hover .company-sub[b-n2z9et7xo0] {
    color: #d4af37; /* الذهبي */
}

/* --- 3. الخط الفاصل العمودي (Signature Divider) --- */
.brand-divider[b-n2z9et7xo0] {
    height: 40px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #e0e0e0, transparent);
    margin-right: 10px; /* للغة العربية */
}

/* --- تحسينات للشاشات الصغيرة --- */
@media (max-width: 992px) {
    .brand-text[b-n2z9et7xo0] {
        display: none; /* إخفاء النص والاكتفاء بالشعار في الشاشات الصغيرة لتوفير المساحة */
    }

    .brand-divider[b-n2z9et7xo0] {
        display: none;
    }

    .brand-wrapper[b-n2z9et7xo0] {
        padding-left: 0;
        gap: 0;
    }
}

/* 2. حاوية روابط القائمة الرئيسية */
.nav-menu[b-n2z9et7xo0] {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
}

/* 3. حاوية أزرار الدخول والمستخدم */
.auth-container[b-n2z9et7xo0] {
    flex: 0 0 auto;
    min-width: 150px;
    display: flex;
    justify-content: flex-end;
}

/* ================================================== */
/* ===  2. تنسيق روابط التنقل (Nav Items)          === */
/* ================================================== */

[b-n2z9et7xo0] .nav-item {
    text-decoration: none !important;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 8px 16px !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
    border: none !important;
    color: #555 !important;
    background-color: transparent;
    /* 👇 الإضافة الجديدة هنا: تمنع النص من الانقسام لسطرين 👇 */
    white-space: nowrap;
}

    /* تأثير عند مرور الماوس (Hover) */
    [b-n2z9et7xo0] .nav-item:not(.active):hover {
        color: var(--jjc-blue) !important;
        background-color: rgba(15, 151, 212, 0.05) !important;
    }

    /* حالة الرابط النشط (Active) */
    [b-n2z9et7xo0] .nav-item.active {
        color: var(--jjc-blue) !important;
        background-color: rgba(15, 151, 212, 0.08) !important;
        transform: translateY(-2px);
    }

        /* الخط المتحرك أسفل الرابط النشط */
        [b-n2z9et7xo0] .nav-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--jjc-blue);
            border-radius: 0 0 6px 6px;
            animation: expandWidth-b-n2z9et7xo0 0.4s ease-out forwards;
        }

@keyframes expandWidth-b-n2z9et7xo0 {
    from {
        width: 0;
        left: 50%;
    }

    to {
        width: 100%;
        left: 0;
    }
}

/* ================================================== */
/* ===  3. القائمة المنسدلة (مشاريعنا) - القديمة    === */
/* ================================================== */

.nav-dropdown[b-n2z9et7xo0] {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.dropdown-content[b-n2z9et7xo0] {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    list-style: none;
    padding: 10px 0;
    border-radius: 12px;
    z-index: 1200;
    border-top: 4px solid var(--jjc-blue);
}

/* إظهار القائمة عند التحويم */
.nav-dropdown:hover .dropdown-content[b-n2z9et7xo0] {
    display: block;
    animation: dropdownOpen-b-n2z9et7xo0 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.dropdown-content li a[b-n2z9et7xo0] {
    color: #444;
    padding: 12px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    text-align: right;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.2s ease;
    border-right: 3px solid transparent;
}

[b-n2z9et7xo0] .dropdown-content li a:hover,
[b-n2z9et7xo0] .dropdown-content li a.active {
    background-color: #f9f9f9;
    color: var(--jjc-blue);
    border-right: 3px solid var(--jjc-blue);
    padding-right: 25px;
}

/* أيقونات القائمة المنسدلة */
.icon-space[b-n2z9et7xo0] {
    display: inline-block !important;
    margin-left: 12px;
    color: #888;
    width: 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

[b-n2z9et7xo0] .dropdown-content li:hover .icon-space,
[b-n2z9et7xo0] .dropdown-content li a.active .icon-space {
    color: var(--jjc-green) !important;
    transform: scale(1.3) rotate(-10deg) !important;
}

/* سهم القائمة المنسدلة */
.arrow[b-n2z9et7xo0] {
    border: solid #666;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    margin-right: 8px;
    margin-bottom: 3px;
    transition: transform 0.3s;
}

.down[b-n2z9et7xo0] {
    transform: rotate(45deg);
}

.nav-dropdown:hover .arrow[b-n2z9et7xo0], .nav-item.active .arrow[b-n2z9et7xo0] {
    border-color: var(--jjc-blue);
    transform: rotate(225deg);
}

/* حركات ظهور عناصر القائمة (Staggered Animation) */
.dropdown-content li[b-n2z9et7xo0] {
    opacity: 0;
    transform: translateY(-10px);
}

.nav-dropdown:hover .dropdown-content li[b-n2z9et7xo0] {
    animation: itemSlide-b-n2z9et7xo0 0.5s ease forwards;
}

    .nav-dropdown:hover .dropdown-content li:nth-child(1)[b-n2z9et7xo0] {
        animation-delay: 0.05s;
    }

    .nav-dropdown:hover .dropdown-content li:nth-child(2)[b-n2z9et7xo0] {
        animation-delay: 0.1s;
    }

    .nav-dropdown:hover .dropdown-content li:nth-child(3)[b-n2z9et7xo0] {
        animation-delay: 0.15s;
    }

    .nav-dropdown:hover .dropdown-content li:nth-child(4)[b-n2z9et7xo0] {
        animation-delay: 0.2s;
    }

    .nav-dropdown:hover .dropdown-content li:nth-child(5)[b-n2z9et7xo0] {
        animation-delay: 0.25s;
    }

    .nav-dropdown:hover .dropdown-content li:nth-child(6)[b-n2z9et7xo0] {
        animation-delay: 0.3s;
    }

    .nav-dropdown:hover .dropdown-content li:nth-child(7)[b-n2z9et7xo0] {
        animation-delay: 0.35s;
    }

@keyframes dropdownOpen-b-n2z9et7xo0 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes itemSlide-b-n2z9et7xo0 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================== */
/* ===  4. منطقة ملف المستخدم (Profile Area)        === */
/* ================================================== */

.user-profile[b-n2z9et7xo0] {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f8f9fa;
    padding: 5px 15px 5px 5px;
    border-radius: 50px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.user-info[b-n2z9et7xo0] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
}

.user-name[b-n2z9et7xo0] {
    font-size: 13px;
    color: var(--jjc-blue);
    font-weight: 800;
}

.welcome-lbl[b-n2z9et7xo0] { /* تم إضافته لضمان التوافق في حال استخدامه */
    font-size: 10px;
    color: #888;
}

/* زر تسجيل الخروج */
.logout-btn[b-n2z9et7xo0] {
    width: 35px;
    height: 35px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background-color: #ffecec !important;
    border: 1px solid #ffcccc !important;
    color: #dc3545 !important;
    cursor: pointer;
    transition: 0.3s;
}

    .logout-btn:hover[b-n2z9et7xo0] {
        background-color: #dc3545 !important;
        color: white !important;
        transform: rotate(90deg);
    }

/* ================================================== */
/* ===  5. زر لوحة التحكم العصري (الكبسولة)         === */
/* ================================================== */
/* ملاحظة: تم نقله من ملف Razor ليكون هنا */

.modern-dashboard-btn[b-n2z9et7xo0] {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white !important;
    text-decoration: none !important;
    padding: 8px 20px !important;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
    margin-left: 10px;
    height: 40px;
}

    .modern-dashboard-btn i[b-n2z9et7xo0] {
        font-size: 14px;
    }

    .modern-dashboard-btn:hover[b-n2z9et7xo0] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(42, 82, 152, 0.4);
        background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
    }

    /* حركة اللمعان (Shine Effect) */
    .modern-dashboard-btn[b-n2z9et7xo0]::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
        color: var(--accent-yellow);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 1.5rem;
        cursor: pointer;
        transform: skewX(-25deg);
        transition: none;
    }

    .modern-dashboard-btn:hover[b-n2z9et7xo0]::after {
        opacity: 1;
        left: 130%;
        transition-property: left, top, opacity;
        transition-duration: 0.7s, 0.7s, 0.15s;
        transition-timing-function: ease;
    }

/* ================================================== */
/* ===  6. قائمة المشرف المنسدلة (Modern Dropdown)  === */
/* ================================================== */

.dropdown-container[b-n2z9et7xo0] {
    position: relative;
    display: inline-block;
}

/* زر القائمة الرئيسي */
.modern-nav-btn[b-n2z9et7xo0] {
    background: white;
    border: 1px solid #e0e0e0;
    padding: 8px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #555;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

    .modern-nav-btn:hover[b-n2z9et7xo0], .modern-nav-btn.active[b-n2z9et7xo0] {
        background: #f8f9fa;
        border-color: #0F97D4;
        color: #0F97D4;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(15, 151, 212, 0.15);
    }

.btn-content[b-n2z9et7xo0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- حركة الأيقونة (Morphing Icon) --- */
.toggle-icon-wrapper[b-n2z9et7xo0] {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

    .toggle-icon-wrapper i[b-n2z9et7xo0] {
        position: absolute;
        font-size: 0.8rem;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

/* السهم: الوضع الطبيعي */
.icon-arrow[b-n2z9et7xo0] {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #555;
}

/* الإغلاق: مخفي مبدئياً */
.icon-close[b-n2z9et7xo0] {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
    color: #dc3545;
}

/* الحالة النشطة: تبديل الأيقونات */
.modern-nav-btn.active .toggle-icon-wrapper .icon-arrow[b-n2z9et7xo0] {
    opacity: 0;
    transform: rotate(180deg) scale(0.5);
}

.modern-nav-btn.active .toggle-icon-wrapper .icon-close[b-n2z9et7xo0] {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.modern-nav-btn:hover .icon-arrow[b-n2z9et7xo0] {
    color: var(--jjc-blue);
}

/* صندوق القائمة المنسدلة الحديثة */
.modern-dropdown-menu[b-n2z9et7xo0] {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 280px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1000;
    border: 1px solid #f0f0f0;
}

    .modern-dropdown-menu.show[b-n2z9et7xo0] {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

.dropdown-header-text[b-n2z9et7xo0] {
    font-size: 0.75rem;
    color: #aaa;
    font-weight: bold;
    padding: 5px 15px;
    margin-bottom: 5px;
}

.modern-dropdown-item[b-n2z9et7xo0] {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    transition: 0.2s;
    margin-bottom: 4px;
}

    .modern-dropdown-item:hover[b-n2z9et7xo0] {
        background-color: #f8f9fa;
        transform: translateX(-5px);
    }

.icon-box[b-n2z9et7xo0] {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    font-size: 1rem;
}

.text-box[b-n2z9et7xo0] {
    display: flex;
    flex-direction: column;
}

    .text-box .title[b-n2z9et7xo0] {
        font-weight: 700;
        font-size: 0.9rem;
    }

    .text-box .subtitle[b-n2z9et7xo0] {
        font-size: 0.7rem;
        color: #888;
    }

.dropdown-divider[b-n2z9et7xo0] {
    height: 1px;
    background: #eee;
    margin: 5px 0;
}

/* خلفيات الأيقونات الملونة */
.bg-primary-soft[b-n2z9et7xo0] {
    background: rgba(13, 110, 253, 0.1);
}

.bg-success-soft[b-n2z9et7xo0] {
    background: rgba(25, 135, 84, 0.1);
}

.bg-warning-soft[b-n2z9et7xo0] {
    background: rgba(255, 193, 7, 0.1);
}

.bg-info-soft[b-n2z9et7xo0] {
    background: rgba(13, 202, 240, 0.1);
}

.bg-danger-soft[b-n2z9et7xo0] {
    background: rgba(220, 53, 69, 0.1);
}

.bg-dark-soft[b-n2z9et7xo0] {
    background: rgba(33, 37, 41, 0.1);
}

/* ================================================== */
/* ===  7. زر تسجيل الدخول (للزائر)                 === */
/* ================================================== */

.nav-button[b-n2z9et7xo0] {
    position: relative;
    display: inline-block;
    padding: 10px 25px;
    font-family: 'Tajawal', 'Cairo', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    color: var(--jjc-black);
    background-color: var(--jjc-yellow);
    border: 2px solid var(--jjc-black);
    border-radius: 8px;
    z-index: 1;
    overflow: hidden;
    transition: color 0.4s ease-in-out, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

    .nav-button[b-n2z9et7xo0]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--jjc-blue);
        z-index: -1;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
    }

    .nav-button:hover[b-n2z9et7xo0] {
        color: #ffffff;
        border-color: var(--jjc-blue);
        box-shadow: 0 8px 15px rgba(15, 151, 212, 0.3);
        transform: translateY(-2px);
    }

        .nav-button:hover[b-n2z9et7xo0]::before {
            transform: scaleX(1);
            transform-origin: left;
        }

    .nav-button:active[b-n2z9et7xo0] {
        transform: translateY(1px);
    }

/* ================================================== */
/* ===  8. جرس التنبيهات والمهام (النبضي)           === */
/* ================================================== */

.nav-notification[b-n2z9et7xo0] {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.bell-container[b-n2z9et7xo0] {
    position: relative;
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 1px solid rgba(231, 76, 60, 0.3);
    transition: all 0.3s ease;
}

    .bell-container:hover[b-n2z9et7xo0] {
        background: rgba(231, 76, 60, 0.25);
        transform: scale(1.05);
    }

.notification-count[b-n2z9et7xo0] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #e74c3c;
    color: white;
    font-size: 0.65rem;
    font-weight: 900;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

.cursor-pointer[b-n2z9et7xo0] {
    cursor: pointer;
}

.pulse-animation[b-n2z9et7xo0] {
    animation: pulse-red-nav-b-n2z9et7xo0 2s infinite;
}

/* 🚨 تم استخدام علامة @ واحدة فقط هنا لإصلاح التحذيرات 🚨 */
@keyframes pulse-red-nav-b-n2z9et7xo0 {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
    }
}

/*(تحسين العرض على الشاشات المتوسطة (لابتوب صغير */
@media (max-width: 1200px) {
    .nav-menu[b-n2z9et7xo0] {
        gap: 5px; /* تقليل المسافة بين العناصر */
    }

    [b-n2z9et7xo0] .nav-item {
        font-size: 14px; /* تصغير الخط قليلاً */
        padding: 8px 10px !important; /* تقليل الحواف الداخلية */
    }
}

/* تنسيق زر الهامبرغر الأساسي مخفي في شاشات الكمبيوتر */
.hamburger-btn[b-n2z9et7xo0] {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--jjc-blue);
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 2000;
}

/* ================================================== */
/* ===  تحسينات شاشات الجوال (Mobile Responsiveness) === */
/* ================================================== */
@media (max-width: 992px) {
    .navbar-container[b-n2z9et7xo0] {
        padding: 0 10px;
    }

    /* إظهار زر الهامبرغر في الجوال */
    .hamburger-btn[b-n2z9et7xo0] {
        display: block;
        order: 3; /* نجعله في أقصى اليسار */
        margin-right: 15px;
    }

    /* ترتيب منطقة المستخدم لتكون قبل الزر */
    .auth-container[b-n2z9et7xo0] {
        order: 2;
        flex: 1;
        justify-content: flex-end;
    }

    /* ================================================== */
    /* === سحر الزجاج (Glassmorphism) للقائمة الجانبية === */
    /* ================================================== */

    .nav-menu[b-n2z9et7xo0] {
        position: fixed; /* استخدام fixed أفضل لتغطية الشاشة حتى لو نزل المستخدم لأسفل */
        top: 80px;
        right: -100%;
        /* تحديد عرض القائمة الجانبية (85% يعطيها شكل نافذة منزلقة عصرية جداً) */
        width: 85%;
        max-width: 350px;
        height: calc(100vh - 80px);
        /* 🪄 تأثير الزجاج (Glassmorphism) 🪄 */
        background: rgba(255, 255, 255, 0.75); /* أبيض شفاف */
        backdrop-filter: blur(25px); /* تشويش قوي وناعم للخلفية */
        -webkit-backdrop-filter: blur(25px); /* لدعم متصفحات سفاري/أيفون */
        /* لمسات جمالية للحواف */
        border-left: 1px solid rgba(255, 255, 255, 0.6); /* لمعة زجاجية على الحافة اليسرى */
        border-top-left-radius: 30px; /* انحناء عصري من الأعلى */
        border-bottom-left-radius: 30px; /* انحناء عصري من الأسفل */
        box-shadow: -15px 0 40px rgba(15, 151, 212, 0.15); /* ظل أزرق خفيف يعطي عمق 3D */

        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 30px 20px;
        /* حركة الانزلاق: استخدمت توقيت مطاطي (cubic-bezier) لتبدو الحركة حية وطبيعية */
        transition: right 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 1500;
        overflow-y: auto;
    }

        /* عندما تتفعل القائمة (تنزلق للداخل) */
        .nav-menu.mobile-open[b-n2z9et7xo0] {
            right: 0;
        }

    /* تنسيق الروابط داخل قائمة الجوال */
    [b-n2z9et7xo0] .nav-item {
        width: 100%;
        padding: 15px 10px !important;
        border-bottom: 1px solid #f5f5f5 !important;
        font-size: 1.1rem;
    }

    /* تنسيق القوائم المنسدلة (مشاريعنا) لتناسب الموبايل */
    .nav-dropdown[b-n2z9et7xo0] {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .dropdown-content[b-n2z9et7xo0] {
        position: static;
        width: 100%;
        box-shadow: none;
        transform: none;
        border-top: none;
        border-right: 3px solid var(--jjc-blue);
        background-color: #fcfcfc;
        padding: 5px 0;
        border-radius: 0;
        display: none;
    }

    /* إظهار القائمة الفرعية عند الضغط في الجوال */
    .nav-dropdown:hover .dropdown-content[b-n2z9et7xo0],
    .nav-dropdown:active .dropdown-content[b-n2z9et7xo0] {
        display: block;
    }

    /* إخفاء تفاصيل المستخدم الطويلة في الجوال */
    .user-profile[b-n2z9et7xo0] {
        padding: 5px;
        gap: 5px;
    }

    /* ================================================== */
    /* === إظهار رسالة الترحيب والاسم بدون تداخل === */
    /* ================================================== */

    /* تصفير خلفية منطقة المستخدم لتبدو متناسقة ولا تأخذ حيزاً إضافياً */
    .user-profile[b-n2z9et7xo0] {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        gap: 8px;
    }

    .user-info[b-n2z9et7xo0] {
        display: flex !important;
        order: -1; /* هذا السطر السحري يجعله يظهر في أقصى اليمين بجوار الشعار مباشرة */
        margin-left: auto; /* لدفع الأزرار الأخرى لليسار */
        margin-right: 10px; /* مسافة بينه وبين الشعار */
    }

    /* إخفاء الإيميل تماماً */
    .user-info span:last-child[b-n2z9et7xo0] {
        display: none !important;
    }

    /* إظهار (مرحباً + الاسم) وتنسيقها ككبسولة أنيقة */
    .user-info span:first-child[b-n2z9et7xo0] {
        display: block !important;
        font-size: 11px !important;
        background: rgba(15, 151, 212, 0.08); /* خلفية زرقاء شفافة */
        color: var(--jjc-blue) !important;
        padding: 6px 14px;
        border-radius: 20px;
        white-space: nowrap;
        max-width: 140px; /* مسافة كافية للاسم */
        overflow: hidden;
        text-overflow: ellipsis; /* يضع ... إذا كان الاسم طويلاً جداً */
        border: 1px solid rgba(15, 151, 212, 0.15);
        font-weight: 700;
    }

    .modern-dashboard-btn[b-n2z9et7xo0] {
        padding: 8px 12px !important;
    }

    .modern-dashboard-btn span[b-n2z9et7xo0] {
        display: none;
    }

    /* ================================================== */
    /* === إصلاح الفراغ الكبير والقوائم المنسدلة للجوال === */
    /* ================================================== */

    .nav-dropdown[b-n2z9et7xo0] {
        height: auto !important; /* 🪄 هذا السطر السحري يحذف الفراغ تماماً 🪄 */
        width: 100%;
        display: block !important;
        margin-bottom: 5px;
    }

    /* تنسيق الروابط لتأخذ العرض بالكامل وتتوزع بشكل صحيح */
    [b-n2z9et7xo0] .nav-item {
        width: 100%;
        display: flex !important;
        justify-content: space-between; /* لضبط السهم مقابل النص */
        align-items: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; /* خط فاصل خفيف جداً يندمج مع الزجاج */
        padding: 12px 15px !important;
    }

    /* إصلاح القائمة الفرعية (التي تظهر عند التفاعل) لكي لا تخرج خارج الزجاج */
    .dropdown-content[b-n2z9et7xo0] {
        position: static !important;
        width: 100% !important;
        transform: none !important;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.03) !important; /* لون تظليل خفيف جداً للقائمة الفرعية */
        border: none !important;
        border-right: 3px solid var(--jjc-blue) !important;
        border-radius: 0 !important;
        padding: 5px 15px 5px 0 !important;
    }
}
/* تنسيق شريط التمرير لقائمة المشرف المنسدلة */
.modern-dropdown-menu[b-n2z9et7xo0]::-webkit-scrollbar {
    width: 6px;
}

.modern-dropdown-menu[b-n2z9et7xo0]::-webkit-scrollbar-track {
    background: transparent;
}

.modern-dropdown-menu[b-n2z9et7xo0]::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

    .modern-dropdown-menu[b-n2z9et7xo0]::-webkit-scrollbar-thumb:hover {
        background-color: #adb5bd;
    }
/* /Layout/PrayerTimesWidget.razor.rz.scp.css */
.h-line[b-p4r6obz7li] {
    width: 50px;
    height: 3px;
    background-color: #ddd;
    margin: 10px auto;
    border-radius: 2px;
}

.prayer-card[b-p4r6obz7li] {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    background: white;
    transition: transform 0.3s;
}

    .prayer-card:hover[b-p4r6obz7li] {
        transform: translateY(-5px);
    }

.card-header-custom[b-p4r6obz7li] {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.saudi-card .card-header-custom[b-p4r6obz7li] {
    background: linear-gradient(135deg, #198754, #146c43);
}

.tanzania-card .card-header-custom[b-p4r6obz7li] {
    background: linear-gradient(135deg, #0d6efd, #0a58ca);
}

.city-name[b-p4r6obz7li] {
    font-weight: 800;
    font-size: 1.1rem;
}

.country-name[b-p4r6obz7li] {
    font-size: 0.8rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 5px;
}

.times-grid[b-p4r6obz7li] {
    display: flex;
    flex-direction: column;
}

.time-item[b-p4r6obz7li] {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
}

    .time-item:last-child[b-p4r6obz7li] {
        border-bottom: none;
    }

    .time-item .lbl[b-p4r6obz7li] {
        color: #666;
        font-weight: 600;
    }

    .time-item .val[b-p4r6obz7li] {
        font-weight: 800;
        color: #333;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

.date-lbl[b-p4r6obz7li] {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    padding: 10px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
}

/* =========================================
   التعديل هنا ليكون متجاوباً بنسبة 100% مع الجوال
   ========================================= */
.prayer-row[b-p4r6obz7li] {
    display: flex;
    justify-content: space-between; /* تبعد العنصرين عن بعضهما للأطراف */
    align-items: center;
    padding: 12px 30px; /* مسافة داخلية من اليمين واليسار بدلاً من الـ gap */
    border-bottom: 1px solid #eee;
}

/* في الشاشات الصغيرة جداً، نقلل المسافة الجانبية قليلاً */
@media (max-width: 400px) {
    .prayer-row[b-p4r6obz7li] {
        padding: 12px 15px;
    }
}

/* كلاس التظليل الأخضر للصف المميز (أبها) */
.active-row[b-p4r6obz7li] {
    background-color: #d1e7dd;
    color: #0f5132;
    font-weight: bold;
    border-right: 4px solid #198754;
}

/* كلاس التظليل الأزرق للصف المميز (تنزانيا) */
.active-row-blue[b-p4r6obz7li] {
    background-color: #cfe2ff;
    color: #084298;
    font-weight: bold;
    border-right: 4px solid #0d6efd;
}
/* /Pages/About.razor.rz.scp.css */
/* ================= 1. Animations (تعريف الحركات أولاً) ================= */

/* حركة الدوران ثلاثي الأبعاد (رؤيتنا - رسالتنا) */
@keyframes iconProRotate-b-g128q1gf62 {
    0% {
        transform: rotateY(0deg) scale(1);
    }

    50% {
        transform: rotateY(180deg) scale(1.1);
    }

    100% {
        transform: rotateY(360deg) scale(1);
    }
}

/* حركة القفز (الإحصائيات) */
@keyframes iconBounce-b-g128q1gf62 {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-10px) scale(1.1);
    }
}

/* حركة الاهتزاز (السوشيال - الدعاء - الاعتماد) */
@keyframes iconWobble-b-g128q1gf62 {
    0%, 100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }

    15% {
        transform: translateX(-6px) rotate(-6deg);
    }

    30% {
        transform: translateX(4px) rotate(4deg);
    }

    45% {
        transform: translateX(-3px) rotate(-3.6deg);
    }

    60% {
        transform: translateX(2px) rotate(2.4deg);
    }

    75% {
        transform: translateX(-1px) rotate(-1.2deg);
    }
}

/* ================= 2. Global Styles & Fonts ================= */
:root[b-g128q1gf62] {
    --primary-green: #008456;
    --secondary-blue: #0F97D4;
    --accent-yellow: #FEE256;
    --dark-text: #2c3e50;
}

.modern-design[b-g128q1gf62] {
    font-family: 'Cairo', sans-serif;
    overflow-x: hidden;
    background-color: #fff;
    direction: rtl;
}

/* ================= 3. Hero Section ================= */
.hero-section[b-g128q1gf62] {
    position: relative;
    min-height: 90vh;
    background-image: url('images/image_190e48.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding-bottom: 150px;
}

.hero-overlay-gradient[b-g128q1gf62] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 60, 40, 0.9) 0%, rgba(15, 151, 212, 0.8) 100%);
    z-index: 1;
}

.hero-content[b-g128q1gf62] {
    position: relative;
    z-index: 2;
    padding-top: 50px;
}

    .hero-content h1[b-g128q1gf62] {
        font-size: 3.5rem;
        font-weight: 900;
        text-shadow: 0 5px 15px rgba(0,0,0,0.5);
        margin-bottom: 20px;
        color: #fff;
    }

.subtitle[b-g128q1gf62] {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 40px;
    color: #f0f0f0;
}

.badge-item[b-g128q1gf62] {
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: bold;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    display: inline-flex;
    align-items: center;
}

.text-yellow[b-g128q1gf62] {
    color: var(--accent-yellow) !important;
}

/* ================= 4. Intro & Map ================= */
.section-padding[b-g128q1gf62] {
    padding: 80px 0;
}

.hover-lift[b-g128q1gf62] {
    transition: transform 0.3s ease;
}

    .hover-lift:hover[b-g128q1gf62] {
        transform: translateY(-10px);
    }

.map-frame[b-g128q1gf62] {
    border-radius: 25px;
    overflow: hidden;
    border: 8px solid #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    transform: perspective(1000px) rotateY(5deg);
    transition: all 0.5s ease;
}

    .map-frame:hover[b-g128q1gf62] {
        transform: perspective(1000px) rotateY(0deg) scale(1.02);
        box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    }

/* ================= 5. Vision Cards ================= */
.bg-light-pattern[b-g128q1gf62] {
    background-color: #f9f9f9;
    padding-bottom: 200px;
}

.vision-card[b-g128q1gf62] {
    background: white;
    padding: 45px 35px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    position: relative;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-bottom: 5px solid transparent;
}

    .vision-card:hover[b-g128q1gf62] {
        transform: translateY(-15px);
        border-bottom-color: #0F97D4;
    }

.icon-wrapper[b-g128q1gf62] {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white !important;
    margin: 0 auto 25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: 0.4s;
}

/* تطبيق حركة الدوران هنا */
.vision-card:hover .icon-wrapper i[b-g128q1gf62] {
    animation: iconProRotate-b-g128q1gf62 0.8s ease-in-out;
    display: inline-block;
}

.bg-blue-gradient[b-g128q1gf62] {
    background: linear-gradient(135deg, #0F97D4, #4facfe) !important;
}

.bg-green-gradient[b-g128q1gf62] {
    background: linear-gradient(135deg, #008456, #43e97b) !important;
}

.bg-yellow-gradient[b-g128q1gf62] {
    background: linear-gradient(135deg, #FEE256, #ffad0f) !important;
    color: #333 !important;
}

.vision-card h3[b-g128q1gf62] {
    font-weight: 800;
    margin-bottom: 15px;
    color: #333;
}

.vision-card p[b-g128q1gf62] {
    color: #666;
    line-height: 1.7;
}

/* ================= 6. Academic Stats ================= */
.academic-section[b-g128q1gf62] {
    background: linear-gradient(135deg, #008456 0%, #004d33 100%) !important;
    position: relative;
    color: white !important;
    padding-top: 300px;
    padding-bottom: 350px;
    margin-top: -150px;
}

.academic-section h2[b-g128q1gf62], .academic-section p[b-g128q1gf62], .academic-section span[b-g128q1gf62] {
    color: white !important;
}

.academic-section .text-white-50[b-g128q1gf62] {
     color: rgba(255,255,255,0.8) !important;
 }

.stat-box[b-g128q1gf62] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(5px);
    transition: 0.3s;
}

    .stat-box:hover[b-g128q1gf62] {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: scale(1.05);
    }

        /* تطبيق حركة القفز هنا */
        .stat-box:hover i[b-g128q1gf62] {
            animation: iconBounce-b-g128q1gf62 0.6s infinite alternate ease-in-out;
            display: inline-block;
        }

.icon-yellow[b-g128q1gf62] {
    color: var(--accent-yellow) !important;
}

.counter[b-g128q1gf62] {
    font-size: 3.5rem;
    font-weight: bold;
    display: block;
    margin: 10px 0;
}

.accreditation-banner[b-g128q1gf62] {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 20px;
    max-width: 800px;
    margin: 60px auto 0;
    transition: 0.3s ease;
}

    /* تطبيق حركة الاهتزاز للوسام هنا */
    .accreditation-banner:hover i[b-g128q1gf62] {
        animation: iconWobble-b-g128q1gf62 1s ease-in-out;
        display: inline-block; /* ضروري جداً لنجاح الحركة */
    }

/* ================= 7. Projects (Flip Cards) ================= */
.humanitarian-section[b-g128q1gf62] {
    padding-top: 70px;
    padding-bottom: 150px;
}

.flip-card[b-g128q1gf62] {
    background-color: transparent;
    width: 100%;
    height: 300px;
    perspective: 1000px;
}

.flip-card-inner[b-g128q1gf62] {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 20px;
}

.flip-card:hover .flip-card-inner[b-g128q1gf62] {
    transform: rotateY(180deg);
}

.flip-card-front[b-g128q1gf62], .flip-card-back[b-g128q1gf62] {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.flip-card-front[b-g128q1gf62] {
    background-color: #fff;
    border: 1px solid #eee;
}

.flip-card-back[b-g128q1gf62] {
    transform: rotateY(180deg);
    color: white;
}

/* ألوان الأيقونات */
.icon-blue[b-g128q1gf62] {
    color: var(--secondary-blue);
}

.icon-cyan[b-g128q1gf62] {
    color: #00bcd4;
}

.icon-green[b-g128q1gf62] {
    color: var(--primary-green);
}

.icon-purple[b-g128q1gf62] {
    color: #9c27b0;
}

.icon-red[b-g128q1gf62] {
    color: #e91e63;
}

.icon-orange[b-g128q1gf62] {
    color: #ff9800;
}

.icon-gold[b-g128q1gf62] {
    color: #ffc107;
}

/* تدرجات الخلفية */
.bg-blue-gradient[b-g128q1gf62] {
    background: linear-gradient(135deg, #0F97D4, #005bea) !important;
}

.bg-cyan-gradient[b-g128q1gf62] {
    background: linear-gradient(135deg, #00bcd4, #2196f3) !important;
}

.bg-purple-gradient[b-g128q1gf62] {
    background: linear-gradient(135deg, #9c27b0, #673ab7) !important;
}

.bg-red-gradient[b-g128q1gf62] {
    background: linear-gradient(135deg, #e91e63, #f44336) !important;
}

.bg-orange-gradient[b-g128q1gf62] {
    background: linear-gradient(135deg, #ff9800, #ff5722) !important;
}

.bg-gold-gradient[b-g128q1gf62] {
    background: linear-gradient(135deg, #ffc107, #ff9800) !important;
    color: #333 !important;
}

/* ================= 9. Waves & Utilities ================= */
.wave-bottom[b-g128q1gf62], .wave-top[b-g128q1gf62], .wave-top-footer[b-g128q1gf62] {
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}

.wave-bottom[b-g128q1gf62] {
    bottom: -1px;
}

.wave-top[b-g128q1gf62] {
    top: -1px;
}

.wave-top-footer[b-g128q1gf62] {
    top: -1px;
}

/* إصلاح ثغرة الحواف السوداء العنيدة في أمواج الـ SVG (الضربة القاضية) */
.wave-bottom svg[b-g128q1gf62],
.wave-top svg[b-g128q1gf62],
.wave-top-footer svg[b-g128q1gf62] {
    display: block;
    width: 101% !important; /* نزيد العرض لـ 101% لضمان تغطية الحواف يميناً ويساراً */
    height: auto;
    /* نستخدم التكبير الأفقي من المنتصف لضمان تمدد الرسمة بشكل متساوٍ على الأطراف */
    transform: scaleX(1.01) !important;
    transform-origin: center !important;
}

/* ================= 10.( ....تصميم البانر الاحترافي( اعتماد أكاديمي دولي  ================= */

.accreditation-glass[b-g128q1gf62] {
    background: rgba(255, 255, 255, 0.1); /* شفافية */
    backdrop-filter: blur(12px); /* تغبيش الخلفية */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* حدود خفيفة */
    border-right: 5px solid #FFD700; /* خط ذهبي سميك على اليمين للغة العربية */
    border-radius: 15px;
    padding: 25px;
    max-width: 800px;
    margin: 40px auto; /* توسيط البانر نفسه */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* ظل ناعم */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    /* تأثير عند المرور بالماوس */
    .accreditation-glass:hover[b-g128q1gf62] {
        transform: translateY(-5px); /* يرتفع قليلاً */
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
        background: rgba(255, 255, 255, 0.15);
    }

/* تنسيق الأيقونة */
.icon-glow[b-g128q1gf62] {
    color: #FFD700; /* لون ذهبي */
    background: rgba(255, 215, 0, 0.1); /* خلفية ذهبية خفيفة خلف الأيقونة */
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* دائرة */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); /* توهج */
}

/* تحسين الخطوط */
.banner-title[b-g128q1gf62] {
    color: #fff;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.banner-desc[b-g128q1gf62] {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ================================================== */
/* === تحسينات الجوال لصفحة (من نحن) === */
/* ================================================== */

@media (max-width: 768px) {
    /* 1. تصغير خطوط الهيدر المبالغ فيها في الجوال */
    .hero-content h1[b-g128q1gf62] {
        font-size: 2.2rem !important;
    }

    .subtitle[b-g128q1gf62] {
        font-size: 1.1rem !important;
    }

    .hero-section[b-g128q1gf62] {
        min-height: 70vh !important;
        padding-bottom: 80px !important;
    }

    /* 2. ✅ الأهم: تقليص المساحات الفارغة العملاقة التي تركتها للـ SVG */
    .academic-section[b-g128q1gf62] {
        padding-top: 100px !important; /* بدلاً من 300 */
        padding-bottom: 120px !important; /* بدلاً من 350 */
        margin-top: -50px !important; /* بدلاً من -150 */
    }

    .bg-light-pattern[b-g128q1gf62] {
        padding-bottom: 80px !important; /* بدلاً من 200 */
    }

    /* 3. تصغير أرقام العدادات لكي لا تكسر عرض العمود (col-6) */
    .counter[b-g128q1gf62] {
        font-size: 2.2rem !important; /* بدلاً من 3.5 */
    }

    /* 4. ترتيب بانر (الاعتماد الأكاديمي) ليصبح عمودياً بدلاً من أفقي */
    .accreditation-glass[b-g128q1gf62] {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px 15px !important;
    }

        /* توسيط النص في البانر */
        .accreditation-glass .text-end[b-g128q1gf62] {
            text-align: center !important;
        }

        /* توسيط الأيقونة الذهبية */
        .accreditation-glass .flex-shrink-0[b-g128q1gf62] {
            margin: 0 auto 15px !important;
        }

    /* 5. تقليل المسافات العامة للأقسام */
    .section-padding[b-g128q1gf62] {
        padding: 50px 0 !important;
    }

    .humanitarian-section[b-g128q1gf62] {
        padding-bottom: 50px !important;
    }
}
/* /Pages/Admin/Classrooms.razor.rz.scp.css */
/*( --- تنسيقات أزرار الإجراءات (دائرية + حركة --- */

/* --- تنسيقات المودال --- */
.modal-overlay[b-dgci6qojfg] {
    background-color: rgba(0,0,0,0.5);
    z-index: 1050;
}

.modal-header-gradient[b-dgci6qojfg] {
    position: relative;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    padding: 1rem;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.btn-close-left[b-dgci6qojfg] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

.btn-close-left:hover[b-dgci6qojfg] {
    opacity: 1;
}

/*////////////حركة أزرار الحذف والتعديل//////////////////////*/
/*////////////////////////////////////////////////////////////*/

.btn-action-custom[b-dgci6qojfg] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0 4px;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.btn-action-custom.edit[b-dgci6qojfg] {
    color: #0d6efd;
    border-color: #e9ecef;
}

.btn-action-custom.edit:hover[b-dgci6qojfg] {
    background-color: #0d6efd;
    color: white;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
}

.btn-action-custom.delete[b-dgci6qojfg] {
    color: #dc3545;
    border-color: #e9ecef;
}

.btn-action-custom.delete:hover[b-dgci6qojfg] {
    background-color: #dc3545;
    color: white;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

/* /Pages/Admin/Dashboard.razor.rz.scp.css */
.bg-light-green[b-h0kc6lwapt] {
    background-color: #e0f2f1;
}

.text-green[b-h0kc6lwapt] {
    color: #008456;
}

.bg-light-blue[b-h0kc6lwapt] {
    background-color: #e3f2fd;
}

.text-blue[b-h0kc6lwapt] {
    color: #0F97D4;
}

.x-small[b-h0kc6lwapt] {
    font-size: 0.75rem;
}

/* --- الألوان الجديدة للقسم المالي --- */
.border-purple[b-h0kc6lwapt] {
    border-color: #6f42c1 !important;
}

.bg-purple[b-h0kc6lwapt] {
    background-color: #6f42c1 !important;
}

.text-purple[b-h0kc6lwapt] {
    color: #6f42c1;
}

.bg-light-purple[b-h0kc6lwapt] {
    background-color: #f3e5f5;
}

/**************الطباعة*****************/
/**************************************/
@media print {
    /* إخفاء الأزرار والقوائم عند الطباعة */
    .btn[b-h0kc6lwapt], .sidebar[b-h0kc6lwapt], .nav[b-h0kc6lwapt], .filter-section[b-h0kc6lwapt], .apexcharts-canvas[b-h0kc6lwapt] {
        display: none !important;
    }

    /* توسيع الجدول ليأخذ عرض الصفحة كاملاً */
    .card[b-h0kc6lwapt] {
        border: none !important;
        box-shadow: none !important;
    }

    .table-responsive[b-h0kc6lwapt] {
        overflow: visible !important;
    }

    body[b-h0kc6lwapt] {
        background-color: white !important;
        direction: rtl;
    }
}
@media print {
    .badge[b-h0kc6lwapt] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .text-success[b-h0kc6lwapt] {
        color: green !important;
    }

    .text-danger[b-h0kc6lwapt] {
        color: red !important;
    }
}
/*************************************************************/
/******لجعل عملية الظهور والاختفاء لطي الجدول أجمل**********/
/*************************************************************/
.fade-in[b-h0kc6lwapt] {
    animation: fadeIn-b-h0kc6lwapt 0.3s ease-in-out;
}

@keyframes fadeIn-b-h0kc6lwapt {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cursor-pointer[b-h0kc6lwapt] {
    cursor: pointer;
}

/* --- شريط تمرير مخصص وأنيق (يظهر دائماً) --- */
.custom-scroll[b-h0kc6lwapt]::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll[b-h0kc6lwapt]::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 10px;
}

.custom-scroll[b-h0kc6lwapt]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

    .custom-scroll[b-h0kc6lwapt]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* لضمان عدم قص شريط التمرير في بطاقات الطلاب */
.card[b-h0kc6lwapt] {
    overflow: visible !important;
}

/* ================================================== */
/* === تحسينات الجوال للوحة القيادة (Dashboard) === */
/* ================================================== */

@media (max-width: 768px) {
    /* 1. السماح لرؤوس البطاقات بالنزول لسطر جديد إذا ضاقت المساحة */
    .card-header.d-flex[b-h0kc6lwapt] {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center !important;
        text-align: center;
    }

    /* 2. تحسين عنوان جدول الكفالات وزر الطباعة */
    .section-title > .d-flex.justify-content-between[b-h0kc6lwapt] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    /* جعل زر الطباعة يأخذ العرض كاملاً في الموبايل لتسهيل النقر */
    .section-title button.btn-primary[b-h0kc6lwapt] {
        width: 100%;
        margin-top: 5px;
    }

    /* 3. جعل فلتر التاريخ يملأ الشاشة في الجوال */
    .d-flex.justify-content-end.mb-4 > .d-flex[b-h0kc6lwapt] {
        width: 100%;
        justify-content: center;
    }

    /* 4. تصغير خط الأرقام الكبيرة قليلاً في الكروت لتجنب أي قص */
    .card-body h2[b-h0kc6lwapt] {
        font-size: 1.5rem !important;
    }
}


/* ================================================== */
/* 🚀 تثبيت رأس وذيل جدول الوسطاء (Dashboard)       */
/* ================================================== */
.sponsors-table-container[b-h0kc6lwapt] {
    max-height: 60vh; /* تحديد ارتفاع للجدول ليظهر شريط التمرير */
    overflow-y: auto;
}

    .sponsors-table-container thead th[b-h0kc6lwapt] {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #f8f9fa !important; /* لون bg-light */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .sponsors-table-container tfoot td[b-h0kc6lwapt] {
        position: sticky;
        bottom: -1px;
        z-index: 10;
        background-color: #f8f9fa !important; /* لون bg-light */
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    }
/* /Pages/Admin/Employees.razor.rz.scp.css */

/* تنسيق خلفية المودال */
.modal-overlay[b-0sz7dimuj0] {
    background-color: rgba(0,0,0,0.5);
    z-index: 1050;
}

/* تنسيق الهيدر المتدرج مثل صفحة الطلاب */
.modal-header-gradient[b-0sz7dimuj0] {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    position: relative;
    color: white;
}

.btn-icon[b-0sz7dimuj0] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.2s;
}

.btn-icon:hover[b-0sz7dimuj0] {
    transform: scale(1.1);
    background-color: #f1f3f5;
}

/* زر الإغلاق اليساري */
.btn-close-left[b-0sz7dimuj0] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}
    .btn-close-left:hover[b-0sz7dimuj0] {
        opacity: 1;
    }

/* تنسيق أزرار الأيقونات */
.btn-action-custom[b-0sz7dimuj0] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0 4px;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

    .btn-action-custom.edit[b-0sz7dimuj0] {
        color: #0d6efd;
        border-color: #e9ecef;
    }

        .btn-action-custom.edit:hover[b-0sz7dimuj0] {
            background-color: #0d6efd;
            color: white;
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
        }

    .btn-action-custom.delete[b-0sz7dimuj0] {
        color: #dc3545;
        border-color: #e9ecef;
    }

        .btn-action-custom.delete:hover[b-0sz7dimuj0] {
            background-color: #dc3545;
            color: white;
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
        }

        /* 1. إخفاء أسهم العداد (Spinner) من حقل الرقم */
.no-spinner[b-0sz7dimuj0]::-webkit-inner-spin-button, 
.no-spinner[b-0sz7dimuj0]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* لدعم متصفح Firefox */
.no-spinner[b-0sz7dimuj0] {
  -moz-appearance: textfield;
}

/* 2. إجبار الأرقام الإنجليزية */
.force-english[b-0sz7dimuj0] {
    direction: ltr !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; /* خطوط تظهر أرقام إنجليزية */
    text-align: left;
}

/* /Pages/Admin/Institutes.razor.rz.scp.css */
/*(لون البنات (بنفسجي فاتح */
.bg-pink[b-o8dn3p8w29] {
    background-color: #f8bbd0;
}

/*(لون الأيتام (بنفسجي فاتح */
.bg-purple[b-o8dn3p8w29] {
    background-color: #e1bee7;
}

/*(لون المسلمين الجدد (أخضر فاتح */
.bg-green[b-o8dn3p8w29] {
    background-color: #c8e6c9;
}


/* --- تنسيقات أزرار الإجراءات (دائرية + حركة) --- */
.btn-action-custom[b-o8dn3p8w29] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0 4px;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

    /* زر التعديل (أزرق) */
    .btn-action-custom.edit[b-o8dn3p8w29] {
        color: #0d6efd;
        border-color: #e9ecef;
    }

        .btn-action-custom.edit:hover[b-o8dn3p8w29] {
            background-color: #0d6efd;
            color: white;
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
        }

    /* زر الحذف (أحمر) */
    .btn-action-custom.delete[b-o8dn3p8w29] {
        color: #dc3545;
        border-color: #e9ecef;
    }

        .btn-action-custom.delete:hover[b-o8dn3p8w29] {
            background-color: #dc3545;
            color: white;
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
        }

/* --- تنسيقات المودال --- */
.modal-overlay[b-o8dn3p8w29] {
    background-color: rgba(0,0,0,0.5);
    z-index: 1050;
}

.modal-header-gradient[b-o8dn3p8w29] {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    border: 0;
}

/******************************************************************************/
/******************************************************************************/
/******************************************************************************/

/* تنسيق رأس النافذة */
.modal-header-gradient[b-o8dn3p8w29] {
    position: relative; /* ضروري جداً لكي يعمل التثبيت */
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    padding: 1rem;
    border: 0;
    /* لضمان توسيط العنوان */
    display: flex;
    align-items: center;

    /* flex-start تجعله في البداية (اليمين في المواقع العربية) */
    justify-content: flex-start;
}

/* تنسيق زر الإغلاق ليذهب لليسار */
.btn-close-left[b-o8dn3p8w29] {
    position: absolute; /* حر الحركة */
    left: 20px; /* يلتصق باليسار */
    top: 50%; /* في منتصف الارتفاع */
    transform: translateY(-50%); /* ضبط المحاذاة العمودية */
    margin: 0;
    filter: invert(1) grayscale(100%) brightness(200%); /* لجعله أبيض ناصع */
    opacity: 0.8;
}

    .btn-close-left:hover[b-o8dn3p8w29] {
        opacity: 1;
    }

/* /Pages/Admin/Projects.razor.rz.scp.css */
.btn-icon[b-tjflat933w] {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.2s;
}

.btn-icon:hover[b-tjflat933w] {
    transform: scale(1.1);
    background-color: #e9ecef;
}

/* حركة زر الحذف */
.delete-btn-anim:hover[b-tjflat933w] {
    background-color: #ffecec !important;
    transform: rotate(15deg) scale(1.1);
}

/* حركة حذف الصف */
.row-deleted[b-tjflat933w] {
    animation: fadeOutLeft-b-tjflat933w 0.8s ease forwards;
    background-color: #ffecec !important;
}

@keyframes fadeOutLeft-b-tjflat933w {
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

/* رسالة النجاح العائمة */
.toast-notification[b-tjflat933w] {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #198754;
    color: white;
    padding: 12px 25px;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 2000;
    animation: slideDown-b-tjflat933w 0.5s ease;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

@keyframes slideDown-b-tjflat933w {
    from {
        top: -50px;
    }

    to {
        top: 20px;
    }
}

.btn-close-left[b-tjflat933w] {
    position: absolute;
    left: 20px;
    top: 5%;
    transform: translateY(-50%);
    margin: 0;
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

    .btn-close-left:hover[b-tjflat933w] {
        opacity: 1;
    }

.modal-header-gradient[b-tjflat933w] {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    position: relative;
}

/* زر الإغلاق يسار */
.btn-close-left[b-tjflat933w] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

    .btn-close-left:hover[b-tjflat933w] {
        opacity: 1;
    }
/* /Pages/Admin/StudentGradesEntry.razor.rz.scp.css */
/* لون الخط أسود عند التحويم */
.btn-hover-black:hover[b-28tbopiz1m] {
    color: #000 !important; 
}
/* /Pages/Admin/Students.razor.rz.scp.css */

.modal-overlay[b-5fvxcl56gh] {
    background-color: rgba(0,0,0,0.5);
    z-index: 1050;
}

.modal-header-gradient[b-5fvxcl56gh] {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    position: relative;
}

/* زر الإغلاق يسار */
.btn-close-left[b-5fvxcl56gh] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}
    
.btn-close-left:hover[b-5fvxcl56gh] {
    opacity: 1;
}

/* تنسيق أزرار الأيقونات */
.btn-action-custom[b-5fvxcl56gh] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: 0 4px;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

    .btn-action-custom.edit[b-5fvxcl56gh] {
        color: #0d6efd;
        border-color: #e9ecef;
    }

    .btn-action-custom.edit:hover[b-5fvxcl56gh] {
        background-color: #0d6efd;
        color: white;
        transform: translateY(-3px) scale(1.1);
        box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
    }

    .btn-action-custom.delete[b-5fvxcl56gh] {
        color: #dc3545;
        border-color: #e9ecef;
    }

    .btn-action-custom.delete:hover[b-5fvxcl56gh] {
        background-color: #dc3545;
        color: white;
        transform: translateY(-3px) scale(1.1);
        box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
    }


/* /Pages/AllProjects.razor.rz.scp.css */
/* الخلفية العامة للصفحة */
.projects-page-container[b-qe4y099kt2] {
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* === الهيدر العلوي === */
.page-header[b-qe4y099kt2] {
    background: linear-gradient(135deg, #052767 0%, #0F97D4 100%);
    padding: 80px 20px 100px 20px; /* مسافة سفلية كبيرة لتدخل العناصر فيها */
    position: relative;
    overflow: hidden;
}

.header-pattern[b-qe4y099kt2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
}

/* === شريط الفلترة === */
.filter-container[b-qe4y099kt2] {
    max-width: 800px;
    /* زجاجي خفيف */
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0,0,0,0.05);
}

.custom-scrollbar[b-qe4y099kt2] {
    /* إخفاء شريط التمرير المزعج مع الحفاظ على التمرير */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}

    .custom-scrollbar[b-qe4y099kt2]::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

/* أزرار الفلترة */
.btn-filter[b-qe4y099kt2] {
    border: none;
    background: transparent;
    color: #6c757d;
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 50px;
    white-space: nowrap; /* منع النص من النزول لسطر جديد */
    transition: all 0.3s ease;
}

    .btn-filter:hover[b-qe4y099kt2] {
        background-color: #f8f9fa;
        color: #0F97D4;
    }

    .btn-filter.active[b-qe4y099kt2] {
        background: linear-gradient(45deg, #0F97D4, #2baae2);
        color: white;
        box-shadow: 0 4px 15px rgba(15, 151, 212, 0.3);
    }

/* === كارت المشروع === */
.project-card[b-qe4y099kt2] {
    background: white;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

    .project-card:hover[b-qe4y099kt2] {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    }

/* تأثير تكبير الصورة */
.img-wrapper[b-qe4y099kt2] {
    overflow: hidden;
}

.card-img-top[b-qe4y099kt2] {
    transition: transform 0.5s ease;
}

.project-card:hover .card-img-top[b-qe4y099kt2] {
    transform: scale(1.1);
}

/* شريط التقدم */
.bg-gradient-primary[b-qe4y099kt2] {
    background: linear-gradient(90deg, #0F97D4 0%, #00d2ff 100%);
    position: relative;
    overflow: hidden;
}

    /* لمعة تتحرك داخل شريط التقدم */
    .bg-gradient-primary[b-qe4y099kt2]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient( -45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );
        background-size: 20px 20px;
        animation: moveStripes-b-qe4y099kt2 1s linear infinite;
    }

@keyframes moveStripes-b-qe4y099kt2 {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 20px 20px;
    }
}

/* زر التبرع */
.btn-donate[b-qe4y099kt2] {
    background-color: #052767;
    color: white;
    transition: all 0.3s;
}

    .btn-donate:hover[b-qe4y099kt2] {
        background-color: #0F97D4;
        color: white;
        transform: scale(1.02);
    }

/* حركة ظهور العناصر */
.animate-up[b-qe4y099kt2] {
    animation: fadeInUp-b-qe4y099kt2 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

    /* تأخير الحركة لكل عنصر ليعطي تأثيراً متتابعاً */
    .animate-up:nth-child(1)[b-qe4y099kt2] {
        animation-delay: 0.1s;
    }

    .animate-up:nth-child(2)[b-qe4y099kt2] {
        animation-delay: 0.2s;
    }

    .animate-up:nth-child(3)[b-qe4y099kt2] {
        animation-delay: 0.3s;
    }
/* ... وهكذا */

@keyframes fadeInUp-b-qe4y099kt2 {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/Finance/BudgetPlanning.razor.rz.scp.css */
/* 1. تحديد ارتفاع للحاوية وتشغيل السكرول العمودي */
.table-scrollable-container[b-wm6nw3or3u] {
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: auto; /* 🚀 ضروري جداً للجوال */
    -webkit-overflow-scrolling: touch; /* 🚀 لتمرير ناعم في الآيفون */
    position: relative;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* 2. تثبيت الهيدر */
.sticky-header th[b-wm6nw3or3u] {
    position: sticky;
    top: 0;
    z-index: 100; /* لضمان ظهوره فوق البيانات */
    /* ضروري جداً: لون خلفية ثابت لكي لا تظهر البيانات خلفه عند النزول */
    background-color: #212529 !important; /* نفس لون bg-dark */
    color: white !important;
    /* ظل خفيف لفصل الهيدر عن المحتوى */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
/* /Pages/Finance/PayrollManager.razor.rz.scp.css */
/* تنسيقات الشاشة العادية */
.spinner-border-sm[b-gdl5hf2fk2] {
    width: 1rem;
    height: 1rem;
}

/* تنسيقات الطباعة الاحترافية */
@media print {
    /* إخفاء القوائم الجانبية، أزرار الصفحة، الفلتر، والفوتر */
    .d-print-none[b-gdl5hf2fk2], nav[b-gdl5hf2fk2], .sidebar[b-gdl5hf2fk2], .btn[b-gdl5hf2fk2], .card-header select[b-gdl5hf2fk2], .card-footer[b-gdl5hf2fk2], .mb-4[b-gdl5hf2fk2] {
        display: none !important;
    }

    /* تمديد المحتوى لعرض الورقة بالكامل */
    .container-fluid[b-gdl5hf2fk2], .print-section[b-gdl5hf2fk2] {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute;
        left: 0;
        top: 0;
    }

    /* ضبط الجدول ليظهر بشكل رسمي */
    .card[b-gdl5hf2fk2] {
        border: none !important;
        box-shadow: none !important;
    }

    table[b-gdl5hf2fk2] {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-top: 20px;
    }

    th[b-gdl5hf2fk2] {
        background-color: #f8f9fa !important;
        color: black !important;
        -webkit-print-color-adjust: exact; /* لضمان طباعة لون الخلفية */
    }

    th[b-gdl5hf2fk2], td[b-gdl5hf2fk2] {
        border: 1px solid #000 !important; /* حدود سوداء واضحة */
        padding: 10px !important;
        font-size: 11pt;
    }

    .text-primary[b-gdl5hf2fk2] {
        color: #000 !important;
    }

    /* إظهار العناصر المخفية المخصصة للطباعة فقط */
    .d-print-block[b-gdl5hf2fk2] {
        display: block !important;
    }
}
/* /Pages/Gallery.razor.rz.scp.css */
/* تأثير تكبير الصورة الداخلي */
.transition-img[b-8borr3aljm] {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery-item:hover .transition-img[b-8borr3aljm] {
    transform: scale(1.08); /* تكبير ناعم للصورة */
}

/* تأثير ارتفاع الكارت ككل */
.gallery-item[b-8borr3aljm] {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

    .gallery-item:hover[b-8borr3aljm] {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
        border-color: rgba(15, 151, 212, 0.2);
    }
/* /Pages/Home.razor.rz.scp.css */
:root[b-epqdyf473m] {
    --primary: #0d6efd; /* أو أي لون تريده */
}

/* تعريف المتغيرات المحلية (لتسهيل التعديل) */
.home-container[b-epqdyf473m] {
    --primary: #0F97D4; /* أزرق */
    --secondary: #008456; /* أخضر */
    --accent: #fee256; /* أصفر */
    --dark: #052767; /* كحلي */
    --text: #333;
    --light-bg: #f4f7fa;
    font-family: 'Cairo', sans-serif;
    color: var(--text);
    padding-bottom: 50px;

    /* 👇 الأسطر التي ستحل مشكلة الفراغ الأبيض 👇 */
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* حركة الظهور عند تحميل الصفحة */
.fade-in[b-epqdyf473m] {
    animation: fadeInPage-b-epqdyf473m 0.8s ease-out forwards;
}

@keyframes fadeInPage-b-epqdyf473m {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   1. Hero Section (القسم الرئيسي)
   ========================================= */
.hero-section[b-epqdyf473m] {
    display: flex;
    flex-direction: column-reverse; /* الصورة فوق والنص تحت في الموبايل */
    align-items: center;
    gap: 30px;
    padding: 30px 15px 100px 15px; /* تقليل الهوامش للموبايل */
    background: radial-gradient(circle at top left, #fff 0%, #f0f8ff 40%, #fff 100%);
    border-radius: 20px;
    margin-bottom: 0px; /* إلغاء الهامش السفلي */
    position: relative;
    /*overflow: hidden;*/ /* لمنع ظهور أشرطة تمرير */
    box-shadow: 0 10px 40px -10px rgba(15, 151, 212, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    z-index: 1; /* ترتيب الطبقات */
}

@media (min-width: 992px) {
    .hero-section[b-epqdyf473m] {
        flex-direction: row; /* النص يمين والصورة يسار في الديسك توب */
        justify-content: space-between;
        padding: 60px 50px;
        min-height: 550px; /* استخدام min-height بدلاً من height ثابت */
        border-radius: 20px;
    }
}

.hero-content[b-epqdyf473m] {
    flex: 1;
    z-index: 2;
    text-align: center;
}

@media (min-width: 992px) {
    .hero-content[b-epqdyf473m] {
        text-align: right;
    }
}

.badge-pill[b-epqdyf473m] {
    display: inline-block;
    background: rgba(254, 226, 86, 0.2);
    color: #8a7000;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 20px;
    border: 1px solid rgba(254, 226, 86, 0.5);
}

.hero-title[b-epqdyf473m] {
    /* هذه الدالة السحرية تجعل الخط يتغير حجمه تلقائياً بين 1.8 و 2.5 بناء على الشاشة */
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #071913;
}

/* تنسيق الكلمة المميزة */
.text-highlight[b-epqdyf473m] {
    color: var(--primary);
    position: relative;
    display: inline-block;
    z-index: 1; /* لضمان أن النص يظهر فوق الخط */
}
 /* خط تجميلي تحت الكلمة المميزة */
/* تنسيق الخط الأصفر والحركة */
.text-highlight[b-epqdyf473m]::after {
    content: '';
    position: absolute;
    bottom: 8px; /* موقع الخط بالنسبة للكلمة */
    right: 0; /* التثبيت من اليمين لكي يتمدد باتجاه اليسار */
    width: 0%; /* الحالة الابتدائية: مخفي (عرض صفر) */
    height: 12px; /* سمك الخط */
    background-color: rgba(254, 226, 86, 0.7); /* أصفر شفاف قليلاً */
    z-index: -1; /* خلف النص */
    border-radius: 4px;
    transform: skewX(-10deg); /* ميلان بسيط للخط يعطي جمالية */
    
    /* تفاصيل الحركة */
    /* المدة: 0.8 ثانية */
    /* التوقيت: cubic-bezier يعطي حركة "سريعة في البداية وناعمة في النهاية" */
    animation: drawHighlight-b-epqdyf473m 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    
    /* التأخير: يبدأ بعد 0.6 ثانية (أي بعد أن يوشك النص الأصلي على الظهور والاستقرار) */
    animation-delay: 0.6s; 
}

/* تعريف حركة التمدد */
@keyframes drawHighlight-b-epqdyf473m {
    from {
        width: 0%;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}

.hero-subtitle[b-epqdyf473m] {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.8;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .hero-subtitle[b-epqdyf473m] {
        margin-right: 0;
    }
}

/* أزرار الهيرو */
.hero-actions[b-epqdyf473m] {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center; /* محاذاة عمودية */
    /* هذا السطر مهم جداً: يسمح للأزرار بالنزول لسطر جديد عند ضيق المساحة */
    flex-wrap: wrap;
    margin-top: 20px;
}

@media (min-width: 992px) {
    .hero-actions[b-epqdyf473m] {
        justify-content: flex-start;
    }
}

/* زر تعرف علينا أكثر */
.btn-main[b-epqdyf473m] {
    background: linear-gradient(45deg, var(--primary), #2baae2);
    color: white;
    padding: 12px 30px;
    min-width: 120px;
    flex-grow: 1; /* يسمح للأزرار بالتمدد في الشاشات الصغيرة */
    max-width: 200px; /* منع التمدد الزائد */
    text-align: center;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(15, 151, 212, 0.3);
    /*  لمنع النص من الانقسام لعدة أسطر */
    white-space: nowrap;
}

    .btn-main:hover[b-epqdyf473m] {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(15, 151, 212, 0.4);
        color: white;
    }

/* تنسيق الأيقونة */
.about-icon[b-epqdyf473m] {
    color: #FCE151;
    margin-right: 5px;
    font-size: 1.1em;
    transition: all 0.3s ease;
}

/* تغيير لون الأيقونة عند مرور الماوس على الزر بالكامل */
.btn-main:hover .about-icon[b-epqdyf473m] {
    color: #ffffff;
    transform: translateX(-3px);
}
/* =====================================================
                زرتبرع الآن ثري دي 

    From Uiverse.io by njesenberger - Modified to Blue
   ===================================================== */
/* From Uiverse.io by njesenberger - Renamed to button-3d */
.button-3d[b-epqdyf473m] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    border-width: 0;
    padding: 0 8px 12px;
    min-width: 120px;
    flex-grow: 1; /* يسمح للأزرار بالتمدد في الشاشات الصغيرة */
    max-width: 200px; /* منع التمدد الزائد */
    text-align: center;
    box-sizing: border-box;
    background: transparent;
    font: inherit;
    cursor: pointer;
    /* تنسيقات الرابط */
    text-decoration: none;
    display: inline-block;
}

.button-top[b-epqdyf473m] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    padding: 8px 16px;
    transform: translateY(0);
    text-align: center;
    color: #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, .25);
    transition-property: transform;
    transition-duration: .2s;
    -webkit-user-select: none;
    user-select: none;
}

/* تحديث الاسم هنا */
.button-3d:active .button-top[b-epqdyf473m] {
    transform: translateY(6px);
}

.button-top[b-epqdyf473m]::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    /* التدرج الأزرق الخاص بك */
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    text-align: center;
    color: #fff;
    box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);
    transition-property: border-radius, padding, width, transform;
    transition-duration: .2s;
}

/* تحديث الاسم هنا */
.button-3d:active .button-top[b-epqdyf473m]::after {
    border-radius: 6px;
    padding: 0 2px;
}

.button-bottom[b-epqdyf473m] {
    position: absolute;
    z-index: -1;
    bottom: 4px;
    left: 4px;
    border-radius: 8px / 16px 16px 8px 8px;
    padding-top: 6px;
    width: calc(100% - 8px);
    height: calc(100% - 10px);
    box-sizing: content-box;
    /* اللون الأزرق الداكن للعمق */
    background-color: #152b52;
    background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(16px at -4px 0, white, transparent), radial-gradient(16px at calc(100% + 4px) 0, white, transparent);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);
    transition-property: border-radius, padding-top;
    transition-duration: .2s;
}

/* تحديث الاسم هنا */
.button-3d:active .button-bottom[b-epqdyf473m] {
    border-radius: 10px 10px 8px 8px / 8px;
    padding-top: 0;
}

.button-base[b-epqdyf473m] {
    position: absolute;
    z-index: -2;
    top: 4px;
    left: 0;
    border-radius: 12px;
    width: 100%;
    height: calc(100% - 4px);
    background-color: rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .75), inset 0 2px 2px rgba(0, 0, 0, .25);
}

/* ---تأثير احترافي Hover--- */

.button-3d:hover .button-top[b-epqdyf473m] {
    transform: translateY(-2px);
}

    .button-3d:hover .button-top[b-epqdyf473m]::after {
        filter: brightness(1.15);
    }

.button-3d:hover .button-bottom[b-epqdyf473m] {
    box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);
}

/* =========================================
   تحديث: إطار احترافي لصورة الهيرو
   ========================================= */

/* 1. الحاوية الرئيسية */
.hero-image[b-epqdyf473m] {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: floatImage-b-epqdyf473m 4s ease-in-out infinite;
}

/* 2. تصميم الإطار الاحترافي */
.hero-card-frame[b-epqdyf473m] {
    width: 100%; /* يأخذ العرض المتاح */
    max-width: 550px; /* لا يتجاوز 550 أبداً */
    aspect-ratio: 16 / 9;
    height: auto !important;
    background: #fff;
    border: 5px solid #fff;
    border-radius: 20px; /* تقليل الانحناء قليلاً للموبايل */
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(5, 39, 103, 0.15);
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .hero-card-frame[b-epqdyf473m] {
        border-radius: 30px;
        width: 45vw; /* عرض نسبي للشاشات الكبيرة */
    }
}

/* 3. تنسيق الصورة داخل الإطار */
.hero-img-content[b-epqdyf473m] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* 4. تعريف حركة الطفو */
@keyframes floatImage-b-epqdyf473m {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* 5. تنسيق البطاقة العائمة الصغيرة */
.floating-stat-card[b-epqdyf473m] {
    position: absolute;
    bottom: 0px;
    left: 20px;
    z-index: 10;
    background: white;
    padding: 15px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    animation: floatCard 5s ease-in-out infinite reverse;
    border-right: 4px solid var(--secondary);
}

/* تحسين للموبايل */
@media (max-width: 768px) {
    .hero-card-frame[b-epqdyf473m] {
        max-width: 100%;
        border-width: 3px;
    }

    .floating-stat-card[b-epqdyf473m] {
        left: 0;
        bottom: -10px;
        transform: scale(0.9);
    }
}

.stat-info[b-epqdyf473m] {
    display: flex;
    flex-direction: column;
}

    .stat-info .count[b-epqdyf473m] {
        font-weight: 800;
        font-size: 1.1rem;
        color: var(--dark);
    }

    .stat-info .label[b-epqdyf473m] {
        font-size: 0.8rem;
        color: #888;
    }

/* =========================================
   2. Features Section (الخدمات)
   ========================================= */
.features-section[b-epqdyf473m] {
    padding: 20px 0;
    margin-bottom: 60px;
}

.section-header[b-epqdyf473m] {
    margin-bottom: 50px;
}

.sub-heading[b-epqdyf473m] {
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.section-header h2[b-epqdyf473m] {
    font-size: 2rem;
    color: var(--dark);
    font-weight: 800;
}

.divider[b-epqdyf473m] {
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    margin: 15px auto 0;
    border-radius: 2px;
}

/* شبكة البطاقات */
.cards-grid[b-epqdyf473m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card[b-epqdyf473m] {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(15, 151, 212, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    backdrop-filter: blur(10px);
}

    .feature-card:hover[b-epqdyf473m] {
        transform: translateY(-8px) scale(1.01);
        box-shadow: 0 20px 60px -12px rgba(15, 151, 212, 0.2);
        border-color: rgba(15, 151, 212, 0.3);
    }

    /* خط علوي ملون عند التحويم */
    .feature-card[b-epqdyf473m]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: var(--primary);
        z-index: 10;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .feature-card:hover[b-epqdyf473m]::before {
        transform: scaleX(1);
    }

    .feature-card h3[b-epqdyf473m] {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 15px;
        color: var(--dark);
    }

    .feature-card p[b-epqdyf473m] {
        color: #777;
        line-height: 1.6;
        font-size: 0.95rem;
        margin-bottom: 20px;
        flex-grow: 1;
    }

.read-more[b-epqdyf473m] {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    transition: gap 0.3s;
}

    .read-more:hover[b-epqdyf473m] {
        gap: 10px;
        color: var(--dark);
    }

/* =========================================
   3. Stats Banner (شريط الإحصائيات)
   ========================================= */
.stats-banner[b-epqdyf473m] {
    background: linear-gradient(135deg, var(--dark) 0%, #0F97D4 100%);
    border-radius: 20px;
    padding: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
    color: white;
    text-align: center;
    box-shadow: 0 20px 50px rgba(5, 39, 103, 0.2);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.stats-banner[b-epqdyf473m]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 200%;
    height: 200%;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: rotate(15deg);
    z-index: -1;
}

/* تطبيق الحركة على الايقونات الموجودة */
.stats-banner .stat-item i[b-epqdyf473m] {
    animation: float-b-epqdyf473m 3s ease-in-out infinite; /* حركة مستمرة */
    display: inline-block; /* ضروري لعمل التحويلات */
    transition: transform 0.3s ease; /* نعومة عند التكبير */
}

.stat-item[b-epqdyf473m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

 .stat-item i[b-epqdyf473m] {
     font-size: 2rem;
     color: var(--accent);
     margin-bottom: 5px;
     opacity: 0.8;
     transition: transform 0.3s ease; /* نعومة عند التكبير */
 }

 .stat-item .number[b-epqdyf473m] {
     font-size: 2.5rem;
     font-weight: 800;
     line-height: 1;
 }

 .stat-item .text[b-epqdyf473m] {
     font-size: 1rem;
     opacity: 0.9;
     font-weight: 600;
 }

/* تعريف حركة الطفو */
@keyframes float-b-epqdyf473m {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
    /* تتحرك للأعلى قليلاً */
    100% {
        transform: translateY(0px);
    }
}

/* =========================================
   4. CTA Section (دعوة للمشاركة)
   ========================================= */
.cta-section[b-epqdyf473m] {
    background: var(--accent);
    border-radius: 25px;
    padding: 50px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-bg-pattern[b-epqdyf473m] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.4) 10%, transparent 10%);
    background-size: 20px 20px;
    opacity: 0.3;
}

.cta-content[b-epqdyf473m] {
    position: relative;
    z-index: 2;
}

    .cta-content h2[b-epqdyf473m] {
        color: var(--dark);
        font-weight: 800;
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .cta-content p[b-epqdyf473m] {
        color: #554400;
        font-size: 1.1rem;
        max-width: 600px;
        margin: 0 auto 30px;
    }

.btn-donate[b-epqdyf473m] {
    background: linear-gradient(135deg, var(--dark) 0%, #1a4fa0 100%);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(5, 39, 103, 0.25);
    position: relative;
    overflow: hidden;
    z-index: 1;
    /*  لمنع النص من الانقسام لعدة أسطر */
    white-space: nowrap;
}

    .btn-donate[b-epqdyf473m]::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: 0.5s;
        z-index: -1;
    }

    .btn-donate:hover[b-epqdyf473m] {
        transform: translateY(-2px);
        box-shadow: 0 15px 35px rgba(5, 39, 103, 0.35);
    }

        .btn-donate:hover[b-epqdyf473m]::after {
            left: 100%;
            transition: 0.7s ease-in-out;
        }

    .btn-donate i[b-epqdyf473m] {
        color: #ff5e5e;
        transition: transform 0.3s;
    }

    .btn-donate:hover i[b-epqdyf473m] {
        transform: scale(1.3);
    }

/* =========================================
   5. Image Showcase Section (قسم كارت الصورة)
   ========================================= */

.image-showcase-section[b-epqdyf473m] {
    margin-bottom: 70px;
    padding: 0 10px;
}

.showcase-card[b-epqdyf473m] {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    min-height: 400px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(5, 39, 103, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation: fadeUpCard-b-epqdyf473m 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes fadeUpCard-b-epqdyf473m {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.showcase-img[b-epqdyf473m] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (max-width: 768px) {
    .showcase-card[b-epqdyf473m] {
        aspect-ratio: 4 / 3;
        min-height: 300px;
    }
}

.showcase-card:hover .showcase-img[b-epqdyf473m] {
    transform: scale(1.08);
}

.showcase-overlay[b-epqdyf473m] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 40%, rgba(5, 39, 103, 0.9) 100%);
    display: flex;
    align-items: flex-end;
    padding: 40px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.showcase-card:hover .showcase-overlay[b-epqdyf473m] {
    opacity: 1;
}

.overlay-content[b-epqdyf473m] {
    color: white;
    transform: translateY(20px);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: right;
}

.showcase-card:hover .overlay-content[b-epqdyf473m] {
    transform: translateY(0);
}

.overlay-badge[b-epqdyf473m] {
    display: inline-block;
    background: var(--accent);
    color: var(--dark);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

    .overlay-badge i[b-epqdyf473m] {
        margin-left: 5px;
    }

.overlay-content h4[b-epqdyf473m] {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.overlay-content p[b-epqdyf473m] {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 600px;
    line-height: 1.6;
}

.corner-accent[b-epqdyf473m] {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 3px solid var(--accent);
    opacity: 0.6;
    transition: all 0.5s ease;
    z-index: 5;
    pointer-events: none;
}

    .corner-accent.top-right[b-epqdyf473m] {
        top: 20px;
        right: 20px;
        border-bottom: none;
        border-left: none;
        border-radius: 0 20px 0 0;
    }

    .corner-accent.bottom-left[b-epqdyf473m] {
        bottom: 20px;
        left: 20px;
        border-top: none;
        border-right: none;
        border-radius: 0 0 0 20px;
    }

.showcase-card:hover .corner-accent.top-right[b-epqdyf473m] {
    top: 15px;
    right: 15px;
    opacity: 1;
}

.showcase-card:hover .corner-accent.bottom-left[b-epqdyf473m] {
    bottom: 15px;
    left: 15px;
    opacity: 1;
}

@media (max-width: 768px) {
    .showcase-card[b-epqdyf473m] {
        height: 350px;
    }

    .overlay-content h4[b-epqdyf473m] {
        font-size: 1.4rem;
    }

    .overlay-content p[b-epqdyf473m] {
        font-size: 0.95rem;
    }

    .showcase-overlay[b-epqdyf473m] {
        padding: 25px;
    }
}

/* =========================================
   تنسيقات بطاقة المشروع الديناميكية (تم التصحيح)
   ========================================= */

/* 1. الحاوية الرئيسية للكارت */
.project-card-dynamic[b-epqdyf473m] {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    border: 1px solid rgba(15, 151, 212, 0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* هام: إلغاء الحواف الداخلية لكي تملأ الصورة العرض */
    padding: 0 !important;
}

    /* 2. تأثير التحويم على الكارت ككل */
    .project-card-dynamic:hover[b-epqdyf473m] {
        transform: translateY(-8px) scale(1.01);
        box-shadow: 0 20px 60px -12px rgba(15, 151, 212, 0.2);
        border-color: rgba(15, 151, 212, 0.3);
    }

    /* 3. الخط العلوي الملون */
    .project-card-dynamic[b-epqdyf473m]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: var(--primary, #0F97D4); /* لون احتياطي */
        z-index: 10;
        /* الحالة الافتراضية: مخفي */
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    /* الحالة عند التحويم: يظهر الخط */
    .project-card-dynamic:hover[b-epqdyf473m]::before {
        transform: scaleX(1);
    }

/* 4. حاوية الصورة */
.project-img-wrapper[b-epqdyf473m] {
    width: 100%;
    aspect-ratio: 16 / 9; /* يجعل الصورة بنسبة 4:3 وهي النسبة المثالية للصور الفوتوغرافية */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* فصل الصورة عن المحتوى */
}

.project-img[b-epqdyf473m] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* نجعلها في المنتصف لضمان توازن الصورة */
    transition: transform 0.5s ease;
}

/* إضافة هامة جداً للجوال والشاشات الصغيرة */
@media (max-width: 768px) {
    .project-img-wrapper[b-epqdyf473m] {
        /* في الجوال، نجعل الصورة تأخذ ارتفاعاً مريحاً لتظهر التفاصيل */
        aspect-ratio: 3 / 2;
    }
}

/* تكبير الصورة عند التحويم على الكارت */
.project-card-dynamic:hover .project-img[b-epqdyf473m] {
    transform: scale(1.1);
}

/* 5. الشارة (Badge) */
.category-badge[b-epqdyf473m] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(15, 151, 212, 0.95);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 2;
}

/* 6. محتوى النص */
.project-content[b-epqdyf473m] {
    padding: 25px;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
}

    .project-content h3[b-epqdyf473m] {
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--dark);
        margin-bottom: 10px;
    }

.project-desc[b-epqdyf473m] {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
    min-height: 45px;
    line-height: 1.6;
}

/* 7. شريط التقدم */
.progress-container[b-epqdyf473m] {
    background: #f4f7fa;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #eef2f5;
}

/* 8. زر التبرع داخل الكارت */
.btn-donate-card[b-epqdyf473m] {
    background: var(--dark);
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s;
    display: block;
    border: 2px solid var(--dark);
}

.btn-donate-card:hover[b-epqdyf473m] {
    background: transparent;
    color: var(--dark);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* =========================================
   تأثير نمو الزرع (Organic Growth Animation)
   ========================================= */

/* 1. الحاوية لضبط الطبقات (Layers) */
.title-with-plants[b-epqdyf473m] {
    position: relative;
    display: inline-block;
    z-index: 1; /* لإنشاء سياق تلاصق جديد */
}

/* 2. النص يجب أن يكون في الأمام */
.title-with-plants h2[b-epqdyf473m] {
    position: relative;
    z-index: 10; /* رقم مرتفع ليكون فوق الزرع */
    /* إضافة ظل أبيض خفيف حول النص لضمان القراءة حتى لو الزرع خلفه */
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}

/* 3. حاوية الزرع (تكون محاذية للخط السفلي) */
/* 1. زيادة ارتفاع الحاوية للسماح بالنمو للأعلى */
.plants-grow-container[b-epqdyf473m] {
    position: absolute;
    bottom: -10px; /* نزلناها قليلاً لتكون ثابتة على الأرضية */
    left: 0;
    width: 100%;
    height: 130px; /* كانت 60px، جعلناها 130px لتصل للكلمة العلوية */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    z-index: -1;
    pointer-events: none;
}

/* 4. تنسيق النبتة الواحدة */
.plant-icon[b-epqdyf473m] {
    font-size: 1.5rem;
    color: var(--secondary); /* اللون الأخضر الموجود في متغيراتك */
    opacity: 0; /* مخفية في البداية */
    transform: scaleY(0) translateY(20px); /* مضغوطة ومنزلة للأسفل */
    transform-origin: bottom center; /* نقطة الارتكاز في الأسفل لكي تنمو للأعلى */
    /* إضافة فلتر ظل خفيف للنبات ليعطي واقعية */
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.1));
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* حركة مطاطية جميلة */
}

   /* ألوان مختلفة قليلاً للزرع لتبدو طبيعية */
  /* النبتة الأولى (أخضر عشبي طبيعي) */
.plant-icon.p1[b-epqdyf473m] { 
    color: #43A047; /* أخضر ورقي متوسط */
    font-size: 2.5rem; 
    transform: scaleY(0) rotate(-15deg); 
}

/* النبتة الثانية (برعم يانع - أخضر فاتح قليلاً لكن ليس فاقعاً) */
.plant-icon.p2[b-epqdyf473m] { 
    color: #689F38; /* لون الزيتون الفاتح */
    font-size: 3.5rem; 
    transform: scaleY(0) translateY(5px); 
}

/* النبتة الثالثة (الأضخم - أخضر غامق/غابات) */
/* هذا اللون يعطي عمقاً وواقعية كبيرة */
.plant-icon.p3[b-epqdyf473m] { 
    color: #1B5E20; /* أخضر غامق جداً (Dark Forest) */
    font-size: 4.5rem; 
    transform: scaleY(0) rotate(5deg); 
}

/* النبتة الرابعة (أخضر زرعي غني) */
.plant-icon.p4[b-epqdyf473m] { 
    color: #2E7D32; /* أخضر الأشجار */
    font-size: 3rem; 
    transform: scaleY(0) rotate(-10deg); 
}

/* النبتة الخامسة (درجة مختلفة قليلاً للتنوع) */
.plant-icon.p5[b-epqdyf473m] { 
    color: #558B2F; /* أخضر يميل للطبيعة البرية */
    font-size: 2.5rem; 
    transform: scaleY(0) rotate(20deg); 
}

/* =========================================
   5.(لحظة السحر (عند التحويم Hover
   ========================================= */

/* عند مرور الماوس على المنطقة كاملة */
.hover-trigger:hover .plant-icon[b-epqdyf473m] {
    opacity: 0.8; /* شفافية بسيطة */
}

    /* تتابع النمو (كل نبتة تتأخر قليلاً عن الأخرى) */
    .hover-trigger:hover .plant-icon.p1[b-epqdyf473m] {
        transform: scaleY(1) rotate(-15deg);
        transition-delay: 0.1s;
    }

    .hover-trigger:hover .plant-icon.p2[b-epqdyf473m] {
        transform: scaleY(1) translateY(0);
        transition-delay: 0.2s;
    }

    .hover-trigger:hover .plant-icon.p3[b-epqdyf473m] {
        transform: scaleY(1) rotate(5deg);
        transition-delay: 0.0s; /* الكبيرة تطلع أولاً أو في الوسط */
    }

    .hover-trigger:hover .plant-icon.p4[b-epqdyf473m] {
        transform: scaleY(1) rotate(-10deg);
        transition-delay: 0.15s;
    }

    .hover-trigger:hover .plant-icon.p5[b-epqdyf473m] {
        transform: scaleY(1) rotate(20deg);
        transition-delay: 0.25s;
    }

/* تأثير تكبير الصورة في كارت الأخبار */
.news-card:hover .transition-img[b-epqdyf473m] {
    transform: scale(1.1);
}

.transition-img[b-epqdyf473m] {
    transition: transform 0.5s ease;
}

.object-fit-cover[b-epqdyf473m] {
    object-fit: cover;
}

.news-section[b-epqdyf473m] {
    /* حتى يختفي عنوان "أحدث أخبار وأنشطة المركز" خلف القائمة الناف منيو */
    scroll-margin-top: 100px;
}
.features-section[b-epqdyf473m] {
    /* حتى يختفي عنوان "ساهم في مشاريعنا العاجلة" خلف القائمة الناف منيو */
    scroll-margin-top: 100px;
}

/* =========================================
   5.  رابط عرض كل المشاريع
   ========================================= */
/* تنسيق الزر الأساسي */
.button-All-projects[b-epqdyf473m] {
    height: 50px;
    width: 160px; /* قمت بزيادة العرض قليلاً ليناسب النص العربي */
    border: none;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    display: inline-block; /* ضروري لأننا حولناه لرابط */
    text-decoration: none; /* لإزالة الخط تحت الرابط */
}

.button-All-projects:hover[b-epqdyf473m] {
    box-shadow: .5px .5px 150px #252525;
}

/* النص الذي يظهر عند وضع الماوس (تصفح الكل) */
.type1[b-epqdyf473m]::after {
    content: "تصفح الكل"; /* النص العربي الثاني */
    height: 50px;
    width: 160px; /* نفس عرض الزر */
    background-color: #008456;
    color: #fff;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translateY(50px);
    font-size: 1.1rem; /* حجم الخط */
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;
}

/*(النص الذي يظهر في البداية (عرض المشاريع */
.type1[b-epqdyf473m]::before {
    content: "عرض المشاريع"; /* النص العربي الأول */
    height: 50px;
    width: 160px; /* نفس عرض الزر */
    background-color: #fff;
    color: #008456;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translateY(0px) scale(1.2);
    font-size: 1.1rem; /* حجم الخط */
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in-out;
}

/* حركات التحويل عند التمرير */
.type1:hover[b-epqdyf473m]::after {
    transform: translateY(0) scale(1.2);
}

.type1:hover[b-epqdyf473m]::before {
    transform: translateY(-50px) scale(0) rotate(120deg);
}

/* =========================================
   تحسينات شاشات الجوال (Mobile Adjustments)
   ========================================= */
@media (max-width: 768px) {
    /* إضافة هوامش جانبية للأقسام التي لا تحتوي على container */
    .features-section[b-epqdyf473m],
    .image-showcase-section[b-epqdyf473m] {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* تقليل الـ padding الضخم في شريط الإحصائيات للجوال */
    .stats-banner[b-epqdyf473m] {
        padding: 30px 15px;
        gap: 20px;
    }
}
/* /Pages/Preachers/GeneralImpactReport.razor.rz.scp.css */
/* ================= إعدادات الطباعة الطولية الصارمة ================= */
@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    html[b-5ujrl44kjh], body[b-5ujrl44kjh] {
        width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .report-page[b-5ujrl44kjh] {
        width: 210mm !important;
        height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important; /* ✅ منع تسريب أي ظل للورقة التالية */
        page-break-after: always !important;
        page-break-inside: avoid !important;
        overflow: hidden !important;
    }
}

.print-container[b-5ujrl44kjh] {
    width: 210mm;
    margin: 0 auto;
    background: white;
    direction: rtl;
    font-family: 'Cairo', sans-serif;
}

.report-page[b-5ujrl44kjh] {
    width: 210mm;
    height: 297mm;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* ================= الصفحة الأولى (الغلاف والمشاعر) ================= */
.impact-cover-page[b-5ujrl44kjh] {
    /* خلفية متدرجة فخمة جداً (أزرق ملكي إلى زمردي داكن) */
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    color: white;
}

.header-logo-bg[b-5ujrl44kjh] {
    width: 100%;
    height: 60mm;
    object-fit: cover;
    opacity: 0.15;
    position: absolute;
    top: 0;
    left: 0;
}

.cover-overlay[b-5ujrl44kjh] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20mm 20mm 15mm 20mm; /* ✅ تم تقليل المسافة العلوية من 40mm إلى 20mm */
    background: radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
}

.title-ornament[b-5ujrl44kjh] {
    font-size: 30px;
    text-align: center;
    margin-bottom: 10px;
}

.main-impact-title[b-5ujrl44kjh] {
    font-family: 'Amiri', serif;
    font-size: 55px;
    font-weight: 900;
    text-align: center;
    color: #f1c40f;
    margin: 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.sub-impact-title[b-5ujrl44kjh] {
    font-family: 'Cairo', sans-serif;
    font-size: 22px;
    text-align: center;
    font-weight: 300;
    color: #ecf0f1;
    margin-top: 10px;
    letter-spacing: 1px;
}

.period-badge[b-5ujrl44kjh] {
    background: rgba(241, 196, 15, 0.15);
    border: 1px solid rgba(241, 196, 15, 0.5);
    color: #f1c40f;
    padding: 8px 25px;
    border-radius: 30px;
    width: fit-content;
    margin: 20px auto;
    font-weight: bold;
    font-size: 16px;
}

/* تقليل المسافة فوق الرسالة وداخلها */
.letter-body[b-5ujrl44kjh] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px; /* ✅ تم تقليل الحشو الداخلي */
    margin-top: 10mm; /* ✅ تم رفع المربع لأعلى */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.greeting[b-5ujrl44kjh] {
    font-family: 'Amiri', serif;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
}

.letter-text[b-5ujrl44kjh] {
    font-size: 18px;
    line-height: 2;
    color: #ecf0f1;
    text-align: justify;
}

.text-gold[b-5ujrl44kjh] {
    color: #f39c12 !important;
}

/* تقليل المسافة حول مربع الحديث */
.hadith-box[b-5ujrl44kjh] {
    margin-top: 15px; /* ✅ تم تقليل المسافة */
    padding: 15px 20px; /* ✅ تم تقليل الحشو */
    background: rgba(0,0,0,0.2);
    border-right: 4px solid #f1c40f;
    border-left: 4px solid #f1c40f;
    border-radius: 10px;
    position: relative;
    text-align: center;
}

.quote-icon[b-5ujrl44kjh] {
    position: absolute;
    top: -15px;
    right: 20px;
    font-size: 30px;
    color: rgba(241, 196, 15, 0.3);
}

.quote-icon-left[b-5ujrl44kjh] {
    position: absolute;
    bottom: -15px;
    left: 20px;
    font-size: 30px;
    color: rgba(241, 196, 15, 0.3);
}

.hadith-text[b-5ujrl44kjh] {
    font-family: 'Amiri', serif;
    font-size: 22px;
    margin: 0;
    line-height: 1.8;
    color: #fff;
}

/* ================= الصفحة الثانية (الأرقام والإنفوجرافيك) ================= */
.impact-data-page[b-5ujrl44kjh] {
    background: #f8f9fa; /* لون فاتح جداً ونظيف */
    background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
    background-size: 20px 20px; /* يعطي تأثير نقطي خفيف واحترافي */
}

.data-overlay[b-5ujrl44kjh] {
    padding: 30mm 15mm;
}

.data-page-title[b-5ujrl44kjh] {
    font-family: 'Amiri', serif;
    font-size: 36px;
    font-weight: 900;
    color: #2c3e50;
    text-align: center;
    margin: 0;
}

.title-divider[b-5ujrl44kjh] {
    width: 100px;
    height: 5px;
    background: linear-gradient(to left, #27ae60, #2980b9);
    margin: 15px auto 40px auto;
    border-radius: 5px;
}

/* شبكة الكروت الإحصائية */
.infographic-grid[b-5ujrl44kjh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.info-card[b-5ujrl44kjh] {
    background: #fff;
    border-radius: 20px;
    padding: 25px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.03);
}

.card-icon[b-5ujrl44kjh] {
    width: 65px;
    height: 65px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    margin-left: 20px;
    flex-shrink: 0;
}

.card-data[b-5ujrl44kjh] {
    display: flex;
    flex-direction: column;
}

.counter[b-5ujrl44kjh] {
    font-size: 38px;
    font-weight: 900;
    margin: 0;
    line-height: 1;
    font-family: 'Courier New', monospace;
}

.label[b-5ujrl44kjh] {
    font-size: 16px;
    color: #7f8c8d;
    margin: 5px 0 0 0;
    font-weight: 600;
}

/* ألوان الكروت الخاصة */
.primary-card .card-icon[b-5ujrl44kjh] {
    background: linear-gradient(135deg, #2980b9, #2c3e50);
}

.primary-card .counter[b-5ujrl44kjh] {
    color: #2980b9;
}

.success-card .card-icon[b-5ujrl44kjh] {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.success-card .counter[b-5ujrl44kjh] {
    color: #27ae60;
}

.warning-card .card-icon[b-5ujrl44kjh] {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.warning-card .counter[b-5ujrl44kjh] {
    color: #d35400;
}

.info-card-blue .card-icon[b-5ujrl44kjh] {
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
}

.info-card-blue .counter[b-5ujrl44kjh] {
    color: #8e44ad;
}

/* الجدول التجميعي */
.aggregate-table-wrapper[b-5ujrl44kjh] {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid #e0e0e0;
}

.table-title[b-5ujrl44kjh] {
    font-size: 18px;
    font-weight: 900;
    color: #34495e;
    text-align: center;
    margin-bottom: 20px;
}

.aggregate-table[b-5ujrl44kjh] {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

    .aggregate-table th[b-5ujrl44kjh] {
        background: #f1f2f6;
        color: #2f3640;
        padding: 15px 5px;
        border: 1px solid #dcdde1;
        font-weight: bold;
    }

    .aggregate-table td[b-5ujrl44kjh] {
        padding: 25px 10px;
        border: 1px solid #dcdde1;
        font-family: 'Courier New', monospace;
    }

.footer-note-impact[b-5ujrl44kjh] {
    background: rgba(39, 174, 96, 0.1);
    border: 1px dashed #27ae60;
    padding: 15px 20px;
    border-radius: 12px;
    text-align: center;
    color: #2c3e50;
    font-size: 17px;
}
/* /Pages/Preachers/PreacherPeriodicReport.razor.rz.scp.css */
/* ============================================================
   إعدادات الطباعة الصارمة (طولي - Portrait)
   ============================================================ */
@media print {
    @page {
        size: A4 portrait; /* ✅ إجبار الطابعة على المقاس الطولي القياسي */
        margin: 0;
    }

    html[b-ajb2hia4m5], body[b-ajb2hia4m5] {
        width: 210mm !important; /* ✅ عرض الورقة الطولية */
        height: 297mm !important; /* ✅ ارتفاع الورقة الطولية */
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .print-container[b-ajb2hia4m5] {
        width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .report-page[b-ajb2hia4m5] {
        width: 210mm !important;
        height: 297mm !important; /* نقصنا 1 ملم لمنع الصفحات البيضاء المزعجة */
        margin: 0 !important;
        padding: 0 !important;
        page-break-after: always !important;
        page-break-inside: avoid !important;
        box-shadow: none !important;
        border: none !important; /* لمنع أي حدود بيضاء من الطابعة */
    }
}

/* ============================================================
   تنسيقات الصفحات الأساسية
   ============================================================ */
.print-container[b-ajb2hia4m5] {
    background-color: white;
    margin: 0 auto;
    width: 210mm;
}

.report-page[b-ajb2hia4m5] {
    width: 210mm;
    height: 297mm;
    position: relative;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.bg-img[b-ajb2hia4m5] {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ✅ التعديل هنا: استخدام cover يجعل الصورة تتمدد لتغطي أي فراغ أبيض تماماً دون تشويه */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.content-overlay[b-ajb2hia4m5], .stats-overlay[b-ajb2hia4m5] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    direction: rtl;
}

/* ============================================================
   القسم العلوي في الصفحة الأولى (بيانات الداعية)
   ============================================================ */
.preacher-header-wrapper[b-ajb2hia4m5] {
    position: absolute;
    top: 30mm; /* عدل هذه القيمة لرفع أو خفض الصورة والاسم معاً */
    right: 10mm; /* عدل هذه القيمة لضبط المسافة من اليمين */
    display: flex;
    align-items: center;
    gap: 20px;
}

.preacher-photo-box[b-ajb2hia4m5] {
    width: 38mm;
    height: 48mm;
    border-radius: 12px;
    border: 4px solid #ffffff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    overflow: hidden;
    background-color: #f8f9fa;
}

.preacher-img[b-ajb2hia4m5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preacher-name-section[b-ajb2hia4m5] {
    text-align: right;
}

.preacher-name[b-ajb2hia4m5] {
    font-family: 'Amiri', serif;
    font-size: 32px; /* تم تصغير الخط قليلاً ليناسب العرض الأقل */
    font-weight: 900;
    color: #0f4c75;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.8);
}

.name-divider[b-ajb2hia4m5] {
    width: 60px;
    height: 4px;
    background-color: #1abc9c;
    margin: 8px 0;
    border-radius: 2px;
}

.report-subtitle[b-ajb2hia4m5] {
    font-family: 'Cairo', sans-serif;
    font-size: 18px;
    color: #555;
    margin: 0;
    font-weight: 600;
}

/* ============================================================
   الإطارات الاحترافية (Cards / Badges)
   ============================================================ */
.info-wrapper[b-ajb2hia4m5] {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
}

.elegant-frame[b-ajb2hia4m5] {
    background: rgba(255, 255, 255, 0.98); /* ✅ جعلنا اللون الأبيض شبه كامل (98%) ليكون واضحاً */
    backdrop-filter: blur(5px);
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* ✅ ظل قوي وبارز يفصل الكارت عن الخلفية */
    font-family: 'Cairo', sans-serif;
    border: 2px solid rgba(0, 0, 0, 0.08); /* ✅ إطار خفيف يحدد حواف الكارت */
}

/* إطار الفترة الزمنية */
.period-frame[b-ajb2hia4m5] {
    padding: 10px 30px;
    font-size: 16px; /* تصغير الخط ليناسب الطول */
    font-weight: bold;
    color: #2c3e50;
    border-bottom: 3px solid #3498db;
}

/* إطار الموقع */
.location-frame[b-ajb2hia4m5] {
    padding: 12px 40px;
    font-size: 20px;
    font-family: 'Amiri', serif;
    border-radius: 15px;
    border-right: 6px solid #27ae60;
    border-left: 6px solid #27ae60;
}

.bullet-divider[b-ajb2hia4m5] {
    color: #ccc;
    font-size: 14px;
    margin: 0 10px;
}

/* إطار الكفيل */
.sponsor-frame[b-ajb2hia4m5] {
    padding: 12px 50px;
    border-radius: 15px;
    background: linear-gradient(145deg, #ffffff, #fdfbfb);
    border: 2px dashed #002353;
    box-shadow: 0 12px 30px rgba(0, 35, 60, 83.18); /* ✅ ظل أزرق بارز جداً */
}

.sponsor-label[b-ajb2hia4m5] {
    font-size: 18px;
    color: #7f8c8d;
    font-weight: bold;
}

.sponsor-value[b-ajb2hia4m5] {
    font-size: 28px;
    font-weight: 900;
    color: #002353;
    font-family: 'Amiri', serif;
    margin: 0 15px;
}

.sponsor-suffix[b-ajb2hia4m5] {
    font-size: 16px;
    color: #7f8c8d;
}

/* ============================================================
   تنسيقات الصفحة 5 (الجدول)
   ============================================================ */
.stats-overlay[b-ajb2hia4m5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* يبدأ من الأعلى */
    padding-top: 90mm; /* ✅ المسافة من أعلى الصفحة للجدول (عدلها حسب تصميمك الجديد) */
}

.stats-table[b-ajb2hia4m5] {
    width: 90%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255, 255, 255, 0.98);
    border: 2px solid #1f8ebf;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    direction: rtl;
}

    .stats-table th[b-ajb2hia4m5] {
        background: linear-gradient(180deg, #2980b9 0%, #1a5276 100%);
        color: white;
        padding: 10px 5px;
        text-align: center;
        font-family: 'Cairo', sans-serif;
        font-weight: bold;
        font-size: 13px; /* تصغير طفيف */
        border-right: 1px solid rgba(255,255,255,0.2);
    }

        .stats-table th:last-child[b-ajb2hia4m5] {
            border-right: none;
        }

.sub-header td[b-ajb2hia4m5] {
    background-color: #ecf0f1;
    text-align: center;
    font-size: 12px;
    padding: 6px;
    border-bottom: 2px solid #bdc3c7;
}

.split-cell[b-ajb2hia4m5] {
    display: flex;
    justify-content: space-around;
    font-weight: bold;
    color: #2c3e50;
}

.data-row td[b-ajb2hia4m5] {
    padding: 20px 5px;
    text-align: center;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    font-family: 'Courier New', monospace;
    color: #2c3e50;
}

.split-cell-data[b-ajb2hia4m5] {
    display: flex;
    justify-content: space-around;
    font-size: 18px;
}

.separator[b-ajb2hia4m5] {
    color: #ccc;
    font-weight: lighter;
}

.footer-note[b-ajb2hia4m5] {
    margin-top: 20px;
    background: rgba(255,255,255,0.9);
    padding: 10px 20px;
    width: 90%;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    font-family: 'Cairo', sans-serif;
    color: #444;
    font-weight: bold;
    font-size: 15px;
}

.badge-note[b-ajb2hia4m5] {
    color: #e67e22;
    background: #fdf2e9;
    padding: 2px 10px;
    border-radius: 5px;
    margin-left: 5px;
}

/* إطار التنبيهات والملاحظات */
.attention-note-card[b-ajb2hia4m5] {
    margin-top: 15px;
    width: 90%;
    background: linear-gradient(145deg, #fff5f5, #fdeded);
    border: 1px solid #fadbd8;
    border-right: 8px solid #e74c3c;
    border-radius: 10px;
    padding: 12px 20px;
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.15);
    text-align: right;
    direction: rtl;
}

.attention-title[b-ajb2hia4m5] {
    color: #c0392b;
    font-family: 'Cairo', sans-serif;
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 8px;
    margin-top: 0;
}

.attention-text[b-ajb2hia4m5] {
    color: #2c3e50;
    font-family: 'Amiri', serif;
    font-size: 17px;
    font-weight: bold;
    margin: 0;
    line-height: 1.6;
}
/* /Pages/Preachers/PreacherProfile.razor.rz.scp.css */
.object-fit-cover[b-jzayq2yomg] {
    object-fit: cover;
}

.x-small[b-jzayq2yomg] {
    font-size: 0.75rem;
}

.hover-shadow:hover[b-jzayq2yomg] {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.transition-all[b-jzayq2yomg] {
    transition: all 0.3s ease;
}

.bg-success-subtle[b-jzayq2yomg] {
    background-color: #d1e7dd;
}

.bg-warning-subtle[b-jzayq2yomg] {
    background-color: #fff3cd;
}

/* تنسيق حاوية شريط التقدم */
.progress-custom[b-jzayq2yomg] {
    height: 8px;
    overflow: visible; /* يسمح بظهور التسميات خارج الشريط إذا احتجت مستقبلاً */
    background-color: rgba(233, 236, 239, 0.75); /* لون رمادي فاتح جداً للخلفية */
    border-radius: 50rem; /* لجعله دائري الحواف */
}

/* تنسيق الشريط الملون نفسه */
.progress-bar-custom[b-jzayq2yomg] {
    border-radius: 50rem;
    transition: width 0.6s ease; /* حركة ناعمة عند تحميل الصفحة */
}

/* تأثير جميل عند تمرير الماوس على اسم الكفيل */
.sponsor-link[b-jzayq2yomg] {
    transition: all 0.3s ease;
    cursor: pointer;
}

.sponsor-link:hover[b-jzayq2yomg] {
        text-decoration: underline !important;
        color: #0a58ca !important; /* لون أزرق داكن قليلاً عند اللمس */
}
/* /Pages/Preachers/Preachers.razor.rz.scp.css */
.hover-card[b-ezwpg32hhq] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .hover-card:hover[b-ezwpg32hhq] {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }

.modal-blur[b-ezwpg32hhq] {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.object-fit-cover[b-ezwpg32hhq] {
    object-fit: cover;
}

/* تأثير نبض القلب لمؤشر الإنذار */
.pulse-danger[b-ezwpg32hhq] {
    display: inline-block;
    animation: heartbeat-b-ezwpg32hhq 1.5s infinite;
}

@keyframes heartbeat-b-ezwpg32hhq {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* تأثير زر الخريطة */
.hover-map:hover[b-ezwpg32hhq] {
    background-color: #e9ecef !important;
    transform: scale(1.05);
    transition: all 0.2s ease-in-out;
}
/* /Pages/PrintCertificate.razor.rz.scp.css */
.certificate-container[b-03pc4lucb8] {
    --border-color: #000;
    --header-bg: #e8e8e8;
}
.certificate-container[b-03pc4lucb8] {
    font-family: 'Cairo', 'Amiri', serif;
    background: white;
    max-width: 210mm;
    min-height: 296mm;
    margin: 0 auto;
    padding: 10mm 15mm;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.cert-header[b-03pc4lucb8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px double var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.report-title[b-03pc4lucb8] {
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0;
    font-size: 24px;
    text-transform: uppercase;
}

.ar-title[b-03pc4lucb8] {
    font-family: 'Amiri';
    margin: 0;
    font-weight: bold;
    font-size: 26px;
}

.header-center[b-03pc4lucb8] {
    text-align: center;
}

.cert-logo[b-03pc4lucb8] {
    height: 80px;
    width: auto;
    margin-bottom: 5px;
}

.institute-name[b-03pc4lucb8] {
    font-weight: bold;
    font-size: 14px;
}

.student-photo[b-03pc4lucb8] {
    width: 90px;
    height: 110px;
    border: 1px solid #000;
    object-fit: cover;
}

.academic-year-box[b-03pc4lucb8] {
    border: 2px solid #000;
    padding: 5px 15px;
    text-align: center;
    border-radius: 4px;
}

.student-info-section[b-03pc4lucb8] {
    border: 2px solid var(--border-color);
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.info-row[b-03pc4lucb8] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.info-row:last-child[b-03pc4lucb8] {
    margin-bottom: 0;
}

.info-group[b-03pc4lucb8] {
    border-bottom: 1px dashed #999;
    padding-bottom: 2px;
}

.label[b-03pc4lucb8] {
    font-weight: bold;
    margin-right: 10px;
    font-size: 14px;
}

.value[b-03pc4lucb8] {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 16px;
}

.grades-table[b-03pc4lucb8] {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid var(--border-color);
    margin-bottom: 15px;
}



.grades-table th[b-03pc4lucb8], .grades-table td[b-03pc4lucb8] {
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    text-align: center;
    font-size: 14px;
}



.grades-table thead th[b-03pc4lucb8] {
    background-color: var(--header-bg);
    font-weight: 800;
    vertical-align: middle;
}

.ar-text[b-03pc4lucb8] {
    font-family: 'Amiri';
    font-weight: normal;
    font-size: 16px;
    display: block;
}

.highlight-row[b-03pc4lucb8] {
    background-color: #f9f9f9;
}

.total-row td[b-03pc4lucb8], .average-row td[b-03pc4lucb8] {
    background-color: var(--header-bg);
    font-weight: bold;
    border-top: 2px solid var(--border-color);
}

.grading-scale[b-03pc4lucb8] {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid var(--border-color);
    padding: 5px;
    margin-bottom: 20px;
    background-color: #fafafa;
}

.rank-table-wrapper[b-03pc4lucb8] {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.rank-table[b-03pc4lucb8] {
    border-collapse: collapse;
    width: 60%;
    border: 2px solid var(--border-color);
}



.rank-table th[b-03pc4lucb8] {
    background-color: var(--header-bg);
    border: 1px solid var(--border-color);
    padding: 5px;
    font-size: 14px;
    text-align: center !important; /* محاذاة أفقية في الوسط */

    vertical-align: middle !important; /* محاذاة عمودية في الوسط */
}



.rank-table td[b-03pc4lucb8] {
    border: 1px solid var(--border-color);
    padding: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    text-align: center !important; /* محاذاة أفقية في الوسط */

    vertical-align: middle !important; /* محاذاة عمودية في الوسط */
}

.signatures-section[b-03pc4lucb8] {
    margin-top: auto;
}

.signatures-row[b-03pc4lucb8] {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.sig-block[b-03pc4lucb8] {
    text-align: center;
    width: 30%;
}

.sig-block p[b-03pc4lucb8] {
        font-weight: bold;
        margin-bottom: 40px;
        font-size: 14px;
}

.sig-line[b-03pc4lucb8] {
    border-bottom: 1px dotted #000;
    width: 100%;
    height: 1px;
}

.stamp-box[b-03pc4lucb8] {
    width: 80px;
    height: 80px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin: 0 auto;
    opacity: 0.3;
}

.print-date[b-03pc4lucb8] {
    font-size: 10px;
    text-align: center;
    margin-top: 20px;
    color: #666;
}

@media print {

    @page {
        size: A4 portrait;
        margin: 0;
    }

    body[b-03pc4lucb8] {
        background-color: white;
        -webkit-print-color-adjust: exact;
    }

    .d-print-none[b-03pc4lucb8] {
        display: none !important;
    }

    .certificate-container[b-03pc4lucb8] {
        width: 210mm;
        height: 296mm;
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 10mm;
        page-break-after: always;
    }

    /* =======================================================

   تنسيقات مساعدة لضمان المحاذاة الصحيحة (Utilities)

   ======================================================= */

    .text-start[b-03pc4lucb8] {
        text-align: left !important;
    }

    .text-end[b-03pc4lucb8] {
        text-align: right !important;
    }

    .text-center[b-03pc4lucb8] {
        text-align: center !important;
    }

    /* هوامش داخلية (Padding) لضبط المسافات */

    .ps-3[b-03pc4lucb8] {
        padding-left: 1rem !important;
    }

    .pe-3[b-03pc4lucb8] {
        padding-right: 1rem !important;
    }

    /* لضبط اتجاه النص الإنجليزي والعربي */

    [dir="ltr"][b-03pc4lucb8] {
        direction: ltr;
    }

    [dir="rtl"][b-03pc4lucb8] {
        direction: rtl;
    }
}
/* /Pages/Privacy.razor.rz.scp.css */
/* --- تنسيقات خاصة بصفحة الخصوصية --- */
.privacy-container[b-8xkmzmoeae] {
    background-color: #f9f9f9; /* خلفية فاتحة هادئة */
    padding: 60px 0;
    direction: rtl;
}

.privacy-header[b-8xkmzmoeae] {
    margin-bottom: 40px;
}

.page-title[b-8xkmzmoeae] {
    color: #333;
    font-weight: 800;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.divider-gold[b-8xkmzmoeae] {
    width: 80px;
    height: 4px;
    background-color: #d4af37; /* الذهبي المستخدم في الفوتر */
    margin: 0 auto 15px auto;
    border-radius: 2px;
}

.last-updated[b-8xkmzmoeae] {
    color: #777;
    font-size: 0.9rem;
}

/* --- البطاقة الرئيسية --- */
.privacy-content-card[b-8xkmzmoeae] {
    background: #fff;
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05); /* ظل ناعم */
    border-top: 5px solid #d4af37; /* خط ذهبي علوي */
}

/* --- الأقسام --- */
.policy-section[b-8xkmzmoeae] {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}

.policy-section:last-child[b-8xkmzmoeae] {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.section-title[b-8xkmzmoeae] {
    color: #222;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.icon-gold[b-8xkmzmoeae] {
    color: #d4af37;
    margin-left: 10px;
    font-size: 1.3rem;
}

p[b-8xkmzmoeae] {
    color: #555;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* --- القوائم --- */
.policy-list[b-8xkmzmoeae] {
    list-style: none;
    padding-right: 20px;
}

.policy-list li[b-8xkmzmoeae] {
    position: relative;
    margin-bottom: 12px;
    color: #444;
    line-height: 1.7;
}

.policy-list li[b-8xkmzmoeae]::before {
    content: "\f00c"; /* FontAwesome check */
    font-weight: 900;
    color: #d4af37;
    position: absolute;
    right: -25px;
    top: 2px;
}

/* --- صندوق الصلاحيات --- */
.roles-box[b-8xkmzmoeae] {
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-right: 4px solid #333; /* تمييز بصري */
    padding: 20px;
    border-radius: 6px;
    margin-top: 15px;
}

.roles-box ul[b-8xkmzmoeae] {
    list-style: none;
    padding: 0;
    margin: 0;
}
.roles-box li[b-8xkmzmoeae] {
    margin-bottom: 8px;
    color: #555;
}
.roles-box strong[b-8xkmzmoeae] {
    color: #d4af37;
}

.email-link[b-8xkmzmoeae] {
    color: #d4af37;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}

.email-link:hover[b-8xkmzmoeae] {
    color: #333;
    text-decoration: underline;
}

/* تحسينات للشاشات الصغيرة */
@media (max-width: 768px) {
    .privacy-content-card[b-8xkmzmoeae] {
        padding: 25px;
    }

    .page-title[b-8xkmzmoeae] {
        font-size: 2rem;
    }
}
/* /Pages/ProjectDetails.razor.rz.scp.css */
/* ========================================= */
/* ===  1. تنسيقات الهيدر العصري (Header) === */
/* ========================================= */

.project-header-modern[b-gckur0zuuh] {
    /* 1.(ضروري جداً لكي يمسك العناصر التي بداخلة (الخلفية والشفافية) */
    position: relative;
    /* 2. ارتفاع الهيدر */
    min-height: 480px;
    /* 3. لقص أي زوائد من الصورة الخلفية تخرج عن الإطار */
    overflow: hidden;
    /*4. انحناء سفلي ناعم */
    border-radius: 0 0 60px 60px;
    /* 5. لتوسيط المحتوى (النص) عمودياً وأفقياً داخل الصندوق */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* الصورة */
.header-bg[b-gckur0zuuh] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(6px); /* تمويه الخلفية لتركيز النظر على المحتوى */
    transform: scale(1.1); /* تكبير بسيط لتفادي حواف التمويه */
    z-index: 1;
}

/* الطبقة الشفافة */
.header-overlay[b-gckur0zuuh] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* تدرج لوني داكن ليبرز النصوص */
    background: linear-gradient(135deg, rgba(15, 32, 39, 0.95) 0%, rgba(44, 83, 100, 0.85) 100%);

    z-index: 2;
}

/*(المحتوى والنص (البنتهاوس - أعلى طابق */
.container[b-gckur0zuuh] {
    position: relative;
    z-index: 10; /*(الطبقة رقم 10 (لضمان أن تكون فوق الجميع */
}

/* ========================================= */
/* ===  2. تنسيق إطار الصورة (Frame)     === */
/* ========================================= */

.modern-frame-container[b-gckur0zuuh] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 5;
    /* حركة طوفان خفيفة للصورة */
    animation: floatImage-b-gckur0zuuh 4s ease-in-out infinite;
}

.modern-image-frame[b-gckur0zuuh] {
    width: 100%;
    max-width: 400px;
    height: 280px; /* ارتفاع ثابت للإطار */
    /* ستايل الإطار الزجاجي */
    background: rgba(255, 255, 255, 0.15);
    padding: 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    /* ميلان بسيط */
    transform: rotate(-2deg);
    transition: transform 0.3s ease;
}

    .modern-image-frame:hover[b-gckur0zuuh] {
        transform: rotate(0deg) scale(1.02); /* يستقيم ويكبر عند التحويم */
    }

.framed-img[b-gckur0zuuh] {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ملء الإطار بالصورة */
    border-radius: 15px;
    display: block;
}

/* دائرة زينة خلفية */
.decoration-circle[b-gckur0zuuh] {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(43, 170, 226, 0.4) 0%, rgba(43, 170, 226, 0) 70%);
    top: -20px;
    right: -20px;
    z-index: -1;
}

@keyframes floatImage-b-gckur0zuuh {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* ========================================= */
/* ===  3. تنسيقات عامة ومساعدة          === */
/* ========================================= */

/* شارة التصنيف الزجاجية */
.glass-badge[b-gckur0zuuh] {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white !important;
    font-weight: normal;
    letter-spacing: 0.5px;
}

.text-shadow[b-gckur0zuuh] {
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* رفع المحتوى للأعلى ليتداخل مع الهيدر */
.mt-n5[b-gckur0zuuh] {
    margin-top: -100px !important;
}

.bg-blue-light[b-gckur0zuuh] {
    background-color: #f0f8ff;
}

.text-justify[b-gckur0zuuh] {
    text-align: justify;
}

/* ضبط حقل الإدخال الرقمي */
.custom-input-group[b-gckur0zuuh] {
    direction: ltr; /* لجعل الأزرار يمين والأيقونة يسار */
}

    .custom-input-group input[b-gckur0zuuh] {
        text-align: center;
    }

/* زر التبرع */
.btn-donate-effect[b-gckur0zuuh] {
    transition: all 0.3s;
    background: linear-gradient(45deg, #0F97D4, #2baae2);
    border: none;
}

    .btn-donate-effect:hover[b-gckur0zuuh] {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(15, 151, 212, 0.4) !important;
    }

/* ========================================= */
/* ===  تحسين القائمة المنسدلة (Select)  === */
/* ========================================= */

.form-select[b-gckur0zuuh] {
    /* لون خلفية فاتح جداً */
    background-color: #fcfcfc;
    /* حدود زرقاء خفيفة بدلاً من الرمادي */
    border: 2px solid #e1eaf1;
    /* تدوير الحواف بشكل ملحوظ */
    border-radius: 15px;
    /* زيادة الارتفاع ليكون مريحاً للمس */
    height: 55px;
    padding-top: 12px;
    padding-bottom: 12px;
    /* تنسيق النص */
    font-weight: bold;
    color: #0F97D4; /* النص باللون الأزرق */
    font-size: 1.05rem;
    /* ظلال خفيفة */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    /* تغيير أيقونة السهم الافتراضية إلى سهم أزرق */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230F97D4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    /* ضبط مكان السهم ليكون على اليسار (لأن الموقع عربي) */
    background-position: left 1rem center;
    background-size: 16px 12px; /* حجم السهم */
    /* إبعاد النص عن السهم لكي لا يتداخل معه */
    padding-left: 2.5rem;
    transition: all 0.3s ease;
}
    /* عند الضغط على القائمة */
.form-select:focus[b-gckur0zuuh] {
    border-color: #0F97D4;
    box-shadow: 0 0 0 4px rgba(15, 151, 212, 0.1); /* توهج أزرق حول الحقل */
    outline: none;
}

/* ================================================== */
/* === تحسينات الجوال لصفحة تفاصيل المشروع === */
/* ================================================== */

@media (max-width: 768px) {
    /* 1. تقليل ارتفاع الهيدر في الجوال ليكون متناسباً مع الشاشة */
    .project-header-modern[b-gckur0zuuh] {
        min-height: 380px; /* تقليل الارتفاع */
        border-radius: 0 0 30px 30px; /* تقليل الانحناء قليلاً ليناسب الجوال */
    }

        /* 2. توسيط النصوص في الهيدر */
        .project-header-modern .col-lg-7[b-gckur0zuuh] {
            text-align: center !important;
            padding-top: 2rem !important; /* تقليل الـ padding العلوي */
        }

        /* 3. تصغير حجم الخطوط قليلاً لتناسب الشاشة الضيقة */
        .project-header-modern h1[b-gckur0zuuh] {
            font-size: 2.2rem !important; /* تصغير العنوان الرئيسي */
        }

        .project-header-modern p.lead[b-gckur0zuuh] {
            font-size: 1rem !important;
        }

    /* 4. تقليل التداخل (Margin-top السلبي) لكي لا يغطي الكرت على النص */
    .mt-n5[b-gckur0zuuh] {
        margin-top: -60px !important; /* بدلاً من -100px */
    }

    /* 5. تقليل الحشوة (Padding) داخل الكرت الأبيض ليعطي مساحة أكبر للنص */
    .card-body.p-5[b-gckur0zuuh] {
        padding: 1.5rem !important; /* بدلاً من 3rem */
    }
}
/* /Pages/Sponsors/SponsorAnnualReport.razor.rz.scp.css */
:root[b-e19i92844h] {
    --border-color: #000;
    --header-bg: #e8e8e8;
}

/* ============================================================
   1. إعدادات الصفحة الأساسية والحاويات (Layout & Wrappers)
   ============================================================ */
body[b-e19i92844h] {
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    font-family: 'Cairo', 'Amiri', serif;
}

.print-layout[b-e19i92844h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

/* توحيد خصائص الصفحات الثلاثة */
.cover-page-wrapper[b-e19i92844h],
.certificate-page[b-e19i92844h],
.flyer-page-wrapper[b-e19i92844h] {
    width: 210mm;
    height: 297mm; /* تم التعديل إلى 297 بدقة لملء ورقة A4 */
    background: white;
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ============================================================
   2. تخصيص صفحة الغلاف الإعلانية (Flyer) - (بدون هوامش)
   ============================================================ */
.flyer-page-wrapper[b-e19i92844h] {
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
    line-height: 0; /* هام جداً: يمنع المتصفح من ترك مسافة للنصوص أسفل الصورة */
}

.full-page-bg[b-e19i92844h] {
    width: 100%;
    height: 100%;
    object-fit: fill; /* تمديد الصورة لتغطي كامل الصفحة */
    display: block;
}

/* ============================================================
   3. تخصيص صفحة الغلاف النصية (Cover Page)
   ============================================================ */
.cover-page-wrapper[b-e19i92844h] {
    padding: 15mm;
    justify-content: center;
    align-items: center;
}

.cover-logo[b-e19i92844h] {
    height: 100px;
    width: auto;
}

.quote-box[b-e19i92844h] {
    border: 2px dashed #f0ad4e;
    border-radius: 15px;
    background-color: #fffbf5;
    padding: 20px;
    text-align: center;
    width: 90%;
}

.sponsor-name[b-e19i92844h] {
    color: #0d6efd;
}

.intermediary-info[b-e19i92844h] {
    margin-top: -10px;
    margin-bottom: 30px;
}

.intermediary-name[b-e19i92844h] {
    font-size: 18px;
    color: #555;
    font-weight: bold;
    font-family: 'Cairo', sans-serif;
}

/* ============================================================
   4. تخصيص صفحة الشهادة (Certificate Page)
   ============================================================ */
.certificate-page[b-e19i92844h] {
    padding: 8mm;
    justify-content: flex-start;
}

.certificate-container[b-e19i92844h] {
    width: 100%;
    height: 100%;
    border: 2px solid #000;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 8mm 10mm;
    direction: rtl;
}

/* --- الرأس Header --- */
.cert-header[b-e19i92844h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px double #000;
    padding-bottom: 5px;
    margin-bottom: 8px;
    height: 80px;
}

.header-right[b-e19i92844h] {
    width: 30%;
    text-align: right;
}

.header-center[b-e19i92844h] {
    width: 40%;
    text-align: center;
}

.header-left[b-e19i92844h] {
    width: 30%;
    text-align: left;
}

.report-title[b-e19i92844h] {
    font-weight: 800;
    margin: 0;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 1.2;
}

.ar-title[b-e19i92844h] {
    font-family: 'Amiri';
    margin: 0;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2;
}

.cert-logo[b-e19i92844h] {
    height: 60px;
    width: auto;
    margin-bottom: 2px;
}

.institute-name[b-e19i92844h] {
    font-weight: bold;
    font-size: 12px;
}

/* --- صورة الطالب --- */
.student-photo[b-e19i92844h] {
    width: 70px;
    height: 85px;
    border: 1px solid #000;
    object-fit: cover;
    margin-top: -15px;
}

.academic-year-box[b-e19i92844h] {
    border: 2px solid #000;
    padding: 2px 8px;
    text-align: center;
    border-radius: 4px;
    display: inline-block;
}

/* --- معلومات الطالب --- */
.student-info-section[b-e19i92844h] {
    border: 1px solid #000;
    padding: 4px 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 13px;
}

.info-row[b-e19i92844h] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

    .info-row:last-child[b-e19i92844h] {
        margin-bottom: 0;
    }

.info-group[b-e19i92844h] {
    border-bottom: 1px dashed #999;
    display: flex;
    align-items: baseline;
}

.label[b-e19i92844h] {
    font-weight: bold;
    margin-left: 8px;
}

.value[b-e19i92844h] {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 14px;
}

/* --- الجدول Grades Table --- */
.grades-section[b-e19i92844h] {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.grades-table[b-e19i92844h] {
    width: 100%;
    border-collapse: collapse !important;
    border: 1px solid #000 !important;
    margin-bottom: 8px;
}

    .grades-table th[b-e19i92844h], .grades-table td[b-e19i92844h] {
        border: 1px solid #000 !important;
        padding: 2px 4px;
        text-align: center;
        font-size: 13px;
    }

    .grades-table thead th[b-e19i92844h] {
        background-color: #e8e8e8 !important;
        font-weight: 800;
        vertical-align: middle;
        padding: 4px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

.ar-text[b-e19i92844h] {
    font-family: 'Amiri';
    font-weight: normal;
    font-size: 13px;
    display: block;
}

.highlight-row[b-e19i92844h] {
    background-color: #f9f9f9;
}

.total-row td[b-e19i92844h], .average-row td[b-e19i92844h] {
    background-color: #e8e8e8 !important;
    font-weight: bold;
    border: 1px solid #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* --- التذييل والترتيب --- */
.footer-summary[b-e19i92844h] {
    margin-bottom: 5px;
}

.grading-scale[b-e19i92844h] {
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #000 !important;
    padding: 2px;
    margin-bottom: 5px;
    background-color: #fafafa;
}

.rank-table-wrapper[b-e19i92844h] {
    display: flex;
    justify-content: center;
}

.rank-table[b-e19i92844h] {
    border-collapse: collapse !important;
    width: 60%;
    border: 1px solid #000 !important;
}

    .rank-table th[b-e19i92844h] {
        background-color: #e8e8e8 !important;
        border: 1px solid #000 !important;
        padding: 2px;
        font-size: 12px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .rank-table td[b-e19i92844h] {
        border: 1px solid #000 !important;
        padding: 4px;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
    }

/* --- التوقيعات --- */
.signatures-section[b-e19i92844h] {
    margin-top: auto;
}

.remarks[b-e19i92844h] {
    margin-bottom: 10px;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    padding-bottom: 2px;
}

.signatures-row[b-e19i92844h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.sig-block[b-e19i92844h] {
    text-align: center;
    width: 30%;
}

    .sig-block p[b-e19i92844h] {
        font-weight: bold;
        margin-bottom: 25px;
        font-size: 12px;
    }

.sig-line[b-e19i92844h] {
    border-bottom: 1px dotted #000;
    width: 100%;
    height: 1px;
}

.stamp-box[b-e19i92844h] {
    width: 60px;
    height: 60px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin: 0 auto -5px auto;
    opacity: 0.3;
}

.print-date[b-e19i92844h] {
    font-size: 9px;
    text-align: center;
    margin-top: 5px;
    color: #666;
}

/* ============================================================
   5. إعدادات الطباعة الصارمة (Strict Print Rules)
   ============================================================ */
@media print {
    /* تصفير هوامش الطابعة */
    @page {
        size: A4;
        margin: 0mm !important;
    }

    html[b-e19i92844h], body[b-e19i92844h] {
        margin: 0 !important;
        padding: 0 !important;
        width: 210mm;
        height: 297mm;
    }

    .print-layout[b-e19i92844h] {
        display: block;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* إعدادات الصفحات المشتركة للطباعة */
    .cover-page-wrapper[b-e19i92844h],
    .certificate-page[b-e19i92844h],
    .flyer-page-wrapper[b-e19i92844h] {
        margin: 0 !important;
        box-shadow: none;
        border: none;
        page-break-after: always;
        width: 210mm;
        height: 297mm; /* ضمان ارتفاع A4 بالكامل */
    }

    /* صفحة الغلاف الإعلانية: بدون هوامش نهائياً */
    .flyer-page-wrapper[b-e19i92844h] {
        padding: 0 !important;
    }

        .flyer-page-wrapper img[b-e19i92844h] {
            width: 210mm !important;
            height: 297mm !important;
            max-width: none !important;
        }

    /* الصفحات الأخرى: إضافة هوامش داخلية */
    .cover-page-wrapper[b-e19i92844h] {
        padding: 15mm;
    }

    .certificate-page[b-e19i92844h] {
        padding: 5mm;
    }

    /* إخفاء عناصر التحميل والأزرار */
    .d-print-none[b-e19i92844h], .spinner-border[b-e19i92844h], .progress[b-e19i92844h] {
        display: none !important;
    }

    /* ضمان ظهور الألوان والخلفيات */
    *[b-e19i92844h] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
/* /Pages/Sponsors/SponsorProfile.razor.rz.scp.css */
/* جعل اسم الطالب باللون الأسود داخل الشارة */
.badge.bg-info-subtle .text-white[b-0ejhjevsgo] {
    color:black !important;
}

/* --- التبويبات الذكية (مدرعة ضد القص في سفاري) --- */
.smart-tabs[b-0ejhjevsgo] {
    border-bottom: 2px solid #f1f3f5;
    /* إزالة overflow-y: hidden لأنها تسبب قص الخط السفلي في الجوال */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* تمرير ناعم للآيفون */
}

.smart-tabs .nav-item[b-0ejhjevsgo] {
    /* إزالة المارجن السالب الذي كان يدفع الزر للأسفل ويجعله يختفي */
    margin-bottom: 0;
}

.smart-tabs .nav-link[b-0ejhjevsgo] {
    border: none;
    color: #6c757d;
    font-weight: 600;
    padding: 1rem 1.5rem;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: transparent;
}

.smart-tabs .nav-link.active[b-0ejhjevsgo] {
    color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.05) !important;
}

/* 🚀 الخط المتحرك (مرفوع 1 بكسل لمنع سفاري من قصه) 🚀 */
.smart-tabs .nav-link.active[b-0ejhjevsgo]::after {
    content: '';
    position: absolute;
    bottom: 1px; /* 🪄 السحر هنا: رفعناه قليلاً لكي لا يطير خارج الحدود */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #0d6efd;
    border-radius: 3px 3px 0 0;
    z-index: 10;
    transform-origin: center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-animation: expandTabWidth 0.4s ease-out forwards;
    animation: expandTabWidth-b-0ejhjevsgo 0.4s ease-out forwards;
}

/* دعم الحركة لجميع المتصفحات */
@-webkit-keyframes expandTabWidth {
    to {
        -webkit-transform: scaleX(1);
    }
}

@keyframes expandTabWidth-b-0ejhjevsgo {
    to {
        transform: scaleX(1);
    }
}

/* إخفاء شريط التمرير المزعج */
.hide-scrollbar[b-0ejhjevsgo]::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar[b-0ejhjevsgo] {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* /Pages/StudentProfile.razor.rz.scp.css */
/* --- التبويبات الذكية (مدرعة ضد القص في سفاري) --- */
.smart-tabs[b-bfyva4yyj4] {
    border-bottom: 2px solid #f1f3f5;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.smart-tabs .nav-item[b-bfyva4yyj4] {
    margin-bottom: 0;
}

.smart-tabs .nav-link[b-bfyva4yyj4] {
    border: none;
    color: #6c757d;
    font-weight: 600;
    padding: 1rem 1.5rem;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: transparent;
}

.smart-tabs .nav-link.active[b-bfyva4yyj4] {
    color: #0d6efd !important;
    background-color: rgba(13, 110, 253, 0.05) !important;
}

/* 🚀 الخط المتحرك 🚀 */
.smart-tabs .nav-link.active[b-bfyva4yyj4]::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #0d6efd;
    border-radius: 3px 3px 0 0;
    z-index: 10;
    transform-origin: center;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-animation: expandTabWidth 0.4s ease-out forwards;
    animation: expandTabWidth-b-bfyva4yyj4 0.4s ease-out forwards;
}

@-webkit-keyframes expandTabWidth {
    to {
        -webkit-transform: scaleX(1);
    }
}

@keyframes expandTabWidth-b-bfyva4yyj4 {
    to {
        transform: scaleX(1);
    }
}

/* إخفاء شريط التمرير */
.hide-scrollbar[b-bfyva4yyj4]::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar[b-bfyva4yyj4] {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* /Shared/CertificateTemplate.razor.rz.scp.css */
/* CertificateTemplate.razor.css */

.certificate-container[b-2rr60r34ot] {
    --border-color: #000;
    --header-bg: #e8e8e8;
}

.certificate-container[b-2rr60r34ot] {
    font-family: 'Cairo', 'Amiri', serif;
    background: white;
    /* التعديل الوحيد هنا: جعلنا العرض 100% ليأخذ مساحة الصفحة في التقرير الشامل */
    width: 100%;
    min-height: 296mm;
    margin: 0 auto;
    /* التعديل: تقليل الـ padding قليلاً لأن التقرير الشامل له هوامش خاصة به */
    padding: 5mm;
    box-shadow: none;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.cert-header[b-2rr60r34ot] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px double var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.report-title[b-2rr60r34ot] {
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0;
    font-size: 24px;
    text-transform: uppercase;
}

.ar-title[b-2rr60r34ot] {
    font-family: 'Amiri';
    margin: 0;
    font-weight: bold;
    font-size: 26px;
}

.header-center[b-2rr60r34ot] {
    text-align: center;
}

.cert-logo[b-2rr60r34ot] {
    height: 80px;
    width: auto;
    margin-bottom: 5px;
}

.institute-name[b-2rr60r34ot] {
    font-weight: bold;
    font-size: 14px;
}

.student-photo[b-2rr60r34ot] {
    width: 90px;
    height: 110px;
    border: 1px solid #000;
    object-fit: cover;
}

.academic-year-box[b-2rr60r34ot] {
    border: 2px solid #000;
    padding: 5px 15px;
    text-align: center;
    border-radius: 4px;
}

.student-info-section[b-2rr60r34ot] {
    border: 2px solid var(--border-color);
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.info-row[b-2rr60r34ot] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

    .info-row:last-child[b-2rr60r34ot] {
        margin-bottom: 0;
    }

.info-group[b-2rr60r34ot] {
    border-bottom: 1px dashed #999;
    padding-bottom: 2px;
}

.label[b-2rr60r34ot] {
    font-weight: bold;
    margin-right: 10px;
    font-size: 14px;
}

.value[b-2rr60r34ot] {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 16px;
}

.grades-table[b-2rr60r34ot] {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid var(--border-color);
    margin-bottom: 15px;
}

    .grades-table th[b-2rr60r34ot], .grades-table td[b-2rr60r34ot] {
        border: 1px solid var(--border-color);
        padding: 6px 10px;
        text-align: center;
        font-size: 14px;
    }

    .grades-table thead th[b-2rr60r34ot] {
        background-color: var(--header-bg);
        font-weight: 800;
        vertical-align: middle;
    }

.ar-text[b-2rr60r34ot] {
    font-family: 'Amiri';
    font-weight: normal;
    font-size: 16px;
    display: block;
}

.highlight-row[b-2rr60r34ot] {
    background-color: #f9f9f9;
}

.total-row td[b-2rr60r34ot], .average-row td[b-2rr60r34ot] {
    background-color: var(--header-bg);
    font-weight: bold;
    border-top: 2px solid var(--border-color);
}

.grading-scale[b-2rr60r34ot] {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid var(--border-color);
    padding: 5px;
    margin-bottom: 20px;
    background-color: #fafafa;
}

.rank-table-wrapper[b-2rr60r34ot] {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.rank-table[b-2rr60r34ot] {
    border-collapse: collapse;
    width: 60%;
    border: 2px solid var(--border-color);
}

    .rank-table th[b-2rr60r34ot] {
        background-color: var(--header-bg);
        border: 1px solid var(--border-color);
        padding: 5px;
        font-size: 14px;
        text-align: center !important;
        vertical-align: middle !important;
    }

    .rank-table td[b-2rr60r34ot] {
        border: 1px solid var(--border-color);
        padding: 8px;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        text-align: center !important;
        vertical-align: middle !important;
    }

.signatures-section[b-2rr60r34ot] {
    margin-top: auto;
}

.signatures-row[b-2rr60r34ot] {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.sig-block[b-2rr60r34ot] {
    text-align: center;
    width: 30%;
}

    .sig-block p[b-2rr60r34ot] {
        font-weight: bold;
        margin-bottom: 40px;
        font-size: 14px;
    }

.sig-line[b-2rr60r34ot] {
    border-bottom: 1px dotted #000;
    width: 100%;
    height: 1px;
}

.stamp-box[b-2rr60r34ot] {
    width: 80px;
    height: 80px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin: 0 auto;
    opacity: 0.3;
}

.print-date[b-2rr60r34ot] {
    font-size: 10px;
    text-align: center;
    margin-top: 20px;
    color: #666;
}

@media print {
    /* هذه التنسيقات ضرورية لطباعة الكومبوننت بشكل صحيح */
    .certificate-container[b-2rr60r34ot] {
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .text-start[b-2rr60r34ot] {
        text-align: left !important;
    }

    .text-end[b-2rr60r34ot] {
        text-align: right !important;
    }

    .text-center[b-2rr60r34ot] {
        text-align: center !important;
    }

    .ps-3[b-2rr60r34ot] {
        padding-left: 1rem !important;
    }

    .pe-3[b-2rr60r34ot] {
        padding-right: 1rem !important;
    }

    [dir="ltr"][b-2rr60r34ot] {
        direction: ltr;
    }

    [dir="rtl"][b-2rr60r34ot] {
        direction: rtl;
    }
}