/* ════════════════════════════════════════════════════════════════════════════
 * atheer-a11y-controls.css — عيوبٌ قِيست، لا ذوقٌ شخصيّ.
 *
 * كلّ قاعدةٍ هنا مسنودةٌ برقمٍ من `guard/design-audit.mjs` على ١٧٨ مسارًا:
 * لا تُضاف قاعدةٌ بلا حالةٍ مرصودة، ولا تُرصد حالةٌ بلا قاعدة.
 *
 * ⚠️ تُحمَّل **بعد** كلّ الأوراق: تصحّح ما تعرّفه الطبقات السابقة، وأيّ ترتيبٍ
 * أسبق يُغلَب. (رُصد سابقًا في جسر الرموز: قواعدُ صحيحة بلا أثر لهذا السبب.)
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── ١ · أزرار الأيقونات الصغيرة  ·  ٢١ حالة في ٦ صفحات ────────────────────
 * `.btn-xs.btn-icon` مقاسها ٢٨×٢٨، والسلّم المعتمد في أثير ٤٠ و٣٢ فقط.
 * ٢٨ ليست مقاسًا ثالثًا بل انفلاتٌ من السلّم — وهي دون أصغر هدفٍ مريح للإصبع.
 * تُرفع إلى ٣٢ **بلا تكبير الأيقونة**: الهدف يكبر والشكل لا يتغيّر.
 *
 * 🔴 المحدِّد `.at-cell-inline-actions__btn` — لا `.btn-xs.btn-icon`. جرّبتُ
 * الثاني أوّلًا فلم يتحرّك شيء، وكشف القياس أنّ أزرار الجداول صنفٌ آخر.
 * القاعدة: يُؤخذ المحدِّد من الصفحة الحيّة لا من البحث في الأنماط. */
.at-cell-inline-actions__btn,
.btn-xs.btn-icon,
.icon-btn--xs {
  inline-size: 32px;
  block-size: 32px;
  min-inline-size: 32px;
  min-block-size: 32px;
}

/* ── ٢ · خانات الاختيار الأصليّة  ·  ١٣٦ حالة في ٤٦ صفحة ───────────────────
 * ‏٤٦ صفحة تستعمل `<input type=checkbox>` عاريةً (١٦×١٦) بدل `.ax-checkbox`
 * المصمَّمة (١٨×١٨). لا يُفرض الشكل هنا — يُفرض **الحجم** فقط، فالتوحيد
 * البصريّ الكامل يحتاج تعديل ٤٦ صفحة وهو عملٌ منفصل.
 *
 * ⚠️ ‏١٨px يرفع المربّع نفسه ولا يبلغ به هدفَ اللمس المريح. توسيعُ منطقة
 * النقر يحتاج `<label>` يلفّ الخانة — وهو تعديلٌ في الصفحات لا في الأنماط.
 * فلا أدّعي هنا ما لا تفعله القاعدة. */
input[type="checkbox"]:not(.ax-checkbox),
input[type="radio"]:not(.ax-radio) {
  inline-size: 18px;
  block-size: 18px;
  cursor: pointer;
}

/* ── ٣ · روابط «اتّصل» في الجداول  ·  ٢٣ حالة في ٦ صفحات ───────────────────
 * ارتفاعها ١٨–٢٥px لأنّها نصٌّ سطريّ بلا حشو. وهي **الفعل الأساسيّ** في
 * مركز اتصال — لا زخرفة. تُرفع إلى ٣٢ — مقاس السلّم — لا ٢٨: جرّبتُ ٢٨ أوّلًا
 * فبقيت دون الحدّ، والسلّم المعتمد ٤٠ و٣٢ فحسب.
 *
 * المحدِّد `.at-c2c-link` لا `a[href^="tel:"]`: أثير لا يستعمل `tel:` إطلاقًا
 * — الاتّصال يمرّ بـ`placeCall()` عبر الـAPI، والعنصر زرٌّ لا رابط. */
.at-c2c-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-block: 6px;
  min-block-size: 32px;
}

/* ── ٤ · عزل الاتّجاه  ·  ٣١ حالة في ١٧ صفحة ───────────────────────────────
 * قِيس فعليًّا لا بالتخمين: محرفٌ محايد ينفصل بصريًّا عن رقمه/كلمته.
 * الحالات المرصودة: «@ibitikar» في لوحة السوشال، و«(Call…» و«(Client…»
 * و«(Access…» في صفحات الرموز والتكاملات — القوس يقفز إلى الطرف الخطأ.
 * `isolate` تحلّ الجملة كوحدةٍ مستقلّة فيبقى المحايد مع ما يخصّه. */
.bidi-iso,
code, kbd, samp,
[data-handle],
.api-key__value, .sdk-snippet, .feature-code__code {
  unicode-bidi: isolate;
}

/* ── ٥ · القصّ بلا «…»  ·  ٧ حالات في ٧ صفحات ─────────────────────────────
 * حقولٌ ولوحاتٌ يفيض نصّها فيُقطع بلا علامةِ استمرار، فيبدو النصّ ناقصًا
 * لا مقصوصًا — والفرق بينهما هو الفرق بين «مصمَّم» و«معطوب». */
.input, .master-limit__num, .health-pill, .wallboard__refresh {
  text-overflow: ellipsis;
}

/* ── ٦ · علامة «غير ممنوح» في مصفوفة الصلاحيّات  ·  ١٠٦ حالة في صفحة ────────
 * أثقل صفحةٍ في التدقيق كلّه — وربع حالات التباين فيها وحدها. السبب سطرٌ
 * واحد في `rbac-matrix.js`: أيقونة «غير ممنوح» تُرسم بلون **الحدّ**
 * (`--border` = #dae2fd) فتبلغ ١٫٤٥:١ — أي لا تُرى.
 *
 * وهذا عيبٌ وظيفيّ لا تجميليّ: في مصفوفة صلاحيّات يحتاج القارئ أن يميّز
 * «ممنوعة» من «خليّة فارغة»، وإذا اختفت العلامة استوى الأمران.
 *
 * الخفوت مقصودٌ ويُحترَم — لكن ٣:١ (حدّ WCAG للعناصر غير النصّيّة) هو الفرق
 * بين «هادئ» و«غائب». والقيمتان محسوبتان لا مُقدَّرتان:
 *   الفاتح  #8a8fa3 على #ffffff = 3.21
 *   الداكن  #6b7280 على #0d1c2d = 3.56
 * وكلتاهما تبقى دون `--text-muted` (4.99 / 5.42) فلا تنافس الممنوحة. */
:root { --at-mark-off: #8a8fa3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --at-mark-off: #6b7280; }
}
:root[data-theme="dark"] { --at-mark-off: #6b7280; }

/* ── ٧ · تباين الشارات  ·  ٢٦٦ حالة، أثقلها ٥٥ في لوحة الأمن ────────────────
 * قِيست الألوان الفعليّة، وكانت غير ما ظننت: ليست `--accent` بل الشارات.
 *   ‏#007a52 على #beddd3 = 3.71   (badge--success)
 *   ‏#0369a1 على #c2dae8 = 4.09   (badge--info)
 * وهي الخلفيّات «المغبَّرة» عينها التي وثّقتها في `atheer-tone-purity.css`
 * وأصلحتها هناك **للبطاقات فقط** — والشارات بقيت على القديم.
 *
 * القاعدة واحدة لأنّ الخلفيّة تُشتقّ من `currentColor`: كلّ نوعٍ يأخذ صبغة
 * نصّه هو، وكلّ سمةٍ تتبع سطحها — فلا جدول ألوانٍ ثانٍ يُنسى تحديثه، ولا
 * قاعدة لكلّ حالة. و١٠٪ لا ١٥٪: قِيست النِسب الأربع عند ١٥ و١٢ و١٠،
 * و«تحذير» وحدها لا تعبر ٤٫٥ إلّا عند ١٠ (4.59).
 *
 *   success 4.67 · info 5.13 · danger 4.78 · warning 4.59  — كلّها ≥ 4.5 */
/* ⚠️ `--danger` مذكورةٌ صراحةً: أغفلتها في التمريرة الأولى فبقيت ٤ حالات
   عند 3.88 في لوحة العمليّات. عائلةُ أصناف تُسرد كاملةً أو تُنسى واحدةٌ منها. */
.badge--success,
.badge--warning,
.badge--error,
.badge--danger,
.badge--info,
.badge--accent {
  background: color-mix(in srgb, currentColor 10%, var(--surface-1, #fff));
}

/* ── ٨ · اللون الأساس في الثيم الداكن  ·  ~٦٠ حالة ─────────────────────────
 * `atheer-vireo-map.css` يعرّف اللوحة ثلاث مرّات (فاتح · داكن بالسمة · داكن
 * بتفضيل النظام). وفي **كتلتَي الداكن** لُوّن كلّ رمزٍ للداكن — النصّ الثانويّ
 * والخافت والروابط — **إلّا `--accent`**: بقي `#2a5fcc`، قيمة الفاتح.
 *
 * فكلّ أيقونةٍ ورابطٍ بـ`var(--accent)` يبلغ ٢٫٩٩ على `#161a23`.
 * والمفارقة أنّ `--at-accent` عولج سابقًا (`#5ab9ff`) — فبقي في الواجهة
 * نظاما لونٍ أساسٍ متناقضان في الشاشة الواحدة.
 *
 * 🔴 والرفع وحده يكسر: اللون **يملأ** الأزرار الأساسيّة ونصّها `--text-on-
 * accent: #fff`. أبيضُ فوق `#5ab9ff` = ٢٫١٤ — أسوأ ممّا كان.
 * فالنمط المعتمد كاملًا: **ملءٌ فاتح ونصٌّ داكن** (وهو ما فُعل في
 * `atheer-ax.css` للـ`--at-accent`) — والقيم مقيسة:
 *
 *   ‏#5ab9ff على #161a23  →  8.14 ✓   (أيقونةً ورابطًا)
 *   ‏#0a0c11 فوق #5ab9ff  →  9.15 ✓   (نصًّا فوق الملء)
 *
 * والحالتان إلزاميّتان: الاختيار الصريح وتفضيل النظام. كتلةٌ واحدة تترك نصف
 * المستخدمين على اللون الخاطئ. ولا يُمسّ الفاتح إطلاقًا. */
:root[data-theme="dark"] {
  --accent: #5ab9ff;
  --accent-hover: #7cc8ff;
  --accent-active: #9ad4ff;
  --text-on-accent: #0a0c11;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #5ab9ff;
    --accent-hover: #7cc8ff;
    --accent-active: #9ad4ff;
    --text-on-accent: #0a0c11;
  }
}

/* ── ٩ · شارات `at-badge` وألسنة `ax-tabs` ────────────────────────────────
 * عائلةٌ ثانية من الشارات فاتتني في القاعدة ٧ لأنّ صنفها `.at-badge` لا
 * `.badge`: ‏#0369a1 على #c2dae8 = 4.09. والمبدأ نفسه — الخلفيّة من
 * `currentColor` — يصحّ عليها وعلى اللسان النشط (4.33). */
/* `[data-tone]` رافعةُ نوعيّة: القاعدة العارية `.at-badge` تُغلَب بقواعد
   النغمة المعرَّفة بالسمة، فبقيت ١٣ حالة عند 4.09. */
.at-badge,
.at-badge[data-tone],
.at-badge[data-tone] .at-badge__label,
.ax-tabs__tab.is-active,
.ax-tabs__tab.is-active[aria-selected="true"] {
  background: color-mix(in srgb, currentColor 10%, var(--surface-1, #fff));
}

/* ── ١٠ · أيقونات نوع الجهاز في جدول التحويلات  ·  ١٦ حالة ────────────────
 * ‏#94a0b8 على الأبيض = 2.63 — دون حدّ ٣:١ للمحتوى غير النصّيّ. وهي تحمل
 * معنًى: أيّ الأجهزة مسجَّل. ‏#7d8496 = 3.74، ويبقى خافتًا فلا يزاحم البيانات. */
/* 🔴 هذه القاعدة كانت تبتلع الحالة النشطة (كُشف ٢٠٢٦-٠٩-٠٦).
 * كُتبت بنوعيّة ٠٬٣٬٠ و**بلا استثناء `[data-active]`**، فطلَت الرمزَ المسجَّل
 * رماديًّا أيضًا وغلبت قاعدةَ الأزرق في `bridge.css` (٠٬٢٬٠). فبدا كلُّ جهاز
 * غيرَ مسجَّل، ولم يعد يُعرف المتّصل من غيره — وهو ما أبلغ عنه المالك بـ«انكسر
 * فجأة»: لم تنكسر بيانات، بل ابتلع تدقيقُ التباين حالةً لم يقصدها.
 *
 * والشرطان متعارضان رياضيًّا: مع أزرقٍ داكنٍ لامع (7.80 فوق السطح) لا يوجد
 * رماديٌّ يبعد ٣ عنه ويبقى ٣ فوق السطح معًا. و«غير مسجَّل» حالةٌ معطَّلة،
 * وWCAG 1.4.11 يستثني المعطَّل من حدّ التباين — فالأولويّة للتمييز.
 * ‏#5f6b7d: يبقى 3.09 فوق السطح (فلا يُنقض التدقيق) ويرفع الفصل عن الأزرق
 * من 1.19 إلى 2.53. والفاتح #8d94a4: 3.04 فوق الأبيض و1.44 عن الأزرق.
 * ⚠️ أيّ قاعدةٍ لاحقة تلوّن هذا الرمز يجب أن تحمل `:not([data-active="true"])`. */
.at-cell-devices__ic:not([data-active="true"]) { color: #8d94a4; }
:root[data-theme="dark"] .at-cell-devices__ic:not([data-active="true"]),
:root:not([data-theme="light"]) .at-cell-devices__ic:not([data-active="true"]) { color: #5f6b7d; }

/* الحالة النشطة وحالات المكالمة — تُعاد هنا بنوعيّة تكفي لتجاوز أيّ ورقةٍ سابقة،
 * لأنّ هذه آخرُ ورقةٍ تُحمَّل. الألوان هي ذاتها في `bridge.css`/`cells.css`
 * (لا لونَ جديد) — الغرض ضمان الوصول لا التغيير. */
:root .at-cell-devices__ic[data-active="true"] { color: var(--at-accent, #1278e0); }
:root .at-cell-devices__ic[data-active="true"][data-callstate="ringing"] { color: #f59e0b; }
:root .at-cell-devices__ic[data-active="true"][data-callstate="busy"]    { color: #dc2626; }
:root .at-cell-devices__ic.is-ringing,
:root .at-cell-devices__ic[data-incall="true"] { color: var(--at-success, #16a34a); }

/* ── ١١ · علامات المستأجر في لوحة المالك  ·  حالتان، وكلتاهما «غير مرئيّة» ──
 * `.master-top__mark` و`.master-tenant-item__mark` تضعان `color: white`
 * **بلا خلفيّة**، والـJS لا يمرّر لونًا. فالأحرف بيضاء على سطحٍ أبيض: 1.00:1.
 * القاعدة كانت تفترض خلفيّةً لم تُكتب قطّ.
 * ‏#0a5dc2 (`--accent-tertiary`) يعطي أبيضَ فوقه 6.25 ✓ */
.master-top__mark,
.master-tenant-item__mark {
  background: var(--accent-tertiary, #0a5dc2);
}

/* ── ١٢ · نصّ الزرّ الأساسيّ يتبع الرمز لا لونًا مثبَّتًا ────────────────────
 * القاعدة ٨ رفعت `--accent` للداكن فصار الملء فاتحًا — وارتدّ التباين من
 * ٢١٦ إلى ٣٣٨ لأنّ ٢٤٩ عنصرًا صار أبيضَ على أزرق فاتح = 2.14.
 *
 * والسبب سألتُ عنه المتصفّح لا الشيفرة (`CSS.getMatchedStylesForNode`)،
 * فأجاب بقاعدتين متأخّرتين تدهسان الرمز:
 *     .btn--primary, .btn-primary                      { color: #fff }
 *     .btn--primary, .btn.btn--primary, button.btn…    { color: #fff }
 * والأخيرة نوعيّتها (0,3,1) فتغلب `--text-on-accent` في `components.css`.
 *
 * فتُعاد إلى الرمز بنوعيّةٍ مكافئة (وورقتي تُحمَّل أخيرًا فتغلب عند التكافؤ).
 * ولا يتغيّر الفاتح: `--text-on-accent` هناك `#fff` كما كان.
 *
 * ⚠️ وهذا ليس تناقضًا جديدًا بل إزالةُ قائم: `.ax-btn--primary` في الشجرة
 * نفسها تستعمل `--ax-on-accent` (نصٌّ داكن فوق ملءٍ فاتح) منذ البداية —
 * فكان في الشاشة الواحدة زرّان أساسيّان بسلوكَي لونٍ مختلفين. */
.btn--primary,
.btn.btn--primary,
button.btn.btn--primary,
.btn-primary {
  color: var(--text-on-accent, #fff);
}

/* ── ١٣ · القوائم المنسدلة المفقودة بصريًّا في نموذج الطابور ────────────────
 * رصده المالك في الحيّ: «الاستراتيجية» و«وقت إعادة المحاولة» و«وقت الإغلاق»
 * و«أقصى انتظار» تظهر تسمياتها بلا حقول — بينما «رقم الطابور» و«الاسم»
 * و«هدف SLA» تظهر كاملةً.
 *
 * السبب سطرٌ واحد: `refine.css` يعطي `.form-input` خاصّية `appearance: none`
 * فتفقد القائمة سهمها الأصليّ؛ ثمّ قائمةُ القواعد التي تُعيد السهم البديل
 * تشمل `select.input` و`select.field__input` و`select.form-select` و
 * `select.filter-input` — **ولا تشمل `select.form-input`**، وهو الصنف الذي
 * يبني به نموذجُ الطابور قوائمه (٣٠ حقلًا، منها ١٧ قائمة).
 * فالنتيجة قائمةٌ بلا سهمٍ أصليّ ولا بديل: على بطاقةٍ داكنة صندوقٌ لا يُرى.
 *
 * ⚠️ والخيارات لم تُفقد إطلاقًا: الاستراتيجيّات الستّ موجودة في الشيفرة.
 * العطب في التصيير وحده. */
select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: calc(100% - 12px) center;
  padding-inline-end: 34px;
}
[dir="rtl"] select.form-input {
  background-position: 12px center;
  padding-inline-end: var(--space-3, 12px);
  padding-inline-start: 34px;
}

/* ── ١٤ · انتظام عرض الحقول في نموذج الطابور ────────────────────────────────
 * قِيس: «الاستراتيجيّة» ٩٢px و«شرط التوقيت» ٣١٠px في الصفّ نفسه — الحقل
 * يتحجّم بمحتواه، والعين تقرأ التفاوت اضطرابًا لا تنوّعًا.
 *
 * 🔴 وهنا وقعتُ في خطأٍ يستحقّ التسجيل: كتبتُ أوّلًا
 *     .at-qform .form__grid > .form-group { flex: 1 1 240px }
 * فقياسُ الصفوف كشف أنّ `.form__grid` **عموديّةٌ في مواضع**
 * (`flex-direction: column`) — وفي العموديّة يكون `flex-basis` **ارتفاعًا**،
 * فصار كلّ حقلٍ ٢٤٠px طولًا وامتدّت الحاوية إلى ١٣٢٠px. عيبٌ أحدثتُه أنا.
 *
 * والصواب: لا يُلمس المحور الرئيسيّ إطلاقًا. العرض في الحاوية العموديّة
 * يضبطه `align-items: stretch`، وفي الصفّيّة يكفي أن يملأ الحقلُ خليّته.
 * فكلا الحالتين تُخدَم بلا افتراضِ اتّجاه. */
.at-qform .form__grid { align-items: stretch; }
.at-qform .form__grid > .form-group { min-inline-size: 0; }
.at-qform .form__grid > .form-group > .form-input,
.at-qform .form__grid > .form-group > select,
.at-qform .form__grid > .form-group > input,
.at-qform .form__grid > .form-group > textarea { inline-size: 100%; }

/* ── رابط مسار التنقّل ──────────────────────────────────────────────────────
 * 🔴 **٩٤ من ١٦٥** بلاغَ «هدف لمسٍ صغير» في المنصّة كلّها كانت هذا الرابط
 * الواحد: «الرئيسية» ٣٧×٢٢ يتكرّر في كلّ صفحة. المعيار (WCAG 2.5.8 · AA)
 * ٢٤×٢٤، والعرض يمرّ سلفًا — فالناقص بكسلان في الارتفاع.
 *
 * وقاعدةٌ واحدة هنا تُسقط أكثر من نصف الرقم، بدل ٩٤ تعديلًا في الصفحات.
 * والأثر البصريّ لا يُذكر: الشريط مرن، فينمو بكسلين ويبقى النصّ بمقاسه. */
.breadcrumb__item a {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
}