/* ============================================================================
 * Module Record Workspace — «مساحة عمل السجل» (المرحلة 0: الأساس)
 * ----------------------------------------------------------------------------
 * البادئة: mwk- (إلزامية على كل صنف هنا — اتفاقية premium-screen-design-system)
 * الألوان والمسافات عبر توكنات var(--*) فقط — لا قيم hex جديدة.
 * خصائص منطقية (inline-start/end) لدعم RTL/LTR بلا قواعد منفصلة.
 * الحاوية الجذر .module-workspace-container مسجّلة في dynamic-modules.css
 * (سلسلة :has() الأم) كي لا يدفع المحتوى الواسع تخطيط الصفحة.
 * ============================================================================ */

/* ─── الهيكل الأم ─── */
.mwk-shell {
    --radius: 16px;
    --radius-sm: 10px;
    --border: 1px solid var(--border-color);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.08);
    display: grid;
    gap: var(--space-3, 12px);
}

/* ─── ترويسة السجل ─── */
.mwk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2, 8px) var(--space-4, 16px);
    background: var(--background-primary);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-3, 12px) var(--space-4, 16px);
}

.mwk-header-identity {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    min-width: 0;
}

.mwk-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.08);
}

.mwk-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.mwk-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    color: var(--text-secondary);
    font-size: 13px;
}

.mwk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
}

/* ─── شريط الأدوات: المنشأة + الإجراءات السريعة في سطر واحد ─── */
.mwk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px) var(--space-4, 16px);
    background: var(--background-primary);
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2, 8px) var(--space-3, 12px);
}

.mwk-toolbar-org {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex: 0 1 auto;
}

/* حقل المنشأة كان يتمدد بعرض الصفحة — عرض مضبوط يكفي الأسماء الطويلة */
.mwk-toolbar-org select,
.mwk-toolbar-org .form-select {
    max-width: 240px;
    min-width: 160px;
}

.mwk-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
}

/* ─── شريط المؤشرات ─── */
.mwk-metrics {
    display: grid;
    /* auto-fill بسقف عرض: أربع بطاقات على شاشة عريضة كانت تتمدد حتى يبتلع
       الفراغُ المحتوى — الأعمدة الشبحية تُبقي البطاقات بعرض متّزن يبدأ من اليمين */
    grid-template-columns: repeat(auto-fill, minmax(150px, 210px));
    justify-content: start;
    gap: var(--space-2, 8px);
}

.mwk-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: var(--background-primary);
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    min-height: 44px;
    text-align: start;
}

.mwk-metric-label {
    font-size: 11px;
    color: var(--text-muted);
}

.mwk-metric-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.mwk-metric-value.mwk-warn { color: var(--warning-color); }
.mwk-metric-value.mwk-danger { color: var(--error-color); }
.mwk-metric-value.mwk-ok { color: var(--success-color); }

/* مجاميع بعملات مختلفة تُعرض مكدّسة — سطر واحد يوحي بجمعها معاً وهو خطأ */
.mwk-metric-currency {
    display: block;
    line-height: 1.4;
}

/* ─── بطاقات العناصر المفتوحة (نظرة عامة) ─── */
.mwk-openitems {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-2, 8px);
}

/* بطاقة داخل .mwk-panel: بلا ظل ولا حدّ سميك — تفادياً لبطاقة داخل بطاقة */
.mwk-openitem {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    min-height: 44px;
    border-radius: var(--radius-sm);
    background: var(--background-secondary);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mwk-openitem:hover,
.mwk-openitem:focus-visible {
    background: rgba(var(--primary-rgb), 0.08);
    color: inherit;
}

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

.mwk-openitem-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.mwk-openitem-stage {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.10);
    color: var(--primary-color);
    font-weight: 600;
}

.mwk-openitem-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* ─── التبويبات ─── */
.mwk-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: var(--border);
}

.mwk-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
    white-space: nowrap;
}

.mwk-tab:hover { color: var(--text-primary); }

.mwk-tab.mwk-active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.mwk-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.10);
    font-variant-numeric: tabular-nums;
}

/* ─── لوحة تبويب + بطاقات ─── */
.mwk-panel {
    background: var(--background-primary);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-3, 12px) var(--space-4, 16px);
}

/* الجداول العريضة تتمرر داخل حاويتها لا داخل الصفحة */
.mwk-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-sm);
}

/* ─── الحالات الإلزامية ─── */
.mwk-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    color: var(--text-muted);
    padding: var(--space-8, 32px) 0;
}

.mwk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 8px);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-8, 32px) var(--space-4, 16px);
}

.mwk-empty .material-icons {
    font-size: 40px;
    color: var(--color-gray-300, var(--text-muted));
}

.mwk-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    color: var(--error-color);
    background: rgba(var(--error-rgb, 239, 68, 68), 0.06);
    border: 1px solid var(--error-color);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
}

/* ─── بطاقة ملاحظة ─── */
.mwk-note {
    border: var(--border, 1px solid var(--border-color));
    border-radius: var(--radius-sm, 10px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--background-primary);
}

.mwk-note-pinned {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.04);
}

.mwk-note-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    margin-bottom: 4px;
}

.mwk-note-body {
    color: var(--text-primary);
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ─── هروب القوائم البحثية (اتفاقية searchable-select) ─── */
.mwk-shell:has(.ss-dropdown.open) { overflow: visible !important; z-index: auto !important; }
.mwk-shell .ss-dropdown.open { z-index: 2147483647 !important; }

/* ─── Drawer التضمين: المحرر داخل مساحة العمل ─── */
.mwk-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.45);
}

.mwk-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(880px, 100vw);
    z-index: 1055;
    background: var(--background-primary);
    border-inline-end: var(--border, 1px solid var(--border-color));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    animation: mwk-drawer-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes mwk-drawer-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.mwk-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-bottom: 1px solid var(--border-color);
    flex: 0 0 auto;
}

.mwk-drawer-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mwk-drawer-title {
    font-size: 16px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* «سيرتبط بـ: فلان» — بديل بصري لقائمة اختيار الأب المخفية في وضع التثبيت */
.mwk-drawer-parent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--primary-color);
}

.mwk-drawer-close {
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mwk-drawer-close:hover {
    background: var(--background-light);
    color: var(--text-primary);
}

.mwk-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-3, 12px) var(--space-4, 16px);
}

/* جداول Form.io العريضة (datagrid) تتمرر داخل حاويتها لا بقصّ الأعمدة */
.mwk-drawer-body .formio-component-datagrid,
.mwk-drawer-body .table-responsive {
    overflow-x: auto;
    max-width: 100%;
}

/* هروب القوائم البحثية داخل جسم الـ Drawer (اتفاقية searchable-select) */
.mwk-drawer-body:has(.ss-dropdown.open) { overflow: visible !important; }
.mwk-drawer-body .ss-dropdown.open { z-index: 2147483647 !important; }

/* حاوية المحرر في وضع التضمين — بلا حواف الصفحة الكاملة */
.module-editor-embed {
    max-width: 100%;
    min-width: 0;
}

/* ─── تبويب الرحلة ───
   نُقلت من كتلة <style> مضمّنة في ModuleRecordDetails.razor: كانت طبقة تنسيق ثانية
   بقيم hex خام واحتياطي بنفسجي خارج الهوية. كل الألوان هنا توكنات بلا احتياطيات لونية. */
.journey-timeline {
    position: relative;
    padding-inline-start: var(--space-2, 8px);
}

.journey-node {
    display: flex;
    gap: var(--space-3, 12px);
    position: relative;
    padding-bottom: var(--space-4, 16px);
}

.journey-node::before {
    content: "";
    position: absolute;
    inset-inline-start: 17px;
    top: 36px;
    bottom: -2px;
    width: 2px;
    background: var(--border-color);
}

.journey-node:last-child::before { display: none; }

.journey-marker {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* --jc يُمرَّر من الترميز بعد تعقيم SafeColor (لون مرحلة يحرّره المستأجر) */
    background: var(--jc, var(--primary-color));
    color: var(--color-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    z-index: 1;
    box-shadow: 0 0 0 3px var(--background-primary);
}

/* بطاقة داخل .mwk-panel: خلفية ثانوية بلا حدّ ولا ظل — تفادي بطاقة داخل بطاقة */
.journey-card {
    flex: 1 1 auto;
    background: var(--background-secondary);
    border-radius: var(--radius-sm);
    padding: var(--space-3, 12px) var(--space-4, 16px);
}

.journey-current .journey-card {
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.journey-stage-badge {
    background: var(--jsc, var(--primary-color));
    color: var(--color-white, #fff);
}

.journey-marker-icon {
    font-size: 15px;
    color: var(--color-white, #fff);
}

/* عنصر النشاط كزر: يبدو كالبطاقة تماماً، ويُظهر قابلية النقر فقط حين له وجهة */
.mwk-activity-link {
    border: none;
    text-align: start;
    font: inherit;
    color: inherit;
    width: 100%;
    transition: background-color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mwk-activity-link:not(:disabled) { cursor: pointer; }

.mwk-activity-link:not(:disabled):hover,
.mwk-activity-link:not(:disabled):focus-visible {
    background: rgba(var(--primary-rgb), 0.08);
}

/* معطّل = لا وجهة: يبقى مقروءاً بلا إيحاء بأنه قابل للنقر */
.mwk-activity-link:disabled {
    cursor: default;
    opacity: 1;
}

.journey-field {
    display: flex;
    flex-direction: column;
    background: var(--background-primary);
    border-radius: var(--radius-sm);
    padding: 5px var(--space-2, 8px);
}

.journey-field-label { font-size: 11px; color: var(--text-muted); }
.journey-field-value { font-size: 13px; color: var(--text-primary); font-weight: 600; }

.journey-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-3, 12px);
}

.journey-stat {
    flex: 1 1 140px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--background-primary);
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2, 8px) var(--space-3, 12px);
}

.journey-stat-label { font-size: 11px; color: var(--text-muted); }
.journey-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.journey-ago { font-size: 11px; color: var(--text-muted); }

.journey-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px var(--space-3, 12px);
    margin-top: 6px;
}

.journey-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.journey-meta-item .material-icons { font-size: 14px; color: var(--text-muted); }
.journey-meta-strong { font-weight: 600; color: var(--text-primary); }
.journey-gap,
.journey-gap .material-icons { color: var(--info-color); }

.journey-export-btn {
    margin-inline-start: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}

.journey-dwell.journey-dwell-warn,
.journey-dwell.journey-dwell-warn .material-icons { color: var(--warning-color); font-weight: 600; }
.journey-dwell.journey-dwell-danger,
.journey-dwell.journey-dwell-danger .material-icons { color: var(--error-color); font-weight: 700; }

.journey-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-2, 8px);
    background: none;
    border: none;
    /* هدف لمس 44px على كل المقاسات لا على الجوال وحده */
    min-height: 44px;
    padding: 4px 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
}

.journey-toggle .material-icons { font-size: 16px; }

.journey-moves {
    margin-top: 4px;
    padding-inline-start: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.journey-move {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
}

.journey-move-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--info-color);
}

.journey-move-when { color: var(--text-muted); font-size: 11px; }
.journey-move-by { color: var(--text-muted); }

/* ─── أهداف اللمس: أزرار الصفوف والإجراءات المضمّنة ───
   كانت تحت 44px على كل المقاسات لأن قاعدة الجوال وحدها كانت تغطيها. */
.mwk-panel .table .btn-sm,
.mwk-panel .btn-sm.mwk-row-action {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* حد أدنى 16px لكل مدخلات مساحة العمل — أقل منه يُحدث تكبيراً تلقائياً في iOS */
.mwk-panel select,
.mwk-panel .form-select,
.mwk-panel input,
.mwk-panel .form-control {
    font-size: 16px;
    min-height: 44px;
}

/* ─── قائمة ترتيب (شاشة إعداد مساحة العمل) ─── */
.mwk-orderlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.mwk-orderitem {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-sm, 10px);
    background: var(--background-secondary);
    cursor: grab;
}

.mwk-orderitem.mwk-dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.mwk-draghandle {
    color: var(--text-muted);
    font-size: 20px;
    flex: 0 0 auto;
}

.mwk-ordermove {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.mwk-ordermove .btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mwk-ordermove .material-icons { font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
    .mwk-orderitem { transition: none !important; }
}

/* ─── الجوال ─── */
@media (max-width: 767px) {
    .mwk-header { padding: var(--space-3, 12px); }
    .mwk-toolbar-org { width: 100%; }
    .mwk-toolbar-org select,
    .mwk-toolbar-org .form-select { max-width: none; flex: 1 1 auto; }
    .mwk-toolbar-actions { width: 100%; }
    .mwk-toolbar-actions .btn { min-height: 44px; }
    .mwk-actions { width: 100%; }
    .mwk-actions .btn { min-height: 44px; }
    .mwk-metrics { grid-template-columns: repeat(2, 1fr); }
    .mwk-tab { padding: var(--space-2, 8px) var(--space-3, 12px); }
    .mwk-drawer { width: 100vw; }
    .journey-export-btn { width: 100%; justify-content: center; }
    .journey-card .btn-sm {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mwk-metrics { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ─── تعطيل الحركة عند تفضيل المستخدم ─── */
@media (prefers-reduced-motion: reduce) {
    .mwk-drawer,
    .mwk-shell *,
    .mwk-openitem,
    .mwk-activity-link,
    .mwk-tab {
        transition: none !important;
        animation: none !important;
    }
}