/* ==========================================================================
   📑 sidebar.css - الإصدار الحاسم (لإلغاء الإطار المزدوج الخارجي والداخلي)
   ========================================================================== */

/* 1️⃣ التصفير والتأسيس لضمان حماية الهيكل ثنائي العرض (990px) */
.zs-sidebar,
.zs-sidebar ul,
.zs-sidebar li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0;
    box-sizing: border-box !important;
    display: block;
overflow: hidden !important; /* قص أي جزء يخرج عن الإطار */
}

/* 2️⃣ تصميم حاوية السايدبار الرئيسية (إطار واحد نقي ومعزول) */
.zs-sidebar {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    background: #ffffff !important;
    
    /* الإطار الفردي الأنيق النظيف والظل الخفيف */
    border: 1px solid #e2e8f0 !important; 
    border-radius: 12px !important;
    padding: 15px 10px !important;
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.zs-parent-wrapper {
    display: flex !important;
    align-items: center !important;
    position: relative !important; /* ضروري جداً ليعرف السهم حدوده */
    overflow: hidden !important;   /* يمنع السهم من الخروج */
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}



/* 🚨 3️⃣ السطر السحري: إلغاء الإطار المزدوج الخارجي نتيجه تكرار الحاويات 🚨 */
/* إذا قام الـ HTML بتوليد حاويتين متداخلتين أو متتاليتين بالخطأ، هذا الكود يجرد الطبقة الثانية تماماً */
.zs-sidebar .zs-sidebar, 
.zs-sidebar + .zs-sidebar,
.zs-sidebar > .zs-menu + .zs-menu {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   ⚙️ تعديل التحكم الصارم في أبعاد الروابط وتأثير الـ Hover
   ========================================================================== */

.zs-link {
    display: block !important;
    color: #475569 !important;
    text-decoration: none !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    border-right: 3px solid transparent !important;
    
    /* 🚨 السطور الحاسمة لمنع التمدد وعرض الـ Hover الزائد 🚨 */
    box-sizing: border-box !important; /* إجبار المتصفح على حساب الحشو (Padding) داخلياً دون زيادة العرض */
    width: 95% !important;            /* يمنع الرابط من التمدد الإجباري العشوائي لليسار */
    margin-left: 5px !important;       /* ترك مسافة أمان صغيرة من اليسار لمنع الالتصاق بالإطار الخارجي */
    margin-right: 5px !important;      /* ترك مسافة أمان صغيرة من اليمين لمنع الالتصاق بالإطار الخارجي */
}

/* 🎛️ تأثير التمرير (Hover) - الآن أصبح محكوماً بنفس أبعاد ومحيط الرابط النقي */
.zs-link:hover {
    background: #f8fafc !important;
    color: #0284c7 !important;
}

/* حالة النشاط - محكومة أيضاً بنفس المقاس تماماً */
.zs-link.active {
    background: #f0f9ff !important;
    color: #0284c7 !important;
    border-right-color: #0284c7 !important;
    font-weight: 600 !important;
}
.zs-root-section {
    font-weight: 500;
    color: #1e293b !important;
}

/* زر الطي الصغير المتوازن في أقصى اليسار */
.zs-toggle-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px 10px !important;
    color: #94a3b8 !important;
    font-size: 10px !important;
    position: absolute !important;
    left: 5px !important;
    transition: transform 0.2s, color 0.2s !important;
}
.zs-toggle-btn:hover {
    color: #0284c7 !important;
}

/* 5️⃣ التطهير الشامل للقوائم الفرعية لمنع نشوء إطارات ثانوية */
.zs-sidebar .zs-submenu {
    display: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.zs-sidebar .zs-submenu.open {
    display: block !important;
}

/* 6️⃣ تصحيح المسافات البادئة الهرمية (Indentation) */
.zs-sidebar .zs-first-level {
    margin-top: 4px !important;
}

.zs-sidebar .zs-submenu.depth-0 {
    padding-right: 15px !important;
    border-right: 1px dashed #e2e8f0 !important;
    margin-right: 8px !important;
}

.zs-sidebar .zs-submenu.depth-1 { padding-right: 12px !important; }
.zs-sidebar .zs-submenu.depth-2 { padding-right: 10px !important; }
.zs-sidebar .zs-submenu.depth-3 { padding-right: 6px !important; }

/* 7️⃣ القائمة الثابتة بالأسفل (المؤلفون / اتصل بنا) */
.zs-static {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.zs-static .zs-link {
    color: #64748b !important;
    font-weight: 500 !important;
}

/* رسالة خطأ قاعدة البيانات */
.zs-db-error {
    color: #ef4444 !important;
    padding: 10px !important;
    font-size: 13px !important;
}

/* 📱 وضع الجوال والشاشات الصغيرة */
@media (max-width: 992px) {
    .zs-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   🔧 إصلاح تخطيط الصفحة - السايدبار يمين دائماً (حل صارم)
   ========================================================================== */

/* الحاوية الرئيسية */
.layout, 
.admin-container,
.container-fluid {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    
    /* ✅ فرض الاتجاه من اليمين لليسار */
    direction: rtl !important;
}

/* ✅ السايدبار: نثبته في اليمين بقوة */
.zs-sidebar,
.sidebar {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    
    /* ✅ هذه السطور هي السر: تدفع السايدبار لليمين */
    margin-right: 0 !important;
    margin-left: auto !important; /* ← هذا يجبره على البقاء يميناً */
    order: -1 !important; /* ← يظهر أولاً في الترتيب المرن */
}

/* المحتوى الرئيسي */
.main,
.content-area,
.content {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    
    /* ✅ المحتوى يأخذ المساحة المتبقية على اليسار */
    margin-left: 0 !important;
    margin-right: auto !important;
    order: 0 !important;
}

/* 📱 الجوال */
@media (max-width: 992px) {
    .layout, .admin-container, .container-fluid {
        flex-direction: column !important;
    }
    .zs-sidebar, .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        order: 2 !important; /* السايدبار ينزل للأسفل */
    }
    .main, .content-area, .content {
        order: 1 !important;
    }
}