/* ═══════════════════════════════════════════════════════════════════════
   GAIBRA — gaibra-admin.css  ·  الطبقة 2 (وحدةٌ): لوحاتُ الإدارة والقياس
   ─────────────────────────────────────────────────────────────────────
   المسار  : wwwroot/css/gaibra-admin.css
   العمليّة: ⟳ تعديل (إعادةُ كتابةٍ كاملة)
   الإصدار : 1.1
   التاريخ : 2026-11-07   (1.0: 2026-10-20 · جديد)
   الترميز : UTF-8 بلا BOM · LF   (قاعدةُ ملفّات CSS)
   بُني على: gaibra-admin.css 1.0 · gaibra-themes.css 2.5 (الرموز) · gaibra-design.css 2.58 (الأصناف المستعارة)
   الحاكم  : Canon UI.01 §UI.01.2 (الطبقات) · §UI.01.3 (اللون) · §UI.01.5 (المسافات)
             · §UI.01.10 (الاستجابة) · §UI.01.11 (لا مكتبةَ مكوّنات) · §UI.01.12 (الوصوليّة)
             · Canon D.16 §D.16.14.6 (لوحةُ القياس)
   ─────────────────────────────────────────────────────────────────────
   ما تمّ في الإصدار 1.1 (2026-11-07)
     ★ إصلاحُ اختفاء شريط المؤشّرات وشريط التبويبات في /admin/telemetry
       (بلاغُ المؤسّس: «لا يوجد تبويبٌ للأعضاء» — ظهر مكانَهما خطّان فارغان).
       السبب: الجذرُ `.gaibra-tele` عمودٌ مرنٌ بارتفاعٍ ثابت (100%) يمرّر داخله.
       حين يزيد المحتوى على الارتفاع يُضغَط كلُّ ابنٍ قابلٍ للانضغاط، والابنُ
       الذي يحمل overflow غيرَ visible يسقط حدُّه الأدنى إلى صفر — فانضغط
       `.gaibra-tele__kpis` (overflow:hidden) و`.gaibra-tele__tabs` (overflow-x:auto)
       إلى إطارَيهما وقُصَّ ما فيهما. الرأسُ والشريطُ واللوحُ بلا overflow فسلمت.
       الإصلاحُ عامّ لا خاصّ: كلُّ ابنٍ مباشرٍ للجذر لا ينضغط (flex-shrink:0) —
       فأيُّ قسمٍ يُضاف لاحقًا لأيّ لوحةِ إدارةٍ على هذا الجذر محميٌّ تلقائيًّا.
       لا تغييرَ غيرُه في الملفّ.
   ─────────────────────────────────────────────────────────────────────
   ما تمّ في الإصدار 1.0
     ① وحدةٌ مستقلّةٌ لا قسمٌ في gaibra-design.css (قرارُ المؤسّس 2026-10-20):
        لوحاتُ الإدارة عائلةٌ تنمو (القياس · المنتجات · الحَكَم…)، وملفُّ النظام
        ملفٌّ مشتركٌ تحكمه قاعدةُ التعايش. فالوحدةُ تُبنى فوقه ولا تكتب فيه.
     ② صفرُ قيمةِ لونٍ حرفيّة: كلُّ لونٍ رمزٌ من gaibra-themes.css — فالوضعان
        النهاريّ والليليّ يعملان بلا سطرٍ واحدٍ خاصٍّ بأيّهما.
     ③ صفرُ left/right: الخصائصُ المنطقيّةُ وحدها.
     ④ أصنافُ الرسوم `.gaibra-chart*` و`.gaibra-donut*` و`.gaibra-hbars*`
        تخدم مكوّنات Components/Charts — صالحةٌ لأيّ شاشةٍ تحتاج رسمًا.
     ⑤ النغماتُ الستّ مشتقّةٌ من الهويّة (§UI.01.3.2): الفيروزيّ بدرجاته
        والأزرقُ الليليّ ودرجاتُه. لا رماديّ ولا لونٌ أجنبيّ.
     ⑥ لا أحمرَ للتنبيه (كقرار §38 ②): «يستحقّ الانتباه» شكلٌ (حدٌّ متقطّع)
        من عائلة الفيروزيّ. والأحمرُ للخطأ وحده: استدعاءٌ فشل · محرّكٌ فشل.
     ⑦ مستعارٌ لا مكرَّر: الأزرارُ `.gaibra-btn*` والحقولُ `.gaibra-input`
        من gaibra-design.css كما هي.

   ⚠ يُحمَّل بعد gaibra-design.css في App.razor (سطرٌ واحد — في رسالة التسليم).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ §A1 — الجذر: حاويةُ التمرير (عقدُ §37 نفسُه) ═══════════════════════ */
.gaibra-tele {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    padding-block: var(--s-5) var(--s-8);
    padding-inline: var(--s-4);
    min-block-size: 0;
    block-size: 100%;
    overflow-y: auto;
    background: var(--bg);
    color: var(--fg-body);
    font-family: var(--font-ar);
    font-size: var(--fs-body);
    line-height: var(--lh-label);
}

/* 1.1 — الأبناءُ المباشرون لا ينضغطون: الجذرُ يمرّر داخله، فالطولُ الزائد
   يُمرَّر لا يُقتطَع من قسمٍ ذي overflow (المؤشّرات · التبويبات · أيُّ قسمٍ لاحق) */
.gaibra-tele > * {
    flex-shrink: 0;
    inline-size: 100%;
    max-inline-size: 1440px;
    margin-inline: auto;
}

.gaibra-tele__num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* معرّفٌ لاتينيّ (عقل · خدمة · نموذج) — يُقرأ ltr داخل سطرٍ rtl */
.gaibra-tele__id {
    font-family: var(--font-mono);
    font-size: var(--fs-meta);
    color: var(--fg-dim);
    direction: ltr;
    unicode-bidi: isolate;
}

.gaibra-tele__ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

.gaibra-tele__muted {
    color: var(--fg-faint);
}

/* ═══ §A2 — الحالات: تحقّق · منع · خطأ ═════════════════════════════════ */
.gaibra-tele__state {
    margin: 0;
    padding-block: var(--s-6);
    color: var(--fg-faint);
    text-align: center;
}

.gaibra-tele__denied {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    max-inline-size: var(--measure);
    margin-block: var(--s-8);
    padding: var(--s-5);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    background: var(--surface);
}

    .gaibra-tele__denied h2 {
        margin: 0;
        font-size: var(--fs-h3);
        font-weight: var(--w-semi);
        color: var(--fg);
    }

    .gaibra-tele__denied p {
        margin: 0;
        color: var(--fg-dim);
    }

.gaibra-tele__errors {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.gaibra-tele__error {
    margin: 0;
    padding-block: var(--s-2);
    padding-inline: var(--s-3);
    border: 1px solid var(--danger-line);
    border-radius: var(--r-md);
    background: var(--danger-soft);
    color: var(--fg-body);
    font-size: var(--fs-meta);
}

/* ملاحظةٌ مُعلِنة (غيابٌ · حدٌّ · تغطية) — عائلةُ الفيروزيّ لا الأحمر */
.gaibra-tele__note {
    margin: 0;
    padding-block: var(--s-2);
    padding-inline: var(--s-3);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-md);
    background: var(--accent-faint);
    color: var(--fg-body);
    font-size: var(--fs-meta);
}

    .gaibra-tele__note b {
        color: var(--fg);
        font-weight: var(--w-semi);
    }

/* ═══ §A3 — الرأس ═══════════════════════════════════════════════════════ */
.gaibra-tele__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.gaibra-tele__title {
    margin: 0;
    font-family: var(--font-head);
    font-size: var(--fs-lead);
    font-weight: var(--w-bold);
    line-height: var(--lh-tight);
    color: var(--fg);
    text-wrap: balance;
}

.gaibra-tele__code {
    margin-inline-start: var(--s-2);
    font-family: var(--font-lat);
    font-size: var(--fs-meta);
    font-weight: var(--w-med);
    color: var(--fg-faint);
}

.gaibra-tele__sub {
    margin: 0;
    font-size: var(--fs-label);
    color: var(--fg-faint);
}

.gaibra-tele__head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}

.gaibra-tele__stamp {
    font-size: var(--fs-micro);
    color: var(--fg-faint);
}

/* ═══ §A4 — شريطُ التحكّم اللاصق ═════════════════════════════════════════ */
.gaibra-tele__bar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-composer);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--side);
}

.gaibra-tele__seg {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
}

.gaibra-tele__seg-btn {
    min-block-size: var(--touch);
    padding-inline: var(--s-3);
    border: 0;
    background: transparent;
    color: var(--fg-dim);
    font-family: var(--font-ar);
    font-size: var(--fs-meta);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

    .gaibra-tele__seg-btn:hover {
        background: var(--hover);
        color: var(--fg);
    }

    .gaibra-tele__seg-btn[aria-pressed="true"] {
        background: var(--accent);
        color: var(--accent-fg);
        font-weight: var(--w-med);
    }

.gaibra-tele__field {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-inline-size: 0;
}

    .gaibra-tele__field > label,
    .gaibra-tele__label {
        font-size: var(--fs-micro);
        color: var(--fg-faint);
    }

    .gaibra-tele__field .gaibra-input {
        min-block-size: var(--touch);
        padding-block: var(--s-1);
        font-size: var(--fs-meta);
    }

.gaibra-tele__bar .gaibra-tele__field {
    inline-size: auto;
    min-inline-size: 150px;
}

.gaibra-tele__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
}

.gaibra-tele__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding-block: 2px;
    padding-inline: var(--s-3) var(--s-1);
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--fg);
    font-size: var(--fs-label);
}

.gaibra-tele__chip-x {
    min-inline-size: 24px;
    min-block-size: 24px;
    border: 0;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--fg-dim);
    cursor: pointer;
}

    .gaibra-tele__chip-x:hover {
        background: var(--hover-2);
        color: var(--fg);
    }

/* ═══ §A5 — شريطُ المؤشّرات ═════════════════════════════════════════════ */
.gaibra-tele__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--line);
    overflow: hidden;
}

.gaibra-tele__kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block: var(--s-3);
    padding-inline: var(--s-4);
    background: var(--surface);
    min-inline-size: 0;
}

.gaibra-tele__kpi-k {
    font-size: var(--fs-label);
    color: var(--fg-dim);
}

.gaibra-tele__kpi-v {
    font-size: var(--fs-lead);
    font-weight: var(--w-bold);
    line-height: var(--lh-tight);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    /* الرقمُ معزولٌ عن اتّجاه الجملة لكنّه يبقى على محاذاة البطاقة */
    unicode-bidi: isolate;
}

.gaibra-tele__kpi-d {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--fs-micro);
    color: var(--fg-faint);
}

/* الفرقُ عن الفترة السابقة: الحكمُ بالشكل (ممتلئ/محدَّد) والسهمُ بالنصّ */
.gaibra-tele__delta {
    padding-inline: var(--s-1);
    border: 1px solid transparent;
    border-radius: 4px;
    font-weight: var(--w-med);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.gaibra-tele__delta--good {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.gaibra-tele__delta--bad {
    border-color: var(--accent-line);
    border-style: dashed;
    color: var(--fg-dim);
}

.gaibra-tele__delta--flat {
    color: var(--fg-faint);
}

/* ═══ §A6 — التبويبات ═══════════════════════════════════════════════════ */
.gaibra-tele__tabs {
    display: flex;
    gap: 2px;
    border-block-end: 1px solid var(--line-2);
    overflow-x: auto;
    scrollbar-width: thin;
}

.gaibra-tele__tab {
    min-block-size: 40px;
    padding-inline: var(--s-4);
    border: 0;
    border-block-end: 2px solid transparent;
    background: transparent;
    color: var(--fg-dim);
    font-family: var(--font-ar);
    font-size: var(--fs-body);
    white-space: nowrap;
    cursor: pointer;
}

    .gaibra-tele__tab:hover {
        color: var(--fg);
    }

    .gaibra-tele__tab[aria-selected="true"] {
        border-block-end-color: var(--accent);
        color: var(--fg);
        font-weight: var(--w-bold);
    }

.gaibra-tele__tab-count {
    margin-inline-start: var(--s-1);
    font-size: var(--fs-micro);
    color: var(--fg-faint);
    font-variant-numeric: tabular-nums;
}

.gaibra-tele__panel,
.gaibra-tele__stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    min-inline-size: 0;
}

/* ═══ §A7 — الكتل والشبكات ══════════════════════════════════════════════ */
.gaibra-tele__grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: var(--s-4);
}

.gaibra-tele__grid3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--s-4);
}

.gaibra-tele__box {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    min-inline-size: 0;
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.gaibra-tele__box--flush {
    padding: 0;
    gap: 0;
}

.gaibra-tele__box-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
}

.gaibra-tele__box-title {
    margin: 0;
    font-family: var(--font-head);
    font-size: var(--fs-h4);
    font-weight: var(--w-bold);
    color: var(--fg);
}

.gaibra-tele__box-sub {
    margin: 0;
    font-size: var(--fs-micro);
    color: var(--fg-faint);
}

/* ═══ §A8 — مؤشّراتُ الصحّة ═════════════════════════════════════════════ */
.gaibra-tele__health {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--s-2);
}

.gaibra-tele__hp {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-block: var(--s-2);
    padding-inline: var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--raised);
}

.gaibra-tele__hp-dot {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 24px;
    block-size: 24px;
    border-radius: var(--r-full);
    font-size: var(--fs-micro);
}

.gaibra-tele__hp--ok .gaibra-tele__hp-dot {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

.gaibra-tele__hp--warn .gaibra-tele__hp-dot {
    border: 1.5px dashed var(--accent);
    color: var(--accent-ink);
}

.gaibra-tele__hp--none .gaibra-tele__hp-dot {
    border: 1px solid var(--line-2);
    color: var(--fg-faint);
}

.gaibra-tele__hp-v {
    display: block;
    font-size: var(--fs-h4);
    font-weight: var(--w-bold);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}

.gaibra-tele__hp-k {
    font-size: var(--fs-micro);
    color: var(--fg-dim);
}

/* ═══ §A9 — الجداول ═════════════════════════════════════════════════════ */
.gaibra-tele__table-wrap {
    max-block-size: 560px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.gaibra-tele__box--flush .gaibra-tele__table-wrap {
    border: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.gaibra-tele__table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--fs-meta);
}

    .gaibra-tele__table th {
        position: sticky;
        inset-block-start: 0;
        z-index: 1;
        padding-block: var(--s-2);
        padding-inline: var(--s-3);
        border-block-end: 1px solid var(--line-2);
        background: var(--raised);
        color: var(--fg-dim);
        font-size: var(--fs-label);
        font-weight: var(--w-med);
        text-align: start;
        white-space: nowrap;
    }

    .gaibra-tele__table td {
        padding-block: var(--s-2);
        padding-inline: var(--s-3);
        border-block-end: 1px solid var(--line);
        white-space: nowrap;
        vertical-align: middle;
    }

    .gaibra-tele__table .n {
        text-align: end;
        font-variant-numeric: tabular-nums;
    }

    .gaibra-tele__table tbody tr:hover {
        background: var(--hover);
    }

    .gaibra-tele__table tbody tr[aria-selected="true"] {
        background: var(--accent-soft);
    }

    .gaibra-tele__table tbody tr.is-click {
        cursor: pointer;
    }

    .gaibra-tele__table tfoot td {
        position: sticky;
        inset-block-end: 0;
        border-block-start: 1px solid var(--line-2);
        background: var(--raised);
        color: var(--fg);
        font-weight: var(--w-bold);
    }

.gaibra-tele__th-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .gaibra-tele__th-sort:hover {
        color: var(--fg);
    }

.gaibra-tele__sort-arrow {
    color: var(--accent-ink);
}

.gaibra-tele__who b {
    display: block;
    color: var(--fg);
    font-weight: var(--w-med);
}

.gaibra-tele__who small {
    color: var(--fg-faint);
    font-size: var(--fs-micro);
    direction: ltr;
    unicode-bidi: isolate;
}

/* شارةُ الباقة: محايدةٌ — الباقةُ وصفٌ لا حكم */
.gaibra-tele__pill {
    display: inline-block;
    padding-inline: var(--s-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: var(--fg-dim);
    font-size: var(--fs-micro);
    font-weight: var(--w-med);
    white-space: nowrap;
}

/* حالةُ الصفّ: سليم (ممتلئ) · يستحقّ الانتباه (متقطّع) · فشل (الخطر — خطأٌ حقيقيّ) */
.gaibra-tele__st {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding-inline: var(--s-2);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--fs-micro);
    white-space: nowrap;
}

.gaibra-tele__st--ok {
    background: var(--accent-soft);
    color: var(--fg);
}

.gaibra-tele__st--warn {
    border-color: var(--accent);
    border-style: dashed;
    color: var(--accent-ink);
}

.gaibra-tele__st--fail {
    background: var(--danger);
    color: var(--danger-fg);
}

/* شريطُ نسبةٍ داخل خليّة */
.gaibra-tele__inbar {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-inline-size: 120px;
}

.gaibra-tele__inbar-track {
    flex: 1;
    block-size: 6px;
    border-radius: 3px;
    background: var(--hover-2);
    overflow: hidden;
}

.gaibra-tele__inbar-fill {
    display: block;
    block-size: 100%;
    border-radius: 3px;
    background: var(--accent);
}

.gaibra-tele__inbar small {
    min-inline-size: 42px;
    color: var(--fg-dim);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.gaibra-tele__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding-block: var(--s-2);
    padding-inline: var(--s-3);
    font-size: var(--fs-label);
    color: var(--fg-dim);
}

.gaibra-tele__pager-btns {
    display: flex;
    gap: var(--s-1);
}

.gaibra-tele__pager .gaibra-btn {
    padding-inline: var(--s-3);
    font-size: var(--fs-meta);
}

/* ═══ §A10 — المرشّحات والأدوات ═════════════════════════════════════════ */
.gaibra-tele__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: var(--s-3);
}

.gaibra-tele__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-3);
}

.gaibra-tele__toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
}

.gaibra-tele__toggle {
    min-block-size: 30px;
    padding-inline: var(--s-3);
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--fg-dim);
    font-family: var(--font-ar);
    font-size: var(--fs-label);
    cursor: pointer;
}

    .gaibra-tele__toggle:hover {
        background: var(--hover);
    }

    .gaibra-tele__toggle[aria-pressed="true"] {
        border-color: var(--accent);
        background: var(--accent-soft);
        color: var(--fg);
    }

.gaibra-tele__adv > summary {
    color: var(--accent-ink);
    font-size: var(--fs-label);
    font-weight: var(--w-med);
    cursor: pointer;
    list-style: none;
}

    .gaibra-tele__adv > summary::-webkit-details-marker {
        display: none;
    }

    .gaibra-tele__adv > summary::before {
        content: "▸ ";
    }

.gaibra-tele__adv[open] > summary::before {
    content: "▾ ";
}

.gaibra-tele__adv-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin-block-start: var(--s-3);
}

/* ═══ §A11 — الأعضاء: جدولٌ ولوحُ تفصيل ════════════════════════════════ */
.gaibra-tele__members {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--s-4);
    align-items: start;
}

.gaibra-tele__drawer {
    position: sticky;
    inset-block-start: 96px;
}

.gaibra-tele__drawer-id {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.gaibra-tele__avatar {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--r-full);
    background: var(--accent);
    color: var(--accent-fg);
    font-weight: var(--w-bold);
}

.gaibra-tele__mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
}

    .gaibra-tele__mini > div {
        padding-block: var(--s-2);
        padding-inline: var(--s-3);
        border-radius: var(--r-md);
        background: var(--raised);
    }

    .gaibra-tele__mini span {
        display: block;
        font-size: var(--fs-micro);
        color: var(--fg-faint);
    }

    .gaibra-tele__mini b {
        color: var(--fg);
        font-size: var(--fs-h4);
        font-variant-numeric: tabular-nums;
    }

.gaibra-tele__dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-1) var(--s-3);
    margin: 0;
    font-size: var(--fs-label);
}

    .gaibra-tele__dl dt {
        color: var(--fg-faint);
    }

    .gaibra-tele__dl dd {
        margin: 0;
        color: var(--fg);
        text-align: end;
        font-variant-numeric: tabular-nums;
    }

/* ═══ §A12 — بطاقاتُ العقول ═════════════════════════════════════════════ */
.gaibra-tele__minds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--s-3);
}

.gaibra-tele__mind {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.gaibra-tele__mind-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
}

    .gaibra-tele__mind-head b {
        color: var(--fg);
        font-family: var(--font-lat);
        font-size: var(--fs-h4);
        direction: ltr;
        unicode-bidi: isolate;
    }

/* ═══ §A13 — خريطةُ الذروة ═══════════════════════════════════════════════ */
.gaibra-tele__heat-wrap {
    overflow-x: auto;
}

.gaibra-tele__heat {
    display: grid;
    grid-template-columns: 56px repeat(24, minmax(16px, 1fr));
    gap: 2px;
    min-inline-size: 560px;
    font-size: var(--fs-micro);
    color: var(--fg-faint);
    direction: ltr;
}

.gaibra-tele__heat-lbl {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.gaibra-tele__heat-cell {
    aspect-ratio: 1;
    max-inline-size: 100%;
    border-radius: 3px;
    background: var(--accent);
}

.gaibra-tele__heat-cell--l0 { background: var(--hover); }
.gaibra-tele__heat-cell--l1 { opacity: 0.18; }
.gaibra-tele__heat-cell--l2 { opacity: 0.36; }
.gaibra-tele__heat-cell--l3 { opacity: 0.56; }
.gaibra-tele__heat-cell--l4 { opacity: 0.78; }
.gaibra-tele__heat-cell--l5 { opacity: 1; }

/* ═══ §A14 — الرسوم (Components/Charts) ═════════════════════════════════ */
.gaibra-chart {
    display: block;
    inline-size: 100%;
    block-size: auto;
    direction: ltr;
    overflow: visible;
}

.gaibra-chart__grid {
    stroke: var(--line);
    stroke-width: 1;
}

.gaibra-chart__axis {
    fill: var(--fg-faint);
    font-family: var(--font-ar);
    font-size: var(--fs-micro);
}

.gaibra-chart__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.gaibra-chart__area {
    fill: currentColor;
    opacity: 0.12;
}

.gaibra-chart__dot {
    fill: currentColor;
    opacity: 0;
    transition: opacity var(--t-fast);
}

    .gaibra-chart__dot:hover {
        opacity: 1;
    }

.gaibra-chart__dot--end {
    opacity: 1;
}

.gaibra-chart__bar {
    fill: currentColor;
}

    .gaibra-chart__bar:hover {
        opacity: 0.8;
    }

.gaibra-chart__slice {
    fill: currentColor;
    stroke: var(--surface);
    stroke-width: 2;
}

.gaibra-chart__slice-ring {
    fill: none;
    stroke: currentColor;
    stroke-width: 26;
}

.gaibra-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    font-size: var(--fs-micro);
    color: var(--fg-dim);
}

.gaibra-chart__key {
    display: inline-block;
    inline-size: 10px;
    block-size: 10px;
    margin-inline-end: var(--s-1);
    border-radius: 3px;
    background: currentColor;
    vertical-align: -1px;
}

.gaibra-chart__legend span,
.gaibra-donut__legend li {
    color: inherit;
}

.gaibra-chart__empty {
    margin: 0;
    padding: var(--s-5);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-md);
    color: var(--fg-faint);
    text-align: center;
    font-size: var(--fs-meta);
}

/* النغماتُ الستّ — مشتقّةٌ من الهويّة (§UI.01.3.2). العنصرُ يأخذ اللون عبر currentColor */
.gaibra-chart__t1 { color: var(--accent); }
.gaibra-chart__t2 { color: var(--fg-dim); }
.gaibra-chart__t3 { color: var(--accent-line); }
.gaibra-chart__t4 { color: var(--fg-faint); }
.gaibra-chart__t5 { color: var(--hover-2); }
.gaibra-chart__t6 { color: var(--fg); }

/* الحلقة */
.gaibra-donut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
}

.gaibra-donut__ring {
    flex: none;
    inline-size: 160px;
    block-size: 160px;
}

.gaibra-donut__total {
    fill: var(--fg);
    font-family: var(--font-ar);
    font-size: var(--fs-lead);
    font-weight: var(--w-bold);
}

.gaibra-donut__legend {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-label);
    min-inline-size: 0;
}

    .gaibra-donut__legend li {
        display: flex;
        align-items: center;
        gap: var(--s-1);
    }

.gaibra-donut__label {
    color: var(--fg-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-inline-size: 180px;
}

.gaibra-donut__legend b {
    color: var(--fg);
}

/* الأشرطةُ الأفقيّة */
.gaibra-hbars {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.gaibra-hbars__row {
    display: grid;
    grid-template-columns: minmax(80px, 140px) 1fr auto;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-label);
}

.gaibra-hbars__label {
    overflow: hidden;
    color: var(--fg-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gaibra-hbars__track {
    display: block;
    block-size: 8px;
    border-radius: 4px;
    background: var(--hover-2);
    overflow: hidden;
}

.gaibra-hbars__fill {
    display: block;
    block-size: 100%;
    border-radius: 4px;
    background: currentColor;
}

.gaibra-hbars__value {
    color: var(--fg);
    font-weight: var(--w-med);
    direction: ltr;
    unicode-bidi: isolate;
}

.gaibra-hbars__note {
    grid-column: 2 / -1;
    margin-block-start: -4px;
    color: var(--fg-faint);
    font-size: var(--fs-micro);
}

/* ═══ §A15 — الاستجابة (نقاطُ §UI.01.10) ════════════════════════════════ */
@media (max-width: 1199px) {
    .gaibra-tele__members {
        grid-template-columns: minmax(0, 1fr);
    }

    .gaibra-tele__drawer {
        position: static;
    }
}

@media (max-width: 879px) {
    .gaibra-tele {
        gap: var(--s-4);
        padding-inline: var(--s-3);
    }

    .gaibra-tele__bar {
        position: static;
    }

    .gaibra-tele__bar .gaibra-tele__field {
        inline-size: 100%;
    }

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

/* ═══ §A16 — الحركة (§UI.01.12 — مُلزِمٌ في كلّ ملفّ) ══════════════════ */
@media (prefers-reduced-motion: reduce) {
    .gaibra-tele *,
    .gaibra-chart * {
        transition: none !important;
        animation: none !important;
    }
}

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

/* ═══ نهاية gaibra-admin.css — لا قيمة لونٍ حرفيّة ولا left/right ═══ */