/* atheer-vireo-polish.css — ثلاث علل بصريّة، أسبابها مقيسة لا مخمَّنة
 * ════════════════════════════════════════════════════════════════════════════
 * يُحمَّل **بعد** atheer-vireo-rhythm.css. لا يُخفي عنصرًا ولا يحذف قاعدة.
 * التراجع: حذف سطر <link> وحده — لا أثر على أيّ ملفّ قائم.
 *
 *  §١ بطاقات الأرقام كانت تتراصّ عموديًّا
 *      السبب: `components.css:54` يعرّف `.card { display:flex; flex-direction:column }`.
 *      و22 صفحة تكتب `style={display:"flex", …}` سطريًّا على `.card` نفسها —
 *      والنمط السطريّ يعلن `display` **ولا يعلن `flex-direction`**، فيبقى
 *      `column` من الملفّ. النيّة صفّ والنتيجة عمود، بلا خطأ ولا تحذير.
 *      قِيس: 30 موضعًا في 22 صفحة، كلّها بنيّة الصفّ (لا واحد منها يريد عمودًا).
 *
 *  §٢ عرض الحقول متفاوت في أشرطة المرشّحات
 *      السبب: `maxWidth` سطريّ لكلّ حقل (130px · 150px …) بينما القوائم
 *      المنسدلة بلا قيد فتتّسع بمحتواها. و`.input` يحمل `width:100%` فيجبر
 *      القائمة الحرّة على سطر كامل لنفسها.
 *      ⚠️ وقاعدتي السابقة في rhythm.css §٦ كانت **عاجزة** هنا: النمط السطريّ
 *      يهزم ورقة الأنماط. الإبطال داخل الشريط وحده هو ما ينفع.
 *
 *  §٣ كلّ الحالات رماديّة
 *      السبب: `AtheerMetricCard` **يبعث `data-tone` أصلًا** (نجاح · تحذير …)
 *      و`module.css` يصمّم `[data-tone]` لـ`.at-health-card` **ولا يصمّمه
 *      لـ`.at-metric-card`**. البيانات تصل واللون لا يُرسم — فتتساوى
 *      «متصل» و«غير متصل» في الرماديّ. لا يلزم تعديل جافاسكربت.
 * ════════════════════════════════════════════════════════════════════════════ */


/* ── §١ · بطاقة أعلنت flex سطريًّا تبقى صفًّا ──────────────────────────────
 * `h()` يطبّق النمط بـ`Object.assign(el.style, …)` ⇒ يُسلسَل إلى سمة style،
 * فمحدِّد السمة يبلغه. و`display: inline-flex` لا يطابق هذا النصّ. */
.card[style*="display: flex"] { flex-direction: row; }

/* الشاشة الضيّقة: الصفّ يلتفّ بدل أن يفيض */
@media (max-width: 640px) {
  .card[style*="display: flex"] { flex-wrap: wrap; }
}


/* ── §٢ · شريط المرشّحات: خلايا متساوية ───────────────────────────────────
 * التوقيع (flex + wrap + align-items:flex-end) يميّز أشرطة المرشّحات:
 * قِيس 15 حاويًا في 10 صفحات، مقابل 151 حاوي flex+wrap بلا flex-end فلا يُمَسّ.
 *
 * 🔴 والنطاق **الأبناء المباشرون وحدهم** (label · select · input) — لا أيّ
 * حقل في الشجرة. السبب مقيس: `user-portal.js:1557` يحمل التوقيع نفسه وليس
 * شريط مرشّحات، بل حقل «السماعة» وحده ملفوفًا بـ`formField` التي تُرجع
 * `div` لا `label`. محدِّدٌ سليل كان سيمطّ ذلك الحقل بلا سبب.
 * ⇒ ما لا يُغلَّف بـlabel لا يُلمَس: لا تحسين، ولا انحدار. */
:is(.filter-bar,
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: flex-end"]) {
  row-gap: 10px;
}

/* كلّ خليّة **بقياس ثابت** — لا نموّ.
 * ⚠️ `flex: 1 1` قيس فأعطى عرضين (185 و232): الخلايا تنمو لتملأ سطرها فيختلف
 * السطر الأوّل عن الثاني. الأساس الثابت وحده يعطي عرضًا واحدًا عبر كلّ
 * الأسطر — قيس: 200px لعشر خلايا من عشر. والفراغ في ذيل السطر ثمن الانتظام. */
:is(.filter-bar,
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: flex-end"])
  > :is(label, select, input) {
  flex: 0 0 200px;
  min-width: 0;
  max-width: 100%;
}

/* الأزرار تحتفظ بقياسها الطبيعيّ ولا تُقسَم كخليّة */
:is(.filter-bar,
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: flex-end"])
  > button {
  flex: 0 0 auto;
}

/* الحقل يملأ خليّته — `!important` لأنّ الخصم نمطٌ سطريّ (maxWidth: 130px …)،
 * ونطاقه الخليّة المباشرة وحدها. */
:is(.filter-bar,
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: flex-end"])
  > :is(label, select, input),
:is(.filter-bar,
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: flex-end"])
  > label > :is(input, select, textarea) {
  box-sizing: border-box;
}
:is(.filter-bar,
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: flex-end"])
  > :is(select, input),
:is(.filter-bar,
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: flex-end"])
  > label > :is(input, select, textarea) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
}

/* ارتفاع موحّد: القائمة المنسدلة والحقل النصّيّ يتساويان بصريًّا */
:is(.filter-bar,
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: flex-end"])
  > :is(select, input),
:is(.filter-bar,
    div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: flex-end"])
  > label > :is(input, select) {
  block-size: var(--at-control-h, 40px);
}

/* الشاشة الضيّقة: الخليّة تتقلّص ثمّ تنفرد بسطر — ولا تفيض أبدًا */
@media (max-width: 720px) {
  :is(.filter-bar,
      div[style*="display: flex"][style*="flex-wrap: wrap"][style*="align-items: flex-end"])
    > :is(label, select, input) {
    flex: 1 1 160px;
  }
}


/* ── §٣ · نغمات بطاقة الأرقام ─────────────────────────────────────────────
 * نفس اصطلاح `.at-health-card` في module.css — رقعة أيقونة ملوّنة، لا بطاقة
 * مغمورة باللون. والرقم يبقى بلون النصّ الأساسيّ: تلوين الأرقام الكبيرة
 * يخفض قابليّة المسح ويخاطر بالتباين، واللون هنا يرمز للحالة لا للقيمة.
 *
 * الرموز المستعملة مصحَّحة أصلًا في atheer-vireo-map.css:
 *   --at-success #1f6a3d على --at-success-bg #e7f4ec  =  5.81  ✓
 * (قيمة أثير الأصليّة #10b981 كانت تعطي 2.41 — لذلك لا تُستعمل هنا.) */
.at-metric-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 10px;
  flex: 0 0 auto;
  background: var(--at-surface-2, #f1f5f9);
  color: var(--at-text-muted, #64748b);
}

.at-metric-card[data-tone="success"] { --mc-tone: var(--at-success, #1f6a3d); }
.at-metric-card[data-tone="warning"] { --mc-tone: var(--at-warning, #7e5509); }
.at-metric-card[data-tone="danger"]  { --mc-tone: var(--at-danger,  #a6372a); }
.at-metric-card[data-tone="error"]   { --mc-tone: var(--at-danger,  #a6372a); }
.at-metric-card[data-tone="info"]    { --mc-tone: var(--at-info,    #245e9f); }

.at-metric-card[data-tone="success"] .at-metric-card__icon { background: var(--at-success-bg, #e7f4ec); color: var(--at-success, #1f6a3d); }
.at-metric-card[data-tone="warning"] .at-metric-card__icon { background: var(--at-warning-bg, #fbf1de); color: var(--at-warning, #7e5509); }
.at-metric-card[data-tone="danger"]  .at-metric-card__icon,
.at-metric-card[data-tone="error"]   .at-metric-card__icon { background: var(--at-danger-bg,  #fbe9e6); color: var(--at-danger,  #a6372a); }
.at-metric-card[data-tone="info"]    .at-metric-card__icon { background: var(--at-info-bg,    #e6effa); color: var(--at-info,    #245e9f); }

/* حدّ ملوّن خفيف يميّز البطاقة ذات الحالة دون صخب.
 * color-mix غير مدعوم ⇒ يسقط السطر ويبقى الحدّ الأصليّ. لا كسر. */
.at-metric-card[data-tone]:not([data-tone="neutral"]) {
  border-color: color-mix(in srgb, var(--mc-tone) 34%, var(--at-border, #e2e8f0));
}

/* شريط الحالة أعلى البطاقة — إشارة لونيّة تُقرأ قبل الرقم */
.at-metric-card[data-tone]:not([data-tone="neutral"])::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background: var(--mc-tone);
}
.at-metric-card { position: relative; overflow: hidden; }


/* ── §٤ · شارات الحالة بأسلوب Vireo ───────────────────────────────────────
 * قورنت بنية الشارتين فوُجدتا **متطابقتين هيكليًّا**: نصف قطر كبسوليّ ونقطة
 * 6px بـ`currentColor` في كليهما. الفارق الوحيد المرئيّ:
 *
 *   Vireo  .ax-badge--soft : border: 1px solid transparent   ← بلا إطار
 *   أثير   .at-badge[tone] : border-color: var(--at-success) ← إطار ملوّن
 *
 * الإطار الملوّن يصنع «رقاقة محدَّدة» أثقل بصريًّا من كبسولة القالب الناعمة.
 * إزالته وحدها تُطابق مظهر القالب — بلا لمس مكوّن ولا صنف.
 * التباين لا يتأثّر: النصّ والخلفيّة كما هما (5.6–5.9 فاتح · 5.6–7.4 داكن). */
.at-badge[data-tone="neutral"],
.at-badge[data-tone="info"],
.at-badge[data-tone="success"],
.at-badge[data-tone="warning"],
.at-badge[data-tone="danger"],
.at-badge[data-tone="brand"] { border-color: transparent; }

/* الشارة المحدَّدة تبقى متاحة بنيّة صريحة حين يُقصد التمييز بالإطار */
.at-badge[data-variant="outline"][data-tone="success"] { border-color: var(--at-success); }
.at-badge[data-variant="outline"][data-tone="warning"] { border-color: var(--at-warning); }
.at-badge[data-variant="outline"][data-tone="danger"]  { border-color: var(--at-danger); }
.at-badge[data-variant="outline"][data-tone="info"]    { border-color: var(--at-info); }


/* ── §٥ · صورة الخليّة: مربّع مستدير كالقالب ──────────────────────────────
 * Vireo يستعمل `.ax-avatar--squircle` (نصف قطر sm) في جداوله، لا دائرة.
 * الشكل هو توقيع القالب البصريّ الأظهر في صفوف الجدول.
 * ⚠️ اللون مُسنَد سطريًّا من تجزئة الاسم (`hashColor`) فيبقى كما هو —
 * تغييره يفقد التمييز اللونيّ المستقرّ لكلّ مستخدم. */
.at-cell-avatar__circle,
.at-cell-avatar__img { border-radius: var(--at-radius-sm, 8px); }


/* ── §٦ · توحيد حقول الإدخال في كامل النظام ───────────────────────────────
 * القياس قبل الإصلاح (10 صفحات · 44 حقلًا): **سبعة ارتفاعات مختلفة**
 *   40px×17 · 36px×12 · 22px×5 · 25px×4 · 27px×3 · 28px×1 · 90px×2 (مساحة نصّ)
 * القِصار (22–28) حقولٌ بلا حشو رأسيّ — تاريخ ووقت غالبًا — تبدو مضغوطة
 * بجوار جاراتها. و36 هو `--sm`. النتيجة صفٌّ واحد بثلاثة ارتفاعات أحيانًا.
 *
 * الارتفاع المعياريّ **40px**: هو الأكثر شيوعًا أصلًا (17 من 44) فاعتماده
 * أقلّ تغييرًا من أيّ رقم آخر، ويطابق إيقاع القالب.
 * رمز واحد يحكمه ⇒ تغييره لاحقًا سطر واحد. */
:root { --at-control-h: 40px; }

input.input, select.input,
input.field__input, select.field__input,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.settings-row input:not([type="checkbox"]):not([type="radio"]),
.settings-row select,
.pref-grid input:not([type="checkbox"]):not([type="radio"]),
.pref-grid select,
.form-grid input:not([type="checkbox"]):not([type="radio"]),
.form-grid select,
.form-row input:not([type="checkbox"]):not([type="radio"]),
.form-row select {
  block-size: var(--at-control-h);
  min-block-size: var(--at-control-h);
  box-sizing: border-box;
}

/* أنواع تُحدّد ارتفاعها ذاتيًّا في المتصفّح (تاريخ · وقت · شهر) — كانت
 * تعطي 22–28px لأنّ حشوها الرأسيّ صفر. تُساوى صراحةً. */
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"], input[type="week"], input[type="number"] {
  block-size: var(--at-control-h);
  min-block-size: var(--at-control-h);
  box-sizing: border-box;
}

/* مساحة النصّ تنمو بمحتواها — لا تُقاس بالارتفاع الموحّد */
textarea.input, textarea.field__input, .field textarea {
  block-size: auto;
  min-block-size: calc(var(--at-control-h) * 2.2);
  box-sizing: border-box;
}

/* الحقل يملأ خليّته في سياقات النماذج — كما يفعل القالب: العمود يحدّد
 * العرض لا الحقل. `!important` لأنّ الخصم `maxWidth` سطريّ (197 موضعًا). */
.pref-grid  :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
.form-grid  :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
.form-row   :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
.settings-row :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
.field      :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0;
}


/* ── §٧ · قائمة حجم الصفحة في تذييل الجدول ────────────────────────────────
 * `data.css:191` يعلن `height: 28px`، والقياس وجدها **36px في أربع صفحات
 * و28px في واحدة** — نفس المكوّن بمقاسين. هذا هو العيب، لا القِصَر نفسه:
 * تذييل الجدول كثيف عمدًا (والقالب كذلك)، فيبقى مضغوطًا **بقيمة واحدة**.
 * ⚠️ ليست ضمن الارتفاع الموحّد 40px — وهذا مقصود ومذكور. */
.at-grid__pag-size-sel {
  block-size: 32px !important;
  min-block-size: 32px !important;
  box-sizing: border-box;
}

/* 🔴 لماذا `!important` هنا وحدها في هذا الملفّ:
 * `select-enhance.js:216` يلتقط **لقطة** من الارتفاع المحسوب للقائمة الأصليّة
 * (`_ss.height`) ثمّ `:257` يجمّدها نمطًا سطريًّا على البديل المحسَّن
 * (`trigger.style.height = _sz.h`). فالقيمة تتبع **لحظة التحسين** لا ورقة
 * أنماط: 36px حيث سبق التحسينُ تطبيقَ القاعدة، و28px حيث تأخّر — وهو تفسير
 * التفاوت المقيس (36×4 · 28×1). ولا محدِّد يبلغ نمطًا سطريًّا بلا `!important`.
 * العلاج الجذريّ في `select-enhance.js` (ألّا يجمّد الارتفاع) وهو ملفّ تفاعل
 * حسّاس — يُترك لقرار المالك. 32px وسط بين القيمتين ويبقى التذييل كثيفًا. */

/* ملاحظة قياس مسجَّلة: `.at-listpage__search` هو الحقل المرئيّ (حدّ وحشو
 * ونصف قطر)، و`input` داخله بلا حدّ وشفّاف عمدًا. قياس الـ`input` يعطي 25px
 * ويوحي بعيب لا وجود له — **الغلاف هو ما يُقاس** (≈40px، مطابق أصلًا). */


/* ── §٨ · نصّ خافت لا يجتاز التباين — العلّة الأكبر في النظام ─────────────
 * التدقيق الشامل (١٦٠ صفحة) أعطى ١٢٨ صفحة بملاحظة تباين، و٥٦ زوج لون —
 * وكلّها تنهار إلى **سبب واحد**:
 *
 *   --at-text-muted  →  var(--atheer-gray-500)  →  #6e7a92   (atheer/tokens.css:68)
 *
 *   على #f0f3f9 (سطح ٢)  =  3.89   ✗
 *   على #f6f8fc (اللوحة)  =  4.06   ✗
 *   على #ffffff (سطح ١)  =  4.32   ✗
 *
 * 🔴 الخطأ خطئي في الخريطة: `--atheer-gray-500` رمز **لوحة ألوان**، ربطتُه
 * بـneutral-500 من Vireo، و`--at-text-muted` يستعير منه فصار لونَ نصٍّ لم
 * يُقَس كنصّ. وهو عين الدرس المسجَّل: **النصّ يحتاج رمزه الخاصّ.**
 *
 * العلاج: يُعطى رمز النصّ قيمته صراحةً — ولا تُمَسّ لوحة الرماديّ (تخدم
 * الحدود والخلفيّات حيث التغميق خطأ). والقيمة هي نفسها `--text-muted`
 * في الخريطة (#535e74) فيتّحد الفضاءان بدل أن يفترقا.
 *
 *   #535e74 على #f0f3f9 = 5.87  ·  على #f6f8fc = 6.13  ·  على #ffffff = 6.52  ✓
 *
 * الثيم الداكن سليم أصلًا (#8a9ab0 = 5.62) فلا يُمَسّ. */
:root { --at-text-muted: #3a4456; }        /* فاتح — أغمق وأوضح (9.81 على الأبيض) */

/* 🔴 **انحدار سبّبتُه ثمّ أمسكه المالك بالنظر:** كتبتُ السطر أعلاه على `:root`
 * مجرّدًا، **فسرى إلى الثيم الداكن أيضًا** — لونٌ داكن (#535e74) على سطح داكن
 * (#161a23) = **2.68**، أي تسميات وأيقونات لا تُقرأ.
 * والدرس: **أيّ رمز نصّ يُضبط لثيم يجب أن يُضبط للآخر في النفس الواحد** —
 * وإلّا أصلحتَ نصف الشاشة وكسرتَ نصفها، ولا فحص آليّ يُنبّهك لأنّ كلّ ثيم
 * يُقاس وحده. (وقياسي السابق فحص الفاتح فمرّ.)
 * القيم الآن: داكن 13.5 · فاتح 9.8 — كلاهما مريح لا مجرّد «مجتاز». */
[data-theme="dark"] { --at-text-muted: #dbe3ee; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --at-text-muted: #dbe3ee; }
}

/* الأيقونة المعطَّلة كانت باهتة جدًّا في الداكن — تُرفع دون أن تساوي النشطة،
 * فتمييز «متّصل/غير متّصل» يبقى قائمًا. */
[data-theme="dark"] { --at-text-disabled: #8f9cb0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --at-text-disabled: #8f9cb0; }
}


/* ── §٩ · أصناف حقول لم يبلغها §٦ ─────────────────────────────────────────
 * التدقيق الشامل عدّ 268 حقلًا: 245 منها 40px، و23 شاذّة بأصنافها الخاصّة:
 *   at-xfer__search-input ×14 (34px) · filter-input ×6 (36px)
 *   auth-field ×2 (44px) · search-input ×1 (36px)
 * كلّها حقول بحث/ترشيح لها أصناف خاصّة خارج قوائم §٦.
 * ⚠️ `auth-field` كان 44px — أكبر عمدًا في شاشة الدخول على الأرجح. وُحِّد
 *    بناءً على طلب «حجم واحد لكافة النظام»، والتراجع سطر واحد إن أُريد. */
.filter-input,
.search-input,
.auth-field,
.at-xfer__search-input {
  block-size: var(--at-control-h);
  min-block-size: var(--at-control-h);
  box-sizing: border-box;
}


/* ── §١٠ · بطاقة العميل داخل نافذة المكالمة الواردة ───────────────────────
 * 🔴 التمييز البصريّ هنا **خاصّية سلامة لا زينة**: بطاقة خاطئة أثناء مكالمة
 * حيّة أسوأ من لا بطاقة. فالهويّة المحسومة (`exact`) تُعرض بلهجة واثقة،
 * والمرشّحون (`ambiguous`) بلهجة تحذيريّة وعنوان صريح «لم تُحسم الهويّة».
 * ولو تشابهتا لظنّ الوكيل الاقتراحَ هويّةً — وهو الخطأ الذي نتجنّبه. */
.incoming-call__crm { margin-block-start: 10px; }

.incoming-call__crm-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border-radius: var(--at-radius-md, 12px);
  border: 1px solid var(--at-border, #cfd7e6);
  background: var(--at-surface-2, #f0f3f9);
  text-align: start;
}
.incoming-call__crm-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.incoming-call__crm-name { font-size: 15px; font-weight: 700; color: var(--at-text-primary, #151b27); }
.incoming-call__crm-sub  { font-size: 12px; color: var(--at-text-muted, #535e74); }
.incoming-call__crm-cands { display: flex; flex-direction: column; gap: 2px; margin-block-start: 2px; }
.incoming-call__crm-cand  { font-size: 13px; color: var(--at-text-secondary, #3a4456); }

/* محسومة — لهجة واثقة */
.incoming-call__crm-card[data-confidence="exact"] {
  border-color: var(--at-success, #1f6a3d);
  background: var(--at-success-bg, #e7f4ec);
}
.incoming-call__crm-card[data-confidence="exact"] .incoming-call__crm-tag { color: var(--at-success, #1f6a3d); }

/* ملتبسة — لهجة تحذيريّة، ولا تُرقّى إلى هويّة */
.incoming-call__crm-card[data-confidence="ambiguous"] {
  border-color: var(--at-warning, #7e5509);
  background: var(--at-warning-bg, #fbf1de);
  border-style: dashed;                     /* إشارة ثانية غير اللون — لعمى الألوان */
}
.incoming-call__crm-card[data-confidence="ambiguous"] .incoming-call__crm-tag { color: var(--at-warning, #7e5509); }


/* ── §١١ · شريط مرشّحات مُسمّى: نطاق أوسع بأمان ───────────────────────────
 * تقسيمٌ مقصود بين مصدرَي المعرفة:
 *   `.filter-bar`  صنف **صريح** — النيّة معلنة، فيشمل الغلاف `div` أيضًا.
 *   توقيع النمط السطريّ — **مستنتَج**، فيبقى على الأبناء المباشرين وحدهم
 *                          (وإلّا مُطّ حقل «السماعة» في بوّابة المستخدم).
 * قِيس على `maintenance-operation-logs`: أبناؤه `grp()` تُرجع `div`، فلم تبلغها
 * القاعدة المستنتَجة — والعروض 160/176/227. الصنف الصريح يحسمها. */
.filter-bar > div:not(.filter-actions) {
  flex: 0 0 200px;
  min-width: 0;
  max-width: 100%;
}
.filter-bar > div:not(.filter-actions) :is(input, select, textarea) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box;
}
.filter-bar > .filter-actions { flex: 0 0 auto; }

@media (max-width: 720px) {
  .filter-bar > div:not(.filter-actions) { flex: 1 1 160px; }
}


/* ── §١٢ · محاذاة الحقول حين تتفاوت أطوال التسميات ───────────────────────
 * 🔴 **نسختي الأولى من هذه القاعدة أحدثت العطب الذي أرادت إصلاحه** — وسجّلتها
 * كما وقعت لأنّ الدرس أهمّ من القاعدة:
 *
 *   دفعتُ الحقل إلى أسفل الخليّة (`margin-block-start: auto`) ظنًّا أنّه يوحّد
 *   خطّ الأساس. والقياس على `pbx-jitter-buffer` كشف العكس: الخليّة الأخيرة
 *   بلا `margin-block-end` (قاعدة `:last-child` معتادة) **فتتمدّد** إلى ارتفاع
 *   الصفّ (78px) بينما جارتاها 64px + 14px هامشًا. فدفعُ الحقل إلى الأسفل
 *   أنزل حقلها **١٤ بكسل تحت** جاريه: 1895 · 1895 · **1909**.
 *
 * العلاج الصحيح عكس ذلك تمامًا: **امنع التمدّد** فتقيس كلّ خليّة بمحتواها،
 * وتستقرّ الحقول على خطّ واحد بلا دفعٍ ولا هوامش تُعوَّض.
 * ⚠️ والنطاق محصور بـ`:has(> .form-label)` — و`.form-group` مستعملة ١٦٧ مرّة. */
.form-group:has(> .form-label) {
  display: flex;
  flex-direction: column;
  align-self: start;          /* لا تمدّد ⇒ لا فارق يُعوَّض */
}
.form-group:has(> .form-label) > .form-label { flex: 0 0 auto; }


/* ── §١٣ · الرقم يتبع نبرة بطاقته ─────────────────────────────────────────
 * كانت الأرقام كلّها بلون النصّ الأساسيّ (اخترتُ ذلك أوّلًا لأنّ تلوين الأرقام
 * الكبيرة يخفض قابليّة المسح). والمالك طلب صراحةً تلوينها — وهو قراره.
 *
 * التباين مُتحقَّق للطرفين (الرقم 24px ثقيل ⇒ عتبته 3.0، ويتجاوز 4.5 فعليًّا):
 *   فاتح: نجاح 6.57 · خطر 5.94 · تحذير 6.24 · معلومة 5.93   على #ffffff
 *   داكن: يستعمل طرف السلّم الفاتح من الخريطة (46b36f · e68074 · e0a53a · 5a95da)
 * والمحايد يبقى بلون النصّ الأساسيّ — لا يُخفَّت، فالرقم هو المعلومة. */
.at-metric-card[data-tone="success"] .at-metric-card__value { color: var(--at-success, #1f6a3d); }
.at-metric-card[data-tone="warning"] .at-metric-card__value { color: var(--at-warning, #7e5509); }
.at-metric-card[data-tone="danger"]  .at-metric-card__value,
.at-metric-card[data-tone="error"]   .at-metric-card__value { color: var(--at-danger,  #a6372a); }
.at-metric-card[data-tone="info"]    .at-metric-card__value { color: var(--at-info,    #245e9f); }


/* ── §١٤ · سواد الشريط العلويّ لا يطابق ما تحته ───────────────────────────
 * 🔴 خطأ في خريطتي: ربطتُ `--bg` و`--sidebar-*` و`--surface-*` **وتركتُ
 * عائلة `--topbar-*` كلّها بلا ربط**، فبقي الشريط على اللوحة القديمة وتحرّك
 * كلّ ما حوله ⇒ سوادان مختلفان بخطّ فاصل مرئيّ:
 *
 *   tokens.css (داكن) :  --bg: #051424  ·  --topbar-bg: #051424   ← متطابقان
 *   بعد خريطتي        :  --bg: #0a0c11  ·  --topbar-bg: #051424   ← انفصلا
 *
 * ⚠️ والقاعدة ليست «الشريط = الخلفيّة»: في الفاتح كان `--topbar-bg: #ffffff`
 * و`--bg: #faf8ff` — **مختلفين بقصد**. القاعدة الحقيقيّة عبر الثيمين هي
 * **الشريط = السطح المرتفع (`surface-1`)**: في الفاتح `#fff` (مطابق للأصل
 * فلا يتغيّر شيء)، وفي الداكن `#161a23` فيتّحد الشريط مع الشريط الجانبيّ
 * ويبقى المحتوى أغمق — بنية داكنة متّسقة.
 *
 * التباين: `#eaedf3` على `#161a23` = 13.6 · `#151b27` على `#fff` = 16.4 ✓ */
:root {
  --topbar-bg: var(--surface-1, #fff);
  --topbar-fg: var(--text-primary, #151b27);
  --topbar-border: var(--divider, #10162814);
}