/* ============================================================================
   COMPONENTS — مكوّنات النظام المشتركة
   ----------------------------------------------------------------------------
   • تُحمَّل بعد ui.css. مبنية بالكامل على متغيّرات tokens.css.
   • الهدف: تعريف واحد لكل مكوّن بدل تكراره في <style> داخل كل قالب.
   • أسماء الفئات متوافقة رجعياً مع القوالب القائمة (.kpi-card / .kpi-value …)
     فيكفي حذف التعريف المحلي من القالب ليرث الشكل الموحّد.
   ============================================================================ */

/* ══ 1. ترويسة الصفحة ═════════════════════════════════════════════════════ */

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.page-head__title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--text);
}

.page-head__title > i, .page-head__title > .bi { color: var(--accent); font-size: 1.1em; }

.page-head__sub {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.page-head__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ══ 2. بطاقة المؤشّر (KPI) ════════════════════════════════════════════════ */
/* الاستخدام: <div class="kpi-card kpi-bg-blue"> … متوافق مع القوالب القائمة */

.kpi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    height: 100%;
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    color: var(--text);
    overflow: hidden;
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

/* شريط لوني رفيع على الحافة المبدئية (يمين في RTL) */
.kpi-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--kpi-tone, var(--accent));
}

.kpi-card.is-clickable { cursor: pointer; }

.kpi-card.is-clickable:hover {
    border-color: var(--border-strong);
    box-shadow: var(--sh-md);
}

.kpi-card.is-active {
    border-color: var(--kpi-tone, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kpi-tone, var(--accent)) 15%, transparent);
}

.kpi-label {
    order: 1;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.35;
}

.kpi-value {
    order: 2;
    font-size: var(--fs-3xl);
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums lining-nums;
}

/* أي .kpi-label بعد القيمة = سطر فرعي (اتجاه/تفصيل) */
.kpi-value ~ .kpi-label {
    order: 3;
    font-size: var(--fs-xs);
    color: var(--text-subtle);
    margin-top: 0;
}

/* الأيقونة: رقاقة هادئة أعلى الحافة المقابلة — بدل الأيقونة العملاقة الشبحية */
.kpi-icon {
    position: absolute;
    /* لا تُضف left/right صريحة هنا: في RTL يترجم inset-inline-end إلى left،
       وأي `left: auto` لاحقة تُلغيه فترتدّ الأيقونة لموضعها الساكن (يمين
       البطاقة) فتصطدم بالنص العربي المحاذى لليمين — كان هذا يحدث فعلاً. */
    inset-inline-end: var(--sp-4);
    top: var(--sp-4);
    transform: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: var(--kpi-soft, var(--accent-soft));
    color: var(--kpi-tone, var(--accent));
    font-size: 1rem;
    opacity: 1;
}

/* الأيقونة مطلقة الموضع، فنحجز مساحتها في تدفّق النص وإلّا امتدّ النص تحتها
   (كان يحدث فعلاً في البطاقات الضيّقة: 6 بطاقات في صف). */
.kpi-card:has(> .kpi-icon) .kpi-label,
.kpi-card:has(> .kpi-icon) .kpi-value,
.kpi-card:has(> .kpi-icon) .kpi-delta {
    padding-inline-end: calc(32px + var(--sp-3));
}

/* السطر الفرعي (تسمية بعد القيمة) يقع أسفل الأيقونة فلا يحتاج الحجز */
.kpi-card:has(> .kpi-icon) .kpi-value ~ .kpi-label {
    padding-inline-end: 0;
}

/* الأنغام — تحلّ محل التدرّجات الملوّنة القديمة */
.kpi-bg-blue   { --kpi-tone: var(--info);   --kpi-soft: var(--info-soft); }
.kpi-bg-green  { --kpi-tone: var(--ok);     --kpi-soft: var(--ok-soft); }
.kpi-bg-red    { --kpi-tone: var(--danger); --kpi-soft: var(--danger-soft); }
.kpi-bg-orange { --kpi-tone: var(--warn);   --kpi-soft: var(--warn-soft); }
.kpi-bg-teal   { --kpi-tone: var(--accent); --kpi-soft: var(--accent-soft); }
.kpi-bg-purple { --kpi-tone: #7c5cbf;       --kpi-soft: rgba(124, 92, 191, .10); }
.kpi-bg-gray   { --kpi-tone: var(--text-muted); --kpi-soft: var(--surface-3); }

/* أنغام دلالية بأسماء واضحة (للاستخدام الجديد) */
.kpi-card[data-tone="ok"]      { --kpi-tone: var(--ok);     --kpi-soft: var(--ok-soft); }
.kpi-card[data-tone="warn"]    { --kpi-tone: var(--warn);   --kpi-soft: var(--warn-soft); }
.kpi-card[data-tone="danger"]  { --kpi-tone: var(--danger); --kpi-soft: var(--danger-soft); }
.kpi-card[data-tone="info"]    { --kpi-tone: var(--info);   --kpi-soft: var(--info-soft); }
.kpi-card[data-tone="neutral"] { --kpi-tone: var(--text-muted); --kpi-soft: var(--surface-3); }

/* مؤشّر الاتجاه */
.kpi-delta {
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--fs-xs);
    font-weight: 500;
}

.kpi-delta.is-up   { color: var(--ok-text); }
.kpi-delta.is-down { color: var(--danger-text); }
.kpi-delta.is-flat { color: var(--text-muted); }

/* شبكة المؤشّرات — بديل شبكات row/col المخصّصة */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

@media (max-width: 575.98px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
    .kpi-card { padding: var(--sp-3); }
    .kpi-value { font-size: var(--fs-2xl); }
    .kpi-icon { width: 26px; height: 26px; font-size: .8rem; top: var(--sp-3); inset-inline-end: var(--sp-3); }

    .kpi-card:has(> .kpi-icon) .kpi-label,
    .kpi-card:has(> .kpi-icon) .kpi-value,
    .kpi-card:has(> .kpi-icon) .kpi-delta {
        padding-inline-end: calc(26px + var(--sp-2));
    }
}

/* ══ 3. لوحة البيانات (بطاقة + شريط أدوات + جدول) ═════════════════════════ */

.data-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    overflow: hidden;
    margin-bottom: var(--sp-5);
}

.data-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.data-panel__title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
}

.data-panel__title .count {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface-3);
    border-radius: var(--r-pill);
    padding: 1px 8px;
}

.data-panel__tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* شريط الفلاتر */
.filter-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.filter-bar .form-label { margin-bottom: 2px; font-size: var(--fs-xs); }

.filter-field { display: flex; flex-direction: column; min-width: 140px; }

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

/* حاوية الجدول: تمرير أفقي محكوم + رأس ثابت */
.data-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: var(--data-scroll-h, 65vh);
    overscroll-behavior: contain;
}

.data-scroll > .table { margin-bottom: 0; }

.data-scroll > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--surface-3);
    box-shadow: inset 0 -1px 0 var(--border-strong);
}

/* ══ 4. حالة الفراغ ═══════════════════════════════════════════════════════ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-10) var(--sp-5);
    text-align: center;
    color: var(--text-muted);
}

.empty-state__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--sp-1);
    border-radius: var(--r-lg);
    background: var(--surface-3);
    color: var(--text-subtle);
    font-size: 1.4rem;
}

.empty-state__title { font-size: var(--fs-md); font-weight: 600; color: var(--text-2); margin: 0; }

.empty-state__text { font-size: var(--fs-sm); margin: 0; max-width: 42ch; }

/* ══ 5. الهياكل العظمية (Skeleton) — بديل الـ spinner ══════════════════════ */

.sk {
    position: relative;
    overflow: hidden;
    background: var(--surface-3);
    border-radius: var(--r-sm);
}

.sk::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--surface) 70%, transparent),
        transparent);
    animation: sk-shimmer 1.4s infinite;
}

/* RTL: الوميض يمرّ من اليمين لليسار */
[dir="rtl"] .sk::after { transform: translateX(-100%); animation-name: sk-shimmer-rtl; }

@keyframes sk-shimmer     { 100% { transform: translateX(-100%); } }
@keyframes sk-shimmer-rtl { 100% { transform: translateX(100%); } }

.sk-text  { height: .8em; margin: .35em 0; }
.sk-title { height: 1.4em; width: 42%; margin-bottom: .6em; }
.sk-line-60 { width: 60%; }
.sk-line-80 { width: 80%; }
.sk-kpi   { height: 92px; border-radius: var(--r-lg); }
.sk-cell  { height: 1em; }

/* صفوف جدول وهمية أثناء التحميل */
.sk-table td { padding: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
    .sk::after { animation: none; }
}

/* ══ 6. التنبيهات المنبثقة (Toast) ════════════════════════════════════════ */

.toast-stack {
    position: fixed;
    top: var(--sp-4);
    inset-inline-start: var(--sp-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: min(400px, calc(100vw - 2 * var(--sp-4)));
    pointer-events: none;
}

.toast-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--tone, var(--info));
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    color: var(--text);
    font-size: var(--fs-base);
    pointer-events: auto;
    animation: toast-in var(--t-slow) var(--ease);
}

.toast-item.is-leaving { animation: toast-out var(--t-base) var(--ease) forwards; }

.toast-item__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--tone, var(--info));
    font-size: 1rem;
}

.toast-item__body { flex: 1; min-width: 0; line-height: 1.45; word-break: break-word; }

.toast-item__close {
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-subtle);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.toast-item__close:hover { color: var(--text); }

.toast-item[data-tone="success"] { --tone: var(--ok); }
.toast-item[data-tone="error"]   { --tone: var(--danger); }
.toast-item[data-tone="warning"] { --tone: var(--warn); }
.toast-item[data-tone="info"]    { --tone: var(--info); }

@keyframes toast-in  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } }

/* ══ 7. مساعدات صغيرة ═════════════════════════════════════════════════════ */

/* نقطة حالة ملوّنة */
.dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-subtle);
    margin-inline-end: 5px;
    vertical-align: middle;
}

.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--danger { background: var(--danger); }
.dot--info { background: var(--info); }

/* نص ثانوي صغير */
.meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* رقم يُقرأ ككتلة */
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ══ 8. الوضع الداكن — عناصر لا تغطّيها الـ tokens تلقائياً ═══════════════ */

/* خرائط Leaflet: البلاطات صور فاتحة — تُخفَّف كي لا تبهر داخل واجهة داكنة.
   لإلغاء التأثير: احذف هذه القاعدة (لا شيء آخر يعتمد عليها). */
:root[data-theme="dark"] .leaflet-tile-pane {
    filter: brightness(.72) saturate(.85) contrast(1.05);
}

:root[data-theme="dark"] .leaflet-container {
    background: var(--surface-inset);
}

/* نوافذ Leaflet المنبثقة وأدواته */
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip,
:root[data-theme="dark"] .leaflet-control-zoom a,
:root[data-theme="dark"] .leaflet-bar {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

/* الصور والشعارات على خلفية داكنة: خفض الإبهار قليلاً */
:root[data-theme="dark"] img.logo,
:root[data-theme="dark"] .navbar-brand img {
    filter: brightness(.95);
}

/* ── حارس الخلفيات البيضاء المتبقّية ───────────────────────────────────────
   الخلفيات الصلبة داخل ملفات CSS حُوِّلت آلياً إلى tokens، لكن يبقى مصدران
   لا يطالهما أي تحويل نصّي:
     1) فئات Bootstrap المساعدة (.bg-white / .bg-light) المكتوبة في الـ HTML
     2) خاصية style="" التي تبنيها JavaScript عند توليد الصفوف والبطاقات
   بدونهما تظهر «مساحة بيضاء» يقع عليها نص فاتح فلا يُقرأ.                */

:root[data-theme="dark"] .bg-white {
    background-color: var(--surface) !important;
    color: var(--text);
}

:root[data-theme="dark"] .bg-light {
    background-color: var(--surface-2) !important;
    color: var(--text);
}

/* أنماط مضمّنة من JavaScript — مطابقة نصّية على قيمة السمة */
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:white"],
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background-color:#fff"],
:root[data-theme="dark"] [style*="background-color: #fff"],
:root[data-theme="dark"] [style*="background-color:white"],
:root[data-theme="dark"] [style*="background-color: white"] {
    background-color: var(--surface) !important;
    color: var(--text);
}

:root[data-theme="dark"] .text-dark { color: var(--text) !important; }

:root[data-theme="dark"] .text-black { color: var(--text) !important; }

:root[data-theme="dark"] .border { border-color: var(--border) !important; }

/* نص أبيض صريح فوق سطح داكن سليم — لكن لو كان فوق سطح فاتح لم يُحوَّل،
   هذه القاعدة تجعله يتبع لون النص القياسي بدل البقاء أبيض غير مقروء. */
:root[data-theme="dark"] .card .text-white:not([class*="bg-"]):not(.badge),
:root[data-theme="dark"] .data-panel .text-white:not([class*="bg-"]):not(.badge) {
    color: var(--text) !important;
}

/* ══ 9. الطباعة ═══════════════════════════════════════════════════════════ */

@media print {
    .toast-stack, .filter-bar, .data-panel__tools, .page-head__actions { display: none !important; }

    .kpi-card, .data-panel {
        box-shadow: none !important;
        border: 1px solid #999 !important;
        break-inside: avoid;
    }

    .kpi-card::before { display: none; }

    /* الرأس الثابت يمنع تكرار رأس الجدول على الصفحات — يُلغى للطباعة */
    .data-scroll {
        overflow: visible !important;
        max-height: none !important;
    }

    .data-scroll > .table > thead > tr > th {
        position: static !important;
        box-shadow: none !important;
    }
}


/* ══ 9. مركز المهام (الصفحة الرئيسية) ══════════════════════════════════════ */
/* مشغّل الصفحات: هيرو + بحث، مهام متكرّرة، مستكشف كل الصفحات المتاحة للمستخدم.
   المصدر: nav_catalog (يُولَّد من الشريط الجانبي ويُصفّى بالصلاحيات).        */

.mx-hero {
    padding: var(--sp-8) 0 var(--sp-6);
    text-align: center;
}

.mx-hero h1 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: -.01em;
}

.mx-hero p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.mx-search {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: min(660px, 100%);
    margin: var(--sp-5) auto 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-sm);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.mx-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.mx-search > i { color: var(--text-muted); }

.mx-search input {
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
}

.mx-search input::placeholder { color: var(--text-subtle); }

.mx-kbd {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-inset);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}


/* قائمة النتائج تحت حقل البحث مباشرة (مركز المهام) */
.mx-search-wrap {
    position: relative;
    z-index: 5;
    width: min(660px, 100%);
    margin: var(--sp-5) auto 0;
}

.mx-search-wrap .mx-search { width: 100%; margin: 0; }

.mx-hint {
    min-height: 1.2em;
    margin: var(--sp-2) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.mx-suggest {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    max-height: 58vh;
    overflow-y: auto;
    text-align: start;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
}

.mx-suggest a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 9px var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text);
    text-decoration: none;
}

.mx-suggest a:last-child { border-bottom: 0; }
.mx-suggest a:hover, .mx-suggest a.is-active { background: var(--surface-3); }
.mx-suggest strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.mx-suggest small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.mx-suggest .mx-card__icon { width: 32px; height: 32px; font-size: var(--fs-sm); }
.mx-sug-go { margin-inline-start: auto; color: var(--text-subtle); font-size: var(--fs-xs); }

.mx-suggest__more {
    padding: 8px var(--sp-4);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

/* ترويسة قسم داخل الصفحة */
.mx-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-3);
}

.mx-head h2 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
}

.mx-head .mx-kicker {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.mx-linkbtn {
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.mx-linkbtn:hover { color: var(--accent-text); text-decoration: underline; }

/* المهام المتكرّرة */
.mx-quick-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.mx-quick {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text);
    text-align: start;
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.mx-quick:hover {
    border-color: var(--accent-soft-brd);
    box-shadow: var(--sh-sm);
    color: var(--text);
}

.mx-quick strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.mx-quick small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.mx-quick .mx-go { margin-inline-start: auto; color: var(--text-subtle); font-size: var(--fs-xs); }

/* لوحة المستكشف */
.mx-panel {
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    background: var(--surface);
    margin-bottom: var(--sp-6);
}

.mx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-bottom: var(--sp-4);
}

.mx-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--fs-xs);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.mx-chip:hover { border-color: var(--border-strong); color: var(--text); }
.mx-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

.mx-chip__n {
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums lining-nums;
}

.mx-chip.is-active .mx-chip__n { background: rgba(255, 255, 255, .22); color: #fff; }

.mx-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border-subtle);
}

.mx-meta p { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); }
.mx-meta strong { color: var(--text); font-variant-numeric: tabular-nums lining-nums; }

.mx-meta select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--fs-xs);
}

.mx-switch {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-inset);
}

.mx-switch button {
    width: 32px;
    height: 26px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.mx-switch button.is-active {
    background: var(--surface);
    color: var(--accent-text);
    box-shadow: var(--sh-xs);
}

/* شبكة بطاقات الصفحات */
.mx-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}

.mx-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text);
    text-align: start;
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.mx-card:hover {
    border-color: var(--accent-soft-brd);
    box-shadow: var(--sh-sm);
    transform: translateY(-1px);
    color: var(--text);
}

.mx-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mx-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--r-md);
    font-size: var(--fs-md);
    background: var(--mx-soft, var(--accent-soft));
    color: var(--mx-tone, var(--accent-text));
}

.mx-card__body { min-width: 0; flex: 1; padding-inline-end: var(--sp-5); }
.mx-card h3 { margin: 0 0 3px; font-size: var(--fs-sm); font-weight: 600; }

.mx-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    direction: ltr;
    text-align: left;
}

/* أنغام الأقسام */
.mx-t-gen  { --mx-tone: var(--text-2);      --mx-soft: var(--surface-3); }
.mx-t-ops  { --mx-tone: var(--accent-text); --mx-soft: var(--accent-soft); }
.mx-t-plan { --mx-tone: var(--info-text);   --mx-soft: var(--info-soft); }
.mx-t-rpt  { --mx-tone: var(--ok-text);     --mx-soft: var(--ok-soft); }
.mx-t-mgmt { --mx-tone: var(--text-2);      --mx-soft: var(--surface-3); }

.mx-star {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-subtle);
    font-size: var(--fs-sm);
    line-height: 1;
}

.mx-star:hover, .mx-star.is-on { color: var(--warn); background: var(--warn-soft); }

/* العرض المدمج */
.mx-grid.is-compact { grid-template-columns: repeat(4, 1fr); }
.mx-grid.is-compact .mx-card { align-items: center; padding: 10px var(--sp-3); }
.mx-grid.is-compact .mx-card p { display: none; }
.mx-grid.is-compact .mx-card__icon { width: 30px; height: 30px; font-size: var(--fs-sm); }
.mx-grid.is-compact .mx-star { top: 6px; width: 22px; height: 22px; }

.mx-more { display: flex; justify-content: center; margin-top: var(--sp-4); }

/* مساعدات صغيرة تخصّ الصفحة الرئيسية (بدل الأنماط المضمّنة) */
.mx-w-150 { max-width: 150px; }
.mx-fs-tiny { font-size: .7rem; }
.mx-h-20 { height: 20px; }


@media (max-width: 1199.98px) {
    .mx-grid { grid-template-columns: repeat(2, 1fr); }
    .mx-grid.is-compact { grid-template-columns: repeat(3, 1fr); }
    .mx-quick-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .mx-hero { padding: var(--sp-6) 0 var(--sp-4); }
    .mx-grid, .mx-grid.is-compact, .mx-quick-row { grid-template-columns: 1fr; }
    .mx-panel { padding: var(--sp-4) var(--sp-3); }
    .mx-kbd { display: none; }
}

@media print {
    .mx-hero, .mx-search, .mx-chips, .mx-meta, .mx-switch, .mx-more, .mx-star { display: none !important; }
}

/* ══ 10. الجداول → بطاقات على الهاتف ═══════════════════════════════════════ */
/* الصنف .table-cards يُضاف تلقائياً من ui-kit.js لكل جدول بيانات له رأس،
   وتُشتقّ تسمية كل خلية من عمودها (data-label) — فلا حاجة لتعديل أي قالب.
   للاستثناء: ضع data-no-cards على الجدول.                                  */

@media screen and (max-width: 767.98px) {

    .table-cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .table-cards,
    .table-cards tbody,
    .table-cards tr,
    .table-cards td {
        display: block;
        width: auto;
    }

    .table-cards tbody tr {
        margin-bottom: var(--sp-3);
        padding: var(--sp-2) var(--sp-3);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        background: var(--surface);
        box-shadow: var(--sh-xs);
    }

    /* صف بلا بيانات (تحميل / لا نتائج): يبقى سطراً واحداً مركزياً */
    .table-cards tbody tr.mx-row-plain {
        padding: var(--sp-4) var(--sp-3);
        text-align: center;
        color: var(--text-muted);
    }

    .table-cards tbody tr.mx-row-plain td {
        display: block;
        border: 0;
        padding: 0;
    }

    .table-cards tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        padding: 7px 0;
        border: 0;
        border-bottom: 1px solid var(--border-subtle);
        text-align: start;
        white-space: normal;
    }

    .table-cards tbody td:last-child {
        border-bottom: 0;
    }

    /* التسمية المشتقّة من رأس العمود */
    .table-cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        color: var(--text-muted);
        font-size: var(--fs-xs);
        font-weight: 500;
    }

    /* خلية بلا تسمية (أزرار الإجراءات مثلاً): تأخذ العرض كاملاً */
    .table-cards tbody td[data-label=""]::before,
    .table-cards tbody td:not([data-label])::before {
        content: none;
    }

    .table-cards tbody td[data-label=""],
    .table-cards tbody td:not([data-label]) {
        justify-content: flex-end;
        gap: var(--sp-2);
        padding-top: var(--sp-3);
    }

    /* الرأس الثابت لا معنى له بعد إخفاء thead */
    .table-cards.table > thead > tr > th {
        position: static;
    }

    /* حاوية التمرير الأفقي لم تعد لازمة */
    .table-responsive:has(> .table-cards),
    .data-scroll:has(> .table-cards) {
        overflow-x: visible;
        max-height: none;
    }
}