/*
  نظام تصميم منصة تكامل — هوية وزارة التعليم 2025.
  المرجع التنفيذي: UX-UI-DESIGN-SYSTEM.md
*/

@font-face {
    font-family: "MOE Helvetica";
    src: url("../fonts/moe/moe-helvetica-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "MOE Helvetica";
    src: url("../fonts/moe/moe-helvetica-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    --moe-navy: #15445a;
    --moe-navy-deep: #103747;
    --moe-teal: #0da9a6;
    --moe-teal-dark: #087f7d;
    --moe-teal-deep: #066462;
    --moe-blue: #3d7eb9;
    --moe-green: #07a869;
    /* أخضر الهوية زخرفة لا يحمل نصًا ولا أيقونة (2.76 على خلفية النجاح)؛ ما حمل معنى فعلى الأغمق */
    --moe-green-dark: #087348;
    --moe-gold: #c1b489;
    --moe-gray: #c2c1c1;
    --moe-purple: #351375;
    /*
        لون العلامة المحايدة على الخريطة. **ثابت بين الوضعين عمدًا**: بلاطات
        خرائط Google فاتحة دائمًا، فتوكن يتبع الورق يصير علامةً شاحبة عليها.
        وقيمته تحمل حرفًا أبيض (5.69) لأن العلامة تحمل حرف المرحلة.
    */
    --moe-marker-neutral: #556a72;
    --moe-paper: #f7fafa;
    --moe-surface: #ffffff;
    --moe-text: #102a33;
    --moe-text-muted: #617179;
    --moe-border: #dbe4e6;
    --moe-border-strong: #c8d4d7;
    --moe-danger: #b33a3a;
    /* مسحتان فاتحتان للتصنيف (المرحلة والجنس) — لا تُقرآن حالةً كألوان status-* */
    --moe-navy-tint: #e8eef1;
    --moe-teal-tint: #e0f2f2;

    /*
        ألوان دلالة الجنس — **استثناء مسجَّل من لوحة الهوية بقرار صاحب المشروع
        (2026-09-05)**: السماوي للبنين والوردي للبنات دلالة اجتماعية مستقرة يفهمها
        كل حاضر بلا مفتاح، وهي وحدها ما خرج عن اللوحة. ما عداها يبقى عليها.
        القيم حسمها `check-contrast.py` لا الذوق: نص الشارة على المسحة ≥ 4.5،
        والشريط على الأبيض ≥ 3.0، و`--moe-text` على المسحة ≥ 4.5.
    */
    --gender-boys: #1e88c9;
    --gender-boys-text: #0f5c8e;
    --gender-boys-tint: #e3f2fb;
    --gender-girls: #d63c7a;
    --gender-girls-text: #9c1c56;
    --gender-girls-tint: #fce7ef;

    /*
        ===== توكنز الأدوار =====
        كل لون كان مكتوبًا حرفيًّا في قاعدة صار توكنًا باسم **دوره** لا بدرجته.
        السبب أن الوضع الليلي يعمل بإعادة تعريف طبقة واحدة: واللون الحرفي في قاعدة
        لا تصله تلك الطبقة، فيبقى فاتحًا في صفحة داكنة بلا خطأ ولا شكوى.
        يحرسه `tools/check-css-tokens.py`.
    */

    /* الأبيض بدورَيه: سطحٌ يصير داكنًا، ونصٌّ على لون هوية يبقى أبيض */
    --moe-on-accent: #ffffff;

    /* نصوص الحالات على مسحاتها */
    --moe-warning-text: #6b5923;
    --moe-warning-text-strong: #6d5b25;
    --moe-warning-icon: #8a7327;
    --moe-danger-text: #8a2b2b;
    --moe-danger-text-soft: #913333;
    --moe-danger-hover: #9e3232;
    /* أحمر الخطر في المقدّمة على سطحٍ عادي — أيقونة أو نصّ زرّ محيطي —
       لا على مسحة الخطر. فقيمته تتبع الورق لا المسحة. */
    --moe-danger-accent: #b33a3a;
    --moe-success-text: #06603d;
    --moe-success-text-strong: #0b5138;
    /*
        مستويات التصنيف الرسمي — توكنز **مستقلّة عن نغمات الحالة** عمدًا.
        `success` و`warning` تعنيان نجاحًا وتحذيرًا في بقية النظام، والتصنيف ليس حالة
        بل موضعٌ على مقياس: «التهيئة» ليست خطأً و«الانطلاق» ليست تحذيرًا.
        كلٌّ لونُ نصٍّ وأيقونةٍ وحدٍّ على سطح الورق أو البطاقة، مقيسٌ في check-contrast.
    */
    --moe-level-excellence: #0f6b41;
    --moe-level-advancement: #10607f;
    --moe-level-launch: #8a5200;
    --moe-level-preparation: #45606c;

    --moe-success-strong: #087348;
    --moe-info-text: #1b5c72;
    --moe-info-text-strong: #17657d;
    --moe-link-strong: #1b4f76;

    /* نصوص محايدة بدرجاتها */
    --moe-neutral-text: #4f6269;
    --moe-neutral-text-soft: #47636c;
    --moe-chip-text: #34505a;
    --moe-chip-text-strong: #29454f;
    --moe-muted-soft: #84949a;
    --moe-muted-cool: #7b959c;
    --moe-muted-cool-strong: #799399;
    --moe-muted-cool-soft: #9eb9bf;
    --moe-navy-darkest: #0e303e;
    --moe-teal-on-navy: #8fd4d2;
    --moe-teal-soft-border: #78c6c4;

    /* أسطح ومسحات */
    --moe-surface-alt: #eef4f5;
    --moe-surface-alt-warm: #edf4f4;
    --moe-surface-alt-cool: #edf2f3;
    --moe-neutral-bg: #eef2f3;
    --moe-neutral-bg-strong: #e2e9eb;
    --moe-neutral-bg-soft: #eaf0f1;
    --moe-neutral-bg-deep: #e7edef;
    --moe-neutral-border: #d9e1e3;
    --moe-surface-tint: #f9fbfb;
    --moe-surface-tint-soft: #fbfcfc;
    --moe-surface-tint-cool: #f8fbfb;
    --moe-surface-tint-warm: #f6fafa;
    --moe-surface-tint-teal: #f2f8f8;
    --moe-surface-tint-teal-soft: #f2f9f9;
    --moe-surface-tint-teal-deep: #f0fafa;
    --moe-surface-tint-teal-strong: #edf5f5;
    --moe-surface-tint-navy: #f5f8f9;
    --moe-danger-bg: #f7e8e8;
    --moe-danger-bg-soft: #f9e9e9;
    --moe-danger-border: #ebc4c4;
    --moe-danger-border-strong: #e0b4b4;
    --moe-warning-border: #efe4c4;
    --moe-warning-border-strong: #dfd1a0;
    --moe-warning-border-deep: #e0d19b;
    --moe-warning-border-soft: #d9c89a;
    --moe-success-border: #b6e3cd;
    --moe-success-border-strong: #b8e2cf;
    --moe-info-border: #bce0ea;
    --moe-info-border-soft: #b9dae6;

    /* شفافيات ذات دور */
    --moe-focus-ring: rgba(13, 169, 166, 0.35);
    --moe-focus-ring-soft: rgba(13, 169, 166, 0.15);
    --moe-focus-ring-faint: rgba(13, 169, 166, 0.10);
    --moe-navy-veil: rgba(21, 68, 90, 0.10);
    --moe-text-veil: rgba(16, 42, 51, 0.07);
    /* حجاب الورقة السفلية: تعتيم حقيقي لا مسحة — الغشاوة الموجودة 7% لا تُرى */
    --moe-backdrop: rgba(16, 42, 51, 0.55);
    --moe-paper-veil: rgba(247, 250, 250, 0.86);

    /* نصّ تركوازي مقروء — يختلف بين الوضعين لأن الخلفية تختلف */
    --moe-teal-text: #087f7d;

    /*
        ===== توكنز نصّ دلالية =====
        لون **الهوية** لا يتغيّر بين الوضعين — وهذا صحيح للسطوح والحدود والأيقونات
        على خلفيات معروفة. لكن استعماله لونَ **نصّ** يجعل العنوان كحليًّا داكنًا على
        سطح داكن في الليلي: 1.27 مقابل الحدّ 4.5. فلكلّ دورٍ نصّي توكن بنسختين.
    */
    --moe-heading: #15445a;
    --moe-heading-strong: #103747;
    --moe-accent-text: #087f7d;
    --moe-accent-text-strong: #066462;
    --moe-positive-text: #087348;
    --moe-gold-text: #c1b489;

    /* أُعيدت إلى موضعها: كانت قد وقعت داخل كتلة الليلي فأبطلت نظيراتها */
    --moe-warning-bg: #f7f1df;
    --moe-success-bg: #e6f6ef;
    --moe-info-bg: #e7f4f8;
    --app-sidebar-width: 276px;
    --app-topbar-height: 72px;
    --app-radius: 12px;
    --app-radius-sm: 8px;
    --app-shadow: 0 4px 18px rgba(16, 42, 51, 0.06);
    --bs-primary: var(--moe-teal-dark);
    --bs-primary-rgb: 8, 127, 125;
    --bs-link-color: #176d91;
    --bs-link-hover-color: var(--moe-heading);
    --bs-body-color: var(--moe-text);
    --bs-body-bg: var(--moe-paper);
    --bs-border-color: var(--moe-border);
    --bs-font-sans-serif: "MOE Helvetica", Tahoma, Arial, sans-serif;
}

/*
    ===== الوضع الليلي =====
    **ألوان الهوية لا تتغيّر تعريفًا** (كحلي، تركواز، أخضر، ذهبي) — ما يتغيّر هو
    السطوح والنصوص والحدود والمسحات، أي **أين** تُستعمل لا **ما** هي.

    والافتراضي نهاري: الليلي بالاختيار وحده، بلا تتبّع لتفضيل النظام.
*/
:root[data-bs-theme="dark"] {
    --moe-paper: #0f2733;
    --moe-surface: #15333f;
    --moe-text: #e8f0f2;
    --moe-text-muted: #a8bcc3;
    --moe-border: #24454f;
    --moe-border-strong: #335a66;

    /* المسحات داكنة مشتقّة من ألوان الهوية نفسها */
    --moe-navy-tint: #17323f;
    --moe-teal-tint: #103a3a;
    --moe-warning-bg: #332c17;
    --moe-success-bg: #10312a;
    --moe-info-bg: #12303c;

    /* نصوص الحالات تُقلَب فاتحة لتُقرأ على مسحاتها الداكنة */
    --moe-warning-text: #e8d49a;
    --moe-warning-text-strong: #e8d49a;
    --moe-warning-icon: #d9c089;
    --moe-danger-text: #f0b3b3;
    --moe-danger-text-soft: #f0b3b3;
    --moe-danger-hover: #c25656;
    --moe-danger-accent: #e08e8e;
    --moe-success-text: #8fdcb8;
    --moe-success-text-strong: #8fdcb8;
    /* مستويات التصنيف في الليلي: نفس الأدوار، مقيسة على السطح الداكن. */
    --moe-level-excellence: #5fd39c;
    --moe-level-advancement: #62c6e8;
    --moe-level-launch: #e0ab5c;
    --moe-level-preparation: #a3b8c2;

    --moe-success-strong: #4fc48c;
    --moe-info-text: #9ed3e6;
    --moe-info-text-strong: #9ed3e6;
    --moe-link-strong: #8fc4e6;

    --moe-neutral-text: #b3c4ca;
    --moe-neutral-text-soft: #b3c4ca;
    --moe-chip-text: #cfdde1;
    --moe-chip-text-strong: #e2ecef;
    --moe-muted-soft: #93a7ae;
    --moe-muted-cool: #9fb5bc;
    --moe-muted-cool-strong: #9fb5bc;
    --moe-muted-cool-soft: #8ba3ab;
    --moe-navy-darkest: #0a1f28;
    --moe-teal-on-navy: #8fd4d2;
    --moe-teal-soft-border: #2f6b6a;

    --moe-surface-alt: #193a47;
    --moe-surface-alt-warm: #193a47;
    --moe-surface-alt-cool: #193a47;
    --moe-neutral-bg: #1b3c49;
    --moe-neutral-bg-strong: #234754;
    --moe-neutral-bg-soft: #193a47;
    --moe-neutral-bg-deep: #234754;
    --moe-neutral-border: #2b5060;
    --moe-surface-tint: #133039;
    --moe-surface-tint-soft: #133039;
    --moe-surface-tint-cool: #133039;
    --moe-surface-tint-warm: #133039;
    --moe-surface-tint-teal: #103a3a;
    --moe-surface-tint-teal-soft: #103a3a;
    --moe-surface-tint-teal-deep: #103a3a;
    --moe-surface-tint-teal-strong: #124040;
    --moe-surface-tint-navy: #17323f;
    --moe-danger-bg: #3a1e1e;
    --moe-danger-bg-soft: #3a1e1e;
    --moe-danger-border: #5e3232;
    --moe-danger-border-strong: #6b3a3a;
    --moe-warning-border: #55492a;
    --moe-warning-border-strong: #6b5c34;
    --moe-warning-border-deep: #6b5c34;
    --moe-warning-border-soft: #55492a;
    --moe-success-border: #245c46;
    --moe-success-border-strong: #245c46;
    --moe-info-border: #2a5c70;
    --moe-info-border-soft: #2a5c70;

    --moe-focus-ring: rgba(13, 169, 166, 0.45);
    --moe-focus-ring-soft: rgba(13, 169, 166, 0.25);
    --moe-focus-ring-faint: rgba(13, 169, 166, 0.18);
    --moe-navy-veil: rgba(255, 255, 255, 0.06);
    --moe-text-veil: rgba(255, 255, 255, 0.05);
    /* في الليلي يُعتَّم أكثر: السطح الداكن يحتاج فرقًا أوضح ليُقرأ الحجاب */
    --moe-backdrop: rgba(0, 0, 0, 0.62);
    --moe-paper-veil: rgba(15, 39, 51, 0.88);

    /* `--moe-teal-dark` (4.84 على الأبيض) يسقط على الداكن، فللنصّ توكن أفتح */
    --moe-teal-text: #5fd0cd;

    /* توكنز النصّ الدلالية: فاتحة لتُقرأ على السطوح الداكنة */
    --moe-heading: #dbe8ee;
    --moe-heading-strong: #eef4f7;
    --moe-accent-text: #5fd0cd;
    --moe-accent-text-strong: #8ae4e1;
    --moe-positive-text: #74d9a8;
    --moe-gold-text: #d9c089;

    /* رمادي Bootstrap الافتراضي: يبقى داكنًا في الليلي فيسقط إلى 2.84 */
    --bs-secondary-color: #b3c4ca;
    --bs-tertiary-bg: #193a47;
    --bs-secondary-bg: #1b3c49;
    --bs-emphasis-color: var(--moe-text);

    /* ظلٌّ بـ6% أسود فوق ورقٍ داكن لا يُرى: الارتفاع يُقرأ بظلٍّ أعمق */
    --app-shadow: 0 4px 18px rgba(0, 0, 0, 0.34);

    --gender-boys-tint: #12303f;
    --gender-boys-text: #8fc9ec;
    --gender-girls-tint: #3a1d2b;
    --gender-girls-text: #f0a8c6;

    --bs-body-color: var(--moe-text);
    --bs-body-bg: var(--moe-paper);
    --bs-border-color: var(--moe-border);
    --bs-link-color: #6fc3e8;
    --bs-link-hover-color: #9ed8f2;
}

html {
    min-height: 100%;
    font-size: 15px;
    scroll-behavior: smooth;
}

/*
    ثلاثة أحجام خط على جذر المستند. الحجم يُكتب في الخادم من الكوكي قبل أول رسم،
    ويبدّله `prefs.js` فورًا بعده.

    **«صغير» = 14px في المقاسين** لا أقل: 14px هو الجذر الجوّال المقيس أصلًا، فكل
    `max(…, 12px)` القائمة تبقى صالحة ولا يهبط نصّ جديد تحت الحدّ. وتصغيرٌ دونه كان
    سيُسقط نصوصًا تحت 12px في كل شاشة دفعةً واحدة.
*/
html[data-font-size="small"] { font-size: 14px; }
html[data-font-size="medium"] { font-size: 15px; }
html[data-font-size="large"] { font-size: 17px; }

body {
    min-height: 100vh;
    margin: 0;
    background-color: var(--moe-paper);
    color: var(--moe-text);
    font-family: "MOE Helvetica", Tahoma, Arial, sans-serif;
    line-height: 1.55;
}

a {
    text-underline-offset: 0.2em;
}

:focus-visible {
    outline: 3px solid var(--moe-focus-ring);
    outline-offset: 2px;
}

/* ===== Bootstrap alignment with the identity ===== */

/*
    Bootstrap يضبط `--bs-nav-pills-link-active-bg: #0d6efd` أزرقَه الافتراضي، فيظهر
    العنصر النشط في كل شريط `.nav-pills` (شريط السلسلة داخل الصفحة) بلون خارج الهوية.
    التجاوز على التوكن نفسه لا على كل شريط، فيسري على القائمة والتبويبات معًا.
*/
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--moe-teal-dark);
    --bs-nav-pills-link-active-color: var(--moe-on-accent);
    /* لون **نصّ** التبويب غير النشط: توكن دلالي لا لون هوية، وإلا بقي كحليًّا
       على سطح داكن في نافذة «؟» (1.48). قيمته النهارية هي الكحلي نفسه. */
    --bs-nav-link-color: var(--moe-heading);
}

.btn {
    min-height: 40px;
    border-radius: var(--app-radius-sm);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.btn-sm {
    min-height: 34px;
}

.btn-primary {
    --bs-btn-bg: var(--moe-teal-dark);
    --bs-btn-border-color: var(--moe-teal-dark);
    --bs-btn-hover-bg: var(--moe-teal-deep);
    --bs-btn-hover-border-color: var(--moe-teal-deep);
    --bs-btn-active-bg: var(--moe-navy);
    --bs-btn-active-border-color: var(--moe-navy);
}

.btn-outline-primary {
    --bs-btn-color: var(--moe-accent-text);
    --bs-btn-border-color: var(--moe-teal-soft-border);
    --bs-btn-hover-bg: var(--moe-teal);
    --bs-btn-hover-border-color: var(--moe-teal);
    --bs-btn-active-bg: var(--moe-navy);
    --bs-btn-active-border-color: var(--moe-navy);
}

/*
    أحمر Bootstrap `#dc3545` خارج لوحة الهوية، ويجتاز AA بهامش 0.03 فقط (4.53).
    أحمر اللوحة `--moe-danger` يجتازه بـ5.86 ويوحّد لون الخطر مع الشارات.
*/
.btn-danger {
    --bs-btn-bg: var(--moe-danger);
    --bs-btn-border-color: var(--moe-danger);
    --bs-btn-hover-bg: var(--moe-danger-hover);
    --bs-btn-hover-border-color: var(--moe-danger-hover);
    --bs-btn-active-bg: var(--moe-danger-text);
    --bs-btn-active-border-color: var(--moe-danger-text);
}

.btn-outline-danger {
    --bs-btn-color: var(--moe-danger-accent);
    --bs-btn-border-color: var(--moe-danger-border-strong);
    --bs-btn-hover-bg: var(--moe-danger);
    --bs-btn-hover-border-color: var(--moe-danger);
    --bs-btn-active-bg: var(--moe-danger-text);
    --bs-btn-active-border-color: var(--moe-danger-text);
}

/*
    رمادي Bootstrap الافتراضي `#6c757d` على الورق يعطي **4.47** — دون AA بشعرة،
    وهو نصّ أزرار حقيقية («عرض لوحة مجموعة»، «تصدير إلى Excel»، «التقرير الكامل»).
    `--moe-text-muted` يعطي 5.0 ويوحّد النصّ الثانوي في الأزرار مع بقيته.
    هذه القاعدة نهارية؛ نظيرتها الليلية أدناه أعلى نوعيةً فتغلبها.
*/
.btn-outline-secondary {
    --bs-btn-color: var(--moe-text-muted);
    --bs-btn-border-color: var(--moe-border-strong);
    --bs-btn-hover-color: var(--moe-on-accent);
    --bs-btn-hover-bg: var(--moe-text-muted);
    --bs-btn-hover-border-color: var(--moe-text-muted);
    --bs-btn-active-color: var(--moe-on-accent);
    --bs-btn-active-bg: var(--moe-neutral-text);
    --bs-btn-active-border-color: var(--moe-neutral-text);
}

/*
    ===== افتراضيات Bootstrap في الوضع الليلي =====
    هذه ليست ألوان الهوية بل رمادي Bootstrap المُصرَّف **حرفيًّا** داخل
    `bootstrap.rtl.min.css`، فطبقة التوكنز في `:root` لا تبلغه:
    `btn-outline-secondary` يبقى `#6c757d` على ورقٍ داكن (2.84)، و`bg-light`
    يبقى شبه أبيض تحت نصٍّ فاتح. العلاج هنا لا في `:root`.

    والمتغيّرات المضبوطة أدناه متغيّرات Bootstrap نفسها لا خصائص مباشرة، حتى
    تبقى حالات `:hover` و`:active` و`:disabled` من عمل Bootstrap كما هي.
*/
:root[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--moe-neutral-text);
    --bs-btn-border-color: var(--moe-border-strong);
    --bs-btn-hover-color: var(--moe-navy-darkest);
    --bs-btn-hover-bg: var(--moe-neutral-text);
    --bs-btn-hover-border-color: var(--moe-neutral-text);
    --bs-btn-active-color: var(--moe-navy-darkest);
    --bs-btn-active-bg: var(--moe-chip-text);
    --bs-btn-active-border-color: var(--moe-chip-text);
}

:root[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-border-color: var(--moe-teal-soft-border);
    --bs-btn-hover-color: var(--moe-navy-darkest);
    --bs-btn-hover-bg: var(--moe-accent-text);
    --bs-btn-hover-border-color: var(--moe-accent-text);
    --bs-btn-active-color: var(--moe-navy-darkest);
    --bs-btn-active-bg: var(--moe-accent-text-strong);
    --bs-btn-active-border-color: var(--moe-accent-text-strong);
}

:root[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-border-color: var(--moe-danger-border-strong);
    --bs-btn-hover-color: var(--moe-navy-darkest);
    --bs-btn-hover-bg: var(--moe-danger-text);
    --bs-btn-hover-border-color: var(--moe-danger-text);
    --bs-btn-active-color: var(--moe-navy-darkest);
    --bs-btn-active-bg: var(--moe-danger-text);
    --bs-btn-active-border-color: var(--moe-danger-text);
}

:root[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: var(--moe-success-text);
    --bs-btn-border-color: var(--moe-success-border-strong);
    --bs-btn-hover-color: var(--moe-navy-darkest);
    --bs-btn-hover-bg: var(--moe-success-text);
    --bs-btn-hover-border-color: var(--moe-success-text);
    --bs-btn-active-color: var(--moe-navy-darkest);
    --bs-btn-active-bg: var(--moe-success-text);
    --bs-btn-active-border-color: var(--moe-success-text);
}

:root[data-bs-theme="dark"] .btn-outline-warning {
    --bs-btn-color: var(--moe-warning-text);
    --bs-btn-border-color: var(--moe-warning-border-strong);
    --bs-btn-hover-color: var(--moe-navy-darkest);
    --bs-btn-hover-bg: var(--moe-warning-text);
    --bs-btn-hover-border-color: var(--moe-warning-text);
    --bs-btn-active-color: var(--moe-navy-darkest);
    --bs-btn-active-bg: var(--moe-warning-text);
    --bs-btn-active-border-color: var(--moe-warning-text);
}

/* سطح فاتح ثابت تحت نصّ فاتح = أبيض على أبيض */
:root[data-bs-theme="dark"] .bg-light {
    background-color: var(--moe-surface-alt) !important;
}

.btn-ghost {
    color: var(--moe-text-muted);
    border: 1px solid transparent;
    background: transparent;
}

.btn-ghost:hover {
    color: var(--moe-heading);
    background-color: var(--moe-surface-alt-warm);
    border-color: var(--moe-border);
}

.btn-icon {
    width: 40px;
    padding: 0;
    color: inherit;
}

/* النماذج الطويلة: إجراءات ظاهرة وحالة تحرير، بتوكنز مشتركة في النهاري والليلي. */
.form-actions {
    position: sticky;
    inset-block-end: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    margin-block-start: 1rem;
    background: var(--moe-surface);
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
}

.form-edit-status {
    margin-inline-start: auto;
    color: var(--moe-text-muted);
    font-size: max(0.85rem, 12px);
}

.form-required {
    margin-inline-start: 0.5rem;
    font-size: max(0.8rem, 12px);
    font-weight: 400;
    color: var(--moe-text-muted);
}

.form-character-count {
    display: block;
    text-align: end;
    font-size: max(0.8rem, 12px);
    color: var(--moe-text-muted);
    font-variant-numeric: tabular-nums;
}

.field-validation-feedback { display: block; }

[data-form-experience] :is(input, select, textarea),
.validation-summary, [data-business-error] {
    scroll-margin-block-start: calc(var(--app-topbar-height) + 1rem);
    scroll-margin-block-end: 7rem;
}

form[aria-busy="true"] [aria-disabled="true"] { cursor: wait; opacity: 0.65; }

@media (max-width: 767.98px) {
    .form-actions .btn { min-height: 40px; }
    .form-edit-status { flex-basis: 100%; margin-inline-start: 0; }
}

@media print {
    .form-actions { position: static; }
}

.form-label {
    margin-bottom: 0.4rem;
    color: var(--moe-chip-text-strong);
    font-size: 0.88rem;
    font-weight: 700;
}

.form-control,
.form-select,
.input-group-text {
    min-height: 42px;
    border-color: var(--moe-border-strong);
    border-radius: var(--app-radius-sm);
    background-color: var(--moe-surface);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--moe-teal);
    box-shadow: 0 0 0 0.22rem var(--moe-focus-ring-soft);
}

.input-group-search .input-group-text {
    color: var(--moe-accent-text);
    border-inline-end: 0;
    background-color: var(--moe-surface);
}

.input-group-search .form-control {
    border-inline-start: 0;
}

.card {
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
    background-color: var(--moe-surface);
    box-shadow: var(--app-shadow);
}

.alert {
    border-radius: var(--app-radius-sm);
    border-width: 1px;
}

.text-muted {
    color: var(--moe-text-muted) !important;
}

/* ===== Top bar ===== */
.app-topbar {
    height: var(--app-topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 1.25rem;
    background-color: var(--moe-surface);
    border-bottom: 1px solid var(--moe-border);
    position: sticky;
    top: 0;
    z-index: 1040;
}

.topbar-brand-group,
.topbar-actions,
.app-brand,
.academic-year-chip,
.user-chip {
    display: flex;
    align-items: center;
}

.topbar-brand-group,
.topbar-actions {
    gap: 0.75rem;
}

.app-brand {
    gap: 0.8rem;
    color: var(--moe-text);
    text-decoration: none;
}

.app-brand:hover {
    color: var(--moe-text);
}

.app-brand-logo {
    width: 72px;
    height: 52px;
    object-fit: contain;
    flex: 0 0 auto;
}

.app-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.app-brand-copy strong {
    color: var(--moe-heading);
    font-size: 1.08rem;
}

/*
    السطر الصغير صار يحمل اسم الإدارة — معلومة لا شعارًا وظيفيًا — فحدّه 12px
    كسائر النصوص الحاملة للمعلومة، و`nowrap` يمنع التفافه إلى سطر ثالث فيرفع
    ارتفاع الشريط. لكنّ `nowrap` يجعل عرضه أرضية لا تنضغط، فيُخفى دون 992
    (انظر كتلة `max-width: 991.98px`) بدل أن يزاحم البحث ويفيض الشريط.
*/
.app-brand-copy small {
    color: var(--moe-text-muted);
    font-size: max(0.8rem, 12px);
    white-space: nowrap;
}

.academic-year-chip,
.user-chip {
    gap: 0.45rem;
    min-height: 38px;
    padding-inline: 0.75rem;
    border: 1px solid var(--moe-border);
    border-radius: 999px;
    background-color: var(--moe-surface-tint);
    color: var(--moe-chip-text);
    font-size: max(0.84rem, 12px);
}

.academic-year-chip i {
    color: var(--moe-accent-text);
}

.academic-year-chip.is-warning {
    color: var(--moe-warning-text-strong);
    background-color: var(--moe-warning-bg);
    border-color: var(--moe-warning-border-strong);
}

.academic-year-chip.is-closing {
    color: var(--moe-warning-text-strong);
    background-color: var(--moe-warning-bg);
    border-color: var(--moe-warning-border-strong);
}

.academic-year-chip.is-closing i {
    color: var(--moe-warning-icon);
}

.academic-year-state {
    padding-inline: 0.4rem;
    border-radius: 999px;
    background-color: var(--moe-text-veil);
    font-size: max(0.72rem, 12px);
    font-weight: 700;
}

a.academic-year-chip {
    text-decoration: none;
}

a.academic-year-chip:hover,
a.academic-year-chip:focus-visible {
    border-color: var(--moe-teal);
    color: var(--moe-heading);
}

/*
    `width` من `.btn-icon` لا يكفي: الزرّ عنصر Flex داخل الشريط، فيتقلّص عند
    ضيق الشاشة (قيس 31×40 على 390) فيخالف هدف اللمس ويصير دائرته بيضة.
    `min-width` يمنع التقلّص لأن خوارزمية Flex لا تنزل تحته.
*/
.topbar-action,
.topbar-menu-button {
    min-width: 40px;
    min-height: 40px;
    border: 1px solid var(--moe-border);
    border-radius: 50%;
    background-color: var(--moe-surface);
    color: var(--moe-heading);
    font-size: 1.1rem;
}

.topbar-action:hover,
.topbar-menu-button:hover {
    color: var(--moe-on-accent);
    background-color: var(--moe-teal-dark);
    border-color: var(--moe-teal-dark);
}

.topbar-alerts {
    position: relative;
}

.topbar-alerts .topbar-action,
/*
    أيقونةُ المراسلات ليست داخل `.topbar-alerts` (رابطٌ لا قائمة منسدلة)، فتحتاج
    موضعًا نسبيًّا بنفسها كي تستقرّ شارتُها عليها لا على الشريط كلّه.
*/
.topbar-inbox {
    position: relative;
}

.topbar-badge {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-end: -2px;
    min-width: 1.15rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    /* السطح ذهبي في الوضعين، فالنصّ يبقى كحليًّا غامقًا لا يتبع الورق */
    color: var(--moe-navy-deep);
    background-color: var(--moe-gold);
    font-size: max(0.66rem, 12px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15rem;
    text-align: center;
}

.topbar-badge.is-critical {
    color: var(--moe-on-accent);
    background-color: var(--moe-danger);
}

.alerts-menu {
    width: 320px;
    max-width: calc(100vw - 1.5rem);
    padding-block: 0.35rem;
}

.alerts-empty {
    margin: 0;
    padding: 0.5rem 0.9rem;
    color: var(--moe-text-muted);
    font-size: max(0.82rem, 12px);
}

.alerts-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    white-space: normal;
}

/*
    المطّلَع عليه يبقى معروضًا لأن حالته ما زالت قائمة، وتخفت نقطته وحدها ليُقرأ
    الفرق بين «جديد» و«رأيته». والنصّ لا يخفت: حالة قائمة تُقرأ كاملة.
*/
.alerts-item.is-acknowledged .alerts-dot {
    opacity: 0.4;
}

.alerts-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-block-start: 0.4rem;
    border-radius: 50%;
}

.alerts-dot.is-critical {
    background-color: var(--moe-danger);
}

.alerts-dot.is-warning {
    background-color: var(--moe-gold);
}

.alerts-dot.is-info {
    background-color: var(--moe-blue);
}

.alerts-body {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.alerts-meta {
    color: var(--moe-text-muted);
    font-size: max(0.76rem, 12px);
}

/* ===== البحث السريع (NFR-010) ===== */
.quick-search {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.quick-search-shell {
    position: relative;
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: center;
}

.quick-search-icon {
    position: absolute;
    inset-inline-start: 0.7rem;
    color: var(--moe-text-muted);
    pointer-events: none;
}

.quick-search-input {
    min-height: 40px;
    padding-inline-start: 2.2rem;
    border-radius: 999px;
    background-color: var(--moe-surface-tint);
    font-size: max(0.85rem, 12px);
}

.quick-search-close {
    position: absolute;
    inset-inline-end: 0.25rem;
    border: 0;
    background-color: transparent;
}

.quick-search-panel {
    position: absolute;
    inset-block-start: calc(100% + 0.35rem);
    inset-inline: 0;
    z-index: 1050;
    max-height: 60vh;
    overflow-y: auto;
    padding-block: 0.35rem;
    background-color: var(--moe-surface);
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

.quick-search-group {
    margin: 0;
    padding: 0.4rem 0.9rem 0.2rem;
    color: var(--moe-text-muted);
    font-size: max(0.7rem, 12px);
    font-weight: 700;
}

.quick-search-note {
    margin: 0;
    padding: 0.6rem 0.9rem;
    color: var(--moe-text-muted);
    font-size: max(0.82rem, 12px);
}

.quick-search-option {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem;
    color: var(--moe-text);
    text-decoration: none;
}

.quick-search-option > i {
    margin-block-start: 0.2rem;
    color: var(--moe-accent-text);
}

.quick-search-option:hover,
.quick-search-option.is-active {
    background-color: var(--moe-info-bg);
}

.quick-search-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

/* الاسم ومعرّفه على سطر واحد: خمس نتائج يجب أن تُقرأ بنظرة لا بتمرير */
.quick-search-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.quick-search-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.86rem;
}

.quick-search-id {
    flex: 0 0 auto;
    margin-inline-start: auto;
    /* المعرّف مرجع لا عنوان: بحجم النص المساعد لا بحجم الاسم */
    font-size: max(0.76rem, 12px);
}

.quick-search-code,
.quick-search-meta {
    color: var(--moe-text-muted);
    font-size: max(0.75rem, 12px);
}

.quick-search-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    زر الإلغاء الأصلي في `input[type=search]` يتراكب مع زر الإغلاق المخصص على الجوال
    فيبدو «X» مزدوجًا.
*/
.quick-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* رابط التخطّي: مخفي حتى يُركَّز عليه، فهو أول عنصر في ترتيب التركيز */
.skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: 1rem;
    z-index: 1100;
    padding: 0.5rem 0.9rem;
    border-radius: 0 0 var(--app-radius-sm) var(--app-radius-sm);
    color: var(--moe-on-accent);
    background-color: var(--moe-navy);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus-visible {
    inset-block-start: 0;
    color: var(--moe-on-accent);
}

@media (max-width: 767.98px) {
    .quick-search {
        flex: 0 0 auto;
    }

    .quick-search-shell {
        display: none;
    }

    /*
        الطبقة تغطي الشريط العلوي كاملًا: تركها جزئية يُظهر الشعار والنص تحت حافة
        لوحة النتائج فتبدو الشاشة مكسورة.
    */
    .quick-search-shell.is-open {
        display: flex;
        align-items: center;
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: 1060;
        height: var(--app-topbar-height);
        max-width: none;
        padding-inline: 0.75rem;
        background-color: var(--moe-surface);
        border-bottom: 1px solid var(--moe-border);
    }

    .quick-search-shell.is-open .quick-search-input {
        background-color: var(--moe-surface-tint);
    }

    .quick-search-shell.is-open .quick-search-icon {
        inset-inline-start: 1.45rem;
    }
}

/* ===== Shell and sidebar ===== */
.app-shell {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--app-topbar-height));
}

.app-workspace {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem clamp(1rem, 2.2vw, 2rem) 2rem;
}

/* المحتوى يستقبل التركيز من رابط التخطّي، فلا حلقة تركيز حول الصفحة كلها */
.app-main:focus {
    outline: none;
}

.app-sidebar {
    width: var(--app-sidebar-width);
    flex: 0 0 var(--app-sidebar-width);
    min-height: calc(100vh - var(--app-topbar-height));
    color: var(--moe-on-accent);
    background-color: var(--moe-navy-deep);
    border-inline-start: 1px solid var(--moe-navy-darkest);
}

/*
    Bootstrap يفرض `background-color: transparent !important` على `.offcanvas-lg`
    فوق 992px، فيسقط كحلي الهوية ويترك روابط بيضاء على خلفية فاتحة (فشل تباين).
    الاسترجاع يحتاج `!important` بالمثل ولا يكفي ترتيب الملفات.
*/
@media (min-width: 992px) {
    .app-sidebar {
        background-color: var(--moe-navy-deep) !important;

        /*
            التنقل يبقى في مكانه على الصفحات الطويلة بدل أن ينزلق مع المحتوى ويختفي.
            القائمة نفسها منطقة تمرير مستقلة. لا `!important` هنا: Bootstrap لا يضبط
            `position` على `.offcanvas-lg` فوق نقطة التوقف (قاعدة `fixed` محصورة في
            `max-width: 991.98px`)، فترتيب الملفات كافٍ.
        */
        position: sticky;
        top: var(--app-topbar-height);
        height: calc(100vh - var(--app-topbar-height));
        overflow-y: auto;
        align-self: flex-start;
    }
}

.app-sidebar .offcanvas-body {
    min-height: 100%;
    display: flex;
    overflow-y: auto;
}

.sidebar-mobile-header {
    color: var(--moe-on-accent);
    background-color: var(--moe-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* ===== بطاقة سياق المجموعة ===== */
.group-context {
    display: flex;
    padding: 0.35rem;
    margin: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--app-radius-sm);
    background-color: rgba(255, 255, 255, 0.07);
}

.group-context-dropdown {
    width: 100%;
}

/*
    البطاقة كلها هي المُشغِّل (زر أو رابط)، فتبقى قابلة للنقر في الوضع المضغوط
    حين لا يظهر منها إلا الأيقونة.
*/
.group-context-trigger {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--app-radius-sm);
    background-color: transparent;
    color: inherit;
    text-align: start;
    text-decoration: none;
}

.group-context-trigger:hover,
.group-context-trigger:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
}

.group-context-chevron {
    margin-inline-start: auto;
    align-self: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: max(0.75rem, 12px);
}

.group-context-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--moe-on-accent);
    background-color: var(--moe-teal-dark);
}

.group-context-icon.is-empty {
    /* السطح ذهبي في الوضعين، فالنصّ يبقى كحليًّا غامقًا لا يتبع الورق */
    color: var(--moe-navy-deep);
    background-color: var(--moe-gold);
}

.group-context-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.35;
}

.group-context-label {
    color: rgba(255, 255, 255, 0.72);
    font-size: max(0.7rem, 12px);
    font-weight: 700;
}

.group-context-name {
    color: var(--moe-on-accent);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-context-code {
    color: rgba(255, 255, 255, 0.72);
    font-size: max(0.74rem, 12px);
    font-variant-numeric: tabular-nums;
}

/* المجموعة المعطّلة تُقال صراحة: لا تُوهم البطاقة بأنها مجموعة عمل جارية */
.group-context-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    margin-top: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    /* السطح ذهبي في الوضعين، فالنصّ يبقى كحليًّا غامقًا لا يتبع الورق */
    color: var(--moe-navy-deep);
    background-color: var(--moe-gold);
    font-size: max(0.7rem, 12px);
    font-weight: 700;
}

.group-context-hint {
    color: rgba(255, 255, 255, 0.82);
    font-size: max(0.78rem, 12px);
}

.group-switch-menu {
    width: 268px;
    max-width: calc(100vw - 2rem);
    padding-block: 0.35rem;
}

.group-switch-filter {
    padding: 0.35rem 0.6rem 0.5rem;
}

.group-switch-list {
    max-height: 320px;
    overflow-y: auto;
}

.group-switch-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    text-align: start;
}

.group-switch-code {
    flex: 0 0 auto;
    color: var(--moe-text-muted);
    font-size: max(0.74rem, 12px);
    font-variant-numeric: tabular-nums;
}

.group-switch-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-switch-current {
    margin-inline-start: auto;
    color: var(--moe-accent-text);
}

.group-switch-empty {
    margin: 0;
    padding: 0.4rem 0.9rem;
    color: var(--moe-text-muted);
    font-size: max(0.8rem, 12px);
}

/* ===== أقسام القائمة ===== */
.sidebar-sections {
    padding-bottom: 0.5rem;
}

.sidebar-section-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 40px;
    padding: 0.55rem 1.45rem 0.35rem;
    border: 0;
    background-color: transparent;
    /* AA على الكحلي: لا تنزل تسمية القسم عن هذه الدرجة */
    color: rgba(255, 255, 255, 0.72);
    /* 12px عند جذر 15px — الحد الأدنى في نظام التصميم لواجهة تشغيلية */
    font-size: max(0.8rem, 12px);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: start;
}

.sidebar-section-toggle:hover,
.sidebar-section-toggle:focus-visible {
    color: var(--moe-on-accent);
}

.sidebar-section-label {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-section-chevron {
    flex: 0 0 auto;
    font-size: max(0.75rem, 12px);
    transition: transform 150ms ease;
}

.sidebar-section-toggle[aria-expanded="true"] .sidebar-section-chevron {
    transform: rotate(180deg);
}

.sidebar-nav {
    padding: 0 0.7rem 0.35rem;
    margin-bottom: 0;
}

.nav-link-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-badge {
    flex: 0 0 auto;
    min-width: 1.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    /* السطح ذهبي في الوضعين، فالنصّ يبقى كحليًّا غامقًا لا يتبع الورق */
    color: var(--moe-navy-deep);
    background-color: var(--moe-gold);
    font-size: max(0.72rem, 12px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.nav-badge.is-critical {
    color: var(--moe-on-accent);
    background-color: var(--moe-danger);
}

/* ===== أدوات أسفل القائمة ===== */
.sidebar-tools {
    margin-top: auto;
    padding: 0.6rem 0.9rem 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-compact-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 40px;
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--app-radius-sm);
    background-color: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: max(0.78rem, 12px);
    font-weight: 700;
}

.sidebar-compact-toggle:hover,
.sidebar-compact-toggle:focus-visible {
    color: var(--moe-on-accent);
    border-color: var(--moe-on-accent);
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-compact-icon {
    transition: transform 150ms ease;
}

/* الوضع المضغوط: أيقونات فقط على سطح المكتب. التسمية تبقى في شجرة الوصولية ولا تُحجب */
@media (min-width: 992px) {
    body.nav-compact {
        --app-sidebar-width: 76px;
    }

    body.nav-compact .nav-link-text,
    body.nav-compact .sidebar-compact-text,
    body.nav-compact .group-context-body,
    body.nav-compact .group-context-chevron {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /*
        ترويسة القسم تختفي كليًا: سهم عارٍ بلا تسمية ولا أيقونة قسم لا يعني شيئًا.
        محلها فاصل رفيع، واللوحات كلها مفتوحة فتبقى الأيقونات وحدها سلمًا واحدًا.
    */
    body.nav-compact .sidebar-section-toggle {
        display: none;
    }

    body.nav-compact .sidebar-section > .collapse {
        display: block !important;
    }

    body.nav-compact .sidebar-section + .sidebar-section {
        margin-top: 0.4rem;
        padding-top: 0.4rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    body.nav-compact .app-sidebar .nav-link,
    body.nav-compact .sidebar-compact-toggle,
    body.nav-compact .group-context,
    body.nav-compact .group-context-trigger {
        justify-content: center;
    }

    body.nav-compact .app-sidebar .nav-link {
        position: relative;
        padding-inline: 0.5rem;
    }

    body.nav-compact .group-context {
        padding: 0.5rem;
    }

    body.nav-compact .sidebar-compact-icon {
        transform: rotate(180deg);
    }

    body.nav-compact .nav-badge {
        position: absolute;
        inset-block-start: 0.25rem;
        inset-inline-end: 0.35rem;
        min-width: 1.1rem;
        font-size: max(0.62rem, 12px);
    }
}

.app-sidebar .nav-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    margin-block: 0.12rem;
    border-radius: var(--app-radius-sm);
    color: rgba(255, 255, 255, 0.79);
    font-size: 0.9rem;
    transition: background-color 150ms ease, color 150ms ease;
}

.app-sidebar .nav-link i {
    width: 1.25rem;
    color: var(--moe-teal-on-navy);
    font-size: 1rem;
    text-align: center;
}

.app-sidebar .nav-link:hover {
    color: var(--moe-on-accent);
    background-color: rgba(255, 255, 255, 0.09);
}

.app-sidebar .nav-link.active {
    color: var(--moe-on-accent);
    background-color: var(--moe-teal-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.app-sidebar .nav-link.active i {
    color: var(--moe-on-accent);
}

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem clamp(1rem, 2.2vw, 2rem);
    color: var(--moe-text-muted);
    background-color: var(--moe-surface);
    border-top: 1px solid var(--moe-border);
    font-size: max(0.78rem, 12px);
}

/* ===== Page hierarchy ===== */
.breadcrumb {
    margin-bottom: 0.65rem;
    font-size: max(0.78rem, 12px);
}

.breadcrumb-item a {
    color: var(--moe-text-muted);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--moe-heading);
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
    color: var(--moe-heading);
    text-decoration: underline;
}

/* اسم القسم جذر لا وجهة: يُقرأ ولا يُنقر */
.breadcrumb-section {
    color: var(--moe-text-muted);
}

.page-header {
    position: relative;
    margin-bottom: 1.25rem;
    padding-block: 0.35rem 1rem;
    padding-inline: 0.9rem 0;
    border-bottom: 1px solid var(--moe-border);
}

.page-header::before {
    content: "";
    position: absolute;
    inset-block: 0.3rem 1.05rem;
    inset-inline-start: 0;
    width: 4px;
    border-radius: 4px;
    background-color: var(--moe-teal);
}

.page-title {
    color: var(--moe-heading);
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    font-weight: 700;
}

.page-context {
    max-width: 72ch;
    font-size: 0.88rem;
}

.page-header-text {
    min-width: 0;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
    color: var(--moe-text-muted);
    font-size: max(0.8rem, 12px);
    font-weight: 700;
    text-decoration: none;
}

.page-back:hover,
.page-back:focus-visible {
    color: var(--moe-heading);
}

.page-context-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.filter-bar {
    padding: 1.15rem;
}

/*
    ====================================================================
    سطحُ إدخالٍ محدودُ العرض، وشريطُ إجراءات الفلاتر، وقائمةُ الاختيار
    المتعدّد — تحسينُ شاشات التحسين 2026-09-11.

    السببُ المقيس: `.app-main` بلا سقفِ عرض، فعلى شاشةٍ عريضة (عرضُ المحتوى
    ‎≈1900px‏) يبلغ حقلُ «وصف الفجوة» و«المبرر» العرضَ نفسه: سطرُ قراءةٍ بمئةٍ
    وعشرين حرفًا، وزرُّ الحفظ يبعد عن حقله ‎≈1800px‏. **والحدُّ على سطح النموذج
    لا على `.app-main`** بقرار صاحب المشروع: الجداولُ واللوحاتُ تُفيدها السعة،
    فلا تتغيّر شاشةٌ لم تُطلب.
    ====================================================================
*/

/* سطحُ إدخال: يحتلّ صدرَ الشاشة (يمينَها في RTL) ولا يمتدّ إلى آخرها. */
.entry-surface {
    max-width: 62rem;
}

/* حقلُ نصٍّ طويل: سطرُ قراءةٍ لا يزيد عن 72 حرفًا — القياسُ نفسه في `.page-context`. */
.entry-measure {
    max-width: 72ch;
}

/*
    إجراءاتُ شريط الفلاتر في صفٍّ خاصّ لا خليةً في الشبكة: الشبكةُ تلتفّ بحسب
    العرض، فيقع الزرُّ في وسط الصف الثاني وبينه وبين آخر فلتر فراغٌ يقطعهما.
*/
.filter-bar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 1rem;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--moe-neutral-bg-soft);
}

/* قائمةُ الاختيار المتعدّد — `_OptionList` (بديل `select multiple`) */
.option-list-field {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
}

.option-list-legend {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--moe-heading);
}

.option-list-toolbar {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-inline-start: auto;
}

.option-list-count {
    font-size: 0.86rem;
    color: var(--moe-text-muted);
    font-variant-numeric: tabular-nums;
}

.option-list-clear {
    --bs-btn-font-size: 0.86rem;
    padding: 0;
    text-decoration: underline;
}

.option-list {
    flex: 1 0 100%;
    max-height: 13.5rem;
    overflow-y: auto;
    padding: 0.6rem 0.75rem;
    background: var(--moe-surface);
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
}

.option-list .form-check {
    margin-bottom: 0.15rem;
}

.option-list .form-check-label {
    font-size: 0.9rem;
}

.option-list-hint {
    display: block;
    font-size: 0.86rem;
    color: var(--moe-text-muted);
}

.option-list-help,
.option-list-empty,
.option-list-error {
    flex: 1 0 100%;
    margin-top: 0.35rem;
}

.option-list-error {
    font-size: 0.86rem;
    color: var(--moe-danger-text);
}

/* حدُّ الاختيار الناقص يُعلَن على الحاوية لا على كل مربّع — الخطأ في المجموعة. */
.option-list-field[data-option-list-invalid="true"] .option-list {
    border-color: var(--moe-danger-border-strong);
}

/*
    جدولٌ بلا صفوف: تبقى رسالةٌ واحدة في موضع الصفوف، ويُخفى ما لا معنى له بلا صفوف —
    منتقي الطول وشريطُ المعلومات والترقيم. تُضاف الحالةُ من سكربت الشاشة على `draw`.
*/
.datatable-container.is-rowless .moe-datatable-meta,
.datatable-container.is-rowless .moe-datatable-footer {
    display: none;
}

.filter-bar-heading,
.data-surface-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.filter-bar-heading {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--moe-neutral-bg-soft);
}

.filter-bar h2,
.data-surface h2 {
    color: var(--moe-heading);
    font-weight: 700;
}

/* ===== Cards, dashboards, and states ===== */
.app-main .card-body.text-center {
    min-height: 118px;
    justify-content: center;
    border-block-start: 3px solid var(--moe-teal);
}

.app-main .card-body.text-center .h4 {
    color: var(--moe-heading);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
}

.app-main > h6.text-muted,
.app-main > form + h6.text-muted {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-block: 1.25rem 0.75rem;
    color: var(--moe-heading) !important;
    font-size: 0.88rem;
    font-weight: 700;
}

.app-main > h6.text-muted::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 3px;
    background-color: var(--moe-teal);
}

.empty-state {
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px dashed var(--moe-muted-cool-soft);
    border-radius: var(--app-radius);
    background-color: var(--moe-surface);
    text-align: center;
}

.empty-state-icon {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--moe-muted-cool-strong);
    font-size: 1.9rem;
}

/*
    عروض حقول وأعمدة متكررة. بديل `style=""` داخل العروض: النمط في ملف واحد يُراجع
    ويُعاد استخدامه، لا قيمة مبثوثة في الوسم.
*/
.w-date { max-width: 10rem; }
.w-status { max-width: 8rem; }
.w-narrow { max-width: 16rem; }
.w-reason { max-width: 26rem; }
.w-level { width: 7rem; }
.w-code { width: 8rem; }

/*
    عنوان بطاقة: العنصر `h3` لتصح الهرمية (h1 صفحة ← h2 قسم ← h3 بطاقة)، والحجم حجم
    `h6` السابق فلا يتغير الشكل.
*/
.card-title-sm {
    margin-bottom: 0.5rem;
    color: var(--moe-heading);
    font-size: 1rem;
    font-weight: 700;
}

/* ===== عنوان القسم ===== */
.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-block: 1.5rem 0.75rem;
    padding-inline-start: 0.7rem;
    border-inline-start: 3px solid var(--moe-teal);
}

.section-heading-text {
    min-width: 0;
}

.section-heading-title {
    margin: 0;
    color: var(--moe-heading);
    font-size: 1.02rem;
    font-weight: 700;
}

.section-heading-description {
    margin: 0.15rem 0 0;
    color: var(--moe-text-muted);
    font-size: max(0.82rem, 12px);
}

.section-heading-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: max(0.82rem, 12px);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* ===== بطاقة المؤشر ===== */
.kpi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 100%;
    padding: 1rem 0.9rem 0.85rem;
    overflow: hidden;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
    background-color: var(--moe-surface);
    color: var(--moe-text);
    text-decoration: none;
}

/* النغمة إشارة لا خلفية: تلوّن الشريط والأيقونة فقط */
.kpi-card-top {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background-color: var(--moe-gray);
}

.kpi-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* الشارة تنزل سطرًا عند الضيق بدل أن تقصّ التسمية — انظر `.kpi-card-title`. */
    flex-wrap: wrap;
}

.kpi-card-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--moe-heading);
    background-color: var(--moe-surface-alt);
}

.kpi-card-title {
    margin: 0;
    /*
        حدٌّ أدنى للتسمية لا صفر: كانت `min-width: 0` فتنكمش أمام الشارة إلى ما لا
        يُقرأ (قِيست 24px عند 390 في بطاقة «مجموعات فعّالة» بشارة «بلا مشرف»).
        والتسمية هي ما يقول **أي رقم هذا**، والشارة سياقٌ ثانوي — فتنزل هي سطرًا.
    */
    flex: 1 1 auto;
    min-width: 6rem;
    color: var(--moe-text-muted);
    font-size: max(0.8rem, 12px);
    font-weight: 700;
}

/* الشارة لا تنكمش ولا تُقصّ: تبقى بحجم نصّها وتنزل سطرًا إن لم يتّسع الصفّ. */
.kpi-card-head > .status-badge {
    flex: 0 0 auto;
}

.kpi-card-value {
    color: var(--moe-heading);
    font-size: 1.55rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.kpi-card-hint {
    color: var(--moe-text-muted);
    font-size: max(0.76rem, 12px);
    line-height: 1.35;
}

.kpi-card-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    color: var(--moe-accent-text);
    font-size: max(0.78rem, 12px);
    font-weight: 700;
}

.kpi-card.is-link:hover,
.kpi-card.is-link:focus-visible {
    border-color: var(--moe-teal);
    box-shadow: var(--app-shadow);
}

.kpi-card.tone-info .kpi-card-top { background-color: var(--moe-blue); }
.kpi-card.tone-info .kpi-card-icon { color: var(--moe-link-strong); background-color: var(--moe-info-bg); }

.kpi-card.tone-success .kpi-card-top { background-color: var(--moe-green); }
.kpi-card.tone-success .kpi-card-icon { color: var(--moe-success-text); background-color: var(--moe-success-bg); }

.kpi-card.tone-warning .kpi-card-top { background-color: var(--moe-gold); }
.kpi-card.tone-warning .kpi-card-icon { color: var(--moe-warning-text); background-color: var(--moe-warning-bg); }

.kpi-card.tone-danger .kpi-card-top { background-color: var(--moe-danger); }
.kpi-card.tone-danger .kpi-card-icon { color: var(--moe-danger-text); background-color: var(--moe-danger-bg); }

/* ===== بند محجوب بقرار عمل ===== */
.blocked-decision {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-block: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--moe-border);
    border-inline-start: 3px solid var(--moe-gold);
    border-radius: var(--app-radius);
    background-color: var(--moe-surface-tint-soft);
}

.blocked-decision-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--moe-warning-text);
    background-color: var(--moe-warning-bg);
}

.blocked-decision-body {
    min-width: 0;
}

.blocked-decision-title {
    margin: 0 0 0.2rem;
    color: var(--moe-heading);
    font-size: 0.95rem;
    font-weight: 700;
}

.blocked-decision-text {
    margin: 0;
    color: var(--moe-text-muted);
    font-size: max(0.84rem, 12px);
}

.blocked-decision-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.6rem;
    margin: 0.6rem 0 0;
    font-size: max(0.82rem, 12px);
}

.blocked-decision-meta dt {
    color: var(--moe-text-muted);
    font-weight: 700;
}

.blocked-decision-meta dd {
    margin: 0;
}

/* ===== لوحة مساعد التحسين =====
   بلا توكن لون جديد: كل سطح وحدّ ونصّ من التوكنز الدلالية القائمة، فالوضع الليلي
   يصلها بلا نسخة ثانية تُنسى. */
.ai-panel {
    margin-block: 1.25rem;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
    background-color: var(--moe-surface);
    overflow: hidden;
}

.ai-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-block-end: 1px solid var(--moe-border);
    background-color: var(--moe-surface-alt);
}

.ai-panel-title {
    margin: 0;
    color: var(--moe-heading);
    font-size: 1rem;
    font-weight: 700;
}

.ai-panel-subtitle {
    margin: 0.15rem 0 0;
    color: var(--moe-text-muted);
    font-size: max(0.84rem, 12px);
}

/* الوسم الدائم: ليس تحذير خطأ بل بيان طبيعة المخرج، فلونه لون التنبيه لا الخطر. */
.ai-connector-badge {
    display: inline-flex;
    align-items: center;
    /*
        **تلتفّ ولا تعمد**: قيس في 390 أن معرّف النموذج وقف عمودًا جانبيًا فانتهت الجملة
        بـ«النموذج:» معلّقةً وبقي زرّ ⚙ وحيدًا تحتها (قياس المراجع 2026-09-10). والالتفاف
        يُنزل المعرّف تحت الجملة كاملةً.
    */
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 32rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--moe-warning-border);
    border-radius: 8px;
    color: var(--moe-warning-text-strong);
    background-color: var(--moe-warning-bg);
    font-size: max(0.8rem, 12px);
    font-weight: 600;
    line-height: 1.5;
}

.ai-panel-body {
    padding: 1rem;
}

/* لوحةُ «اسأل المساعد» (AI-6): صندوقٌ واحد بلا ترويسةٍ ولا جسمٍ منفصلَين.

   وهي **لا تُعيد استعمال `.ai-panel`** لأن ذاك يفصل ترويسةً مذيَّلةً عن جسمٍ مبطَّن
   ويخفي ما يفيض (`overflow: hidden`) — ولوحةُ الدليل عنوانٌ وحقلٌ وزرّان في صندوق.
   والتوكنز هي نفسها، فالمظهر واحد في الشاشتَين وفي الليلي بلا لونٍ حرفي.

   وتظهر في موضعَين: تبويبِ المودال (وله بطانتُه فتكفي حدودُها) وأعلى صفحة الدليل. */
.ai-guide {
    margin-block-end: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
    background-color: var(--moe-surface);
}

/* وأولُ عنوانٍ في اللوحة بلا هامشٍ علويّ: البطانة تكفي، والهامش يزيدها فتُقرأ فجوة. */
.ai-guide > :first-child {
    margin-block-start: 0;
}

.ai-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 0.75rem;
}

.ai-panel-status {
    margin: 0.75rem 0 0;
    min-height: 1.25rem;
    color: var(--moe-text-muted);
    font-size: max(0.84rem, 12px);
}

.ai-panel-status.is-error {
    color: var(--moe-danger-text);
    font-weight: 600;
}

.ai-panel-status.is-busy {
    color: var(--moe-info-text-strong);
}

.ai-panel-region {
    margin-block-start: 1rem;
    padding-block-start: 0.85rem;
    border-block-start: 1px solid var(--moe-border);
}

.ai-panel-region-title {
    margin: 0 0 0.35rem;
    color: var(--moe-heading);
    font-size: 0.95rem;
    font-weight: 700;
}

.ai-panel-note {
    margin: 0.35rem 0 0;
    color: var(--moe-text-muted);
    font-size: max(0.82rem, 12px);
}

/* المعاينة نصّ عادي يُقرأ كما أُرسل: لا تنسيق يوهم بأنه محتوى منسّق.
   والخطّ خطّ الواجهة لا خطّ `pre` الافتراضي: العربية في الخطّ الأحادي تتباعد حروفها
   فتُقرأ بعُسر، والمقصود من الوسم حفظ المسافات والأسطر — وذلك من `white-space`. */
.ai-preview-text {
    font-family: inherit;
    max-height: 22rem;
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
    background-color: var(--moe-surface-tint);
    color: var(--moe-text);
    font-size: max(0.8rem, 12px);
    white-space: pre-wrap;
    overflow: auto;
}

.ai-limitations {
    margin: 0 0 0.85rem;
    padding-inline-start: 1.2rem;
    color: var(--moe-warning-text-strong);
    font-size: max(0.82rem, 12px);
}

.ai-suggestion {
    margin-block-end: 0.85rem;
    padding: 0.75rem;
    border: 1px solid var(--moe-border);
    border-inline-start: 3px solid var(--moe-teal-dark);
    border-radius: var(--app-radius);
    background-color: var(--moe-surface-tint-teal);
}

.ai-suggestion .form-check {
    margin-block-end: 0.5rem;
}

.ai-suggestion-note {
    margin: 0.35rem 0 0;
    color: var(--moe-neutral-text);
    font-size: max(0.8rem, 12px);
}

/* ===== سلسلة التحسين ===== */
.chain-stepper {
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    margin: 0 0 1rem;
    padding: 0.6rem;
    list-style: none;
    overflow-x: auto;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
    background-color: var(--moe-surface);
}

.chain-step {
    flex: 1 1 0;
    min-width: 8.5rem;
}

.chain-step-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    height: 100%;
    padding: 0.6rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm);
    color: var(--moe-text);
    text-align: center;
    text-decoration: none;
}

a.chain-step-inner:hover,
a.chain-step-inner:focus-visible {
    border-color: var(--moe-teal);
    background-color: var(--moe-surface-tint-teal-soft);
}

.chain-step-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--moe-heading);
    background-color: var(--moe-surface-alt);
}

.chain-step-value {
    color: var(--moe-heading);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.chain-step-title {
    color: var(--moe-text-muted);
    font-size: max(0.78rem, 12px);
    font-weight: 700;
}

.chain-step-hint {
    color: var(--moe-text-muted);
    font-size: max(0.72rem, 12px);
}

.chain-step.is-complete .chain-step-icon {
    color: var(--moe-success-text);
    background-color: var(--moe-success-bg);
}

/* الحلقة التي تتوقف عندها الدورة تُقرأ بنظرة، ولونها ذهبي: انتباه لا خطر */
.chain-step.is-blocking .chain-step-inner {
    border-color: var(--moe-warning-border-strong);
    background-color: var(--moe-warning-bg);
}

.chain-step.is-blocking .chain-step-icon {
    color: var(--moe-warning-text);
    background-color: var(--moe-warning-border);
}

.chain-step-arrow {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--moe-muted-cool);
    font-size: max(0.75rem, 12px);
}

/* ===== لوحة «يتطلب قرارًا» ===== */
.decision-queue {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.decision-queue-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--moe-border);
    border-inline-start: 3px solid var(--moe-gray);
    border-radius: var(--app-radius-sm);
    background-color: var(--moe-surface);
}

.decision-queue-item.is-critical {
    border-inline-start-color: var(--moe-danger);
}

.decision-queue-item.is-warning {
    border-inline-start-color: var(--moe-gold);
}

.decision-queue-count {
    flex: 0 0 auto;
    min-width: 2.4rem;
    color: var(--moe-heading);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.decision-queue-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.decision-queue-title {
    font-size: 0.88rem;
    font-weight: 700;
}

.decision-queue-note {
    color: var(--moe-text-muted);
    font-size: max(0.78rem, 12px);
}

/* ===== شريط خطوات مساحة العمل ===== */
.workspace-nav {
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
    background-color: var(--moe-surface);
    overflow-x: auto;
}

.workspace-steps {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.workspace-step {
    flex: 0 0 auto;
}

.workspace-step-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.35rem 0.65rem;
    border-radius: var(--app-radius-sm);
    color: var(--moe-heading);
    font-size: max(0.84rem, 12px);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.workspace-step-link i {
    color: var(--moe-accent-text);
}

.workspace-step-link:hover {
    background-color: var(--moe-surface-alt);
}

.workspace-step-link.active {
    color: var(--moe-on-accent);
    background-color: var(--moe-teal-dark);
}

.workspace-step-link.active i {
    color: var(--moe-on-accent);
}

.workspace-step-arrow {
    flex: 0 0 auto;
    padding-inline: 0.1rem;
    color: var(--moe-muted-cool);
    font-size: max(0.75rem, 12px);
}

/* ===== صفحات الحالة: 404 و403 و500 (قسم 56) ===== */
.status-page {
    max-width: 34rem;
    margin-inline: auto;
    padding-block: clamp(1.5rem, 5vw, 3rem);
    text-align: center;
}

.status-page-icon {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--moe-accent-text);
    font-size: 2.4rem;
}

.status-page-icon.is-danger {
    color: var(--moe-danger-accent);
}

.status-page-reference {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius-sm);
    background-color: var(--moe-surface-tint);
    font-size: max(0.82rem, 12px);
}

/* ===== رسالة النجاح العابرة ===== */

/* تحت الشريط العلوي: الحاوية أعلى منه في z-index فلو ثبّتناها في الأعلى غطّت الشعار */
.app-toasts {
    position: fixed;
    inset-block-start: calc(var(--app-topbar-height) + 0.75rem);
    inset-inline-start: 0.75rem;
}

/*
    وعلى سطح المكتب بعد القائمة الجانبية لا فوقها. القيمة من `--app-sidebar-width`
    فتتبع الوضع المضغوط من نفسها بلا قاعدة ثانية.
*/
@media (min-width: 992px) {
    .app-toasts {
        inset-inline-start: calc(var(--app-sidebar-width) + 0.75rem);
    }
}

.status-page-reference code {
    color: var(--moe-heading);
}

.toast-success {
    border: 1px solid var(--moe-success-border);
    background-color: var(--moe-success-bg);
}

.toast-success .toast-body {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--moe-success-text-strong);
    font-weight: 700;
}

.toast-success .toast-body > i {
    color: var(--moe-positive-text);
    font-size: 1.05rem;
}

.toast-success .btn-close {
    margin-inline-start: auto;
}

/*
    الـTag Helper يصدر دائمًا `<ul><li style="display:none"></li></ul>` حتى بلا أخطاء،
    فلا ينطبق `:empty` ويظهر تنبيه أحمر فارغ أعلى كل شاشة. الإخفاء يتم بصنف الحالة
    `validation-summary-valid` الذي يقلبه jQuery Validation إلى `-errors` عند وجود خطأ.
*/
.validation-summary-valid,
.validation-summary:empty,
.validation-summary ul:empty {
    display: none;
}

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--moe-paper-veil);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/*
    لوح على الطبقة بدل نصٍّ سابح: الرسالة والشريط يقعان على سطحٍ مصمت، فيُقرآن فوق
    أي صفحة مهما كان محتواها تحت الضباب.
*/
.loading-panel {
    min-width: min(24rem, 88vw);
    max-width: 34rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--moe-border);
    border-radius: 0.75rem;
    background-color: var(--moe-surface);
    text-align: center;
}

.loading-progress {
    margin-top: 1rem;
}

.loading-progress .progress {
    height: 0.75rem;
}

/* التعبئة زخرفة لا تحمل نصًّا، فتأخذ لون الهوية الداكن الذي يظهر في الوضعين */
.loading-progress .progress-bar {
    background-color: var(--moe-teal-dark);
    transition: width 0.25s linear;
}

.loading-progress-text {
    margin-top: 0.5rem;
    /* سطر يحمل المرحلة والنسبة: 0.86rem تعطي 12.04px على جذر الجوال الأصغر */
    font-size: max(0.86rem, 12px);
    color: var(--moe-text-muted);
}

/* ===== Statuses ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0.2rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    /* شارة الحالة نصّ يحمل معلومة في كل شاشة: 0.74rem تعطي 10.36px على جذر الجوال */
    font-size: max(0.74rem, 12px);
    font-weight: 700;
    white-space: nowrap;
}

.status-neutral {
    color: var(--moe-neutral-text);
    background-color: var(--moe-neutral-bg);
    border-color: var(--moe-neutral-border);
}

.status-info {
    color: var(--moe-info-text-strong);
    background-color: var(--moe-info-bg);
    border-color: var(--moe-info-border);
}

.status-success {
    color: var(--moe-success-strong);
    background-color: var(--moe-success-bg);
    border-color: var(--moe-success-border-strong);
}

/*
    شارة مستوى التصنيف: لون النصّ والأيقونة والحدّ من توكن المستوى، والخلفية شفّافة
    فتُقرأ على الورق وعلى البطاقة وداخل صفوف الجدول بلا مستطيل ملوّن يزاحم الصفّ.
*/
.classification-excellence,
.classification-advancement,
.classification-launch,
.classification-preparation {
    background-color: transparent;
}

.classification-excellence {
    color: var(--moe-level-excellence);
    border-color: var(--moe-level-excellence);
}

.classification-advancement {
    color: var(--moe-level-advancement);
    border-color: var(--moe-level-advancement);
}

.classification-launch {
    color: var(--moe-level-launch);
    border-color: var(--moe-level-launch);
}

.classification-preparation {
    color: var(--moe-level-preparation);
    border-color: var(--moe-level-preparation);
}

.status-warning {
    color: var(--moe-warning-text);
    background-color: var(--moe-warning-bg);
    border-color: var(--moe-warning-border-deep);
}

.status-danger {
    color: var(--moe-danger-text-soft);
    background-color: var(--moe-danger-bg-soft);
    border-color: var(--moe-danger-border);
}

/*
    ===== بحث داخل القوائم الطويلة (WP-R / R1) =====

    بلا لون جديد: توكنز السطوح والحدود والنصوص القائمة وحدها، فالمكوّن يُقرأ في
    النهاري والليلي بلا قياس جديد. والعنصر الأصلي مخفيّ بصريًا ويبقى في النموذج.
*/
.searchable-select {
    position: relative;
}

/*
    الأصلي **لا يُخفى بـ`display: none`**: متصفحات تتجاهل التحقق على حقل مخفّى هكذا،
    وتقارير التحقق تفقد موضعها. فيُخرَج من الرؤية ويبقى في التخطيط بمقاس صفري.
*/
.searchable-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
}

.searchable-select-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: start;
}

.searchable-select-panel {
    position: absolute;
    z-index: 1050;
    inset-inline: 0;
    inset-block-start: calc(100% + 0.25rem);
    padding: 0.6rem;
    border: 1px solid var(--moe-border-strong);
    border-radius: var(--app-radius-sm);
    background: var(--moe-surface);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.searchable-select-search {
    margin-bottom: 0.5rem;
}

.searchable-select-list {
    max-height: 15rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.searchable-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--app-radius-sm);
    color: var(--moe-text);
    cursor: pointer;
}

.searchable-select-option:hover,
.searchable-select-option.is-active {
    background: var(--moe-surface-tint-teal);
}

/* المختار يُعلَم بعلامة نصّية لا بلون وحده (وصولية) */
.searchable-select-option[aria-selected="true"]::after {
    content: "✓";
    color: var(--moe-accent-text);
}

.searchable-select-option[aria-disabled="true"] {
    color: var(--moe-text-muted);
    cursor: default;
}

.searchable-select-option mark {
    padding: 0;
    background: var(--moe-warning-bg);
    color: var(--moe-warning-text);
}

.searchable-select-hint {
    flex-shrink: 0;
    font-size: max(0.78rem, 12px);
}

.searchable-select-group {
    padding: 0.35rem 0.5rem 0.2rem;
    color: var(--moe-text-muted);
    font-size: max(0.78rem, 12px);
    font-weight: 700;
}

.searchable-select-empty {
    margin: 0.35rem 0 0;
    color: var(--moe-text-muted);
    font-size: max(0.82rem, 12px);
}

/* الاختيار المتعدد: شريط لكل مختار وزرّ إزالة — لا قائمة يُضغط فيها Ctrl */
.searchable-select-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}

.searchable-select-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--moe-border-strong);
    border-radius: 999px;
    background: var(--moe-surface-tint);
    font-size: max(0.8rem, 12px);
}

.searchable-select-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--moe-text-muted);
    line-height: 1;
}

.searchable-select-chip-remove:hover,
.searchable-select-chip-remove:focus-visible {
    color: var(--moe-danger-text);
}

/* ===== Tables ===== */
.table {
    --bs-table-color: var(--moe-text);
    --bs-table-hover-bg: var(--moe-surface-tint-teal);
    margin-bottom: 0;
    border-color: var(--moe-neutral-bg-strong);
    font-size: 0.88rem;
}

.table > thead > tr > th {
    padding-block: 0.75rem;
    color: var(--moe-on-accent);
    background-color: var(--moe-navy);
    border-color: rgba(255, 255, 255, 0.13);
    font-weight: 700;
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding-block: 0.7rem;
    border-bottom-color: var(--moe-neutral-bg-deep);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.data-surface {
    overflow: hidden;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
    background-color: var(--moe-surface);
    box-shadow: var(--app-shadow);
}

.data-surface-header {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--moe-border);
}

.data-surface-title {
    color: var(--moe-heading);
    font-size: 1rem;
    font-weight: 700;
}

/*
    سطح يحمل جدولًا: نفس مظهر `.data-surface` مع تمرير أفقي **محصور داخله** بدل أن
    يدفع الصفحة كلها. المحدِّد بصنفين ليحكم على `overflow: hidden` في `.data-surface`
    حكمًا قاطعًا لا بترتيب الملفات.
*/
.data-surface.data-surface-table {
    overflow: visible;
    overflow-x: auto;
}

.data-surface-table > .table {
    margin-bottom: 0;
}

/*
    فخّ RTL في Chrome: الفيض القابل للتمرير لجدول عريض يتسرّب إلى
    `document.scrollWidth` رغم أن كل أسلافه مقصوصة و≤ عرض الشاشة (قيس 435 على
    390 في مصفوفة الصلاحيات، وكل الأسلاف ≤ 390). `contain: paint` يعزل الغلاف
    فيعود المستند إلى 390. يُوضع على **الغلاف المعنيّ وحده** لا على
    `.data-surface`: العزل يقصّ القوائم المنسدلة المطلقة داخل الأسطح الأخرى.
    التشخيص: جرّب الإصلاح على الصفحة الحية وقِس `document.scrollWidth` بعده —
    قياس الأسلاف وحده لا يكشف السبب هنا.
*/
.table-responsive.scroll-contained {
    contain: paint;
}

.data-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    color: var(--moe-neutral-text-soft);
    border: 1px solid var(--moe-border);
    border-radius: 999px;
    background-color: var(--moe-surface-tint-cool);
    font-size: max(0.72rem, 12px);
    white-space: nowrap;
}

.datatable-container {
    overflow: visible;
}

/*
    خلية الحالة الفارغة تحمل رسالة التحميل ثم رسالة «لا بيانات»، فتُوسَّط ولا
    تُلصق بالترويسة. وأثناء انتظار الصفوف الأولى تُحجز مساحة تقارب صفحة كاملة
    (`is-awaiting-rows` من `moe-datatable.js`) فيبقى الترقيم أسفلها ولا يتحرك
    عند وصول الصفوف — سبب انزياح التخطيط في صفحات DataTables.
*/
.datatable-container td.dataTables_empty {
    height: 170px;
    color: var(--moe-text-muted);
    text-align: center;
    vertical-align: middle;
}

.datatable-container.is-awaiting-rows td.dataTables_empty {
    height: 70vh;
}

.moe-datatable-meta,
.moe-datatable-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    color: var(--moe-text-muted);
    font-size: max(0.8rem, 12px);
}

.moe-datatable-meta {
    border-bottom: 1px solid var(--moe-surface-alt-cool);
}

.moe-datatable-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--moe-surface-alt-cool);
}

.moe-datatable-length label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.moe-datatable-length select {
    min-height: 34px;
    padding: 0.2rem 0.55rem 0.2rem 1.8rem;
    border-color: var(--moe-border-strong);
    border-radius: 7px;
}

table.dataTable.no-footer {
    border-bottom: 0 !important;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 0 !important;
}

table.dataTable tbody td {
    border-top-color: var(--moe-neutral-bg-deep) !important;
}

/*
    ===== محاذاة رأس العمود ببداية خليته (WP-S / S1) =====

    **السبب الجذري مُثبَت من CSS المُحمَّل** — ثلاث قواعد في
    `wwwroot/lib/DataTable/css/jquery.dataTables.min.css` مكتوبة لليسار-يمين:

    1. `table.dataTable thead th, … tfoot td { text-align: left }`
       الأثر الأكبر: في RTL يذهب نصّ الرأس إلى **اليسار** وخليته تبدأ من **اليمين**،
       فينزاح الرأس بعرض العمود كاملًا.
    2. `table.dataTable thead>tr>th.sorting… { padding-right: 26px }`
       مساحة أيقونة الفرز محجوزة على اليمين — وهو في RTL **جهة البداية** — فتدفع نصّ
       الرأس 26px عن حافة خليته.
    3. `table.dataTable>thead>tr>th { padding: 10px }` مقابل حشو خلايا Bootstrap
       `.table>:not(caption)>*>* { padding: .5rem }` = 8px. فرقُ 2px يقع عند حدّ
       القبول نفسه ويتراكم مع ما فوقه.

    والتجاوز هنا في `site.css` لا في ملف المكتبة (قاعدة `UX-UI-DESIGN-SYSTEM`)،
    و**بخصائص منطقية** لا `left/right`: الخاصية المنطقية تحلّ إلى الفيزيائية نفسها
    فتلغي قاعدة المكتبة، وتبقى صحيحة لو قُرئت الصفحة يسارًا-يمينًا يومًا.
*/
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
    text-align: start !important;
}

/*
    حشو الرأس **وحشو الخلية** يُضبطان معًا بالقيمة نفسها. ولا يكفي ضبط الرأس وحده:
    قِيس فبقي فرق **2.5px** لأن DataTables تعطي خلايا الجسم `padding: 8px 10px`
    (`table.dataTable tbody th, … tbody td`) بينما الرأس أخذ `0.5rem` = 7.5px على جذر
    15px. فالقاعدة على الطرفين، ووحدتها `rem` فتتبع حجم الخطّ المختار.
*/
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td {
    padding-inline: 0.5rem !important;
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled {
    /* مساحة الأيقونة على جهة **النهاية** وحدها؛ والبداية كبداية الخلية */
    padding-inline-start: 0.5rem !important;
    padding-inline-end: 1.9rem !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    /* الأيقونة عند جهة النهاية، داخل المساحة المحجوزة لها أعلاه */
    background-position: left 0.65rem center !important;
}

/*
    وجداول Razor: الرأس والخلية من الحافة نفسها صراحةً. `.table > thead > tr > th`
    كان يحمل `text-align: start` والخلية تتوارثه، والتصريح هنا يجعل القاعدة **مقروءة
    في موضع واحد** ويمنع خليةً تُمركِز محتواها من الانفراد بقاعدة محلية.
*/
.table > tbody > tr > td,
.table > tbody > tr > th {
    text-align: start;
}

/*
    الشارات تبدأ من بداية الخلية لا مركّزة: الشارة عنصر سطري يتبع `text-align`،
    إلا داخل حاوية flex — فتُضبط صراحةً.
*/
.table > tbody > tr > td > .d-flex,
.table > tbody > tr > td > .stage-cell,
.table > tbody > tr > td > .map-school-card-classification {
    justify-content: flex-start;
}

div.dataTables_wrapper div.dataTables_processing,
.dataTables_processing {
    inset-block-start: 50% !important;
    inset-inline-start: 50% !important;
    width: auto !important;
    min-width: 220px;
    height: auto !important;
    margin: 0 !important;
    padding: 0.9rem 1.25rem !important;
    transform: translate(50%, -50%);
    color: var(--moe-heading);
    border: 1px solid var(--moe-border) !important;
    border-radius: var(--app-radius-sm);
    background: var(--moe-surface) !important;
    box-shadow: var(--app-shadow);
    font-weight: 700;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    gap: 0.2rem;
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px;
    min-height: 34px;
    margin: 0 !important;
    padding: 0.35rem 0.6rem !important;
    color: var(--moe-text) !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--moe-heading) !important;
    border-color: var(--moe-border) !important;
    background: var(--moe-surface-tint-teal-strong) !important;
}

/*
    الصفحة الحالية تحمل رقمًا أبيض، فسطحها ليس زخرفة: `--moe-teal` يعطي 2.90،
    و`--moe-teal-dark` يعطي 4.84 — وهي القاعدة نفسها المكتوبة في CLAUDE.md.
    اللونان ثابتان بين الوضعين لأن هذا سطحٌ لا يتبع الورق.

    **بادئة `:root` ليست زينة.** ملف DataTables يُحقن في قسم `Styles` **بعد**
    `site.css`، وفيه `.paginate_button.current { color: inherit !important }`
    بنفس النوعية تمامًا (0,4,0) — فعند التعادل يفوز المتأخّر، ويرث الرقم لون
    الحاوية بدل الأبيض (1.05 نهاريًا). البادئة ترفع النوعية إلى (0,5,0) فتحسم.
*/
:root .dataTables_wrapper .dataTables_paginate .paginate_button.current,
:root .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--moe-on-accent) !important;
    border-color: var(--moe-teal-dark) !important;
    background: var(--moe-teal-dark) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.45;
}

.dt-row-number,
.dt-date {
    color: var(--moe-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dt-actions .btn {
    white-space: nowrap;
}

.dt-control {
    display: none;
}

.dt-mobile-details {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0.9rem 1rem;
    background-color: var(--moe-surface-tint-warm);
}

.dt-detail-item {
    display: grid;
    grid-template-columns: minmax(110px, 0.45fr) 1fr;
    gap: 0.75rem;
}

.dt-detail-item dt {
    color: var(--moe-text-muted);
    font-size: max(0.78rem, 12px);
}

.dt-detail-item dd {
    margin: 0;
    color: var(--moe-text);
}

/* الأرقام الوزارية نص LTR ولا تفقد الأصفار البادئة. */
.ministry-number {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
    color: var(--moe-heading);
    font-family: Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ===== Improvement semantics ===== */
.improvement-chain {
    align-items: center;
    gap: 0.25rem;
}

.improvement-chain .chain-arrow {
    color: var(--moe-muted-cool);
    padding-inline: 0.25rem;
    -webkit-user-select: none;
    user-select: none;
}

.measurement-official {
    border-inline-start: 3px solid var(--moe-green);
}

.measurement-operational {
    border-inline-start: 3px solid var(--moe-muted-soft);
}

/*
    بطاقة المجموعة (شاشة 13): المجموعة كيان لا صف بيانات، فتُعرض ببطاقة تحمل
    هويتها وحقائقها ثم **أسماء مدارسها** — وهي ما يعرّفها للمستخدم أكثر من عددها.
    الحقائق قائمة تعريف لا فقرات: كل حقيقة مسمّاة، وتقرأ على سطرين في الجوال.
*/
.group-card-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.75rem;
    margin: 0;
    /* 0.84rem تعطي 11.76px على جذر الجوال — والحقائق نصّ يُقرأ لا زخرفة */
    font-size: max(0.84rem, 12px);
}

.group-card-facts dt {
    color: var(--moe-text-muted);
    font-weight: 400;
}

.group-card-facts dd {
    margin: 0;
    color: var(--moe-text);
}

.group-card-schools {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius-sm);
    background-color: var(--moe-paper);
    list-style: none;
    font-size: max(0.82rem, 12px);
}

/*
    الاسم يلتفّ **داخل عرضه** والشارة تبقى في طرف السطر: `flex-wrap: wrap` كان
    يُنزل الشارة إلى سطر مستقل مع الأسماء الطويلة (13 صفًّا من 136)، وشارة بحرف
    وحدها بين اسمين تُنسب بصريًا لأيّهما. كان مقبولًا حين كانت المرحلة نصًّا يلتفّ
    معه، وصار عيبًا حين صارت كتلة 24px.
    `min-width: 0` على الرابط شرط لالتفافه: عنصر Flex لا ينزل تحت عرض محتواه بدونها.
    والشارة كتلة لا نصًّا فتُحاذى بالمركز لا بخط القاعدة.
*/
.group-card-schools li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.15rem 0.5rem;
    min-height: 26px;
}

.group-card-schools li > a {
    flex: 1 1 auto;
    min-width: 0;
}

.group-card-schools a {
    color: var(--moe-heading);
    text-decoration: none;
}

.group-card-schools a:hover,
.group-card-schools a:focus-visible {
    text-decoration: underline;
}

/*
    شارة المرحلة: لون لكل مرحلة **بقرار صاحب المشروع** (2026-09-05).
    ما يمنع خلطها بشارة الحالة هو **الشكل** لا اللون: هذه مربّع 24px بحرف، وتلك
    حبّة مستطيلة بكلمة. واللون قناة إضافية — الحرف والمفتاح والنص المخفي باقية.
    `max()` لا `rem` مجرّدة: جذر الصفحة 14px تحت 576px فتسقط `rem` تحت حدّ 12px.
*/
.stage-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 24px;
    min-height: 24px;
    padding-inline: 0.25rem;
    border: 1px solid var(--moe-border-strong);
    border-radius: var(--app-radius-sm);
    background-color: var(--moe-navy-tint);
    color: var(--moe-heading);
    font-size: max(0.8rem, 12px);
    font-weight: 700;
    line-height: 1;
}

.stage-badge.tone-navy { color: var(--moe-heading); background-color: var(--moe-navy-tint); }
.stage-badge.tone-teal { color: var(--moe-accent-text-strong); background-color: var(--moe-teal-tint); }
.stage-badge.tone-green { color: var(--moe-positive-text); background-color: var(--moe-success-bg); }
.stage-badge.tone-gold { color: var(--moe-warning-text); background-color: var(--moe-warning-bg); }
.stage-badge.tone-neutral { color: var(--moe-neutral-text); background-color: var(--moe-neutral-bg); }

/* قيمة لا يعرفها التخطيط: نصّها كاملًا، فتتسع الشارة ولا تُخمَّن لها حرف */
.stage-badge.is-full {
    padding-inline: 0.45rem;
    font-weight: 400;
}

/* الغائبة: إطار متقطّع يقول «لا قيمة» بلا أن يُقرأ خطأ عرض */
.stage-badge.is-missing {
    border-style: dashed;
    background-color: transparent;
    color: var(--moe-text-muted);
    font-weight: 400;
}

/*
    مفتاح الحروف: بلا هذا السطر تكون الشارة شفرة داخلية. يُعرض مرة واحدة أعلى
    الشبكة لا في كل بطاقة.
*/
.stage-legend,
.classification-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    color: var(--moe-text-muted);
    font-size: max(0.8rem, 12px);
}

.stage-legend li,
.classification-legend li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/*
    شريط توزيع التصنيف المضغوط: عددٌ فوق اسم مستوى، وكلٌّ رابط يفتح الصفوف التي
    عُدَّت فيه. بلا لون جديد — التوكنز الدلالية القائمة وحدها، لأن مستوى التصنيف
    ليس حالة نجاح أو خطر بل موضعٌ على مقياس.
*/
.classification-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.classification-strip a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius-sm);
    background: var(--moe-surface);
    color: var(--moe-text);
    font-size: max(0.78rem, 12px);
    text-decoration: none;
}

.classification-strip a:hover,
.classification-strip a:focus-visible {
    border-color: var(--moe-accent-text);
    color: var(--moe-accent-text);
}

.classification-strip-count {
    font-size: max(1.05rem, 16px);
    font-weight: 700;
    line-height: 1.1;
}

/*
    جنس المجموعة: صفة مشتقّة من مدارسها، تُعرض بقناتين — شارة نصّية في الترويسة
    وشريط سمة على حافة البطاقة. النص هو الحامل، والشريط تمييز سريع يعينه.
    ولا ألوان `status-*`: «بنات» ليست نجاحًا و«بنين» ليست تحذيرًا.
*/
.gender-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: max(0.72rem, 12px);
    font-weight: 700;
    white-space: nowrap;
}

.gender-badge.tone-boys { color: var(--gender-boys-text); background-color: var(--gender-boys-tint); }
.gender-badge.tone-girls { color: var(--gender-girls-text); background-color: var(--gender-girls-tint); }
.gender-badge.tone-mixed { color: var(--moe-neutral-text); background-color: var(--moe-neutral-bg); }

/*
    قواعد الجنس على البطاقة في صنف عام واحد تستهلكه بطاقة المجموعة وبطاقة المدرسة معًا:
    تكرار القواعد في صنفين يجعلهما يفترقان عند أول تعديل.
    وثلاث قنوات لا لون وحده: الشارة النصّية، والشريط، ومسحة الرأس.
*/
.gender-card.is-boys { border-inline-start: 4px solid var(--gender-boys); }
.gender-card.is-girls { border-inline-start: 4px solid var(--gender-girls); }

.gender-card-head {
    margin-inline: calc(-1 * var(--bs-card-spacer-x, 1rem));
    margin-block-start: calc(-1 * var(--bs-card-spacer-y, 1rem));
    margin-block-end: 0.6rem;
    padding: 0.6rem var(--bs-card-spacer-x, 1rem);
    border-block-end: 1px solid transparent;
}

/* رأس الصفحة يحمل العلامة نفسها: شريط على الحافة ومسحة خفيفة خلف العنوان */
.page-header.gender-card.is-boys,
.page-header.gender-card.is-girls {
    padding-inline-start: 0.9rem;
    border-radius: 10px;
}

.page-header.gender-card.is-boys {
    background-color: var(--gender-boys-tint);
    border-inline-start: 4px solid var(--gender-boys);
}

.page-header.gender-card.is-girls {
    background-color: var(--gender-girls-tint);
    border-inline-start: 4px solid var(--gender-girls);
}

.gender-card.is-boys > .card-body > .gender-card-head {
    background-color: var(--gender-boys-tint);
    border-block-end-color: var(--gender-boys);
}

.gender-card.is-girls > .card-body > .gender-card-head {
    background-color: var(--gender-girls-tint);
    border-block-end-color: var(--gender-girls);
}

.group-card-more {
    align-self: flex-start;
    font-size: max(0.8rem, 12px);
}

/* ===== سجل المدارس: العمودان الجديدان وبطاقة المدرسة ===== */

/*
    اسم المرحلة **ظاهر** بجوار الحرف في الجدول وفي البطاقة: نصّ مخفي داخل جدول
    يُبنى في المتصفح لا يكفي لفهم عمود، والحرف وحده شفرة بلا مفتاح.
*/
.stage-cell,
.school-card-stage {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.school-card-stage {
    margin-inline-start: 0.6rem;
    color: var(--moe-text-muted);
    font-size: max(0.8rem, 12px);
}

.dt-gender,
.dt-stage { white-space: nowrap; }

.school-card .card-title-sm { line-height: 1.35; }

/*
    ===== بطاقة المدرسة: رأس وجسم وتذييل (WP-S / §6) =====

    كان محتوى البطاقة أسطرًا حرّة، فالقيمة تبدأ حيث انتهت تسميتها وتتذبذب من صفّ إلى
    صفّ. والجسم الآن **قائمة تعريف على شبكة عمودَين**: التسميات في عمود بعرض أوسعها،
    والقيم كلها تبدأ من عمود واحد بلا استثناء.

    والرقم الوزاري انتقل إلى **سطر ثانوي في الرأس**: كان في صفّ التسميات بلا تسمية،
    فيُقرأ قيمةً لتسمية غائبة.
*/
.school-card-subline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    margin: 0.3rem 0 0;
    font-size: max(0.8rem, 12px);
}

.school-card-facts {
    display: grid;
    /* عمود التسمية بعرض أوسع تسمية، والقيم من عمود واحد */
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 0.75rem;
    margin: 0.85rem 0 0;
    font-size: max(0.84rem, 12px);
}

.school-card-facts dt {
    color: var(--moe-text-muted);
    font-weight: 400;
}

.school-card-facts dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--moe-text);
}

/* الدرجة رقمٌ يُقارَن بين البطاقات، فبخطّ رقمي متساوي العرض */
.school-card-score {
    font-variant-numeric: tabular-nums;
}

/*
    التذييل: «آخر تحديث» بيانٌ ثانوي في جهة البداية، وزرّ التفاصيل في جهة النهاية —
    فلا يبقى الوصول إلى التفاصيل معلّقًا على اسم المدرسة وحده. و`margin-top: auto`
    يدفعه إلى الأسفل فتصطفّ تذييلات البطاقات المتساوية الارتفاع.
*/
.school-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.85rem;
}

/*
    بيانات تواصل المدير تحت اسمه. أيقونة واتساب بلون النص لا بالأخضر التجاري:
    الهوية لا تستضيف لونًا لعلامة تجارية.
*/
.manager-contact {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-size: max(0.85rem, 13px);
}

.manager-contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 24px;
}

/* مبدّل طريقة العرض: رابطان لا زرّان — الوضع في الرابط فيُشارَك ويُحفظ في التاريخ */
.view-switch .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    font-size: max(0.8rem, 12px);
}

/*
    ===== روابط الكيانات: لا خطّ تحتي في الحالة الساكنة (WP-S / §6 و§7) =====

    رابط الكيان (اسم مدرسة، مجموعة، شخص) في **بطاقة أو خلية جدول** يعرف القارئ أنه
    رابط من موضعه: عنوانُ بطاقةٍ أو اسمٌ في عمود أسماء. والخطّ التحتي الدائم على عشرات
    الأسماء في صفحة واحدة يصير ضجيجًا يشوّش الشبكة.

    **وروابط النصّ الجاري في الفقرات تبقى بخطّها التحتي** — الفقرة لا تميّز الرابط
    إلا به، فحذفه هناك يُخفيه. ولذلك القاعدة محصورة بالبطاقات وخلايا الجداول.

    والخطّ يظهر عند `hover` و`focus-visible`: التمييز حاضر عند القصد، غائب عند القراءة.
*/
.card-title-sm a {
    color: var(--moe-heading);
    text-decoration: none;
}

.card-title-sm a:hover,
.card-title-sm a:focus-visible {
    text-decoration: underline;
}

/* في خلايا الجداول يبقى لون الرابط (فهو تمييزه هناك) ويسقط الخطّ الساكن وحده */
.table > tbody > tr > td a:not(.btn) {
    text-decoration: none;
}

.table > tbody > tr > td a:not(.btn):hover,
.table > tbody > tr > td a:not(.btn):focus-visible {
    text-decoration: underline;
}

/* وقائمة مدارس بطاقة المجموعة: أسماء كيانات كذلك */
.group-card-schools a {
    text-decoration: none;
}

.group-card-schools a:hover,
.group-card-schools a:focus-visible {
    text-decoration: underline;
}

/*
    تسجيل الحضور: التسمية سطر كامل قابل للنقر ارتفاعه هدف لمس، والمربّع لا
    يتقلّص معها. `.form-check` غير مستعمل هنا لأن التخطيط Flex لا عائم.
*/
.inline-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    margin-bottom: 0;
    cursor: pointer;
}

.inline-check .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

/* =====================================================================
   الوضع الليلي: تجاوزات ما لا يقرأ توكنزنا (WP-15-ب)
   ===================================================================== */

/*
    الشعار قاعدته «خلفية بيضاء ومساحة تنفس» (§4.3)، فلا يوضع على سطح داكن:
    يُعطى لوحة بيضاء مستديرة في الوضع الليلي وحده.
*/
:root[data-bs-theme="dark"] .app-brand-logo,
:root[data-bs-theme="dark"] .auth-brand img {
    padding: 0.25rem 0.4rem;
    border-radius: 10px;
    background-color: var(--moe-on-accent);
}

/*
    DataTables تحمّل CSS خارجيًّا لا تصله توكنزنا، فتبقى صفوفه فاتحة في الليلي.
    التجاوزات هنا لا في ملف المكتبة: الملف يُحدَّث فتضيع التعديلات.
*/
:root[data-bs-theme="dark"] .dataTables_wrapper,
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter,
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--moe-text);
}

:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input,
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--moe-surface);
    border-color: var(--moe-border);
    color: var(--moe-text);
}

/* `:not(.current)` يستثني الصفحة الحالية صراحةً: بدونه تفوز هذه القاعدة عليها
   بتأخّرها في الملف فيعود الرقم إلى لون النصّ العادي (4.19) فوق التركوازي. */
:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current) {
    color: var(--moe-text) !important;
    border-color: var(--moe-border);
}

:root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--moe-text-muted) !important;
}

:root[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_processing {
    background: var(--moe-surface) !important;
    color: var(--moe-text);
}

:root[data-bs-theme="dark"] table.dataTable tbody tr {
    background-color: var(--moe-surface);
    color: var(--moe-text);
}

:root[data-bs-theme="dark"] table.dataTable.stripe tbody tr.odd,
:root[data-bs-theme="dark"] table.dataTable tbody tr:nth-of-type(odd) {
    background-color: var(--moe-surface-alt);
}

/* =====================================================================
   تفضيلات العرض: الوضع وحجم الخط (WP-15)
   ===================================================================== */

.display-prefs {
    padding: 0.35rem 1rem 0.5rem;
}

.display-prefs-group + .display-prefs-group {
    margin-top: 0.55rem;
}

.display-prefs-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
    color: var(--moe-text-muted);
    font-size: max(0.78rem, 12px);
}

.display-prefs-options {
    display: flex;
    gap: 0;
}

/* مجموعة أزرار مقسّمة: الاختيار الواحد ظاهر بلا حاجة إلى قراءة كل الخيارات */
.display-prefs-options [data-pref] {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 32px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--moe-border-strong);
    background-color: var(--moe-surface);
    color: var(--moe-text);
    font-family: inherit;
    font-size: max(0.8rem, 12px);
    cursor: pointer;
}

.display-prefs-options [data-pref]:first-child {
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
}

.display-prefs-options [data-pref]:last-child {
    border-start-end-radius: 8px;
    border-end-end-radius: 8px;
}

.display-prefs-options [data-pref] + [data-pref] {
    border-inline-start: 0;
}

.display-prefs-options [data-pref]:hover {
    background-color: var(--moe-teal-tint);
}

.display-prefs-options [data-pref][aria-checked="true"] {
    background-color: var(--moe-teal-dark);
    border-color: var(--moe-teal-dark);
    color: var(--moe-on-accent);
    font-weight: 700;
}

.display-prefs-options [data-pref]:focus-visible {
    outline: 3px solid var(--moe-gold);
    outline-offset: -1px;
    z-index: 1;
}

/* =====================================================================
   تعليمات الصفحة — المحتوى من دليل المستخدم لا من العرض (WP-13)
   ===================================================================== */

.page-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

/*
    زر «؟» بجوار عنوان الصفحة. 32px هدف لمس مقبول بجوار عنوان، والحلقة عند التركيز
    شرط لأنه زر بلا نصّ ظاهر — اسمه الوصولي وحده يعرّفه.

    وحدّه `--moe-text-muted` لا `--moe-border-strong`: الحدّ هنا **يحمل معلومة** لا
    زخرفة — هو ما يقول إن هذا زرّ يُضغط، والزرّ بلا نصّ ظاهر لا شيء غيره يحدّ شكله.
    وحدّ البطاقات الفاتح (1.52 على الأبيض) يصلح لإطار بطاقة لا لحدّ عنصر تفاعلي.
*/
.page-help-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--moe-text-muted);
    border-radius: 50%;
    background-color: var(--moe-surface);
    color: var(--moe-accent-text);
    font-size: max(0.9rem, 14px);
    line-height: 1;
    cursor: pointer;
}

.page-help-button:hover {
    background-color: var(--moe-teal-tint);
    border-color: var(--moe-teal-dark);
    color: var(--moe-accent-text-strong);
}

.page-help-button:focus-visible {
    outline: 3px solid var(--moe-teal-dark);
    outline-offset: 2px;
}

.help-modal-source {
    color: var(--moe-text-muted);
    font-size: max(0.8rem, 12px);
}

.help-content {
    font-size: max(0.92rem, 14px);
    line-height: 1.75;
}

.help-content h3 {
    font-size: 1.05rem;
    color: var(--moe-heading);
    margin: 1.15rem 0 0.4rem;
}

.help-content ul,
.help-content ol { padding-inline-start: 1.3rem; }

.help-content li { margin-bottom: 0.3rem; }

.help-content p:last-child { margin-bottom: 0; }

/* شريط الحقائق: الغرض ومن يراها وكيف تصلها — أول ما يُقرأ، فيُقرأ دفعة واحدة */
.help-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.help-fact {
    background-color: var(--moe-paper);
    border: 1px solid var(--moe-border);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
}

.help-fact .bi {
    color: var(--moe-accent-text);
    margin-inline-end: 0.35rem;
}

.help-fact-label {
    font-weight: 700;
    color: var(--moe-heading);
    font-size: max(0.8rem, 12px);
}

.help-fact-body {
    display: block;
    margin-top: 0.2rem;
    font-size: max(0.85rem, 13px);
}

/* تنبيه القاعدة المقصودة: «ما لا تفعله الصفحة عمدًا» ليس تحذير خطأ بل تصريح قاعدة */
.help-callout {
    display: flex;
    gap: 0.6rem;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    margin: 0.9rem 0;
}

.help-callout .bi { font-size: 1.05rem; flex: 0 0 auto; }

.help-callout-title {
    font-weight: 700;
    color: var(--moe-heading);
    margin-bottom: 0.15rem;
}

.help-callout p:last-child { margin-bottom: 0; }

.help-callout.is-warning {
    background-color: var(--moe-warning-bg);
    border: 1px solid var(--moe-warning-border-soft);
}

.help-callout.is-warning .bi { color: var(--moe-warning-text); }

.help-callout.is-neutral {
    background-color: var(--moe-info-bg);
    border: 1px solid var(--moe-info-border-soft);
}

.help-callout.is-neutral .bi { color: var(--moe-info-text); }

.help-table { margin-bottom: 0.9rem; }
.help-table th { background-color: var(--moe-navy-tint); color: var(--moe-heading); }
.help-table th,
.help-table td { font-size: max(0.85rem, 13px); }

.help-term { margin-bottom: 1.1rem; }
.help-term h3 { margin-top: 0; }

/* تعليمات صفحات قالب الدخول: `details` بلا JS — القالب لا يحمّل حزمة Bootstrap */
.help-inline {
    margin-top: 1.15rem;
    border-top: 1px solid var(--moe-border);
    padding-top: 0.9rem;
}

.help-inline > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 32px;
    padding: 0.25rem 0.7rem;
    /* حدّ عنصر تفاعلي كحدّ زر «؟»: يحمل معلومة لا زخرفة */
    border: 1px solid var(--moe-text-muted);
    border-radius: 999px;
    background-color: var(--moe-surface);
    color: var(--moe-accent-text);
    font-size: max(0.85rem, 13px);
    cursor: pointer;
    list-style: none;
}

.help-inline > summary::-webkit-details-marker { display: none; }

.help-inline > summary:hover {
    background-color: var(--moe-teal-tint);
    border-color: var(--moe-teal-dark);
}

.help-inline > summary:focus-visible {
    outline: 3px solid var(--moe-teal-dark);
    outline-offset: 2px;
}

.help-inline-body {
    margin-top: 0.8rem;
    max-height: 46vh;
    overflow-y: auto;
}

/* ===== الدليل الكامل ===== */
.help-guide {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.4rem;
    align-items: start;
}

.help-toc {
    position: sticky;
    top: calc(var(--app-topbar-height) + 1rem);
    max-height: calc(100vh - var(--app-topbar-height) - 2rem);
    overflow-y: auto;
    background-color: var(--moe-surface);
    border: 1px solid var(--moe-border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

.help-search {
    margin-bottom: 0.8rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--moe-border);
}

.help-search .form-label {
    font-size: max(0.8rem, 12px);
    margin-bottom: 0.25rem;
}

.help-search-count {
    margin: 0.35rem 0 0;
    color: var(--moe-text-muted);
    font-size: max(0.78rem, 12px);
    min-height: 1.2em;
}

.help-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 2rem 1rem;
    color: var(--moe-text-muted);
    text-align: center;
}

.help-search-empty .bi { font-size: 1.5rem; }
.help-search-empty strong { color: var(--moe-heading); }

/* الإبراز يقع داخل نصّ الدليل، فلونه من لوحة التحذير لا لون متصفّح افتراضي */
.help-content mark[data-help-mark] {
    padding: 0 0.1em;
    border-radius: 3px;
    background-color: var(--moe-warning-bg);
    color: var(--moe-text);
}

.help-toc-title {
    font-weight: 700;
    color: var(--moe-heading);
    margin-bottom: 0.5rem;
    font-size: max(0.85rem, 13px);
}

.help-toc ol,
.help-toc ul { padding-inline-start: 1.1rem; margin-bottom: 0; }
.help-toc li { margin-bottom: 0.25rem; }
.help-toc a { font-size: max(0.8rem, 12px); text-decoration: none; }
.help-toc a:hover { text-decoration: underline; }

.help-guide-body {
    background-color: var(--moe-surface);
    border: 1px solid var(--moe-border);
    border-radius: 12px;
    padding: 1.2rem 1.4rem;
}

.help-chapter { margin-bottom: 2.2rem; }

.help-chapter > h2 {
    font-size: 1.3rem;
    color: var(--moe-heading);
    border-bottom: 2px solid var(--moe-teal-dark);
    padding-bottom: 0.35rem;
    margin-bottom: 0.9rem;
}

/* المرساة تقف تحت الشريط العلوي اللاصق لا خلفه */
.help-chapter,
.help-section { scroll-margin-top: calc(var(--app-topbar-height) + 1rem); }

.help-section { margin-bottom: 1.6rem; }

.help-section > h3 {
    font-size: 1.1rem;
    color: var(--moe-accent-text-strong);
    margin-bottom: 0.5rem;
}

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    :root {
        --app-topbar-height: 64px;
    }

    .help-guide { grid-template-columns: minmax(0, 1fr); }

    .help-toc {
        position: static;
        max-height: none;
    }

    .app-topbar {
        padding-inline: 0.85rem;
    }

    .app-brand-logo {
        width: 58px;
        height: 44px;
    }

    /*
        سطر الإدارة يختفي من الشارة دون 992 لا دون 576: `nowrap` يجعل عرضه أرضية
        صلبة لا تنضغط، فيدفع الشريط إلى فيض أفقي قرب 700px ويسحق حقل البحث عند 768.
        ولا يضيع الاسم: دون 992 تصير القائمة الجانبية منزلقة وترويستها (`d-lg-none`)
        تحمل اسم الإدارة — فهو ظاهر حيث القائمة مثبّتة، وفي ترويستها حيث هي منزلقة.
    */
    .app-brand-copy small {
        display: none;
    }

    .app-sidebar {
        min-height: 100vh;
        border-inline-start: 0;
    }

    .app-main {
        padding: 1.15rem 0.85rem 1.5rem;
    }

    .datatable-container {
        overflow-x: auto;
    }

    .dt-control {
        display: table-cell;
    }

    .moe-datatable .dt-secondary {
        display: none;
    }
}

@media (max-width: 767.98px) {
    /*
        هدف اللمس لا يقل عن 40px (قسم 12). المقاسات الأصغر مقبولة للفأرة لا للإصبع،
        فتُرفع كلها تحت هذه النقطة: الأزرار الصغيرة، ومفاتيح التبويب، وعناصر القوائم
        المنسدلة، وأزرار الترقيم، ومربّعات الاختيار داخل الصفوف.
    */
    .btn-sm,
    .table .btn-sm,
    .data-surface .btn-sm {
        min-height: 40px;
        min-width: 40px;
        padding-inline: 0.6rem;
    }

    .nav-tabs .nav-link,
    .dropdown-item,
    .page-link {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    /*
        مربّع الاختيار في أي موضع لا في الجداول وحدها: النماذج الطويلة (تسجيل
        الحضور، اختيار الصلاحيات) خارج `.table` فبقيت مربّعاتها 14px. 24px هو
        الحد الأدنى لهدف اللمس في WCAG 2.2، والتسمية توسّع منطقة النقر إلى 40.
    */
    .form-check-input {
        width: 24px;
        height: 24px;
        margin-block: 0.5rem;
    }

    .form-check-label {
        display: flex;
        align-items: center;
        min-height: 40px;
    }

    /* المربّع صار 24px، فتتسع الإزاحة المحفوظة له في Bootstrap (1.5em) */
    .form-check {
        padding-inline-start: 2rem;
    }

    .form-check .form-check-input {
        margin-inline-start: -2rem;
    }

    .permission-module-head .form-check {
        padding-inline-start: 2rem;
    }

    .table-stacked td[data-label=""] .btn + .btn {
        margin-inline-start: 0.35rem;
    }

    /* اسم المدرسة داخل بطاقة المجموعة رابط، فيلزمه هدف لمس كامل */
    .group-card-schools li {
        min-height: 40px;
    }

    .group-card-schools a {
        display: flex;
        align-items: center;
        min-height: 40px;
    }

    /*
        جدول يتجاوز خمسة أعمدة يصبح بطاقة لكل صف على الجوال: التسمية من `data-label`
        على الخلية، فلا يُكتب وسم بديل لكل صفحة (قسم 9: لا تُضغط عشرة أعمدة في عرض صغير).
    */
    .table-stacked thead {
        display: none;
    }

    .table-stacked,
    .table-stacked tbody,
    .table-stacked tr,
    .table-stacked td {
        display: block;
        width: 100%;
    }

    .table-stacked tr {
        padding: 0.6rem 0.85rem;
        border-bottom: 1px solid var(--moe-border);
    }

    .table-stacked tr:last-child {
        border-bottom: 0;
    }

    .table-stacked td {
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        padding: 0.2rem 0;
        border: 0;
    }

    .table-stacked td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        color: var(--moe-text-muted);
        font-size: max(0.74rem, 12px);
        font-weight: 700;
    }

    /* خلية الإجراءات بلا تسمية: الأزرار تقول نفسها */
    .table-stacked td[data-label=""]::before {
        content: none;
    }

    .table-stacked td[data-label=""] {
        margin-top: 0.35rem;
        gap: 0.35rem;
        flex-wrap: wrap;
    }

    /* السطر الأول هو معرّف الصف، فيقرأ كعنوان البطاقة */
    .table-stacked td:first-child {
        font-weight: 700;
    }

    /*
        الجدول المكدَّس على الجوال لا يتمرر أفقيًا، ففتح القصّ يمنع قطع القوائم
        المنسدلة داخل صفوفه. لكن الفتح مقصور على السطح الذي **يحوي** جدولًا
        مكدَّسًا فعلًا: الجدول غير المكدَّس (مصفوفة الصلاحيات مثلًا) يبقى تمريره
        محصورًا داخل حاويته، وإلا سرّب عرض خلاياه اللاصقة إلى المستند وأفاض الصفحة.
    */
    .data-surface.data-surface-table:has(> .table-stacked),
    .data-surface.data-surface-table:has(> .table-responsive > .table-stacked) {
        overflow-x: visible;
    }
}

@media (max-width: 575.98px) {
    /*
        الجذر الجوّال لكل حجم: «صغير» يبقى 14 (لا ينزل)، و«متوسط» 14 كما كان،
        و«كبير» 16. والقاعدة العامة تبقى للمتصفّح الذي لا يحمل السمة.
    */
    html[data-font-size="small"] { font-size: 14px; }
    html[data-font-size="medium"] { font-size: 14px; }
    html[data-font-size="large"] { font-size: 16px; }

    html {
        font-size: 14px;
    }

    .academic-year-chip span {
        display: none;
    }

    /* بطاقات الحقائق تحت بعضها على الجوال: ثلاث أعمدة تسحق النصّ */
    .help-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-brand-logo {
        width: 40px;
    }

    .topbar-actions {
        gap: 0.4rem;
    }

    /*
        ===== الشريط العلوي لا يتجاوز عرض النافذة على الجوال =====

        العيب كان مقيسًا لا نظريًا: على 375 كان احتياج الشريط ≈400px (هوية 148 +
        بحث 40 + إجراءات 160 + فراغان 28 + حاشيتان 24)، وابناه `min-width: auto`
        بحكم flex فلا ينضغطان — فتفيض الصفحة 13px، ويُقصّ زر حساب المستخدم عند
        الحافة اليسرى واسم المنصة عند اليمنى، وتُرسم الورقة السفلية من `x = -13`.

        والعلاج في أربعة أسباب لا في إخفاء الأثر:
        1. `min-width: 0` يجعل الانضغاط ممكنًا أصلًا.
        2. الفراغات والحواشي تضيق على الجوال — وهي أقل ما يُفقد.
        3. الشعار 40px بدل 50px.
        4. اسم المنصة يُقصّ بنقاط عند الضيق **ولا يُخفى**: هو هوية النظام، وترويسة
           القائمة المنزلقة تحمل اسم الإدارة لا اسم المنصة، فإخفاؤه يمحوه من
           الشاشة كلها.
    */
    .app-topbar {
        gap: 0.6rem;
        padding-inline: 0.7rem;
    }

    .topbar-brand-group,
    .topbar-actions {
        min-width: 0;
    }

    .app-brand {
        gap: 0.45rem;
        min-width: 0;
    }

    /*
        **قرار معلومة لا حكّ بكسلات:** اسم المنصة نصًّا يُخفى دون 576px.

        على 375 المتاح 360 فقط (شريط التمرير يأخذ 15 من يسار النافذة في RTL)،
        وعناصر الشريط السبعة كلها أهداف لمس بمقاسات دنيا لا تنضغط: زر القائمة
        والبحث والجرس وشريحتا العام والحساب. فجُرِّب جعل الاسم مصدر امتصاص
        (`flex` + `min-width: 0`) فانضغط إلى 62px و**قُصَّ بنقاط** — واسم الهوية
        مقصوصًا أسوأ من غيابه.

        والهوية لا تضيع: الشعار باقٍ ورابطه إلى الرئيسية، واسم المنصة في عنوان
        الصفحة (`<title>`) وفي التذييل الظاهر على الجوال، واسم الإدارة في ترويسة
        القائمة المنزلقة. والسطر الصغير (اسم الإدارة) مخفيّ دون 992 أصلًا.
    */
    .app-brand-copy {
        display: none;
    }

    .app-brand-copy strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
        الشريحتان تضيقان على الجوال لكن لا تنزلان عن 40px: كلتاهما هدف لمس
        (شريحة الحساب تفتح قائمة، وشريحة العام تقود إلى الأعوام الدراسية).
    */
    .academic-year-chip,
    .user-chip {
        min-height: 40px;
        padding-inline: 0.55rem;
    }

    .page-header,
    .filter-bar-heading,
    .data-surface-header,
    .moe-datatable-meta,
    .app-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .page-header .btn {
        width: 100%;
    }

    .data-source-badge {
        align-self: flex-start;
    }

    .moe-datatable-info {
        order: 2;
    }

    .moe-datatable-footer {
        align-items: center;
    }

    .table {
        font-size: max(0.82rem, 12px);
    }

    .moe-datatable th:nth-child(2),
    .moe-datatable td:nth-child(2),
    .moe-datatable th:nth-child(5),
    .moe-datatable td:nth-child(5) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    /*
        القاعدة أعلاه تُقصّر المدة ولا تُلغي الحركة نفسها. هذه المكونات تتحرك بـtransform
        أو بارتفاع متغيّر (طيّ الأقسام، ظهور الـToast، تدوير الأسهم)، فتُثبَّت صراحة:
        Bootstrap يحرّك `.collapsing` بالارتفاع و`.toast.fade` بالشفافية، وسهم القسم
        وزر الطيّ يدوران.
    */
    .collapsing {
        transition: none !important;
    }

    .toast.fade,
    .toast.showing {
        transition: none !important;
        opacity: 1 !important;
    }

    .sidebar-section-chevron,
    .sidebar-compact-icon,
    .group-context-chevron {
        transition: none !important;
    }

    .offcanvas,
    .offcanvas-lg {
        transition: none !important;
    }
}

@media print {
    /*
        **الطباعة نهارية دائمًا** مهما كان الوضع على الشاشة: الورق أبيض، وطباعة
        صفحة داكنة تستهلك الحبر وتُخرج نصًّا فاتحًا على أبيض لا يُقرأ. فتُعاد
        التوكنز إلى نسختها الفاتحة هنا بدل الاعتماد على السمة.
    */
    :root,
    :root[data-bs-theme="dark"] {
        --moe-paper: #ffffff;
        --moe-surface: #ffffff;
        --moe-text: #102a33;
        --moe-text-muted: #617179;
        --moe-border: #dbe4e6;
        --moe-border-strong: #c8d4d7;
    }

    .app-topbar,
    .app-sidebar,
    .app-footer,
    .filter-bar,
    .no-print {
        display: none !important;
    }

    .app-main {
        padding: 0;
    }

    body,
    .app-workspace,
    .data-surface {
        background: var(--moe-surface) !important;
        box-shadow: none !important;
    }
}

/* ===== شاشات الدخول — قالب _AuthLayout ===== */

.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 15%, var(--moe-focus-ring-faint), transparent 45%),
        radial-gradient(circle at 85% 80%, var(--moe-navy-veil), transparent 45%),
        var(--moe-paper);
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: clamp(1.4rem, 4vw, 2.2rem);
    background: var(--moe-surface);
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--moe-border);
}

.auth-brand img {
    width: 64px;
    height: 50px;
    object-fit: contain;
}

.auth-brand strong {
    display: block;
    color: var(--moe-heading);
    font-size: 1.05rem;
}

/* اسم الإدارة في بطاقة الدخول: معلومة لا زخرفة، فحجمه فوق حدّ 12px */
.auth-brand-org {
    display: block;
    color: var(--moe-text);
    font-size: max(0.85rem, 13px);
}

.auth-brand small {
    color: var(--moe-text-muted);
    font-size: max(0.8rem, 12px);
}

.auth-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--moe-heading);
    margin-bottom: 0.25rem;
}

.auth-subtitle {
    font-size: 0.86rem;
    color: var(--moe-text-muted);
    margin-bottom: 1.3rem;
}

.auth-footnote {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: max(0.8rem, 12px);
    color: var(--moe-text-muted);
}

.auth-denied {
    text-align: center;
}

.auth-denied > .bi {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 2.4rem;
    color: var(--moe-gold-text);
}

/* ===== سجل التدقيق ===== */

.audit-json {
    max-height: 320px;
    margin: 0;
    padding: 0.75rem;
    overflow: auto;
    font-size: max(0.78rem, 12px);
    line-height: 1.6;
    background: var(--moe-paper);
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ===== هوية المستخدم في الشريط العلوي ===== */

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.topbar-user-menu .dropdown-item .bi {
    margin-inline-end: 0.4rem;
}

.topbar-user-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== الأدوار والصلاحيات ===== */

/*
    بطاقة الدور: لمحة عن الدور وإجراءاته. الدور النظامي يُميَّز بحد كحلي لا بلون
    صارخ — المعنى «مقفل»، لا «خطر».
*/
.role-card {
    border-inline-start: 4px solid var(--moe-gray);
}

.role-card.is-system {
    border-inline-start-color: var(--moe-navy);
}

.role-card.is-custom {
    border-inline-start-color: var(--moe-teal);
}

.role-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius-sm);
    background-color: var(--moe-paper);
}

.role-card-stats dt {
    color: var(--moe-text-muted);
    font-size: max(0.74rem, 12px);
    font-weight: 400;
}

.role-card-stats dd {
    margin: 0;
    color: var(--moe-heading);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/*
    مصفوفة الصلاحيات: العمود الأول ثابت عند التمرير الأفقي حتى يبقى اسم الصلاحية
    مقروءًا مع كل عمود دور. صف الوحدة فاصل مرئي لا عنوان جدول جديد.
*/
.permission-matrix {
    border-collapse: separate;
    border-spacing: 0;
}

.permission-matrix .pm-sticky {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    min-width: 240px;
    background-color: var(--moe-surface);
    box-shadow: -1px 0 0 var(--moe-border) inset;
}

.permission-matrix > thead .pm-sticky {
    background-color: var(--moe-navy);
}

.permission-matrix .pm-role {
    min-width: 150px;
    text-align: center;
    white-space: normal;
}

.permission-matrix .pm-role-name {
    display: block;
    color: var(--moe-on-accent);
    font-weight: 700;
    text-decoration: none;
}

.permission-matrix .pm-role-name:hover {
    text-decoration: underline;
}

.permission-matrix .pm-role-name .bi {
    color: var(--moe-gold-text);
    margin-inline-end: 0.25rem;
}

.permission-matrix .pm-role-meta {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: max(0.72rem, 12px);
    font-weight: 400;
}

.permission-matrix .pm-module > th {
    padding-block: 0.6rem;
    color: var(--moe-heading);
    background-color: var(--moe-surface-alt);
    border-bottom: 1px solid var(--moe-border);
    font-size: max(0.82rem, 12px);
    font-weight: 700;
}

.permission-matrix .pm-module > th code {
    margin-inline-start: 0.5rem;
    color: var(--moe-text-muted);
    font-weight: 400;
}

.permission-matrix .pm-permission {
    font-weight: 400;
}

.permission-matrix .pm-permission-name {
    display: block;
    color: var(--moe-text);
}

.permission-matrix .pm-permission-code {
    display: block;
    color: var(--moe-text-muted);
    font-size: max(0.72rem, 12px);
}

.permission-matrix .pm-cell {
    text-align: center;
    font-size: 1.1rem;
}

.permission-matrix .pm-cell.is-granted {
    color: var(--moe-positive-text);
    background-color: var(--moe-success-bg);
}

.permission-matrix .pm-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--moe-gray);
}

.permission-matrix .pm-scope .pm-sticky {
    background-color: var(--moe-warning-bg);
}

/*
    صف النطاق خلفيته ذهبية فاتحة، و`text-muted` عليها يفشل AA. رمز الصلاحية
    ينتقل إلى نص الذهبي المعتمد (var(--moe-warning-text)) فيبقى ثانويًا ومقروءًا معًا.
*/
.permission-matrix .pm-scope .pm-permission-code {
    color: var(--moe-warning-text);
}

.permission-matrix .pm-total {
    color: var(--moe-heading);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background-color: var(--moe-paper);
}

.permission-matrix > tfoot .pm-sticky {
    color: var(--moe-heading);
    background-color: var(--moe-paper);
}

/* اختيار الصلاحيات في نموذج الدور: وحدة تُختار كاملة أو صلاحية صلاحية. */
.permission-module {
    margin-bottom: 0.9rem;
    padding: 0;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius-sm);
    overflow: hidden;
}

.permission-module:disabled {
    opacity: 0.85;
}

.permission-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.6rem 0.9rem;
    float: none;
    background-color: var(--moe-surface-alt);
    border-bottom: 1px solid var(--moe-border);
    font-size: 0.9rem;
}

.permission-module-head .form-check {
    padding-inline-start: 1.75rem;
}

.permission-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.4rem;
    padding: 0.6rem;
}

.permission-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.permission-option:hover {
    background-color: var(--moe-surface-tint-teal);
    border-color: var(--moe-border);
}

.permission-option:has(input:checked) {
    background-color: var(--moe-success-bg);
    border-color: var(--moe-success-border-strong);
}

.permission-option.is-scope:has(input:checked) {
    background-color: var(--moe-warning-bg);
    border-color: var(--moe-warning-border-deep);
}

.permission-option .form-check-input {
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.permission-option-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.permission-option-name {
    font-size: 0.88rem;
}

.permission-option-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--moe-text-muted);
    font-size: max(0.72rem, 12px);
}

.permission-option-meta .status-badge {
    min-height: 20px;
    padding-block: 0;
    font-size: max(0.68rem, 12px);
}

/* اختيار الأدوار في نموذج المستخدم: بطاقة قابلة للنقر كاملة، لا مربع صغير. */
.role-options {
    display: grid;
    gap: 0.6rem;
}

.role-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.role-option:hover {
    border-color: var(--moe-teal);
}

.role-option.is-selected {
    border-color: var(--moe-teal);
    background-color: var(--moe-surface-tint-teal-deep);
    box-shadow: 0 0 0 1px var(--moe-teal) inset;
}

.role-option .form-check-input {
    flex: 0 0 auto;
    margin-top: 0.25rem;
}

.role-option-body {
    min-width: 0;
}

.role-option-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* محصلة الصلاحيات الفعلية: مجموعات صغيرة بأسماء مقروءة، والكود في التلميح. */
.effective-module {
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--moe-surface-alt-cool);
}

.effective-module:last-child {
    border-bottom: 0;
}

.effective-module-name {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--moe-heading);
    font-size: max(0.78rem, 12px);
    font-weight: 700;
}

.effective-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.effective-list li {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--moe-neutral-border);
    border-radius: 999px;
    background-color: var(--moe-surface-tint-navy);
    font-size: max(0.76rem, 12px);
}

.effective-list li.is-scope {
    color: var(--moe-warning-text);
    background-color: var(--moe-warning-bg);
    border-color: var(--moe-warning-border-deep);
}

/* ===== لافتة الوجهة في قائمة المجموعات ===== */

/*
    المستخدم الذي جاء من رابط يحتاج مجموعة يرى ما جاء لأجله أعلى القائمة،
    ويعود إلى التصفح العادي بنقرة.
*/
.target-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    color: var(--moe-heading);
    border: 1px solid var(--moe-info-border);
    border-inline-start: 4px solid var(--moe-teal);
    border-radius: var(--app-radius-sm);
    background-color: var(--moe-info-bg);
}

.target-banner-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    color: var(--moe-on-accent);
    border-radius: 9px;
    background-color: var(--moe-teal-dark);
    font-size: 1.1rem;
}

@media (max-width: 575.98px) {
    .role-card-stats {
        grid-template-columns: 1fr;
    }

    .permission-matrix .pm-sticky {
        min-width: 190px;
    }

    .target-banner {
        flex-wrap: wrap;
    }

    .target-banner .btn {
        margin-inline-start: 0 !important;
        width: 100%;
    }
}

/* ===== منتقي التاريخ الموحّد — takamul-datepicker ===== */

/*
    الأنماط هنا في `site.css` لا في ملف مستقل عن قصد: أدوات القياس الثلاث
    (`check-contrast.py` و`check-css-tokens.py` و`check-font-sizes.py`) تقرأ هذا
    الملف، فملفٌ جديد كان سيمرّ بلا تباين مقيس ولا تغطية توكنز ولا حدّ أدنى لحجم
    الخط. ولا لون حرفي هنا: كل قيمة توكن له نسختاه.
*/

.takamul-date {
    position: relative;
    display: block;
}

/*
    زر التقويم في **نهاية الحقل البصرية** (يساره في صفحة عربية)، والحقل نفسه
    `dir="ltr"` لأن `2026-09-07` تُقرأ يسارًا-إلى-يمين. ولذلك المسافة المحجوزة له
    `padding-left` صريحة لا `padding-inline-end`: الأخيرة تُحسب باتجاه الحقل نفسه
    (ltr) فتحجز الجهة المقابلة ويتراكب النصّ مع الأيقونة — وقد وقع في المعاينة.
*/
.takamul-date > .form-control {
    padding-left: 2.4rem;
}

.takamul-date-toggle {
    position: absolute;
    left: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--moe-accent-text);
    font-size: max(1rem, 15px);
    cursor: pointer;
}

.takamul-date-toggle:hover {
    background: var(--moe-surface-tint-teal-soft);
    color: var(--moe-accent-text-strong);
}

.takamul-date-toggle:focus-visible {
    outline: 2px solid var(--moe-focus-ring);
    outline-offset: 1px;
}

.takamul-date > .form-control:disabled + .takamul-date-toggle,
.takamul-date > .form-control[readonly] + .takamul-date-toggle {
    color: var(--moe-text-muted);
    cursor: not-allowed;
}

.takamul-date-error {
    margin-top: 0.3rem;
    color: var(--moe-danger-text);
    font-size: max(0.82rem, 12px);
}

/* ===== المنبثق ===== */

.takamul-date-popover {
    position: fixed;
    z-index: 1090; /* فوق نافذة Bootstrap (1055) حتى يُرى داخلها */
    width: 19rem;
    max-width: calc(100vw - 1rem);
    padding: 0.6rem;
    background: var(--moe-surface);
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

.takamul-date-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.takamul-date-head .form-select {
    flex: 1 1 auto;
    min-width: 0;
    font-size: max(0.85rem, 13px);
}

.takamul-date-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--moe-border);
    border-radius: var(--app-radius-sm);
    background: var(--moe-surface);
    color: var(--moe-heading);
    cursor: pointer;
}

.takamul-date-nav:hover:not(:disabled) {
    background: var(--moe-surface-tint-teal-soft);
    border-color: var(--moe-teal-soft-border);
}

.takamul-date-nav:disabled {
    color: var(--moe-text-muted);
    cursor: not-allowed;
}

.takamul-date-nav:focus-visible,
.takamul-date-day:focus-visible {
    outline: 2px solid var(--moe-focus-ring);
    outline-offset: 1px;
}

.takamul-date-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.takamul-date-grid th {
    padding-bottom: 0.3rem;
    color: var(--moe-text-muted);
    font-size: max(0.78rem, 12px);
    font-weight: 600;
    text-align: center;
}

.takamul-date-grid td {
    padding: 1px;
    text-align: center;
}

.takamul-date-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.1rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm);
    background: transparent;
    color: var(--moe-text);
    font-size: max(0.9rem, 13px);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.takamul-date-day:hover:not(:disabled) {
    background: var(--moe-surface-tint-teal-soft);
}

.takamul-date-day:disabled {
    color: var(--moe-text-muted);
    cursor: not-allowed;
}

/* اليوم الحالي محدَّد بالحدّ لا باللون وحده: اللون قناة إضافية لا وحيدة. */
.takamul-date-day.is-today {
    border-color: var(--moe-teal-soft-border);
    font-weight: 700;
}

/* المختار على `--moe-teal-dark` وحده: الأبيض على `--moe-teal` يفشل AA. */
.takamul-date-day.is-selected {
    background: var(--moe-teal-dark);
    border-color: var(--moe-teal-dark);
    color: var(--moe-on-accent);
    font-weight: 700;
}

.takamul-date-foot {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--moe-border);
}

.takamul-date-foot .btn {
    flex: 1 1 auto;
    font-size: max(0.82rem, 12px);
}

.takamul-date-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1089;
    background: var(--moe-backdrop);
}

/* ===== الجوال: ورقة سفلية بأهداف لمس ≥44px ===== */

@media (max-width: 575.98px) {
    .takamul-date-popover--sheet {
        inset: auto 0 0 0;
        width: auto;
        max-width: none;
        padding: 0.75rem 0.75rem 1.1rem;
        border-inline: 0;
        border-bottom: 0;
        border-radius: var(--app-radius) var(--app-radius) 0 0;
    }

    .takamul-date-popover--sheet .takamul-date-nav {
        width: 44px;
        height: 44px;
    }

    .takamul-date-popover--sheet .takamul-date-head .form-select {
        min-height: 44px;
    }

    .takamul-date-popover--sheet .takamul-date-day {
        min-height: 44px;
        font-size: max(0.95rem, 14px);
    }

    .takamul-date-popover--sheet .takamul-date-foot .btn {
        min-height: 44px;
    }
}

/* الورقة والمنبثق لا يُطبعان: التقويم أداة إدخال لا محتوى وثيقة. */
@media print {
    .takamul-date-popover,
    .takamul-date-backdrop,
    .takamul-date-toggle {
        display: none !important;
    }
}

/*
    نصّ مخرج مرفوض — للتشخيص في صفحة الإعدادات.

    يلتفّ ولا يمدّ الصفحة أفقيًا، ويحدّ ارتفاعه فلا يدفع ما بعده: نصُّ نموذجٍ قد يبلغ
    آلاف المحارف، وصفحةٌ تطول به تُفقد ما تحته.
*/
.ai-rejected-output {
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 18rem;
    overflow-y: auto;
}

/*
    زرّ إجراءات الصفّ (⋮) في جداول الإعدادات.

    **حدُّ هدف اللمس لا الجمال:** قيس أن الزرّ صار 21px في 768 — أضيقَ من 24×24 —
    فصار الضغط عليه يخطئ إلى الصفّ. و2.5rem هو عرضُ بقية أزرار الأيقونات في المنصة،
    فيتّسق معها ولا يُخترع له مقاس.
*/
.ai-row-actions {
    min-width: 2.5rem;
}

/*
    مقبضُ الطيّ في شاشات الذكاء الاصطناعي (`<summary>`).

    **حدُّ هدف اللمس لا الجمال:** قيس أن «التفصيل» في شاشة المفتاح صار 22px ارتفاعًا في
    390 — أقصرَ من 24×24 — فصار الضغط عليه يخطئ. والحشوةُ الرأسية أرخص من ارتفاعٍ ثابت:
    النصّ قد يلتفّ سطرَين فيكبر الصندوق معه.
*/
.ai-disclosure {
    padding-block: 0.25rem;
}

/*
    ترويسةُ مجموعةِ مزوّدٍ في كتالوج النماذج (`AI-8`).

    **تُقرأ عنوانًا لا صفًّا:** التجميع بالمزوّد هو ما ألغى عمودًا يتكرّر، فيجب أن
    يظهر الفاصلُ بينه وبين صفوفه. والخلفية من توكن السطح الخافت لا من لونٍ حرفيّ،
    فتتبدّل مع النهاري والليلي.
*/
.ai-catalog-group > th {
    background-color: var(--moe-surface-alt);
    font-weight: 600;
}

/*
    الأيقونة وجملة الشارة وحدةٌ واحدة لا تنفصل.

    قيس في 390 (المراجعة البصرية 2026-09-10): كانت الأيقونة عنصرًا مستقلًا في شارةٍ
    ملتفّة، فوقفت وحدها في السطر الأول والجملة تحتها — والمقصود من الالتفاف أن يَنزل
    **معرّف النموذج** وحده. فصارت الأيقونة والجملة في عنصر واحد يلتفّ داخليًّا.
*/
.ai-connector-message {
    display: inline;
}

/*
    نصّ نسخة المسودة في شاشة القراءة.

    يلتفّ ولا يمدّ الصفحة أفقيًا، وبحدّ ارتفاعٍ فلا تدفع نسخةٌ طويلة ما بعدها: مسودةٌ
    بأربع نسخ تجعل الصفحة أمتارًا، وما يُقرأ أولًا يجب أن يبقى قريبًا.
*/
.ai-draft-content {
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 22rem;
    overflow-y: auto;
}

/* ===================================================================
   نسخةُ الطباعة (`SA-5`) — ورقةٌ لها تخطيطُها لا شاشةٌ أُخفيت أجزاؤها
   ===================================================================

   `@page` يضبط مقاسَ الورقة وهوامشها؛ وما دونه يضبط الشاشةَ **نفسها** حتى يرى مَن
   يفتح النسخة ما سيُطبع لا شيئًا آخر. ولا لونَ حرفيًّا هنا: التوكنز وحدها
   (يحرسه `tools/check-css-tokens.py`).
*/
@page {
    size: A4;
    margin: 18mm 16mm;
}

.print-body {
    background-color: var(--moe-neutral-bg);
    color: var(--moe-text);
}

.print-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 1rem;
}

.print-sheet {
    background-color: var(--moe-paper);
    border: 1px solid var(--moe-border);
    margin: 0 auto 2rem;
    max-width: 210mm;

    /*
        **قصُّ الختم عند حدّ الورقة** (قياس المراجع 2026-09-10): ختمُ «مسودة» مائلٌ
        داخل الورقة، وتدويرُه يوسّع صندوقَه بصريًّا فيخرج ~5px عن الورقة عند 390
        فيُعطي الصفحة تجاوزًا أفقيًّا. والنسخةُ المعتمدة — بلا ختم — كانت بصفر تجاوز.

        و`clip` لا `hidden` بقصد: **لا يُنشئ حاويةَ تمرير**، فلا يسرق تمريرَ الجداول
        داخل الورقة ولا يقصّ رأسيًّا (`overflow-y` يبقى `visible`). والمقصوصُ زوايا
        ختمٍ شفافيتُه 0.18 — لا نصًّا يُقرأ.
    */
    overflow-x: clip;
    padding: 2rem;
    position: relative;
}

.print-header {
    align-items: center;
    border-bottom: 2px solid var(--moe-border-strong);
    display: flex;
    gap: 1rem;
    padding-bottom: 1rem;
}

.print-logo {
    height: 3.5rem;
    width: auto;
}

.print-authority {
    color: var(--moe-heading);
    font-weight: 700;
}

.print-organization {
    color: var(--moe-text);
}

.print-platform {
    color: var(--moe-text-muted);
    font-size: 0.875rem;
}

.print-title {
    color: var(--moe-heading);
    font-size: 1.5rem;
    margin: 1.5rem 0 1rem;
}

.print-meta {
    display: grid;
    gap: 0.25rem 1rem;
    grid-template-columns: max-content 1fr;
    margin-bottom: 1.5rem;
}

.print-meta dt {
    color: var(--moe-text-muted);
    font-weight: 600;
}

.print-meta dd {
    margin: 0;
}

.print-section {
    border-bottom: 1px solid var(--moe-border);
    color: var(--moe-heading);
    font-size: 1.125rem;
    margin: 1.5rem 0 0.75rem;
    padding-bottom: 0.25rem;
}

.print-table {
    /*
        الجدولُ **لا يُقسَم على ورقتَين في منتصف صفّه**: صفٌّ نصفُه في ورقة ونصفُه في
        أخرى يُقرأ رقمًا بلا مؤشره.
    */
    page-break-inside: avoid;
    width: 100%;
}

.print-note {
    color: var(--moe-text-muted);
    font-size: 0.875rem;
}

.print-notes {
    /* الملاحظةُ نصٌّ كُتب بسطوره: تُطبع كما كُتبت لا فقرةً واحدة. */
    white-space: pre-wrap;
}

/*
    ختمُ «مسودة» — مائلٌ في وسط الورقة، **خلف النصّ لا فوقه**: ختمٌ يحجب رقمًا
    يجعل الورقة غير مقروءة، والمقصودُ أن تُقرأ وتُعرف مسودةً.
*/
.print-draft-stamp {
    color: var(--moe-danger-text-soft);
    font-size: 5rem;
    font-weight: 700;
    inset-block-start: 40%;
    inset-inline-start: 0;
    opacity: 0.18;
    pointer-events: none;
    position: absolute;
    text-align: center;
    transform: rotate(-24deg);
    width: 100%;
    z-index: 0;
}

/*
    الختمُ أصغرُ في الشاشات الضيقة: 5rem في ورقةٍ بعرض 390 يقارب عرضَها كلَّه، فيصير
    ما يُقصّ من زواياه أكثرَ مما يُقرأ منه.
*/
@media (max-width: 480px) {
    .print-draft-stamp {
        font-size: 3rem;
    }
}

.print-footer {
    border-top: 1px solid var(--moe-border);
    color: var(--moe-text-muted);
    /* 0.875rem لا 0.8125rem: الأصغرُ يقع دون 12px عند جذر 14px (فحص أحجام الخط). */
    font-size: 0.875rem;
    margin-top: 2rem;
    padding-top: 0.75rem;
    text-align: center;
}

@media print {
    .print-body {
        background-color: var(--moe-paper);
    }

    .print-sheet {
        border: 0;
        margin: 0;
        max-width: none;
        padding: 0;
    }

    /* الترويسةُ والتذييلُ يتكرّران في كل ورقة: الوثيقةُ تُعرف من أي صفحةٍ منها. */
    .print-header {
        position: running(printHeader);
    }

    .print-section {
        page-break-after: avoid;
    }
}

/*
    نصُّ الرسالة في خيط المراسلة (`MOD-MSG`).

    **يُحفظ بأسطره**: الرسالةُ نصٌّ كتبه إنسان بفقراته، وعرضُها فقرةً واحدة يفسد
    معناها. و`pre-wrap` لا `<br>` مُركَّبة: النصُّ يُعرض **هروبًا** ولا يُصيَّر HTML —
    ورسالةٌ يكتبها مستخدمٌ ويقرؤها آخر أخصبُ موضعٍ لـXSS في النظام.

    ويلتفّ ولا يمدّ الصفحة أفقيًّا: رابطٌ طويل بلا مسافة كان يدفع الجدول.
*/
.message-body {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}