/* ═══ atheer-mobile.css — أثير على الهاتف (≤ 768px) ════════════════════════════
 *
 * تُحمَّل **آخرًا** في index.html فتفوز على الأوراق الـ٣٤ قبلها. وكلُّ قاعدةٍ هنا داخل
 * `@media (max-width: 768px)` — فلا يتغيّر سطحُ المكتب ولا شريحةُ اللوحيّ (٧٦٩–١٠٢٤).
 * الاستثناءُ الوحيد قاعدتا الإخفاء في الأعلى: بنودُ الهاتف والطبقةُ المعتّمة لا تظهر فوقه.
 *
 * ما رآه المالك (١٨/١٠، آيفون): درجٌ بعرض ٧٣٪ بأيقوناتٍ بلا أسماء، وعشرةُ أزرارٍ صمّاء في
 * الرأس دُفع زرُّ الحساب منها خارج الشاشة، ولا طريقةَ لإغلاق الدرج إلّا زرُّ القائمة.
 * والمبدأ: **الهاتفُ يُستعمل بالإبهام** — أسماءٌ تُقرأ، وأهدافُ لمسٍ ٤٤ بكسل فما فوق، وما لا
 * يتّسع ينتقل إلى الدرج بدل أن يختفي.
 */

/* بنودُ الهاتف في الدرج (الإجراءات السريعة · اللغة · السمة · معلومات النظام) — فوقه في الرأس */
.sidebar__item--mobile-only { display: none !important; }
/* الطبقةُ المعتّمة موجودةٌ في الشجرة دائمًا، ولا تظهر إلّا على الهاتف والدرجُ مفتوح */
.app-shell__scrim { display: none; }

@media (max-width: 768px) {

  /* ── ١) الرأس: القائمة · الاتّصال · الإشعارات · الحساب — وحدها ─────────────────
     وسمُ `data-hdr` ثابتٌ في shell.js، لا عنوانٌ مترجَم. */
  .app-shell__header-right [data-hdr="health"],
  .app-shell__header-right [data-hdr="tools"],
  .app-shell__header-right [data-hdr="lang"],
  .app-shell__header-right [data-hdr="theme"],
  .app-shell__header-right [data-hdr="info"],
  .app-shell__header-right [data-hdr="help"],
  .app-shell__header-right .agent-status { display: none !important; }

  /* حدُّ اللمس ٤٤ بكسل (كانت ٣٢ — وأخطأها اللمسُ في التجربة فأصاب زرّ السمة) */
  .app-shell__header .icon-btn {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  }
  /* الحسابُ: الصورةُ أو الأحرفُ وحدها — الاسمُ والسهمُ يدفعانه خارج الشاشة */
  .app-shell__header .profile-chip__name,
  .app-shell__header .profile-chip > .icon { display: none !important; }
  .app-shell__header .profile-chip {
    padding: 0; min-width: 44px; min-height: 44px;
    justify-content: center; background: transparent; border: 0;
  }

  /* ── ٢) الدرج: أسماءٌ تُقرأ وصفوفٌ تُلمس ────────────────────────────────────── */
  .app-shell__sidebar {
    width: min(86vw, 320px);
    box-shadow: 0 0 40px rgba(8, 12, 24, 0.28);
    overscroll-behavior: contain;               /* تمريرُ الدرج لا يسحب الصفحة خلفه */
  }
  /* أمانٌ ثانٍ: shell.js لا يضيف صنفَ الرصيف على الهاتف، وهذه تضمن الأسماءَ إن أُضيف */
  .app-shell__sidebar .sidebar__item-label { display: inline !important; }
  .app-shell__sidebar .sidebar__item {
    min-height: 48px; font-size: 15px;
    justify-content: flex-start; padding-inline: 14px;
  }
  .app-shell__sidebar .sidebar__caret { display: inline-flex !important; }
  .sidebar__item--mobile-only { display: flex !important; }

  /* الدرجُ كلُّه يتمرّر قطعةً واحدة — التنقّلُ أوّلًا والإعداداتُ في آخره.
     كان التذييلُ ثابتًا بارتفاع ٤٢٣ بكسل (٥٢٪ من الدرج) فحُشر التنقّلُ — وهو ما فُتحت القائمةُ
     لأجله — في ٣٢٥ بكسل، وقُطع عنوانُ «النظام» عند الحدّ. */
  .app-shell__sidebar { overflow-y: auto; }
  .app-shell__sidebar .sidebar__nav { flex: none; overflow: visible; max-height: none; }
  .app-shell__sidebar .sidebar__footer {
    flex: none; border-top: 1px solid var(--border, rgba(127,127,127,.2));
    padding-bottom: max(12px, env(safe-area-inset-bottom));   /* شريطُ آيفون السفليّ */
  }
  /* تنزيلُ تطبيق سطح المكتب لا معنى له على هاتف — ورابطاه بندان من ثمانية في التذييل */
  .sidebar__footer a[href*="apps.apple.com"],
  .sidebar__footer a[href$=".exe"] { display: none !important; }

  /* ── ٣) الطبقةُ المعتّمة: لمسُها يُغلق الدرج، والصفحةُ خلفها لا تتمرّر ─────────── */
  .app-shell.is-mobile-open .app-shell__scrim {
    display: block;
    position: fixed; inset: 0;
    z-index: calc(var(--z-drawer, 80) - 1);
    background: rgba(8, 12, 24, 0.5);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    animation: atheer-scrim-in 180ms ease-out;
  }
  body:has(.app-shell.is-mobile-open) { overflow: hidden; }

  /* ── ٤) المحتوى: بعرض الشاشة، والصفحةُ لا تتمرّر جانبيًّا أبدًا ─────────────────── */
  /* `clip` لا `hidden`: الثاني يحوّل المحتوى إلى حاوية تمرير فيكسر كلَّ رأسٍ ثابتٍ (sticky)
     بداخله. وهذه شبكةُ أمانٍ أخيرة فقط — المكوّناتُ تُصلح من مصدرها في §٥. */
  .app-shell__content { min-width: 0; overflow-x: clip; }

  .page-header { flex-wrap: wrap; gap: 12px; align-items: flex-start; }
  .page-header__titles { min-width: 0; flex: 1 1 100%; }
  .page-header__actions { flex-wrap: wrap; gap: 8px; width: 100%; }

  .page__toolbar { flex-wrap: wrap; gap: 8px; }
  .page__toolbar-left, .page__toolbar-right { flex-wrap: wrap; gap: 8px; width: 100%; }
  .page__search, .page__search input { width: 100%; max-width: none; min-width: 0; }

  /* الجداولُ تتمرّر **داخل** حاويتها — لا الصفحةُ كلُّها */
  .table-wrapper, .table-wrap, .at-grid {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* بطاقاتُ الأرقام عمودان لا عمود: أربعُ بطاقاتٍ بعمودٍ واحد ٤٧٥ بكسل لأربعة أرقامٍ قصيرة
     (التحويلات · متّصل · غير متّصل · بلا جهاز) — والرقمُ هو المعلومة لا ارتفاعُ البطاقة */
  .page__metrics, .at-listpage__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .at-metric-card { min-width: 0; }

  /* ── ٥) مكوّناتٌ مشتركةٌ فاضت في المسح ──────────────────────────────────────
     مُسحت ١٩٥ صفحة على عرض ٣٧٥ (١٨/١٠). العطبُ لم يكن ١٩٥ صفحة بل ثمانيةَ مكوّنات،
     وكلُّها من نوعٍ واحد: عرضٌ أدنى ثابتٌ أكبرُ من الهاتف، أو صفٌّ لا يلتفّ. */

  /* إجراءاتُ صفحات القوائم: صفٌّ واحدٌ يُسحب أفقيًّا لا أربعةُ صفوف.
     التحويلاتُ وحدها ثمانيةُ أزرار (إضافة · تعديل · استيراد · تصدير · Atheer Server · رسالة ترحيب ·
     قوالب المفاتيح · حذف) التفّت في أربعة صفوفٍ غير متساوية وأكلت الشاشةَ الأولى قبل البحث والقائمة.
     «إضافة» أوّلًا ظاهرة، والبقيّةُ بسحبة، والزرُّ المقطوعُ عند الحافّة يُعلن أنّ هناك المزيد.
     والحاشيةُ السالبة تجعل السحبَ من حافّة الشاشة إلى حافّتها. */
  .at-listpage__toolbar-left {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--space-4, 16px)); padding-inline: var(--space-4, 16px);
    padding-block: 2px; gap: 8px; max-width: none;
  }
  .at-listpage__toolbar-left::-webkit-scrollbar { display: none; }
  .at-listpage__toolbar-left > * { flex: 0 0 auto; }

  /* شريطُ أدوات صفحات القوائم — صفٌّ `nowrap` بعرض ٤٠٠ يفيض ٤٩ (التحويلات · المسارات · الطوابير) */
  .at-listpage__toolbar-right { flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
  .at-listpage__toolbar-right > * { min-width: 0; }

  /* ألسنةُ الـCRM — تتمرّر أفقيًّا داخل صفّها بدل الخروج عن الشاشة (حتّى ١٦٤ بكسل) */
  .ax-tabs {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .ax-tabs::-webkit-scrollbar { display: none; }
  .ax-tabs__tab { flex: 0 0 auto; }

  /* الملفّ الشخصيّ · الأمان · التفضيلات — الشبكةُ الأمّ عمودُها ٣٩٠ بكسل ثابت */
  .pref-panel > div { grid-template-columns: minmax(0, 1fr) !important; }
  .pref-section { min-width: 0; max-width: 100%; }

  /* منتقي التحويلات ذو الأعمدة الأربعة: «الصلاحيات» كانت عند x = −١٣٨ و«الاسم» منعصرًا إلى ٢٥ بكسل.
     الرأسُ والصفوفُ يتشاركان `gridCols()` بـ`1fr` — فعرضٌ أدنى **واحد** لكليهما يُبقي أعمدتَهما
     متطابقة، واللوحُ يتمرّر. و`:has()` يحصرها في اللوح الرباعيّ؛ اللوحُ الثنائيّ سليمٌ فلا يُمسّ. */
  .at-xfer__panel:has(.at-xfer__cols > :nth-child(5)) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .at-xfer__panel:has(.at-xfer__cols > :nth-child(5)) :is(.at-xfer__cols, .at-xfer__row) { min-width: 460px; }

  /* جدولٌ خارجَ أيّ حاويةٍ تتمرّر (LDAP) — يتمرّر هو */
  table.at-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* أدواتُ مصمّم التدفّق وفلاترُ سجلّ التدقيق — تلتفّ */
  .cfd-ctl, .filter-bar, .filter-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }

  /* الحقولُ ١٦ بكسل فما فوق: أقلُّ من ذلك يُكبّر سفاري الصفحةَ عند لمس الحقل ولا يعيدها */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }

  /* ── ٦) صفحاتُ إدارة المنصّة (/sysadmin) — مسحٌ ثانٍ ببياناتٍ مملوءة (١٩/١٠) ───────── */

  /* بطاقاتُ الأرقام (الشركات · الفوترة · الاستهلاك · تفاصيل الشركة · نظرة عامّة): عمودان.
     كانت عمودًا واحدًا بارتفاع ١٤٠–١٨٠ للبطاقة ⇒ أربعُ بطاقاتٍ تأكل الشاشةَ الأولى كلَّها.
     والرقمُ ٤٠ بكسل `nowrap` لا يسع نصفَ الشاشة («١٢٬٥٠١ ر.س.» فاض ١٤٧) ⇒ ٢٦ ويلتفّ. */
  .dash-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .dash-top-grid .dash-card__big-value {
    font-size: 26px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere;
  }

  /* صفُّ الشركة: اسمُها كان في عمودٍ عرضُه ٦٤ بكسل (خمسةُ أسطر) لأنّ الشارةَ بجانبه والإجراءين
     في عمودٍ ثالث. ⇐ الاسمُ يأخذ عرضَ السطر كلّه، والشارةُ تنزل تحته، والإجراءان آخرَ البطاقة. */
  .tenant-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "mark info info" "pkg pkg status" "usage usage actions";
  }
  .tenant-row__name { flex-wrap: wrap; row-gap: 4px; }
  .tenant-row__usage { min-width: 0; }

  /* أبناءُ البطاقة لا يتجاوزونها: جدولُ فواتير أودو داخل حاويةٍ تتمرّر، ومع ذلك دفع البطاقةَ
     ٣٢ بكسل خارج الشاشة — الحاويةُ نفسُها كانت بعرض الجدول. */
  .app-shell__content .card > * { min-width: 0; max-width: 100%; }

  /* إحصاءاتُ الإصدارات: أربعُ شاراتٍ في صفٍّ `nowrap` (٣٦٩ بكسل) */
  .kpi-row { flex-wrap: wrap; }

  /* 🔴 **كلُّ جدولٍ يتمرّر داخل أبيه.** المسحُ الأوّل كان بلا بيانات فلم يرَ هذا: بصفوفٍ حقيقيّة
     تفيض جداولُ سجلّ المكالمات (١٤٧) والتسجيلات (١٩٣) وسجلّات الصيانة (حتّى ٤١٦) ولوحة العمليّات.
     وشبكةُ الأمان `overflow-x: clip` في §٤ **تقصّ** الفائض — وفي RTL يفيض الجدولُ يسارًا، أي أعمدةُ
     الإجراءات (التشغيل · التنزيل) — فلا يصل إليه المستخدمُ أصلًا. ⇐ أبو الجدول حاويةُ تمرير.
     و`!important` لأنّ بعضَ الآباء بطاقاتٌ بنمطٍ مضمَّن `overflow: hidden` (سجلّات العمليّات).
     (لا `display:block` على الجدول نفسه كما في at-table: الجدولُ القصير يجب أن يملأ العرض) */
  .app-shell__content :has(> table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* صفُّ «نصّ + زرّ» يلتفّ (`flex-wrap: wrap`) ونصُّه `flex: 1` بأساسٍ صفر: النصُّ ينعصر إلى ١١٦
     بكسل (أربعة أسطر) والزرُّ بجانبه، فلا يلتفّ أبدًا. حدٌّ أدنى للنصّ ⇒ الزرُّ ينزل تحته.
     (`!important` لأنّ النصَّ يحمل `min-width: 0` في نمطه المضمَّن) */
  .app-shell__content [style*="flex-wrap: wrap"] > [style*="flex: 1 1 0%"] { min-width: min(100%, 220px) !important; }

  /* رأسُ الصفحة (at-page-header): العنوانُ بأساسٍ صفر والأزرارُ بجانبه ⇒ «طوابير الاتصال» في ٥٠ بكسل
     (تسعةُ أسطر للوصف) و«Trunks» في ٩٤. ⇐ العنوانُ سطرٌ كامل والأزرارُ تحته. */
  .at-page-header__left { flex-basis: 100%; }

  /* دليلُ الاستخدام: العمودُ الرئيسيّ ٦٤٨ بكسل في درجٍ ٣٢٧ (جدولُ الدليل داخله يتمرّر، وهو نفسُه لا) */
  .ug-layout > * { min-width: 0; max-width: 100%; }
  /* وعناوينُ الـURL في `<code>` السطريّ (`https://{slug}.atheerpbx.com/api/provision/phone` = ٣٦٧ بكسل) تنكسر */
  .app-shell__content code { overflow-wrap: anywhere; }

  /* معلوماتُ النظام: «أيقونة · عنوان بعرضٍ أدنى ٢٠٠ · قيمة» ⇒ القيمةُ خارج الشاشة ٤٠ بكسل.
     ⇐ القيمةُ تنزل سطرًا تحت عنوانها، محاذيةً له. */
  .app-shell__content div:has(> span.icon + [style*="min-width: 200px"]) { flex-wrap: wrap; row-gap: 2px; }
  .app-shell__content span.icon + [style*="min-width: 200px"] { min-width: 0 !important; flex: 1 1 auto; }
  .app-shell__content span.icon + [style*="min-width: 200px"] + * {
    flex: 1 1 100%; padding-inline-start: 32px; overflow-wrap: anywhere;
  }

  /* رسائلُ الوكيل: جدولٌ مبنيٌّ بشبكة (من · إلى · الرسالة · الحالة · التاريخ = ٥١٨ بكسل) ⇒ يتمرّر */
  .app-shell__content [style*="grid-template-columns: minmax(120px, auto) minmax(120px, auto)"] { overflow-x: auto; }

  /* رموزُ الميزات: «الاسم ١٦٠ · الوصف · الرمز ٩٠» ⇒ الوصفُ ٤٧ بكسل.
     ⇐ الاسمُ والرمزُ في سطر، والوصفُ تحتهما بعرض الصفّ. */
  .app-shell__content [style*="grid-template-columns: 160px 1fr 90px"] {
    grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 4px !important;
  }
  .app-shell__content [style*="grid-template-columns: 160px 1fr 90px"] > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }

  /* شبكاتُ نصفين مضمَّنة (معاينة الموظّف الذكيّ · الفندق · نغمات التسجيل): عمودٌ واحد.
     معاينةُ الموظّف كانت بطاقتين ١٧٠ و١٤١ بكسل، ووصفُها ٤٢ بكسل في ١٩ سطرًا. */
  .app-shell__content [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr)"],
  .app-shell__content [style*="grid-template-columns: minmax(0px, 1.2fr) minmax(0px, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@keyframes atheer-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .app-shell.is-mobile-open .app-shell__scrim { animation: none; }
}