/* =====================================================================
   Section Experience (sx-) — طبقة التصميم الموحّدة للأقسام الديناميكية
   ---------------------------------------------------------------------
   مرجع بصري فقط: قالب لوحات الإدارة Mamix (Spruko) — التخطيط ولغة
   البطاقات والشارات والجداول. لا شيفرة ولا صور ولا خطوط منسوخة منه.

   - الألوان من توكنات المشروع فقط، والتدرّج اللوني الخفيف عبر
     color-mix(in srgb, <token> N%, transparent) أو rgba(var(--*-rgb), a).
   - ألوان المراحل القادمة من قاعدة البيانات تُمرَّر في --sx-tone (بيانات
     ديناميكية مستثناة من قاعدة التوكنات).
   - خصائص منطقية (inline/block) لتعمل RTL وLTR معاً.
   ===================================================================== */

.sx-shell {
    --sx-radius: var(--radius-md, 0.5rem);
    --sx-radius-tile: var(--radius-lg, 0.75rem);
    --sx-border-c: var(--border-color);
    --sx-border: 1px solid var(--sx-border-c);
    --sx-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.05);
    --sx-gap: var(--space-6);
    --sx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --sx-tone: var(--primary-color);

    display: flex;
    flex-direction: column;
    gap: var(--sx-gap);
    padding: var(--space-6);
    color: var(--text-primary);
    font-family: var(--font-family);
    min-width: 0;
}

/* مضمَّنة في صفحة أخرى (لوحة المراحل في صفحة القسم): المتغيّرات بلا حشوة الصفحة */
.sx-shell.sx-embed {
    --sx-gap: var(--space-3);
    padding: 0;
}

/* ── درجات الألوان (tones) ─────────────────────────────────────────── */
.sx-tone-primary   { --sx-tone: var(--primary-color); }
.sx-tone-secondary { --sx-tone: var(--secondary-color); }
.sx-tone-success   { --sx-tone: var(--success-color); }
.sx-tone-warning   { --sx-tone: var(--warning-color); }
.sx-tone-error     { --sx-tone: var(--error-color); }
.sx-tone-info      { --sx-tone: var(--info-color); }
.sx-tone-muted     { --sx-tone: var(--text-muted); }

/* ── ترويسة الصفحة: عنوان + مسار تنقّل + إجراءات ───────────────────── */
.sx-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.sx-pagehead-main { min-width: 0; }

.sx-pagehead-title {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 700;
    line-height: var(--line-height-tight, 1.25);
    color: var(--text-primary);
}

.sx-pagehead-sub {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-muted);
}

.sx-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-muted);
}

.sx-crumbs a {
    color: var(--primary-color);
    text-decoration: none;
}

.sx-crumbs a:hover { text-decoration: underline; }

.sx-crumbs li + li::before {
    content: "\00BB";
    margin-inline-end: var(--space-2);
    color: var(--text-muted);
}

[dir="rtl"] .sx-crumbs li + li::before { content: "\00AB"; }

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

.sx-pagehead-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── الشبكة (12 عموداً) ───────────────────────────────────────────── */
.sx-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sx-gap);
}

.sx-span-2  { grid-column: span 2; }
.sx-span-3  { grid-column: span 3; }
.sx-span-4  { grid-column: span 4; }
.sx-span-5  { grid-column: span 5; }
.sx-span-6  { grid-column: span 6; }
.sx-span-7  { grid-column: span 7; }
.sx-span-8  { grid-column: span 8; }
.sx-span-9  { grid-column: span 9; }
.sx-span-12 { grid-column: span 12; }

.sx-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sx-gap);
    min-width: 0;
}

.sx-stack > .sx-card { flex: 1 1 auto; }

.sx-subgrid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sx-gap);
}

/* ── البطاقة ─────────────────────────────────────────────────────── */
.sx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--background-primary);
    border: var(--sx-border);
    border-radius: var(--sx-radius);
    box-shadow: var(--sx-shadow);
}

.sx-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    min-block-size: 56px;
    padding: var(--space-3) var(--space-5);
    border-block-end: var(--sx-border);
}

.sx-card-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.sx-card-title .sx-count {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--background-secondary);
    color: var(--text-secondary);
    letter-spacing: 0;
}

.sx-card-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sx-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: 44px;
    padding: 0 var(--space-1);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 160ms var(--sx-ease);
}

.sx-card-link:hover,
.sx-card-link:focus-visible { color: var(--primary-color); }

.sx-card-link .material-icons { font-size: 16px; }

[dir="rtl"] .sx-card-link .sx-flip { transform: scaleX(-1); }

.sx-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-5);
}

.sx-card-body--flush { padding: 0; }
.sx-card-body--tight { padding: var(--space-3) var(--space-5); }

.sx-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-5);
    border-block-start: var(--sx-border);
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* قائمة منسدلة صغيرة بأسلوب «ترتيب حسب» داخل ترويسة البطاقة — مقاسها من عقد الحقول الموحّد */
.sx-select {
    min-block-size: var(--ds-field-height);
    padding: 0 var(--space-3);
    font-family: inherit;
    font-size: var(--ds-field-font-size);
    color: var(--text-secondary);
    background: var(--background-primary);
    border: var(--sx-border);
    border-radius: var(--ds-field-radius);
    cursor: pointer;
}

.sx-select:focus-visible { outline: 2px solid rgba(var(--primary-rgb), 0.35); outline-offset: 1px; }

/* ── مربع الأيقونة الملوّن ───────────────────────────────────────── */
.sx-ico {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--sx-radius-tile);
    background: color-mix(in srgb, var(--sx-tone) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--sx-tone) 16%, transparent);
    color: var(--sx-tone);
}

.sx-ico .material-icons { font-size: 22px; }

.sx-ico--sm { inline-size: 36px; block-size: 36px; border-radius: var(--radius-md); }
.sx-ico--sm .material-icons { font-size: 18px; }
.sx-ico--lg { inline-size: 56px; block-size: 56px; }
.sx-ico--lg .material-icons { font-size: 26px; }
.sx-ico--round { border-radius: 50%; }

/* ── مؤشر الاتجاه ↑↓ ─────────────────────────────────────────────── */
.sx-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    unicode-bidi: isolate;
    direction: ltr;
}

.sx-trend .material-icons { font-size: 14px; }
.sx-trend.up   { background: rgba(var(--success-rgb), 0.12); color: var(--success-color); }
.sx-trend.down { background: rgba(var(--error-rgb), 0.12);   color: var(--error-color); }
.sx-trend.flat { background: var(--background-secondary);     color: var(--text-muted); }

.sx-trend--text { background: none !important; padding: 0; }

/* ── الشارة الناعمة ──────────────────────────────────────────────── */
.sx-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-inline-size: 100%;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: color-mix(in srgb, var(--sx-tone) 13%, transparent);
    color: var(--sx-tone);
}

.sx-badge--dot::before {
    content: "";
    flex: none;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
}

.sx-badge--pill { border-radius: var(--radius-full); padding-inline: var(--space-3); }

.sx-badge--solid { background: var(--sx-tone); color: var(--color-white); }

/* ── الصورة الرمزية بالأحرف الأولى ───────────────────────────────── */
.sx-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 34px;
    block-size: 34px;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--sx-tone) 14%, transparent);
    color: var(--sx-tone);
    overflow: hidden;
}

.sx-avatar--sm { inline-size: 28px; block-size: 28px; font-size: 0.7rem; border-radius: var(--radius-base); }
.sx-avatar--lg { inline-size: 48px; block-size: 48px; font-size: 1rem; border-radius: var(--radius-lg); }
.sx-avatar--round { border-radius: 50%; }
.sx-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.sx-avatar-stack { display: inline-flex; align-items: center; }
.sx-avatar-stack > .sx-avatar { box-shadow: 0 0 0 2px var(--background-primary); }
.sx-avatar-stack > .sx-avatar + .sx-avatar { margin-inline-start: -8px; }

/* ── الأزرار — المقاس والحافة من عقد الأزرار الموحّد (--ds-btn-*) ── */
.sx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--ds-btn-height);
    padding: 0 var(--ds-btn-padding-inline);
    border: 1px solid transparent;
    border-radius: var(--ds-btn-radius);
    font-family: inherit;
    font-size: var(--ds-btn-font-size);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms var(--sx-ease), color 160ms var(--sx-ease), border-color 160ms var(--sx-ease);
}

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

.sx-btn--solid { background: var(--sx-tone); color: var(--color-white); }
.sx-btn--solid:hover { background: color-mix(in srgb, var(--sx-tone) 88%, var(--color-black)); color: var(--color-white); }

.sx-btn--soft { background: color-mix(in srgb, var(--sx-tone) 12%, transparent); color: var(--sx-tone); }
.sx-btn--soft:hover { background: var(--sx-tone); color: var(--color-white); }

.sx-btn--outline { background: var(--background-primary); border-color: var(--sx-border-c); color: var(--text-secondary); }
.sx-btn--outline:hover { border-color: var(--sx-tone); color: var(--sx-tone); }

.sx-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sx-btn:focus-visible { outline: 2px solid rgba(var(--primary-rgb), 0.4); outline-offset: 2px; }

/* زر أيقونة صغير — مساحة لمس 44px عبر ::after */
.sx-iconbtn {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 34px;
    block-size: 34px;
    border: 0;
    border-radius: var(--radius-base);
    background: color-mix(in srgb, var(--sx-tone) 12%, transparent);
    color: var(--sx-tone);
    cursor: pointer;
    transition: background-color 160ms var(--sx-ease), color 160ms var(--sx-ease);
}

.sx-iconbtn::after { content: ""; position: absolute; inset: -5px; }
.sx-iconbtn .material-icons { font-size: 17px; }
.sx-iconbtn:hover { background: var(--sx-tone); color: var(--color-white); }
.sx-iconbtn:disabled { opacity: 0.5; cursor: not-allowed; }
.sx-iconbtn:focus-visible { outline: 2px solid rgba(var(--primary-rgb), 0.4); outline-offset: 2px; }

/* ── بطاقات المؤشرات ─────────────────────────────────────────────── */

/* (أ) مربع أيقونة + خط صغير + رقم + وسم + اتجاه */
.sx-stat {
    gap: var(--space-4);
    padding: var(--space-5);
}

.sx-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

/* الغلاف هو ما يقيس Chart.js منه (responsive) — فلا يُفرض حجم على canvas نفسه فتتشوّه الخطوط */
.sx-stat-spark {
    position: relative;
    flex: none;
    inline-size: 110px;
    block-size: 44px;
}

.sx-stat-spark--wide { inline-size: 100%; }

.sx-stat-value {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.sx-stat-value small {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-inline-start: var(--space-1);
}

.sx-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sx-stat-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.sx-stat-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* (ب) رقم ووسم في جهة، ومربع الأيقونة في الجهة الأخرى */
.sx-stat--split .sx-stat-top { align-items: center; }
.sx-stat--split .sx-stat-label { display: block; margin-block-end: var(--space-1); }

/* (ج) مدمجة ومتوسّطة — للشبكات 2×2 */
.sx-stat--center {
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
}

.sx-stat--center .sx-stat-value { font-size: 1.45rem; }

/* (د) بطاقة بطولية مصمتة بلون الهوية */
.sx-hero {
    overflow: hidden;
    padding: var(--space-5);
    gap: var(--space-2);
    background: var(--primary-color);
    border-color: transparent;
    color: var(--color-white);
}

.sx-hero-label {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.9;
}

.sx-hero-value {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.sx-hero-note {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    opacity: 0.92;
}

.sx-hero-note .sx-trend { background: rgba(var(--success-rgb), 0.22); color: var(--color-white); }
.sx-hero-note .sx-trend.down { background: rgba(var(--error-rgb), 0.28); }

/* أعمدة خلفية من سلسلة حقيقية (لا بيانات وهمية) */
.sx-hero-bars {
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-end: 0;
    block-size: 58%;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    opacity: 0.28;
    pointer-events: none;
}

.sx-hero-bars span {
    flex: 1 1 0;
    min-inline-size: 2px;
    border-radius: calc(var(--radius-system, 8px) * 0.25) calc(var(--radius-system, 8px) * 0.25) 0 0;
    background: var(--color-white);
}

/* (هـ) لوحة التحليل: بطاقة بطولية تحتوي مربعات مؤشرات (خلايا لا بطاقات) */
.sx-analysis {
    overflow: hidden;
    padding: 0;
    background: var(--primary-color);
    border-color: transparent;
}

.sx-analysis-head {
    padding: var(--space-5) var(--space-5) var(--space-10);
    color: var(--color-white);
}

.sx-analysis-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sx-analysis-sub { margin: 0; font-size: 0.85rem; opacity: 0.9; }

.sx-analysis-cells {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: calc(var(--space-6) * -1) var(--space-4) var(--space-4);
    background: var(--background-primary);
    border-radius: var(--sx-radius);
    overflow: hidden;
}

.sx-analysis-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border-block-end: var(--sx-border);
}

.sx-analysis-cell:nth-child(odd) { border-inline-end: var(--sx-border); }
.sx-analysis-cell:nth-last-child(-n + 2) { border-block-end: 0; }

.sx-analysis-cell .sx-stat-value { font-size: 1.35rem; }

/* (و) شريط ترحيبي ناعم */
.sx-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--background-primary));
    border-color: color-mix(in srgb, var(--primary-color) 14%, transparent);
}

.sx-banner-title { margin: 0 0 var(--space-2); font-size: 1.3rem; font-weight: 800; color: var(--text-primary); }
.sx-banner-text { margin: 0 0 var(--space-4); font-size: 0.9rem; color: var(--text-secondary); max-inline-size: 46ch; }
.sx-banner-art { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-2); flex: none; }

/* مربعات الفئات/المراحل المختصرة */
.sx-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: var(--space-3);
}

.sx-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 44px;
    padding: var(--space-3) var(--space-2);
    border: 0;
    border-radius: var(--sx-radius);
    background: none;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    transition: background-color 160ms var(--sx-ease);
}

.sx-tile:hover { background: color-mix(in srgb, var(--sx-tone) 8%, transparent); }
.sx-tile-name { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-tile-count { font-size: 0.72rem; color: var(--text-muted); }

/* ── الجدول ──────────────────────────────────────────────────────── */
.sx-table-wrap { overflow-x: auto; }

.sx-table {
    inline-size: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.sx-table thead th {
    padding: var(--space-3) var(--space-4);
    background: var(--background-secondary);
    border-block-end: var(--sx-border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: start;
    white-space: nowrap;
}

.sx-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-block-end: var(--sx-border);
    vertical-align: middle;
}

.sx-table tbody tr:last-child td { border-block-end: 0; }
.sx-table tbody tr { transition: background-color 150ms var(--sx-ease); }
.sx-table tbody tr:hover { background: rgba(var(--primary-rgb), 0.035); }
.sx-table tbody tr.is-clickable { cursor: pointer; }
.sx-table .sx-end { text-align: end; }
.sx-table .sx-center { text-align: center; }

.sx-cell-main { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.sx-cell-text { display: flex; flex-direction: column; min-width: 0; }

.sx-cell-title {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 28ch;
}

.sx-cell-sub { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }

.sx-num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; }
.sx-strong { font-weight: 700; }
.sx-muted { color: var(--text-muted); }

.sx-actions { display: inline-flex; gap: var(--space-2); }

/* ترقيم الصفحات */
.sx-pager { display: inline-flex; align-items: center; gap: var(--space-1); }

.sx-pager button {
    min-inline-size: 36px;
    min-block-size: 36px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-base);
    background: none;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.sx-pager button[aria-current="page"] { background: var(--primary-color); color: var(--color-white); }
.sx-pager button:disabled { opacity: 0.45; cursor: not-allowed; }
.sx-pager button:not([aria-current="page"]):not(:disabled):hover { background: rgba(var(--primary-rgb), 0.08); color: var(--primary-color); }

/* ── القوائم ─────────────────────────────────────────────────────── */
.sx-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.sx-li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: 44px;
    padding-block: var(--space-3);
    border-block-end: 1px dashed var(--sx-border-c);
}

.sx-li:last-child { border-block-end: 0; }

.sx-li.is-clickable {
    margin-inline: calc(var(--space-2) * -1);
    padding-inline: var(--space-2);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: background-color 150ms var(--sx-ease);
}

.sx-li.is-clickable:hover { background: rgba(var(--primary-rgb), 0.045); }

.sx-li-main { flex: 1 1 auto; min-width: 0; }

.sx-li-title {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sx-li-sub { display: block; font-size: 0.75rem; color: var(--text-muted); }

.sx-li-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: none;
    font-size: 0.8rem;
}

.sx-li-dot {
    flex: none;
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    background: var(--sx-tone);
}

/* ── الخط الزمني ─────────────────────────────────────────────────── */
.sx-timeline { position: relative; margin: 0; padding: 0; list-style: none; }

.sx-tl-item {
    position: relative;
    padding-inline-start: var(--space-6);
    padding-block-end: var(--space-4);
}

.sx-tl-item::before {
    content: "";
    position: absolute;
    inset-inline-start: 6px;
    inset-block: 18px 0;
    border-inline-start: 1px solid var(--sx-border-c);
}

.sx-tl-item:last-child { padding-block-end: 0; }
.sx-tl-item:last-child::before { display: none; }

.sx-tl-dot {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 4px;
    inline-size: 13px;
    block-size: 13px;
    border-radius: 50%;
    border: 2px solid var(--sx-tone);
    background: var(--background-primary);
}

.sx-tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.sx-tl-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.sx-tl-time { flex: none; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.sx-tl-text { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.sx-tl-item.is-clickable { cursor: pointer; }
.sx-tl-item.is-clickable:hover .sx-tl-title { color: var(--primary-color); }

/* ── شريط التقدّم ───────────────────────────────────────────────── */
.sx-progress {
    flex: 1 1 auto;
    min-inline-size: 56px;
    block-size: 6px;
    border-radius: var(--radius-full);
    background: var(--background-secondary);
    overflow: hidden;
}

.sx-progress > span {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background: var(--sx-tone);
}

.sx-progress-row { display: flex; align-items: center; gap: var(--space-2); }

.sx-meter { display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-2); }
.sx-meter-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 0.8rem; }
.sx-meter-head span:first-child { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-meter.is-clickable { cursor: pointer; border-radius: var(--radius-base); padding-inline: var(--space-2); margin-inline: calc(var(--space-2) * -1); }
.sx-meter.is-clickable:hover { background: rgba(var(--primary-rgb), 0.045); }

/* ── وسيلة إيضاح المخططات ────────────────────────────────────────── */
.sx-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.sx-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sx-legend i { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--sx-tone); }

.sx-legend--rows { flex-direction: column; align-items: stretch; gap: 0; }
.sx-legend--rows li {
    justify-content: space-between;
    padding-block: var(--space-2);
    border-block-end: 1px dashed var(--sx-border-c);
}
.sx-legend--rows li:last-child { border-block-end: 0; }
.sx-legend--rows .sx-legend-name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sx-legend--rows .sx-legend-val { font-weight: 700; color: var(--text-primary); }

/* ── المخططات ───────────────────────────────────────────────────── */
.sx-chart { position: relative; inline-size: 100%; block-size: 280px; }
.sx-chart--sm { block-size: 210px; }
.sx-chart--lg { block-size: 330px; }
.sx-chart canvas { max-inline-size: 100%; }

.sx-gauge { position: relative; inline-size: 100%; block-size: 170px; }

.sx-gauge-center {
    position: absolute;
    inset-inline: 0;
    inset-block-end: var(--space-2);
    text-align: center;
    pointer-events: none;
}

.sx-gauge-center strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.sx-gauge-center span { font-size: 0.78rem; color: var(--text-muted); }

.sx-ring { position: relative; inline-size: 100%; max-inline-size: 220px; block-size: 220px; margin-inline: auto; }

.sx-ring-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    pointer-events: none;
}

.sx-ring-center strong { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); }
.sx-ring-center span { font-size: 0.75rem; color: var(--text-muted); }

/* ── تبويبات مقطعية صغيرة ───────────────────────────────────────── */
.sx-seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--radius-md);
    background: var(--background-secondary);
}

.sx-seg button {
    min-block-size: 38px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-base);
    background: none;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 160ms var(--sx-ease), color 160ms var(--sx-ease);
}

.sx-seg button[aria-pressed="true"] { background: var(--background-primary); color: var(--primary-color); box-shadow: var(--shadow-sm); }

/* ── الرقائق (chips) ─────────────────────────────────────────────── */
.sx-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* ── لوحة المراحل (كانبان) ──────────────────────────────────────── */
.sx-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 1fr);
    gap: var(--space-4);
    overflow-x: auto;
    padding-block-end: var(--space-2);
    scrollbar-width: thin;
}

.sx-kcol {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    border-radius: var(--sx-radius);
    transition: background-color 150ms var(--sx-ease), box-shadow 150ms var(--sx-ease);
}

.sx-kcol.drag-over { background: color-mix(in srgb, var(--sx-tone) 7%, transparent); box-shadow: 0 0 0 1px var(--sx-tone); }
.sx-kcol.drag-over-blocked { background: rgba(var(--error-rgb), 0.06); box-shadow: 0 0 0 1px var(--error-color); }
.sx-kcol.drop-disabled { opacity: 0.55; }

.sx-kcol-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--background-primary);
    border: var(--sx-border);
    border-radius: var(--sx-radius);
}

.sx-kcol-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sx-kcol-name::before {
    content: "";
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--sx-tone);
}

.sx-kcol-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sx-kcol-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.sx-kcol-total { font-size: 0.85rem; font-weight: 700; color: var(--sx-tone); font-variant-numeric: tabular-nums; }
.sx-kcol-items { display: flex; flex-direction: column; gap: var(--space-2); }

.sx-kcard {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--background-primary);
    border: 1px solid color-mix(in srgb, var(--sx-tone) 30%, var(--sx-border-c));
    border-radius: var(--sx-radius);
    transition: box-shadow 160ms var(--sx-ease), transform 160ms var(--sx-ease);
}

.sx-kcard:hover { box-shadow: var(--shadow-md); }
.sx-kcard.draggable { cursor: grab; }
.sx-kcard.dragging { opacity: 0.5; }
.sx-kcard.moving { opacity: 0.7; }
.sx-kcard.sla-overdue,
.sx-kcard.sla-escalated { border-color: var(--error-color); }
.sx-kcard.sla-warning { border-color: var(--warning-color); }

.sx-kcard-top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sx-kcard-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.sx-kcard-title:hover { color: var(--primary-color); }
.sx-kcard-amount { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sx-kcard-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; font-size: 0.75rem; color: var(--text-muted); }
.sx-kcard-flags { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }

.sx-kadd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    inline-size: 100%;
    min-block-size: 36px;
    border: 1px dashed color-mix(in srgb, var(--sx-tone) 45%, var(--sx-border-c));
    border-radius: var(--radius-base);
    background: color-mix(in srgb, var(--sx-tone) 6%, transparent);
    color: var(--sx-tone);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.sx-kadd:disabled { opacity: 0.55; cursor: progress; }

.sx-kmore {
    min-block-size: 40px;
    border: 0;
    border-radius: var(--radius-base);
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-color);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.sx-khint {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ── قسم بلا إطار بطاقة (لوحة المراحل: الأعمدة بطاقات على خلفية الصفحة — لا بطاقة داخل بطاقة) ── */
.sx-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.sx-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    min-block-size: 44px;
}

/* خانة مرحلة داخل بطاقة: تعبئة خفيفة بلا حدود */
.sx-stage-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--sx-radius);
    background: var(--background-secondary);
}

/* ── التركيز بلوحة المفاتيح على الصفوف والعناصر القابلة للنقر ───────── */
.sx-shell [role="link"]:focus-visible,
.sx-shell .is-clickable:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), 0.45);
    outline-offset: 2px;
}

.sx-shell tr[role="link"]:focus-visible { outline-offset: -2px; }

/* ── مساحات لمس 44px للأزرار المدمجة (الحجم المرئي أصغر، والمساحة الفعلية عبر ::after) ── */
.sx-pager button,
.sx-seg button,
.sx-kadd,
.sx-kmore {
    position: relative;
}

.sx-pager button::after { content: ""; position: absolute; inset: -4px; }
.sx-seg button::after { content: ""; position: absolute; inset: -3px; }
.sx-kadd::after,
.sx-kmore::after { content: ""; position: absolute; inset: -4px 0; }

/* ── تنبيه مضمَّن ────────────────────────────────────────────────── */
.sx-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--sx-radius);
    background: color-mix(in srgb, var(--sx-tone) 9%, var(--background-primary));
    border: 1px solid color-mix(in srgb, var(--sx-tone) 30%, transparent);
    color: var(--text-primary);
    font-size: 0.88rem;
}

.sx-alert > .material-icons { color: var(--sx-tone); }

/* ── الحالات: تحميل / فراغ / خطأ ────────────────────────────────── */
.sx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 120px;
    padding: var(--space-5);
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sx-empty .material-icons { font-size: 32px; opacity: 0.55; }

.sx-loading {
    display: grid;
    place-items: center;
    min-block-size: 50vh;
}

/* ── مؤشرات صغيرة داخل البطاقة ─────────────────────────────────── */
.sx-minis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
}

.sx-mini {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--background-secondary);
}

.sx-mini-label { font-size: 0.75rem; color: var(--text-muted); }
.sx-mini-value { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* =====================================================================
   جلد شاشات الأقسام القائمة — يُفعَّل بالصنف html.sx-on (FeatureFlags:SectionExperience)
   يغيّر المظهر فقط (حدود، زوايا، ظلال، ألوان خفيفة، طباعة) ولا يمسّ التخطيط أو
   السلوك: الأعمدة الملتصقة والتمرير الأفقي والسحب والإفلات تبقى كما هي.
   ===================================================================== */

/* ── قائمة السجلات /m/{key} ─────────────────────────────────────────── */
html.sx-on .module-records-toolbar {
    background: var(--background-secondary);
    padding-block: var(--space-3) var(--space-2);
}

html.sx-on .module-records-toolbar h3 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 700;
    color: var(--text-primary);
}

html.sx-on .module-records-toolbar h3 > .material-icons,
html.sx-on .module-records-toolbar h3 > i.bi {
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-lg);
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.14);
    color: var(--primary-color);
    font-size: 22px;
}

html.sx-on .module-records-container > .card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.05) !important;
}

html.sx-on .module-records-container .btn {
    border-radius: var(--radius-base);
    font-weight: 600;
}

html.sx-on .module-records-actions .btn-outline-secondary,
html.sx-on .module-records-container > .card .btn-outline-secondary,
html.sx-on .module-records-container > .card .btn-outline-dark,
html.sx-on .mrl-foot .btn-outline-secondary {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: transparent;
    color: var(--primary-color);
}

html.sx-on .module-records-actions .btn-outline-secondary:hover,
html.sx-on .module-records-container > .card .btn-outline-secondary:hover,
html.sx-on .module-records-container > .card .btn-outline-dark:hover,
html.sx-on .mrl-foot .btn-outline-secondary:not(:disabled):hover {
    background: var(--primary-color);
    color: var(--color-white);
}

html.sx-on .module-table-wrap > .table {
    --bs-table-striped-bg: transparent;
    --bs-table-bg: var(--background-primary);
    font-size: 0.86rem;
}

html.sx-on .module-table-wrap > .table > thead > tr > th {
    --bs-table-bg: var(--background-secondary);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
}

html.sx-on .module-table-wrap > .table > tbody > tr > td {
    padding: var(--space-3) var(--space-4);
    border-bottom-color: var(--border-color);
}

html.sx-on .module-table-wrap > .table > tbody > tr:hover > td {
    --bs-table-bg-state: rgba(var(--primary-rgb), 0.035);
}

html.sx-on .module-table-wrap td .btn-sm {
    border-color: transparent;
    border-radius: var(--radius-base);
    font-weight: 600;
}

html.sx-on .module-table-wrap td .btn-outline-info      { background: rgba(var(--info-rgb), 0.12);    color: var(--info-color); }
html.sx-on .module-table-wrap td .btn-outline-primary   { background: rgba(var(--primary-rgb), 0.12); color: var(--primary-color); }
html.sx-on .module-table-wrap td .btn-outline-success   { background: rgba(var(--success-rgb), 0.12); color: var(--success-color); }
html.sx-on .module-table-wrap td .btn-outline-secondary { background: var(--background-secondary);    color: var(--text-secondary); }
html.sx-on .module-table-wrap td .btn-outline-info:hover      { background: var(--info-color);    color: var(--color-white); }
html.sx-on .module-table-wrap td .btn-outline-primary:hover   { background: var(--primary-color); color: var(--color-white); }
html.sx-on .module-table-wrap td .btn-outline-success:hover   { background: var(--success-color); color: var(--color-white); }
html.sx-on .module-table-wrap td .btn-outline-secondary:hover { background: var(--text-secondary); color: var(--color-white); }

/* شارة الحالة: نبقي النصّ الداكن (قرار تباين AA في module-records-list.css) ونضيف نقطة النغمة */
html.sx-on .mrl-status {
    gap: var(--space-1);
    min-height: 24px;
    padding: 2px var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

html.sx-on .mrl-status::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--text-muted);
}

html.sx-on .mrl-status--open::before    { background: var(--info-color); }
html.sx-on .mrl-status--busy::before    { background: var(--warning-color); }
html.sx-on .mrl-status--done::before    { background: var(--success-color); }
html.sx-on .mrl-status--stopped::before { background: var(--error-color); }

/* ── لوحة المراحل /m/{key}/pipeline — نمط لوحة الصفقات ──────────────── */
html.sx-on .pipeline-col {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

html.sx-on .pipeline-col.drag-over {
    background: color-mix(in srgb, var(--stage-color) 7%, transparent);
    outline: 1px dashed var(--stage-color);
    outline-offset: 4px;
}

html.sx-on .pipeline-col-header {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.05);
}

html.sx-on .pipeline-col-header .stage-color-dot {
    inline-size: 8px;
    block-size: 8px;
    box-shadow: none;
}

html.sx-on .pipeline-col-count {
    min-inline-size: 26px;
    min-block-size: 22px;
    border: 0;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--stage-color) 13%, transparent);
    color: var(--stage-color);
}

html.sx-on .pipeline-stage-total {
    color: var(--stage-color);
    font-weight: 700;
}

html.sx-on .pipeline-card {
    border: 1px solid color-mix(in srgb, var(--stage-color) 30%, var(--border-color));
    box-shadow: none;
}

html.sx-on .pipeline-card::before { display: none; }

/* حالات المهلة والقفل تبقى ظاهرة: نوعية (0,3,1) تغلب حدّ البطاقة أعلاه */
html.sx-on .pipeline-card.sla-warning { border-color: var(--warning-color); }
html.sx-on .pipeline-card.sla-overdue,
html.sx-on .pipeline-card.sla-escalated { border-color: var(--error-color); }
html.sx-on .pipeline-col.stage-locked .pipeline-col-header {
    border-style: dashed;
    border-color: var(--warning-color);
}
html.sx-on .pipeline-card:hover { box-shadow: var(--shadow-md); }
html.sx-on .pipeline-amount { color: var(--text-primary); }

/* ── مكتب الدعم /m/{key}/support-desk ───────────────────────────────── */
html.sx-on .sd-stat {
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    box-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.05);
}

html.sx-on .sd-col {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

html.sx-on .sd-col.drag-over {
    background: rgba(var(--primary-rgb), 0.08);
    outline: 1px dashed var(--primary-color);
    outline-offset: 4px;
}

html.sx-on .sd-col.stage-locked .sd-col-header {
    border-style: dashed;
    border-color: var(--warning-color);
}

/* ── مساحة عمل السجل /m/{key}/{id} ──────────────────────────────────── */
html.sx-on .mwk-shell {
    --radius: var(--radius-md, 8px);
    --radius-sm: var(--radius-md, 8px);
    --shadow: 0 1px 2px rgba(var(--primary-rgb), 0.05);
    gap: var(--space-5);
}

html.sx-on .mwk-avatar {
    inline-size: 52px;
    block-size: 52px;
    border-radius: var(--radius-lg);
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.14);
}

html.sx-on .mwk-title { font-size: var(--font-size-xl, 1.25rem); }

html.sx-on .mwk-metrics {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-4);
}

html.sx-on .mwk-metric {
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow);
}

html.sx-on .mwk-metric-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    color: var(--text-muted);
}

html.sx-on .mwk-metric-label::before {
    content: "";
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}

html.sx-on .mwk-metric:nth-child(6n + 2) .mwk-metric-label::before { background: var(--secondary-color); }
html.sx-on .mwk-metric:nth-child(6n + 3) .mwk-metric-label::before { background: var(--success-color); }
html.sx-on .mwk-metric:nth-child(6n + 4) .mwk-metric-label::before { background: var(--warning-color); }
html.sx-on .mwk-metric:nth-child(6n + 5) .mwk-metric-label::before { background: var(--info-color); }
html.sx-on .mwk-metric:nth-child(6n) .mwk-metric-label::before     { background: var(--error-color); }

html.sx-on .mwk-metric-value { font-size: 1.3rem; }

/* الشريط بخلفية ثانوية كي يبرز التبويب النشط (خلفية أساسية) فوقه — انظر module-workspace.css. */
html.sx-on .mwk-tabs {
    padding: var(--space-1) var(--space-2);
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

html.sx-on .mwk-fieldsection {
    padding-inline-start: 0;
    border-inline-start: 0;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

html.sx-on .mwk-fieldsection::before {
    content: "";
    flex: none;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}

/* ── لوحة التقارير وتقرير القسم ─────────────────────────────────────── */
html.sx-on .mrp-shell {
    --mrp-radius: var(--radius-md, 8px);
    --mrp-radius-sm: var(--radius-md, 8px);
    --mrp-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.05);
}

html.sx-on .mrp-kpi::before { display: none; }

html.sx-on .msa-shell {
    --radius: var(--radius-md, 8px);
    --radius-sm: var(--radius-md, 8px);
    --shadow: 0 1px 2px rgba(var(--primary-rgb), 0.05);
}

/* ── أيقونات Phosphor duotone (SxIcon) ─────────────────────────────── */
.sx-icon {
    display: inline-block;
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    vertical-align: middle;
}

.sx-icon--sm { inline-size: 1rem; block-size: 1rem; }

/* ── ترويسة التطبيق بنمط Mamix: دوائر بيضاء بحدّ خفيف وأيقونات duotone بلون هادئ ──
   !important فقط حيث يفرضه أصلاً ‎.quick-add-btn‎ (CSS معزول) وقواعد الجوال (زوايا 12px). */
html.sx-on .header-icon-btn,
html.sx-on .language-icon-btn {
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    background: var(--background-primary) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    transition: background-color 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
                color 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.sx-on .header-icon-btn .sx-icon,
html.sx-on .language-icon-btn .sx-icon {
    inline-size: 20px;
    block-size: 20px;
}

html.sx-on .header-icon-btn:hover:not(:disabled),
html.sx-on .language-icon-btn:hover {
    transform: none;
    background: rgba(var(--primary-rgb), 0.08) !important;
    border-color: rgba(var(--primary-rgb), 0.25) !important;
    color: var(--primary-color) !important;
}

/* زرّ الإضافة السريعة: الإجراء الأساسي — مصمت بلون الهوية بلا تدرّج */
html.sx-on .header-icon-btn.quick-add-btn {
    border-color: transparent !important;
    background: var(--primary-color) !important;
    color: var(--color-white) !important;
}

html.sx-on .header-icon-btn.quick-add-btn:hover,
html.sx-on .header-icon-btn.quick-add-btn:focus {
    transform: none;
    background: var(--primary-dark) !important;
    color: var(--color-white) !important;
}

html.sx-on .header-icon-btn .icon-badge {
    inset-block-start: -4px;
    inset-inline-end: -4px;
    min-inline-size: 18px;
    padding: 2px 5px;
    border: 2px solid var(--background-primary);
    background: var(--error-color);
    color: var(--color-white);
    font-weight: 700;
}

/* داخل قائمة «المزيد» المطويّة تبقى الأدوات صفوفاً لا دوائر */
html.sx-on .header-tools.open .header-icon-btn,
html.sx-on .header-tools.open .language-icon-btn {
    border-color: transparent !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
}

html.sx-on .header-tools.open .header-icon-btn:hover:not(:disabled),
html.sx-on .header-tools.open .language-icon-btn:hover {
    background: rgba(var(--primary-rgb), 0.06) !important;
}

html.sx-on .header-global-search > .sx-icon {
    inline-size: 18px;
    block-size: 18px;
    color: var(--text-muted);
}

html.sx-on .user-avatar {
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.16);
}

html.sx-on .user-avatar .sx-icon {
    inline-size: 24px;
    block-size: 24px;
    color: var(--primary-color);
}

html.sx-on .sx-icon.dropdown-arrow {
    inline-size: 14px;
    block-size: 14px;
    color: var(--text-muted);
    transition: transform 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.sx-on .sx-icon.dropdown-arrow.is-open { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    html.sx-on .header-icon-btn,
    html.sx-on .language-icon-btn,
    html.sx-on .sx-icon.dropdown-arrow { transition: none; }
}

/* ── مواءمة لوحة «أعمالي» (MyWorkPanel من crm-dashboard.css) داخل الطبقة ── */
.sx-personal .crmd-panel {
    block-size: 100%;
    border: var(--sx-border);
    border-radius: var(--sx-radius);
    box-shadow: var(--sx-shadow);
    background: var(--background-primary);
}

.sx-personal .panel-header {
    min-block-size: 56px;
    padding: var(--space-3) var(--space-5);
    border-block-end: var(--sx-border);
}

.sx-personal .panel-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.sx-personal .panel-body { padding: var(--space-4) var(--space-5); }

/* ── الاستجابة ───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .sx-span-2, .sx-span-3, .sx-span-4 { grid-column: span 6; }
    .sx-span-5, .sx-span-6, .sx-span-7, .sx-span-8, .sx-span-9 { grid-column: span 12; }
}

@media (max-width: 767px) {
    .sx-shell { padding: var(--space-4); --sx-gap: var(--space-4); }
    .sx-grid > [class*="sx-span-"] { grid-column: span 12; }
    .sx-subgrid-2 { grid-template-columns: minmax(0, 1fr); }
    .sx-pagehead { align-items: flex-start; }
    .sx-banner { flex-direction: column; align-items: flex-start; }
    .sx-banner-art { display: none; }
    .sx-stat-value { font-size: 1.4rem; }
    .sx-hero-value { font-size: 1.6rem; }
    .sx-board { grid-auto-columns: minmax(78vw, 1fr); }
}

/* ── حماية من قواعد الجوال العامة ─────────────────────────────────────
   all-pages-mobile.css (≤767px) وcomprehensive-mobile.css (≤991px) تفرض بـ !important
   على كل canvas ارتفاع 250px، وعلى كل button حشوة 12–14px×20px وارتفاع 48px، وعلى h1/h2
   أحجاماً كبيرة — بنوعية (0,9,1) للأزرار. نستردّ مقاسات الطبقة بـ :is(#sx-boost): الوسيط
   المعرّف لا يطابق شيئاً لكنه يرفع النوعية إلى (1,x,x) فتغلب دون تكرار الأصناف. */
@media (max-width: 1023px) {
    .sx-shell :is(.sx-stat-spark, #sx-boost) canvas {
        height: 100% !important;
        max-height: none !important;
        margin-bottom: 0 !important;
    }

    .sx-shell :is(.sx-chart, .sx-ring, .sx-gauge, #sx-boost) canvas {
        height: 100% !important;
        max-height: none !important;
        margin-bottom: 0 !important;
    }

    .sx-shell button:is(.sx-iconbtn, #sx-boost) {
        display: inline-grid !important;
        min-height: 34px !important;
        min-width: 34px !important;
        padding: 0 !important;
        border-radius: var(--radius-base) !important;
        font-size: inherit !important;
    }

    .sx-shell :is(.sx-seg, #sx-boost) > button {
        display: inline-flex !important;
        min-height: 38px !important;
        padding: 0 var(--space-3) !important;
        border-radius: var(--radius-base) !important;
        font-size: 0.78rem !important;
    }

    .sx-shell :is(.sx-pager, #sx-boost) > button {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: 0 var(--space-2) !important;
        border-radius: var(--radius-base) !important;
        font-size: 0.8rem !important;
    }

    .sx-shell button:is(.sx-tile, #sx-boost) {
        display: flex !important;
        flex-direction: column !important;
        min-height: 44px !important;
        padding: var(--space-3) var(--space-2) !important;
        border-radius: var(--sx-radius) !important;
        font-size: 0.78rem !important;
    }

    .sx-shell button:is(.sx-kadd, .sx-kmore, #sx-boost) {
        min-height: 40px !important;
        padding: 0 var(--space-3) !important;
        border-radius: var(--radius-base) !important;
        font-size: 0.8rem !important;
    }

    .sx-shell button:is(.sx-btn, #sx-boost) {
        min-height: var(--ds-btn-height-mobile) !important;
        padding: 0 var(--ds-btn-padding-inline) !important;
        border-radius: var(--ds-btn-radius) !important;
        font-size: var(--ds-btn-font-size) !important;
    }

    .sx-shell h1:is(.sx-pagehead-title, #sx-boost) { font-size: 1.15rem !important; }
    .sx-shell h2:is(.sx-card-title, #sx-boost) { font-size: 0.9rem !important; }
    .sx-shell h2:is(.sx-analysis-title, #sx-boost) { font-size: 1rem !important; }
    .sx-shell h2:is(.sx-banner-title, #sx-boost) { font-size: 1.15rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .sx-shell *,
    .sx-shell *::before,
    .sx-shell *::after {
        transition: none !important;
        animation: none !important;
    }
}