/* ═══════════════════════════════════════════════════════════════════════════
   module-section-home — صفحة القسم (‏/s/{groupKey}) وبطاقة «ابدأ من هنا»
   ---------------------------------------------------------------------------
   البادئتان: msh- (الصفحة ومكوّناتها في Shared/Components/Modules/SectionHome)
   وssc- (قائمة الانطلاق، تُستعمل أيضاً أعلى قائمة السجلات).
   توكنات فقط: لا لون خامّ، والحواف من --radius-system وتوكنات المكوّنات.
   التسلسل البصري: لوح الصفحة سطح ثانوي، والكتل أسطح أساسية بارتفاع خفيف
   (لا توكن حدّ يبلغ 3:1 على الأبيض، فالفصل بالسطح والظلّ لا بالخطّ وحده).
   لا وضع داكن في المنتج؛ التلوين لكل منشأة عبر استوديو التصميم.
   ═══════════════════════════════════════════════════════════════════════════ */

.msh-shell {
    --msh-radius: var(--ds-card-radius, calc(var(--radius-system, 8px) * 1.5));
    --msh-radius-sm: calc(var(--radius-system, 8px) * 0.75);
    --msh-border: 1px solid var(--border-color);
    --msh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --msh-tint: rgba(var(--primary-rgb), 0.06);
    display: grid;
    gap: var(--space-5, 20px);
    font-family: var(--font-family);
    background: var(--background-secondary);
    min-block-size: 100%;
}

.msh-shell :is(h1, h2, h3) {
    letter-spacing: normal;
    text-transform: none;
}

.msh-shell :is(.msh-kpi-num, .msh-card-count strong, .msh-catalog-count, .msh-q-amount, .msh-step-num, .msh-count-pill, .msh-tab-count, .msh-mix-count) {
    font-variant-numeric: tabular-nums;
}

.msh-flip {
    display: inline-block;
}

html[dir="ltr"] .msh-flip {
    transform: scaleX(-1);
}

.msh-dot {
    color: var(--text-muted);
}

.msh-state {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    padding: var(--space-6, 24px);
    border: var(--msh-border);
    border-radius: var(--msh-radius);
    background: var(--background-primary);
    color: var(--text-secondary);
}

.msh-btn {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    border-radius: var(--ds-btn-radius, var(--radius-system, 8px));
}

.msh-btn .material-icons {
    font-size: 20px;
}

.msh-menu-item {
    min-block-size: 44px;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.msh-saved {
    margin: 0;
}

/* ── مسار التنقّل والترويسة ──────────────────────────────────────────── */
.msh-crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
}

.msh-crumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    min-block-size: 24px;
    display: inline-flex;
    align-items: center;
}

.msh-crumbs a:hover,
.msh-crumbs a:focus-visible {
    color: var(--primary-color);
    text-decoration: underline;
}

.msh-crumbs .material-icons {
    font-size: 18px;
    color: var(--text-muted);
}

.msh-crumbs [aria-current="page"] {
    color: var(--text-primary);
    font-weight: 600;
}

.msh-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4, 16px);
    padding: var(--space-5, 20px) var(--space-6, 24px);
    border: var(--msh-border);
    border-radius: var(--msh-radius);
    background: var(--background-primary);
    box-shadow: var(--shadow-sm);
}

.msh-head-main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4, 16px);
    flex: 1 1 360px;
    min-inline-size: 0;
}

.msh-head-icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
    border-radius: calc(var(--radius-system, 8px) * 1.25);
    background: var(--msh-tint);
    color: var(--primary-color);
}

.msh-head-icon .material-icons,
.msh-head-icon i {
    font-size: 28px;
}

.msh-head-text {
    display: grid;
    gap: var(--space-1, 4px);
    min-inline-size: 0;
}

.msh-title {
    margin: 0;
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.msh-desc {
    margin: 0;
    max-inline-size: 72ch;
    color: var(--text-secondary);
    line-height: 1.7;
}

.msh-subline {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
}

.msh-scope {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: 2px var(--space-2, 8px);
    border-radius: var(--radius-full, 9999px);
    background: var(--msh-tint);
    color: var(--text-primary);
    font-weight: 600;
}

.msh-scope .material-icons {
    font-size: 16px;
    color: var(--primary-color);
}

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

.msh-period {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.msh-period .material-icons {
    position: absolute;
    inset-inline-start: var(--space-3, 12px);
    font-size: 18px;
    color: var(--text-secondary);
    pointer-events: none;
}

.msh-period .form-select {
    min-block-size: 44px;
    font-size: 1rem;
    padding-inline-start: calc(var(--space-3, 12px) + 26px);
    border-radius: var(--ds-field-radius, var(--radius-system, 8px));
}

.msh-maturity {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--msh-radius-sm);
    background: rgba(var(--info-rgb), 0.08);
    color: var(--text-primary);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
}

.msh-maturity .material-icons {
    font-size: 20px;
    color: var(--info-color);
}

/* ── الكتلة العامة ────────────────────────────────────────────────────── */
.msh-block {
    display: grid;
    gap: var(--space-4, 16px);
    align-content: start;
    padding: var(--space-5, 20px);
    border: var(--msh-border);
    border-radius: var(--msh-radius);
    background: var(--background-primary);
    box-shadow: var(--shadow-sm);
    min-inline-size: 0;
}

.msh-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2, 8px) var(--space-4, 16px);
}

.msh-block-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
}

.msh-block-title .material-icons {
    font-size: 22px;
    color: var(--primary-color);
}

.msh-block-sub {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
}

.msh-sub-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.msh-sub-title .material-icons {
    font-size: 18px;
    color: var(--text-secondary);
}

.msh-hint,
.msh-hint-inline {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    line-height: 1.6;
}

.msh-hint .material-icons {
    font-size: 18px;
    color: var(--warning-color);
}

.msh-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px var(--space-2, 8px);
    border-radius: var(--radius-full, 9999px);
    background: var(--background-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.msh-chip-muted {
    background: transparent;
    border: var(--msh-border);
}

.msh-chip-good {
    background: rgba(var(--success-rgb), 0.1);
    color: var(--text-primary);
}

.msh-count-pill {
    display: inline-grid;
    place-items: center;
    min-inline-size: 26px;
    padding: 0 var(--space-2, 8px);
    border-radius: var(--radius-full, 9999px);
    background: var(--primary-color);
    color: var(--background-primary);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
    line-height: 1.8;
}

.msh-inline-error {
    margin: 0;
    color: var(--error-color);
    font-size: var(--font-size-sm, 0.875rem);
}

/* ── الحالة الفارغة ───────────────────────────────────────────────────── */
.msh-empty {
    justify-items: center;
    text-align: center;
    padding-block: var(--space-10, 40px);
}

.msh-empty-icon {
    font-size: 44px;
    color: var(--primary-color);
}

.msh-empty-text {
    margin: 0;
    max-inline-size: 56ch;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ── يحتاج تصرّفاً ────────────────────────────────────────────────────── */
.msh-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px);
    padding: 3px;
    border-radius: var(--radius-full, 9999px);
    background: var(--background-secondary);
}

.msh-tab {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 0 var(--space-4, 16px);
    border: 0;
    border-radius: var(--radius-full, 9999px);
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
    transition: background-color 160ms var(--msh-ease), color 160ms var(--msh-ease);
}

.msh-tab:hover:not(:disabled) {
    color: var(--text-primary);
}

.msh-tab.is-active {
    background: var(--background-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.msh-tab:disabled {
    color: var(--text-muted);
    cursor: default;
}

.msh-tab-count {
    min-inline-size: 22px;
    padding: 0 6px;
    border-radius: var(--radius-full, 9999px);
    background: var(--background-secondary);
    font-size: var(--font-size-xs, 0.75rem);
    text-align: center;
}

.msh-tab.is-active .msh-tab-count {
    background: var(--msh-tint);
    color: var(--primary-color);
}

.msh-act-clear {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--msh-radius-sm);
    background: rgba(var(--success-rgb), 0.08);
    color: var(--text-primary);
    font-weight: 600;
}

.msh-act-clear .material-icons {
    color: var(--success-color);
}

.msh-q {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.msh-q-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2, 8px) var(--space-4, 16px);
    padding: var(--space-3, 12px) 0;
    border-block-start: var(--msh-border);
}

.msh-q-row:first-child {
    border-block-start: 0;
}

.msh-q-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    font-size: 22px;
    background: var(--background-secondary);
    color: var(--text-secondary);
}

.msh-q-row.tone-danger .msh-q-icon {
    background: rgba(var(--error-rgb), 0.1);
    color: var(--error-color);
}

.msh-q-row.tone-warning .msh-q-icon {
    background: rgba(var(--warning-rgb), 0.14);
    color: var(--text-primary);
}

.msh-q-row.tone-info .msh-q-icon {
    background: rgba(var(--info-rgb), 0.1);
    color: var(--info-color);
}

.msh-q-main {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
}

.msh-q-title {
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msh-q-title:hover,
.msh-q-title:focus-visible {
    color: var(--primary-color);
    text-decoration: underline;
}

.msh-q-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1, 4px) var(--space-2, 8px);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.msh-q-row.tone-danger .msh-q-reason {
    color: var(--error-color);
    font-weight: 700;
}

.msh-q-row.tone-warning .msh-q-reason {
    color: var(--text-primary);
    font-weight: 700;
}

.msh-q-note {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.msh-q-amount {
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    unicode-bidi: isolate;
}

.msh-unit,
.msh-kpi-unit {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text-secondary);
    margin-inline-start: 2px;
}

.msh-q-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1, 4px);
}

.msh-q-btn {
    min-block-size: 44px;
    min-inline-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 4px);
    border-radius: var(--ds-btn-radius, var(--radius-system, 8px));
    font-weight: 600;
}

.msh-q-btn .material-icons {
    font-size: 18px;
}

.msh-q-remind {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px);
    border-radius: var(--msh-radius-sm);
    background: var(--background-secondary);
}

.msh-field {
    display: grid;
    gap: var(--space-1, 4px);
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
}

.msh-field .form-control {
    min-block-size: var(--ds-field-height, 44px);
    font-size: 1rem;
    border-radius: var(--ds-field-radius, var(--radius-system, 8px));
}

.msh-field-grow {
    flex: 1 1 220px;
}

.msh-q-remind-actions {
    display: flex;
    gap: var(--space-2, 8px);
}

.msh-more {
    justify-self: start;
    min-block-size: 44px;
    font-weight: 600;
}

/* ── المؤشرات ─────────────────────────────────────────────────────────── */
.msh-refreshing {
    opacity: 0.6;
    transition: opacity 160ms var(--msh-ease);
}

.msh-kpis {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3, 12px);
}

.msh-kpi-cell {
    display: flex;
    min-inline-size: 0;
}

.msh-kpi {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    padding: var(--space-4, 16px);
    border: var(--msh-border);
    border-radius: var(--msh-radius-sm);
    background: var(--background-primary);
    color: var(--text-primary);
    text-decoration: none;
    min-inline-size: 0;
    transition: border-color 160ms var(--msh-ease), box-shadow 160ms var(--msh-ease);
}

a.msh-kpi:hover,
a.msh-kpi:focus-visible {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}

.msh-kpi.tone-danger {
    background: rgba(var(--error-rgb), 0.04);
    border-color: rgba(var(--error-rgb), 0.35);
}

.msh-kpi.tone-warning {
    background: rgba(var(--warning-rgb), 0.06);
    border-color: rgba(var(--warning-rgb), 0.45);
}

.msh-kpi-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.5;
}

.msh-kpi-label::before {
    content: "";
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--border-color);
}

.msh-kpi.tone-danger .msh-kpi-label::before { background: var(--error-color); }
.msh-kpi.tone-warning .msh-kpi-label::before { background: var(--warning-color); }
.msh-kpi.tone-success .msh-kpi-label::before { background: var(--success-color); }
.msh-kpi.tone-info .msh-kpi-label::before { background: var(--info-color); }
.msh-kpi.tone-neutral .msh-kpi-label::before { background: var(--primary-color); }

.msh-kpi-value {
    display: inline-flex;
    flex-wrap: wrap;
    align-self: flex-start;
    align-items: baseline;
    gap: 0 var(--space-1, 4px);
    max-inline-size: 100%;
    line-height: 1.2;
}

.msh-kpi-num {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.msh-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.4;
}

.msh-kpi-delta .material-icons {
    font-size: 18px;
}

.msh-kpi-delta.is-good {
    color: var(--success-color);
}

.msh-kpi-delta.is-bad {
    color: var(--error-color);
}

.msh-kpi-note {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
    line-height: 1.5;
}

.msh-kpi-foot {
    margin-block-start: auto;
    padding-block-start: var(--space-2, 8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
}

.msh-kpi-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    font-weight: 700;
    white-space: nowrap;
}

.msh-kpi-link .material-icons {
    font-size: 16px;
}

.msh-mix {
    display: grid;
    gap: var(--space-2, 8px);
}

.msh-mix-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

.msh-mix-bar {
    display: flex;
    gap: 2px;
    block-size: 12px;
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    background: var(--background-secondary);
}

.msh-mix-seg {
    flex-basis: 0;
    min-inline-size: 4px;
    background: var(--msh-seg, var(--primary-color));
}

.msh-mix-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px) var(--space-3, 12px);
}

.msh-mix-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    min-block-size: 32px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm, 0.875rem);
}

.msh-mix-item:hover,
.msh-mix-item:focus-visible {
    text-decoration: underline;
}

.msh-mix-swatch {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--msh-seg, var(--primary-color));
}

.msh-mix-count {
    font-weight: 700;
    color: var(--text-secondary);
}

.msh-why,
.msh-dq {
    border-radius: var(--msh-radius-sm);
    background: var(--background-secondary);
    padding: var(--space-2, 8px) var(--space-4, 16px);
}

.msh-why summary,
.msh-dq summary {
    min-block-size: 44px;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--font-size-sm, 0.875rem);
}

.msh-why ul,
.msh-dq ul {
    margin: 0 0 var(--space-2, 8px);
    padding-inline-start: var(--space-5, 20px);
    display: grid;
    gap: var(--space-2, 8px);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    line-height: 1.6;
}

.msh-why strong {
    color: var(--text-primary);
}

.msh-dq {
    background: var(--background-primary);
    border: var(--msh-border);
    box-shadow: var(--shadow-sm);
}

.msh-dq .msh-btn {
    margin-block-end: var(--space-2, 8px);
}

/* ── مسار العمل + شاشات العمل ─────────────────────────────────────────── */
.msh-duo {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-5, 20px);
    align-items: start;
}

.msh-duo.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.msh-path {
    display: grid;
    gap: var(--space-2, 8px);
}

.msh-path + .msh-path {
    padding-block-start: var(--space-3, 12px);
    border-block-start: var(--msh-border);
}

.msh-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-2, 8px);
}

.msh-step {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex: 1 1 180px;
    min-inline-size: 0;
}

.msh-step + .msh-step::before {
    content: "arrow_back";
    font-family: "Material Icons";
    font-size: 20px;
    color: var(--text-muted);
    line-height: 1;
    flex: none;
}

html[dir="ltr"] .msh-step + .msh-step::before {
    content: "arrow_forward";
}

.msh-step-link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    min-block-size: 64px;
    padding: var(--space-3, 12px);
    border: var(--msh-border);
    border-radius: var(--msh-radius-sm);
    background: var(--background-primary);
    color: var(--text-primary);
    text-decoration: none;
    min-inline-size: 0;
    transition: border-color 160ms var(--msh-ease), background-color 160ms var(--msh-ease);
}

.msh-step-link:hover,
.msh-step-link:focus-visible {
    border-color: var(--primary-color);
    background: var(--msh-tint);
}

.msh-step-num {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    color: var(--text-primary);
    background: var(--background-primary);
    font-weight: 700;
    font-size: var(--font-size-sm, 0.875rem);
}

.msh-step-body {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
    min-inline-size: 0;
}

.msh-step-name {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msh-step-count {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.msh-step-bar {
    display: block;
    block-size: 6px;
    border-radius: var(--radius-full, 9999px);
    background: var(--background-secondary);
    overflow: hidden;
}

.msh-step-bar > span {
    display: block;
    block-size: 100%;
    background: var(--primary-color);
    border-radius: var(--radius-full, 9999px);
}

.msh-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2, 8px);
}

.msh-card {
    display: flex;
    align-items: stretch;
    border: var(--msh-border);
    border-radius: var(--msh-radius-sm);
    background: var(--background-primary);
    min-inline-size: 0;
    transition: border-color 160ms var(--msh-ease);
}

.msh-card:hover,
.msh-card:focus-within {
    border-color: var(--primary-color);
}

.msh-card-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    color: var(--text-primary);
    text-decoration: none;
    min-inline-size: 0;
}

.msh-card-icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--msh-radius-sm);
    background: var(--msh-tint);
    color: var(--primary-color);
}

.msh-card-body {
    flex: 1 1 auto;
    display: grid;
    gap: var(--space-1, 4px);
    min-inline-size: 0;
}

.msh-card-title {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msh-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px);
}

.msh-card-count {
    flex: none;
    text-align: end;
}

.msh-card-count strong {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.msh-card-none {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    color: var(--text-secondary);
}

.msh-card-add {
    flex: none;
    inline-size: 48px;
    min-block-size: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-inline-start: var(--msh-border);
    border-start-end-radius: var(--msh-radius-sm);
    border-end-end-radius: var(--msh-radius-sm);
    background: transparent;
    color: var(--primary-color);
    cursor: pointer;
    transition: background-color 160ms var(--msh-ease);
}

.msh-card-add:hover,
.msh-card-add:focus-visible {
    background: var(--msh-tint);
}

.msh-catalog {
    display: grid;
    gap: var(--space-2, 8px);
    padding-block-start: var(--space-3, 12px);
    border-block-start: var(--msh-border);
}

.msh-catalog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

.msh-catalog-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-block-size: 44px;
    padding: 0 var(--space-3, 12px);
    border: var(--msh-border);
    border-radius: var(--radius-full, 9999px);
    background: var(--background-primary);
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    transition: border-color 160ms var(--msh-ease), background-color 160ms var(--msh-ease);
}

.msh-catalog-item:hover,
.msh-catalog-item:focus-visible {
    border-color: var(--primary-color);
    background: var(--msh-tint);
}

.msh-catalog-icon {
    color: var(--text-secondary);
    font-size: 18px;
}

.msh-catalog-count {
    padding: 0 6px;
    border-radius: var(--radius-full, 9999px);
    background: var(--background-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
}

/* ── اللوحات ──────────────────────────────────────────────────────────── */
.msh-board-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4, 16px) var(--space-5, 20px);
}

.msh-board-group {
    display: grid;
    gap: var(--space-2, 8px);
    align-content: start;
}

.msh-boards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2, 8px);
}

.msh-board {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    min-block-size: 56px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: var(--msh-border);
    border-radius: var(--msh-radius-sm);
    background: var(--background-primary);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 160ms var(--msh-ease), background-color 160ms var(--msh-ease);
}

.msh-board:hover,
.msh-board:focus-visible {
    border-color: var(--primary-color);
    background: var(--msh-tint);
}

.msh-board-icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--msh-radius-sm);
    background: var(--msh-tint);
    color: var(--primary-color);
    font-size: 20px;
}

.msh-board-text {
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
    min-inline-size: 0;
}

.msh-board-title {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msh-board-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.msh-board-go {
    flex: none;
    color: var(--text-muted);
}

/* ── سجلاتي ───────────────────────────────────────────────────────────── */
.msh-mine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4, 16px) var(--space-6, 24px);
}

.msh-mine-col {
    display: grid;
    gap: var(--space-2, 8px);
    align-content: start;
    min-inline-size: 0;
}

.msh-mine-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.msh-mine-item {
    display: grid;
    gap: 2px;
    min-block-size: 44px;
    padding: var(--space-2, 8px);
    border-radius: var(--msh-radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 160ms var(--msh-ease);
}

.msh-mine-item:hover,
.msh-mine-item:focus-visible {
    background: var(--msh-tint);
}

.msh-mine-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msh-mine-meta {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ── هياكل التحميل ────────────────────────────────────────────────────── */
.msh-skel {
    border-radius: var(--msh-radius);
    background: linear-gradient(90deg, var(--background-primary) 0%, var(--background-light) 50%, var(--background-primary) 100%);
    background-size: 200% 100%;
    animation: msh-shimmer 1.4s var(--msh-ease) infinite;
    border: var(--msh-border);
}

.msh-skel-head { block-size: 120px; }
.msh-skel-block { block-size: 180px; }
.msh-skel-kpi { block-size: 130px; border-radius: var(--msh-radius-sm); }

.msh-skel-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3, 12px);
}

@keyframes msh-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* ── التركيز ──────────────────────────────────────────────────────────── */
.msh-shell :is(a, button, select, summary, input):focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.msh-shell :is(a, button, summary) {
    scroll-margin-block-start: var(--space-10, 40px);
}

/* ═══ ssc- قائمة «ابدأ من هنا» ═════════════════════════════════════════ */
.ssc-card {
    --ssc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    display: grid;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: var(--radius-system, 8px);
    background: rgba(var(--primary-rgb), 0.04);
}

.ssc-compact {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin-block-end: var(--space-3, 12px);
}

.ssc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
}

.ssc-titles {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
}

.ssc-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ssc-title .material-icons {
    color: var(--primary-color);
    font-size: 20px;
}

.ssc-progress-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.ssc-toggle {
    inline-size: 44px;
    block-size: 44px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-system, 8px);
    background: var(--background-primary);
    color: var(--text-secondary);
    cursor: pointer;
}

.ssc-bar {
    block-size: 6px;
    border-radius: var(--radius-full, 999px);
    background: rgba(var(--primary-rgb), 0.12);
    overflow: hidden;
}

.ssc-bar-fill {
    display: block;
    block-size: 100%;
    background: var(--primary-color);
    transition: inline-size 200ms var(--ssc-ease);
}

.ssc-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2, 8px);
}

.ssc-step {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    min-block-size: 44px;
}

.ssc-check {
    flex: none;
    color: var(--text-muted);
}

.ssc-step.is-done .ssc-check {
    color: var(--success-color);
}

.ssc-step.is-done .ssc-step-text {
    color: var(--text-secondary);
    text-decoration: line-through;
}

.ssc-step.is-next .ssc-step-text {
    font-weight: 700;
    color: var(--text-primary);
}

.ssc-step-text {
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
    min-inline-size: 0;
}

.ssc-step-hint {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 400;
}

.ssc-action {
    flex: none;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
}

.ssc-action .material-icons {
    font-size: 18px;
}


/* ── الاستجابة ─────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .msh-duo {
        grid-template-columns: minmax(0, 1fr);
    }

    /* comprehensive-mobile.css يفرض حشو كل زرّ وحجم العناوين بـ !important (نوعية 0,9,1)؛
       #msh-boost مُعرِّف لا يطابق شيئاً يرفع النوعية فتبقى أحجام الصفحة كما صُمّمت. */
    .msh-shell button:is(.msh-tab, .msh-q-btn, .msh-card-add, .msh-more, #msh-boost) {
        min-block-size: 44px !important;
        min-inline-size: 44px !important;
    }

    .msh-shell button:is(.msh-card-add, #msh-boost) {
        padding: 0 !important;
    }

    .msh-shell button:is(.msh-tab, #msh-boost) {
        padding: 0 var(--space-4, 16px) !important;
        font-size: var(--font-size-sm, 0.875rem) !important;
    }

    .msh-shell h1:is(.msh-title, #msh-boost) {
        font-size: 1.25rem !important;
    }

    .msh-shell h2:is(.msh-block-title, #msh-boost) {
        font-size: 1.0625rem !important;
    }

    .msh-shell h3:is(.msh-sub-title, #msh-boost) {
        font-size: 0.9375rem !important;
    }
}

@media (max-width: 767px) {
    .msh-shell {
        gap: var(--space-4, 16px);
    }

    .msh-head,
    .msh-block {
        padding: var(--space-4, 16px);
    }

    .msh-head-actions {
        inline-size: 100%;
    }

    .msh-head-actions > :is(.btn, .dropdown, .msh-period) {
        flex: 1 1 100%;
    }

    .msh-head-actions .dropdown > .btn,
    .msh-period,
    .msh-period .form-select {
        inline-size: 100%;
    }

    .msh-head-actions .msh-btn {
        justify-content: center;
    }

    .msh-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .msh-kpi {
        padding: var(--space-3, 12px);
    }

    .msh-kpi-num {
        font-size: clamp(1.05rem, 5.5vw, 1.375rem);
    }

    .msh-kpi-value {
        overflow-wrap: anywhere;
    }

    .msh-kpi-foot {
        flex-wrap: wrap;
    }

    .msh-tabs {
        border-radius: var(--msh-radius-sm);
    }

    .msh-tab {
        flex: 1 1 calc(50% - var(--space-1, 4px));
        justify-content: center;
    }

    .msh-q-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .msh-q-amount {
        grid-column: 2;
    }

    .msh-q-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .msh-q-remind {
        grid-column: 1 / -1;
    }

    .msh-steps {
        flex-direction: column;
    }

    .msh-step {
        flex-direction: column;
        align-items: stretch;
        flex-basis: auto;
    }

    .msh-step + .msh-step::before,
    html[dir="ltr"] .msh-step + .msh-step::before {
        content: "arrow_downward";
        align-self: center;
    }
}

@media (max-width: 380px) {
    .msh-kpis {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .msh-shell *,
    .ssc-card * {
        transition: none !important;
        animation: none !important;
    }

    .msh-skel {
        animation: none !important;
    }
}

/* ── خط سير المراحل (SectionStageTrack) — أول الصفحة ── */
.msh-stagetrack-row {
    display: grid;
    gap: var(--space-2, 8px);
    min-inline-size: 0;
}

.msh-stagetrack-row + .msh-stagetrack-row {
    padding-block-start: var(--space-3, 12px);
    border-block-start: var(--msh-border);
}

.msh-stagetrack-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

.msh-stagetrack-titles {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
}

.msh-stagetrack-source {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.msh-stagetrack-open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    min-block-size: 44px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.msh-stagetrack-open:hover { text-decoration: underline; }
.msh-stagetrack-open .material-icons { font-size: 18px; }

/* اللوحة المضمَّنة: أعمدة المراحل بطاقاتٌ على خلفية الصفحة — فالقسم نفسه بلا إطار (لا بطاقة داخل بطاقة) */
.msh-block.msh-stagetrack {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.msh-stagetrack-board {
    min-inline-size: 0;
}

/* ═══ تخصيص لوحة المؤشرات وودجات التقارير (2026-10-06) ═════════════════════ */
.msh-kpi-head-side {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px) var(--space-3, 12px);
}

.msh-board-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3, 12px) var(--space-4, 16px);
    padding: var(--space-3, 12px);
    border: var(--msh-border);
    border-radius: var(--msh-radius-sm);
    background: var(--msh-tint);
}

.msh-board-tool {
    display: grid;
    gap: var(--space-1, 4px);
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-secondary);
    min-inline-size: 0;
}

.msh-board-tool .form-select {
    min-block-size: var(--ds-field-height, 44px);
    min-inline-size: 140px;
    font-size: 1rem;
}

.msh-board-tool-btn {
    min-block-size: var(--ds-field-height, 44px);
}

.msh-seg {
    display: inline-flex;
    border: var(--msh-border);
    border-radius: var(--msh-radius-sm);
    background: var(--background-primary);
    overflow: hidden;
}

.msh-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    min-block-size: 44px;
    padding: 0 var(--space-3, 12px);
    border: 0;
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms var(--msh-ease), color 160ms var(--msh-ease);
}

.msh-seg-btn + .msh-seg-btn {
    border-inline-start: var(--msh-border);
}

.msh-seg-btn.is-active {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

.msh-seg-btn .material-icons {
    font-size: 18px;
}

/* المصغّرة: التسمية والقيمة فقط، نصف العرض ونصف الارتفاع ⇒ ربع مساحة البطاقة العادية */
.msh-kpis.is-compact {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-2, 8px);
}

.msh-kpi.is-compact {
    gap: 2px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
}

.msh-kpi.is-compact .msh-kpi-label {
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.msh-kpi.is-compact .msh-kpi-label::before {
    display: inline-block;
    margin-inline-end: var(--space-1, 4px);
    vertical-align: middle;
}

.msh-kpi.is-compact .msh-kpi-num {
    font-size: 1.25rem;
}

.msh-kpi-source {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-muted, var(--text-secondary));
    line-height: 1.5;
    min-inline-size: 0;
}

.msh-kpi-source .material-icons {
    font-size: 15px;
}

/* وضع التخصيص */
.msh-kpi-cell.is-draggable {
    flex-direction: column;
    gap: var(--space-1, 4px);
    cursor: grab;
}

.msh-kpi-cell.is-dragging {
    opacity: 0.5;
}

.msh-kpi-cell.is-drop-target > :is(.msh-kpi, .msh-rw) {
    outline: 2px dashed var(--primary-color);
    outline-offset: 2px;
}

.msh-kpis-block.is-editing .msh-kpi,
.msh-kpis-block.is-editing .msh-rw {
    border-style: dashed;
}

.msh-edit-bar {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    min-inline-size: 0;
}

.msh-drag-handle {
    color: var(--text-secondary);
    font-size: 20px;
    cursor: grab;
}

.msh-edit-actions {
    display: inline-flex;
    gap: 2px;
    margin-inline-start: auto;
}

.msh-icon-btn {
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: var(--msh-border);
    border-radius: var(--msh-radius-sm);
    background: var(--background-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 160ms var(--msh-ease), color 160ms var(--msh-ease);
}

.msh-icon-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.msh-icon-btn.is-danger:hover:not(:disabled) {
    border-color: var(--error-color);
    color: var(--error-color);
}

.msh-icon-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.msh-icon-btn .material-icons {
    font-size: 20px;
}

.msh-board-hidden {
    display: grid;
    gap: var(--space-2, 8px);
}

.msh-board-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

.msh-board-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    min-block-size: 44px;
    padding: 0 var(--space-3, 12px);
    border: 1px dashed var(--border-color);
    border-radius: 9999px;
    background: var(--background-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
    transition: border-color 160ms var(--msh-ease), background-color 160ms var(--msh-ease);
}

.msh-board-chip:hover {
    border-color: var(--primary-color);
    background: var(--msh-tint);
}

.msh-board-chip .material-icons {
    font-size: 18px;
    color: var(--primary-color);
}

.msh-board-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    padding-block-start: var(--space-2, 8px);
    border-block-start: var(--msh-border);
}

.msh-board-status {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--success-color);
}

.msh-board-status.is-error {
    color: var(--error-color);
}

/* ودجة التقرير */
.msh-kpi-cell:has(> .msh-rw.is-wide) {
    grid-column: span 2;
}

.msh-rw {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px);
    border: var(--msh-border);
    border-radius: var(--msh-radius-sm);
    background: var(--background-primary);
    min-inline-size: 0;
}

.msh-rw.is-compact {
    gap: 2px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
}

.msh-rw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    min-inline-size: 0;
}

.msh-rw-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--text-secondary);
    min-inline-size: 0;
}

.msh-rw-title bdi {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msh-rw-title .material-icons {
    font-size: 18px;
    color: var(--primary-color);
}

.msh-rw.is-compact .msh-rw-title {
    font-size: var(--font-size-xs, 0.75rem);
}

.msh-rw-open {
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    margin: calc(var(--space-2, 8px) * -1);
    color: var(--text-secondary);
    border-radius: var(--msh-radius-sm);
}

.msh-rw-open:hover {
    color: var(--primary-color);
    background: var(--msh-tint);
}

.msh-rw-open .material-icons {
    font-size: 18px;
}

.msh-rw-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.msh-rw.is-compact .msh-rw-value {
    font-size: 1.25rem;
}

.msh-rw-sub,
.msh-rw-state {
    margin: 0;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
}

.msh-rw-state.is-error {
    color: var(--error-color);
}

/* Chart.js المستجيب يقيس من الأب: الحاوية محدّدة الارتفاع ولا يُفرض حجم الـ canvas نفسه */
.msh-rw-chart {
    position: relative;
    block-size: 220px;
    min-inline-size: 0;
}

.msh-rw-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2, 8px);
}

.msh-rw-bars li {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--font-size-xs, 0.75rem);
}

.msh-rw-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.msh-rw-bar {
    block-size: 8px;
    border-radius: 9999px;
    background: rgba(var(--primary-rgb), 0.12);
    overflow: hidden;
}

.msh-rw-bar > span {
    display: block;
    block-size: 100%;
    background: var(--primary-color);
}

.msh-rw-bar-val {
    font-weight: 700;
    color: var(--text-primary);
}

.msh-rw-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm, 0.875rem);
}

.msh-rw-table td {
    padding: var(--space-1, 4px) 0;
    border-block-end: var(--msh-border);
    color: var(--text-primary);
}

.msh-rw-table td.is-num {
    text-align: end;
    font-weight: 700;
}

.msh-rw-skel {
    block-size: 120px;
    border-radius: var(--msh-radius-sm);
    background: var(--msh-tint);
}

/* نافذة إنشاء التقرير */
.msh-re-backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.msh-re-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.msh-re-title .material-icons {
    color: var(--primary-color);
}

.msh-re-backdrop :is(.form-control, .form-select) {
    min-block-size: var(--ds-field-height, 44px);
    font-size: 1rem;
}

.msh-re-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px) var(--space-5, 20px);
}

.msh-re-checks .form-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-block-size: 44px;
    margin: 0;
    padding: 0;
}

.msh-re-checks .form-check-input {
    margin: 0;
    float: none;
}

@media (max-width: 1023px) {
    .msh-shell button:is(.msh-icon-btn, .msh-seg-btn, .msh-board-chip, #msh-boost) {
        min-block-size: 44px !important;
        min-inline-size: 44px !important;
    }

    .msh-shell button:is(.msh-icon-btn, #msh-boost) {
        padding: 0 !important;
    }

    .msh-shell button:is(.msh-seg-btn, .msh-board-chip, #msh-boost) {
        padding: 0 var(--space-3, 12px) !important;
        font-size: var(--font-size-sm, 0.875rem) !important;
    }

    .msh-shell .msh-rw-chart canvas:is(canvas, #msh-boost) {
        block-size: 100% !important;
    }
}

@media (max-width: 767px) {
    .msh-board-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .msh-board-tool .form-select {
        inline-size: 100%;
    }

    .msh-kpis.is-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .msh-board-actions > .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .msh-kpi-cell:has(> .msh-rw.is-wide) {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msh-seg-btn,
    .msh-icon-btn,
    .msh-board-chip {
        transition: none !important;
    }
}
/* ═══ لوحة المراحل المضمَّنة: العدد والحجم + ترتيب أقسام الصفحة (2026-10-06) ═══ */
.msh-stagetrack-tools {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px) var(--space-3, 12px);
}

.msh-board-tool-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.msh-board-tool-inline .form-select {
    min-inline-size: 110px;
}

/* المصغّرة: الاسم والمرحلة والقيمة فقط — بلا أزرار التواصل والمتابعة والأشخاص، وأعمدة أضيق */
.sx-board.sx-board-compact {
    grid-auto-columns: minmax(200px, 1fr);
}

.sx-board.sx-board-compact .sx-kcard {
    gap: var(--space-1, 4px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
}

.sx-board.sx-board-compact :is(.rc-actions, .rc-next, .rc-foot, .rc-company, .rc-mention-text) {
    display: none;
}

.sx-board.sx-board-compact .rc-card {
    gap: var(--space-1, 4px);
}

.sx-board.sx-board-compact .rc-facts > div + div {
    display: none;
}

/* ترتيب أقسام الصفحة */
.msh-arr-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2, 8px);
}

.msh-arr-item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: var(--msh-border);
    border-radius: var(--msh-radius-sm);
    background: var(--background-primary);
    cursor: grab;
    min-inline-size: 0;
}

.msh-arr-item.is-hidden .msh-arr-name {
    color: var(--text-muted, var(--text-secondary));
    text-decoration: line-through;
}

.msh-arr-item.is-dragging {
    opacity: 0.5;
}

.msh-arr-item.is-drop-target {
    outline: 2px dashed var(--primary-color);
    outline-offset: 2px;
}

.msh-arr-num {
    display: inline-grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: var(--msh-tint);
    color: var(--primary-color);
    font-weight: 700;
    font-size: var(--font-size-sm, 0.875rem);
}

.msh-arr-name {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--text-primary);
    min-inline-size: 0;
}

@media (max-width: 767px) {
    .msh-stagetrack-tools {
        inline-size: 100%;
    }

    .msh-board-tool-inline {
        flex: 1 1 100%;
    }

    .msh-board-tool-inline .form-select {
        flex: 1 1 auto;
    }
}