/* ════════════════════════════════════════════════════════════════════════════
 * atheer-fields.css — الحقول بحجمٍ واحد فعلًا
 *
 * الملاحظة كانت: «لاحظ أحجام الخانات مختلفة وليس مثل القالب». والقياس
 * أثبتها وكشف أنّ السبب **سببان مستقلّان**، لا واحد:
 *
 * ── العلّة الأولى: الحقل ينمو رأسيًّا ────────────────────────────────────
 * `components.css` يكتب `.field__input { flex: 1 1 0% }` — كُتبت لصفٍّ
 * **أفقيّ** (`.field--inline`)، لكنّها تنطبق على كلّ حقل في المنصّة. وحاوية
 * الحقل `.at-wiz__field` عمودٌ مرن، فمحورها الرئيس **رأسيّ**.
 *
 * والنتيجة تظهر في الشاشات العريضة وحدها — ولهذا لم يُمسك سابقًا: حين تقع
 * ثلاثة حقول في صفٍّ واحد، يرفع الحقلُ **ذو التلميح** ارتفاعَ الصفّ إلى
 * ٩١px، فيبتلع مربّعُ الحقل الذي بلا تلميح تلك الزيادة كلّها ويصير ٧٠px
 * بدل ٤٠px. أي أنّ «اسم المستخدم» بدا ضِعف «اسم الخطّ» لأنّ جاره يحمل سطر
 * شرحٍ وهو لا يحمله. وفي نافذةٍ ضيّقة ينزل كلٌّ في صفّه فيختفي العَرَض —
 * ولذلك قِستُ العريض قبل أن أحكم.
 *
 * ── العلّة الثانية: القائمة المنسدلة مكوّنٌ آخر ─────────────────────────
 * `select-enhance.js` يستبدل `<select>` الأصليّ بـ`.at-csel`، والأصليّ يصير
 * طبقةً شفّافة. فالمرئيّ `.at-csel__trigger` — ولا تصله قواعد `.field__input`
 * إطلاقًا. القياس:
 *
 *              حقل الإدخال      المنسدلة        الفارق
 *   الارتفاع      ٤٠px           ٤٢٫٥px        +٢٫٥
 *   حجم الخطّ     ١٣px            ١٤px          +١
 *   نصف القطر     ٤px             ٦px           +٢   ← ويخالف المقياس الحادّ
 *
 * ثلاثُ خصائص لا واحدة، وفي **كلّ** قائمة منسدلة في المنصّة لا في هذا
 * المعالج. ولهذا الإصلاح هنا لا في صفحة المعالج.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── ١ · الحقل لا يبتلع ارتفاع الصفّ ──────────────────────────────────────
 * `flex-grow: 0` وحده — لا `flex: none` — كي يبقى التقلّص متاحًا فلا يفيض
 * الحقل عن حاويته في الصفوف الضيّقة. */
.field__input,
.at-input,
.input,
.ax-input { flex-grow: 0; }

/* والاستثناءات صفوفٌ **أفقيّة** يُقصد فيها أن يملأ الحقل ما تبقّى.
 * تُعاد صراحةً لأنّ القاعدة أعلاه تلغيها بحكم الترتيب. */
.at-wiz__copyrow .field__input,
.field--inline .field__input,
.field--inline .at-input,
.cluster > .field__input,
.cluster > .at-input,
.cluster > .input,
.at-listpage__search,
.at-filterbar .input { flex-grow: 1; }

/* ── ٢ · المنسدلة بمقاس الحقل حرفًا بحرف ──────────────────────────────────
 * الثلاثة معًا: من يصلح الارتفاع ويترك الخطّ والزاوية يُبقي الصفّ مختلًّا
 * بطريقةٍ أهدأ لا أقلّ. */
.at-csel__trigger {
  block-size:     var(--at-control-h, 40px);
  min-block-size: var(--at-control-h, 40px);
  padding-block:  0;
  font-size:      var(--ax-text-sm, 13px);
  border-radius:  var(--at-radius-sm, 4px);
}
/* والغلاف يأخذ ارتفاع زرّه فلا يُضيف سطرًا خفيًّا تحته. */
.at-csel { display: block; }
/* 🔴 `display:block` صحيح داخل حقلٍ في نموذج (يملأ عرض الحقل)، لكنّه يجعل
 * المنسدلة تأخذ **عرض الصفحة كاملًا** داخل شريط أدوات مرن — فتُدفَع إلى سطرٍ
 * وحدها ويتكدّس الشريط عموديًّا. (رُصد في «جهات اتصال الشركة»: البحث ٣٢٠px
 * ومنسدلتان بـ١٢٤٠px لكلٍّ منهما.)
 *
 * والنطاق محدود عمدًا — أشرطة الأدوات وحدها — لأنّ تعميم `auto` يُفقد
 * المنسدلات داخل النماذج محاذاتها مع بقيّة الحقول. */
.cluster > .at-csel,
.at-listpage__toolbar .at-csel,
.at-wiz__toolbar .at-csel {
  inline-size: auto;
  flex: 0 0 auto;
}
.cluster > .at-csel > .at-csel__trigger,
.at-listpage__toolbar .at-csel > .at-csel__trigger { min-inline-size: 150px; }
.at-csel > select.at-csel__native { block-size: 100%; }

/* المنسدلة الصغيرة تتبع مقاس الحقل الصغير نفسه (٣٢px). */
.input--sm ~ .at-csel .at-csel__trigger,
.at-csel--sm .at-csel__trigger {
  block-size: var(--at-control-h-sm, 32px);
  min-block-size: var(--at-control-h-sm, 32px);
}


/* ── ٣ · الحقل يبدأ من أعلى خليّته ────────────────────────────────────────
 * فحين يختلف طول التلميحات بين حقول الصفّ، تبقى **رؤوس** الحقول مصطفّةً
 * والفراغ ينزل إلى الأسفل — وهو تركيب `forms/wizard.html` في القالب. */
.at-wiz__fields,
.form-grid,
.at-form-grid { align-items: start; }

/* ── ٤ · الزرّ والحقل في صفٍّ واحد ────────────────────────────────────────
 * القالب يستعمل **ارتفاعًا واحدًا** لكلّ عناصر التحكّم:
 *   `--ax-control-h: 38px` تقرؤها `.ax-btn` و`.ax-input` معًا.
 * وأثير تفترق: الحقل ٤٠px (`--at-control-h`) والزرّ القديم `.at-btn` بلا
 * ارتفاع مصرَّح فيخرج ٣٦px من حشوه. أربعة بكسلات لا تُرى حين يفترقان في
 * صفّين، وتُرى تعرّجًا واضحًا حين يقعان في صفٍّ واحد.
 *
 * فالتسوية هنا **مقصورة على الصفوف المشتركة** لا معمَّمة: تغيير ارتفاع كلّ
 * زرّ في المنصّة قرارٌ أوسع من الملاحظة، وأتركه للمالك صراحةً. */
.at-listpage__toolbar .at-btn:not([data-size="sm"]):not([data-size="xs"]),
.at-listpage__split   .at-btn:not([data-size="sm"]):not([data-size="xs"]),
.at-filterbar         .at-btn:not([data-size="sm"]):not([data-size="xs"]),
.at-wiz__foot         .at-btn:not([data-size="sm"]):not([data-size="xs"]),
.at-toolbar           .at-btn:not([data-size="sm"]):not([data-size="xs"]) {
  block-size: var(--at-control-h, 40px);
  min-block-size: var(--at-control-h, 40px);
}

/* ── ٥ · منسدلة حجم الصفحة في الجداول ────────────────────────────────────
 * ٣٢px هو المقاس الصغير المعتمد وهذا صحيح، لكنّ نصف قطرها كان ٢px بينما
 * الحقل الصغير ٤px. الحجم كان متّفقًا والزاوية لم تكن. */
.at-grid__pag-size-sel { border-radius: var(--at-radius-sm, 4px); }

/* ══════════════════════════════════════════════════════════════════════════
 * ٦ · صفّ أدوات صفحات القوائم — ارتفاع واحد
 *
 * القياس على `inbound-routes` قبل الإصلاح — **ثلاثة ارتفاعات في صفٍّ واحد**:
 *   زرّ الأدوات    ٤٠px · خطّ ١٣
 *   حقل البحث      ٣٦px · خطّ ١٣
 *   مرشِّح الحالة   ٣٢px · خطّ ١٢
 * وهذا هو «اختلاف الخانات» نفسه الذي رُصد في المعالج، لكنّه هنا يتكرّر في
 * كلّ صفحة قائمة في المنصّة.
 *
 * والقالب يستعمل ارتفاعًا واحدًا لكلّ عناصر شريط الأدوات. فالمعيار هنا
 * `--at-control-h` (٤٠px) لأنّ أزرار الشريط عليه أصلًا.
 *
 * ⚠️ ويبقى **ترقيم الصفحات** على المقاس المضغوط (٣٢px) عمدًا: صفٌّ آخر،
 * وظيفته كثيفة، وليس فيه ما يُحاذى به. لذلك التخصيص مقيَّد بالشريط.
 * ══════════════════════════════════════════════════════════════════════════ */
:root { --at-control-h-sm: 32px; }

.at-listpage__toolbar .at-listpage__search,
.at-listpage__toolbar-right .at-listpage__search,
.at-listpage__toolbar .at-csel__trigger,
.at-listpage__toolbar-right .at-csel__trigger {
  block-size: var(--at-control-h, 40px);
  min-block-size: var(--at-control-h, 40px);
  font-size: var(--ax-text-sm, 13px);
  border-radius: var(--at-radius-sm, 4px);
}

/* 🔴 `!important` هنا **ردٌّ على `!important`** لا اختيارًا:
 * `atheer-vireo-polish.css` يثبّت `.at-grid__pag-size-sel` على ٣٢px بأولويّة
 * قصوى (وكان ذلك ردًّا بدوره على ٢٨px في `data.css`). والصنف نفسه يُستعمل
 * في مكانين مختلفَي الوظيفة: مرشِّحًا في الشريط وحجمَ صفحةٍ في الترقيم.
 * فالنطاق — لا القوّة — هو ما يفصلهما: الشريط ٤٠، والترقيم يبقى ٣٢. */
.at-listpage__toolbar select,
.at-listpage__toolbar-right select,
.at-listpage__toolbar .at-grid__pag-size-sel,
.at-listpage__toolbar-right .at-grid__pag-size-sel {
  block-size: var(--at-control-h, 40px) !important;
  min-block-size: var(--at-control-h, 40px) !important;
  font-size: var(--ax-text-sm, 13px);
  border-radius: var(--at-radius-sm, 4px);
}
/* حقل البحث داخل غلافه يملأ ارتفاعه بلا حدٍّ ثانٍ يرسم إطارًا داخل إطار. */
.at-listpage__toolbar .at-listpage__search > input,
.at-listpage__toolbar-right .at-listpage__search > input {
  block-size: 100%;
  font-size: var(--ax-text-sm, 13px);
  border: 0; background: none;
}
/* الترقيم يبقى مضغوطًا — وهذا اختيار لا سهو. */
.at-grid__pag .at-grid__pag-size-sel,
.at-grid__pagination .at-grid__pag-size-sel {
  block-size: var(--at-control-h-sm, 32px);
  min-block-size: var(--at-control-h-sm, 32px);
}

/* ══════════════════════════════════════════════════════════════════════════
 * ٧ · الأزرار: مقياسان لا ثلاثة
 *
 * القياس على صفحة التحويلات — ثلاثة ارتفاعات في صفحةٍ واحدة:
 *   «تحديث» في ترويسة الصفحة   ٣٦px   ← خارج المقياس
 *   أزرار الشريط                ٤٠px   ✓
 *   سهما الترقيم                ٢٨px   ← خارج المقياس
 *
 * و٣٦ كان قرارًا سابقًا صحيحًا في سياقه: وحّد ٣٤ و٣٦ بين **الأزرار** بعضها
 * ببعض، ولم يُسأل حينها عن علاقتها بالحقول. والمقياس المعتمد الآن للحقول
 * ٤٠/٣٢، فبقاء الأزرار على ٣٦/٢٨ يُبقي نظامين متوازيين.
 *
 * فصارا مقياسين اثنين لا أكثر — **نفس مقياس الحقول**:
 *   قياسيّ ٤٠  ·  مضغوط ٣٢
 * ══════════════════════════════════════════════════════════════════════════ */
.at-page-header__actions .at-btn:not([data-size="sm"]):not([data-size="xs"]) {
  block-size: var(--at-control-h, 40px);
  min-block-size: var(--at-control-h, 40px);
}

/* أزرار الترقيم أيقونيّة كثيفة — المضغوط لا القياسيّ، لكن على المقياس. */
.at-grid__pag-controls .at-btn,
.at-grid__pag .at-btn {
  block-size: var(--at-control-h-sm, 32px);
  min-block-size: var(--at-control-h-sm, 32px);
  min-inline-size: var(--at-control-h-sm, 32px);
}

/* ══════════════════════════════════════════════════════════════════════════
 * ٨ · تعميم مقياس الأزرار — بعد أن أثبته المسح قسمًا قسمًا
 *
 * قِيس ممثّلٌ عن **٢٥ قسمًا**. النتيجة:
 *   الحقول: ٤٠px في كلّ قسم بلا استثناء ✅
 *   الأزرار: ٣٦px في ١٢ قسمًا · ٢٨px في ٣ · ٤٠px في الباقي ❌
 *
 * فالتباين ليس حالةً في صفحة بل **نظامٌ ثانٍ يعمل بالتوازي**. والقالب يقرأ
 * `--ax-control-h` نفسها في `.ax-btn` و`.ax-input`، فالزرّ والحقل توأمان.
 *
 * ⚠️ ما يُستثنى عمدًا — لأنّ الكثافة فيه وظيفة لا سهو:
 *   • المقاسات المصرَّحة (`sm`/`xs`) — لها مكانها.
 *   • أزرار **داخل خلايا الجداول**: صفٌّ ارتفاعه ٤٠px لا يسع زرًّا بارتفاعه.
 *   • الأزرار الأيقونيّة المستديرة والرقائق — شكلها معناها.
 * ══════════════════════════════════════════════════════════════════════════ */
.at-btn:not([data-size="sm"]):not([data-size="xs"]):not(.icon-btn),
.btn:not(.btn--sm):not(.btn-sm):not(.btn--xs):not(.btn-xs):not(.btn--icon):not(.icon-btn) {
  min-block-size: var(--at-control-h, 40px);
}

/* الاستثناءات — تُعاد إلى المضغوط بتخصيصٍ أعلى (سياقٌ + صنف). */
.at-grid__td .at-btn,
.at-grid__td .btn,
td .at-btn,
td .btn,
.at-grid__pag-controls .at-btn,
.at-grid__pag .at-btn,
.at-chip .at-btn,
.at-badge .at-btn {
  min-block-size: var(--at-control-h-sm, 32px);
  block-size: var(--at-control-h-sm, 32px);
}

/* ══════════════════════════════════════════════════════════════════════════
 * ٩ · إغلاق ما بقي — بعد مسح **١٧٥ صفحة** لا عيّنة
 *
 * المسح الكامل ترك عشر صفحات فيها عنصرٌ خارج المقياس، وكلّها من ثلاث عائلات:
 *   ٥ صفحات  زرّ ٢٨px  `.btn`             ← المقاس «xs» بلا مقياس
 *   ٤ صفحات  زرّ ٣٠px  `.at-btn`          ← `data-size="sm"` يُشتقّ من الحشو
 *   ١ صفحة   ٣٦px      `.at-csel__trigger` ← منسدلة خارج نطاق الشريط
 * وثلاث عائلات أخرى في الزاوية والخطّ:
 *   ١٦ صفحة  `.btn` بزاوية ٠     ·  ٥ صفحات `at-xfer__search-input` بـ٨
 *   ٣ صفحات  `.field__input` بـ٠ ·  ١١ صفحة `.at-btn` بخطّ ١٣٫٥
 *
 * كلّها تُردّ إلى المقياس نفسه: ٤٠/٣٢ · ١٣px · ٤px.
 * ══════════════════════════════════════════════════════════════════════════ */

/* المقاس المضغوط يُشتقّ من الحشو فيخرج ٣٠px — يُصرَّح به. */
.at-btn[data-size="sm"]:not(.icon-btn),
.btn--sm, .btn-sm,
.btn--xs, .btn-xs {
  block-size: var(--at-control-h-sm, 32px);
  min-block-size: var(--at-control-h-sm, 32px);
}
/* والزرّ الأيقونيّ المربّع يبقى مربّعًا: تثبيت الارتفاع وحده يمطّه. */
.at-btn[data-size="sm"].icon-btn,
.btn--icon, .icon-btn {
  block-size: var(--at-control-h-sm, 32px);
  inline-size: var(--at-control-h-sm, 32px);
}

/* الزاوية: عائلة `.btn` كانت بلا نصف قطر في ١٦ صفحة. */
.btn, .btn--sm, .btn-sm, .btn--xs, .btn-xs, .btn--lg, .btn-lg,
.at-xfer__search-input,
.field__input, .at-input, .input {
  border-radius: var(--at-radius-sm, 4px);
}

/* الخطّ: ١٣٫٥px قيمةٌ لا وجود لها في مقياس الطباعة (11·12·13·15·17·20·24). */
.at-btn:not([data-size="sm"]):not([data-size="xs"]),
.btn:not(.btn--sm):not(.btn-sm):not(.btn--xs):not(.btn-xs) {
  font-size: var(--ax-text-sm, 13px);
}
.at-btn[data-size="sm"], .btn--sm, .btn-sm, .btn--xs, .btn-xs {
  font-size: var(--ax-text-xs, 12px);
}

/* المنسدلة خارج شريط الأدوات تتبع مقاس الحقل القياسيّ كبقيّة المنصّة. */
.at-csel__trigger { block-size: var(--at-control-h, 40px); }
.at-csel--sm .at-csel__trigger,
.at-grid__pag .at-csel__trigger { block-size: var(--at-control-h-sm, 32px); }

/* ── ١٠ · المنسدلة: الزرّ يملأ غلافه ──────────────────────────────────────
 * قِيس: الغلاف `.at-csel` ٤٠px والزرّ داخله ٣٦px، رغم أنّ **كلّ** قاعدة
 * تُسنِد إليه `var(--at-control-h)`. فالارتفاع يُشتقّ من المحتوى لا من
 * الإعلان. الحلّ أن يتبع غلافه بدل أن يُعلن لنفسه — فيصحّ في المقاسين معًا. */
/* 🔴 `100%` كانت خطأً: الغلاف ارتفاعه ٤٠px **بحدٍّ ٢px**، فصندوق محتواه ٣٦
 * و`100%` منه ٣٦ لا ٤٠. فالغلاف يحتضن زرَّه بدل أن يقيّده، والزرّ وحده
 * يحمل المقاس. */
.at-csel { block-size: auto; }
.at-csel > .at-csel__trigger {
  block-size: var(--at-control-h, 40px);
  min-block-size: var(--at-control-h, 40px);
}
.at-csel--sm > .at-csel__trigger,
.at-grid__pag .at-csel > .at-csel__trigger {
  block-size: var(--at-control-h-sm, 32px);
  min-block-size: var(--at-control-h-sm, 32px);
}

/* ══════════════════════════════════════════════════════════════════════════
 * ١١ · حقل شاشة الدخول — قطعةٌ واحدة لا قطعتان
 *
 * قِيس: صندوق الأيقونة `.auth-field__prefix` ارتفاعه **٤٤px** والحقل بجانبه
 * **٤٠px** داخل غلافٍ ٤٦px. فبينهما فرقُ ٤ بكسلات رأسيّة يجعل الأيقونة تبدو
 * في صندوقٍ منفصل عن الحقل، وهو ما يُرى بوضوح عند التركيز حين يُضيء الغلاف.
 *
 * السبب: `marquee.css` يُعلن ٤٤px للطرفين والحقل معًا، ثمّ
 * `atheer-vireo-polish.css` يخفض **الحقل وحده** إلى `--at-control-h` (٤٠)
 * ويترك الطرفين على ٤٤. عائلةٌ نُقلت وشقيقتها تُركت — للمرّة التاسعة.
 * ══════════════════════════════════════════════════════════════════════════ */
.auth-field,
.auth-field__prefix,
.auth-field__suffix {
  block-size: var(--at-control-h, 40px);
}
/* والغلاف يحتضنهم فيصير ٤٢px بحدَّيه — لا ٤٦ بفراغٍ داخليّ. */
.auth-field__control { min-block-size: 0; }

/* ══════════════════════════════════════════════════════════════════════════
 * ١٢ · أيّ صفٍّ يجمع حقلًا وزرًّا — يتساويان
 *
 * القاعدة في القسم ٤ كانت مقصورةً على `.at-listpage__toolbar` وأخواته.
 * لكنّ أشرطة المرشِّحات في البوّابة الشخصيّة صفوفٌ مرنة بأنماطٍ سطريّة بلا
 * صنفٍ يُمسك بها — فبقي زرّ «تطبيق» ٣٢px بجانب حقولٍ ٤٠px، والصفّ متعرّج.
 *
 * `:has()` تحلّها بلا صنفٍ جديد ولا لمسِ صفحة: **الحاوية التي تضمّ حقلًا
 * تفرض على زرّها ارتفاع الحقل**. فكلّ صفٍّ قادم يُصحّح نفسه.
 *
 * ⚠️ ويُستثنى الصغير المصرَّح (`--xs`) والأيقونيّ: مقاسهما اختيارٌ لا سهو.
 * ══════════════════════════════════════════════════════════════════════════ */
div:has(> .input, > .field__input, > .at-input, > select, > .at-csel)
  > .btn:not(.btn--xs):not(.btn-xs):not(.icon-btn),
div:has(> .input, > .field__input, > .at-input, > select, > .at-csel)
  > .at-btn:not([data-size="xs"]):not(.icon-btn) {
  block-size: var(--at-control-h, 40px);
  min-block-size: var(--at-control-h, 40px);
}