/* ═══════════════════════════════════════════════════════════════════════════
   module-records-list — قائمة سجلات الشاشة الديناميكية (‏/m/{key})
   ---------------------------------------------------------------------------
   اعتماد التصميم المُقرّ (حزمة Blazor-Leads-Handoff) على الشاشة القائمة.

   مبدأ هذه الدفعة: **أصناف مُضافة لا بديلة**. تبقى أصناف Bootstrap
   (‏.table و.card) كما هي، وتُضاف أصناف mrl- فوقها. السبب موثّق:
   ‏dynamic-modules.css:169-170 ينصّ على أن عمود الإجراءات الملتصق يُقرأ فقط
   لأن Bootstrap يرسم --bs-table-bg على كل خلية؛ وإسقاط .table يُفقد ذلك
   ويُفقد `width:max-content; min-width:100%` التي تصنع التمرير الأفقي داخل
   الجدول. فالاستبدال يكسر، والإضافة تبني.

   حدود مقصودة ما زالت قائمة: لا AND/OR بين شروط الفلتر (يحتاج تعديل
   MatchesFilters وعقد المعيار)، ولا قوائم إجراءات منسدلة داخل الخلية الملتصقة
   (تُقصّ داخل الحاوية القابلة للتمرير — تحتاج portal في JS).
   ═══════════════════════════════════════════════════════════════════════════ */

/* الكتلة الإلزامية في رأس كل ملف شاشة (premium-screen-design-system.mdc).
   القيم مضبوطة على التصميم المُقرّ: زوايا 8px وبلا ظل — انحراف مقصود عن
   الافتراضي (16px + ظل) ومُسجَّل هنا لا مسكوت عنه. */
.mrl-shell {
    --radius: var(--radius-system, 8px);
    /* قيمة صريحة لا var(--radius-sm): الخاصية تحمل الاسم نفسه، فالإحالة إلى
       نفسها دورة تُبطل القيمة وقت الحساب. القالب في القاعدة يستعمل قيماً
       صريحة لأنصاف الأقطار أصلاً (القيود على الألوان لا على الزوايا). */
    --radius-sm: 6px;
    --border: 1px solid var(--border-color);
    --shadow: none;
    display: grid;
    gap: var(--space-6, 24px);
}

/* ───────────────────────────────────────────────────────────────────────────
   لوحة الفلاتر المتقدمة
   كانت تحمل لونين خامّين مضمّنين في الترميز (#f8f9fa و#e9ecef) — مخالفة
   صريحة لقاعدة «التوكنات فقط». والتصميم المُقرّ يجعل ترويسة اللوحة شريطاً
   مُلوّناً بلون العلامة الشفّاف.
   ─────────────────────────────────────────────────────────────────────────── */
.mrl-fb {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-system, 8px);
    background: var(--background-primary);
    /* لا overflow: hidden هنا: اللوحة تحتضن <select> لكل شرط، والحاوية
       المقصوصة تبتلع قائمته المنسدلة — الفخّ الموثّق في قاعدة الشاشات. */
}

.mrl-fb-head {
    border-start-start-radius: var(--radius-system, 8px);
    border-start-end-radius: var(--radius-system, 8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: rgba(var(--primary-rgb), 0.06);
    border-bottom: 1px solid var(--border-color);
}

.mrl-fb-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-weight: 600;
    color: var(--text-primary);
}

.mrl-fb-body {
    padding: var(--space-3, 12px) var(--space-4, 16px);
}

/* ───────────────────────────────────────────────────────────────────────────
   شارة الحالة
   ---------------------------------------------------------------------------
   قيمة الحالة بيانات المنشأة — تُطبع حرفياً ولا تُترجم. الشارة تلوّن الخلفية
   فقط ويبقى النصّ بلون النصّ الأساسي: التلوين بالنغمة الوسطى على تدرّجها
   (النمط القائم في premium-list-screen.css) يسقط دون معيار التباين AA،
   ونصّ داكن على تدرّج فاتح يمرّ دائماً. لا توكنات جديدة في هذه الدفعة.
   ─────────────────────────────────────────────────────────────────────────── */
.mrl-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 2px var(--space-3, 12px);
    border-radius: 999px;
    background: var(--color-gray-100, #f3f4f6);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.mrl-status--open {
    background: rgba(var(--info-rgb), 0.12);
    border-color: rgba(var(--info-rgb), 0.28);
}

.mrl-status--busy {
    background: rgba(var(--warning-rgb), 0.14);
    border-color: rgba(var(--warning-rgb), 0.30);
}

.mrl-status--done {
    background: rgba(var(--success-rgb), 0.12);
    border-color: rgba(var(--success-rgb), 0.28);
}

.mrl-status--stopped {
    background: rgba(var(--error-rgb), 0.10);
    border-color: rgba(var(--error-rgb), 0.26);
}

/* ───────────────────────────────────────────────────────────────────────────
   الحالات الفارغة — مبدئية مقابل مُرشَّحة
   كانت حالة واحدة («لا توجد سجلات.») بلا أي مخرج: من رشّح حتى الصفر لا يجد
   زرّ إعادة تعيين، ومن فتح شاشة فارغة لا يجد دعوة لإنشاء أول سجل.
   ─────────────────────────────────────────────────────────────────────────── */
.mrl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-8, 32px) var(--space-4, 16px);
    text-align: center;
}

.mrl-empty .material-icons {
    font-size: 40px;
    color: var(--text-muted);
}

.mrl-empty-title {
    font-weight: 600;
    color: var(--text-primary);
}

.mrl-empty-hint {
    color: var(--text-secondary);
    max-width: 34rem;
}

.mrl-empty-cta {
    margin-block-start: var(--space-2, 8px);
}

/* ───────────────────────────────────────────────────────────────────────────
   حالة الانشغال أثناء إعادة الجلب
   البحث والفلاتر وإعادة التعيين تُعيد الجلب اليوم والصفوف القديمة على الشاشة
   بلا أي إشارة. التعتيم وحده — بلا حجب التفاعل — كي لا يُفقد موضع التمرير.
   ─────────────────────────────────────────────────────────────────────────── */
.mrl-busy {
    opacity: 0.55;
    transition: opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* هروب الاقتطاع للقوائم المُحسَّنة داخل لوحة الفلاتر.
   المشروع فيه مُحسِّنان لعناصر select: الأقدم يُخرج .ss-dropdown، والأحدث
   يُخرج .nss-* ويَنقل قائمته إلى <body>. نغطّيهما معاً لأن أيّهما قد يلتقط
   قوائم الشروط حسب عدد الخيارات. */
.mrl-fb:has(.ss-dropdown.open),
.mrl-fb:has(.nss-dropdown.open),
.mrl-fb-body:has(.ss-dropdown.open),
.mrl-fb-body:has(.nss-dropdown.open) {
    overflow: visible !important;
    z-index: auto !important;
}

.mrl-fb .ss-dropdown.open,
.mrl-fb .nss-dropdown.open {
    z-index: 2147483647 !important;
}

@media (max-width: 767px) {
    .mrl-fb-head,
    .mrl-fb-body {
        padding-inline: var(--space-3, 12px);
    }

    .mrl-empty {
        padding-block: var(--space-6, 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mrl-busy {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   تذييل القائمة — عدد السجلات وتنقّل الصفحات وحجم الصفحة
   ---------------------------------------------------------------------------
   العدد مطابق للبحث والفلاتر في نطاق المنشأة لا عدد الصفحة المعروضة.
   أسهم التنقّل منطقية الاتجاه: chevron_right يعني «السابق» في RTL، والمتصفّح
   يعكس ترتيب العناصر لا الأيقونات — فالاختيار مقصود لا خطأ.
   ═══════════════════════════════════════════════════════════════════════════ */
.mrl-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
}

.mrl-foot-paging {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

/* الصفحة الحالية بيان لا زرّ: لا قائمة أرقام في التصميم المُقرّ. */
.mrl-foot-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding-inline: var(--space-2, 8px);
    border-radius: var(--radius-system, 8px);
    background: var(--primary-color);
    color: var(--ds-btn-primary-text, var(--background-primary));
    font-weight: 700;
}

.mrl-foot-of {
    color: var(--text-muted);
}

.mrl-foot-size-label {
    margin-inline-start: var(--space-2, 8px);
    margin-block-end: 0;
    color: var(--text-secondary);
    white-space: nowrap;
}

.mrl-foot-size {
    width: auto;
    min-width: 5rem;
}

.mrl-foot-count {
    color: var(--text-secondary);
    font-weight: 600;
}

/* قائمة حجم الصفحة قد يلتقطها مُحسِّن القوائم. الحاوية القاصّة ليست التذييل
   بل .card-body التي تحمل overflow-x: hidden (dynamic-modules.css:116) كي يبقى
   شريط التمرير داخل الجدول — فالهروب يجب أن يكون عندها، ووضعه على التذييل
   وحده لا يفكّ القصّ. نرفع z-index القائمة أيضاً لتعلو الترويسة الملتصقة. */
.card:has(.module-table-wrap) > .card-body:has(.mrl-foot .ss-dropdown.open),
.card:has(.module-table-wrap) > .card-body:has(.mrl-foot .nss-dropdown.open) {
    overflow-x: visible !important;
}

.mrl-foot:has(.ss-dropdown.open),
.mrl-foot:has(.nss-dropdown.open) {
    overflow: visible !important;
    z-index: auto !important;
}

.mrl-foot .ss-dropdown.open,
.mrl-foot .nss-dropdown.open {
    z-index: 2147483647 !important;
}

@media (max-width: 767px) {
    .mrl-foot {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--space-2, 8px);
    }

    .mrl-foot-paging {
        justify-content: center;
        flex-wrap: wrap;
    }

    .mrl-foot-count {
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   مبدّل جمع الشروط — «جميع الشروط (و)» مقابل «أي شرط (أو)»
   ---------------------------------------------------------------------------
   زرّان لا قائمة منسدلة: الخياران اثنان فقط، والقائمة تُخفي أحدهما بلا داعٍ.
   الحالة تُنقل بـaria-pressed لا باللون وحده.
   ═══════════════════════════════════════════════════════════════════════════ */
.mrl-fb-head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

.mrl-match {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-system, 8px);
    background: var(--background-primary);
    overflow: hidden;
}

.mrl-match-btn {
    min-height: 36px;
    padding-inline: var(--space-3, 12px);
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
                color 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mrl-match-btn + .mrl-match-btn {
    border-inline-start: 1px solid var(--border-color);
}

.mrl-match-btn:hover {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--text-primary);
}

.mrl-match-btn.is-on {
    background: var(--primary-color);
    color: var(--ds-btn-primary-text, var(--background-primary));
}

@media (max-width: 767px) {
    .mrl-match {
        width: 100%;
    }

    .mrl-match-btn {
        flex: 1 1 0;
        /* هدف لمس على الجوال */
        min-height: var(--ds-field-height-mobile, 48px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mrl-match-btn {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ملخّص المسودّة وأخطاء التحقّق وتذييل لوحة الفلاتر
   ---------------------------------------------------------------------------
   الملخّص يصف المسودّة لا نتائج الجدول — يتحدّث أثناء التحرير قبل «تطبيق».
   لذلك نبرته معلوماتية لا تأكيدية.
   ═══════════════════════════════════════════════════════════════════════════ */
.mrl-fb-count {
    display: inline-flex;
    align-items: center;
    margin-inline-start: var(--space-2, 8px);
    padding: 1px var(--space-2, 8px);
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.mrl-fb-summary {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    margin: 0 var(--space-4, 16px) var(--space-3, 12px);
    padding: var(--space-3, 12px);
    border-radius: var(--radius-system, 8px);
    background: rgba(var(--primary-rgb), 0.06);
    color: var(--text-secondary);
    line-height: 1.8;
}

.mrl-fb-summary strong {
    color: var(--text-primary);
}

.mrl-fb-errors {
    margin: 0 var(--space-4, 16px) var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--error-color);
    border-radius: var(--radius-system, 8px);
    background: rgba(var(--error-rgb), 0.06);
    color: var(--text-primary);
}

.mrl-fb-errors ul {
    margin: 0;
    padding-inline-start: var(--space-4, 16px);
}

.mrl-fb-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-top: 1px solid var(--border-color);
}

.mrl-fb-foot-main {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-inline-start: auto;
}

@media (max-width: 767px) {
    .mrl-fb-summary,
    .mrl-fb-errors {
        margin-inline: var(--space-3, 12px);
    }

    .mrl-fb-foot {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .mrl-fb-foot-main {
        margin-inline-start: 0;
        justify-content: flex-end;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   شبكة شروط الفلتر — الحقل / المقارنة / القيمة
   ---------------------------------------------------------------------------
   كانت الشروط صفّاً ملتفّاً بعروض مضمّنة ثابتة تختلف باختلاف نوع الحقل، فلا
   تتحاذى الأعمدة بين شرط وآخر ويمتدّ الشرط سطراً كاملاً. الشبكة تُحاذي
   الأعمدة عبر الشروط كلّها، والعناوين تُكتب مرّة واحدة أعلى القائمة.

   العروض هنا بلا قيم مضمّنة في الترميز عمداً: قاعدة في
   responsive-refinements-2026.css تفرض width:100% على أي عنصر يحمل عرضاً
   مضمّناً تحت 767px، فكانت العروض تُلغى على الجوال بلا أثر يُرى.
   ═══════════════════════════════════════════════════════════════════════════ */
.mrl-fb-cols,
.mrl-fb-rule {
    display: grid;
    grid-template-columns: 3.5rem minmax(9rem, 1.1fr) minmax(8rem, 0.8fr) minmax(13rem, 1.6fr) 2.75rem;
    gap: var(--space-2, 8px);
    align-items: center;
}

.mrl-fb-cols {
    padding-inline: var(--space-2, 8px);
    margin-block-end: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.mrl-fb-rules {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.mrl-fb-rule {
    padding: var(--space-2, 8px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-system, 8px);
    background: var(--background-primary);
}

.mrl-fb-join {
    display: flex;
    justify-content: center;
}

.mrl-fb-join .badge {
    width: 100%;
    text-align: center;
}

.mrl-fb-cell {
    min-width: 0;
}

/* خانة القيمة تحتضن مُدخلاً واحداً أو مُدخلَي «بين» مع كلمة الوصل بينهما. */
.mrl-fb-value {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.mrl-fb-value > .form-control,
.mrl-fb-value > .form-select {
    flex: 1 1 0;
    min-width: 0;
}

.mrl-fb-to {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 13px;
}

.mrl-fb-del {
    display: flex;
    justify-content: center;
}

/* على الشاشات الضيّقة تنهار الشبكة إلى عمود واحد: خمسة أعمدة في 390px
   تُنتج حقولاً بعرض حرفين. العناوين تختفي لأن كل عنصر يصبح تحت بعضه. */
@media (max-width: 767px) {
    .mrl-fb-cols {
        display: none;
    }

    .mrl-fb-rule {
        grid-template-columns: 1fr;
        gap: var(--space-2, 8px);
    }

    .mrl-fb-join {
        justify-content: flex-start;
    }

    .mrl-fb-join .badge {
        width: auto;
        padding-inline: var(--space-3, 12px);
    }

    .mrl-fb-del {
        justify-content: flex-end;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   لوحة الأعمدة الظاهرة — اختيار ما يُعرض من حقول الشاشة في الجدول
   ---------------------------------------------------------------------------
   تعيد استعمال هيكل لوحة الفلاتر (‏.mrl-fb ورأسها وتذييلها) كي تبدو اللوحتان
   أداةً واحدة للجدول. التبديل يُطبَّق على الجدول فوراً، والحفظ يُثبّته لحساب
   المستخدم أو لكل المنشأة. كل بند هدف لمس كامل (‏44px) لا مربّع اختيار وحده.
   ═══════════════════════════════════════════════════════════════════════════ */
.mrl-cols-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-2, 8px);
}

.mrl-cols-item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 44px;
    margin: 0;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-system, 8px);
    background: var(--background-primary);
    cursor: pointer;
    transition: background-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mrl-cols-item:hover {
    background: rgba(var(--primary-rgb), 0.06);
}

.mrl-cols-item.is-on {
    border-color: rgba(var(--primary-rgb), 0.35);
    background: rgba(var(--primary-rgb), 0.06);
}

/* آخر عمود ظاهر: مربّعه معطَّل والبند كلّه يقول ذلك لا المربّع وحده. */
.mrl-cols-item:has(.form-check-input:disabled) {
    cursor: not-allowed;
}

.mrl-cols-item .form-check-input {
    flex: 0 0 auto;
    margin: 0;
    cursor: inherit;
}

.mrl-cols-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

/* وسم «إضافي»: حقل ليس في القائمة افتراضياً. محايد اللون — معلومة لا تحذير. */
.mrl-cols-tag {
    flex: 0 0 auto;
    padding: 1px var(--space-2, 8px);
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--color-gray-100, #f3f4f6);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}

.mrl-cols-hint {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-block-start: var(--space-3, 12px);
    color: var(--text-secondary);
    font-size: 13px;
}

/* تنبيه «غير محفوظ» بنغمة التحذير على خلفيتها لا على النصّ — النصّ يبقى
   بلون النصّ الأساسي كي يمرّ معيار التباين (نفس مبدأ شارة الحالة). */
.mrl-cols-unsaved {
    display: inline-block;
    margin-inline-start: var(--space-2, 8px);
    padding: 1px var(--space-2, 8px);
    border-radius: 999px;
    border: 1px solid rgba(var(--warning-rgb), 0.30);
    background: rgba(var(--warning-rgb), 0.14);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.mrl-cols-ok {
    margin: 0 var(--space-4, 16px) var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid rgba(var(--success-rgb), 0.35);
    border-radius: var(--radius-system, 8px);
    background: rgba(var(--success-rgb), 0.08);
    color: var(--text-primary);
}

/* نطاق الحفظ: «لي فقط» مقابل «جميع مستخدمي المنشأة» — يعيد استعمال مبدّل
   جمع الشروط (‏.mrl-match) فالخياران اثنان والحالة تُنقل بـaria-pressed. */
.mrl-cols-scope {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

.mrl-cols-scope-label {
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

.mrl-cols-scope-hint {
    flex-basis: 100%;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .mrl-cols-grid {
        grid-template-columns: 1fr;
    }

    .mrl-cols-item {
        min-height: var(--ds-field-height-mobile, 48px);
    }

    .mrl-cols-ok {
        margin-inline: var(--space-3, 12px);
    }

    .mrl-cols-scope {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mrl-cols-item {
        transition: none;
    }
}