/* ============================================
   تنسيقات القائمة الفرعية للـ Sidebar - Sidebar Sub-menu Styles
   تصميم احترافي للقوائم المنسدلة في قائمة الموبايل فقط
   خلفية برتقالية - نص أبيض - Hover أسود
============================================ */

/* القائمة الفرعية في الموبايل - Mobile Sub Menu Only */
.sidebar-menu .sidebar-sub {
    list-style: none;
    padding: 0 !important;
    margin: 10px 0 !important;
    /* خلفية برتقالية متدرجة مثل الهيدر - Orange Gradient Background */
    background: linear-gradient(135deg, #F28123 0%, #ff9d50 100%);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(242, 129, 35, 0.3);
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

/* عناصر القائمة الفرعية - Sub Menu Items */
.sidebar-menu .sidebar-sub li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-menu .sidebar-sub li:last-child {
    border-bottom: none;
}

.sidebar-menu .sidebar-sub li a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 20px !important;
    font-size: 14px !important;
    /* نص أبيض - White Text */
    color: #fff !important;
    background: transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* تأثير Hover - Hover Effect */
.sidebar-menu .sidebar-sub li a:hover {
    /* خلفية بيضاء شفافة عند Hover */
    background: rgba(255, 255, 255, 0.2) !important;
    /* النص يصبح أسود عند Hover - Black Text on Hover */
    color: #051922 !important;
    padding-right: 25px !important;
}

/* الأيقونات في القائمة الفرعية - Icons */
.sidebar-menu .sidebar-sub li a i {
    font-size: 16px !important;
    /* أيقونات بيضاء - White Icons */
    color: #fff !important;
    min-width: 20px;
    transition: all 0.3s ease;
}

.sidebar-menu .sidebar-sub li a:hover i {
    /* الأيقونات تصبح سوداء عند Hover - Black Icons on Hover */
    color: #051922 !important;
    transform: scale(1.1);
}

/* تأثير عند النقر - Click Effect */
.sidebar-menu .sidebar-sub li a:active {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* دعم RTL للقائمة الفرعية - RTL Support */
[dir="rtl"] .sidebar-menu .sidebar-sub {
    padding-right: 0 !important;
}

[dir="rtl"] .sidebar-menu .sidebar-sub li a:hover {
    padding-right: 20px !important;
    padding-left: 25px !important;
}

/* إخفاء/إظهار القائمة الفرعية في الموبايل - Toggle Sub Menu (Mobile Only) */
.sidebar-menu .sidebar-sub {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
    margin: 0 !important;
}

/* عند فتح القائمة الفرعية - When Sub Menu is Open */
.sidebar-menu .sidebar-nav>li:hover .sidebar-sub,
.sidebar-menu .sidebar-nav>li.active .sidebar-sub {
    max-height: 500px;
    opacity: 1;
    margin: 10px 0 !important;
}

/* أيقونة السهم للعناصر التي لها قائمة فرعية - Arrow Icon (Mobile Only) */
.sidebar-menu .sidebar-nav>li:has(.sidebar-sub)>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-menu .sidebar-nav>li:has(.sidebar-sub)>a::after {
    content: '\f107';
    /* Font Awesome chevron-down */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    transition: transform 0.3s ease;
    color: #F28123;
}

.sidebar-menu .sidebar-nav>li:hover:has(.sidebar-sub)>a::after,
.sidebar-menu .sidebar-nav>li.active:has(.sidebar-sub)>a::after {
    transform: rotate(180deg);
}