/* ==========================================================================
   zadbyan-overrides.css
   --------------------------------------------------------------------------
   تخصيصات المشروع التي لا مقابل لها في الـ template.

   ⚠️ لا تُحرَّر css/styles.css: هو مرآة لـ zadbyan design template/zadbyan/styles.css
   وأي تعديل هناك يُفقد أداةَ docs/tools/design-parity.ps1 معناها. كل تخصيص هنا.

   يُحمَّل بعد styles.css مباشرةً في App.razor.
   ========================================================================== */

/* ==========================================================================
   1) إصلاح أدوات bootstrap المنطقية في RTL
   --------------------------------------------------------------------------
   التطبيق يحمّل نسختَي bootstrap معاً بمنطق RTL متعاكس:

     libs/bootstrap/css/bootstrap.rtl.css   ->  .start-0 { right: 0 !important }
     global.css  (حزمة ABP، نسخة LTR)       ->  .start-0 { left:  0 !important }

   وهما خاصّيتان مختلفتان، فلا تلغي إحداهما الأخرى مهما كان الترتيب: يجتمع
   left و right على العنصر الواحد فيمتدّ من الحافّة إلى الحافّة.

   الأثر المقيس على /StudentDashboard قبل الإصلاح:
     i.bi-search        عرضه 356px مطابقاً لعرض حقل البحث كلّه
     elementFromPoint(وسط الحقل)  -->  I.bi   لا INPUT
   أي أن حقل البحث كان لا يستقبل النقر إطلاقاً. وشارة الصحّ على صورة الطالب
   كانت تظهر في الزاوية المقابلة لما يقصده end-0.

   القاعدة أدناه تُعيد المعنى المنطقي: في RTL تكون start يميناً وend يساراً،
   وتُصفّر الخاصّية المضادّة صراحةً حتى لا يبقى العنصر ممتدّاً.
   ========================================================================== */

[dir="rtl"] .start-0 {
    right: 0 !important;
    left: auto !important;
}

[dir="rtl"] .start-50 {
    right: 50% !important;
    left: auto !important;
}

[dir="rtl"] .start-100 {
    right: 100% !important;
    left: auto !important;
}

[dir="rtl"] .end-0 {
    left: 0 !important;
    right: auto !important;
}

[dir="rtl"] .end-50 {
    left: 50% !important;
    right: auto !important;
}

[dir="rtl"] .end-100 {
    left: 100% !important;
    right: auto !important;
}

/* ==========================================================================
   2) الأيقونات الزخرفية داخل الحقول
   --------------------------------------------------------------------------
   الأيقونة فوق حقل البحث تشرح ولا تفعل شيئاً، فلا يجوز أن تعترض المؤشّر.
   حزام أمان ثانٍ إلى جانب الإصلاح أعلاه.
   ========================================================================== */

.navbar .bi-search,
.navbar .bi-search + span {
    pointer-events: none;
}

/* ==========================================================================
   3) صور بطاقات الدورات
   --------------------------------------------------------------------------
   ImageURL يأتي من قاعدة البيانات، وقد يكون الملف مفقوداً على بيئة بعينها.
   القياس على /StudentDashboard: صورتان من صورتين بـ naturalWidth = 0، أي أن
   المتصفّح يرسم أيقونة «صورة مكسورة» داخل البطاقة.

   خلفية بهوية المنصّة تحت الصورة تعالج الحالتين معاً: تظهر ريثما تُحمَّل
   الصورة، وتبقى مكانها إن لم تصل — فيرى المستخدم مساحة مقصودة لا عطلاً.
   ========================================================================== */

.course-img {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.course-img-placeholder i {
    color: rgba(255, 255, 255, 0.85);
    font-size: 3rem;
}

/* ==========================================================================
   4) الشريط العلوي يتداخل مع محتوى الصفحة على الجوال
   --------------------------------------------------------------------------
   .height-80 تفرض ارتفاعاً ثابتاً: 80px، ثم 120px تحت 768px و160px تحت 320px.
   لكن عناصر الشريط الثلاثة (زرّ القائمة، حقل البحث، أدوات المستخدم) تتراصّ
   عمودياً على الجوال فيتجاوز مجموعها الارتفاع المفروض.

   القياس على 375px قبل الإصلاح:
     navbar height        = 120px
     children bottom      = 166px      (overflow 46px)
     breadcrumb top       = 144px      -->  overlap
   أي أن اسم المستخدم ومبدّل اللغة كانا يركبان على مسار التنقّل.

   min-height بدل height يُبقي مقاسات التصميم كحدٍّ أدنى ويترك الشريط ينمو
   بمحتواه بدل أن يفيض عنه.

   ⚠️ المُحدِّد يبدأ بـ nav عن قصد. جُرّب `.navbar.height-80` أوّلاً بـ !important
   فلم يغلب `.height-80 { height: 120px !important }` في styles.css رغم أنه
   أعلى أسبقيةً نظرياً — القياس بعده أعطى height: 120px لا auto. وإضافة اسم
   العنصر ترفع الأسبقية إلى (0,2,1) فتحسم الأمر: القياس بعدها 174px بلا تجاوز.
   ========================================================================== */

nav.navbar.height-80 {
    height: auto !important;
    min-height: 80px !important;
}

@media (max-width: 768px) {
    nav.navbar.height-80 {
        min-height: 120px !important;
    }
}

@media (max-width: 320px) {
    nav.navbar.height-80 {
        min-height: 160px !important;
    }
}

/* ==========================================================================
   5) الـ CSS المعزول ووسوم حزمه
   --------------------------------------------------------------------------
   كل ملفات *.razor.css في التطبيق والوحدات المرجعية تعمل، لكنها كانت لا تصل
   إلى المتصفّح إطلاقاً قبل هذه الموجة: وسما الحزمتين كانا مفقودَين من App.razor
   رغم أن الملفين يُخدَمان بـ 200. أُضيفا الآن:

     TS.ZadByan.Blazor.styles.css          حزمة الـ host
     TS.ZadByan.Blazor.Client.styles.css   حزمة مشروع Client المستقلّة

   وحزمة وحدة Volo.BasicTheme تصل عبر @import داخل حزمة الـ host، فقواعد
   InnerLayout.razor.css وLearningTipsCard.razor.css تعمل — تحقّقتُ منها بالقياس.

   ملاحظة: قاعدة .header-backdrop حُذفت من هنا. كانت لعنصر يرسمه MainLayout
   حين تُفتح قائمة، ثم استُبدل ذلك النهج بتفويض على document في
   js/zadbyan-header.js — فالإغلاق بالنقر خارجاً صار بلا عنصر خلفية أصلاً،
   وبقيت القاعدة كوداً ميّتاً لا يطابق شيئاً.
   ========================================================================== */

/* ==========================================================================
   6) قائمة المستخدم ومبدّل اللغة بمظهر الـ template
   --------------------------------------------------------------------------
   التصميم يرسمهما بـ user-menu-trigger و user-dropdown و lang-selector و
   lang-dropdown-menu. والمشروع يبنيهما عبر <NavToolbar /> الذي يركّب مكوّنَي
   ABP: LoginDisplay و LanguageSwitch، وكلاهما يخرج بنية Blazorise BarDropdown.

   القرار: إعادة تنسيق لا استبدال. المكوّنان مكرّران في أربعة ملفات (نسخة
   Server ونسخة WebAssembly لكلٍّ)، ومنطقهما ليس شكلاً: تبديل الثقافة برابط
   Abp/Languages/Switch، وعناصر قائمة المستخدم من StandardMenus.User باحترام
   الصلاحيات، واسم الـ tenant. إعادة كتابتها تعني نسخ ذلك المنطق أربع مرات
   وكسر تسجيل الخروج والصلاحيات مقابل شكلٍ يُنال بالتنسيق وحده.

   البنية المقيسة من الـ DOM الحيّ لا من الافتراض:
     .header-utils
       .nav-item                 <-- language: يحوي span.lang-globe
         a.nav-link.dropdown-toggle
         .dropdown-menu > a.dropdown-item
       .nav-item.dropdown        <-- user menu
         a.nav-link.dropdown-toggle
         .dropdown-menu > a.dropdown-item ... .dropdown-divider ... a.dropdown-item

   القيم منقولة حرفياً من styles.css الخاصّة بالتصميم.
   ========================================================================== */

.header-utils > .nav-item {
    position: relative;
}

/* زرّ قائمة المستخدم — قيم .user-menu-trigger */
.header-utils > .nav-item > .nav-link.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 14px;
    border: none;
    border-radius: 999px;
    background: var(--gray-100);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

    .header-utils > .nav-item > .nav-link.dropdown-toggle:hover,
    .header-utils > .nav-item > .nav-link.dropdown-toggle:focus {
        background: var(--primary-light);
        color: var(--primary-dark);
    }

/* مبدّل اللغة — قيم .lang-selector. يُميَّز بوجود .lang-globe داخله لأن
   العنصرين يخرجان بنفس الأصناف تماماً */
.header-utils > .nav-item:has(.lang-globe) > .nav-link.dropdown-toggle {
    background: transparent;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-weight: 500;
    color: #1f2d3d;
}

/* اللوحة المنسدلة — قيم .user-dropdown و .lang-dropdown-menu */
.header-utils .dropdown-menu {
    margin-top: 8px;
    padding: 8px 0;
    min-width: 200px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* ⚠️ حزام أمان في RTL: القائمة تُثبَّت على جهة، وأي اتّساع يدفعها خارج
       الشاشة على الأجهزة الضيّقة. القياس على 360px يعطيها 200px داخل الحدّ،
       والقيد يمنع تجاوزها إن طال نصّ عنصر مستقبلاً. */
    max-width: calc(100vw - 2rem);
}

.header-utils .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-900);
    text-decoration: none;
    text-align: right;
    transition: background 0.15s, color 0.15s;
}

    .header-utils .dropdown-item:hover,
    .header-utils .dropdown-item:focus {
        background: var(--primary-light);
        color: var(--primary-dark);
    }

    /* تسجيل الخروج آخر عنصر دائماً — قيم .user-dropdown-logout */
    .header-utils .dropdown-item:last-child {
        color: #dc2626;
        font-weight: 600;
    }

.header-utils .dropdown-divider {
    height: 1px;
    margin: 8px 0;
    border: 0;
    background: var(--gray-300);
    opacity: 1;
}

/* ==========================================================================
   7) هياكل التحميل
   --------------------------------------------------------------------------
   تشغل مكان المحتوى قبل وصوله. لا وجود لها في الـ template لأنه صفحات ثابتة
   بلا جلب، فهي تخصيص مشروع خالص.

   القياس الذي استدعاها: فجوة 1020ms بلا محتوى عند كل تنقّل إلى لوحة الطالب،
   وفيها تُعرض رسالة «لا توجد دورات» لطالب مسجَّل في دورتين.

   ⭐ الأبعاد مقصودة لتطابق المحتوى النهائي — صورة البطاقة 200px مثل
   .course-img — فلا يقفز التخطيط عند الاستبدال ولا يرتفع CLS.
   ========================================================================== */

/* ⭐ الوميض بـ transform على عنصر زائف لا بـ background-position على العنصر:
   تحريك background-position يُجبر المتصفّح على إعادة الطلاء كل إطار، وهذه
   الصفحة يُقاس على خيطها الرئيسي إسقاطُ إطارات أصلاً — فـ transform يجري على
   الـ compositor بلا طلاء. */
.skel {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: var(--gray-100);
}

    .skel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
        transform: translateX(-100%);
        animation: skel-shimmer 1.4s ease-in-out infinite;
        will-change: transform;
    }

@keyframes skel-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* يحترم تفضيل تقليل الحركة — الوميض المستمرّ مزعج لبعض المستخدمين */
@media (prefers-reduced-motion: reduce) {
    .skel {
        animation: none;
    }
}

.skel-line {
    height: 12px;
    margin-bottom: 8px;
}

.skel-h-lg {
    height: 18px;
}

.skel-h-sm {
    height: 6px;
}

.skel-w-70 {
    width: 70%;
}

.skel-w-40 {
    width: 40%;
}

.skel-w-30 {
    width: 30%;
}

/* يطابق ارتفاع .course-img تماماً */
.skel-card-img {
    height: 200px;
    border-radius: 0;
}

.skel-pill {
    width: 64px;
    height: 22px;
    border-radius: 999px;
}

.skel-btn {
    height: 38px;
    border-radius: 12px;
}

.skel-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* ==========================================================================
   8) لوحة الطالب على الجوال
   --------------------------------------------------------------------------
   التصميم يجعل بطاقات الإحصاء col-12 col-sm-4 فتتراصّ عمودياً تحت 576px،
   والفلترة كذلك. وهذا مقبول على صفحة ثابتة، لكن القياس على 375px أعطى:

     page height       2440px  على شاشة 812px  =  ثلاث شاشات
     welcome card       609px  منها 390px للأرقام الثلاثة وحدها
     filter bar         234px
     first course card  1170px  <-- شاشة ونصف قبل أن يرى الطالب دورةً واحدة

   ومحتوى الطالب الحقيقي هو الدورات لا الأرقام. فتُضغط الأرقام في صفٍّ واحد
   على الجوال وحده، وتُقصَّر صورة البطاقة، وتُصفّ قوائم الفلترة جنباً إلى جنب.
   سلوك sm فما فوق يبقى كما في التصميم حرفياً.

   القياس بعد الإصلاح:
     page height        1924px   (-21%)
     welcome card        318px   (-48%)
     filter bar          145px   (-38%)
     first course card   791px   (-32%)
   ========================================================================== */

@media (max-width: 575.98px) {

    /* الأرقام الثلاثة صفٌّ مضغوط بدل ثلاثة صناديق كلٌّ بارتفاع 130px */
    .student-stats > .col-12 {
        flex: 1 0 0%;
        width: auto;
        max-width: none;
    }

        .student-stats > .col-12 .p-3 {
            padding: 0.5rem 0.25rem !important;
        }

        .student-stats > .col-12 .fs-4 {
            font-size: 1.1rem !important;
            margin-bottom: 0 !important;
        }

        .student-stats > .col-12 .fs-3 {
            font-size: 1.35rem !important;
            line-height: 1.2;
        }

        .student-stats > .col-12 .small {
            font-size: 0.7rem !important;
            line-height: 1.25;
        }

    /* صورة البطاقة 132px لا 200px: الغرض تمييز البطاقة لا عرض الصورة */
    .course-img {
        height: 132px !important;
    }

    /* قوائم الفلترة الثلاث جنباً إلى جنب بنصّ مقتطع عند الحاجة */
    .student-filters .row.g-2 > .col-12 {
        flex: 1 0 0%;
        width: auto;
        max-width: none;
    }

    .student-filters .row.g-2 .btn {
        font-size: 0.78rem !important;
        padding: 0.35rem 0.5rem !important;
    }

        .student-filters .row.g-2 .btn span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
}

/* ==========================================================================
   9) ارتفاع الـ header المحجوز
   --------------------------------------------------------------------------
   styles.css يحجز 72px ثابتة، والـ header ثابت الموضع فوقها. لكن ارتفاعه
   يتغيّر: عدد روابط التنقّل يختلف بحسب حالة الدخول فتلتفّ على العروض المتوسّطة.

   القياس على 1009px: الـ header 104px والحجز 72px، فبقي 32px من المحتوى خلفه
   ولم يستقبل النقر — elementFromPoint عند أعلى المحتوى أعطى NAV.nav.

   js/zadbyan-header.js يقيس الارتفاع الفعلي ويكتبه في --zb-header-h ويُبقيه
   مطابقاً بـ ResizeObserver. والقيمة الاحتياطية 72px هي قيمة التصميم، فلو
   تعطّل الـ JS عاد السلوك إلى ما كان لا إلى ما هو أسوأ.
   ========================================================================== */

body {
    padding-top: var(--zb-header-h, 72px) !important;
}

.inner-shell {
    margin-top: calc(var(--zb-header-h, 72px) * -1) !important;
}

/* ==========================================================================
   10) الـ sidebar — تمييز الصفحة الحالية والروابط المعطّلة
   --------------------------------------------------------------------------
   القياس على /StudentDashboard قبل الإصلاح: صفر عنصر يحمل الصنف active بين
   ثمانية عناصر، أي أن الطالب لا يرى أين هو. وdashboard.html في التصميم يضع
   active على الصفحة الحالية. أُضيف الصنف في FirstLevelNavMenuItem، وهذه
   قواعده البصرية.

   `styles.css` يعرّف `.sidebar a.active` بخلفية #e9f5ee ولون #198754، وهو
   تمييز خافت لا يُلتقط بنظرة. فيُضاف شريط جانبي وثقل خطّ — كما يفعل التصميم
   في `.list-group-item.active-lesson` داخل مشغّل الدروس.
   ========================================================================== */

.sidebar .nav-link {
    position: relative;
    transition: background 0.15s, color 0.15s;
}

    .sidebar .nav-link.active {
        background: var(--primary-light);
        color: var(--primary-dark);
        font-weight: 700;
    }

        /* شريط على جهة البداية — يميّز العنصر بنظرة واحدة */
        .sidebar .nav-link.active::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            top: 8px;
            bottom: 8px;
            width: 4px;
            border-radius: 4px;
            background: var(--primary);
        }

        .sidebar .nav-link.active i {
            color: var(--primary);
        }

/* الروابط التي لا وجهة لها بعد (شهاداتي، التقييمات، …) تبدو كغيرها تماماً
   فيضغطها الطالب ولا يحدث شيء. تُخفَّت ويُغيَّر مؤشّرها فيُفهم أنها لم تجهز. */
.sidebar .nav-link[href="#"],
.sidebar .nav-link[href=""] {
    opacity: 0.55;
    cursor: not-allowed;
}

    .sidebar .nav-link[href="#"]:hover,
    .sidebar .nav-link[href=""]:hover {
        background: transparent;
        color: inherit;
    }

/* ==========================================================================
   10) الـ sidebar على الجوال — الـ offcanvas
   --------------------------------------------------------------------------
   الـ offcanvas يملأ العرض كلّه على الشاشات الصغيرة (width: 100% من
   InnerLayout.razor.css). ملء الشاشة يخفي السياق تماماً فيفقد المستخدم إحساسه
   بمكانه، والمعتاد في الأنماط الحديثة ترك جزء من الصفحة ظاهراً خلفها.
   ========================================================================== */

@media (max-width: 575.98px) {
    .offcanvas.offcanvas-start {
        width: 86% !important;
        max-width: 320px;
    }

    /* عناصر أكبر قليلاً: الإصبع أعرض من مؤشّر الفأرة */
    .offcanvas .nav-link {
        padding-top: 0.7rem !important;
        padding-bottom: 0.7rem !important;
    }
}

/* ==========================================================================
   11) الـ sidebar: تثبيت وتمرير داخلي بدل نموّ بلا حدّ
   --------------------------------------------------------------------------
   styles.css يعطي .sidebar ارتفاعاً `min-height: 100vh` فينمو بعدد الروابط.
   القياس على حساب المدير: عشرون عنصراً ترفع ارتفاع الـ sidebar فوق ارتفاع
   النافذة، فتخرج بطاقة النصائح تحت الطيّة، ويصير الوصول إلى أيّ رابط بعد
   السابع يحتاج تمرير المستند كلّه — والروابط تختفي كلّما نزل المستخدم في
   المحتوى.

   العلاج: ارتفاع مساوٍ للنافذة، تثبيت بـ sticky، وتمرير داخل منطقة الروابط
   وحدها. فيبقى الشعار وبطاقة المستخدم وبطاقة النصائح ظاهرة دائماً.
   ========================================================================== */

@media (min-width: 992px) {
    nav.sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        min-height: 0; /* يبطل min-height:100vh فلا يتجاوز النافذة */
        overflow: hidden; /* التمرير في .sidebar-scroll لا هنا */
    }

    /* ⭐ العرض 280px لا 260px.

       القياس على 1440px: «المحاضرات المباشرة» تحتاج 148px والمتاح 147px —
       نقصٌ ببكسل واحد. فيقع القصّ أو لا يقع بحسب الخطّ المثبَّت على الجهاز
       ونسبة تكبير المتصفّح: يظهر «المحاضرات المباش…» عند مستخدم ويسلم عند
       آخر. وعشرون بكسلاً إضافية تُخرج أطول تسمية من حافّة الهاوية، وتترك
       متّسعاً لتسمية أطول تُضاف لاحقاً.

       player-sidebar مستثناة: لها عرضها الخاصّ (300px) في styles.css. */
    nav.sidebar:not(.player-sidebar) {
        width: 280px;
    }
}

.sidebar-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    /* التمرير الناعم على الأجهزة اللمسية */
    -webkit-overflow-scrolling: touch;
    /* شريط تمرير رفيع لا يزاحم الروابط */
    scrollbar-width: thin;
    min-height: 0; /* لازمة داخل flex وإلا لم ينكمش العنصر فلا يظهر التمرير */
}

    .sidebar-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar-scroll::-webkit-scrollbar-thumb {
        background: #dfe6e1;
        border-radius: 3px;
    }

/* في الـ offcanvas على الجوال: نفس التقسيم، والجسم كلّه بارتفاع الشاشة */
.offcanvas .offcanvas-body.sidebar {
    overflow: hidden;
    min-height: 0;
}

/* الروابط: مساحة نقر أوسع وانتقال هادئ عند المرور */
.sidebar .nav-link {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

    .sidebar .nav-link i {
        width: 1.4rem;
        text-align: center;
        flex-shrink: 0; /* الأيقونات تُحاذى في عمود واحد فيقرأ العين القائمة عمودياً */
    }

/* ==========================================================================
   12) الترويسة في الصفحة الرئيسية — فصل بصري عند التمرير
   --------------------------------------------------------------------------
   الترويسة ثابتة وخلفيّتها بيضاء كخلفية الأقسام تحتها، فحين يمرّر المستخدم
   تمرّ البطاقات تحتها بلا حدّ فتبدو ملتصقة بها ويضيع إحساس الطبقات.
   الصنف is-scrolled يضعه zadbyan-header.js عند scrollY > 8.
   ========================================================================== */

.header {
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

    .header.is-scrolled {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    }

/* الرابط الحالي في الترويسة: التصميم يرسم خطاً تحته عبر ::after في styles.css،
   ويبقى اللون. هنا نزيد الوزن وحده فيُقرأ التمييز حتى على الشاشات الصغيرة
   حيث تنقلب القائمة عمودية فيختفي أثر الخطّ. */
.nav a.nav-link-active span,
.nav .nav-dropdown-trigger.nav-link-active span {
    font-weight: 700;
}

/* ==========================================================================
   13) أزرار btn-outline-* — إعادة الحدّ الذي يمحوه القالب
   --------------------------------------------------------------------------
   styles.css يعطي كل .btn قاعدة `border: none` (سطر 1164)، وأسبقيّتها تفوق
   قواعد bootstrap لأنها تأتي بعدها. ونمط btn-outline-* كلّه قائم على الحدّ:
   خلفيّته شفّافة ولونه هو لون الحدّ. فبلا حدّ يصير الزرّ نصّاً ملوّناً عائماً
   لا يبدو زرّاً إطلاقاً.

   القياس على زرّ «تغيير كلمة المرور» في /Profile:
       background-color = rgba(0, 0, 0, 0)
       border           = 0px none rgb(25, 135, 84)   <-- ممحوّ

   والقاعدة عامّة لا خاصّة بتلك الصفحة: كل زرّ btn-outline-* في المنصّة يقع
   في العطل نفسه. ولون الحدّ لا يُذكر هنا — bootstrap يحسبه من المتغيّر
   --bs-btn-border-color بحسب اللون المطلوب، والممحوّ هو العرض والنمط وحدهما.
   ========================================================================== */

.btn[class*="btn-outline-"] {
    border-width: 1px !important;
    border-style: solid !important;
}

/* ==========================================================================
   14) الشريط العلوي في لوحة التحكم — تخطيط flex بدل row/col
   --------------------------------------------------------------------------
   انظر تعليق InnerLayout.razor لسبب الاستبدال والقياس الذي كشفه.
   ========================================================================== */

nav.navbar.zb-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 72px;
    flex-wrap: nowrap; /* الالتفاف كان يرفع الشريط لسطرين على العروض المتوسّطة */
}

.zb-topbar-burger {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.25rem;
}

/* البحث يتمدّد لكن لا يبتلع الشريط: بلا حدّ أقصى يصير 900px على الشاشات
   العريضة فيبدو حقلاً عملاقاً بلا داعٍ */
.zb-topbar-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
}

    .zb-topbar-search .form-control {
        /* المسافة لأيقونة البحث على جهة البداية — منطقية لا يمين/يسار،
           فتنقلب صحيحاً لو صار التخطيط LTR */
        padding-inline-start: 2.75rem;
        height: 42px;
    }

.zb-topbar-search-icon {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* وإلا ابتلعت الأيقونة نقرة المستخدم على الحقل */
}

/* الأدوات تأخذ عرض محتواها وتلتصق بالطرف — كانت col-md-6 أي نصف الشريط */
.zb-topbar-actions {
    flex: 0 0 auto;
    margin-inline-start: auto;
    gap: 0.5rem;
}

.zb-topbar-icon-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #3b4a44;
    text-decoration: none;
    transition: background 0.15s;
}

    .zb-topbar-icon-btn:hover {
        background: #f1f5f3;
        color: var(--primary, #198754);
    }

    .zb-topbar-icon-btn i {
        font-size: 1.15rem;
    }

/* النقطة على زاوية الجرس لا في منتصفه */
.zb-topbar-icon-btn .bell-notification {
    position: absolute;
    top: 8px;
    inset-inline-end: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc3545;
    border: 2px solid #fff; /* يفصلها عن الأيقونة فتُقرأ نقطةً لا جزءاً منها */
    transform: none;
}

/* ⭐ على الجوال يُخفى حقل البحث.

   القياس على 390 قبل هذا: عرض الشريط 441px داخل شاشة 375px، فيبدأ عند
   x = -66 وتخرج مجموعة الأدوات إلى x = -50 — أي أن قائمة المستخدم وزرّ
   الخروج خارج الشاشة لا يمكن الوصول إليهما، والبحث ينكمش إلى 58px فلا
   يتّسع لحرفين.

   والحساب: زرّ القائمة 42 + الأدوات 278 + الفجوات 32 = 352 < 375. فبإخفاء
   البحث وحده يتّسع الشريط بلا اقتطاع.

   والخسارة صفر: الحقل بلا ربط ولا معالج إرسال — لا يبحث شيئاً اليوم. فحجز
   مساحة له على شاشة ضيّقة يطرد عناصر تعمل فعلاً. */
@media (max-width: 767.98px) {
    .zb-topbar-search {
        display: none;
    }
}

/* ==========================================================================
   15) الـ sidebar — تلميع بصري
   ========================================================================== */

/* ⭐ شريط التمرير كان يظهر قضيباً داكناً عريضاً على حافّة قائمة الروابط
   (يُرى بوضوح في لقطة المستخدم). السبب أن scrollbar-width: thin وحدها تضبط
   العرض ولا تضبط اللون، فيبقى لون المتصفّح الافتراضي — وهو داكن على كثير من
   الأجهزة. scrollbar-color تضبط الإبهام والمسار معاً.
   ولا تكفي قواعد ::-webkit-scrollbar: المتصفّحات الحديثة تُقدّم الخاصية
   المعيارية عليها متى وُجدت. */
.sidebar-scroll {
    scrollbar-color: #d7e3dc transparent;
}

/* عنوان صغير فوق مجموعة الروابط — يفصل بطاقة المستخدم عن التنقّل */
.sidebar-nav-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #9aaaa3;
    padding-inline: 0.75rem;
    margin-bottom: 0.4rem;
}

/* الروابط: مرور أهدأ وأيقونة تتلوّن معه */
.sidebar .nav-link {
    color: #4a5b54;
}

    .sidebar .nav-link:hover:not(.active) {
        background: #f3f8f5;
    }

    .sidebar .nav-link i {
        color: #8fa39a;
        transition: color 0.15s;
    }

    .sidebar .nav-link:hover:not(.active) i {
        color: var(--primary, #198754);
    }

/* ⭐ الروابط التي لا وجهة لها: التخفيت وحده يُقرأ «معطّل» لا «لم يُبنَ بعد»،
   فيظنّ الطالب أن حسابه ناقص الصلاحيات. وسم «قريباً» يقول المعنى صراحةً.
   يُبنى بـ ::after فلا يحتاج تعديل ترميز كل عنصر في القائمة. */
.sidebar .nav-link[href="#"],
.sidebar .nav-link[href=""] {
    opacity: 1; /* يُلغي التخفيت الذي كان في القسم 10 */
    color: #a9b6b0;
    cursor: not-allowed;
}

    .sidebar .nav-link[href="#"] i,
    .sidebar .nav-link[href=""] i {
        color: #c2cdc7;
    }

    .sidebar .nav-link[href="#"]::after,
    .sidebar .nav-link[href=""]::after {
        content: "قريباً";
        margin-inline-start: auto;
        font-size: 0.62rem;
        font-weight: 700;
        line-height: 1;
        padding: 0.25em 0.5em;
        border-radius: 999px;
        background: #eef2f0;
        color: #94a49d;
        flex-shrink: 0;
    }

/* ==========================================================================
   16) ترويسة الصفحة الرئيسية العامة — مساحة النقر والوضوح
   --------------------------------------------------------------------------
   القياس على 1440: ارتفاع كل رابط في القائمة 26px. وهو ارتفاع النصّ نفسه بلا
   حشو رأسي، فمنطقة النقر تساوي الحروف. الإرشاد المتعارف عليه 40px على الأقل
   للفأرة و44px للإصبع، والفارق محسوس: المستخدم يخطئ الرابط فيضغط الفراغ.

   الحشو رأسي فقط عن قصد: الزيادة الأفقية تدفع القائمة فتلتفّ على العروض
   المتوسّطة — قيس أن الروابط الستّة تشغل 624px من 1200px متاحة.
   ========================================================================== */

.header .nav > a,
.header .nav .nav-link-dropdown {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-block: 0.5rem;
    border-radius: 8px;
    transition: color 0.15s;
}

/* حالة المرور: كانت بلا أثر بصري إطلاقاً فلا يعرف المستخدم أن العنصر قابل
   للنقر قبل أن يضغطه */
.header .nav > a:hover,
.header .nav .nav-dropdown-trigger:hover {
    color: var(--primary, #198754);
}

/* مبدّل اللغة وقائمة المستخدم: أزرار دائرية متساوية بدل نصوص عائمة */
.header .header-utils .nav-link.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    transition: background 0.15s;
}

    .header .header-utils .nav-link.dropdown-toggle:hover {
        background: #f1f5f3;
    }

/* المنسدلة: حوافّ ألين وظلّ أوضح فتُقرأ طبقةً فوق الصفحة */
.header .header-utils .dropdown-menu {
    border: 1px solid #e8eeeb;
    border-radius: 12px;
    box-shadow: 0 10px 30px -8px rgba(16, 58, 44, 0.18);
    padding: 0.35rem;
}

    .header .header-utils .dropdown-menu .dropdown-item {
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        min-height: 40px;
        display: flex;
        align-items: center;
    }

@media (max-width: 991.98px) {
    /* القائمة تنقلب عمودية على الجوال — العناصر تحتاج مساحة إصبع */
    .header .nav > a,
    .header .nav .nav-link-dropdown {
        min-height: 44px;
        width: 100%;
    }
}

/* ⭐ النصّ الطويل مع وسم «قريباً» كان يفيض عن الـ sidebar.
   القياس بعد إضافة الوسم: «التقييمات و الإحصائيات» تجاوزت الحدّ بـ 58px،
   و«مشاركة الانطباع» بـ 10px — أي أن الحرف الأخير يُقطع عند الحافّة.

   السبب أن span داخل flex لا ينكمش دون عرض محتواه الكامل ما لم يُسمح له
   بذلك صراحةً (min-width الافتراضية auto). فبثلاثة عناصر — أيقونة ونصّ
   ووسم — يزيد المجموع عن العرض المتاح فيفيض بدل أن يُقصّ. */
.sidebar .nav-link > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ⭐ والقصّ يبقى شبكةَ أمانٍ لا سلوكاً معتاداً.

   الحدّ الأدنى للنقر 40px، فسطران يتّسعان داخل الصفّ بلا قفزٍ في التخطيط.
   والتسمية التي تتجاوز العرض رغم الـ 280px تلتفّ سطرين وتُقرأ كاملةً بدل
   أن تُقطع بثلاث نقاط — والقصّ لا يقع إلا فيما يتجاوز السطرين. */
.sidebar .nav-link > span {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* الوسم لا ينكمش ولا يلتفّ — قصّ النصّ هو الذي يوفّر المساحة */
.sidebar .nav-link[href="#"]::after,
.sidebar .nav-link[href=""]::after {
    white-space: nowrap;
}

/* ==========================================================================
   17) الصندوق الأسود حول عنوان الصفحة — حلقة تركيز لا حدّ
   --------------------------------------------------------------------------
   ظهر إطار أسود يحيط بعنوان «الحصص المباشرة» بعرض الصفحة. القياس:

       activeElement            = H1.lc-display lc-display-l
       tabindex                 = "-1"
       outline                  = rgb(16,16,16) auto 0.8px
       matches(':focus-visible') = true

   فليس حدّاً في التصميم بل حلقة تركيز يرسمها المتصفّح. سببها نمط إتاحة سليم:
   الصفحة تنقل التركيز إلى عنوانها بعد الانتقال ليعلنه قارئ الشاشة، فتضع
   tabindex="-1" وتنادي focus().

   والعنصر ذو tabindex="-1" لا يُبلَغ بمفتاح Tab إطلاقاً — يُركَّز برمجياً أو
   بالنقر وحدهما. فحلقةُ التركيز عليه لا تفيد مستخدم لوحة المفاتيح شيئاً
   وتشوّه الصفحة لغيره. إخفاؤها هنا لا يُنقص إتاحةً: الإعلان الصوتي يبقى.

   ⚠️ النطاق محصور بـ tabindex="-1" عن قصد: حلقة التركيز على الأزرار والحقول
   والروابط ضرورية ولا تُمسّ.
   ========================================================================== */

[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}