html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ===== عناصر القائمة الجانبية (Doro Platform) =====
   عمداً في ملف عام غير معزول (app.css) لا في NavMenu.razor.css: عناصر التنقّل الفعلية
   تُرسَم من مكوّن فرعي (NavItem.razor)، وعزل CSS الخاص بـ Blazor (Scoped CSS) لا يُطبِّق
   أنماط ملف المكوّن الأب تلقائياً على مخرجات مكوّن ابن — فلازم تكون هذه الأنماط المشتركة عامة.

   قيد حرج اكتُشف بمراجعة حية: ".nav-item"/".nav-link"/".nav-icon"/".nav-label" أسماء أصناف تقليدية
   بنمط Bootstrap نفسه — بلا بادئة ".nav-scrollable" (حاوية القائمة الجانبية فعلياً)، كانت هذه القواعد
   "تتسرّب" لأي تبويبات Bootstrap عادية بمحتوى الصفحات (<ul class="nav nav-tabs"><li class="nav-item">
   <a class="nav-link">...) المستخدَمة بـ11 صفحة على الأقل (الإعدادات، التقارير، الرواتب...)، فتفرض عليها
   تنسيق الشريط الجانبي المظلم (display:flex بعرض كامل وارتفاع 2.6rem ولون فاتح على خلفية بيضاء) فتظهر
   متراكبة تقريباً بلا تباين — بالضبط الخلل الذي أبلغ عنه صاحب المشروع. الإصلاح: تقييد كل هذه القواعد
   بحاوية القائمة الجانبية فعلياً. */
.nav-scrollable .nav-item {
    font-size: 0.88rem;
    padding: 0.1rem 0.5rem;
}

.nav-scrollable .nav-item .nav-link,
.nav-scrollable .nav-item button.nav-link {
    color: #cfd3dc;
    background: none;
    border: none;
    border-radius: 8px;
    height: 2.6rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.65rem;
    width: 100%;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    font: inherit;
    text-align: right;
}

.sidebar-inner:has(.nav-collapse-input:checked) .nav-scrollable .nav-item .nav-link,
.sidebar-inner:has(.nav-collapse-input:checked) .nav-scrollable .nav-item button.nav-link {
    justify-content: center;
    padding: 0;
}

.nav-scrollable .nav-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

.nav-scrollable .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-inner:has(.nav-collapse-input:checked) .nav-scrollable .nav-label {
    display: none;
}

.nav-scrollable .nav-item a.active {
    background-color: var(--nav-active-bg);
    color: white;
    box-shadow: inset 3px 0 0 var(--nav-accent);
}

.nav-scrollable .nav-item .nav-link:hover,
.nav-scrollable .nav-item button.nav-link:hover {
    background-color: var(--nav-hover-bg);
    color: white;
}

/* القسم الحالي لمجموعة قابلة للطي (NavGroup): يُشتق من المسار عبر صنف is-current-section محسوب سيرفريًا
   (DefaultExpanded)، لا من حالة فتح/طي القائمة الطافية — يبقى ظاهرًا حتى بعد إغلاقها. نفس متغيّرات
   a.active أعلاه عمدًا (نفس المعنى: "أنت هنا حاليًا")، لا قيم منفصلة. */
.nav-scrollable .nav-group-row.is-current-section > .nav-link {
    background-color: var(--nav-active-bg);
    color: white;
    box-shadow: inset 3px 0 0 var(--nav-accent);
}

/* تابلت: الشريط الجانبي مطوي (أيقونات فقط) افتراضياً — نفس مظهر الطي اليدوي، بلا حاجة لأي حالة C# جديدة */
@media (min-width: 768px) and (max-width: 1024.98px) {
    .sidebar-inner .nav-scrollable .nav-item .nav-link,
    .sidebar-inner .nav-scrollable .nav-item button.nav-link {
        justify-content: center;
        padding: 0;
    }

    .sidebar-inner .nav-scrollable .nav-label {
        display: none;
    }
}

/* جوال: تنسيق عناصر التنقّل (NavItem — مكوّن ابن، يبقى تصميمه هنا حسب القاعدة المعتادة) لتُعرض كشريط
   تبويبات سفلي أفقي بدل قائمة عمودية. أما ".sidebar" و".sidebar-inner"/".brand-row"/".nav-scrollable"
   (عناصر MainLayout وNavMenu نفسيهما) فمكانها ملفَّي CSS المعزولين الخاصَّين بهما — كلاهما لهما فعلياً
   ملف .razor.css (اكتُشف أثناء التصحيح: NavMenu.razor.css موجود فعلاً خلافاً لتعليق قديم هنا كان خاطئاً)،
   وأي تجاوز من هذا الملف العام يخسر التنافس أمام محدِّد [b-xxxxx] الأعلى تخصيصاً بغضّ النظر عن ترتيب @media. */
@media (max-width: 767.98px) {
    /* لا نُخفي أي عنصر (حتى الحساب/تسجيل الخروج) لتفادي فقدان الوصول إليه على الجوال —
       الشريط قابل للتمرير أفقياً فيتّسع لكل العناصر بلا حذف وظيفي. */
    .nav-scrollable .nav-spacer {
        display: none;
    }

    .nav-scrollable .nav-item {
        flex: 0 0 auto;
        padding: 0;
        font-size: 0.65rem;
    }

    .nav-scrollable .nav-item .nav-link,
    .nav-scrollable .nav-item button.nav-link {
        flex-direction: column;
        height: auto;
        min-width: 60px;
        padding: 0.35rem 0.2rem;
        gap: 0.15rem;
        justify-content: center;
    }

    .nav-scrollable .nav-label {
        display: block;
        font-size: 0.62rem;
    }

    .nav-scrollable .nav-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* أزرار الأيقونات المفردة بالشريط العلوي (الإشعارات، الذكاء الاصطناعي) — تُعرَّف هنا بـ app.css العام
   لا بملف .razor.css معزول، لأن أكثر من مكوّن (NotificationBell و AiAssistantWidget) يستخدم هذا الصنف
   نفسه؛ وعزل Blazor لأنماط .razor.css لا يمتد بين مكوّنات مختلفة تتشارك اسم صنف فقط — بدون هذا التعريف
   العام، أي مكوّن غير الذي "يملك" الملف المعزول الأصلي يقع على تنسيق الزر الافتراضي للمتصفح (حدود وظل عند
   التركيز)، وهذا بالضبط ما كان يظهر كإطار/تظليل غير مقصود على أيقونة الذكاء الاصطناعي. */
.notif-bell-wrapper {
    position: relative;
    display: inline-flex;
}

.notif-bell-btn {
    background: none;
    border: none;
    color: #495057;
    padding: 0.4rem;
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.notif-bell-btn:focus {
    outline: none;
    box-shadow: none;
}

/* ===== بطاقة صفحات الحساب العامة (دخول/تسجيل/استعادة كلمة مرور/تأكيد بريد...) =====
   مشتركة بين عدة مكوّنات .razor مختلفة تحت Components/Account/Pages — يجب أن تبقى هنا لا بملف .razor.css
   معزول خاص بأي منها، لأن عزل Blazor لا يمتد من مكوّن لآخر (نفس القاعدة الموثَّقة بـCLAUDE.md). */
.auth-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(5, 39, 103, 0.15);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
}

.auth-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-logo {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    margin-bottom: 0.75rem;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, #052767, #3a0647);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-subtitle {
    color: #6c757d;
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

.auth-submit {
    margin-top: 0.5rem;
    background: linear-gradient(135deg, #052767, #3a0647);
    border: none;
}

    .auth-submit:hover, .auth-submit:focus {
        background: linear-gradient(135deg, #041d52, #2e0538);
    }

.auth-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-size: 0.9rem;
}

    .auth-links a {
        color: #052767;
        text-decoration: none;
    }

        .auth-links a:hover {
            text-decoration: underline;
        }

.auth-page-title {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
    color: #052767;
    margin-bottom: 1rem;
}

/* ===== مجموعات القائمة الجانبية القابلة للطي (NavGroup.razor) =====
   عامة بالعمد وليست بملف .razor.css معزول خاص بـ NavGroup: هذه القواعد تحتاج التفاعل مع .sidebar-inner/
   .nav-scrollable (عناصر NavMenu.razor، مكوّن مختلف تماماً) — وعزل Blazor لا يمتد بين مكوّنين مختلفين
   (نفس القاعدة الموثَّقة أعلاه وبـCLAUDE.md). محاولة أولى استخدمت ":global(...)" لتجاوز هذا القيد فشلت
   بصمت: هذا ليس بناءً مدعوماً فعلياً من عزل CSS بـBlazor، فتُرِك نص ":global(...)" الحرفي غير المُزال في
   الإخراج النهائي، فرفضه متصفح المستخدم كمحدِّد غير صالح وتجاهل القاعدة بأكملها. */
.nav-group {
    position: relative;
}

.nav-group-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.nav-group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline-end: 0.4rem;
}

.nav-group-row .nav-link {
    flex: 1 1 auto;
    min-width: 0;
}

.nav-group-chevron {
    /* بلا هذا التصفير: العنصر أصبح <button> حقيقي (كان <label> سابقًا)، فيظهر مظهر الزر الافتراضي
       الخام للمتصفح (خلفية رمادية فاتحة + حد "outset" أسود بارز) — اكتُشف فعليًا من لقطة شاشة المستخدم
       (مربع رمادي حول السهم) بعد تأكّده أن تحديث الكاش ليس السبب. .nav-link حصل على نفس التصفير مسبقًا
       ضمن قاعدته العامة، لكن .nav-group-chevron قاعدة منفصلة كليًا فاتها هذا عند تحويلها لزر حقيقي. */
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.65;
    border-radius: 6px;
    box-sizing: border-box;
    /* لون صريح لا موروث: .nav-group-row (الأب المباشر) لا يضبط color إطلاقًا — اللون الفاتح #cfd3dc
       معرَّف فقط على .nav-link نفسه (بقاعدة app.css العامة)، لا على الحاوية، فالسهم كعنصر شقيق لـ.nav-link
       (لا حفيد له) لم يكن يرث ذلك اللون قط، بل يرث تسلسليًا حتى body{color:#212529} من Bootstrap — سهم
       شبه أسود على خلفية داكنة، منخفض التباين لدرجة يسهل تفويتها بالعين المجرّدة. نفس قيمة .nav-link تمامًا. */
    color: #cfd3dc;
}

.nav-group-chevron:hover {
    opacity: 1;
    background: var(--nav-hover-bg);
}

.nav-group-chevron svg {
    width: 15px;
    height: 15px;
    transition: transform 0.15s ease;
}

.nav-submenu {
    display: none;
    flex-direction: column;
}

/* تمييز بصري للمستوى الفرعي: لون أفتح (أخفت) وخط أصغر فعليًا من الرابط الرئيسي (0.88rem) — كان هنا
   خطأ معكوس (0.92rem، أكبر لا أصغر)، مصحَّح الآن. padding-inline-start مخفَّضة من 1.6rem: كانت مخصَّصة
   لمسافة بادئة ضمن عمود القائمة نفسه (الوضع القديم داخل التدفّق)؛ الآن القائمة لوحة طافية مستقلة، فتكفي
   مسافة صغيرة تفسح مجالاً للخط العمودي الرابط أدناه. */
.nav-submenu .nav-item {
    padding-inline-start: 0.9rem;
}

/* بادئة .nav-scrollable .nav-group هنا ضرورية لا تجميلية: القاعدة الأساسية أعلاه
   (.nav-scrollable .nav-item .nav-link) تضبط font: inherit كخاصية مختصرة — تلغي أي font-size لاحقة أقل
   تخصيصًا (اكتُشف هذا فعليًا بالمتصفح: 0.82rem لم يكن يُطبَّق إطلاقًا بمحدِّد .nav-submenu .nav-link وحده
   لأن تخصيصه [0,2,0] أقل من القاعدة الأساسية [0,3,0]، فتفوز الأخيرة وتُعيد الخط لحجم الأب 0.88rem). */
.nav-scrollable .nav-group .nav-submenu .nav-link {
    font-size: 0.82rem;
    color: var(--nav-sublevel-color);
}

.nav-scrollable .nav-group .nav-submenu .nav-link:hover,
.nav-scrollable .nav-group .nav-submenu .nav-link.active {
    color: white;
}

/* خط عمودي جانبي يربط عناصر المستوى الفرعي بصريًا (متطلَّب أصلي) — على .nav-submenu نفسها (لا كل عنصر
   على حدة) كي يبدو خطًا متصلاً واحدًا لا شرطات منفصلة. */
.nav-submenu {
    position: relative;
}

.nav-submenu::before {
    content: "";
    position: absolute;
    inset-inline-start: 1.05rem;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.nav-group-toggle:checked ~ .nav-submenu {
    display: flex;
}

.nav-group-toggle:checked ~ .nav-group-row .nav-group-chevron svg {
    transform: rotate(180deg);
}

/* الحالة الافتراضية (سطح مكتب عريض، غير مطوي، ليست تابلت): القائمة الفرعية تطفو أسفل الرابط الأب مباشرة
   بدل الدخول في تدفّق الصفحة — لا تحجز أي مساحة، فلا إزاحة عرض/ارتفاع مهما فُتحت (مؤكَّد رقميًا، راجع
   القياسات المرفقة). display:flex هنا غير مشروط بـ:checked عمدًا (خلافاً للقاعدة الأساسية أعلاه) كي يبقى
   العنصر مُخطَّطًا دومًا فتعمل حركة opacity/transform الانتقالية بدل قفزة display المفاجئة السابقة —
   visibility بتأخير 0.15s يمنع وصول لوحة المفاتيح (Tab) للروابط المخفية بصريًا حين تكون مغلقة.
   max-height تُضبط ديناميكيًا (NavMenu.razor <script>) بارتفاع المساحة المتبقية فعليًا أسفل الرابط ضمن
   الجزء المرئي من .nav-scrollable، فلا تحتاج overflow:visible على الحاوية إطلاقًا؛ overflow-y:auto هنا
   يمنحها تمريرًا داخليًا خاصًا بها لو تجاوز محتواها تلك المساحة (بدل قصّها بصمت).

   محدَّدة بـ"1025px فأعلى + استثناء الطي اليدوي" لا "768px فأعلى" وحدها بعد اكتشاف فعلي بالمتصفح: min-width
   وحدها كانت تتقاطع أيضًا مع نطاق التابلت (768-1024.98px) وحالة الطي اليدوي (:has)، وبما أن قواعدهما القديمة
   أدناه لا تُعرِّف max-height/opacity/visibility/transform/transition إطلاقاً، كانت خصائصي الجديدة "تتسرّب"
   إليهما بلا أي تعارض يمنعها (لا تجاوزها خاصية بخاصية) — فتقصف القائمة الفرعية هناك لارتفاع 0 فعليًا رغم
   ظهورها checked. الاستبعاد بمحدِّد (:not(:has(...))) + مدى @media يمنع أي تسرّب من جذوره، بدل تصحيح كل
   خاصية متسرِّبة على حدة بقواعد التابلت/الطي القديمة (أسهل صيانة وأقل عرضة لتكرار نفس الخطأ مستقبلاً). */
@media (min-width: 1025px) {
    .sidebar-inner:not(:has(.nav-collapse-input:checked)) .nav-submenu {
        display: flex;
        position: absolute;
        inset-inline: 0.4rem;
        top: 100%;
        margin-top: 0.15rem;
        /* لون محايد داكن (لا أزرق ولا أرجواني) وأغمق ملحوظًا من طرَفي تدرّج .sidebar
           (linear-gradient من #052767 أعلى إلى #3a0647 عند 70%) عمدًا — لا مجرد حدّ فاتح فقط: تعليق
           المستخدم "الألوان غير مميزة عن باقي القائمة" بعد إضافة الحدّ يعني أن التقارب اللوني بالخلفية
           نفسها (لا فقط غياب حافة) هو ما يُفقد اللوحة تمايزها كسطح منفصل — لون #1a1a3d السابق قريب
           إضاءةً من التدرّج عند الأعلى تحديدًا فيبدو "امتدادًا" له لا بطاقة منبثقة عنه. #12121a أغمق
           بوضوح من كلا طرفَي التدرّج (يتباين بالإضاءة لا فقط بحدّ رفيع)، فيقرأ كسطح مرتفع مستقل بصريًا
           أينما ظهر بالقائمة. */
        background: #12121a;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
        padding: 0.3rem;
        z-index: 50;
        max-height: 0;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    }

    .sidebar-inner:not(:has(.nav-collapse-input:checked)) .nav-group-toggle:checked ~ .nav-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
        /* max-height الفعلية تُضبط عبر inline style من JS عند الفتح (تعتمد على موضع الرابط، لا يمكن معرفتها
           بـCSS الساكن وحده) — max-height:0 بالحالة المغلقة أعلاه احتياط إضافي فقط (العنصر مخفي أصلاً بـ
           opacity/visibility، فلا يظهر أثره) كي لا يُحتسب أي ارتفاع له في القياسات قبل تشغيل JS. */
    }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    .sidebar-inner:not(:has(.nav-collapse-input:checked)) .nav-submenu,
    .sidebar-inner:not(:has(.nav-collapse-input:checked)) .nav-group-toggle:checked ~ .nav-submenu {
        transition-duration: 0s;
    }
}

/* الشريط المطوي لأيقونات فقط (طي يدوي بسطح المكتب، أو تلقائياً بعرض التابلت): لا مساحة لعرض قائمة فرعية
   ضمن تدفّق الصفحة أصلاً (لا نص أساساً بجوار الأيقونات) — تنبثق بدلاً من ذلك كقائمة عائمة إلى جانب
   الشريط (يساراً، لأن الشريط بواجهة RTL يقع على يمين الشاشة) بدل الاختفاء أو الظهور الدائم القسري. */
.sidebar-inner:has(.nav-collapse-input:checked) .nav-submenu {
    position: absolute;
    top: 0;
    right: 100%;
    margin-inline-end: 0.35rem;
    min-width: 210px;
    background: #1a1a3d;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    padding: 0.35rem;
    z-index: 60;
}

.sidebar-inner:has(.nav-collapse-input:checked) .nav-submenu .nav-item {
    padding-inline-start: 0;
}

.sidebar-inner:has(.nav-collapse-input:checked) .nav-submenu .nav-label {
    display: inline;
}

@media (min-width: 768px) and (max-width: 1024.98px) {
    .nav-submenu {
        position: absolute;
        top: 0;
        right: 100%;
        margin-inline-end: 0.35rem;
        min-width: 210px;
        background: #1a1a3d;
        border-radius: 8px;
        box-shadow: 0 6px 24px rgba(0,0,0,0.45);
        padding: 0.35rem;
        z-index: 60;
    }

    .nav-submenu .nav-item {
        padding-inline-start: 0;
    }

    .nav-submenu .nav-link {
        justify-content: flex-start !important;
        padding: 0 0.65rem !important;
    }

    .nav-submenu .nav-label {
        display: inline !important;
    }
}

/* جوال (شريط تبويبات سفلي أفقي): تبقى مسطَّحة بلا أكورديون عمداً — مساحة اللمس والتخطيط الأفقي
   لا يتّسعان لقائمة عائمة موثوقة بنفس جودة سطح المكتب، وهذا شريط مضغوط أصلاً (أيقونات صغيرة بلا
   نص طويل)، فأثر التجميع على "كثرة الأزرار" هنا أقل أهمية منه بالعرض الكامل بسطح المكتب. */
@media (max-width: 767.98px) {
    .nav-group {
        display: contents;
    }

    .nav-group-chevron {
        display: none;
    }

    .nav-submenu {
        display: flex;
        flex-direction: row;
    }

    .nav-submenu .nav-item {
        padding-inline-start: 0.5rem;
    }
}