/*
 * شاشات الموارد — الجداول، صفحات العرض، النماذج، والصفحات المخصصة.
 * ------------------------------------------------------------------
 * CSS عادي بلا بناء فوق theme.css (يُحمَّل بعده). كل لون من توكنات
 * theme.css (--dx-*) أو نبرات dx-tone-*، فيتبع هوية الشركة ووضع الليل
 * تلقائياً. خصائص منطقية فقط (الواجهة RTL). لا ألوان مكتوبة.
 *
 * الأعراف (مصدرها PHP في app/Filament/Admin/Resources/Support/Ui.php):
 *   dx-money / dx-amount  مبلغ بأرقام متساوية العرض — dx-zero للصفر (شرطة خافتة)
 *   dx-subheading         سطر الوصف تحت عنوان صفحة العرض (Ui::subheading)
 *   dx-dl                 قائمة تعريف تسمية | قيمة (Ui::details)
 *   dx-rhero / dx-ledger  رأس صفحة العرض وشريط الدفتر (Ui::hero)
 *
 * الأقسام
 *   1. المبالغ والأرقام     2. رأس الصفحة          3. شريط أدوات الجدول
 *   4. صفوف الجدول         5. الجدول على الموبايل  6. تبويبات العلاقات
 *   7. قوائم التعريف        8. رأس صفحة العرض      9. بطاقة الملخص
 *  10. النماذج والمعالج    11. دفعة التحصيل
 */

/* ================================================================
 * 1. المبالغ والأرقام
 * ================================================================ */

.dx-num,
.dx-money,
.dx-amount {
    font-variant-numeric: tabular-nums lining-nums;
}

.fi-ta-text-item.dx-money,
.fi-in-text-item.dx-money {
    white-space: nowrap;
}

/* مبلغ دقيق بوحدة صغيرة (x-dx.amount) */
.dx-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    white-space: nowrap;
}

.dx-amount-num {
    direction: ltr;
    unicode-bidi: isolate;
}

.dx-amount-unit {
    font-size: max(0.6875rem, 0.7em);
    font-weight: 600;
    color: var(--dx-fg-subtle);
}

/* الصفر: شرطة خافتة — غير الصفري يقفز للعين في عمود الأرقام */
.dx-zero,
.fi-ta-text-item.dx-zero,
.fi-in-text-item.dx-zero {
    color: var(--dx-fg-faint);
    font-weight: 500;
}

/* ================================================================
 * 2. رأس الصفحة — سطر الوصف بشارة الحالة وأجزاء مفصولة
 * ================================================================ */

.dx-subheading {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.dx-subheading > .dx-badge {
    margin-inline-end: 0.25rem;
}

/* ================================================================
 * 3. شريط أدوات الجدول: بحث ← تصفية ← الأعمدة، والإجراءات الجماعية في الطرف
 * ================================================================ */

.fi-ta-header-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.75rem;
    padding: 0.75rem 1rem;
    background-color: var(--dx-surface);
}

/* مجموعة البحث تبدأ السطر (يمين العربية) والإجراءات الجماعية بعدها */
.fi-ta-header-toolbar > div:last-child {
    order: -1;
    display: flex;
    flex: 1 1 18rem;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) {
    display: none;
}

.fi-ta-search-field {
    flex: 0 1 24rem;
    min-width: 0;
}

.fi-ta-search-field .fi-input-wrp {
    background-color: var(--dx-surface-sunken);
    box-shadow: 0 0 0 1px var(--dx-line);
}

.fi-ta-search-field .fi-input-wrp:focus-within {
    background-color: var(--dx-surface);
    box-shadow: 0 0 0 2px var(--dx-focus);
}

.fi-ta-search-field .fi-input {
    font-size: var(--dx-fs-md);
}

.fi-ta-header-toolbar .fi-dropdown-trigger .fi-btn {
    white-space: nowrap;
}

/* شارة عدد الفلاتر النشطة على زر «تصفية»: حبة بلون الشركة */
.fi-ta-filters-dropdown .fi-dropdown-trigger .fi-badge {
    color: var(--dx-accent-fg);
    background-color: var(--dx-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-500) 30%, transparent);
}

/* لوحتا الفلاتر والأعمدة */
.fi-ta-filters,
.fi-ta-col-manager {
    padding: 1rem;
}

.fi-ta-filters-heading,
.fi-ta-col-manager-heading {
    font-size: var(--dx-fs-md);
    font-weight: 700;
    color: var(--dx-fg);
}

.fi-ta-filters-actions-ctn,
.fi-ta-col-manager-actions-ctn {
    margin-block-start: 0.25rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--dx-line);
}

/* مؤشرات الفلاتر النشطة تحت الشريط: شرائح هادئة */
.fi-ta-filter-indicators {
    padding: 0.5rem 1rem;
    background-color: var(--dx-surface-sunken);
    border-block-start: 1px solid var(--dx-line);
}

.fi-ta-filter-indicators-label {
    font-size: var(--dx-fs-xs);
    font-weight: 600;
    color: var(--dx-fg-subtle);
}

/* ================================================================
 * 4. صفوف الجدول
 * ================================================================ */

.fi-ta-text-description {
    font-size: var(--dx-fs-xs);
    line-height: 1.5;
}

.fi-ta-cell .fi-ta-text-has-descriptions {
    gap: 0.0625rem;
}

.fi-ta-table > tbody > .fi-ta-row {
    transition: background-color var(--dx-dur) var(--dx-ease);
}

.fi-ta-footer,
.fi-pagination {
    font-size: var(--dx-fs-sm);
}

/* ================================================================
 * 5. الجدول على الموبايل: كل صف بطاقة، المعرّف بعرضها والبقية عمودان
 *    (Table::stackedOnMobile عبر Ui::registerDefaults — تحت 40rem)
 * ================================================================ */

@media (max-width: 39.99rem) {
    .fi-ta-header-toolbar {
        padding: 0.625rem 0.75rem;
    }

    .fi-ta-header-toolbar > div:last-child {
        flex-basis: 100%;
    }

    .fi-ta-search-field {
        flex: 1 1 auto;
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr:not(.fi-ta-group-header-row) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1rem;
        padding: 0.875rem 1rem 1rem;
        border-block-end: 1px solid var(--dx-line);
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr > td {
        min-width: 0;
        padding: 0;
    }

    .fi-ta-table-stacked-on-mobile .fi-ta-cell-label {
        margin-block-end: 0.125rem;
        font-size: var(--dx-fs-2xs);
        font-weight: 600;
        line-height: 1.5;
        color: var(--dx-fg-subtle);
    }

    .fi-ta-table-stacked-on-mobile .fi-ta-text,
    .fi-ta-table-stacked-on-mobile .fi-ta-text-item.fi-ta-text,
    .fi-ta-table-stacked-on-mobile .fi-ta-icon {
        padding: 0;
    }

    .fi-ta-table-stacked-on-mobile .fi-ta-text-item.fi-align-right,
    .fi-ta-table-stacked-on-mobile .fi-ta-text.fi-align-right {
        justify-content: flex-start;
        text-align: start;
    }

    /* الخانة الأولى هي هوية السجل: بعرض البطاقة وبلا تسمية */
    .fi-ta-table-stacked-on-mobile > tbody > tr > td:first-child:not(:has(.fi-checkbox-input)) {
        grid-column: 1 / -1;
        padding-block-end: 0.5rem;
        border-block-end: 1px dashed var(--dx-line);
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr > td:first-child:not(:has(.fi-checkbox-input)) .fi-ta-cell-label {
        display: none;
    }

    .fi-ta-table-stacked-on-mobile > tbody > tr > td:first-child .fi-ta-text-item:not(.fi-badge) {
        font-size: var(--dx-fs-base);
    }

    /* الإجراءات وخانة التحديد في سطر كامل */
    .fi-ta-table-stacked-on-mobile > tbody > tr > td:has(> .fi-ta-actions),
    .fi-ta-table-stacked-on-mobile > tbody > tr > td:has(.fi-ta-actions) {
        grid-column: 1 / -1;
    }

    .fi-ta-table-stacked-header-row .fi-ta-table-stacked-header-cell {
        padding: 0.5rem 0.75rem;
    }
}

/* ================================================================
 * 6. تبويبات العلاقات في صفحة العرض: تحكم مقسّم مضغوط بعدّاد لكل تبويب
 * ================================================================ */

.fi-sc-tabs[id$='relationManagerTabs'] {
    display: grid;
    gap: 1rem;
}

.fi-sc-tabs[id$='relationManagerTabs'] > .fi-tabs {
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    margin-inline: 0;
    padding: 0.25rem;
    gap: 0.125rem;
    overflow-x: auto;
    border-radius: var(--dx-r-md);
    background-color: var(--dx-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--dx-line);
    scrollbar-width: none;
}

.fi-sc-tabs[id$='relationManagerTabs'] > .fi-tabs::-webkit-scrollbar {
    display: none;
}

.fi-sc-tabs[id$='relationManagerTabs'] .fi-tabs-item {
    flex: none;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--dx-r-sm);
    font-size: var(--dx-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    color: var(--dx-fg-subtle);
    background-color: transparent;
    transition: background-color var(--dx-dur) var(--dx-ease), color var(--dx-dur) var(--dx-ease);
}

.fi-sc-tabs[id$='relationManagerTabs'] .fi-tabs-item .fi-icon {
    width: 1rem;
    height: 1rem;
    color: var(--dx-fg-faint);
}

.fi-sc-tabs[id$='relationManagerTabs'] .fi-tabs-item:hover {
    color: var(--dx-fg);
    background-color: var(--dx-surface-hover);
}

.fi-sc-tabs[id$='relationManagerTabs'] .fi-tabs-item.fi-active {
    color: var(--dx-fg);
    background-color: var(--dx-surface);
    box-shadow: 0 0 0 1px var(--dx-line), var(--dx-shadow-xs);
}

.fi-sc-tabs[id$='relationManagerTabs'] .fi-tabs-item.fi-active .fi-icon {
    color: var(--dx-accent-fg);
}

.fi-sc-tabs[id$='relationManagerTabs'] .fi-tabs-item .fi-badge {
    min-width: 1.25rem;
    padding-inline: 0.375rem;
    font-size: var(--dx-fs-2xs);
    line-height: 1.125rem;
    justify-content: center;
}

.fi-sc-tabs[id$='relationManagerTabs'] .fi-tabs-item:not(.fi-active) .fi-badge:not(.fi-color-danger):not(.fi-color-warning) {
    color: var(--dx-fg-muted);
    background-color: var(--dx-track);
    box-shadow: none;
}

/* ================================================================
 * 7. قوائم التعريف (Ui::details): تسمية | قيمة بخطوط شعرية
 * ================================================================ */

.dx-dl .fi-section-content {
    row-gap: 0;
    padding-block: 0.25rem;
}

.dx-dl .fi-section-content > .fi-grid-col + .fi-grid-col {
    border-block-start: 1px solid var(--dx-line);
}

.dx-dl .fi-in-entry.fi-in-entry-has-inline-label {
    display: grid;
    grid-template-columns: minmax(7.5rem, 36%) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 1rem;
    padding-block: 0.6875rem;
}

.dx-dl .fi-in-entry-label-col,
.dx-dl .fi-in-entry-content-col {
    grid-column: auto;
}

.dx-dl .fi-in-entry-label {
    font-size: var(--dx-fs-sm);
    font-weight: 500;
    color: var(--dx-fg-subtle);
}

.dx-dl .fi-in-entry-content-ctn {
    justify-content: flex-start;
}

.dx-dl .fi-in-text-item {
    font-size: var(--dx-fs-md);
    color: var(--dx-fg);
}

/* الروابط (لون primary) بلون الشركة؛ الألوان الدلالية (danger…) تبقى كما هي */
.dx-dl .fi-in-text-item.fi-color-primary {
    color: var(--dx-accent-fg);
}

.dx-dl .fi-in-placeholder {
    color: var(--dx-fg-faint);
}

@media (max-width: 26rem) {
    .dx-dl .fi-in-entry.fi-in-entry-has-inline-label {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.125rem;
    }
}

/* ================================================================
 * 8. رأس صفحة العرض (Ui::hero): الرقم الأهم، شريط الدفتر، ثم الأرقام
 * ================================================================ */

.dx-rhero {
    overflow: hidden;
    border-radius: var(--dx-r-lg);
    background-color: var(--dx-surface);
    box-shadow: var(--dx-card-shadow);
}

.dx-rhero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1.25rem 1.5rem 0;
}

.dx-rhero-lead {
    min-width: 0;
}

.dx-rhero-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin: 0.25rem 0 0;
}

.dx-rhero-paid {
    font-size: var(--dx-fs-2xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--dx-fg);
}

.dx-rhero-of {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: var(--dx-fs-md);
    color: var(--dx-fg-subtle);
}

.dx-rhero-of .dx-amount {
    font-weight: 600;
    color: var(--dx-fg-muted);
}

.dx-rhero-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* شريط الدفتر (x-dx.ledger): مسدَّد ← متأخر ← لم يحن، بطول إجمالي المستحق */
.dx-ledger-wrap {
    display: grid;
    gap: 0.625rem;
}

.dx-rhero > .dx-ledger-wrap {
    padding: 1rem 1.5rem 0;
}

.dx-ledger {
    display: flex;
    gap: 2px;
    height: 0.625rem;
    overflow: hidden;
    border-radius: var(--dx-r-full);
    background-color: var(--dx-track);
}

.dx-ledger-seg {
    display: block;
    min-width: 3px;
    height: 100%;
    background-color: var(--tone-solid);
}

.dx-ledger-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--dx-fs-xs);
    color: var(--dx-fg-subtle);
}

.dx-ledger-key li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.dx-ledger-key strong,
.dx-ledger-key .dx-amount {
    font-weight: 600;
    color: var(--dx-fg-muted);
}

.dx-ledger-swatch {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 3px;
    background-color: var(--tone-solid);
}

.dx-ledger-swatch.is-track {
    background-color: var(--dx-track);
    box-shadow: inset 0 0 0 1px var(--dx-line-strong);
}

/* رأس بشريطين متجاورين (المشروع: الوحدات | التحصيل) */
.dx-rhero-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    padding: 1.125rem 1.5rem 0;
}

.dx-rhero-split > div {
    display: grid;
    align-content: start;
    gap: 0.625rem;
    min-width: 0;
}

.dx-rhero-block-title {
    margin: 0;
    font-size: var(--dx-fs-xs);
    font-weight: 600;
    color: var(--dx-fg-subtle);
}

.dx-rhero-legend {
    font-size: var(--dx-fs-xs);
}

@media (max-width: 47.99rem) {
    .dx-rhero-split {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 1rem;
    }
}

/* مبلغ مشطوب (دفعة معكوسة): يبقى مقروءاً ويُفهم أنه لا يُعتدّ به */
.dx-amount.is-struck .dx-amount-num {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    color: var(--dx-fg-subtle);
}

/* تنبيه داخل الرأس (عكس، إيقاف…) بنبرة دلالية */
.dx-rhero-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 1rem 1.5rem 0;
    padding: 0.75rem 0.875rem;
    border-radius: var(--dx-r-md);
    font-size: var(--dx-fs-sm);
    line-height: 1.7;
    color: var(--tone-fg);
    background-color: var(--tone-bg);
    box-shadow: inset 0 0 0 1px var(--tone-line);
}

.dx-rhero-callout > svg {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-block-start: 0.1875rem;
}

.dx-rhero-callout-reason {
    display: block;
    font-weight: 600;
}

@media (max-width: 39.99rem) {
    .dx-rhero-callout { margin-inline: 1rem; }
}

/* قائمة سطور داخل قسم (x-dx.row) بإطار شعري، وحالة فارغة مضغوطة */
.dx-rows-framed {
    overflow: hidden;
    border-radius: var(--dx-r-md);
    box-shadow: inset 0 0 0 1px var(--dx-line);
}

.dx-rows-framed .dx-row {
    padding-inline: 1rem;
}

.dx-empty.dx-empty-compact {
    min-height: 7rem;
    padding-block: 1rem;
}

/* الخط الزمني (سجل الأحداث) */
.dx-timeline {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dx-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0 0.75rem;
    padding-block-end: 1rem;
}

.dx-timeline-item:last-child {
    padding-block-end: 0;
}

.dx-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    inset-block: 1.125rem 0;
    inset-inline-start: calc(0.625rem - 1px);
    width: 2px;
    background-color: var(--dx-line);
}

.dx-timeline-dot {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0.375rem auto 0;
    border-radius: var(--dx-r-full);
    background-color: var(--tone-solid);
    box-shadow: 0 0 0 4px var(--tone-bg);
}

.dx-timeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.125rem 0.75rem;
    font-size: var(--dx-fs-md);
    color: var(--dx-fg);
}

.dx-timeline-head .dx-num {
    font-size: var(--dx-fs-xs);
    color: var(--dx-fg-subtle);
}

.dx-timeline-text {
    margin: 0.125rem 0 0;
    font-size: var(--dx-fs-sm);
    color: var(--dx-fg-muted);
}

.dx-timeline-meta {
    margin: 0.125rem 0 0;
    font-size: var(--dx-fs-xs);
    color: var(--dx-fg-subtle);
}

/* جدول توزيع الدفعة: إطار شعري، حصة كل بند شريطاً، وسطر إجمالي */
.dx-alloc {
    overflow: hidden;
    border-radius: var(--dx-r-md);
    box-shadow: inset 0 0 0 1px var(--dx-line);
}

.dx-alloc .dx-table tfoot td {
    padding: 0.75rem 1rem;
    font-weight: 700;
    color: var(--dx-fg);
    background-color: var(--dx-surface-sunken);
    border-block-start: 1px solid var(--dx-line-strong);
}

.dx-alloc-share {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 9rem;
}

.dx-alloc-share .dx-progress {
    flex: 1;
}

.dx-alloc-share .dx-num {
    flex: none;
    min-width: 3.5rem;
    font-size: var(--dx-fs-xs);
    font-weight: 600;
    color: var(--dx-fg-muted);
}

@media (max-width: 39.99rem) {
    .dx-alloc .dx-table tfoot tr {
        display: flex;
        justify-content: space-between;
    }
}

/* مسار الدورة (الشيك): نقطة لكل مرحلة وخط يصلها بالتالية */
.dx-track {
    display: flex;
    align-items: flex-start;
    margin: 1.25rem 1.5rem 0;
    padding: 0;
    list-style: none;
}

.dx-track-step {
    position: relative;
    display: grid;
    flex: 1;
    justify-items: center;
    gap: 0.1875rem;
    min-width: 0;
    text-align: center;
}

.dx-track-step:not(:last-child)::before {
    content: '';
    position: absolute;
    inset-block-start: 0.6875rem;
    inset-inline-start: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--dx-track);
}

.dx-track-step.is-done:not(:last-child)::before {
    background-color: var(--success-500);
}

.dx-track-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: var(--dx-r-full);
    color: var(--color-white);
    background-color: var(--dx-surface);
    box-shadow: inset 0 0 0 2px var(--dx-line-strong);
}

.dx-track-dot svg {
    width: 0.875rem;
    height: 0.875rem;
}

.dx-track-step.is-done .dx-track-dot,
.dx-track-step.is-failed .dx-track-dot,
.dx-track-step.is-ended .dx-track-dot {
    background-color: var(--tone-solid);
    box-shadow: none;
}

.dx-track-step.is-current .dx-track-dot {
    box-shadow: inset 0 0 0 2px var(--tone-solid), 0 0 0 4px var(--tone-bg);
}

.dx-track-step.is-current .dx-track-dot::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--dx-r-full);
    background-color: var(--tone-solid);
}

.dx-track-label {
    margin-block-start: 0.25rem;
    font-size: var(--dx-fs-xs);
    font-weight: 600;
    line-height: 1.4;
    color: var(--dx-fg-muted);
}

.dx-track-step.is-current .dx-track-label,
.dx-track-step.is-failed .dx-track-label {
    color: var(--tone-fg);
}

.dx-track-step.is-todo .dx-track-label {
    color: var(--dx-fg-faint);
}

.dx-track-date {
    font-size: var(--dx-fs-2xs);
    color: var(--dx-fg-subtle);
}

@media (max-width: 39.99rem) {
    .dx-track { margin-inline: 1rem; }
}

/* الأرقام: شبكة بفواصل شعرية (الفجوة بلون الخط) تبقى نظيفة عند الالتفاف */
.dx-rhero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 1px;
    margin: 1.125rem 0 0;
    border-block-start: 1px solid var(--dx-line);
    background-color: var(--dx-line);
}

.dx-rhero-stat {
    min-width: 0;
    padding: 0.875rem 1.5rem 1rem;
    background-color: var(--dx-surface-sunken);
}

.dx-rhero-stat dt {
    font-size: var(--dx-fs-xs);
    font-weight: 600;
    color: var(--dx-fg-subtle);
}

.dx-rhero-stat dd {
    margin: 0;
}

.dx-rhero-value {
    margin-block-start: 0.25rem !important;
    font-size: var(--dx-fs-lg);
    font-weight: 700;
    line-height: 1.35;
    color: var(--dx-fg);
}

.dx-rhero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.375rem;
    margin-block-start: 0.125rem !important;
    font-size: var(--dx-fs-xs);
    line-height: 1.6;
    color: var(--dx-fg-subtle);
}

.dx-rhero-meta .dx-amount {
    font-weight: 600;
    color: var(--dx-fg-muted);
}

.dx-rhero-stat.is-danger .dx-rhero-value { color: var(--danger-700); }
.dx-rhero-stat.is-warning .dx-rhero-value { color: var(--warning-700); }
.dark .dx-rhero-stat.is-danger .dx-rhero-value { color: var(--danger-300); }
.dark .dx-rhero-stat.is-warning .dx-rhero-value { color: var(--warning-300); }

.dx-rhero-stat.is-danger .dx-rhero-value .dx-amount-unit,
.dx-rhero-stat.is-warning .dx-rhero-value .dx-amount-unit {
    color: inherit;
    opacity: 0.7;
}

@media (max-width: 39.99rem) {
    .dx-rhero-top { padding: 1rem 1rem 0; }
    .dx-rhero > .dx-ledger-wrap { padding-inline: 1rem; }
    .dx-rhero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* الرقم الأخير المنفرد يأخذ السطر كله فلا تبقى خانة فارغة بلون الخط */
    .dx-rhero-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .dx-rhero-stat { padding: 0.75rem 1rem 0.875rem; }
    .dx-rhero-paid { font-size: var(--dx-fs-xl); }
}

/* ================================================================
 * 9. بطاقة الملخص (Ui::summary) للموارد بلا رأس مخصص
 * ================================================================ */

.fi-section.dx-summary {
    overflow: hidden;
}

.dx-summary .fi-section-content {
    gap: 1rem 1.5rem;
}

.dx-summary .fi-in-entry-label {
    font-size: var(--dx-fs-xs);
    font-weight: 600;
    color: var(--dx-fg-subtle);
}

.dx-summary .dx-stat {
    line-height: 1.4;
}

.dx-summary .dx-stat .fi-in-text-item {
    font-size: var(--dx-fs-lg);
}

/* ================================================================
 * 10. النماذج والمعالج
 * ================================================================ */

/* معاينة الجداول (المعالج وإعادة الجدولة والخطط الجاهزة) */
.dx-preview {
    line-height: 1.9;
    color: var(--dx-fg-muted);
}

.dx-preview b {
    font-weight: 600;
    color: var(--dx-fg);
    font-variant-numeric: tabular-nums;
}

.dx-balance {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-block-end: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--dx-r-sm);
    background-color: var(--dx-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--dx-line);
}

.dx-ok { color: var(--success-700); font-weight: 600; }
.dx-bad { color: var(--danger-700); font-weight: 600; }
.dx-muted { color: var(--dx-fg-subtle); }
.dark .dx-ok { color: var(--success-300); }
.dark .dx-bad { color: var(--danger-300); }

.dx-preview-scroll {
    max-height: 320px;
    overflow: auto;
    margin-block-start: 0.5rem;
    border-radius: var(--dx-r-sm);
    box-shadow: inset 0 0 0 1px var(--dx-line);
}

.dx-preview-scroll .dx-table th {
    position: sticky;
    top: 0;
}

.dx-preview-scroll .dx-table td,
.dx-preview-scroll .dx-table th {
    padding: 0.375rem 0.75rem;
}

/* المعالج: خطوات مرقّمة — الترتيب معلومة هنا (العميل قبل الوحدة قبل الخطة) */
.fi-sc-wizard-header {
    counter-reset: dx-step;
}

.fi-sc-wizard-header-step {
    counter-increment: dx-step;
}

.fi-sc-wizard-header-step-label::before {
    content: 'الخطوة ' counter(dx-step);
    display: block;
    margin-block-end: 0.0625rem;
    font-size: var(--dx-fs-2xs);
    font-weight: 600;
    color: var(--dx-fg-faint);
}

.fi-sc-wizard-header-step-label {
    font-weight: 700;
}

.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-label::before {
    color: var(--dx-accent-fg);
}

.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn {
    background-color: var(--dx-accent-soft);
    box-shadow: 0 0 0 2px var(--dx-accent);
}

.fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-label {
    color: var(--dx-fg);
}

/* الملخص اللاصق بجانب المعالج (contract-wizard-summary) */
.dx-wiz-summary {
    position: sticky;
    top: calc(var(--topbar-height) + 1rem);
}

.dx-wiz-summary .dx-card {
    height: auto;
}

.dx-wiz-summary .dx-card-body {
    padding-block: 0.5rem 0.75rem;
}

.dx-wiz-rows {
    display: grid;
    margin: 0;
    padding-block: 0.5rem;
}

.dx-wiz-rows + .dx-wiz-rows {
    border-block-start: 1px solid var(--dx-line);
}

.dx-wiz-rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.3125rem;
    font-size: var(--dx-fs-sm);
}

.dx-wiz-rows dt {
    flex: none;
    color: var(--dx-fg-subtle);
}

.dx-wiz-rows dd {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.25rem 0.375rem;
    min-width: 0;
    margin: 0;
    font-weight: 600;
    text-align: end;
    color: var(--dx-fg);
}

.dx-wiz-rows > .is-strong dd {
    font-size: var(--dx-fs-md);
    font-weight: 700;
}

.dx-wiz-note {
    font-size: var(--dx-fs-xs);
    font-weight: 500;
    color: var(--dx-fg-subtle);
}

.dx-wiz-summary .dx-card-foot {
    padding: 1rem 1.25rem 1.125rem;
}

.dx-wiz-balance {
    display: grid;
    gap: 0.5rem;
}

.dx-wiz-balance-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: var(--dx-fs-sm);
    font-weight: 600;
    color: var(--dx-fg-muted);
}

.dx-wiz-balance-value {
    margin: 0;
    font-size: var(--dx-fs-xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--tone-fg);
}

.dx-wiz-balance.dx-tone-gray .dx-wiz-balance-value {
    color: var(--dx-fg-faint);
}

.dx-wiz-balance-text {
    margin: 0;
    font-size: var(--dx-fs-xs);
    line-height: 1.7;
    color: var(--dx-fg-subtle);
}

/* ملخص التعاقد في آخر خطوة من المعالج */
.dx-wkv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem 1.5rem;
}

.dx-wkv-label {
    font-size: var(--dx-fs-xs);
    color: var(--dx-fg-subtle);
}

.dx-wkv-value {
    font-weight: 600;
    color: var(--dx-fg);
    font-variant-numeric: tabular-nums;
}

/* ================================================================
 * 11. دفعة التحصيل وجداول HTML المخصصة (dx-table)
 * ================================================================ */

/* لوحة الدفعة: بطاقات التبويب بعددها ومبلغها */
.dx-run-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.dx-run-tile {
    position: relative;
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 1rem 1.125rem 1.125rem;
    border-radius: var(--dx-r-lg);
    text-align: start;
    color: inherit;
    background-color: var(--dx-surface);
    box-shadow: var(--dx-card-shadow);
    cursor: pointer;
    transition: box-shadow var(--dx-dur) var(--dx-ease), transform var(--dx-dur) var(--dx-ease);
}

.dx-run-tile:hover {
    box-shadow: 0 0 0 1px var(--dx-line-strong), var(--dx-shadow-md);
}

.dx-run-tile:focus-visible {
    outline: 2px solid var(--dx-focus);
    outline-offset: 2px;
}

/* البطاقة النشطة: حد بلون نبرتها وشريط سفلي — تُقرأ كتبويب مختار */
.dx-run-tile.is-active {
    box-shadow: 0 0 0 2px var(--tone-solid), var(--dx-shadow-md);
}

.dx-run-tile.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 1.125rem;
    inset-block-end: 0;
    height: 3px;
    border-start-start-radius: 3px;
    border-start-end-radius: 3px;
    background-color: var(--tone-solid);
}

.dx-run-tile-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.dx-run-tile-label {
    overflow: hidden;
    font-size: var(--dx-fs-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dx-fg-muted);
}

.dx-run-tile-count {
    margin-block-start: 0.375rem;
    font-size: var(--dx-fs-2xl);
    font-weight: 700;
    line-height: 1.15;
    color: var(--dx-fg);
}

.dx-run-tile.dx-tone-danger .dx-run-tile-count {
    color: var(--tone-fg);
}

.dx-run-tile-total {
    font-size: var(--dx-fs-sm);
    font-weight: 600;
    color: var(--dx-fg-muted);
}

.dx-run-tile.dx-tone-gray .dx-run-tile-count,
.dx-run-tile.dx-tone-gray .dx-run-tile-total {
    color: var(--dx-fg-faint);
}

/* الفلاتر في رأس بطاقة الجدول */
.dx-run-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.dx-run-field {
    display: block;
    min-width: 11rem;
}

.dx-run-card .dx-card-body-flush {
    padding-block: 1rem 0;
}

.dx-run-card .dx-table th:first-child,
.dx-run-card .dx-table td:first-child {
    padding-inline-start: 1.25rem;
}

.dx-run-who {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.dx-run-name {
    padding: 0;
    font-size: var(--dx-fs-md);
}

.dx-th-num,
.dx-td-num {
    text-align: end;
}

.dx-td-num .dx-cell-sub {
    text-align: end;
}

@media (max-width: 63.99rem) {
    .dx-run-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

@media (max-width: 39.99rem) {
    .dx-run-tile {
        padding: 0.875rem;
    }

    .dx-run-tile-count {
        font-size: var(--dx-fs-xl);
    }

    .dx-run-toolbar,
    .dx-run-field {
        width: 100%;
    }
}

.dx-table-wrap {
    overflow-x: auto;
}

.dx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dx-fs-md);
}

.dx-table th {
    padding: 0.6875rem 1rem;
    text-align: start;
    font-size: var(--dx-fs-xs);
    font-weight: 600;
    white-space: nowrap;
    color: var(--dx-fg-subtle);
    background-color: var(--dx-surface-sunken);
    border-block-end: 1px solid var(--dx-line);
}

.dx-table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: var(--dx-fg);
    border-block-end: 1px solid var(--dx-line);
}

.dx-table tbody tr {
    transition: background-color var(--dx-dur) var(--dx-ease);
}

.dx-table tbody tr:hover td {
    background-color: var(--dx-surface-hover);
}

.dx-table tbody tr:last-child td {
    border-block-end: 0;
}

.dx-cell-strong {
    font-weight: 600;
}

.dx-cell-sub {
    display: block;
    margin-block-start: 0.125rem;
    font-size: var(--dx-fs-xs);
    color: var(--dx-fg-subtle);
}

.dx-cell-danger { color: var(--danger-700); }
.dark .dx-cell-danger { color: var(--danger-300); }

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

.dx-hint {
    margin-block-start: 0.75rem;
    font-size: var(--dx-fs-xs);
    color: var(--dx-fg-subtle);
}

/* ================================================================
 * 12. محادثة تذكرة الدعم
 * ================================================================ */

.dx-ticket-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dx-ticket-tile {
    display: grid;
    align-content: start;
    gap: 0.3125rem;
    min-width: 0;
    padding: 1rem 1.125rem;
    border-radius: var(--dx-r-lg);
    background-color: var(--dx-surface);
    box-shadow: var(--dx-card-shadow);
}

.dx-ticket-tile.is-danger {
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--danger-500) 45%, transparent), var(--dx-shadow-sm);
}

.dx-ticket-tile-label {
    font-size: var(--dx-fs-xs);
    font-weight: 600;
    color: var(--dx-fg-subtle);
}

.dx-ticket-tile-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--dx-fs-md);
    font-weight: 700;
    color: var(--dx-fg);
}

.dx-ticket-tile-value .dx-link {
    padding: 0;
    font-size: var(--dx-fs-md);
}

.dx-ticket-tile-meta {
    font-size: var(--dx-fs-xs);
    color: var(--dx-fg-subtle);
}

.dx-chat {
    display: grid;
    gap: 0.875rem;
    margin: 0;
    padding: 1.25rem;
    list-style: none;
}

/* رسائل العميل في جهة البداية، وردود الفريق وملاحظاته في الجهة الأخرى */
.dx-chat-msg {
    display: flex;
}

.dx-chat-msg.is-staff,
.dx-chat-msg.is-internal {
    justify-content: flex-end;
}

.dx-chat-bubble {
    max-width: min(40rem, 82%);
    padding: 0.75rem 0.875rem;
    border-radius: var(--dx-r-lg);
    border-start-start-radius: 0.25rem;
    background-color: var(--dx-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--dx-line);
}

.dx-chat-msg.is-staff .dx-chat-bubble {
    border-start-start-radius: var(--dx-r-lg);
    border-start-end-radius: 0.25rem;
    background-color: var(--dx-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary-500) 20%, transparent);
}

.dx-chat-msg.is-internal .dx-chat-bubble {
    border-start-start-radius: var(--dx-r-lg);
    border-start-end-radius: 0.25rem;
    background-color: color-mix(in oklab, var(--warning-500) 8%, var(--dx-surface));
    box-shadow: none;
    outline: 1px dashed color-mix(in oklab, var(--warning-500) 60%, transparent);
    outline-offset: -1px;
}

.dx-chat-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: var(--dx-fs-xs);
    color: var(--dx-fg-subtle);
}

.dx-chat-author {
    font-weight: 700;
    color: var(--dx-fg-muted);
}

.dx-chat-head time {
    margin-inline-start: auto;
}

.dx-chat-body {
    margin-block-start: 0.375rem;
    font-size: var(--dx-fs-md);
    line-height: 1.8;
    white-space: pre-line;
    color: var(--dx-fg);
}

.dx-ticket-thread .dx-card-foot {
    padding: 1rem 1.25rem 1.125rem;
}

.dx-chat-composer {
    display: grid;
    gap: 0.75rem;
}

.dx-chat-input {
    width: 100%;
    min-height: 5.5rem;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: var(--dx-r-sm);
    font: inherit;
    font-size: var(--dx-fs-md);
    line-height: 1.7;
    color: var(--dx-fg);
    background-color: var(--dx-surface);
    box-shadow: 0 0 0 1px var(--dx-line-strong), var(--dx-shadow-xs);
    resize: vertical;
    transition: box-shadow var(--dx-dur) var(--dx-ease), background-color var(--dx-dur) var(--dx-ease);
}

.dx-chat-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--dx-focus);
}

.dx-chat-composer.is-internal .dx-chat-input {
    background-color: color-mix(in oklab, var(--warning-500) 8%, var(--dx-surface));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--warning-500) 60%, transparent);
}

.dx-chat-error {
    margin: 0;
    font-size: var(--dx-fs-xs);
    font-weight: 500;
    color: var(--danger-700);
}

.dark .dx-chat-error { color: var(--danger-300); }

.dx-chat-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.dx-chat-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-end: auto;
    font-size: var(--dx-fs-sm);
    font-weight: 500;
    color: var(--dx-fg-muted);
    cursor: pointer;
}

.dx-chat-closed {
    margin: 0;
    font-size: var(--dx-fs-sm);
    color: var(--dx-fg-subtle);
}

@media (max-width: 47.99rem) {
    .dx-ticket-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .dx-chat {
        padding: 1rem;
    }

    .dx-chat-bubble {
        max-width: 92%;
    }
}

/* dx-table-stack: جدول HTML يصير بطاقات على الموبايل، والتسمية من data-label */
@media (max-width: 39.99rem) {
    .dx-table-stack thead {
        display: none;
    }

    .dx-table-stack,
    .dx-table-stack tbody {
        display: block;
    }

    .dx-table-stack tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1rem;
        padding: 0.875rem 1rem 1rem;
        border-block-end: 1px solid var(--dx-line);
    }

    .dx-table-stack tbody tr:last-child {
        border-block-end: 0;
    }

    .dx-table-stack td {
        display: block;
        min-width: 0;
        padding: 0 !important;
        border: 0;
        text-align: start;
    }

    .dx-table-stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-block-end: 0.125rem;
        font-size: var(--dx-fs-2xs);
        font-weight: 600;
        color: var(--dx-fg-subtle);
    }

    .dx-table-stack td.dx-td-lead,
    .dx-table-stack td.dx-td-actions {
        grid-column: 1 / -1;
    }

    .dx-table-stack td.dx-td-lead::before {
        display: none;
    }

    .dx-table-stack .dx-td-num .dx-cell-sub {
        text-align: start;
    }

    .dx-table-stack tbody tr:hover td {
        background-color: transparent;
    }
}