/* =========================================================
   ZNILATHOSS SPORTS
   SIDEBAR.CSS
   متوافق مع sidebar.js
   ========================================================= */


/* =========================================================
   1. زر فتح القائمة
   ========================================================= */
/* =========================================================
   ZNILATHOSS SPORTS
   MENU TOGGLE
   زر القائمة - الوضع الموحد
   ========================================================= */
.menu-toggle {
    position: fixed;

    top: 18px;
    left: 14px;
    right: auto;

    width: 40px;
    height: 40px;

    z-index: 100001;

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

    padding: 0;

    border: none;
    border-radius: 12px;

    background: #8be34f;
    color: #ffffff;

    font-size: 23px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.22);
}

/* =========================================================
   الهاتف
   ========================================================= */

@media (max-width: 600px) {

    .menu-toggle {
        top: 16px;
        left: 12px;

        width: 40px;
        height: 40px;

        border-radius: 11px;

        font-size: 22px;
    }

}

/* =========================================================
   الهواتف الصغيرة جدًا
   ========================================================= */

@media (max-width: 380px) {

    .menu-toggle {
        top: 14px;
        left: 10px;

        width: 40px;
        height: 40px;

        border-radius: 10px;

        font-size: 21px;
    }

}
/* =========================================================
   2. الخلفية خلف القائمة
   مهم جدًا:
   يجب أن تغطي الشاشة كاملة
   ========================================================= */

#sidebar-overlay.sidebar-overlay {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.45);

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    z-index: 99998;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


/* =========================================================
   Overlay عند فتح القائمة
   ========================================================= */

#sidebar-overlay.sidebar-overlay.active {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   3. القائمة الجانبية
   الحالة المغلقة
   ========================================================= */

#sidebar.sidebar {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: auto;

    width: min(320px, 85vw);
    height: 100vh;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    background: #ffffff;

    border-left:
        1px solid rgba(0, 0, 0, 0.08);

    box-shadow:
        -10px 0 35px rgba(0, 0, 0, 0.20);

    overflow-x: hidden;
    overflow-y: auto;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transform: translateX(100%);

    z-index: 100000;

    transition:
        transform 0.3s ease,
        opacity 0.25s ease,
        visibility 0.3s ease;
}


/* =========================================================
   4. القائمة عند فتحها
   sidebar.js يضيف class="active"
   ========================================================= */

#sidebar.sidebar.active {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transform: translateX(0);
}


/* =========================================================
   5. رأس القائمة
   يحتوي اسم التطبيق + زر X
   ========================================================= */

#sidebar .sidebar-header {
    width: 100%;

    min-height: 75px;

    margin: 0;
    padding: 15px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-shrink: 0;

    box-sizing: border-box;

    background: #ffffff;

    border-bottom:
        1px solid rgba(0, 0, 0, 0.08);

    position: relative;

    z-index: 2;
}


/* =========================================================
   6. اسم التطبيق داخل القائمة
   ========================================================= */               
#sidebar .sidebar-title {
    margin: 0;
    padding: 0;

    color: #172033;

    font-size: 18px;
    font-weight: 800;

    line-height: 1.3;

    text-align: right;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
         
}


/* =========================================================
   7. زر إغلاق القائمة
   ========================================================= */

#sidebar .sidebar-close {
    width: 42px;
    height: 42px;

    min-width: 42px;

    flex: 0 0 42px;

    margin: 0;
    padding: 0;

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

    box-sizing: border-box;

    border: none;
    border-radius: 10px;

    background: #f1f3f5;

    color: #333333;

    font-size: 25px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    pointer-events: auto;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


#sidebar .sidebar-close:hover {
    background: #e5e7eb;

    transform: scale(1.04);
}


#sidebar .sidebar-close:active {
    transform: scale(0.94);
}


/* =========================================================
   8. محتوى القائمة
   ========================================================= */

#sidebar .sidebar-content {
    width: 100%;

    margin: 0;
    padding: 18px;

    display: flex;
    flex-direction: column;

    align-items: stretch;
    justify-content: flex-start;

    gap: 12px;

    flex: 1 1 auto;

    box-sizing: border-box;

    direction: rtl;

    background: #ffffff;

    position: relative;

    z-index: 1;
}


/* =========================================================
   9. عنوان قسم التواصل
   ========================================================= */

#sidebar .sidebar-contact-title {
    width: 100%;

    margin: 0;

    padding: 4px 2px 8px;

    box-sizing: border-box;

    color: #172033;

    font-size: 16px;
    font-weight: 800;

    line-height: 1.5;

    text-align: right;

    flex: 0 0 auto;
}


/* =========================================================
   10. روابط القائمة
   ========================================================= */

#sidebar .sidebar-link {
    width: 100%;

    min-height: 52px;

    margin: 0;
    padding: 10px 14px;

    display: flex;

    flex: 0 0 auto;

    align-items: center;

    justify-content: flex-start;

    gap: 12px;

    box-sizing: border-box;

    border: 1px solid rgba(0, 0, 0, 0.08);

    border-radius: 12px;

    background: #ffffff;

    color: #172033;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.3;

    direction: rtl;

    cursor: pointer;

    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    position: relative;

    z-index: 3;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   11. Hover
   ========================================================= */

#sidebar .sidebar-link:hover {
    background: #f5f8f3;

    border-color:
        rgba(143, 218, 91, 0.45);

    transform: translateX(-3px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.07);
}


#sidebar .sidebar-link:active {
    transform: scale(0.98);
}


/* =========================================================
   12. أيقونة الرابط
   ========================================================= */

#sidebar .sidebar-link-icon {
    width: 32px;
    height: 32px;

    min-width: 32px;

    flex: 0 0 32px;

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

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    border-radius: 8px;

    font-size: 18px;

    line-height: 1;

    text-align: center;
}


/* =========================================================
   13. نص الرابط
   ========================================================= */

#sidebar .sidebar-link-text {
    min-width: 0;

    display: block;

    flex: 1 1 auto;

    margin: 0;
    padding: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: inherit;

    line-height: 1.4;

    text-align: right;
}


/* =========================================================
   14. RTL
   ========================================================= */

html[dir="rtl"] #sidebar.sidebar {
    right: 0;
    left: auto;

    transform: translateX(100%);
}


html[dir="rtl"] #sidebar.sidebar.active {
    transform: translateX(0);
}


html[dir="rtl"] #menu-toggle.menu-toggle {
    right: 15px;
    left: auto;
}


html[dir="rtl"] #sidebar .sidebar-content {
    direction: rtl;
}


html[dir="rtl"] #sidebar .sidebar-link {
    direction: rtl;

    justify-content: flex-start;
}


/* =========================================================
   15. منع تمرير الصفحة عند فتح القائمة
   ========================================================= */

body.sidebar-open {
    overflow: hidden;
}


/* =========================================================
   16. التركيز
   ========================================================= */

#menu-toggle.menu-toggle:focus-visible,
#sidebar .sidebar-close:focus-visible,
#sidebar .sidebar-link:focus-visible {

    outline:
        3px solid rgba(143, 218, 91, 0.55);

    outline-offset: 2px;
}


/* =========================================================
   17. الهاتف
   ========================================================= */

@media (max-width: 768px) {

    #menu-toggle.menu-toggle {

        top: 10px;
        right: 10px;

        width: 44px;
        height: 44px;

        font-size: 22px;
    }


    #sidebar.sidebar {

        width: min(300px, 86vw);
    }


    #sidebar .sidebar-content {

        padding: 15px;
    }
}


/* =========================================================
   18. هاتف صغير
   ========================================================= */

@media (max-width: 480px) {

    #menu-toggle.menu-toggle {

        top: 8px;
        right: 8px;

        width: 42px;
        height: 42px;

        border-radius: 10px;

        font-size: 21px;
    }


    #sidebar.sidebar {

        width: 88vw;
    }


    #sidebar .sidebar-header {

        min-height: 68px;

        padding: 12px 14px;
    }


    #sidebar .sidebar-title {

        font-size: 16px;
    }


    #sidebar .sidebar-content {

        padding: 14px;

        gap: 10px;
    }


    #sidebar .sidebar-link {

        min-height: 50px;

        padding: 9px 12px;

        font-size: 14px;
    }


    #sidebar .sidebar-link-icon {

        width: 30px;
        height: 30px;

        min-width: 30px;

        flex-basis: 30px;

        font-size: 17px;
    }
}


/* =========================================================
   19. هاتف صغير جدًا
   ========================================================= */

@media (max-width: 360px) {

    #menu-toggle.menu-toggle {

        top: 7px;
        right: 7px;

        width: 40px;
        height: 40px;

        font-size: 20px;
    }


    #sidebar.sidebar {

        width: 90vw;
    }


    #sidebar .sidebar-content {

        padding: 12px;
    }


    #sidebar .sidebar-link {

        min-height: 48px;

        padding: 8px 10px;
    }
}


/* =========================================================
   20. تقليل الحركة
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #sidebar.sidebar,
    #sidebar-overlay.sidebar-overlay,
    #menu-toggle.menu-toggle,
    #sidebar .sidebar-close,
    #sidebar .sidebar-link {

        transition: none !important;
    }
}


/* =========================================================
   21. حماية زر القائمة
   ========================================================= */

#menu-toggle.menu-toggle {

    pointer-events: auto !important;

    z-index: 100001 !important;
}


/* =========================================================
   22. لا نعطل أحداث الهيدر بالكامل
   ========================================================= */

/*
   تم حذف:

   .app-header,
   .header-inner,
   .app-brand {
       pointer-events: none;
   }

   لأن هذا قد يمنع عناصر الهيدر من استقبال الأحداث.
*/


/* =========================================================
   23. ضمان ظهور عناصر القائمة
   ========================================================= */

#sidebar.active .sidebar-header,
#sidebar.active .sidebar-content,
#sidebar.active .sidebar-title,
#sidebar.active .sidebar-link,
#sidebar.active .sidebar-link-icon,
#sidebar.active .sidebar-link-text {

    visibility: visible;
    opacity: 1;
}

/* =========================================================
   MENU BUTTON - النسخة النهائية
   ========================================================= */

#menu-toggle.menu-toggle {
    position: fixed !important;

    top: 16px !important;
    left: 12px !important;
    right: auto !important;

    width: 40px;
    height: 40px;

    z-index: 100001 !important;
}

/* الهاتف */
@media (max-width: 768px) {
    #menu-toggle.menu-toggle {
        top: 10px !important;
        left: 10px !important;
    }
}

/* الهاتف الصغير */
@media (max-width: 480px) {
    #menu-toggle.menu-toggle {
        top: 8px !important;
        left: 8px !important;
    }
}

/* الهاتف الصغير جداً */
@media (max-width: 360px) {
    #menu-toggle.menu-toggle {
        top: 7px !important;
        left: 7px !important;
    }
}
/* =========================================================
   END
   ========================================================= */