/* ════════════════════════════════════════════════════════════════════════════
 * atheer-forms.css — بنية حقول القالب (`forms/elements.html`) على نماذج أثير
 *
 * الفحص أوّلًا: **كلّ** عناصر النماذج في القالب منقولةٌ أصلًا إلى أثير —
 * `ax-field · ax-label · ax-help · ax-input · ax-input-group · ax-switch ·
 * ax-toggle · ax-radio · ax-checkbox · ax-segmented`. الناقص عنصرٌ واحد
 * (`ax-range`) وبنيةُ الحقل نفسها في الصفحات القديمة.
 *
 * فالمطلوب **استعمالها** لا نقلها. وهذا الجسر يُلبس `.form-group/.form-label/
 * .form-hint` بنيةَ `ax-field` بلا تعديل أربعين تعريفَ حقل في نموذج الطابور —
 * فالمخاطرة في تحرير أربعين حقلًا أعلى بكثير من مكسب إعادة كتابتها.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── ١ · بنية الحقل: عمودٌ بفجوةٍ واحدة ──────────────────────────────────
 * القالب: `.ax-field { display:flex; flex-direction:column; gap:8px }`.
 * والصفحات القديمة تعتمد هوامش متفرّقة تتراكم وتتفاوت بين نموذج وآخر. */
.form-group,
.form-field,
.at-wiz__field {
  display: flex; flex-direction: column;
  gap: var(--ax-space-2, 8px);
}
.form-group > * , .form-field > * { margin: 0; }

/* ── ٢ · التسمية والتلميح — مقاييس القالب حرفًا بحرف ─────────────────────── */
.form-label, .field__label, .at-label {
  font-size: var(--ax-text-sm, 13px);
  font-weight: var(--ax-weight-medium, 500);
  color: var(--ax-text-strong);
  line-height: 1.35;
}
.form-hint, .at-wiz__hint, .form-help {
  font-size: var(--ax-text-xs, 12px);
  color: var(--ax-text-subtle);
  line-height: 1.5;
}
/* النجمة حمراء دلاليًّا — لا لونَ نصٍّ عاديّ. */
.form-label .req, .form-label__req, .field__label .req {
  color: var(--at-danger); margin-inline-start: 2px;
}
/* رسالة الخطأ تحجز سطرها فلا يقفز التخطيط عند ظهورها. */
.form-error, .field__error {
  min-block-size: 1.05em;
  font-size: var(--ax-text-xs, 12px);
  color: var(--at-danger);
}

/* ── ٣ · اللاصقة (addon) — للثواني والوحدات ──────────────────────────────
 * كانت اللاحقة «s» تُرسم نصًّا طليقًا بجانب الحقل فتبدو خارجه. القالب
 * يجعلها **جزءًا من الحقل**: حدٌّ واحد يلفّهما وفاصلٌ بينهما. */
.at-affix { display: flex; align-items: stretch; }
.at-affix > .form-input,
.at-affix > .input,
.at-affix > .field__input {
  border-start-end-radius: 0; border-end-end-radius: 0;
  flex: 1 1 auto; min-inline-size: 0;
}
.at-affix > .at-affix__unit {
  display: inline-flex; align-items: center;
  padding-inline: 10px;
  font-size: var(--ax-text-xs, 12px);
  color: var(--ax-text-subtle);
  background: var(--surface-2, #f0f3f9);
  border: 1px solid var(--ax-border);
  border-inline-start: 0;
  border-start-end-radius: var(--at-radius-sm, 4px);
  border-end-end-radius: var(--at-radius-sm, 4px);
  white-space: nowrap;
}
[dir="rtl"] .at-affix > .form-input,
[dir="rtl"] .at-affix > .input { border-radius: 0 var(--at-radius-sm,4px) var(--at-radius-sm,4px) 0; }
[dir="rtl"] .at-affix > .at-affix__unit {
  border-inline-start: 1px solid var(--ax-border); border-inline-end: 0;
  border-radius: var(--at-radius-sm,4px) 0 0 var(--at-radius-sm,4px);
}

/* ── ٤ · شبكة النموذج — عمودان يلتفّان إلى واحد ─────────────────────────── */
.form-grid, .at-form-grid {
  display: grid; gap: var(--ax-space-5, 20px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
.form-grid--full, .form-grid > .span-2 { grid-column: 1 / -1; }

/* ── ٥ · قسم داخل النموذج: عنوانٌ ثمّ حقول ─────────────────────────────── */
.form-section__title, .form-card > h4, .at-fsec__title {
  font-size: var(--ax-text-sm, 13px);
  font-weight: var(--ax-weight-semibold, 600);
  color: var(--ax-text-strong);
  margin-block-end: var(--ax-space-3, 12px);
}

/* ── ٦ · `ax-range` — العنصر الوحيد الذي لم يكن منقولًا ─────────────────── */
.ax-range { display: flex; align-items: center; gap: var(--ax-space-3, 12px); inline-size: 100%; }
.ax-range__track {
  flex: auto; block-size: 4px; position: relative;
  background: var(--ax-fill-hover, var(--surface-2)); border-radius: var(--at-radius-pill, 999px);
}
.ax-range__fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  background: var(--ax-accent); border-radius: inherit;
}
.ax-range__handle {
  inline-size: 14px; block-size: 14px; border-radius: 999px;
  background: var(--ax-accent); border: 2px solid var(--ax-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / .3); cursor: grab;
}
.ax-range__handle:active { inline-size: 18px; block-size: 18px; cursor: grabbing; }
.ax-range__value {
  min-inline-size: 3.5ch; text-align: end;
  font-family: var(--ax-font-mono, ui-monospace, monospace);
  font-size: var(--ax-text-xs, 12px); color: var(--ax-text-subtle);
}

/* ── ٧ · `.at-fsec` بلا رأسٍ ولا جسم = استُعملت شبكةً لا بطاقة ────────────
 * الصنف بطاقةُ قسم (`__head` + `__body`). وحين تُستعمل عاريةً حول حقول
 * فوقها عنوانٌ صريح، يصير إطارها **إطارًا داخل إطار**. `:has()` تُميّز
 * الحالتين بلا تعديل أيّ صفحة. */
.at-fsec:not(:has(> .at-fsec__head)):not(:has(> .at-fsec__body)) {
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
}