/* ============================================================================
 * Dynamic Modules — Unified Layout Rules
 * ----------------------------------------------------------------------------
 * يطبَّق تلقائياً على كل صفحات /m/{moduleKey}* (ModuleRecords, ModuleRecordEditor,
 * ModuleRecordDetails, ModulePipelineBoard, ModuleDashboard, ModuleReportViewer)
 * بالإضافة إلى /admin/module-groups وأي شاشات ديناميكية أخرى تحوي حقولاً كثيرة.
 *
 * الأهداف:
 *  1. أزرار الإجراءات (حفظ/حذف/إلغاء/جديد...) تظل ظاهرة دون scroll
 *  2. شريط أدوات السجلات (بحث/فلاتر/أزرار) ثابت أعلى الصفحة
 *  3. الجداول واسعة الأعمدة تعرض scroll أفقي بدلاً من تقلّص الأعمدة
 *  4. الالتزام بنظام التوكنات (var(--*)) دون قيم hex جديدة
 * ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
   0. الحاويات الأم — لا تسمح للمحتوى الواسع بدفع الصفحة كاملة
   ─────────────────────────────────────────────────────────────────────────── */

/* عند وجود صفحة موديولز: نُجبر سلسلة الآباء flex على ألا يدفعها المحتوى الداخلي.
 * بدون min-width:0 على .main-content، الجدول العريض يدفع كامل الـ layout
 * بدلاً من تفعيل scroll داخلي.
 *
 * ملاحظة: لا نضع overflow-x: hidden على هذه الآباء لأن ذلك يُعطّل
 * sticky positioning للـ toolbars داخل صفحات الموديولز.
 */
.main-content:has(.module-records-container),
.main-content:has(.module-pipeline-container),
.main-content:has(.module-dashboard-container),
.main-content:has(.module-editor-container),
.content:has(.module-records-container),
.content:has(.module-pipeline-container),
.content:has(.module-dashboard-container),
.content:has(.module-editor-container) {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* الحاويات نفسها — تتمدّد لكامل العرض ولا تسمح بـ overflow على المحور الأفقي */
.module-records-container,
.module-pipeline-container,
.module-dashboard-container,
.module-editor-container {
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. شريط الأزرار السفلي اللاصق — للنماذج الطويلة
   ─────────────────────────────────────────────────────────────────────────── */

/* غلاف للأزرار يُظهرها دائماً في أسفل المنطقة المرئية */
.module-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--background-primary, #ffffff);
    border-top: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ضمان وجود مسافة كافية أسفل آخر بطاقة قبل الـ sticky bar */
.module-form-actions + * {
    margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. شريط أدوات قائمة السجلات اللاصق أعلى الصفحة
   ─────────────────────────────────────────────────────────────────────────── */

.module-records-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--background-primary, #ffffff);
    padding-top: 8px;
    margin-bottom: 8px;
    width: 100%;
    max-width: 100%;
}

.module-records-toolbar > .card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* الأزرار في رأس الصفحة — تظل ظاهرة دائماً */
.module-records-actions {
    flex-shrink: 0;
}

.module-records-actions .btn {
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. الجداول واسعة الأعمدة — تفعيل scroll أفقي
   ─────────────────────────────────────────────────────────────────────────── */

/* البطاقة التي تحوي الجدول — نمنع overflow على البطاقة نفسها (لئلا تُلغي sticky)
 * لكن نُجبرها على عرض محدود (min-width:0) حتى لا يدفعها الجدول. */
.card:has(.module-table-wrap) {
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

/* card-body فقط هي التي تخفي overflow الأفقي، حتى يبقى scrollbar داخل .module-table-wrap */
.card:has(.module-table-wrap) > .card-body {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

.module-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    /* نُظهر شريط التمرير دائماً ليكون واضحاً عند زيادة الأعمدة */
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

/* تنسيق scrollbar أوضح على Webkit */
.module-table-wrap::-webkit-scrollbar {
    height: 12px;
}
.module-table-wrap::-webkit-scrollbar-track {
    background: var(--background-light, #f3f4f6);
    border-radius: 6px;
}
.module-table-wrap::-webkit-scrollbar-thumb {
    background: var(--border-color, #cbd5e1);
    border-radius: 6px;
}
.module-table-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, #94a3b8);
}

/* الجدول لا يتقلص دون هذا العرض، ما يجبر على ظهور scroll أفقي عند الحاجة */
.module-table-wrap > .table {
    margin-bottom: 0;
    width: max-content;
    min-width: 100%;
}

.module-table-wrap > .table > thead > tr > th,
.module-table-wrap > .table > tbody > tr > td {
    white-space: nowrap;
    min-width: 140px;
    vertical-align: middle;
}

/* عمود الإجراءات الأخير — عرض ثابت بدون sticky (لتجنّب مشاكل العرض) */
.module-table-wrap > .table > thead > tr > th:last-child,
.module-table-wrap > .table > tbody > tr > td:last-child {
    min-width: 220px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. النموذج (Editor) — صفحة طويلة + sticky bar في الأسفل
   ─────────────────────────────────────────────────────────────────────────── */

.module-editor-container {
    /* عرض موسّع لاستثمار المساحة، مع padding سفلي لشريط الأزرار اللاصق */
    max-width: 1400px;
    margin-inline: auto;
    padding-bottom: 80px;
}

/* رأس الصفحة — متجاوب */
.module-editor-header h4 {
    font-size: 1.25rem;
    font-weight: 700;
}

/* بطاقة المنشأة — مساحة عمودية أصغر */
.module-editor-org-card .card-body {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* بطاقات الأقسام — رأس مبسط */
.module-editor-section > .card-header {
    background: var(--background-light, #f9fafb) !important;
    font-size: 14px;
}

.module-editor-section > .card-header .badge {
    font-weight: 500;
    font-size: 11px;
}

/* خلية الحقل — تنسيق متّسق */
.module-field-cell label.form-label {
    margin-bottom: 4px;
    color: var(--text-primary, #111827);
}

.module-field-cell .form-control,
.module-field-cell .form-select {
    /* iOS لا يُكبّر إلا عند 16px+ */
    font-size: 16px;
    min-height: 38px;
}

.module-field-cell small.text-muted {
    font-size: 11px;
    margin-top: 2px;
    line-height: 1.3;
}

/* multiselect — شبكة منظمة لخيارات checkbox المتعددة */
.module-multiselect-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: flex-start;
}

.module-multiselect-item {
    margin: 0;
    padding: 4px 6px;
    flex: 0 1 auto;
    min-width: 140px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
}

.module-multiselect-item .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.module-multiselect-item .form-check-label {
    font-size: 14px;
    cursor: pointer;
    margin: 0;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .module-multiselect-item {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4.5 تكييفات Editor للموبايل والتابلت
   ─────────────────────────────────────────────────────────────────────────── */

/* تابلت (≤1023px) */
@media (max-width: 1023px) {
    .module-editor-container {
        padding-inline: 12px;
    }

    .module-editor-section .card-body {
        padding: 12px;
    }

    .module-editor-fields {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }
}

/* موبايل (≤767px) */
@media (max-width: 767px) {
    .module-editor-container {
        padding-inline: 8px;
        padding-bottom: 100px;
    }

    .module-editor-header h4 {
        font-size: 1.1rem;
    }

    .module-editor-section > .card-header {
        padding: 10px 12px;
    }

    .module-editor-section .card-body {
        padding: 10px;
    }

    .module-field-cell .form-control,
    .module-field-cell .form-select {
        min-height: 44px;
        font-size: 16px;
    }

    /* إخفاء الـ EN label على الموبايل لتوفير مساحة */
    .module-field-cell small.text-muted {
        display: none;
    }

    /* عدّاد الحقول في رأس البطاقة — مخفي على الموبايل */
    .module-editor-section > .card-header .badge {
        display: none;
    }
}

/* موبايل صغير (≤480px) */
@media (max-width: 480px) {
    .module-editor-header {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .module-editor-header .btn {
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   4.6 Form.io داخل محرر السجل — منع تقطيع العناوين وضغط الأعمدة الضيقة
   ─────────────────────────────────────────────────────────────────────────── */

/* عناوين الحقول داخل Form.io: لا تُكسر داخل الكلمة الواحدة */
.module-editor-container .formio-form .form-group label,
.module-editor-container .formio-form .formio-component label,
.module-editor-container .formio-form .col-form-label {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    line-height: 1.45 !important;
}

/* اجعل أعمدة Form.io (formio-component-columns) تتمدّد بمرونة بدل
   التمسّك بنسب صغيرة تكسّر العناوين على الشاشات الضيقة. كل عمود
   يأخذ 240px على الأقل، وإذا الحاوية أضيق تتراص الأعمدة عمودياً.
   هذه القاعدة تستخدم flex-wrap فلا تحتاج إلى media queries — كل
   عمود ينزل تلقائياً تحت العمود السابق إذا لم تتسع الحاوية. */
.module-editor-container .formio-form .formio-component-columns > .row,
.module-editor-container .formio-runtime-container .formio-component-columns > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-inline: 0 !important;
}

.module-editor-container .formio-form .formio-component-columns > .row > [class*="col-"],
.module-editor-container .formio-runtime-container .formio-component-columns > .row > [class*="col-"] {
    flex: 1 1 240px !important;
    min-width: min(240px, 100%) !important;
    max-width: 100% !important;
    padding-inline: 6px !important;
    box-sizing: border-box !important;
}

/* تأكيد إضافي: أيّ عمود مباشر داخل صف ضمن النموذج العام (لو كان
   تصميم الـ schema يستعمل row/col خارج formio-component-columns) */
.module-editor-container .formio-runtime-container .formio-form > .formio-component > .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

.module-editor-container .formio-runtime-container .formio-form > .formio-component > .row > [class*="col-"] {
    flex: 1 1 240px !important;
    min-width: min(240px, 100%) !important;
    max-width: 100% !important;
}

/* خيارات حقل selectboxes داخل Form.io — احم النصوص من الكسر داخل الكلمة */
.module-editor-container .formio-form .formio-component-selectboxes .form-check-label,
.module-editor-container .formio-form .formio-component-radio .form-check-label {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    line-height: 1.45 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. لوحة Pipeline / Dashboard — رؤوس ثابتة عند التمرير
   ─────────────────────────────────────────────────────────────────────────── */

.module-pipeline-toolbar,
.module-dashboard-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--background-primary, #ffffff);
    padding: 8px 0;
    margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. تكييفات الموبايل
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .module-form-actions {
        padding: 10px 12px;
        flex-wrap: wrap;
    }

    .module-form-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-height: 44px;
        font-size: 14px;
    }

    .module-form-actions .btn-outline-secondary[href*="/m/"] {
        /* زر "إلغاء" / "رجوع" — يأخذ سطراً كاملاً على الموبايل */
        flex-basis: 100%;
    }

    .module-records-toolbar .btn {
        min-height: 40px;
    }

    .module-table-wrap > .table > thead > tr > th,
    .module-table-wrap > .table > tbody > tr > td {
        min-width: 120px;
        font-size: 13px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. تخفيض الحركة
   ─────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .module-form-actions,
    .module-records-toolbar {
        transition: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. Form.io runtime داخل محرر السجل (/m/{key}/new و /m/{key}/{id}/edit)
   ─────────────────────────────────────────────────────────────────────────── */

/* الحفظ يتم عبر زر Razor الخارجي، لذا نخفي أزرار submit الداخلية لـ Form.io
   داخل حاوية المحرر فقط. */
.formio-runtime-container .formio-component-button[ref="buttonContainer"] .btn-primary[type="submit"],
.formio-runtime-container .btn[type="submit"],
.formio-runtime-container .btn-wizard-nav-submit,
.formio-runtime-container button[name="data[submit]"] {
    display: none !important;
}

/* تأكد من أن الحاوية تأخذ كامل العرض داخل بطاقة المحرر */
.formio-runtime-container {
    width: 100%;
}

/* تنسيق DataGrid داخل المحرر ليكون متجاوباً ولا يدفع الصفحة عند العرض الواسع */
.formio-runtime-container .formio-component-datagrid > div > table {
    width: 100%;
}
.formio-runtime-container .formio-component-datagrid {
    overflow-x: auto;
}