/* ════════════════════════════════════════════════════════════════════════════
 * atheer-surfaces.css — سطحٌ واحد لكلّ البطاقات، وبطاقة مؤشّرٍ مُعادة التصميم
 *
 * الملاحظة كانت: «المربّع الأحمر لونهم أزرق وباقي الصفحة أسود». والقياس
 * أثبتها وكشف أنّ الانقسام أوسع من تلك البطاقات الأربع — **أربعة أسطح
 * ونصفا قطر** عبر ستّ لوحات:
 *
 *   rgba(13,28,45,.85) · نق ١٠ · حدّ ٣    dash-card  (شريط لوحة الحالة)
 *   rgb(22,26,35)      · نق  ٨ · حدّ ١    dafa-chartcard · at-metric-card
 *   rgb(22,26,35)      · نق ١٠ · حدّ ١    at-metric-card · ax-card
 *   rgba(0,0,0,0)      · نق  ٨ · حدّ ١    card  ← **١٧ بطاقة بلا خلفيّة**
 *
 * والجذر: `marquee.css` يكتب
 *   [data-theme="dark"] .dash-card { background: rgba(13,28,45,.85) }
 * لونًا **بالأرقام** للثيم الداكن وحده — بقيّة من مظهرٍ قديم. وهذه ثامن
 * مرّة يتكرّر فيها النمط نفسه: قيمة كُتبت رقمًا بدل رمز، فلم تتحرّك مع النظام.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── ١ · سطحٌ واحد ─────────────────────────────────────────────────────────
 * الاستثناء الوحيد المسموح: بطاقة تحمل **نبرة دلاليّة** (`data-tone`) —
 * تلك خلفيّتها معلومة لا زينة، كتنبيهٍ كهرمانيّ. تُستثنى صراحةً. */
.dash-card:not([data-tone]),
.dafa-chartcard:not([data-tone]),
.at-card:not([data-tone]),
.card:not([data-tone]):not(.at-badge),
.settings-card:not([data-tone]),
.form-card:not([data-tone]),
.ax-card:not([data-tone]),
.at-metric-card:not([data-tone]),
.at-health-card:not([data-tone]),
.at-extcard:not([data-tone]) {
  background: var(--card-bg, var(--surface-1, #fff));
  border: 1px solid var(--card-border, var(--at-border, #e5e9f0));
  border-radius: var(--at-radius-lg, 8px);
  box-shadow: none;
}
/* 🔴 الثيم الداكن كان يُعاد تعريفه بلونٍ مكتوب — يُلغى هنا بالرمز نفسه
 * كي تتبع البطاقة النظام في الثيمين بلا كتلةٍ ثانية. */
:root[data-theme="dark"] .dash-card:not([data-tone]) { background: var(--card-bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dash-card:not([data-tone]) { background: var(--card-bg); }
}

/* ── ٢ · بطاقة المؤشّر — إعادة تصميم ─────────────────────────────────────
 *
 * ما كان: حدٌّ علويّ ٣px بلون البطاقة + خلفيّة مائلة للأزرق + ظلّ ثقيل +
 * أيقونة ملوّنة عارية. أي أنّ **الزينة تحمل اللون والمعلومة لا تحمله**.
 *
 * ما صار: البطاقة كأخواتها تمامًا، واللون لا يظهر إلّا حين يعني شيئًا:
 *   • الأيقونة في رقاقةٍ ناعمة — شكلٌ ثابت لا لونٌ صارخ.
 *   • التسمية محايدة؛ لأنّ تلوينها يجعل كلّ بطاقة تصرخ بالتساوي.
 *   • الرقم أرقامٌ جدوليّة (`tabular-nums`) فلا يهتزّ عرضها مع التحديث الحيّ.
 *   • القضيب يحمل نبرة الحمل (هادئ · تنبيه · خطر).
 *   • **الشريط العلويّ يظهر فقط عند التنبيه أو الخطر** — فالبطاقة الهادئة
 *     صامتة، والعين تنجذب إلى ما يحتاج انتباهًا وحده.
 * ------------------------------------------------------------------------ */
/* 🔴 حشوٌ واحد لا اثنان: `.dash-card` تحمل حشوها الخاصّ، والجسم يضيف حشوه
 * فوقه — فينتج ٣٥px فراغًا ميّتًا أسفل القضيب قِيست. الحشو يبقى في الجسم
 * وحده لأنّه صاحب الإيقاع الداخليّ. */
.dash-kpi { position: relative; overflow: hidden; display: flex; padding: 0; }
/* الجسم يملأ البطاقة كي يصير للقضيب **خطُّ أساسٍ واحد** في البطاقات الأربع
 * مهما اختلف طول تسمياتها — بدل فراغٍ ميّت أسفل كلٍّ منها. */
.dash-kpi__body {
  padding: 14px 16px; inline-size: 100%;
  display: flex; flex-direction: column; gap: 6px;
}
.dash-kpi__head   { display: flex; align-items: center; gap: 8px; }
.dash-kpi__chip {
  inline-size: 26px; block-size: 26px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--at-radius-sm, 4px);
  background: var(--at-accent-soft-bg, color-mix(in oklab, var(--at-accent) 14%, transparent));
  color: var(--at-accent);
}
.dash-kpi__chip .icon { font-size: 16px; }
.dash-kpi__label {
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--at-text-muted, #6b7280);
}
/* 🔴 `direction: ltr` + `isolate` إلزاميّان للأرقام في واجهةٍ عربيّة:
 * القيمة المكتوبة «0 / 60» (مستعمَلة من ٦٠) كانت تُعرَض «60 / 0» لأنّ
 * محرّك ثنائيّ الاتّجاه يعيد ترتيب الرموز حول الشرطة المائلة — فتُقرأ
 * «ستّون من صفر»، وهو عكس المعنى تمامًا. والعزل يمنع تسرّب الاتّجاه
 * إلى ما حوله. */
.dash-kpi__value {
  font-size: 28px; font-weight: 700; line-height: 1.05;
  color: var(--text-primary, #151b27);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  direction: ltr; unicode-bidi: isolate; text-align: start;
}
[dir="rtl"] .dash-kpi__value { text-align: right; }
.dash-kpi__sub { font-size: 11px; color: var(--at-text-muted, #6b7280); }
.dash-kpi__bar {
  block-size: 4px; margin-block-start: auto;   /* يُدفع إلى القاع */
  border-radius: var(--at-radius-xs, 2px);
  background: var(--surface-2, #eef1f4); overflow: hidden;
}
.dash-kpi__fill {
  block-size: 100%; border-radius: inherit;
  background: var(--at-accent);
  transition: width .35s cubic-bezier(.2,0,0,1), background .2s;
}
/* الشريط العلويّ حالةٌ لا زخرفة: لا يُرسم إلّا حين يتجاوز الحمل الحدّ. */
.dash-kpi[data-state="warn"]::before,
.dash-kpi[data-state="crit"]::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 2px;
}
.dash-kpi[data-state="warn"]::before { background: var(--at-warning); }
.dash-kpi[data-state="crit"]::before { background: var(--at-danger); }
.dash-kpi[data-state="warn"] .dash-kpi__chip {
  color: var(--at-warning);
  background: color-mix(in oklab, var(--at-warning) 16%, transparent);
}
.dash-kpi[data-state="crit"] .dash-kpi__chip {
  color: var(--at-danger);
  background: color-mix(in oklab, var(--at-danger) 16%, transparent);
}

/* ── ٣ · بطاقات لوحة التقارير كانت شفّافة ────────────────────────────────
 * ١٧ بطاقة بـ`background: rgba(0,0,0,0)` — تطفو على خلفيّة الصفحة بلا أرض،
 * فيبدو حدّها خطًّا معلّقًا. تأخذ السطح نفسه كبقيّة النظام. */
.page .card:not([data-tone]):not(.at-badge):not(.at-chip) {
  background: var(--card-bg, var(--surface-1, #fff));
}

/* ── ٤ · بطاقتان بقيتا خارج السطح الموحّد (وجدهما مسح ١٧٥ صفحة) ──────────
 * `#/console/supervisor/workspace` بطاقةٌ شفّافة، و`#/admin/call-control/autoclip`
 * بنصف قطر ٠. كلتاهما `.card` في سياقٍ لم يطابقه المحدِّد الأوّل. */
.page .card, .at-main .card, main .card {
  border-radius: var(--at-radius-lg, 8px);
}
.page .card:not([data-tone]):not(.at-badge):not(.at-chip):not(.at-storebadge),
main .card:not([data-tone]):not(.at-badge):not(.at-chip):not(.at-storebadge) {
  background: var(--card-bg, var(--surface-1, #fff));
}

/* بطاقاتٌ خارج حاوية `.page` كانت تبقى شفّافة (٣ في مساحة المشرف).
 * المحدِّد بلا سياقٍ أب — والاستثناءات صريحة كي لا تُطمَس رقاقة أو شارة. */
.card:not([data-tone]):not(.at-badge):not(.at-chip):not(.at-storebadge):not(.at-socialicon) {
  background: var(--card-bg, var(--surface-1, #fff));
}