/* ============================================================================
   dashboard-layout.css — تخطيط اللوحات الثلاث (الإدارة، المالك، الشركة)
   ----------------------------------------------------------------------------
   شريط علوي كحلي بعرض الشاشة كله وفيه هوية مدعوم، كما كان قبل إعادة
   التصميم؛ وتحته قائمة جانبية رأسية ثابتة يمين الشاشة (RTL) قابلة للطي؛
   والمحتوى يسارها ويأخذ باقي العرض.

   قاعدة صارمة: لا لون جديد. كل لون هنا إمّا رمز موجود (‎--color-*) من
   styles.css (الإدارة) أو customer-dashboard.css (المالك والشركة)، أو أبيض
   شفاف من نفس القيم المستعملة أصلًا في القائمة الجانبية (admin-style.css)،
   أو مشتق من ‎--color-accent عبر color-mix كما في design-tokens.css.
   فكل لوحة تحتفظ بألوانها وثيمها الليلي والنهاري كما هي.

   النطاق: body.dash-layout فقط، وخارج وضع التضمين في مساحة العمل
   (html.ws-embedded يخفي القائمة والشريط أصلًا). البادئة
   ‎:root:not(.ws-embedded) body.dash-layout‎ تحقق الأمرين، وتعلو في
   الأولوية على قواعد body.customer-shell فلا حاجة لـ!important.

   تحت 1100px (نفس نقطة القطع في customer-dashboard.css) تعود القائمة درجًا
   يُفتح بزر القائمة كما كانت، بنفس ألوانها الجديدة.
   ========================================================================== */

/* ==================== 1) الرموز ==================== */
:root:not(.ws-embedded) body.dash-layout {
    --dash-sidebar-w: 280px;
    --dash-sidebar-w-collapsed: 76px;
    --dash-sidebar-current: 0px;
    --dash-gap: .5rem;
    --dash-header-h: 3.5rem;
    --dash-top: var(--dash-header-h);
    --dash-radius: 1rem;
    --dash-content-max: 1560px;

    /* ألوان القائمة: ألوان كل لوحة كما كانت قبل إعادة التصميم، بلا تغيير.
       الإدارة: ‎--color-sidebar-bg‎ الكحلي بنص أبيض وتمييز أزرق شفاف (admin-style.css).
       المالك والشركة: رموز القائمة في customer-dashboard.css (بيضاء نهارًا) — تحت. */
    --dash-side-bg: var(--color-sidebar-bg);
    --dash-side-text: rgba(255, 255, 255, .8);
    --dash-side-text-strong: #fff;
    --dash-side-muted: rgba(255, 255, 255, .55);
    --dash-side-hover: rgba(255, 255, 255, .06);
    --dash-side-border: rgba(255, 255, 255, .1);
    --dash-side-active-bg: rgba(0, 119, 204, .18);
    --dash-side-active-text: #fff;
    --dash-side-active-icon: currentColor;
    --dash-side-indicator: var(--color-accent);
    --sidebar-current: var(--dash-sidebar-current);

    box-sizing: border-box;
    padding-top: var(--dash-top);
}

:root:not(.ws-embedded) body.dash-layout.customer-shell {
    --dash-side-text: var(--color-sidebar-text);
    --dash-side-text-strong: var(--color-sidebar-text-active);
    --dash-side-muted: var(--color-text-3);
    --dash-side-hover: var(--color-sidebar-hover);
    --dash-side-border: var(--color-sidebar-border);
    --dash-side-active-bg: var(--color-sidebar-active-bg);
    --dash-side-active-text: var(--color-sidebar-text-active);
    --dash-side-indicator: var(--color-sidebar-active);
}

/* لوحة الشركة: العنصر النشط بلون التمييز وأيقونته بالأزرق، كما كان (company-dashboard.css) */
:root:not(.ws-embedded) body.dash-layout.company-app {
    --dash-side-active-text: var(--on-accent);
    --dash-side-active-icon: var(--color-accent);
}

@media (min-width: 1100px) {
    :root:not(.ws-embedded) body.dash-layout {
        --dash-gap: 1rem;
        --dash-sidebar-current: var(--dash-sidebar-w);
        padding-right: var(--dash-sidebar-current);
    }

    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout {
        --dash-sidebar-current: var(--dash-sidebar-w-collapsed);
    }
}

/* ==================== 2) الشريط العلوي ==================== */
/* شريط كحلي ثابت بعرض الشاشة كله، والقائمة الجانبية تحته — كما كان قبل
   إعادة التصميم. الخلفية ‎--color-primary‎ ونص الأزرار أبيض من قواعد كل لوحة
   نفسها (admin-style.css للإدارة، customer-dashboard.css للمالك والشركة) —
   هنا الموضع والارتفاع فقط. */
:root:not(.ws-embedded) body.dash-layout .admin-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;
    background: var(--color-primary);
    border-bottom: 1px solid var(--color-nav-border, rgba(255, 255, 255, .1));
    box-shadow: var(--shadow-sm);
}

:root:not(.ws-embedded) body.dash-layout .nav-container {
    box-sizing: border-box;
    max-width: none;
    height: var(--dash-header-h);
    min-height: 0;
    margin: 0;
    padding: 0 1rem;
    gap: .75rem;
    flex-wrap: nowrap;
}

/* زر الحساب: صورة رمزية + اسم المستخدم (يُملأ من نفس مصدر الهوية) */
:root:not(.ws-embedded) body.dash-layout .admin-nav .nav-user-btn {
    width: auto;
    gap: .6rem;
    padding: 0 .3rem 0 .75rem;
    border-radius: var(--r-pill, 99px);
}

.nav-user-meta {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    line-height: 1.3;
    min-width: 0;
    max-width: 11rem;
    text-align: start;
}

.nav-user-name {
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    color: var(--color-nav-text, #fff);
    unicode-bidi: plaintext; /* الأسماء والبريد قد تكون إنجليزية داخل واجهة عربية */
}

.nav-user-greeting {
    font-size: .68rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-nav-text-dim, rgba(255, 255, 255, .68));
}

:root:not(.ws-embedded) body.dash-layout .nav-user-meta:has(.nav-user-name:not(:empty)) { display: flex; }

@media (max-width: 700px) {
    :root:not(.ws-embedded) body.dash-layout .nav-user-meta { display: none !important; }
    :root:not(.ws-embedded) body.dash-layout .admin-nav .nav-user-btn { width: 2.5rem; padding: 0; border-radius: .75rem; }
}

/* البحث على الجوال: طبقة تحت الشريط (بلونها الكحلي كما كانت) */
@media (max-width: 768px) {
    :root:not(.ws-embedded) body.dash-layout .portal-search { top: var(--dash-top); }
}

/* الهوية في الشريط دائمًا كما كانت؛ زر فتح القائمة للدرج وحده (تحت 1100px) */
@media (min-width: 1100px) {
    :root:not(.ws-embedded) body.dash-layout .admin-nav .menu-toggle { display: none !important; }
}

@media (max-width: 480px) {
    :root:not(.ws-embedded) body.dash-layout .nav-container { gap: .35rem; padding: 0 .5rem; }
}

/* ==================== 3) القائمة الجانبية ==================== */
:root:not(.ws-embedded) body.dash-layout .sidebar {
    background: var(--dash-side-bg);
    color: var(--dash-side-text);
    border: 0;
    border-left: 1px solid var(--dash-side-border);
}

@media (min-width: 1100px) {
    :root:not(.ws-embedded) body.dash-layout .sidebar {
        position: fixed;
        top: var(--dash-header-h);
        right: 0;
        height: calc(100vh - var(--dash-header-h));
        height: calc(100dvh - var(--dash-header-h));
        width: var(--dash-sidebar-current);
        max-width: none;
        z-index: 1001;
        box-shadow: none;
        transition: width var(--dur-base, .25s) var(--ease-out, ease);
    }

    :root:not(.ws-embedded) body.dash-layout .sidebar-overlay,
    :root:not(.ws-embedded) body.dash-layout .sidebar-close { display: none !important; }
}

:root:not(.ws-embedded) body.dash-layout .sidebar-header {
    box-sizing: border-box;
    min-height: var(--dash-top);
    padding: var(--dash-gap) 1rem;
    gap: .5rem;
    border-bottom: 1px solid var(--dash-side-border);
    color: var(--dash-side-text-strong);
}

:root:not(.ws-embedded) body.dash-layout .sidebar-close {
    color: var(--dash-side-text);
    background: transparent;
}

:root:not(.ws-embedded) body.dash-layout .sidebar-close:hover { background: var(--dash-side-hover); }

/* ---------- الهوية ---------- */
/* أنماط .dash-brand الأساسية في admin-style.css: القائمة نفسها تُركَّب أيضًا في
   صفحات لا تحمل هذا الملف (المنتدى والمجتمع لحسابات الفريق).
   على الشاشات الكبيرة الشعار في الشريط العلوي، فرأس القائمة يحمل اسم اللوحة
   وحده («لوحة المالك» …) كما كان؛ الشعار يبقى في الدرج على الجوال. */
@media (min-width: 1100px) {
    :root:not(.ws-embedded) body.dash-layout .sidebar-header { min-height: 0; }
    :root:not(.ws-embedded) body.dash-layout .dash-brand-logo,
    :root:not(.ws-embedded) body.dash-layout .dash-brand-name { display: none; }
    :root:not(.ws-embedded) body.dash-layout .dash-brand-context {
        font-size: var(--fs-md, 1rem);
        font-weight: 800;
        opacity: 1;
    }
}

/* ---------- زر الطي (الشاشات الكبيرة فقط) ---------- */
:root:not(.ws-embedded) body.dash-layout #sidebarCollapseBtn { display: none; }

@media (min-width: 1100px) {
    :root:not(.ws-embedded) body.dash-layout #sidebarCollapseBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        flex-shrink: 0;
        border-radius: .6rem;
        border: 1px solid var(--dash-side-border);
        background: transparent;
        color: var(--dash-side-text);
        cursor: pointer;
        transition: background var(--dur-fast, .15s) ease, color var(--dur-fast, .15s) ease;
    }

    :root:not(.ws-embedded) body.dash-layout #sidebarCollapseBtn:hover {
        background: var(--dash-side-hover);
        color: var(--dash-side-text-strong);
    }

    :root:not(.ws-embedded) body.dash-layout #sidebarCollapseBtn:focus-visible {
        outline: 2px solid var(--dash-side-text-strong);
        outline-offset: 2px;
    }

    :root:not(.ws-embedded) body.dash-layout #sidebarCollapseBtn svg { transition: transform var(--dur-base, .25s) ease; }
    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout #sidebarCollapseBtn svg { transform: rotate(180deg); }
}

/* ---------- العناصر ---------- */
:root:not(.ws-embedded) body.dash-layout .sidebar-menu {
    padding: .75rem .75rem 1rem;
    scrollbar-color: var(--dash-side-border) transparent;
}

:root:not(.ws-embedded) body.dash-layout .sidebar-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    box-sizing: border-box;
    min-height: 2.75rem;
    margin: 2px 0;
    padding: .6rem .85rem;
    border: 0;
    border-radius: .75rem;
    color: var(--dash-side-text);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dur-fast, .15s) ease, color var(--dur-fast, .15s) ease;
}

:root:not(.ws-embedded) body.dash-layout .sidebar-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: inherit;
}

:root:not(.ws-embedded) body.dash-layout .sidebar-item:hover {
    background: var(--dash-side-hover);
    color: var(--dash-side-text-strong);
}

:root:not(.ws-embedded) body.dash-layout .sidebar-item.active {
    background: var(--dash-side-active-bg);
    color: var(--dash-side-active-text);
    font-weight: 700;
    /* شريط التمييز الأزرق على حافة البداية، كما كان (حدّ أيمن 4px) — ظلّ داخلي
       بدل الحدّ ليتبع الزوايا المستديرة */
    box-shadow: inset -4px 0 0 var(--dash-side-indicator);
}

:root:not(.ws-embedded) body.dash-layout .sidebar-item.active svg { color: var(--dash-side-active-icon); }

:root:not(.ws-embedded) body.dash-layout .sidebar-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

/* تسجيل الخروج: أحمر اللوحة نفسها (‎--color-danger‎)؛ زر الإدارة يحمل لونه
   المضمّن ‎#ff6b6b‎ كما كان */
:root:not(.ws-embedded) body.dash-layout .sidebar-item.is-danger,
:root:not(.ws-embedded) body.dash-layout .sidebar-item.is-danger:hover { color: var(--color-danger); }

:root:not(.ws-embedded) body.dash-layout .sidebar-footer {
    padding: .75rem;
    border-top: 1px solid var(--dash-side-border);
    flex-shrink: 0;
}

/* ---------- المجموعات القابلة للطي ---------- */
:root:not(.ws-embedded) body.dash-layout .sidebar-group + .sidebar-group,
:root:not(.ws-embedded) body.dash-layout .sidebar-item + .sidebar-group { margin-top: .5rem; }

:root:not(.ws-embedded) body.dash-layout .sidebar-group-toggle {
    color: var(--dash-side-muted);
    padding: .45rem .85rem .3rem;
}

:root:not(.ws-embedded) body.dash-layout .sidebar-group-toggle:hover { color: var(--dash-side-text-strong); }

:root:not(.ws-embedded) body.dash-layout .sidebar-group-toggle:focus-visible {
    outline: 2px solid var(--dash-side-text-strong);
    outline-offset: -2px;
}

/* العنوان داخل الزر يرث لونه ومقاسه من الزر (قواعد اللوحات القديمة له كانت
   لعنوان منفرد على خلفية فاتحة) */
:root:not(.ws-embedded) body.dash-layout .sidebar-group-toggle .sidebar-group-label {
    padding: 0;
    margin: 0;
    border: 0;
    width: auto;
    color: inherit;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0;
}

/* ==================== 4) المحتوى ==================== */
:root:not(.ws-embedded) body.dash-layout .admin-main {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--dash-content-max) + var(--dash-gap) * 3);
    margin: 0 auto;
    padding: 1.25rem calc(var(--dash-gap) * 1.5) 2.5rem;
    transition: none;
}

/* مساحة العمل تملأ النافذة بالضبط: الحشوة جزء من الارتفاع لا إضافة عليه */
:root:not(.ws-embedded) body.dash-layout.ws-page { box-sizing: border-box; }

/* ==================== 5) الوضع المطوي: أيقونات فقط ==================== */
@media (min-width: 1100px) {
    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout .sidebar-header {
        flex-direction: column;
        justify-content: center;
        padding-inline: 0;
    }

    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout .dash-brand { display: none; }

    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout .sidebar-menu { padding-inline: .6rem; }

    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout .sidebar-item {
        justify-content: center;
        padding-inline: 0;
        position: relative;
    }

    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout .sidebar-item > span:not(.nav-count) {
        /* الاسم يختفي بصريًا ويبقى لقارئ الشاشة */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout .sidebar-item .nav-count {
        position: absolute;
        top: .3rem;
        left: .55rem;
        margin: 0;
        min-width: .95rem;
        height: .95rem;
        padding: 0 .2rem;
        font-size: .58rem;
    }

    /* المجموعات: لا عناوين ولا طي — كل الأيقونات ظاهرة، بفاصل رفيع بين المجموعات */
    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout .sidebar-group-toggle { display: none; }
    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout .sidebar-group.is-closed > .sidebar-group-items { display: block; }
    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout .sidebar-group {
        margin-top: .4rem;
        padding-top: .4rem;
        border-top: 1px solid var(--dash-side-border);
    }

    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout .sidebar-footer { padding-inline: .6rem; }

    /* تلميح القشرة القديم (‎::after‎) يُقصّ داخل حاوية التمرير؛ البديل .dash-tooltip تحت */
    :root[data-sidebar='collapsed']:not(.ws-embedded) body.dash-layout .sidebar-item::after { content: none; }
}

/* تلميح اسم العنصر في الوضع المطوي (dashboard-nav.js → initCollapsedTooltips):
   عنصر واحد ثابت الموضع خارج القائمة، فلا تقصّه حاوية التمرير. */
.dash-tooltip {
    position: fixed;
    z-index: 2100;
    transform: translateY(-50%);
    padding: .35rem .65rem;
    border: 1px solid var(--color-border);
    border-radius: .5rem;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

.dash-tooltip[hidden] { display: none; }

/* ==================== 6) تقليل الحركة ==================== */
@media (prefers-reduced-motion: reduce) {
    :root:not(.ws-embedded) body.dash-layout .sidebar,
    :root:not(.ws-embedded) body.dash-layout .admin-nav,
    :root:not(.ws-embedded) body.dash-layout .sidebar-item,
    :root:not(.ws-embedded) body.dash-layout #sidebarCollapseBtn svg { transition: none !important; }
}