/* ==================================================================
   لغة تصميم الجداول والنماذج — منقولة عن «سكاراب CRM»
   ==================================================================

   ما نُقل: الفونت (IBM Plex Sans Arabic) · معالجة الجداول · معالجة
   النماذج والأزرار. وما لم يُنقل عمدًا:

   1. **القائمة الجانبية** — تبقى كما هي بطلب صريح. فلا قاعدة هنا تمسّ
      `.hifz-sidebar` ولا `.app-sidebar` ولا متغيراتها. والفونت وحده
      يبلغها، لأنه يرث من `body` وهو المطلوب.

   2. **اللون الأساسي** — المرجع بنفسجي `#4f46e5`، وهويّتنا زمرّدية
      `#0d7c66` مع الذهبي. ونقلُ البنفسجي يجعل زرَّ الحفظ يصادم قائمةً
      جانبية زمرّدية طُلب إبقاؤها. فالمنقول **لغة الشكل** لا لوحة
      الألوان: الاستدارات والحدود وحلقات التركيز وسلّم الخط والظلال
      ورؤوس الجداول. واللون يبقى لنا.

   ويُحمَّل هذا الملف **آخرًا** بعد `app.css` و`hifz-theme.css`، فما
   هنا يغلب ما قبله بلا `!important` إلا حيث يزاحمه Bootstrap نفسه.

   والمتغيرات كلها ببادئة `--ui-` عمدًا: `--primary` و`--border`
   و`--radius` و`--shadow-*` و`--text-muted` مأخوذة في `app.css`،
   وإعادةُ تعريفها هنا تُغيّر القائمة الجانبية من حيث لا نريد.
   ================================================================== */

:root {
    /* الاستدارات — أوسع من القديم، وهي أظهر ما يميّز شكل المرجع */
    --ui-card-radius: 20px;
    --ui-input-radius: 12px;
    --ui-btn-radius: 12px;
    --ui-btn-sm-radius: 8px;

    /* **مقاسُ زرّ الإجراء وأيقونتِه — مصدرٌ واحد للنظام كلّه.**
       يُغيَّران من هنا فيستوي كلُّ جدولٍ في اللوحات والبوابات، ولا
       يُترك المقاسُ لحاصلِ ما في الزرّ من نصٍّ أو أيقونة. */
    --ui-action-btn-h: 32px;
    --ui-action-icon: .95rem;

    /* أسطح ونصوص محايدة (slate) — لا تمسّ ألوان الهوية */
    --ui-surface-1: #ffffff;
    --ui-surface-2: #f1f5f9;
    --ui-text-primary: #0f172a;
    --ui-text-secondary: #475569;
    --ui-text-muted: #64748b;
    --ui-border: #e2e8f0;
    --ui-border-strong: #cbd5e1;

    --ui-table-head-bg: #f8fafc;
    --ui-table-hover-bg: #f1f5f9;

    --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --ui-shadow-md: 0 4px 20px -2px rgba(0, 0, 0, .05);

    /* حلقة التركيز مشتقّة من لوننا لا من لون المرجع */
    --ui-focus-ring: rgba(13, 124, 102, .12);

    --ui-ease: cubic-bezier(.4, 0, .2, 1);
    --ui-transition: all .2s var(--ui-ease);
}

/* ------------------------------------------------------------------
   1. الفونت
   ------------------------------------------------------------------
   يرث منه كل شيء — القائمة الجانبية معه، وهو المقصود. ويبقى `Amiri`
   للقرآن حيث صُرّح به في `app.css`، فلا نلمس تلك القواعد.
   ------------------------------------------------------------------ */
body,
.btn,
.form-control,
.form-select,
.field-control,
input,
select,
textarea,
button {
    font-family: 'IBM Plex Sans Arabic', 'Segoe UI', -apple-system, sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
    line-height: 1.65;
}

/* ------------------------------------------------------------------
   2. الجداول
   ------------------------------------------------------------------ */
.table {
    margin-bottom: 0;
    font-size: .84rem;
}

.table > :not(caption) > * > * {
    padding: 11px 16px;
    vertical-align: middle;
    border-color: var(--ui-border);
    text-align: start;
}

/* رأس الجدول: صغير، عريض، متباعد الحروف — أظهر ما يميّز جدول المرجع */
.table thead th,
.table thead.table-light th,
.table > thead > tr > th {
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ui-text-secondary);
    background: var(--ui-table-head-bg);
    border-bottom: 2px solid var(--ui-border);
    white-space: nowrap;
    text-align: start;
}

.table tbody td {
    border-color: var(--ui-border);
    color: var(--ui-text-primary);
}

.table-hover > tbody > tr > * {
    transition: background-color .2s var(--ui-ease);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--ui-table-hover-bg);
}

/* الجدول داخل البطاقة يرث استدارتها في طرفه السفلي */
.h-card-body.p-0 .table-responsive,
.table-responsive {
    border-radius: 0 0 var(--ui-card-radius) var(--ui-card-radius);
}

/* صفوف بدلالة الحالة */
tr.table-success > * { background: rgba(16, 185, 129, .08); }
tr.table-danger  > * { background: rgba(239, 68, 68, .08); }
tr.table-warning > * { background: rgba(245, 158, 11, .08); }
tr.table-info    > * { background: rgba(6, 182, 212, .08); }

/* ------------------------------------------------------------------
   3. النماذج
   ------------------------------------------------------------------
   `field-control` هو صنف الإدخال الغالب في هذا التطبيق (مئتان وستة
   وثلاثون موضعًا مقابل سبعة وثلاثين لـ`form-control`)، فترْكُه يعني
   ألّا يتغيّر شيء تقريبًا. فالثلاثة تُعامَل معاملة واحدة.
   ------------------------------------------------------------------ */
.form-control,
.form-select,
.field-control {
    border-radius: var(--ui-input-radius);
    border: 1.5px solid var(--ui-border);
    padding: 9px 14px;
    font-size: .86rem;
    color: var(--ui-text-primary);
    background: var(--ui-surface-1);
    transition: var(--ui-transition);
    width: 100%;
}

.form-control:focus,
.form-select:focus,
.field-control:focus {
    border-color: var(--primary, #0d7c66);
    box-shadow: 0 0 0 3.5px var(--ui-focus-ring);
    background: var(--ui-surface-1);
    color: var(--ui-text-primary);
    outline: none;
}

.form-control::placeholder,
.field-control::placeholder {
    color: var(--ui-text-muted);
}

.form-control-sm,
.form-select-sm,
.field-control-sm {
    padding: 6px 10px;
    font-size: .82rem;
}

.form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ui-text-secondary);
    margin-bottom: 6px;
    display: block;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.field-control:disabled,
.field-control[readonly] {
    background: var(--ui-surface-2);
    color: var(--ui-text-muted);
    border-color: var(--ui-border);
    cursor: not-allowed;
}

.form-check-input {
    border-radius: 5px;
    border: 1.5px solid var(--ui-border);
    background-color: var(--ui-surface-1);
    cursor: pointer;
    width: 17px;
    height: 17px;
    accent-color: var(--primary, #0d7c66);
}

.form-check-input[type="radio"] { border-radius: 50%; }

.form-check-input:checked {
    background-color: var(--primary, #0d7c66);
    border-color: var(--primary, #0d7c66);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
    border-color: var(--primary, #0d7c66);
}

.form-check-label { color: var(--ui-text-secondary); cursor: pointer; }
.form-text { color: var(--ui-text-muted); font-size: .78rem; }

.input-group-text {
    border-radius: var(--ui-input-radius);
    border: 1.5px solid var(--ui-border);
    background: var(--ui-surface-2);
    color: var(--ui-text-secondary);
    font-size: .86rem;
    padding: 9px 14px;
}

/* ------------------------------------------------------------------
   4. الأزرار
   ------------------------------------------------------------------
   شكلُ المرجع بلونِنا: تدرّجٌ خفيف، ظلٌّ ملوَّن، ورفعةٌ عند التحويم.
   ------------------------------------------------------------------ */
.btn {
    border-radius: var(--ui-btn-radius);
    font-size: .85rem;
    font-weight: 600;
    padding: 9px 18px;
    transition: var(--ui-transition);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    letter-spacing: -.005em;
}

.btn:active { transform: translateY(1px); }
.btn-sm { padding: 6px 13px; font-size: .8rem; border-radius: var(--ui-btn-sm-radius); }
.btn-lg { padding: 12px 24px; font-size: .95rem; }

.btn-primary,
.btn-h-primary {
    background: linear-gradient(135deg, var(--primary, #0d7c66), var(--primary-dark, #095a4a));
    border: 1px solid var(--primary-dark, #095a4a);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13, 124, 102, .25);
}

.btn-primary:hover,
.btn-h-primary:hover {
    background: linear-gradient(135deg, var(--primary-light, #14a085), var(--primary, #0d7c66));
    box-shadow: 0 4px 16px rgba(13, 124, 102, .35);
    transform: translateY(-1px);
    color: #fff;
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: 1px solid #059669;
    color: #fff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, .25);
}

.btn-success:hover {
    box-shadow: 0 4px 14px rgba(16, 185, 129, .35);
    transform: translateY(-1px);
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: 1px solid #dc2626;
    color: #fff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, .25);
}

.btn-danger:hover {
    box-shadow: 0 4px 14px rgba(239, 68, 68, .35);
    transform: translateY(-1px);
    color: #fff;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-h-secondary {
    border-width: 1.5px;
    background: var(--ui-surface-1);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-danger:hover,
.btn-h-secondary:hover {
    transform: translateY(-1px);
    box-shadow: var(--ui-shadow-sm);
}

.btn:disabled,
.btn.disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ------------------------------------------------------------------
   5. البطاقة الحاضنة
   ------------------------------------------------------------------
   استدارةٌ أوسع وظلٌّ أهدأ، ليستقرّ الجدول والنموذج داخل إطارٍ من
   لغة التصميم نفسها. ولا تُمسّ ألوان البطاقة.
   ------------------------------------------------------------------ */
.h-card,
.card {
    border-radius: var(--ui-card-radius);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-md);
}

.h-card-header {
    border-bottom: 1px solid var(--ui-border);
}

/* ------------------------------------------------------------------
   6. عنوان الصفحة
   ------------------------------------------------------------------
   عيبان اجتمعا:

   1. **المقاس**: `app.css` يضبط `.page-header h1` وحده، والقوالب تكتب
      `h2` — فيأخذ العنوان مقاس Bootstrap المتجاوب
      `calc(1.325rem + .9vw)`، وهو يكبر بكِبر الشاشة بلا سقف.

   2. **الالتصاق**: الأيقونة عليها `ms-2`، و`ms` في RTL هو
      `margin-inline-start` أي **يمين** الأيقونة — فيُبعدها عن حافة
      الصفحة لا عن النص الذي يليها. فتلتصق بالكلمة دائمًا.

   والعلاج `gap` على الحاضن لا هامشٌ على الأيقونة: يفصل بينهما في
   الاتجاهين معًا، ولا يحتاج تعديل مئة قالب.
   ------------------------------------------------------------------ */
.page-title,
.page-header h1,
.page-header h2,
.page-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* والهامش القديم يُلغى، فالفصل صار بـ`gap`. و`!important` هنا ليست
   ترفًا: `ms-2` من Bootstrap تحملها، فبدونها يبقى هامشٌ خارجيّ زائد. */
.page-title > i,
.page-header h1 > i,
.page-header h2 > i,
.page-header h3 > i {
    margin: 0 !important;
    font-size: .9em;
    opacity: .85;
}

.page-header .subtitle,
.page-header .text-muted {
    font-size: .84rem;
}

/* ------------------------------------------------------------------
   6-ب. عنوانُ الشاشة وسطرُه التابع — سطران لا سطرٌ ملتحم
   ------------------------------------------------------------------
   > «عنوان التقرير: لا تجعل النصوص قريبة من بعضها، وأحجامها للفونت
   > تكون متناسقة.» — صاحبُ النظام (2026-08-19)

   **والعلّتان اثنتان.** الأولى أن `.page-title` سطرٌ `inline-flex`،
   **فالوصفُ بعده يلتصق بذيله** بلا فاصلٍ ولا سطرٍ جديد. والثانية أن
   قاعدةَ الحجم فوق تعرف `.text-muted` **ولا تعرف `.text-muted-h`** —
   وهي المستعملةُ في شاشات التقارير، **فيخرج وصفُها بحجمٍ آخر**.

   فالتابعُ — أيًّا كان صنفُه — يصير كتلةً بحجمٍ واحدٍ وفاصلٍ فوقه.
   ------------------------------------------------------------------ */
.page-header .page-title + .text-muted-h,
.page-header .page-title + .text-muted,
.page-header .page-title + .subtitle,
.page-header .page-title + small,
.page-header .page-title + p {
    display: block;
    margin: .4rem 0 0;
    font-size: .82rem;
    line-height: 1.75;
}

/* **والمدى والحصرُ والعددُ أجزاءُ سطرٍ واحد** — تتنفّس ولا تلتحم،
   **وتنكسر أسطرًا في الشاشة الضيّقة** ولا تخرج عن حافّتها. */
.page-header .page-title + * {
    max-width: 72ch;
    text-wrap: pretty;
}

/* **والتاريخُ لا يكبر على جاره** — يرث حجمَ سطره لا حجمَ الجذر. */
.page-header .page-title + * .date-cell { font-size: inherit; }

/* ------------------------------------------------------------------
   7. ترقيم الصفحات
   ------------------------------------------------------------------
   منقول عن المرجع: مربّعات مستديرة متباعدة، والنشط ممتلئ بلوننا مع
   ظلٍّ ملوَّن. ويشمل الترقيم العادي وترقيم DataTables معًا، لأن
   جداول هذا التطبيق تستعمل الاثنين.
   ------------------------------------------------------------------ */
.pagination {
    gap: 4px;
    margin-bottom: 0;
}

.page-link,
.dataTables_wrapper .dataTables_paginate .page-link {
    border-radius: var(--ui-btn-sm-radius) !important;
    margin: 0 2px;
    font-size: .8rem;
    font-weight: 600;
    min-width: 34px;
    text-align: center;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-secondary);
    background: var(--ui-surface-1);
    transition: var(--ui-transition);
}

.page-link:hover,
.dataTables_wrapper .dataTables_paginate .page-link:hover {
    background: var(--ui-surface-2);
    color: var(--primary, #0d7c66);
    border-color: var(--primary, #0d7c66);
}

.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: var(--primary, #0d7c66);
    border-color: var(--primary, #0d7c66);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13, 124, 102, .25);
}

/* **الفعلُ الممنوع يُرى معطَّلًا ويبقى مسموعًا.**

   و`.btn.disabled` في بوتستراب يضع `pointer-events: none` **فيبتلع الضغطة**، فلا
   يقول العنصرُ سببَ منعه لمن ضغطه ({@see `data-blocked` في `app.js`}). فهذا صنفٌ
   يعطي هيئةَ المعطَّل ولا يسدّ الضغط. */
.btn-blocked {
    opacity: .55;
    cursor: not-allowed;
}

.btn-blocked:hover,
.btn-blocked:focus {
    opacity: .7;
}

.page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    opacity: .4;
    cursor: not-allowed;
    background: var(--ui-surface-1);
}

.page-link:focus {
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
    outline: none;
}

div.dataTables_wrapper div.dataTables_paginate { padding-top: 14px; }
div.dataTables_wrapper div.dataTables_info { font-size: .78rem; color: var(--ui-text-muted); padding-top: 14px; }

/* ------------------------------------------------------------------
   8. أزرار الإجراءات في الجداول — أيقونةٌ واسمُها في سطرٍ واحد
   ------------------------------------------------------------------
   المعيار: لا أيقونة صمّاء في جدول. والاسم يُقرأ من `title` عبر
   `attr()`، فلا يحتاج تعديل ستة وستين موضعًا في القوالب — ويسري على
   كل زرٍّ يُضاف بعد اليوم ما دام يحمل `title`.

   و`:has(> i:only-child)` هي التي تحصر القاعدة في **الأيقونيّ وحده**:
   زرٌّ فيه نصٌّ أصلًا لا يُمسّ، فلا يتكرر اسمه مرتين.

   **والاسمُ بجوار الأيقونة لا تحتها** (قرار المستخدم · 2026-08-19):
   الرصُّ عموديًّا كان يُطيل الزرَّ إلى سطرين، **فيجاور زرًّا بلا `title`
   في سطرٍ واحد فيختلف الارتفاعان في الخليّة الواحدة** — وهو ما رآه
   المستخدم في أسئلة الاستبيان والاختبار. فصار الصفُّ أفقيًّا، **وثبت
   الارتفاع بـ`--ui-action-btn-h` لا بحسب ما في الزرّ**: زرٌّ باسمٍ
   وزرٌّ بلا اسم يستويان، إذ الارتفاع مفروضٌ من فوقُ لا محسوبٌ من تحت.
   ------------------------------------------------------------------ */
td .btn:has(> i:only-child),
td .btn:has(> svg:only-child),
.pkg-actions .btn:has(> i:only-child) {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    height: var(--ui-action-btn-h);
    min-height: var(--ui-action-btn-h);
    line-height: 1;
    border-radius: var(--ui-btn-sm-radius);
}

td .btn[title]:has(> i:only-child)::after,
td .btn[title]:has(> svg:only-child)::after,
.pkg-actions .btn[title]:has(> i:only-child)::after {
    content: attr(title);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    line-height: 1;
}

/* **والاسمُ المكتوب غيرُ الاسم المسموع** (قرار المستخدم · 2026-08-19):
   `title` يحمل الجملةَ الكاملة — «تغيير حالة الطالب»، «للاختبار محاولات
   مسجّلة فحذف أسئلته ممنوع» — **وهي تلميحٌ نافع وقارئُ الشاشة يحتاجها**،
   لكنها على وجه الزرّ تُعرّضه حتى يبتلع الجدول.

   **فـ`data-action-label` هو المكتوب، و`title` هو المسموع والملموح.**
   ومن لم يحتج التفريق تركه: `title` وحدَه يكتب ويُسمع كما كان. */
td .btn[data-action-label]:has(> i:only-child)::after,
td .btn[data-action-label]:has(> svg:only-child)::after,
.pkg-actions .btn[data-action-label]:has(> i:only-child)::after {
    content: attr(data-action-label);
}

/* **وحجمُ الأيقونة واحدٌ في النظام كلّه** — لا يكبر بكبر الزرّ ولا
   يصغر بصغره، و`width` الثابت يمنع اهتزاز الصفّ بين أيقونةٍ عريضة
   (`fa-power-off`) وأخرى ضيّقة (`fa-pen`). */
td .btn:has(> i:only-child) > i,
td .btn:has(> svg:only-child) > svg,
.pkg-actions .btn:has(> i:only-child) > i {
    font-size: var(--ui-action-icon);
    width: 1em;
    text-align: center;
    margin: 0;
    flex: none;
}

/* **وفي الشاشة الضيّقة يسقط الاسمُ ويبقى المربّع** — الصفُّ الأفقيُّ
   يُطيل خليّةَ الإجراءات (خمسةُ أزرارٍ بأسماءٍ طويلة ≈ ٥٩٠ بكسل)،
   **وهي آخرُ عمودٍ فتخرج أولًا من الجوّال**. فالاسمُ يعود تلميحًا
   حيث لا يتّسع له مكان، **والارتفاعُ نفسُه لا يتغيّر** فلا يختلّ
   الصفّ. والقاعدةُ فوقُ تبقى سيّدةَ الحاسوب. */
@media (max-width: 991.98px) {
    td .btn[title]:has(> i:only-child)::after,
    td .btn[title]:has(> svg:only-child)::after,
    .pkg-actions .btn[title]:has(> i:only-child)::after {
        display: none;
    }

    td .btn:has(> i:only-child),
    td .btn:has(> svg:only-child),
    .pkg-actions .btn:has(> i:only-child) {
        width: var(--ui-action-btn-h);
        padding: 0;
    }
}

/* والنماذج المضمَّنة في خلية الإجراءات تصطفّ معها لا تحتها */
td form.d-inline { display: inline-flex; vertical-align: top; }

/* ------------------------------------------------------------------
   8-ب. **ولا ينكسر صفُّ الإجراءات سطرًا تحت سطر** (قرار المستخدم · 2026-08-19)
   ------------------------------------------------------------------
   غلافُ الأزرار في بعض الشاشات يحمل `.flex-wrap` من Bootstrap — وهي
   `!important` — **فإذا ضاق العمودُ نزل كلُّ زرٍّ إلى سطره**، وهو ما ظهر
   في شاشة الحلقات: ثلاثةُ أزرارٍ في ثلاثة أسطر داخل خليّةٍ عرضُها ٧١ بكسل.

   **والعلاجُ في الخليّة لا في الزرّ**: تُمنع من الكسر وتُترك تتّسع لما
   فيها. و`!important` هنا ردٌّ على `!important` مثلِها، لا اختصارَ عنه.
   ------------------------------------------------------------------ */
td > div:has(> .btn),
td > div:has(> form > .btn),
td > .btn-group,
.pkg-actions {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

/* **ولا يُضغط زرٌّ ليتّسع جارُه** — الانكماشُ يقصّ الاسمَ فيصير الزرُّ لغزًا. */
td > div > .btn,
td > div > form > .btn,
.pkg-actions > .btn {
    flex: 0 0 auto;
}

/* **وعمودُ الإجراءات يأخذ قدرَه ولا يزيد** — `width: 1%` مع `nowrap` تجعل
   المتصفّح يعطيه عرضَ محتواه بالضبط، **فما فضل عنه يعود إلى عمود الاسم**
   وهو أولى به: اسمُ الطالب كان ينكسر أربعةَ أسطرٍ بينما تتّسع الأزرار. */
.table > tbody > tr > td:last-child:has(> div > .btn),
.table > tbody > tr > td:last-child:has(> .btn) {
    width: 1%;
    white-space: nowrap;
}

/* **وعمودُ الاسم أوسعُها** — الاسمُ سطرٌ يُقرأ، و«ذكر» و«مبتدئ» كلمةٌ لا
   تحتاج ما تحتاجه. ويبقى الكسرُ ممكنًا للاسم الطويل جدًّا، **فالحدُّ أدنى
   لا مقاسٌ مفروض**. */
.table th.col-name { min-width: 11rem; }

/* ------------------------------------------------------------------
   9. ترتيب مكوّنات النموذج
   ------------------------------------------------------------------
   المفردات موجودة في القوالب أصلًا — `form-2col` و`field-group`
   و`field-label` و`required` و`field-hint` و`form-actions` — فالعلاج
   في شكلها لا في إعادة كتابة تسعة عشر نموذجًا.

   **والعلّة الأولى: عمودان ثابتان.** `grid-template-columns: 1fr 1fr`
   يعطي حقلَ «نسبة الضريبة» نصفَ الصف كما يعطيه لحقل «العنوان». وفي
   المرجع تتكيّف الشبكة: ثلاثة حقول في صف، وخمسة في آخر، بحسب ما
   يتّسع. فصارت `auto-fit` بحدٍّ أدنى `260px` — عمودان في اللوحة
   الضيّقة، وثلاثة أو أربعة في الواسعة، وواحد في الجوال. و`col-full`
   يبقى يمتدّ على الصف كلّه كما كان.
   ------------------------------------------------------------------ */
.form-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.1rem 1.25rem;
    align-items: start;
}

.form-2col .col-full { grid-column: 1 / -1; }

/* حقولٌ قصيرة بطبعها لا تستحقّ عمودًا كاملًا */
.form-2col .field-group:has(input[type="number"]),
.form-2col .field-group.is-narrow {
    max-width: 100%;
}

@media (max-width: 640px) {
    .form-2col { grid-template-columns: 1fr; }
    .form-2col .col-full { grid-column: 1; }
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.field-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ui-text-secondary);
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* النجمة علامةٌ لا حرفٌ في الجملة: تُفصل ولا تلتصق */
.field-label .required,
.required {
    color: #ef4444;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

/* الحقل: مقاسٌ واحد لا مقاسان — `height` من الورقة القديمة كان
   يزاحم الحشو الجديد، فيُترك ارتفاعٌ أدنى ويتولّى الحشو الباقي. */
.field-control,
.form-control,
.form-select {
    height: auto;
    min-height: 42px;
}

textarea.field-control,
textarea.form-control {
    min-height: 96px;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.field-hint {
    font-size: .75rem;
    color: var(--ui-text-muted);
    line-height: 1.5;
}

.field-error { font-size: .75rem; color: #ef4444; }
.field-control.is-error { border-color: #ef4444; }

.form-divider {
    grid-column: 1 / -1;
    border: none;
    border-top: 1px solid var(--ui-border);
    margin: .35rem 0;
}

/* شريط الأفعال: مفصولٌ بخطٍّ وخلفيةٍ هادئة، فيُقرأ نهايةً للنموذج
   لا حقلًا أخيرًا فيه. والزرّ الأساسي في نهاية السطر كما في المرجع. */
.form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .75rem;
    padding: 1rem 0 .25rem;
    margin-top: .5rem;
    border-top: 1px solid var(--ui-border);
}

/* مجموعة الاختيار تصطفّ مع الحقول لا تحتها */
.field-group .form-check,
.field-group .field-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 42px;
}

/* ------------------------------------------------------------------
   10. شبكة رسوم اللوحة
   ------------------------------------------------------------------
   الحضور رسمٌ زمنيّ يحتاج عرضًا، والتوزيعان مربّعان — فالأول يأخذ
   عمودين والآخران عمودًا لكلٍّ. وتنهار إلى عمودٍ واحد في الضيّق.
   ------------------------------------------------------------------ */
.dash-charts {
    display: grid;
    /* **ستُّ وحداتٍ لا أربع**: الأولُ خطٌّ زمنيٌّ يأخذ نصفَ العرض (٣)، والبقيةُ
       دوائرُ وأشرطةٌ يأخذ كلٌّ منها وحدةً (١) — فيستوي السطران مهما زاد عددُها.
       وكانت أربعًا حين كانت الرسومُ ثلاثة، **فلمّا صارت خمسةً تخلّف اثنان وحدَهما**. */
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.dash-charts > .h-card { grid-column: span 2; }
.dash-charts > .h-card:first-child { grid-column: span 3; }

/* والبطاقةُ عمودٌ ممتدّ، فتتساوى الارتفاعاتُ في السطر الواحد. */
.dash-charts > .h-card { display: flex; flex-direction: column; }
.dash-charts .h-card-body { min-height: 240px; display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; }
.dash-charts canvas { max-height: 240px; }

@media (max-width: 1100px) {
    .dash-charts { grid-template-columns: repeat(2, 1fr); }
    .dash-charts > .h-card,
    .dash-charts > .h-card:first-child { grid-column: span 1; }
    .dash-charts > .h-card:first-child { grid-column: span 2; }
}

@media (max-width: 640px) {
    .dash-charts { grid-template-columns: 1fr; }
    .dash-charts > .h-card:first-child { grid-column: 1; }
}

/* ------------------------------------------------------------------
   11. بطاقات الباقات
   ------------------------------------------------------------------
   كانت البطاقة تعرض المميزات **بأصغر خطٍّ وأبهت لون فيها**، تحت قائمةٍ
   أخرى تشبهها شكلًا (الحدود)، فتُقرأ الاثنتان كتلةً واحدة لا يتبيّن فيها
   ما يُشترى. والسعر بأخضر بوتستراب لا بزمرّد الهوية، والوصف لا يُعرض
   أصلًا.

   فالترتيب هنا هرميّ: **السعر** ثم **الوصف** ثم **الحدود** رقمًا وعنوانًا
   في شريطٍ مستقل، ثم **المميزات** بعنوانٍ وقائمةِ تحقّقٍ بحجم النصّ العاديّ.

   والشبكة `auto-fill` لا أعمدةٌ ثابتة: البطاقة تحتاج عرضًا أدنى لتبقى
   المميزات في سطرٍ واحد، وعددُ الأعمدة يتبع الشاشة لا العكس.
   ------------------------------------------------------------------ */
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.pkg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ui-surface-1);
    border: 1.5px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    box-shadow: var(--ui-shadow-sm);
    overflow: hidden;
    transition: var(--ui-transition);
}

.pkg-card:hover { box-shadow: var(--ui-shadow-md); border-color: var(--ui-border-strong); }

/* شريطُ الهوية العلويّ: زمرّدٌ للمدفوعة، وذهبٌ للتجريبية. */
.pkg-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: var(--grad-emerald);
}

.pkg-card.is-trial::before { background: var(--grad-gold); }

/* المعطّلة تُقرأ معطّلة: باهتةٌ وحدُّها متقطّع — لا بالشارة وحدها. */
.pkg-card.is-off { background: var(--ui-surface-2); border-style: dashed; box-shadow: none; }
.pkg-card.is-off::before { background: var(--ink-300); }
.pkg-card.is-off .pkg-body { opacity: .62; }

.pkg-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.25rem 1.25rem .75rem;
}

.pkg-titles { min-width: 0; }

.pkg-name {
    margin: 0 0 .25rem;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--ui-text-primary);
    line-height: 1.35;
}

.pkg-slug {
    display: inline-block;
    font-size: .72rem;
    color: var(--ui-text-muted);
    background: var(--ui-surface-2);
    border-radius: var(--ui-btn-sm-radius);
    padding: .1rem .4rem;
}

.pkg-badges { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; flex-shrink: 0; }

.pkg-body { padding: 0 1.25rem 1rem; display: flex; flex-direction: column; flex: 1 1 auto; }

/* — السعر: الرقم هو البطل، والعملة والمدة توابع له لا أنداد. */
.pkg-price { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; margin-bottom: .6rem; }

.pkg-price-amount {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--em-700);
    letter-spacing: -.02em;
}

.pkg-price-amount.is-free { font-size: 1.5rem; color: var(--go-600); }
.pkg-price-currency { font-size: .9rem; font-weight: 600; color: var(--ui-text-secondary); }

.pkg-price-period {
    font-size: .78rem;
    color: var(--ui-text-muted);
    background: var(--ui-surface-2);
    border-radius: var(--r-pill);
    padding: .12rem .55rem;
}

.pkg-desc {
    margin: 0 0 1rem;
    font-size: .85rem;
    line-height: 1.7;
    color: var(--ui-text-secondary);
    min-height: 2.9em;
}

.pkg-empty { color: var(--ui-text-muted); font-style: italic; }

/* — الحدود: شريطٌ مستقلّ برقمٍ وعنوان، لا بندًا في قائمة تشبه المميزات. */
.pkg-limits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    padding: .7rem .5rem;
    margin-bottom: 1rem;
    background: var(--ui-surface-2);
    border-radius: var(--ui-input-radius);
}

.pkg-limit { display: flex; flex-direction: column; align-items: center; gap: .12rem; text-align: center; min-width: 0; }
.pkg-limit i { font-size: .8rem; color: var(--em-600); margin-bottom: .1rem; }

.pkg-limit-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ui-text-primary);
    line-height: 1.2;
}

.pkg-limit-value.is-unlimited { font-size: .82rem; color: var(--em-700); }
.pkg-limit-label { font-size: .7rem; color: var(--ui-text-muted); }

/* — المميزات: عنوانٌ وقائمةُ تحقّق بحجم النصّ العاديّ، لا هامشٌ باهت. */
.pkg-features { margin-top: auto; }

.pkg-features-title {
    margin: 0 0 .5rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

.pkg-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }

.pkg-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--ui-text-primary);
    padding: .32rem 0;
    border-bottom: 1px dashed var(--ui-border);
}

.pkg-feature-list li:last-child { border-bottom: 0; }

.pkg-feature-list li i {
    flex-shrink: 0;
    margin-top: .32em;
    font-size: .68rem;
    color: var(--em-600);
    background: var(--em-50);
    border-radius: 50%;
    width: 1.15rem;
    height: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pkg-features-empty {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    margin: 0;
    padding: .55rem .7rem;
    background: var(--go-50);
    border: 1px dashed var(--go-300);
    border-radius: var(--ui-input-radius);
    color: var(--go-600);
    font-style: normal;
}

.pkg-features-empty i { font-size: .8rem; }
.pkg-features-empty a { color: var(--go-600); font-weight: 700; }

/* — الإجراءات: صفٌّ واحد، والأسماء تحت الأيقونات بقاعدة القسم ٨ نفسها.
     و`form` عنصر كتلة، فبلا `flex` هنا تتراصّ الأزرار عمودًا. */
.pkg-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .8rem 1.25rem;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-table-head-bg);
}

.pkg-actions form { display: inline-flex; margin: 0; }

/* — بطاقة الاختيار في شاشة التجديد: البطاقة نفسها، بزرّ راديو مخفيّ. */
.pkg-card-choice { cursor: pointer; }
.pkg-card-choice > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.pkg-card-choice:has(> input:checked) {
    border-color: var(--em-600);
    box-shadow: 0 0 0 3px var(--ui-focus-ring), var(--ui-shadow-md);
}

.pkg-card-choice:has(> input:focus-visible) { outline: 2px solid var(--em-600); outline-offset: 2px; }

.pkg-choose {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .8rem 1.25rem;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-table-head-bg);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ui-text-muted);
    transition: var(--ui-transition);
}

.pkg-card-choice:has(> input:checked) .pkg-choose { background: var(--em-50); color: var(--em-700); }

@media (max-width: 420px) {
    .pkg-grid { grid-template-columns: 1fr; }
    .pkg-price-amount { font-size: 1.8rem; }
}

/* ------------------------------------------------------------------
   12. خليةُ إجراءاتٍ تصطفّ
   ------------------------------------------------------------------
   `form` عنصرُ كتلة، فخليةٌ فيها ثلاثة نماذج تتراصّ عموديًّا: صفُّ جزءٍ
   واحد بلغ ٢٠٢px، وثلاثون منها صفحةٌ من ستة آلاف بكسل لقائمةٍ يجب أن
   تُقرأ في نظرة. وهي الحاجة نفسها التي ظهرت في ذيل بطاقة الباقة
   (القسم ١١)، فتُكتب هنا مرةً تُستعمل حيث تلزم.

   والحقولُ المضمَّنة تُصغَّر: مربّعُ نصٍّ بحجمه الكامل داخل صفِّ جدول
   يجعل الجدول نموذجًا، والنموذجُ يُقرأ سطرًا سطرًا لا لمحةً واحدة.
   ------------------------------------------------------------------ */
td.table-actions,
.table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

td.table-actions form { display: inline-flex; align-items: center; gap: .25rem; margin: 0; }

td.table-actions .field-control {
    height: 34px;
    padding: .25rem .5rem;
    font-size: .8rem;
    border-radius: var(--ui-btn-sm-radius);
}

/* والأيقونة تبقى باسمها (القسم ٨)، لكن بارتفاعٍ يناسب صفًّا لا بطاقة */
td.table-actions .btn[title]:has(> i:only-child) { min-width: 46px; padding: 4px 6px; }

/* **ولا تلتفُّ أزرارُ العمليّة** — والالتفافُ كان يركّبها ثلاثًا فوق ثلاث.

   > «في الجداول يوجد أزرار عمليات لكنها تظهر تحت بعضها مما يسبب تشوّهًا في
   > المنظر… ويكون هناك سكرول يمين ويسار إذا كانت المساحة لا تكفي.»
   > — صاحبُ النظام (2026-08-17)

   **وكان `flex-wrap: wrap` هو الأصل**: عمودٌ ضيّقٌ يكسر الأزرارَ سطرًا سطرًا،
   **فيرتفع الصفُّ ثلاثةَ أضعافه** ويظنّ قارئُه أن لكلِّ سطرٍ معنًى. **والضيقُ
   يُعالَج بتمريرة الجدول لا بكسر الخلية.** */
td.table-actions,
.table-actions { flex-wrap: nowrap; }

/* ------------------------------------------------------------------
   عمودُ العمليات — يظهر كاملًا ولا يُقصّ

   > «أيقونات العمليات في الجداول أعطها الأهمية لتظهر بشكل كامل.»
   > — صاحبُ النظام (2026-08-17)

   **والجداولُ تُمرَّر أفقيًّا حين تضيق** (`table-responsive`)، **والعمليّاتُ آخرُ
   عمود** — فهي أولُ ما يخرج عن الشاشة، **ويُظنّ أن لا عمليّةَ في الصفّ**.

   **فآخرُ عمودٍ لا يتقلّص ولا ينكسر**: `width: 1%` تجعله بقدر محتواه، و`nowrap`
   تمنع الأزرارَ أن تتراكب سطرين، **والباقي يقتسمه ما قبله**.

   **ولا يُطبَّق على كلِّ جدول بالقوة**: مَن أراد عمودًا أخيرًا عريضًا كتب فيه
   `min-width` فيغلبه — `width: 1%` أضعفُ من `min-width` عند التعارض.
   ------------------------------------------------------------------ */
/* **والأزرارُ قد تُلَفُّ في `div`** — فشرطُ الابن المباشر يخطئها.

   **ورُئي في شاشة الأخبار**: `tableActions()` تُخرج `<div>` يضمّ الثلاثة، **فلا
   ينطبق شيءٌ من هذا** — فلا `width: 1%` ولا `nowrap`، **فانكسرت ثلاثةَ سطور**.
   فيُقبل الابنُ وحفيدُه. */
.table > thead > tr > th:last-child:empty,
.table > tbody > tr > td:last-child:has(> .btn),
.table > tbody > tr > td:last-child:has(> form),
.table > tbody > tr > td:last-child:has(> .btn-group),
.table > tbody > tr > td:last-child:has(> div > .btn),
.table > tbody > tr > td:last-child:has(> div > form),
.table > tbody > tr > td:last-child:has(> div > .btn-group) {
    width: 1%;
    white-space: nowrap;
}

/* **وغلافُ الأزرار صفٌّ لا كومة** — فالـ`div` الوسيطُ لا يكسر ما بعده. */
.table > tbody > tr > td:last-child > div:has(> .btn),
.table > tbody > tr > td:last-child > div:has(> form) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem;
}

/* وأزرارُ العمليّة في صفٍّ واحدٍ بفجوةٍ بينها — لا متلاصقةً ولا ملتفّة */
.table > tbody > tr > td:last-child > .btn,
.table > tbody > tr > td:last-child > form,
.table > tbody > tr > td:last-child > a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-inline-start: .25rem;
}
.table > tbody > tr > td:last-child > *:first-child { margin-inline-start: 0; }

/* **وأيقونةٌ بلا نصٍّ تحتاج عرضًا أدنى** — وإلا صارت زرًّا بعرض حرفٍ لا يُصاب بالإصبع */
.table .btn-sm:has(> i:only-child),
.table .btn-sm:has(> i + .visually-hidden) {
    min-width: 2rem;
}

/* **وعمودُ العمليّات يثبت حين يُمرَّر الجدول** — وهو المقصود بـ«أعطها الأهمية».

   **و`width: 1%` وحدَها لا تكفي**: الجدولُ يفيض فيُمرَّر، **والعمليّاتُ آخرُ عمودٍ
   فتخرج أولًا**. فتُثبَّت عند حافّة التمرير: المحتوى يمرّ تحتها **وهي باقيةٌ تُرى**.

   **والحافّةُ يسارٌ لا `inset-inline`**: الصفحةُ عربيةٌ فآخرُ عمودٍ يقع يسارًا،
   **و`inset-inline-end` تنقلب معها فتُثبّته حيث لا يخرج أصلًا**.

   **ولا تثبت إلا حين يفيض** — و`position: sticky` لا أثرَ لها بلا تمرير. */
/**
 * **واسمُ الموظف يُكتب مرةً وأجهزتُه تحته** — صاحبُ النظام (2026-09-08):
 * «يمكن أن يكون للشخص أكثر من جهاز فيظهر اسمه أكثر من مرة، فلماذا لا يتم دمج
 * الأجهزة تحت اسم واحد فقط ونوع واحد».
 *
 * **والمكرَّرُ يُخفى ولا يُحذف**: `visibility` تُبقي مكانَه فلا يتراقص عرضُ العمود
 * كلَّما تبدّلت صفحة، **والنصُّ باقٍ في الخلية** فيقرؤه البحثُ والفرزُ والقارئُ
 * الصوتي كما هو. **والسهمُ يقول إنه تابعٌ لما فوقه** لا خليةٌ نسيها الخادم.
 *
 * (والتبعيّةُ يمينٌ في صفحةٍ عربية، فالسهمُ `↳` وموضعُه `inset-inline-start`.)
 */
td.dt-group-repeat { position: relative; }
td.dt-group-repeat > * { visibility: hidden; }
td.dt-group-repeat::before {
    content: "↳";
    position: absolute;
    inset-inline-start: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color, #6c757d);
    opacity: .55;
}

/**
 * **وصندوقان لا واحد**: `.table-responsive` تُكتب باليد في القوالب الساكنة،
 * **و`.table-scroll` يلفُّها `app.js` حول جداول الأجاكس بعد بنائها** — وكانت
 * غائبةً عن هذه القائمة، **فجداولُ الأجاكس كلُّها بلا عمودٍ مثبَّت**: عمودُ
 * الإجراءات يخرج يسارًا فلا يُرى زرُّ الحذف حتى يُمرَّر الجدول إليه.
 *
 * **وغلافُ الأزرار `<div>`** في أكثر الشاشات — ولم يكن في القائمة أيضًا،
 * فلا `:has(> .btn)` تصيبه ولا `:has(> form)` (شاشة الطلاب · 2026-08-19).
 */
/* **ورأسُ العمود يتبع جسمَه**: كان المثبَّتُ خليّةَ الجسم وحدَها ورأسُه
   يجري مع التمرير، **فيقف عنوانُ عمودٍ فوق عمودٍ آخر**. والعنوانُ الفارغ
   وحدَه كان مشمولًا، وأكثرُ الرؤوس مكتوبٌ («إجراء» و«الإجراءات»). */
.table-responsive > .table:has(> tbody > tr > td:last-child > div > .btn) > thead > tr > th:last-child,
.table-responsive > .table:has(> tbody > tr > td:last-child > .btn) > thead > tr > th:last-child,
.table-responsive > .table:has(> tbody > tr > td:last-child > form) > thead > tr > th:last-child,
.table-scroll > .table:has(> tbody > tr > td:last-child > div > .btn) > thead > tr > th:last-child,
.table-scroll > .table:has(> tbody > tr > td:last-child > .btn) > thead > tr > th:last-child,
.table-scroll > .table:has(> tbody > tr > td:last-child > form) > thead > tr > th:last-child,
.table-responsive > .table > thead > tr > th:last-child:empty,
.table-responsive > .table > tbody > tr > td:last-child:has(> .btn),
.table-responsive > .table > tbody > tr > td:last-child:has(> form),
.table-responsive > .table > tbody > tr > td:last-child:has(> .btn-group),
.table-responsive > .table > tbody > tr > td:last-child:has(> div > .btn),
.table-responsive > .table > tbody > tr > td:last-child:has(> div > form > .btn),
.table-scroll > .table > thead > tr > th:last-child:empty,
.table-scroll > .table > tbody > tr > td:last-child:has(> .btn),
.table-scroll > .table > tbody > tr > td:last-child:has(> form),
.table-scroll > .table > tbody > tr > td:last-child:has(> .btn-group),
.table-scroll > .table > tbody > tr > td:last-child:has(> div > .btn),
.table-scroll > .table > tbody > tr > td:last-child:has(> div > form > .btn) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--ui-surface, #fff);
    box-shadow: 1px 0 0 var(--ui-border);
}

/* **ورأسُه يثبت فوق صفوفه** — وإلا مرّ الرأسُ تحت الخلية المثبَّتة فبانَ مقصوصًا */
.table-responsive > .table > thead > tr > th:last-child:empty {
    background: var(--ui-table-head-bg, #f8fafc);
    z-index: 3;
}

/* **وصفٌّ ملوَّنٌ يبقى ملوَّنًا تحت العمود المثبَّت** — وإلا صار له طرفٌ أبيضُ شاذّ */
.table-hover > tbody > tr:hover > td:last-child { background-color: var(--ui-table-hover-bg); }
tr.table-light > td:last-child { background: var(--ui-table-head-bg, #f8fafc); }


/* ------------------------------------------------------------------
   ١٥ · تمريرةُ الجدول الأفقية

   > «جدول حملات الواتساب لا يتحرك يمينًا ويسارًا.» — صاحبُ النظام (2026-08-17)

   **وجداولُ الأجاكس تُلَفُّ بهذا من `app.js` بعد تهيئتها** — لا باليد في كلِّ
   قالب، **فمن نسيها ضاع آخرُ عمودٍ خلف حافة الشاشة** وهو عمودُ العمليات.

   **ويُلَفُّ الجدولُ وحدَه**: البحثُ وأزرارُ الصفحات خارجَه، فلا تُطلب بتمريرة.
   ------------------------------------------------------------------ */
.table-scroll {
    overflow-x: auto;
    /* **وتمريرةُ اللمس تُسلَّس** — والجداولُ تُقرأ على الهاتف أكثرَ مما تُقرأ على مكتب */
    -webkit-overflow-scrolling: touch;
}

/* **ولا يُفرض عرضٌ أدنى على الجدول.**

   **كُتب أولًا `min-width: max-content`** ليخرجَ الجدولُ فيُمرَّر — **فبلغ عرضُه
   أربعةَ عشرَ ألفَ بكسل**: `max-content` تعني أوسعَ ما يبلغه النصُّ بلا قصّ، ونصُّ
   رسالةٍ طويلٍ يمدُّ العمودَ بلا حدّ. **فصار يُمرَّر أبدًا وقد كان يسع الشاشة.**

   **والتمريرةُ تكفي وحدَها**: يضيق الجدولُ ما استطاع، فإذا بلغ أصغرَ ما يحتمله
   محتواه — وعمودُ العمليات `nowrap` لا ينكمش — **خرج عن الصندوق فمُرِّر**. */

/* ------------------------------------------------------------------
   ١٦ · نصٌّ يحفظ أسطرَه

   > «ضوابط التسجيل تظهر متصلة عند تسجيل طالب جديد… راجع باقي الشاشات هل يوجد
   > نصوص تظهر متصلة مثلها.» — صاحبُ النظام (2026-08-17)

   **وكلُّ ما يُكتب في `textarea` أسطرُه مقصودة**: عنوانٌ من سطرين، وملاحظةٌ ببنود،
   وخطةٌ علاجيةٌ بخطوات. **ثم تُطبع في HTML فيصير السطرُ الجديد فراغًا** — فتلتحم
   البنودُ فقرةً واحدة لا يُميَّز فيها بندٌ من بند.

   **و`pre-line` تُبقي الأسطرَ وتطوي الفراغاتِ الزائدة** — فلا يُغيَّر النصُّ ولا
   يُحقن HTML، **والترقيمُ ترقيمُ من كتبه لا ترقيمًا نخترعه**.

   **ولا تُوضع على ما يُكتب في سطرٍ واحد**: `reason` و`remedial_plan` حقولُ
   `input`، **فقاعدةٌ لا تُدرك حالًا شيفرةٌ ميتة**. ولا على شريط الأخبار — سطرٌ
   واحدٌ يجري، وطيُّ أسطره هو الصواب فيه.
   ------------------------------------------------------------------ */
/* **والأسطرُ تتنفّس** (قرار المستخدم · 2026-08-19): «شيء فيه كتابة، وعدم تداخل
   الأسطر مع بعضها». **و`pre-line` تحفظ الأسطرَ ولا تُباعد بينها**، فنصٌّ من
   ستة أسطر في خليّةٍ ضيّقة يلتصق سطرُه بسطره فيُقرأ كتلةً. **والارتفاعُ هنا لا
   في كلِّ قالب** — و`textarea` تأخذه كذلك فيُرى المكتوبُ كما سيُقرأ. */
.text-lines {
    white-space: pre-line;
    line-height: 1.9;
}

textarea.text-lines { white-space: pre-wrap; }

/* ------------------------------------------------------------------
   ١٧ · شعارا الجهة في رأس البوابة
   ------------------------------------------------------------------
   > «مع ظهور شعار الجمعية مع شعار الفرع بالحسابات.»
   > — صاحبُ النظام (2026-08-19)

   **وأرضٌ بيضاءُ تحتهما**: الشريطُ الجانبيُّ داكن، **وشعارٌ شفّافُ
   الخلفية يذوب فيه** فلا يُرى منه إلا حرفٌ أو حرفان.
   ------------------------------------------------------------------ */
.sidebar-brand-logos { display: flex; align-items: center; justify-content: center; gap: .4rem; }

.sidebar-brand-logo {
    width: 42px; height: 42px; object-fit: contain;
    background: #fff; border-radius: 9px; padding: .2rem;
    flex: none;
}

/* ------------------------------------------------------------------
   ١٧-أ · والاسمُ تحت الشعارين لا بجانبهما
   ------------------------------------------------------------------
   > «ما رأيك أن يكون الاسم تحت الشعارات في جميع شاشات الحسابات، ويتم
   > معالجته بالجوال.» — صاحبُ النظام (2026-08-23)

   **وشعاران واسمٌ في صفٍّ واحدٍ داخل شريطٍ عرضُه ٢٦٠** يترك للاسم أقلَّ
   من ١٦٠ بكسل: **فاسمٌ كـ«جامع الشيخ سليمان الراجحي - شركة المنارة
   المتقدمة» ينكسر أربعةَ أسطرٍ في عمودٍ ضيّق**، ويرتفع الشعاران إلى
   منتصفه — وهو ما رآه صاحبُ النظام في شاشته.

   **فالاسمُ تحتهما بعرض الشريط كلِّه**: سطران أو ثلاثةٌ بدل أربعة،
   **والوسطُ يجمعهما تحت محورٍ واحد**. والقاعدةُ في الصنف المشترك، فتعمّ
   لوحاتِ الجمعية والفرع والإدارة وبوابات المعلم والمشرف والطالب معًا.

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

   **و`overflow-wrap: anywhere`** لأن اسمًا بلا فراغاتٍ — رابطًا أو كلمةً
   طويلة — **يفيض عن الشريط أفقيًّا** فيدفع القائمةَ كلَّها.
   ------------------------------------------------------------------ */
.sidebar-brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .55rem;
    padding: 1.15rem .85rem 1rem;
}

.sidebar-brand > div { max-width: 100%; min-width: 0; }

.sidebar-brand .sidebar-brand-name {
    font-size: .95rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sidebar-brand .sidebar-brand-sub { margin-top: .2rem; }

@media (max-width: 991.98px) {
    .sidebar-brand { padding: 1rem .75rem .85rem; gap: .45rem; }
    .sidebar-brand .sidebar-brand-name { font-size: .88rem; }
    .sidebar-brand-logo { width: 38px; height: 38px; }
}

/* ------------------------------------------------------------------
   ١٨ · قوائمُ الوصف — قيمةٌ بجوار عنوانها لا تحته
   ------------------------------------------------------------------
   **والمتصفّحُ يعطي `dd` هامشًا ابتدائيًّا مقدارُه ٤٠ بكسل**، وBootstrap
   العربيةُ تُصفّر `margin-right` وحدَه — **فما قُلب إلى `dir="ltr"`
   (جوالٌ ورقمُ هويةٍ وتاريخ) يحتفظ بهامشه الأيسر**.

   فيصير عرضُ العمودين ١٦٣ + ٣٢٧ + ٤٠ = ٥٣٠ في صفٍّ عرضُه ٤٩٠،
   **فتهبط القيمةُ سطرًا تحت عنوانها** — ويُقرأ الاسمُ في سطرٍ ورقمُه في
   آخر. **ورُئي في شاشة بيانات الطالب** (2026-08-19).

   والتصفيرُ للجهتين معًا، فلا يعود يفرّق بين اتجاهٍ واتجاه.
   ------------------------------------------------------------------ */
dl.row > dd { margin-inline: 0; }

/* ------------------------------------------------------------------
   ١٩ · شريطُ حقائق الطالب، وصفوفُ بياناته
   ------------------------------------------------------------------
   > «تحسين جودة عرض بيانات الطلاب.» — صاحبُ النظام (2026-08-19)

   **وأولُ ما يُسأل عنه لا يُبحث عنه**: الحالُ والمستوى وتاريخُ الالتحاق
   والمحفوظ — في شريطٍ فوق البطاقتين، **لا مبعثرًا بين سطورهما**.
   ------------------------------------------------------------------ */
.student-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.student-strip-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 10rem;
    background: var(--ui-surface-1);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-btn-radius);
    padding: .55rem .9rem;
}

.student-strip-label {
    font-size: .74rem;
    color: var(--ui-text-muted);
    white-space: nowrap;
}

/* **وعنوانُ الحقل لا يزاحم قيمتَه** — رماديٌّ أخفُّ، والقيمةُ هي المقروءة. */
.student-facts > dt {
    font-weight: 600;
    color: var(--ui-text-muted);
    font-size: .82rem;
}

.student-facts > dd {
    margin-bottom: .55rem;
    color: var(--ui-text-primary);
}

/* ==================================================================
   ٢٠ · لغةُ شاشات البيانات
   ==================================================================
   > «تحسين تصميم شاشات البيانات إلى تصميم عصري يتناسب وروح التصميم
   > وهويته.» — صاحبُ النظام (2026-08-19)

   **وسبعُ شاشاتٍ تعرض البيانات بالنمط نفسِه** (الطالب · الحلقة · الفرع
   · الجمعية · الدفعة …)، **وكلٌّ نسّق نفسَه**: عنوانٌ بـ`h5` وخطٌّ فاصل
   و`dl.row` رماديّة. **فالنمطُ يُكتب مرةً هنا** ويُقرأ في السبع.

   **والهويّةُ زمرّديةٌ وذهبية** (`--primary` · `--gold`)، والاستدارةُ
   واسعة، والظلُّ ملوَّنٌ بالزمرّد لا رماديًّا. فالمفرداتُ تُبنى منها،
   **ولا يُخترع لونٌ ثالث**.
   ================================================================== */

/* ── شريطُ الحقائق: أولُ ما يُقرأ ───────────────────────────────── */
.fact-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}

.fact {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .8rem 1rem .8rem 1rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e3e8e6);
    border-radius: var(--radius, 14px);
    overflow: hidden;
}

/* **وشريطٌ زمرّديٌّ على الحافّة** — علامةُ الهويّة، لا إطارٌ ملوَّنٌ كلُّه. */
.fact::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary, #0d7c66), var(--primary-light, #14a085));
}

.fact-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--text-muted, #6b7a76);
}

.fact-value {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-main, #1f2d2a);
    line-height: 1.3;
}

/* ── بطاقةُ البيانات ───────────────────────────────────────────── */
.data-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e3e8e6);
    border-radius: var(--radius, 14px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(13, 124, 102, .06));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/**
 * **وتملأ عمودَها لا صفحتَها** — بطاقتان متجاورتان تستويان في الارتفاع.
 *
 * **وكان `height: 100%` على البطاقة نفسِها**، وهو صحيحٌ ما دامت في عمود.
 * **فلمّا وُضعت وحدَها في مجرى الصفحة** (شاشةُ «زياراتي») قِيس المئةُ من ارتفاع
 * `main` — **فصارت البطاقةُ الواحدةُ ملءَ الشاشة**، وفاضت أخواتُها تحت الذيل.
 */
[class*="col-"] > .data-card { height: 100%; }

/* **ورأسٌ بمسحةٍ زمرّديةٍ خفيفة** — يُميَّز عن جسمه بلا خطٍّ فاصلٍ صريح. */
.data-card-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.15rem;
    background: linear-gradient(180deg, rgba(13, 124, 102, .06), rgba(13, 124, 102, .02));
    border-bottom: 1px solid var(--border, #e3e8e6);
}

.data-card-icon {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--primary, #0d7c66);
    color: #fff;
    font-size: .82rem;
}

.data-card-title {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--primary-dark, #095a4a);
}

.data-card-body { padding: .35rem 1.15rem 1rem; flex: 1 1 auto; }

/* ── صفوفُ البيانات ────────────────────────────────────────────── */
.data-list { margin: 0; }

.data-row {
    display: grid;
    grid-template-columns: minmax(7rem, 34%) 1fr;
    gap: .5rem 1rem;
    align-items: baseline;
    padding: .62rem 0;
    border-bottom: 1px dashed var(--border, #e3e8e6);
}

.data-row:last-child { border-bottom: 0; }

.data-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted, #6b7a76);
}

.data-value {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-main, #1f2d2a);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* **والناقصُ يُذكر في ذيلٍ خافت** — خبرٌ يُعمل به، لا حشوٌ يزاحم. */
.data-missing {
    margin: .8rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid var(--border, #e3e8e6);
    font-size: .76rem;
    color: var(--text-muted, #6b7a76);
}

@media (max-width: 575.98px) {
    .data-row { grid-template-columns: 1fr; gap: .15rem; padding: .55rem 0; }
}

/* ==================================================================
   ٢١ · بنودُ التقييم وصفوفُ اللحن — صفٌّ يُقرأ ويُملأ
   ------------------------------------------------------------------
   > «البنود تصميمها غير مضبوط يجب ضبطها بشكل عصري واحترافي. نفس الشيء
   > في اللحون التصميم غير منضبط.» — صاحبُ النظام (2026-08-19)

   **وعلّتُهما واحدة: جدولٌ يحمل ما ليس بجدول.**

   البنودُ كانت `table` بثلاثة أعمدة، **وحقلُ السبب يمتدّ في خليّة البند وحدَها**
   — فيطول الصفُّ وتبقى خانةُ الدرجة معلَّقةً في أعلاه، **ويُقرأ السببُ كأنه
   تحت الدرجة لا تحت بنده**. واللحونُ صفٌّ من أربعة أعمدة بعناوينَ فوق حقولها،
   **وأعرضُها أضيقُها**: الكلمةُ في خانةٍ واسعة، والآيةُ رقمٌ في مثلها، وزرُّ
   الحذف في عمودٍ يعلو عن سطر الحقول.

   **فصار كلٌّ بطاقةً**: ما يُقرأ أولًا في صدرها، وما يُكتب في ذيلها،
   **والدرجةُ كتلةٌ واحدةٌ لا خانتين متباعدتين** (`12 / 15` تُقرأ معًا).
   ------------------------------------------------------------------ */

.eval-items {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.eval-item {
    border: 1px solid var(--ui-border, #e2e8f0);
    border-radius: var(--ui-input-radius, 12px);
    background: var(--ui-surface-1, #fff);
    padding: .85rem 1rem;
    transition: var(--ui-transition);
}

/* **والبندُ الذي يُملأ يُميَّز** — فيُعرف موضعُ اليد في قائمةٍ طويلة. */
.eval-item:focus-within {
    border-color: var(--primary, #0d7c66);
    box-shadow: 0 0 0 3px var(--ui-focus-ring, rgba(13, 124, 102, .12));
}

/* **الصدرُ سطرٌ واحد**: نصُّ البند يمتدّ، وكتلةُ الدرجة لا تنكمش. */
.eval-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/**
 * **وأسطرُ البند من `text-lines` لا من هنا** — القاعدةُ الواحدةُ في صنفٍ واحد
 * ({@see \TextLinesTest})، **وصنفٌ ثانٍ يكرّرها يفترق عنها بأول تعديل**.
 */
.eval-item-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ui-text-primary, #0f172a);
    overflow-wrap: anywhere;
}

/* **والدرجةُ من نهايتها**: `المُدخَل / الحدّ` كتلةٌ واحدةٌ تُقرأ رقمين لا عمودين. */
.eval-score-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .5rem;
    border-radius: var(--ui-btn-radius, 12px);
    background: var(--ui-surface-2, #f1f5f9);
}

.eval-score-box input {
    width: 5.25rem;
    height: 34px;
    padding: .25rem .5rem;
    border: 1px solid var(--ui-border-strong, #cbd5e1);
    border-radius: var(--ui-btn-sm-radius, 8px);
    background: var(--ui-surface-1, #fff);
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    color: var(--ui-text-primary, #0f172a);
}

.eval-score-box input:focus {
    outline: none;
    border-color: var(--primary, #0d7c66);
}

.eval-score-max {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ui-text-muted, #64748b);
    white-space: nowrap;
}

/* **والذيلُ لما يُكتب** — السببُ والجواب، مفصولين بخطٍّ خافتٍ عن البند. */
.eval-item-fill {
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--ui-border, #e2e8f0);
}

.eval-item-fill textarea,
.eval-item-fill input {
    width: 100%;
    border: 1px solid var(--ui-border, #e2e8f0);
    border-radius: var(--ui-btn-sm-radius, 8px);
    padding: .45rem .65rem;
    font-size: .85rem;
    color: var(--ui-text-primary, #0f172a);
    background: var(--ui-surface-1, #fff);
}

.eval-item-fill textarea:focus,
.eval-item-fill input:focus {
    outline: none;
    border-color: var(--primary, #0d7c66);
}

.eval-item-fill textarea { line-height: 1.9; white-space: pre-wrap; resize: vertical; }
.eval-item-fill + .eval-item-fill { margin-top: .5rem; padding-top: 0; border-top: 0; }

@media (max-width: 575.98px) {
    .eval-item-head { flex-direction: column; }
    .eval-score-box { align-self: flex-start; }
}

/* ------------------------------------------------------------------
   ٢١-ب · صفُّ اللحن — شبكةٌ بأربعة حقولٍ وزرٍّ على سطرها
   ------------------------------------------------------------------
   **والعرضُ بقدر ما يُكتب**: الكلمةُ أوسعُها، والآيةُ رقمٌ فلا تأخذ ربعَ الصفّ.
   **والتلميحُ تحت الآية** — وكان تحت السورة، **فيُقرأ مدًى للسورة لا للآية**.
   ------------------------------------------------------------------ */

.luhn-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 6.5rem auto;
    gap: .65rem;
    align-items: end;
    padding: .8rem;
    border: 1px solid var(--ui-border, #e2e8f0);
    border-radius: var(--ui-input-radius, 12px);
    background: var(--ui-surface-1, #fff);
}

.luhn-row + .luhn-row { margin-top: .6rem; }

.luhn-row:focus-within {
    border-color: var(--primary, #0d7c66);
    box-shadow: 0 0 0 3px var(--ui-focus-ring, rgba(13, 124, 102, .12));
}

.luhn-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }

.luhn-field > label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--ui-text-muted, #64748b);
    margin: 0;
}

.luhn-field > .field-control,
.luhn-field > input,
.luhn-field > select {
    width: 100%;
    height: 38px;
    border: 1px solid var(--ui-border, #e2e8f0);
    border-radius: var(--ui-btn-sm-radius, 8px);
    padding: .3rem .6rem;
    font-size: .85rem;
    background: var(--ui-surface-1, #fff);
    color: var(--ui-text-primary, #0f172a);
}

.luhn-field > .field-control:focus,
.luhn-field > input:focus,
.luhn-field > select:focus {
    outline: none;
    border-color: var(--primary, #0d7c66);
}

/* **والمدى تحت خانته** — سطرٌ خافتٌ لا يزحزح الحقلَ عن سطر إخوته. */
.luhn-hint {
    font-size: .7rem;
    color: var(--ui-text-muted, #64748b);
    min-height: 1rem;
    direction: ltr;
    text-align: start;
}

/* **وزرُّ الحذف على سطر الحقول** — لا معلَّقًا فوقها ولا هابطًا تحتها. */
.luhn-remove {
    height: 38px;
    width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-btn-sm-radius, 8px);
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .luhn-row { grid-template-columns: 1fr 1fr; }
    .luhn-remove { justify-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   كشف التحضير على الجوال

   الجدول ذو الأعمدة الثلاثة مناسب للحاسوب، لكن عمود الحالة يضغط أربعة أزرار
   حتى تتراكب نصوصها على الشاشات الصغيرة. على الجوال يصبح كل طالب بطاقة رأسية،
   والحالات شبكة 2×2 بأهداف لمس كاملة العرض. يبقى DOM جدولًا لسطح المكتب وقارئ
   الشاشة، ويتغيّر العرض وحده عند نقطة الانقطاع.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .attendance-quick-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem !important;
    }

    .attendance-quick-label {
        grid-column: 1 / -1;
        margin-inline-end: 0 !important;
    }

    .attendance-quick-actions .btn {
        width: 100%;
        min-height: 2.5rem;
        white-space: nowrap;
    }

    .attendance-sheet,
    .attendance-sheet tbody,
    .attendance-sheet tr,
    .attendance-sheet td {
        display: block;
        width: 100%;
    }

    .attendance-sheet thead {
        display: none;
    }

    .attendance-sheet tbody tr {
        padding: 1rem;
        border-bottom: 1px solid var(--ui-border, #e2e8f0);
    }

    .attendance-sheet tbody tr:last-child {
        border-bottom: 0;
    }

    .attendance-sheet tbody td {
        padding: 0 !important;
        border: 0 !important;
        min-width: 0 !important;
    }

    .attendance-status-cell,
    .attendance-reason-cell {
        margin-top: .75rem;
    }

    .attendance-state-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem !important;
    }

    .attendance-state-grid .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-height: 2.5rem;
        margin: 0;
        white-space: nowrap;
    }

    .attendance-state-choice {
        display: block;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .attendance-save .btn {
        width: 100%;
        min-height: 2.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ٢٢ — شارةُ ما لم يُقرأ في القائمة الجانبية

   > «لو أمكن أن يظهر إشعار بوصول رسالة جديدة على أيقونة الرسائل الداخلية
   > الموجودة بالقائمة على اليمين.» — صاحبُ النظام · 2026-08-19

   **وموضعُها آخرُ السطر لا فوق الأيقونة**: القائمةُ تُطوى في الجوّال فتبقى
   الأيقونةُ وحدَها، **وشارةٌ معلَّقةٌ على حرفٍ تُقصّ مع النصّ**. و`margin-inline-start:auto`
   تدفعها إلى طرف السطر في الاتجاهين، فلا يُكتب لها موضعٌ ثانٍ لليسار.

   **ولونُها سماويٌّ لا أحمر** — «غيّر اللون للون مختلف عشان يكون مميز»
   (صاحبُ النظام · 2026-08-20).

   **وأرضُها بنّيةٌ برتقالية**: البواباتُ الثلاثُ ولوحةُ الفرع كلُّها
   `.branch-panel`، **والأحمرُ جارُ البرتقاليِّ في دائرة الألوان** فيذوب فيه —
   ولا يبرز إلا بقدر ما يفرّق العينُ بين حمرةٍ وحمرة. **والسماويُّ مقابلُه**،
   فيُرى من طرف العين.

   **ونصُّها داكنٌ لا أبيض**: `#38bdf8` لونٌ فاتح، **والأبيضُ عليه لا يكاد يُقرأ**
   (نسبةُ تباينٍ دون ٢:١)، ورقمُ الشارة هو المقصودُ منها.
   ═══════════════════════════════════════════════════════════════════════ */

.sidebar-badge {
    margin-inline-start: auto;
    min-width: 1.35rem;
    padding: 0 .4rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #38bdf8;
    color: #082f49;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .18);
}

/* **والبندُ النشط شارتُه على أرضيةٍ خضراء** — فتُفصل بحدٍّ فاتحٍ لا بظلٍّ داكن. */
.sidebar-link.active .sidebar-badge {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

/* **وخياراتُ سؤال الاختيار في استمارة الزيارة** — صفٌّ يلتفّ، لا عمودٌ يطيل البطاقة. */
.eval-choices {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .9rem;
}

.eval-choice {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem;
    border: 1px solid var(--c-border, #e2e8f0);
    border-radius: var(--ui-input-radius, 12px);
    font-size: .88rem;
    cursor: pointer;
}

.eval-choice:has(input:checked) {
    border-color: var(--primary, #0d7c66);
    background: color-mix(in srgb, var(--primary, #0d7c66) 8%, transparent);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   ٢٣ — أيامُ المسار التي لم تأتِ بعد

   > «الأيام الدراسية للطالب لا تظهر كلها حتى نهاية الفصل الدراسي ويظهر فقط
   > جزء منها.» — صاحبُ النظام · 2026-08-20

   **وحين تُضمُّ بقيةُ الفصل يصير في الجدول نوعان**: يومٌ وقع وله حضورٌ ونتيجة،
   **ويومٌ موعدُه بعد شهر** لا شيءَ فيه إلا مقرَّرُه. **وسطرٌ فارغٌ بلا فرقٍ
   يُقرأ تقصيرًا** — فيُظنّ الطالبُ متروكًا وإنما اليومُ لم يحن.

   **والفرقُ خفوتٌ لا لون**: الصفُّ يبقى مقروءًا، ووسمُ «قادم» هو الناطق.
   ═══════════════════════════════════════════════════════════════════════ */

tr.pathway-upcoming > td { opacity: .62; }

/* ═══════════════════════════════════════════════════════════════════════
   ٢٤ — إجراءُ الاختبار: الرأسُ الثابت وبنودُ الخصم

   > «لو أمكن تثبيت هذه المساحة بحيث لو نزلت لأسفل الصفحة تكون ظاهرة أمامي
   > بدون ما تختفي، ولو أمكن أن تكون نتيجة الاختبار بالأعلى.»
   > — صاحبُ النظام · 2026-08-22

   **ومقدارُ الاختبار والنتيجةُ يُقرآن معًا وإلا لم يُقرأ أحدُهما**: المقدارُ في
   الرأس والنتيجةُ في الذيل يجعلان المُختبِرَ يمرّر ليعرف فيمَ يختبر ثم يمرّر
   ليعرف ما بلغ. **فجُمعا في شريطٍ واحدٍ يلتصق تحت الشريط العلويّ.**

   **و`top` قيمتُه ارتفاعُ الشريط العلويّ** — وهو `sticky` بدوره، فرقمٌ أقلُّ
   يُدسّ الشريطَ تحته ويُخفي نصفَه.
   ═══════════════════════════════════════════════════════════════════════ */

.test-sticky {
    position: sticky;
    top: var(--topbar-h, 64px);
    z-index: 20;
    margin-bottom: 1rem;
    border: 1px solid var(--ui-border, #e2e8f0);
    border-radius: var(--ui-input-radius, 12px);
    background: var(--ui-surface-1, #fff);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

.test-sticky-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    padding: .7rem 1rem;
}

/* **والمقدارُ يمتدّ والنتيجةُ لا تنكمش** — فمدًى طويلٌ لا يزحم الرقم. */
.test-sticky-scope {
    flex: 1 1 16rem;
    min-width: 0;
}

.test-sticky-scope .scope-label {
    font-size: .75rem;
    color: var(--ui-text-muted, #64748b);
}

.test-sticky-scope .scope-value {
    font-weight: 700;
    color: var(--ui-text-primary, #0f172a);
    overflow-wrap: anywhere;
}

.test-sticky-figure {
    flex: 0 0 auto;
    text-align: center;
    line-height: 1.15;
}

.test-sticky-figure .figure-label {
    font-size: .72rem;
    color: var(--ui-text-muted, #64748b);
}

.test-sticky-figure .figure-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--ui-text-primary, #0f172a);
}

.test-sticky-figure .figure-value small {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ui-text-muted, #64748b);
}

/* **والخصمُ يُقرأ سالبًا** — رقمٌ عارٍ بجانب النتيجة يُظنّ نتيجةً ثانية. */
.test-sticky-figure.is-deducted .figure-value { color: #b91c1c; }

.test-sticky-bar {
    height: 6px;
    border-radius: 0 0 var(--ui-input-radius, 12px) var(--ui-input-radius, 12px);
    background: var(--ui-surface-2, #f1f5f9);
    overflow: hidden;
}

.test-sticky-bar > span {
    display: block;
    height: 100%;
    background: var(--primary, #0d7c66);
    transition: width .15s ease;
}

/* ── بندُ الخصم: عدّادٌ بزرَّين لا حقلُ درجة ───────────────────────────── */

.deduct-note {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ui-text-muted, #64748b);
    white-space: nowrap;
}

.counter-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .35rem;
    border-radius: var(--ui-btn-radius, 12px);
    background: var(--ui-surface-2, #f1f5f9);
}

.counter-box button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--ui-border-strong, #cbd5e1);
    border-radius: var(--ui-btn-sm-radius, 8px);
    background: var(--ui-surface-1, #fff);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ui-text-primary, #0f172a);
    cursor: pointer;
}

.counter-box button:hover { border-color: var(--primary, #0d7c66); }

.counter-box input {
    width: 4rem;
    height: 34px;
    padding: .25rem .35rem;
    border: 1px solid var(--ui-border-strong, #cbd5e1);
    border-radius: var(--ui-btn-sm-radius, 8px);
    background: var(--ui-surface-1, #fff);
    font-size: .95rem;
    font-weight: 700;
    text-align: center;
    color: var(--ui-text-primary, #0f172a);
}

/* ── صفوفُ اللحن: كلمةٌ وسورةٌ وآية ───────────────────────────────────── */

.lahn-rows { display: flex; flex-direction: column; gap: .5rem; }

.lahn-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, .9fr) auto;
    gap: .5rem;
    align-items: center;
}

@media (max-width: 575.98px) {
    .lahn-row { grid-template-columns: 1fr 1fr; }
    .lahn-row .lahn-word { grid-column: 1 / -1; }
}

.lahn-row input,
.lahn-row select {
    width: 100%;
    height: 38px;
    border: 1px solid var(--ui-border, #e2e8f0);
    border-radius: var(--ui-btn-sm-radius, 8px);
    padding: .35rem .6rem;
    font-size: .88rem;
    background: var(--ui-surface-1, #fff);
    color: var(--ui-text-primary, #0f172a);
}

.lahn-row input:focus,
.lahn-row select:focus {
    outline: none;
    border-color: var(--primary, #0d7c66);
}

.lahn-drop {
    width: 34px;
    height: 34px;
    border: 1px solid var(--ui-border, #e2e8f0);
    border-radius: var(--ui-btn-sm-radius, 8px);
    background: var(--ui-surface-1, #fff);
    color: #b91c1c;
    cursor: pointer;
}

.lahn-drop:hover { border-color: #b91c1c; }

/* ------------------------------------------------------------------
   ١٤. شاشةُ الإجازة — إضافةً وتعديلًا
   ------------------------------------------------------------------
   الشاشةُ المشتركةُ تصفّ الحقولَ صفًّا واحدًا وتترك خاناتِ الأهداف عاريةً في
   شبكةٍ بلا حدّ: **تسعُ خاناتٍ متجاورةٍ لا يُعرف أين تنتهي مجموعةٌ وتبدأ أختُها**،
   ولا يقول شيءٌ على من ستسري الإجازةُ قبل الحفظ.

   فصارت قسمين مبطَّنين: تفاصيلُ الإجازة، ثم «على من تسري» — والأهدافُ أقراصٌ
   تُضغط لا مربعاتٌ تُصاد بالعين.
   ------------------------------------------------------------------ */

.leave-form { display: flex; flex-direction: column; gap: 1.15rem; }

.leave-section {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-card-radius);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--ui-shadow-sm);
}

.leave-section-head {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .95rem 1.15rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-table-head-bg);
}

.leave-section-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(13, 124, 102, .1);
    color: #0d7c66;
}

.leave-section-title { font-weight: 700; font-size: .95rem; color: var(--ui-text-primary); line-height: 1.35; }
.leave-section-sub { font-size: .78rem; color: var(--ui-text-muted); }
.leave-section-body { padding: 1.15rem; }

/* شريطُ المدى: «من … إلى …» وعددُ أيامها يُحسب أمام العين */
.leave-span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    background: rgba(13, 124, 102, .1);
    color: #0b6b58;
}

.leave-span[data-state="invalid"] { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.leave-span[data-state="empty"]   { background: var(--ui-table-hover-bg); color: var(--ui-text-muted); }

/* خلاصةُ من تسري عليه — تتبدّل مع كلِّ ضغطة */
.leave-scope {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .9rem;
    border-radius: var(--ui-input-radius);
    background: var(--ui-table-head-bg);
    border: 1px dashed var(--ui-border-strong);
    font-size: .84rem;
    color: var(--ui-text-secondary);
    margin-bottom: 1.05rem;
}

.leave-scope strong { color: var(--ui-text-primary); font-weight: 700; }
.leave-scope[data-state="targeted"] { border-style: solid; border-color: rgba(13, 124, 102, .35); background: rgba(13, 124, 102, .06); }

.leave-group + .leave-group { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--ui-border); }

.leave-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}

.leave-group-label { font-size: .84rem; font-weight: 600; color: var(--ui-text-secondary); }

.leave-count {
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--ui-table-hover-bg);
    color: var(--ui-text-muted);
}

.leave-count[data-state="on"] { background: rgba(13, 124, 102, .12); color: #0b6b58; }

.leave-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* والخانةُ محجوبةٌ لا محذوفة: القرصُ هو ما يُرى، والمُدخَلُ هو ما يُرسَل ويُبلَّغ */
.leave-chip { position: relative; display: inline-flex; margin: 0; }
.leave-chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.leave-chip span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--ui-text-secondary);
    font-size: .83rem;
    line-height: 1.3;
    transition: var(--ui-transition);
}

.leave-chip span::before {
    content: '+';
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    opacity: .55;
}

.leave-chip input:checked + span {
    background: #0d7c66;
    border-color: #0d7c66;
    color: #fff;
    box-shadow: var(--ui-shadow-sm);
}

.leave-chip input:checked + span::before { content: '✓'; opacity: 1; }
.leave-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--ui-focus-ring); }
.leave-chip input:not(:checked):hover + span { border-color: #0d7c66; color: #0b6b58; }

.leave-empty { font-size: .8rem; color: var(--ui-text-muted); }

.leave-actions {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding-top: .25rem;
}

@media (max-width: 575.98px) {
    .leave-section-body { padding: .95rem; }
    .leave-actions { flex-direction: column-reverse; }
    .leave-actions .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   اختيارُ الطلاب للإلحاق بالحلقة — صينيةٌ تحمل المختارَ عبر صفحات الجدول

   الجدولُ يُعاد رسمُه بكل بحثٍ وصفحة، فالمختارُ يُحفظ خارجَه ويُعرض رقاقاتٍ
   تُنزع واحدةً واحدة، والزرُّ يعدّ ما سيُرسَل. والصفُّ كلُّه يُضغط لا خانتُه.
   ═══════════════════════════════════════════════════════════════════════ */
.pick-tray {
    border: 1px solid rgba(13, 124, 102, .35);
    border-radius: var(--ui-card-radius, 14px);
    background: rgba(13, 124, 102, .06);
    padding: .8rem 1rem;
    margin-bottom: 1rem;
}
.pick-tray-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
.pick-tray-title { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .9rem; color: #0b6b58; }
.pick-clear {
    border: 0; background: transparent; padding: .2rem .4rem; border-radius: var(--ui-btn-sm-radius, 8px);
    color: var(--ui-text-secondary); font-size: .8rem; cursor: pointer; transition: var(--ui-transition);
}
.pick-clear:hover { background: rgba(220, 53, 69, .1); color: #b02a37; }

.pick-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6em; height: 1.6em; padding: 0 .5em; border-radius: 999px;
    background: #0d7c66; color: #fff; font-size: .78rem; font-weight: 700; line-height: 1;
}
.pick-badge-light { background: rgba(255, 255, 255, .28); color: #fff; margin-inline-start: .35rem; }

/* والصينيةُ لا تدفع الجدولَ بعيدًا: أربعون رقاقةً تُمرَّر داخلها لا خارجَها */
.pick-chips { display: flex; flex-wrap: wrap; gap: .45rem; max-height: 9.5rem; overflow-y: auto; padding: .15rem; }
.pick-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .4rem .3rem .8rem; border-radius: 999px;
    background: #fff; border: 1px solid #0d7c66; color: #0b6b58; font-size: .82rem; line-height: 1.3;
    box-shadow: var(--ui-shadow-sm);
}
[dir="rtl"] .pick-chip, html[lang^="ar"] .pick-chip { padding: .3rem .8rem .3rem .4rem; }
.pick-chip-remove {
    border: 0; width: 1.45rem; height: 1.45rem; border-radius: 50%; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(13, 124, 102, .12); color: #0b6b58; cursor: pointer; font-size: .75rem; transition: var(--ui-transition);
}
.pick-chip-remove:hover { background: #0d7c66; color: #fff; }
.pick-chip-remove:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ui-focus-ring); }

.pick-table tbody tr { cursor: pointer; }
.pick-table tbody tr.is-picked > td { background: rgba(13, 124, 102, .09); }
.pick-table tbody tr.is-picked > td:first-child { box-shadow: inset 3px 0 0 #0d7c66; }
.pick-table .pick-col { width: 2.75rem; text-align: center; }
.pick-table .form-check-input { margin: 0; cursor: pointer; width: 1.1rem; height: 1.1rem; }
.pick-table .form-check-input:checked { background-color: #0d7c66; border-color: #0d7c66; }

.pick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.pick-actions .btn-h-primary:disabled { opacity: .55; cursor: not-allowed; }
.pick-hint { font-size: .8rem; color: var(--ui-text-muted); }

@media (max-width: 575.98px) {
    .pick-actions { flex-direction: column; align-items: stretch; }
    .pick-actions .btn-h-primary { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   شجرةُ بصمة الفترات — الموظفُ مرةً، وتحته أيامُه، وتحت كلِّ يومٍ فتراتُه

   الصفُّ الرأسُ يمتدّ على الأعمدة كلِّها ويحمل عدَّ حالاته، والعمقُ إزاحةٌ في
   أول خلية، والسهمُ يدور حين يُفتح الفرع.
   ═══════════════════════════════════════════════════════════════════════ */
.period-tree tr.period-tree-staff > td { background: rgba(13, 124, 102, .06); border-top: 2px solid rgba(13, 124, 102, .25); }
.period-tree tr.period-tree-day > td { background: rgba(15, 23, 42, .025); }
/* والفترةُ تُزاح بعد نصِّ يومها لا بعد سهمه — فتُقرأ تحته في الكشف وفي تفصيل الموظف */
.period-tree tr.period-tree-day[data-tree-depth="1"] > td:first-child { padding-inline-start: 2.25rem; }
.period-tree tr.period-tree-period[data-tree-depth="1"] > td:first-child { padding-inline-start: 3.75rem; }
.period-tree tr.period-tree-period[data-tree-depth="2"] > td:first-child { padding-inline-start: 5rem; }
.period-tree-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.period-tree-counts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-inline-start: auto; }
.period-tree-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 0; background: transparent; padding: .15rem .25rem; margin: 0;
    color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: var(--ui-btn-sm-radius, 8px);
}
.period-tree-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ui-focus-ring); }
.period-tree-chevron { font-size: .75rem; color: var(--ui-text-secondary); transition: var(--ui-transition); }
.period-tree-toggle[aria-expanded="true"] .period-tree-chevron { transform: rotate(-90deg); }