/* ════════════════════════════════════════════════════════════════════════════
 * atheer-ax-bridge.css — مظهر Vireo لمكوّنات أثير المشتركة
 *
 * ## لماذا جسر لا تحرير صفحات
 *
 * أثير ١٧٥ صفحة مبنيّة من مكوّنات مشتركة قليلة: الجدول · بطاقة المؤشّر ·
 * البطاقة · الشارة · الحقل · الحالة الفارغة · الترقيم · ترويسة الصفحة.
 * فتحرير الصفحات واحدةً واحدةً عملٌ طويل **وخطر** — وكلّ ملفٍّ يُمَسّ فرصة
 * لسقوط عنصر. أمّا كسوة المكوّنات فتحوّل **كلّ الصفحات دفعةً واحدة** بلا
 * لمس ملفّ صفحة واحد، والحارس يُثبت أنّ شيئًا لم يُفقد.
 *
 * ## التطابق الذي جعل هذا ممكنًا
 *
 * بطاقة مؤشّر أثير تستعمل **نفس بنية BEM** التي يستعملها القالب:
 *   `__top · __icon · __label · __value · __meta · __delta`
 * فالكسوة نقلٌ مباشر لا ترجمة.
 *
 * ## الحدود
 *
 * لا يُغيَّر هنا سلوك ولا بنية ولا ترتيب — المظهر وحده. وكلّ قيمة رمزٌ من
 * جسر `--ax-*`، فحذف طبقة واحدة يُرجع الحال بلا كسر.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── ١ · ترويسة الصفحة ───────────────────────────────────────────────────
 * القالب: 30px/700 وسطر 38px. وأثير كان أصغر بكثير، فبدت الصفحات بلا رأس. */
/* 🔴 `bridge.css` (المستورَد) فيه `.page-header h1 { 20px }` بتخصيص ٠٬١٬١،
 * وهو يهزم `.page-header__title` (٠٬١٬٠). فيُضاف مُحدِّد الأب ليصير ٠٬٢٬٠.
 * ٥٨ صفحة من ١٥١ كانت تعرض عنوانًا 20px بسبب هذا وحده — قِيس بالسحب. */
.at-page-header .at-page-header__title,
.page-header .page-header__title,
.at-page-header__title,
.page-header__title {
  font-size: var(--ax-text-2xl, 30px);
  line-height: var(--ax-leading-2xl, 38px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ax-text-strong);
  text-wrap: balance;
}
.at-page-header .at-page-header__subtitle,
.page-header .page-header__sub,
.page-header .page-header__subtitle,
.at-page-header__subtitle,
.page-header__sub,
.page-header__subtitle {
  font-size: var(--ax-text-md, 17px);
  line-height: 1.55;
  color: var(--ax-text-muted);
  max-inline-size: 78ch;      /* سطرٌ أطول من ذلك يتعب قراءته */
}

/* ── ٢ · الجدول ──────────────────────────────────────────────────────────
 * رأس الجدول في القالب **علامة صغيرة** لا عنوانًا: 11px بوزن 600 وتباعد
 * حروف، بخطّ سفليّ أقوى يفصله عن الصفوف. */
.at-grid__table { font-size: var(--ax-text-sm, 13px); color: var(--ax-text); }
.at-grid__th {
  padding: var(--ax-space-3, 12px) var(--ax-space-4, 16px);
  font-size: var(--ax-text-2xs, 11px);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ax-text-muted);
  border-block-end: 1px solid var(--ax-border-strong);
  /* 🔴 بلا uppercase: العربيّة بلا حالة أحرف، والتحويل يشوّه المختلط. */
  text-transform: none;
}
.at-grid__td {
  padding: var(--ax-space-3, 12px) var(--ax-space-4, 16px);
  border-block-end: 1px solid var(--ax-border);
  vertical-align: middle;
}
.at-grid__tr:hover { background: var(--ax-fill-hover); }
/* الصفّ المحدَّد بقضيب داخليّ لا بخلفيّة مصمتة — يُقرأ ولا يطمس المحتوى. */
.at-grid__tr[aria-selected="true"] .at-grid__td:first-child,
.at-grid__tr.is-selected .at-grid__td:first-child {
  box-shadow: inset 2px 0 0 var(--ax-accent);
}
.at-grid__table-wrap { inline-size: 100%; overflow-x: auto; position: relative; }

/* ── ٣ · بطاقة المؤشّر — بنية القالب حرفيًّا ───────────────────────────── */
.at-metric-card { display: flex; flex-direction: column; gap: var(--ax-space-3, 12px); }
.at-metric-card__top {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--ax-space-3, 12px);
}
.at-metric-card__icon {
  inline-size: 44px; block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ax-radius-md, 14px);
  color: var(--ax-accent);
  background: color-mix(in srgb, var(--ax-accent) 14%, transparent);
}
.at-metric-card__icon .icon { font-size: var(--ax-icon-md, 20px); }
.at-metric-card__label { font-size: var(--ax-text-sm, 13px); color: var(--ax-text-muted); }
.at-metric-card__value {
  font-size: var(--ax-num-kpi, 32px);
  line-height: var(--ax-leading-kpi, 36px);
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ax-text-strong);
}
.at-metric-card__meta { display: flex; align-items: center; gap: var(--ax-space-2, 8px); flex-wrap: wrap; }
.at-metric-card__delta {
  padding: 2px var(--ax-space-2, 8px);
  font-size: var(--ax-text-xs, 12px); font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: var(--ax-radius-pill, 999px);
  display: inline-flex; align-items: center; gap: 2px;
}
.at-metric-card__caption { font-size: var(--ax-text-xs, 12px); color: var(--ax-text-subtle); }

/* 🔴 مقاسان لا واحد — وهو ما يفعله القالب نفسه:
 *   • بطاقة لوحة كاملة → 32px (رقم يُقرأ من بعيد)
 *   • شريط مؤشّرات فوق جدول → 24px (كثيف، بجانب صفوف، 32 تُثقله)
 * وكلاهما على مقياس القالب. التخصيص هنا ٠٬٢٬٠ ليهزم `cells.css` (22px). */
/* ── إشعارٌ غير مقروء ────────────────────────────────────────────────────
 * خلفيّةٌ خفيفة وحدٌّ جانبيّ — لا خطٌّ عريض ولا لونٌ صارخ: الدرج يُمسح بالعين،
 * والفرق يجب أن يُلتقط في لمحة بلا أن يصير القسم كلّه ملوّنًا. */
.dw-notif--unread {
  background: color-mix(in srgb, var(--ax-accent, #2563eb) 8%, transparent);
  border-inline-start: 2px solid var(--ax-accent, #2563eb);
}
.dw-notif--unread .dw-notif__title { font-weight: 600; }
.dw-notif[style*="cursor: pointer"]:hover,
.dw-notif--unread:hover { background: color-mix(in srgb, var(--ax-accent, #2563eb) 14%, transparent); }

/* ── صفّ المؤشّرات ───────────────────────────────────────────────────────
 * 🔴 `.at-metrics` **لم يكن لها تخطيطٌ في أيّ ورقة**. الصفحات التي تضيف شبكةً
 * سطريّة نجت، والتي تعتمد على الصنف وحده كدّست بطاقاتها عموديًّا في عمودٍ
 * ضيّق وتركت ثلاثة أرباع الصفحة فارغة (رُصد في «توقّع الإيرادات»).
 *
 * والعلاج في الصنف لا في الصفحة: صفحةٌ تُصلَح تترك الفخّ لمن يليها، والنمط
 * السطريّ يهزم كلّ ورقة أنماط فيبقى خارج أيّ تحسين لاحق. */
.at-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--ax-space-4, 16px);
  margin-block-end: var(--ax-space-5, 20px);
  align-items: start;
}

.at-listpage__metrics .at-metric-card__value {
  font-size: var(--ax-text-xl, 24px);
  line-height: 1.2;
}
.at-listpage__metrics .at-metric-card__icon { inline-size: 36px; block-size: 36px; }
.at-listpage__metrics .at-metric-card { gap: var(--ax-space-2, 8px); }

/* درجات الحالة تُلوّن الأيقونة **والقيمة** — الرقم هو ما يُقرأ أوّلًا. */
.at-metric-card[data-tone="success"] .at-metric-card__icon { color: var(--ax-success-500); background: color-mix(in srgb, var(--ax-success-500) 14%, transparent); }
.at-metric-card[data-tone="warning"] .at-metric-card__icon { color: var(--ax-warning-500); background: color-mix(in srgb, var(--ax-warning-500) 14%, transparent); }
.at-metric-card[data-tone="danger"]  .at-metric-card__icon { color: var(--ax-danger-500);  background: color-mix(in srgb, var(--ax-danger-500)  14%, transparent); }
.at-metric-card[data-tone="info"]    .at-metric-card__icon { color: var(--ax-info-500);    background: color-mix(in srgb, var(--ax-info-500)    14%, transparent); }

/* ── ٤ · البطاقات ────────────────────────────────────────────────────────
 * نصف قطر القالب للبطاقة الكاملة، وظلّ خفيف يفصلها عن الأرضيّة. */
.at-card, .form-card, .dafa-chartcard {
  background: var(--ax-surface-solid);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-lg, 18px);
  box-shadow: var(--ax-shadow-sm);
}
.form-card > h4, .dafa-chartcard__title {
  font-size: var(--ax-text-base, 15px);
  font-weight: 600;
  color: var(--ax-text-strong);
}

/* ── ٥ · الشارات ─────────────────────────────────────────────────────────
 * القالب: ارتفاع 20 · نصف قطر xs (مستطيل لا حبّة) · 12px بوزن 600. */
.at-badge {
  block-size: 20px;
  padding-inline: var(--ax-space-2, 8px);
  font-size: var(--ax-text-xs, 12px);
  font-weight: 600;
  border-radius: var(--ax-radius-xs, 8px);
  line-height: 1;
  gap: var(--ax-space-1, 4px);
}
.at-badge[data-size="sm"] { block-size: 18px; font-size: var(--ax-text-2xs, 11px); }

/* ── ٦ · الحقول ──────────────────────────────────────────────────────────
 * الارتفاع يبقى ارتفاع أثير (40px موحّد ومقيس) — القالب يتبع أثير هنا. */
.at-input, .field__input, .input, .ax-input {
  border-radius: var(--ax-radius-sm, 12px);
  font-size: var(--ax-text-sm, 13px);
}
.at-input:focus-visible, .field__input:focus-visible, .input:focus-visible {
  outline: none;
  border-color: var(--ax-accent);
  box-shadow: var(--ax-focus-shadow);
}
.field__label, .at-label, .form-label {
  font-size: var(--ax-text-xs, 12px);
  font-weight: 500;
  color: var(--ax-text-muted);
}

/* ── ٧ · الحالة الفارغة ──────────────────────────────────────────────────
 * أيقونة داخل قرص هادئ، وعنوان يشرح **ما التالي** لا «لا بيانات» فقط. */
.at-empty { padding-block: var(--ax-space-8, 32px); text-align: center; }
.at-empty__icon {
  inline-size: 56px; block-size: 56px;
  margin-inline: auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ax-radius-lg, 18px);
  color: var(--ax-text-subtle);
  background: var(--ax-surface-subtle);
}
.at-empty__title { font-size: var(--ax-text-base, 15px); font-weight: 600; color: var(--ax-text-strong); }
.at-empty__desc  { font-size: var(--ax-text-sm, 13px); color: var(--ax-text-muted); max-inline-size: 46ch; margin-inline: auto; }

/* ── ٨ · الترقيم ─────────────────────────────────────────────────────────── */
.at-grid__pagination {
  padding-block: var(--ax-space-3, 12px);
  font-size: var(--ax-text-xs, 12px);
  color: var(--ax-text-muted);
}
.at-grid__pag-info, .at-grid__pag-total, .at-grid__pag-page {
  font-variant-numeric: tabular-nums;
}
.at-grid__pag-page {
  min-inline-size: 32px; block-size: 32px;
  border-radius: var(--ax-radius-xs, 8px);
}

/* ── ٩ · الألسنة ─────────────────────────────────────────────────────────── */
.tabs__item, .at-tabs__tab {
  min-block-size: 40px;
  padding-inline: var(--ax-space-3, 12px);
  font-size: var(--ax-text-sm, 13px);
  font-weight: 500;
  color: var(--ax-text-muted);
  border-radius: var(--ax-radius-xs, 8px);
}
.tabs__item.is-active, .at-tabs__tab[aria-selected="true"] {
  color: var(--ax-text-strong);
}

/* ════════════════════════════════════════════════════════════════════════════
 * ١٠ · الحقول — نظام القالب كاملًا على أصناف أثير
 *
 * ليس نصف قطر وارتفاعًا فقط: الحدّ · الخلفيّة · التحويم · التركيز · التعطيل ·
 * القراءة فقط · الخطأ · النائب · سهم القائمة في الاتّجاهين.
 *
 * والثيمان يعملان بلا كتلة ثانية: كلّ قيمة رمز `--ax-*` يقرأ رمز أثير الذي
 * يتبدّل مع الثيم أصلًا. كتلة ثانية للثيم الداكن هنا كانت ستُنتج الدرز
 * الذي أصلحناه خمس مرّات.
 * ════════════════════════════════════════════════════════════════════════════ */

.field__input, .at-input, input.input, select.input, textarea.input,
input.form-input, select.form-input, textarea.form-input,
input.form-control, select.form-control, textarea.form-control,
.select:not(.at-btn) {
  inline-size: 100%;
  min-block-size: var(--ax-control-h, 40px);
  padding-inline: var(--ax-space-3, 12px);
  font-family: var(--ax-font-sans);
  font-size: var(--ax-text-sm, 13px);
  color: var(--ax-text);
  background: var(--ax-surface-solid);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-sm, 12px);
  transition: border-color .08s cubic-bezier(.2,0,0,1),
              box-shadow  .14s cubic-bezier(.2,0,0,1),
              background  .08s cubic-bezier(.2,0,0,1);
}

textarea.field__input, textarea.at-input, textarea.input,
textarea.form-input, textarea.form-control {
  padding-block: var(--ax-space-3, 12px);
  min-block-size: calc(var(--ax-space-10, 40px) + var(--ax-space-6, 24px));
  line-height: 1.5;
  resize: vertical;
}

.field__input::placeholder, .at-input::placeholder, .input::placeholder,
.form-input::placeholder, .form-control::placeholder {
  color: var(--ax-text-disabled);
}

.field__input:hover, .at-input:hover, .input:hover,
.form-input:hover, .form-control:hover, .select:hover {
  border-color: var(--ax-border-strong);
}

.field__input:focus, .at-input:focus, .input:focus,
.form-input:focus, .form-control:focus, .select:focus,
.field__input:focus-visible, .at-input:focus-visible, .input:focus-visible {
  outline: none;
  border-color: var(--ax-accent);
  box-shadow: var(--ax-focus-shadow);
}

.field__input:disabled, .at-input:disabled, .input:disabled,
.form-input:disabled, .form-control:disabled, .select:disabled {
  color: var(--ax-text-disabled);
  background: var(--ax-fill-hover);
  cursor: not-allowed;
}
.field__input[readonly], .at-input[readonly], .input[readonly],
.form-input[readonly], .form-control[readonly] {
  background: var(--ax-surface-subtle);
}

/* الخطأ: حدٌّ أحمر **وحلقة حمراء عند التركيز** — لا اللون وحده، فبعض
 * المستخدمين لا يميّزونه. */
.field__input[aria-invalid="true"], .at-input[aria-invalid="true"],
.field__input.is-invalid, .at-input.is-invalid, .input.is-invalid {
  border-color: var(--ax-danger-500);
}
.field__input[aria-invalid="true"]:focus, .at-input.is-invalid:focus,
.field__input.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-danger-500) 22%, transparent);
}

/* ── القوائم: سهم القالب، ومكانه يتبع الاتّجاه ─────────────────────────── */
select.field__input, select.at-input, select.input,
select.form-input, select.form-control, select.select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A93A4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ax-space-3, 12px) center;
  padding-inline-end: var(--ax-space-8, 32px);
}
[dir="rtl"] select.field__input, [dir="rtl"] select.at-input,
[dir="rtl"] select.input, [dir="rtl"] select.form-input,
[dir="rtl"] select.form-control, [dir="rtl"] select.select {
  background-position: left var(--ax-space-3, 12px) center;
  padding-inline-end: var(--ax-space-3, 12px);
  padding-inline-start: var(--ax-space-8, 32px);
}

/* ── مجموعة الحقل ────────────────────────────────────────────────────────── */
.form-group, .field, .at-field {
  display: flex; flex-direction: column; gap: var(--ax-space-2, 8px);
}
.field__hint, .form-hint, .at-help, .help-text {
  font-size: var(--ax-text-xs, 12px);
  color: var(--ax-text-subtle);
  line-height: 1.5;
}
.field__error, .form-error, .at-error {
  font-size: var(--ax-text-xs, 12px);
  color: var(--ax-danger-500);
}

/* ── ١١ · بطاقة التحويلة/جهة الاتصال في شبكة عميل الويب ────────────────
 * كانت الأنماط سطريّةً داخل جافاسكربت — خارج الثيم وخارج أيّ تحسين.
 * نُقلت إلى صنف، وأُعطيت معالجة بطاقة القالب. */
.at-extcard {
  background: var(--ax-surface-solid);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-lg, 18px);
  padding: var(--ax-space-4, 16px);
  transition: box-shadow .14s cubic-bezier(.2,0,0,1),
              transform  .14s cubic-bezier(.2,0,0,1),
              border-color .14s cubic-bezier(.2,0,0,1);
}
.at-extcard.is-hover,
.at-extcard:hover {
  box-shadow: var(--ax-shadow-md);
  border-color: color-mix(in srgb, var(--ax-accent) 34%, var(--ax-border));
  transform: translateY(-1px);
}
/* ── صفّ القائمة ─────────────────────────────────────────────────────────
 * عرض «القائمة» كان يعيد رسم البطاقة نفسها بعمود `1fr`، فيصير صندوقًا
 * بارتفاع ١٤٠px يبتلع عرض الصفحة لتحويلةٍ واحدة. القالب يجعل القائمة صفًّا:
 * صورة صغيرة · اسم ورقم · حالة نصّيّة · أزرار في الطرف — وارتفاعٌ ثابت.
 *
 * وقيدُ العرض مقصود: صفٌّ يمتدّ ١٧٠٠px يجعل العين تقطع مسافةً بين الاسم
 * وأزراره، وهو ما يجعل القوائم العريضة متعبة. */
.at-extrow {
  display: flex;
  align-items: center;
  gap: var(--ax-space-3, 12px);
  padding: 10px var(--ax-space-4, 16px);
  background: var(--ax-surface-solid);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-md, 12px);
  max-inline-size: 940px;
  transition: border-color .14s cubic-bezier(.2,0,0,1),
              box-shadow  .14s cubic-bezier(.2,0,0,1);
}
.at-extrow + .at-extrow { margin-block-start: 8px; }
.at-extrow.is-hover,
.at-extrow:hover {
  border-color: color-mix(in srgb, var(--ax-accent) 34%, var(--ax-border));
  box-shadow: var(--ax-shadow-sm, 0 1px 2px rgb(0 0 0 / .06));
}
.at-extrow:focus-within {
  border-color: var(--ax-accent);
  box-shadow: var(--ax-focus-shadow);
}
/* الحالة نصًّا — تختفي على الضيّق حيث القرص على الصورة يكفي */
.at-extrow__state {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ax-text-subtle, #9ca3af);
  padding-inline: 10px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .at-extrow__state { display: none; }
  .at-extrow { max-inline-size: none; }
}
/* الأزرار تهدأ حتّى يُقترب، كما في البطاقة */
.at-extrow .ax-btn--ghost { opacity: .62; }
.at-extrow:hover .ax-btn--ghost,
.at-extrow:focus-within .ax-btn--ghost { opacity: 1; }

.at-extcard:focus-within {
  border-color: var(--ax-accent);
  box-shadow: var(--ax-focus-shadow);
}
/* أزرار البطاقة تهدأ حتّى يُقترب منها — شبكةٌ من عشرات البطاقات بأربعة
 * أزرار مضيئة في كلٍّ منها تصير ضجيجًا لا واجهة. */
.at-extcard .ax-btn--icon { color: var(--ax-text-subtle); }
.at-extcard:hover .ax-btn--icon,
.at-extcard.is-hover .ax-btn--icon { color: var(--ax-text); }
.at-extcard .ax-btn--icon:hover { color: var(--ax-accent); background: var(--ax-accent-wash); }

/* ── ١٢ · متغيّرات الحقول التي فاتت الجولة الأولى ─────────────────────────
 * التحليل الساكن للمصدر أظهر التوزيع الحقيقيّ:
 *   `.input` ٤٠١ · `.form-control` ٣٣٦ · `.field__input` ٥١ · `.form-input` ٤٧
 *   — وكلّها مغطّاة أعلاه. والفجوات ثلاث:
 *   `.input--sm` ٣١ · `.filter-input` ١٠ · `.search-input` ١.
 *
 * الفجوة تعني حقلًا بارتفاع ونصف قطر مختلفين في صفحة واحدة — وهو بالضبط
 * «خانات مختلفة في كلّ صفحة». */

/* المقاس المضغوط: ارتفاع القالب (32px) ونصف القطر نفسه — فرقٌ في الحجم
 * لا في الشكل. المقاسان يقرآن نظامًا واحدًا بحجمين، لا نظامين. */
/* 🔴 التخصيص مرفوع بمُحدّد العنصر (`input.x.y` = ٠٬٢٬١): قاعدةٌ أقدم
 * تعطي 36px بينما مقاس القالب المضغوط 32px — ومقاسان مضغوطان على نفس
 * الشاشة هما عين التفاوت الذي تُزيله هذه الطبقة. */
input.input.input--sm, select.input.input--sm, textarea.input.input--sm,
input.at-input.at-input--sm, select.at-input.at-input--sm,
input.ax-input.ax-input--sm, select.ax-select.ax-select--sm,
.input--sm, .at-input--sm, .ax-input--sm, .ax-select--sm {
  min-block-size: var(--ax-control-h-compact, 32px);
  block-size: var(--ax-control-h-compact, 32px);
  padding-block: 0;
  font-size: var(--ax-text-xs, 12px);
  padding-inline: var(--ax-space-3, 12px);
  border-radius: var(--ax-radius-sm, 12px);
}

/* حقول شريط التصفية والبحث — نفس النظام. */
.filter-input, input.filter-input,
.search-input, input.search-input,
.qp-rail-search, input.qp-rail-search {
  min-block-size: var(--ax-control-h, 40px);
  padding-inline: var(--ax-space-3, 12px);
  font-size: var(--ax-text-sm, 13px);
  color: var(--ax-text);
  background: var(--ax-surface-solid);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-sm, 12px);
}
.filter-input:hover, .search-input:hover, .qp-rail-search:hover {
  border-color: var(--ax-border-strong);
}
.filter-input:focus, .search-input:focus, .qp-rail-search:focus {
  outline: none;
  border-color: var(--ax-accent);
  box-shadow: var(--ax-focus-shadow);
}

/* مربّعات الاختيار ومفاتيح التبديل — تتبع اللون الأساس لا أزرق المتصفّح. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--ax-accent); }

/* ── خليّة صفّ النقل (dual-list) ──────────────────────────────────────────
 * `.at-xfer__cell` لم يكن لها قاعدةٌ في أيّ طبقة: العمود شبكيّ بعرضٍ محسوب،
 * والاسم الأطول منه كان يتجاوزه فيدخل عمودَ جاره — لا يُقصّ ولا يُنقَّط.
 * الاقتطاع يحتاج ثلاثتها معًا، و`min-inline-size:0` رابعُها: ابنُ الشبكة
 * عرضُه الأدنى «أطولُ كلمة» ما لم يُصفَّر، فتفشل النقاط الثلاث بصمت. */
.at-xfer__cell {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* خليّة صندوق التحديد لا تُقتطع — وليست نصًّا أصلًا. */
.at-xfer__cell--cb { overflow: visible; }
/* والعنصر التفاعليّ داخل خليّة (منسدلة الدور مثلًا) يحتفظ بعرضه. */
.at-xfer__cell > select,
.at-xfer__cell > button { max-inline-size: 100%; }

/* ── النقر للاتصال ───────────────────────────────────────────────────────
 * الرقم القابل للنقر يجب أن **يبدو** قابلًا للنقر قبل أن يُلمس — وإلّا بقيت
 * الميزة مخفيّةً وإن كانت تعمل. فالأيقونة باهتة حتى التحويم، والرقم يحمل
 * تسطيرًا منقّطًا يُميّزه عن نصٍّ عاديّ بلا صخب الرابط الأزرق. */
.at-c2c-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 4px; margin-inline: -4px;
  border: 0; background: transparent; cursor: pointer;
  color: inherit; font: inherit;
  border-radius: var(--ax-radius-sm, 6px);
  text-decoration: underline dotted color-mix(in srgb, currentColor 42%, transparent);
  text-underline-offset: 3px;
}
.at-c2c-link .icon { opacity: .45; transition: opacity .12s ease, color .12s ease; }
.at-c2c-link:hover,
.at-c2c-link:focus-visible {
  color: var(--ax-accent);
  background: color-mix(in srgb, var(--ax-accent) 10%, transparent);
  text-decoration-color: currentColor;
}
.at-c2c-link:hover .icon, .at-c2c-link:focus-visible .icon { opacity: 1; }
.at-c2c-link[disabled] { opacity: .55; cursor: progress; }
.at-c2c[disabled] { opacity: .55; cursor: progress; }

/* ══ مرادفات الرموز ═══════════════════════════════════════════════════════
 * قياسٌ على ١٨١ ملفّ واجهة: **٣٤ استعمالًا لرمزٍ غير معرَّف وبلا احتياط** —
 * الخاصيّة تسقط كليًّا فيرث العنصر ما فوقه (أظهرها: أرقام التحويلات والخطوط
 * والطوابير كانت تفقد الخطّ الأحاديّ فتتراقص أعمدتها). و**٢٦٠ استعمالًا
 * باحتياطٍ ثابت** — يعمل، لكنّه لون مثبَّت **لا يتبع تبديل السمة**، وهو عيبٌ
 * لا يظهر إلّا في الوضع المقابل.
 *
 * السبب أسماءٌ متعدّدة لشيءٍ واحد تراكمت عبر طبقات (`--danger` · `--bs-*` ·
 * `--dafa-*` · `--mw-*`)، وتصحيحُها في ٣٢٠ موضعًا تغييرٌ واسعٌ بلا داعٍ.
 *
 * فالمرادف يُعرَّف **مرّةً** هنا مشيرًا إلى الرمز الحقيقيّ. و`var()` تُحلّ عند
 * الاستعمال لا عند التعريف — فتعريفٌ واحد على `:root` يتبع الفاتح والداكن
 * و«سمة النظام» جميعًا بلا تكرار، ودون لمس أيّ صفحة.
 * ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* الخطّ الأحاديّ — لم يكن معرَّفًا أصلًا في أيّ طبقة، وكلّ استعمالاته
     كانت تعتمد على احتياطها أو تسقط. */
  --at-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --at-mono: var(--at-font-mono);
  --dafa-font-mono: var(--at-font-mono);

  /* النصّ */
  --text: var(--at-text-primary);
  --at-text: var(--at-text-primary);
  --text-1: var(--at-text-primary);
  --at-text-strong: var(--at-text-primary);
  --muted: var(--at-text-secondary);

  /* الحالات — لونًا وخلفيّةً وحدًّا */
  --danger: var(--at-danger);
  --c-danger: var(--at-danger);
  --status-danger: var(--at-danger);
  --status-danger-bg: var(--at-danger-bg);
  --danger-bg: var(--at-danger-bg);
  --error-bg: var(--at-danger-bg);
  --danger-soft: var(--at-danger-bg);
  --at-danger-soft: var(--at-danger-bg);
  --success-bg: var(--at-success-bg);
  --at-success-soft: var(--at-success-bg);
  --warning-bg: var(--at-warning-bg);
  --at-warning-soft: var(--at-warning-bg);
  --warning-border: var(--at-warning);
  --color-warning: var(--at-warning);
  --color-warning-bg: var(--at-warning-bg);
  --color-warning-border: var(--at-warning);
  --info-bg: var(--at-info-bg);
  --at-info-soft: var(--at-info-bg);
  --at-info-border: var(--at-info);

  /* الأسطح واللون الأساس */
  --surface-0: var(--at-surface-0);
  --at-surface: var(--at-surface-1);
  --at-bg-soft: var(--at-surface-2);
  --at-bg-muted: var(--at-surface-2);
  --hover: var(--at-surface-2);
  --at-primary: var(--at-accent);
  --at-accent-soft: var(--at-accent-soft-bg);
  --accent-border: var(--at-accent);
  --accent-2: var(--at-accent-hover);

  /* المسافات والزوايا والطبقات */
  --at-space-4: 16px;
  --at-space-5: 20px;
  --at-radius: var(--at-radius-lg);
  --at-z-modal: 1000;

  /* بقايا Bootstrap — تُربط بالنظام بدل ألوان الإطار الافتراضيّة */
  --bs-primary: var(--at-accent);
  --bs-secondary: var(--at-text-secondary);
  --bs-secondary-bg: var(--at-surface-2);
  --bs-success: var(--at-success);
  --bs-danger: var(--at-danger);
  --bs-border-color: var(--at-border);
  --bs-body-color: var(--at-text-primary);

  /* بقايا التسمية القديمة */
  --dafa-card-accent: var(--at-accent);
  --dafa-text-primary: var(--at-text-primary);
  --dafa-border: var(--at-border);
  --dafa-accent: var(--at-accent);
  --dafa-ch-dur: .18s;

  /* مُدد */
  --op-toast-ms: 4000ms;
}

/* ══ كرة التوليد ═════════════════════════════════════════════════════════
 * الكرة رسمٌ في canvas؛ وما هنا هو **إطارها النصّيّ** فقط. الألوان تُترك
 * للشيدر عمدًا: جسمٌ مضيء لا يتبدّل بتبدّل الجدار خلفه. */
.ai-thinking {
  display: grid; justify-items: center; gap: var(--ax-space-3, 12px);
  padding-block: var(--ax-space-5, 20px);
  text-align: center;
}
.ai-thinking__orb { line-height: 0; }
.ai-thinking__title {
  font-size: 14px; font-weight: 600; color: var(--at-text-primary);
  /* النصّ يتغيّر أثناء العمل («جارٍ التفريغ» ← «جارٍ التلخيص»)، وعرضٌ متغيّر
   * يجعل الكرة تقفز يمينًا ويسارًا. */
  min-inline-size: 16ch;
}
.ai-thinking__hint {
  font-size: 12px; line-height: 1.9; color: var(--at-text-secondary);
  max-inline-size: 42ch;
}
/* الوهج خلف الكرة يتبع الحالة — يُرى قبل قراءة النصّ. */
.ai-orb[data-state="thinking"] { filter: drop-shadow(0 0 18px rgba(22,119,255,.42)); }
.ai-orb[data-state="done"]     { filter: drop-shadow(0 0 14px rgba(53,230,178,.38)); }
.ai-orb[data-state="error"]    { filter: drop-shadow(0 0 14px rgba(229,57,47,.40)); }
.ai-orb[data-state="idle"]     { filter: drop-shadow(0 0 10px rgba(120,140,170,.22)); }
.ai-orb { transition: filter .35s var(--at-ease-out, ease-out); }

/* البديل بلا WebGL: التنفّس نفسه بحركةٍ واحدة. */
@keyframes ai-orb-breathe { 0%,100% { transform: scale(.965); opacity: .88 } 50% { transform: scale(1.02); opacity: 1 } }
.ai-orb--css { animation: ai-orb-breathe 3.4s ease-in-out infinite; }
.ai-orb--css[data-state="idle"] { animation-duration: 6s; filter: saturate(.45); }
@media (prefers-reduced-motion: reduce) {
  .ai-orb--css { animation: none; }
  .ai-orb { transition: none; }
}

/* ══ موجة وصول المكالمة ══════════════════════════════════════════════════
 * شاشة المكالمات النشطة تُحدَّث كلّ ٤ث بلا صوتٍ ولا إشارة. الموجة تجعل
 * الوصول يُلتقَط **بطرف العين** دون أن تسرق التركيز من صفٍّ يُقرأ. */
.ac-pulse {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 10px; block-size: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; pointer-events: none;
  border: 2px solid var(--at-info, #1677FF);
  animation: ac-ripple 1.05s cubic-bezier(.16,.8,.32,1) forwards;
}
@keyframes ac-ripple {
  from { transform: scale(1);  opacity: .85 }
  to   { transform: scale(9);  opacity: 0   }
}
#ac-count.is-arrived { animation: ac-bump .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes ac-bump {
  0%   { transform: scale(1);    background: var(--at-info-bg) }
  40%  { transform: scale(1.16); background: var(--at-info-bg) }
  100% { transform: scale(1) }
}
/* حركةٌ مخفَّضة: الوصول يبقى مقروءًا — وميضُ لونٍ بلا تمدّدٍ ولا قفز. */
@media (prefers-reduced-motion: reduce) {
  .ac-pulse { animation: ac-fade .8s linear forwards; }
  @keyframes ac-fade { from { opacity: .5; transform: scale(4) } to { opacity: 0; transform: scale(4) } }
  #ac-count.is-arrived { animation: ac-tint 1s linear; }
  @keyframes ac-tint { 0%,60% { background: var(--at-info-bg) } 100% { background: transparent } }
}

/* ══ الرموز الآليّة في واجهةٍ يمينيّة ═════════════════════════════════════
 * `<code>` و`<kbd>` و`<samp>` عناصرُ **دلاليّة** معناها «نصٌّ تقرؤه الآلة».
 * وفي صفحةٍ اتّجاهُها من اليمين تنقلب علامةُ الرمز البادئة إلى آخره:
 * `*1` يُقرأ `1*` و`+966…` يُقرأ `…966+`. والمستخدم **يطلب ما يراه**، فيفشل.
 *
 * القاعدة هنا دلاليّة لا موضعيّة: كلّ رمزٍ آليّ يُعزَل اتّجاهيًّا أينما كان،
 * والصفحات القادمة تنالها بلا تذكُّر. (الأرقام الخالصة لا تنقلب أصلًا،
 * فالقاعدة لا تضرّها.) */
code, kbd, samp,
.at-token, [data-token] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* ══ بطاقة الزميل — رأسيّة على معيار القالب المعتمد ═══════════════════════
 * كانت أفقيّة (صورةٌ بجانب اسم) فبدت صفًّا مضغوطًا لا بطاقة، والشبكة صارت
 * قائمةً بأعمدة. الرأسيّة تجعل **الوجه** أوّل ما يُلتقَط، والاسم تحته،
 * والحالة شارةً لا نقطةً عارية. */
.at-extcard--v {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 22px 16px 16px;
  border: 1px solid var(--at-border, #eef0f2);
  border-radius: var(--at-radius-lg, 12px);
  background: var(--at-card-bg, #fff);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.at-extcard--v.is-hover {
  border-color: var(--at-border-hover, var(--at-accent));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -12px rgba(0,0,0,.28);
}
.at-extcard__name {
  font-weight: 600; font-size: 15px; line-height: 1.4;
  /* رقم التحويلة نصٌّ لاتينيّ في صفحةٍ يمينيّة — يُعزَل كي لا ينقلب. */
  direction: ltr; unicode-bidi: isolate;
  max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.at-extcard__sub {
  font-size: 12.5px; color: var(--at-text-muted, #9ca3af); line-height: 1.6;
  max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.at-extcard__state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500; line-height: 1.8;
  color: var(--at-text-secondary, #6b7280);
}
.at-extcard__state[data-live="1"] { color: var(--at-success, #10b981); }
.at-extcard__dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%; flex: 0 0 auto;
}
/* صفّ الأفعال: خطٌّ فاصل فوقه، والأزرار متمركزة لا مصطفّة يمينًا —
 * البطاقة كلّها متمركزة، وصفٌّ محاذٍ لطرفٍ يكسر المحور. */
.at-extcard__actions {
  display: flex; gap: 6px; justify-content: center;
  margin-block-start: 10px; padding-block-start: 12px;
  inline-size: 100%;
  border-block-start: 1px solid var(--at-border, #eef0f2);
}

/* ══ بطاقة جهة الاتصال ═══════════════════════════════════════════════════
 * دفتر العناوين جدولًا وحده قائمةُ نصوصٍ رماديّة: الأسماء تُقرأ ولا تُميَّز.
 * البطاقة تعطي كلّ جهةٍ وجهًا (حرفان بلونٍ ثابت لا عشوائيّ). */
.at-ctgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.at-ctcard {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 22px 16px 14px;
  border: 1px solid var(--at-border, #eef0f2);
  border-radius: var(--at-radius-lg, 12px);
  background: var(--at-card-bg, #fff);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.at-ctcard:hover {
  border-color: var(--at-border-hover, var(--at-accent));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -12px rgba(0,0,0,.28);
}
/* النجمة في الزاوية: حالةٌ لا فعلٌ رئيسيّ، فلا تُزاحم صفّ الأفعال. */
.at-ctcard__fav { position: absolute; inset-block-start: 6px; inset-inline-start: 6px; }
.at-ctcard__name {
  font-weight: 600; font-size: 15px; line-height: 1.4; margin-block-start: 2px;
  max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.at-ctcard__sub {
  font-size: 12.5px; color: var(--at-text-muted, #9ca3af); line-height: 1.6;
  max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* البريد نصٌّ لاتينيّ في سطرٍ عربيّ — يُعزَل كي لا تنقلب النقطة والـ@. */
  direction: ltr; unicode-bidi: isolate;
}
.at-ctcard__actions {
  display: flex; gap: 4px; justify-content: center;
  margin-block-start: 8px; padding-block-start: 10px;
  inline-size: 100%;
  border-block-start: 1px solid var(--at-border, #eef0f2);
}
.at-ctcard__actions .btn[disabled] { opacity: .35; cursor: not-allowed; }

/* ── شريط ترشيح المنصّة ──────────────────────────────────────────────────
 * يعلو قائمة المحادثات وصندوق السوشال. ثلاث قواعد تُشكّله:
 *
 * ١) **يمرّر أفقيًّا ولا يلتفّ.** خمس منصّات في عمودٍ عرضه ٣٢٠px تلتفّ إلى
 *    ثلاثة أسطر فتأكل ثلث القائمة. والتمرير في الشريط وحده — لا في الصفحة.
 * ٢) **الخانة الفارغة تبهت ولا تختفي.** «إنستغرام ٠» يقول إنّ الفلتر موجود
 *    والمحتوى معدوم؛ وإخفاؤها يجعل المستخدم يظنّ الميزة ناقصة.
 * ٣) **العدّ بأرقامٍ جدوليّة** — وإلّا اهتزّ عرض الخانة كلّما تغيّر الرقم.
 */
.at-pfilter {
  display: flex;
  gap: var(--ax-space-2, 8px);
  overflow-x: auto;
  overflow-y: hidden;
  padding-block-end: var(--ax-space-2, 8px);
  scrollbar-width: thin;
}
/* شريط التمرير يُخفى بصريًّا ويبقى عاملًا: خطٌّ رماديّ تحت خمس خانات ضجيج. */
.at-pfilter::-webkit-scrollbar { block-size: 3px; }
.at-pfilter::-webkit-scrollbar-thumb {
  background: var(--ax-border, #d4d4d8);
  border-radius: 3px;
}

.at-pfilter__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 4px 10px;
  font: inherit;
  font-size: var(--ax-text-xs, 12px);
  line-height: 1.6;
  color: var(--ax-text-muted, #71717a);
  background: transparent;
  border: 1px solid var(--ax-border, #d4d4d8);
  border-radius: var(--ax-radius-xl, 999px);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.at-pfilter__chip:hover {
  color: var(--ax-text-strong, #18181b);
  border-color: var(--ax-accent, #2563eb);
}
.at-pfilter__chip:focus-visible {
  outline: none;
  box-shadow: var(--ax-focus-shadow, 0 0 0 3px rgb(37 99 235 / .35));
}
.at-pfilter__chip--on {
  color: #fff;
  background: var(--ax-accent, #2563eb);
  border-color: var(--ax-accent, #2563eb);
  font-weight: 600;
}
.at-pfilter__chip--on:hover { color: #fff; }
.at-pfilter__chip--empty { opacity: .5; }

.at-pfilter__n {
  font-variant-numeric: tabular-nums;
  /* الرقم لاتينيّ داخل نصٍّ عربيّ — والعزل يمنع انقلابه مع ما جاوره. */
  direction: ltr;
  unicode-bidi: isolate;
  opacity: .75;
}
.at-pfilter__chip--on .at-pfilter__n { opacity: .9; }

/* ── صفّ المؤشّرات: الهوامش تُلغى داخل الشبكة ────────────────────────────
 * 🔴 `.card` تحمل `margin-block-start: 16px` من قاعدةٍ عامّة، و`:first-child`
 * تُلغيها للأولى وحدها. وداخل الشبكة يعني ذلك أنّ البطاقة الأولى ترتفع ١٦px
 * عن جارّاتها في الصفّ نفسه — إزاحةٌ تُقرأ كخللٍ في المحاذاة ولا سبب لها
 * ظاهر (رُصدت بالقياس: y=259 للأولى و275 للثلاث).
 *
 * والهوامش أصلًا لا محلّ لها داخل شبكةٍ لها `gap`: المسافة مسؤوليّة الشبكة. */
.at-metrics > * { margin: 0 !important; }

/* والبطاقات تتمدّد لارتفاعٍ واحد: بطاقةٌ أقصر من جارتها تكسر خطّ الصفّ حتّى
 * لو تطابقت رؤوسها. */
.at-metrics { align-items: stretch; }

/* ── محاذاة الأزرار في صفٍّ واحد ─────────────────────────────────────────
 * 🔴 الزرّ `inline-flex` يُحاذى على **خطّ القاعدة** بالافتراض. وزرٌّ أيقونيّ
 * بلا نصّ لا خطّ قاعدة له، فيرتفع عن جيرانه المكتوبين (قيس: 387 مقابل 392).
 * ويقع هذا في كلّ خليّة أفعالٍ فيها زرٌّ أيقونيّ بين أزرارٍ نصّيّة.
 *
 * والوسط هو الصحيح للأزرار دائمًا — لا خطّ القاعدة. */
.btn, .icon-btn { vertical-align: middle; }