@import url("readability.css");
@import url("responsive.css");
@import url("rlx-tools.css");
/* ================================================================
   ROLLEX — القائمة الجانبية الموحّدة (Shared Sidebar Component)
   ================================================================
   ده ملف الـ CSS بتاع القائمة الجانبية الموحّدة، منسوخ حرفيًا من
   الصفحة الرئيسية (index.html) عشان كل صفحات النظام تظهر بنفس
   القائمة الجانبية بالظبط (بدل التعارضات البصرية اللي كانت موجودة
   لما كل صفحة كانت بتعرّف قائمتها الجانبية بشكل مختلف).

   الملف ده لازم يتحمّل بعد theme.css وبعد أي <style> داخلي في
   الصفحة، عشان قواعده تكسب أي تعريف قديم متعارض للقائمة الجانبية
   كان موجود جوه الصفحة نفسها.
   ================================================================ */

.sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(33,29,26,0.4);
    z-index: 999; opacity: 0; transition: opacity .25s ease;
    pointer-events: none;
}
.sidebar-overlay.active { opacity: 1; pointer-events: auto; }

nav.sidebar,
.sidebar {
    position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important;
    width: var(--sidebar-w, 270px) !important; height: 100vh !important;
    background: var(--primary, #0e1c2e) !important;
    border-left: 1px solid rgba(255,255,255,0.05);
    border-right: none;
    z-index: 1000;
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important;
    overflow-y: auto; overflow-x: hidden; box-sizing: border-box !important;
    transition: right .35s cubic-bezier(.4,0,.2,1);
    margin: 0; padding: 0;
}
.sidebar.collapsed { right: calc(-1 * var(--sidebar-w, 270px)) !important; }
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; }

/* تثبيت إضافي بمُحدِّد ID (أعلى أولوية من أي كلاس) لضمان عدم كسر
   الخلفية/الأبعاد من أي تنسيق قديم متبقي في الصفحة مهما كانت خصوصيته */
#sidebar {
    background: var(--primary, #0e1c2e) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
}
#sidebar .menu { background: transparent !important; align-items: stretch !important; }
#sidebar .menu .item { width: auto !important; }

.sidebar .brand {
    padding: 24px 22px 20px;
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: linear-gradient(180deg, rgba(156,122,60,0.07), transparent 70%);
}
.sidebar .brand .mark {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: var(--accent, #9c7a3c);
    position: relative;
}
.sidebar .brand .mark svg { width: 17px; height: 17px; }
.sidebar .brand .mark i { color: #fff; font-size: 15px; }
.sidebar .brand .mark::after {
    content: ''; position: absolute; bottom: -3px; left: -3px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent-light, #c9a86a); border: 2px solid var(--primary, #0e1c2e);
}
.sidebar .brand .text { font-weight: 800; font-size: 0.88rem; color: var(--text-inverse, #f5f3ec); line-height: 1.3; }
.sidebar .brand .text span { display: block; font-size: 0.6rem; font-weight: 600; color: rgba(255,255,255,0.35); margin-top: 2px; }

.sidebar .menu { flex: 1 0 auto; width: 100%; padding: 12px 10px; box-sizing: border-box; }
.sidebar .brand, .sidebar .footer { flex: 0 0 auto; }
.sidebar .menu .label {
    font-size: 0.6rem; color: rgba(255,255,255,0.22);
    text-transform: uppercase; letter-spacing: 1px;
    padding: 16px 10px 6px; font-weight: 700;
}
.sidebar .menu .label:first-child { padding-top: 4px; }

.sidebar .menu .item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--r-sm, 8px);
    color: rgba(255,255,255,0.55); font-weight: 600; font-size: 0.82rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    cursor: pointer; margin-bottom: 2px; position: relative;
    border-inline-end: 3px solid transparent;
}
.sidebar .menu .item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sidebar .menu .item.active {
    background: rgba(156,122,60,0.14); color: var(--text-inverse, #f5f3ec);
    box-shadow: none;
    border-inline-end: 3px solid var(--swatch, var(--accent, #9c7a3c));
}
.sidebar .menu .item i { width: 16px; text-align: center; font-size: 0.86rem; opacity: 0.85; }
.sidebar .menu .item .chip {
    width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; background: var(--swatch, rgba(255,255,255,0.3));
}
.sidebar .menu .item .badge {
    margin-right: auto; font-size: 0.58rem; font-weight: 700;
    padding: 1px 8px; border-radius: 4px;
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.55);
}
.sidebar .menu .item.active .badge { background: var(--swatch, var(--accent, #9c7a3c)); color: #fff; }

.sidebar .footer {
    padding: 14px 18px 20px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.sidebar .footer .user {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar .footer .user .avatar {
    width: 33px;
    height: 33px;
    border-radius: var(--r-sm, 8px);
    background: var(--accent, #9c7a3c);
    color: var(--primary-dark, #08131f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.sidebar .footer .user .info { flex: 1; min-width: 0; }
.sidebar .footer .user .info .name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-inverse, #f5f3ec);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar .footer .user .info .role {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.35);
    margin-top: 1px;
}
.sidebar .footer .logout {
    margin-right: auto;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    transition: .15s;
    cursor: pointer;
    background: transparent;
}
.sidebar .footer .logout:hover {
    color: #e8a09a;
    border-color: var(--oxide, #a63a31);
    background: rgba(173,63,57,0.14);
}

/* ---- دفع محتوى الصفحة بعرض القائمة الجانبية (لأي حاوية رئيسية) ---- */
.rlx-pushed {
    margin-right: var(--sidebar-w, 270px) !important;
    width: calc(100% - var(--sidebar-w, 270px)) !important;
    box-sizing: border-box !important;
    min-width: 0;
    transition: margin-right .35s cubic-bezier(.4,0,.2,1);
}
.rlx-pushed.rlx-collapsed { margin-right: 0 !important; width: 100% !important; }

@media (max-width: 768px) {
    nav.sidebar,
    .sidebar { right: calc(-1 * var(--sidebar-w, 270px)) !important; }
    .sidebar.open { right: 0 !important; }
    .sidebar-overlay { display: block; }
    .rlx-pushed { margin-right: 0 !important; width: 100% !important; }
}

/* ---- إخفاء أي شريط تنقل أفقي قديم داخل الهيدر ----
   بعض الصفحات كان عندها نسخة قديمة من التنقل عبارة عن قائمة أفقية
   داخل الهيدر (<nav> بدون class) بالإضافة للقائمة الجانبية، وده كان
   سبب رئيسي في التعارض البصري بين الصفحات. دلوقتي القائمة الجانبية
   الموحّدة هي مصدر التنقل الوحيد، فبنخفي أي <nav> تاني مش هو القائمة
   الجانبية نفسها. */
nav:not(.sidebar) { display: none !important; }


/* ================================================================
   القائمة المبوّبة (مجموعات قابلة للطي + بحث)
   ================================================================ */
.sidebar .menu-search {
    position: relative; margin: 2px 2px 10px;
}
.sidebar .menu-search i {
    position: absolute; top: 50%; right: 11px; transform: translateY(-50%);
    font-size: 0.72rem; color: rgba(255,255,255,0.35); pointer-events: none;
}
.sidebar .menu-search input {
    width: 100%; padding: 8px 30px 8px 10px; border-radius: var(--r-sm, 8px);
    border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.05);
    color: #fff; font-family: inherit; font-size: 0.76rem; outline: none;
}
.sidebar .menu-search input::placeholder { color: rgba(255,255,255,0.3); }
.sidebar .menu-search input:focus { border-color: var(--accent, #9c7a3c); background: rgba(255,255,255,0.08); }

.sidebar .menu .top-item { margin-bottom: 6px; }

.sidebar .group { margin-bottom: 2px; }
.sidebar .group-head {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border: none; border-radius: var(--r-sm, 8px);
    background: transparent; color: rgba(255,255,255,0.72);
    font-family: inherit; font-weight: 700; font-size: 0.83rem; cursor: pointer;
    text-align: right; transition: background .15s ease, color .15s ease;
}
.sidebar .group-head:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sidebar .group-head .gicon { width: 16px; text-align: center; font-size: 0.88rem; color: var(--accent-light, #c9a86a); }
.sidebar .group-head .glabel { flex: 1; }
.sidebar .group-head .gcount {
    font-size: 0.58rem; font-weight: 700; padding: 1px 7px; border-radius: 10px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4);
}
.sidebar .group-head .chev { font-size: 0.62rem; opacity: 0.5; transition: transform .2s ease; }
.sidebar .group.open > .group-head .chev { transform: rotate(180deg); }
.sidebar .group.open > .group-head { color: #fff; }
.sidebar .group.has-active > .group-head .gcount { background: var(--accent, #9c7a3c); color: #fff; }

.sidebar .group-body {
    display: none; margin: 2px 14px 6px 0; padding-right: 10px;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.sidebar .group.open > .group-body,
.sidebar .menu.searching .group-body { display: block; }
.sidebar .group-body .item { font-size: 0.78rem; padding: 7px 10px; font-weight: 600; }

.sidebar .menu-empty {
    display: none; text-align: center; padding: 18px 6px;
    font-size: 0.74rem; color: rgba(255,255,255,0.35);
}

@media print {
    .sidebar, .sidebar-overlay, #rlxFabToggle { display: none !important; }
    .rlx-pushed { margin-right: 0 !important; }
}


/* ---- مقبض طي/فتح القائمة (يظهر في كل الصفحات) ---- */
#rlxSidebarHandle {
    position: fixed; top: 50%; right: var(--sidebar-w, 270px); transform: translateY(-50%);
    width: 20px; height: 56px; padding: 0; z-index: 1002;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary, #0e1c2e); color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.12); border-right: none;
    border-radius: 10px 0 0 10px; cursor: pointer; font-size: 0.7rem;
    box-shadow: -2px 0 8px rgba(0,0,0,0.12);
    transition: right .35s cubic-bezier(.4,0,.2,1), background .15s ease, color .15s ease;
}
#rlxSidebarHandle:hover { background: var(--accent, #9c7a3c); color: #fff; }
#rlxSidebarHandle i { transition: transform .35s ease; }
#rlxSidebarHandle.is-collapsed { right: 0; }
#rlxSidebarHandle.is-collapsed i { transform: rotate(180deg); }
.rlx-no-anim .sidebar, .rlx-no-anim .rlx-pushed, .rlx-no-anim #rlxSidebarHandle { transition: none !important; }
@media (max-width: 768px) {
    #rlxSidebarHandle { right: 0; border-radius: 10px 0 0 10px; }
    #rlxSidebarHandle i { transform: rotate(180deg); }
}
@media print { #rlxSidebarHandle { display: none !important; } }

/* ---- وضوح خطوط القائمة الجانبية ---- */
.sidebar .menu .item { color: rgba(255,255,255,0.82); font-size: 0.9rem; }
.sidebar .group-body .item { font-size: 0.86rem; color: rgba(255,255,255,0.8); }
.sidebar .group-head { color: #fff; font-size: 0.93rem; }
.sidebar .group-head .gcount { color: rgba(255,255,255,0.75); }
.sidebar .brand .text span { color: rgba(255,255,255,0.6); font-size: 0.7rem; }
.sidebar .footer .user .info .role { color: rgba(255,255,255,0.6); font-size: 0.72rem; }
.sidebar .menu-search input { font-size: 0.85rem; }
.sidebar .menu-search input::placeholder { color: rgba(255,255,255,0.55); }