/* =========================================================
   SHALQAN BOX V8
   HORIZONTAL TOP NAVIGATION
   LOCAL CAIRO FONT
   ========================================================= */


/* =========================
   CAIRO LOCAL FONT
   ========================= */

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-400.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-500.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-600.ttf') format('truetype');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-700.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-800.ttf') format('truetype');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-900.ttf') format('truetype');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}


/* =========================
   GLOBAL FONT
   ========================= */

html,
body,
button,
input,
select,
textarea,
table,
th,
td,
label,
a,
span,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Cairo', sans-serif !important;
}


/* =========================
   PAGE
   ========================= */

body {
    background: #f4f7f6 !important;
}


/*
 * إلغاء المساحة التي كانت مخصصة
 * للقائمة الجانبية القديمة
 */
#dashboard-container.container {
    width: 100% !important;
    max-width: 1500px !important;

    margin: 0 auto !important;

    padding: 20px !important;

    min-height: auto !important;

    background: transparent !important;

    border-radius: 0 !important;
    box-shadow: none !important;
}


/* =========================
   TOP NAV
   ========================= */

#dashboard-container .nav-menu-bar {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    height: auto !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-content: center !important;

    flex-wrap: wrap !important;

    gap: 4px !important;

    margin: 0 0 22px !important;
    padding: 7px 12px !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            135deg,
            #064e3b 0%,
            #047857 55%,
            #059669 100%
        ) !important;

    border: 0 !important;
    border-radius: 13px !important;

    overflow: visible !important;

    box-shadow:
        0 5px 18px rgba(6,78,59,.15) !important;

    z-index: 500 !important;
}


/* إخفاء هوية القائمة الجانبية القديمة.
 * الشعار يبقى في الهيدر الرئيسي أعلى الصفحة.
 */

#dashboard-container .shalqan-sidebar-brand,
#dashboard-container .shalqan-sidebar-label {
    display: none !important;
}


/* =========================
   MAIN NAV BUTTONS
   ========================= */

#dashboard-container .nav-menu-bar > .nav-single-btn {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 8px 13px !important;

    box-sizing: border-box !important;

    background: transparent !important;

    color: rgba(255,255,255,.94) !important;

    border: 1px solid transparent !important;
    border-radius: 9px !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 1.4 !important;
    white-space: nowrap !important;

    box-shadow: none !important;
    transform: none !important;
}

#dashboard-container .nav-menu-bar > .nav-single-btn:hover {
    background: rgba(255,255,255,.11) !important;

    border-color: rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    transform: none !important;
}

#dashboard-container .nav-menu-bar > .nav-single-btn.active {
    background: #ffffff !important;

    color: #047857 !important;

    border-color: #ffffff !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.10) !important;
}


/* =========================
   DROPDOWN GROUPS
   ========================= */

#dashboard-container .shalqan-sidebar-group {
    position: relative !important;

    display: block;

    flex: 0 0 auto !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    overflow: visible !important;
}


/*
 * عنوان المجموعة يصبح زرًا علويًا.
 */

#dashboard-container .shalqan-sidebar-group-title {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 8px 29px 8px 13px !important;

    box-sizing: border-box !important;

    background: transparent !important;

    color: rgba(255,255,255,.94) !important;

    border: 1px solid transparent !important;
    border-radius: 9px !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 1.4 !important;

    white-space: nowrap !important;

    cursor: pointer !important;
}


/* سهم صغير */

#dashboard-container .shalqan-sidebar-group-title::after {
    content: "⌄";

    position: absolute;

    right: 11px;
    top: 50%;

    transform: translateY(-53%);

    color: #a7f3d0;

    font-size: 13px;
    font-weight: 900;
}


#dashboard-container .shalqan-sidebar-group:hover >
.shalqan-sidebar-group-title {
    background: rgba(255,255,255,.11) !important;

    border-color: rgba(255,255,255,.10) !important;

    color: #ffffff !important;
}


/* =========================
   DROPDOWN ITEMS
   ========================= */

/*
 * الأزرار داخل المجموعة تتحول إلى القائمة المنسدلة.
 *
 * أول زر يحدد مكان القائمة،
 * والبقية تتكدس تحته.
 */

#dashboard-container .shalqan-sidebar-group > button {
    display: none !important;

    width: 245px !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 9px 14px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    color: #334155 !important;

    border: 0 !important;
    border-radius: 0 !important;

    text-align: right !important;

    font-size: 11.5px !important;
    font-weight: 600 !important;

    line-height: 1.55 !important;

    box-shadow: none !important;
    transform: none !important;

    white-space: nowrap !important;
}


/*
 * عند فتح المجموعة تظهر عناصرها.
 */

#dashboard-container .shalqan-sidebar-group:hover > button,
#dashboard-container .shalqan-sidebar-group:focus-within > button {
    display: block !important;
}


/* أول عنصر في القائمة */

#dashboard-container .shalqan-sidebar-group:hover > button:first-of-type,
#dashboard-container .shalqan-sidebar-group:focus-within > button:first-of-type {
    position: absolute !important;

    top: calc(100% + 5px) !important;
    right: 0 !important;

    z-index: 1000 !important;

    border-radius: 10px 10px 0 0 !important;

    box-shadow:
        0 12px 28px rgba(15,23,42,.14) !important;
}


/*
 * العناصر التالية.
 */

#dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(2),
#dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(2) {
    position: absolute !important;
    top: calc(100% + 45px) !important;
    right: 0 !important;
    z-index: 1000 !important;
}

#dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(3),
#dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(3) {
    position: absolute !important;
    top: calc(100% + 85px) !important;
    right: 0 !important;
    z-index: 1000 !important;
}

#dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(4),
#dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(4) {
    position: absolute !important;
    top: calc(100% + 125px) !important;
    right: 0 !important;
    z-index: 1000 !important;
}

#dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(5),
#dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(5) {
    position: absolute !important;
    top: calc(100% + 165px) !important;
    right: 0 !important;
    z-index: 1000 !important;

    border-radius: 0 0 10px 10px !important;
}


/* hover لعناصر القائمة */

#dashboard-container .shalqan-sidebar-group > button:hover {
    background: #ecfdf5 !important;

    color: #047857 !important;

    transform: none !important;
}


/* رابط الاستعادة */

#dashboard-container
.shalqan-sidebar-group >
.shalqan-danger-link {
    color: #dc2626 !important;
}

#dashboard-container
.shalqan-sidebar-group >
.shalqan-danger-link:hover {
    background: #fef2f2 !important;

    color: #b91c1c !important;
}


/* =========================
   HEADER BAR
   ========================= */

#dashboard-container .header-bar {
    margin-bottom: 14px !important;

    background: #ffffff !important;

    border-radius: 13px !important;

    box-shadow:
        0 3px 14px rgba(15,23,42,.035) !important;
}


/* =========================
   CARDS
   ========================= */

#dashboard-container .table-responsive {
    border-radius: 13px !important;

    box-shadow:
        0 4px 18px rgba(15,23,42,.035) !important;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 900px) {

    #dashboard-container.container {
        width: 100% !important;

        margin: 0 !important;
        padding: 10px !important;
    }


    #dashboard-container .nav-menu-bar {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;

        width: 100% !important;

        gap: 4px !important;

        padding: 8px !important;

        overflow: visible !important;
    }


    #dashboard-container .nav-menu-bar >
    .nav-single-btn {
        width: 100% !important;

        justify-content: flex-start !important;

        text-align: right !important;
    }


    #dashboard-container .shalqan-sidebar-group {
        width: 100% !important;
    }


    #dashboard-container .shalqan-sidebar-group-title {
        width: 100% !important;

        justify-content: flex-start !important;
    }


    /*
     * على الهاتف نلغي absolute
     * حتى لا تخرج القائمة من الشاشة.
     */

    #dashboard-container .shalqan-sidebar-group:hover > button,
    #dashboard-container .shalqan-sidebar-group:focus-within > button {
        position: static !important;

        width: 100% !important;

        border-radius: 7px !important;

        margin: 2px 0 !important;

        box-shadow: none !important;
    }


    #dashboard-container .shalqan-sidebar-group > button {
        background: rgba(255,255,255,.96) !important;
    }


    body > header {
        position: sticky !important;

        top: 0 !important;

        z-index: 1200 !important;
    }
}



/* =========================================================
   SHALQAN BOX V8.1
   DROPDOWN HOVER STABILITY FIX
   ========================================================= */

/*
 * إزالة الفجوة بين عنوان القائمة والقائمة المنسدلة.
 * كانت 5px وتتسبب في فقدان :hover أثناء تحريك المؤشر.
 */

@media (min-width: 901px) {

    #dashboard-container .shalqan-sidebar-group:hover > button:first-of-type,
    #dashboard-container .shalqan-sidebar-group:focus-within > button:first-of-type {
        top: 100% !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(2),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(2) {
        top: calc(100% + 40px) !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(3),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(3) {
        top: calc(100% + 80px) !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(4),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(4) {
        top: calc(100% + 120px) !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(5),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(5) {
        top: calc(100% + 160px) !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(6),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(6) {
        top: calc(100% + 200px) !important;
    }

    /*
     * إبقاء القائمة مستقرة أثناء الانتقال بين عناصرها.
     */
    #dashboard-container .shalqan-sidebar-group::after {
        content: "";
        position: absolute;
        top: 100%;
        right: 0;
        width: 245px;
        height: 4px;
        background: transparent;
        pointer-events: auto;
    }

    #dashboard-container .shalqan-sidebar-group > button:hover {
        background: #ecfdf5 !important;
        color: #047857 !important;
    }
}


/* =========================================================
   CAMPAIGN LIVE PREVIEW
   ========================================================= */

#campaign-live-preview {
    position: relative;
    overflow: hidden;
}

#campaign-live-preview::before {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,.035);
    top: -60px;
    left: -45px;
    pointer-events: none;
}

#campaign-preview-title,
#campaign-preview-description,
#campaign-preview-target {
    position: relative;
    z-index: 1;
}

#campaign-preview-title {
    transition: opacity .15s ease;
}

#campaign-preview-target {
    color: #fde68a;
    font-weight: 800;
}



/* =========================================================
   SHALQAN BOX V8.2
   HEADER READABILITY + CAIRO DROPDOWN FONT
   ========================================================= */


/* خطوط Cairo المحلية */
@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-400.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-500.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-600.ttf') format('truetype');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-700.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-800.ttf') format('truetype');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Cairo';
    src: url('/fonts/cairo-900.ttf') format('truetype');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}


/* =========================================================
   DESKTOP HEADER
   ========================================================= */

@media (min-width: 901px) {

    /*
     * عناصر القائمة الرئيسية
     * تكبير بسيط لتحسين القراءة بدون تضخيم الهيدر.
     */
    #dashboard-container .nav-menu-bar > .nav-single-btn {
        font-family: 'Cairo', sans-serif !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        line-height: 1.6 !important;

        min-height: 44px !important;

        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }


    /*
     * عناوين القوائم التي تحتوي على عناصر فرعية
     * مثل الإدارة المالية وإدارة النظام.
     */
    #dashboard-container .shalqan-sidebar-group-title {
        font-family: 'Cairo', sans-serif !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        line-height: 1.6 !important;

        min-height: 44px !important;
    }


    /*
     * القوائم الفرعية المنسدلة.
     * Cairo + حجم أكبر لسهولة القراءة.
     */
    #dashboard-container .shalqan-sidebar-group > button {
        font-family: 'Cairo', sans-serif !important;

        font-size: 13.5px !important;
        font-weight: 600 !important;

        line-height: 1.65 !important;

        min-height: 44px !important;

        padding: 10px 15px !important;
    }


    /*
     * بما أن ارتفاع العناصر الفرعية أصبح 44px
     * نعيد ضبط مواقعها حتى لا تتداخل.
     */

    #dashboard-container .shalqan-sidebar-group:hover > button:first-of-type,
    #dashboard-container .shalqan-sidebar-group:focus-within > button:first-of-type {
        top: 100% !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(2),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(2) {
        top: calc(100% + 44px) !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(3),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(3) {
        top: calc(100% + 88px) !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(4),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(4) {
        top: calc(100% + 132px) !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(5),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(5) {
        top: calc(100% + 176px) !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(6),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(6) {
        top: calc(100% + 220px) !important;
    }

}


/* =========================================================
   TABLET / MOBILE
   المحافظة على Cairo ووضوح النص
   ========================================================= */

@media (max-width: 900px) {

    #dashboard-container .nav-menu-bar button,
    #dashboard-container .shalqan-sidebar-group-title,
    #dashboard-container .shalqan-sidebar-group > button {
        font-family: 'Cairo', sans-serif !important;
    }

    #dashboard-container .nav-menu-bar > .nav-single-btn,
    #dashboard-container .shalqan-sidebar-group-title {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    #dashboard-container .shalqan-sidebar-group > button {
        font-size: 13.5px !important;
        font-weight: 600 !important;
    }
}



/* =========================================================
   SHALQAN BOX V8.3
   HEADER LOGO + TITLE SPACING
   ========================================================= */

/*
 * تقريب اسم صندوق الشلقان من الشعار
 * بدون تغيير حجم الشعار أو موضع الهيدر.
 */

body > header > div:first-child {
    gap: 0 !important;
}

/*
 * تحريك كتلة النص باتجاه الشعار.
 * في RTL الشعار موجود على اليمين.
 */
body > header > div:first-child > div:nth-child(2) {
    position: relative !important;
    right: 14px !important;
}


/* الشاشات الصغيرة */
@media (max-width: 900px) {

    body > header > div:first-child > div:nth-child(2) {
        right: 9px !important;
    }

}



/* =========================================================
   SHALQAN BOX V8.4
   REAL LOGO / TITLE GAP FIX
   ========================================================= */

/*
 * حاوية الشعار + اسم الصندوق
 */
body > header > div:first-child {
    gap: 0 !important;
}


/*
 * إلغاء حركة النص السابقة في V8.3
 */
body > header > div:first-child > div:nth-child(2) {
    right: auto !important;
    left: auto !important;

    /*
     * سحب النص باتجاه الشعار لتعويض
     * الفراغ الشفاف داخل صورة logo.png
     */
    margin-right: -18px !important;
}


/*
 * منع أي margin إضافي من الصورة نفسها
 */
body > header > div:first-child > div:first-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/*
 * نحافظ على الشعار نفسه بدون تغيير حجمه
 */
body > header > div:first-child > div:first-child img {
    margin: 0 !important;
}


/* الهاتف والتابلت */
@media (max-width: 900px) {

    body > header > div:first-child > div:nth-child(2) {
        right: auto !important;
        margin-right: -14px !important;
    }

}



/* =========================================================
   SHALQAN BOX V8.2
   DESKTOP DROPDOWN FINAL NORMALIZATION
   إدارة النظام + الخدمات والأدوات
   ========================================================= */

@media (min-width: 901px) {

    /*
     * عنوان كل مجموعة يبقى بنفس الحجم عند الفتح والـ hover.
     * لا تكبير ولا تغيير في الأبعاد.
     */
    #dashboard-container .shalqan-sidebar-group,
    #dashboard-container .shalqan-sidebar-group:hover,
    #dashboard-container .shalqan-sidebar-group:focus-within {
        min-height: 44px !important;
        height: 44px !important;
        align-self: center !important;
    }

    #dashboard-container .shalqan-sidebar-group-title,
    #dashboard-container .shalqan-sidebar-group:hover > .shalqan-sidebar-group-title,
    #dashboard-container .shalqan-sidebar-group:focus-within > .shalqan-sidebar-group-title {
        height: 44px !important;
        min-height: 44px !important;

        padding-top: 9px !important;
        padding-bottom: 9px !important;

        box-sizing: border-box !important;

        transform: none !important;
        scale: 1 !important;
    }


    /*
     * جميع عناصر القوائم المنسدلة لها نفس القياس.
     */
    #dashboard-container .shalqan-sidebar-group > button {
        width: 245px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        padding: 10px 15px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
        transform: none !important;

        border-radius: 0 !important;
    }


    /*
     * العنصر الأول.
     */
    #dashboard-container .shalqan-sidebar-group:hover > button:first-of-type,
    #dashboard-container .shalqan-sidebar-group:focus-within > button:first-of-type {
        top: 100% !important;
        border-radius: 10px 10px 0 0 !important;
    }


    /*
     * المواضع الثابتة للعناصر.
     */
    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(2),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(2) {
        top: calc(100% + 44px) !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(3),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(3) {
        top: calc(100% + 88px) !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(4),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(4) {
        top: calc(100% + 132px) !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(5),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(5) {
        top: calc(100% + 176px) !important;
        border-radius: 0 !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover > button:nth-of-type(6),
    #dashboard-container .shalqan-sidebar-group:focus-within > button:nth-of-type(6) {
        top: calc(100% + 220px) !important;
    }


    /*
     * آخر عنصر ظاهر هو الذي يحصل على تدوير الزوايا السفلية.
     * يعمل مع إدارة النظام والخدمات والأدوات مهما اختلف العدد.
     */
    #dashboard-container .shalqan-sidebar-group > button:last-of-type {
        border-radius: 0 0 10px 10px !important;
    }


    /*
     * منع hover العام للأزرار من تحريك عناصر القائمة.
     */
    #dashboard-container .shalqan-sidebar-group > button:hover,
    #dashboard-container .shalqan-sidebar-group > button:focus {
        transform: none !important;
    }
}



/* =========================================================
   SHALQAN BOX V8.2
   REGIONAL ADMIN - SERVICES DROPDOWN FIX
   يمنع ظهور العناصر المحظورة ويعيد ترتيب العناصر المسموحة
   ========================================================= */

@media (min-width: 901px) {

    /*
     * مدير المنطقة:
     * لا تسمح لقواعد hover بإعادة إظهار عناصر SUPER_ADMIN.
     */
    body.regional-admin
    #dashboard-container
    .shalqan-sidebar-group > button.super-only {
        display: none !important;
    }


    /*
     * في قائمة الخدمات والأدوات لدى مدير المنطقة:
     *
     * العنصر المسموح الظاهر الأول:
     * تصدير قائمة المشتركين
     *
     * العنصر المسموح الظاهر الثاني:
     * عن الموقع
     *
     * العناصر الأخرى محجوبة حسب الصلاحيات.
     */

    body.regional-admin
    #dashboard-container
    .shalqan-sidebar-group:hover > button.region-export-btn,
    body.regional-admin
    #dashboard-container
    .shalqan-sidebar-group:focus-within > button.region-export-btn {
        display: block !important;
        position: absolute !important;

        top: 100% !important;
        right: 0 !important;

        width: 245px !important;
        min-height: 44px !important;

        border-radius: 10px 10px 0 0 !important;

        z-index: 1000 !important;

        background: #ffffff !important;
        color: #334155 !important;

        box-shadow:
            0 12px 28px rgba(15,23,42,.14) !important;
    }


    /*
     * زر "عن الموقع" هو الزر الخامس فعليًا داخل مجموعة
     * الخدمات والأدوات، لكنه يصبح العنصر المرئي الثاني
     * لمدير المنطقة.
     */
    body.regional-admin
    #dashboard-container
    .shalqan-sidebar-group:hover > button:nth-of-type(5),
    body.regional-admin
    #dashboard-container
    .shalqan-sidebar-group:focus-within > button:nth-of-type(5) {
        display: block !important;
        position: absolute !important;

        top: calc(100% + 44px) !important;
        right: 0 !important;

        width: 245px !important;
        min-height: 44px !important;

        border-radius: 0 0 10px 10px !important;

        z-index: 1000 !important;

        background: #ffffff !important;
        color: #334155 !important;

        box-shadow: none !important;
    }


    /*
     * منطقة اتصال غير مرئية بين عنوان القائمة وعناصرها
     * حتى لا تغلق القائمة أثناء انتقال المؤشر.
     */
    body.regional-admin
    #dashboard-container
    .shalqan-sidebar-group::after {
        content: "";
        position: absolute !important;

        top: 100% !important;
        right: 0 !important;

        width: 245px !important;
        height: 88px !important;

        background: transparent !important;

        pointer-events: none !important;
    }


    /*
     * تثبيت شكل hover وعدم السماح بأي transform.
     */
    body.regional-admin
    #dashboard-container
    .shalqan-sidebar-group > button:hover {
        transform: none !important;
        background: #ecfdf5 !important;
        color: #047857 !important;
    }
}


/* =========================================================
   SHALQAN BOX V8.4 - SYSTEM GROUP HOVER SIZE FIX
   تثبيت حجم عنوان المجموعة أثناء hover/focus
   ومنع تأثير القواعد العامة للأزرار
   ========================================================= */

@media (min-width: 901px) {

    #dashboard-container .shalqan-sidebar-group-title,
    #dashboard-container .shalqan-sidebar-group:hover > .shalqan-sidebar-group-title,
    #dashboard-container .shalqan-sidebar-group:focus-within > .shalqan-sidebar-group-title {

        width: auto !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        padding: 9px 29px 9px 13px !important;
        margin: 0 !important;

        box-sizing: border-box !important;

        font-size: 14px !important;
        line-height: 1.6 !important;

        transform: none !important;
        scale: 1 !important;

        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }

    #dashboard-container .shalqan-sidebar-group:hover,
    #dashboard-container .shalqan-sidebar-group:focus-within {

        width: auto !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        padding: 0 !important;
        margin: 0 !important;

        transform: none !important;
        scale: 1 !important;
    }

}



/* =========================================================
   SHALQAN LOGIN PAGE - DARK BACKGROUND
   خاص بصفحة تسجيل الدخول فقط
   ========================================================= */

html body.login-page {
    background:
        linear-gradient(
            115deg,
            #071827 0%,
            #082a32 48%,
            #06483c 100%
        ) !important;

    background-attachment: fixed !important;
}

/* تأكيد أن المنطقة المحيطة ببطاقة الدخول شفافة
   حتى تظهر خلفية الصفحة الداكنة */
html body.login-page .main-wrapper {
    background: transparent !important;
}