/* ============================================================
   ‏هوية الواجهة العامة — ألوان الوزارة وترويسة فاتحة (معتمد 2026-09-18)
   ‏تُحمَّل من Site.master لصفحات الواجهة العامة وحدها.

   ‏المبدأ المأخوذ من موقع الوزارة: الخلفية فاتحة دافئة، والكحلى للنصّ
   ‏والشرائط الرفيعة، والذهبى للتأكيد لا للمساحات. وشريطٌ أزرق رفيع
   ‏تحت القائمة للإعلان، وهو نفس ما يفعله الموقع الرسمى.
============================================================ */

/* ── التوكنات: نفس لوحة الوزارة ── */
:root{
    --primary:        #051d40;
    --primary-dark:   #03142d;
    --primary-light:  #123a6e;

    --gold:           #c19508;
    --gold-light:     #d5a419;
    --gold-dark:      #ae8100;

    --bg:             #fffbf2;
    --surface:        #ffffff;
    --surface-alt:    #faf6ee;
    --border:         #e6dfd0;

    --text:           #201f1e;
    --text-muted:     #4d4d4d;

    --info:           #2895de;
    --accent:         #2accde;

    --navbar-bg:      #ffffff;
    --topbar-bg:      #fffbf2;
    --footer-bg:      #03142d;
}

body{ background: var(--bg); }

/* ── الشريط العلوى: كريمى بنصّ كحلى وحدٍّ ذهبى ── */
#topbar{
    background: var(--topbar-bg) !important;
    color: var(--primary) !important;
    border-bottom: 2px solid var(--gold);
}
#topbar a, #topbar span, #topbar i, #topbar .tb-info, #topbar .tb-username{ color: var(--primary) !important; }
#topbar .btn-auth, #topbar .btn-register{
    background: var(--primary) !important; color:#fff !important; border-color: var(--primary) !important;
}
#topbar .btn-logout{ background: var(--gold-dark) !important; color:#fff !important; }

/* ── القائمة: بيضاء بنصّ كحلى وتأكيدٍ ذهبى ── */
#mainNav{
    background: var(--navbar-bg) !important;
    box-shadow: 0 2px 10px rgba(5,29,64,.07);
    border-bottom: 1px solid var(--border);
}
#mainNav .nav-link,
#mainNav .nav-item > .nav-link,
#mainNav .navbar-nav > li > a,
#mainNav .nav-item > a{
    color: var(--primary) !important;
    font-weight: 700;
    border-bottom: 3px solid transparent;
}
#mainNav .nav-item > .nav-link:hover,
#mainNav .nav-item.active > .nav-link,
#mainNav .nav-link:hover,
#mainNav .nav-item > a:hover,
#mainNav .nav-link.active{
    color: var(--gold-dark) !important;
    border-bottom-color: var(--gold);
}
#mainNav .navbar-toggler{ border-color: var(--border); }
#mainNav .navbar-toggler-icon{ filter: invert(12%) sepia(38%) saturate(2200%) hue-rotate(196deg); }

/* ‏الشعار فيه نصٌّ أبيض، فيوضع على مربّعٍ كحلى كى يُقرأ على الأبيض */


/* ── القوائم الكبيرة: بيضاء بنصّ كحلى ── */
.mega-menu{ background: var(--surface) !important; border:1px solid var(--border); }
.mega-menu a, .mega-menu .mega-link, .dropdown-item{ color: var(--text) !important; }
.mega-menu a:hover, .dropdown-item:hover{ color: var(--gold-dark) !important; background: var(--surface-alt) !important; }

/* ── شريط الإعلان: أزرق رفيع كما فى الموقع الرسمى ── */
#announcementBar{
    background: #1b4ea8 !important;
    color:#fff !important;
    border-block: none;
}
#announcementBar i, #announcementBar .marquee-text{ color:#fff !important; }

/* ── بطاقات وعناوين ── */
.svc-card, .news-card{ border-color: var(--border); }
.section-header h2, .news-section-header h2{ color: var(--primary); }
.btn-gold{ background: var(--gold); color:#2a2206; }
.btn-gold:hover{ background: var(--gold-dark); color:#fff; }

/* ملحوظة: كان هنا `border-color: var(--primary) !important` يشمل الـ::after،
   ومثلّث بوتستراب مرسومٌ بحدودٍ جانبية شفّافة؛ فلمّا صارت كحلية
   انقلب المثلّث إلى مستطيلٍ صغير يبدو شَرطة. فاللون وحده هنا،
   وشكل السهم فى app-ui.css. */
#mainNav .nav-link.mega-trigger .mega-arrow,
#mainNav .nav-item > .nav-link i{ color: var(--primary) !important; }
#mainNav .nav-link.dropdown-toggle::after{ color: var(--primary); }

/* ── القائمة المطوية على الشاشات الضيقة ──
   الماستر يجعل لوحة القائمة كحلية (من عهد الترويسة الداكنة)، ومع النصّ
   الكحلى الجديد يصير كحلى على كحلى. فتُقلب اللوحة إلى بيضاء هنا أيضاً. */
@media (max-width: 1199.98px) {
    #mainNav #navContent {
        background: var(--surface, #fff) !important;
        border: 1px solid var(--border, #e6dfd0);
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(5,29,64,.12);
        padding: 8px 10px !important;
        margin-top: 8px;
    }
    #mainNav #navContent .nav-link,
    #mainNav #navContent .nav-item > a,
    #mainNav #navContent .dropdown-item,
    #mainNav #navContent .dropdown-header {
        color: var(--primary, #051d40) !important;
    }
    #mainNav #navContent .nav-link:hover,
    #mainNav #navContent .dropdown-item:hover {
        color: var(--gold-dark, #ae8100) !important;
        background: var(--surface-alt, #faf6ee) !important;
    }
    #mainNav #navContent .nav-item + .nav-item { border-top: 1px solid var(--border, #e6dfd0); }
    #mainNav #navContent .dropdown-menu {
        background: var(--surface-alt, #faf6ee) !important;
        border: none; box-shadow: none; margin-inline-start: 10px;
    }
    #mainNav #navContent .dropdown-divider { border-color: var(--border, #e6dfd0); }
}