/* ══════════════════════════════════════════════════════════════
 *  الشكاوى
 * ══════════════════════════════════════════════════════════════
 *
 * ‏شاشة يعمل فيها موظف ساعات، وصفوفها تقرأ بالعين لا بالنقر: المعرف،
 * ورقم الواتساب، والإيميل، والمشكلة، والحال — كلها في سطر الجدول قبل
 * أن يفتح شيئا. والعين تفتح، والصاعقة تبعث.
 */

/* ══════════════════════════════════════════════════════════════
 *  و«hidden» تغلب كل «display» كتب هنا
 * ══════════════════════════════════════════════════════════════
 *
 * ‏السمة `hidden` تخفي بقاعدة من متصفح: `[hidden] { display: none }`.
 * وقاعدة يكتبها صاحب الصفحة أخص منها — فـ`.shot { display: flex }`
 * تغلبها، ويبقى العنصر ظاهرا وسمته تقول إنه مخفي.
 *
 * ‏وهذا لا يظهر في فحص يقرأ السمة: `el.hidden` تقول `true` بالضبط
 * كما ينبغي. ظهر في لقطة شاشة — معاينة صورة لم يخترها أحد جالسة
 * تحت الفورم بصورة مكسورة.
 */
[hidden] { display: none !important; }


/* ── فلتر المنتج داخل شريط الحالات ─────────────────────────── */
.cx-product-filter {
  position: relative; flex: 1 1 176px;
  min-width: 172px; max-width: 400px; height: 42px; margin: 0;
}
.cx-product-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 42px; padding: 0 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-primary);
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.cx-product-trigger:hover, .cx-product-filter.is-open .cx-product-trigger {
  border-color: var(--accent); background: var(--surface-3);
}
/* ‏والتركيز حدٌّ مصمت لا هالة: هالةُ العشرين في المئة لا تُرى على السطح الداكن */
.cx-product-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ‏وداخل القائمة المتمرّرة يُرسم إلى الداخل: ما خرج عن حافّتها يقصّه التمرير */
.cx-product-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cx-product-trigger-main, .cx-product-trigger-side, .cx-product-option-meta {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}
.cx-product-trigger-main > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cx-product-trigger-main svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.cx-product-trigger-side { flex: none; color: var(--text-secondary); }
.cx-product-trigger-side b { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cx-product-chevron { width: 17px; height: 17px; transition: transform .22s ease; }
.is-open .cx-product-chevron { transform: rotate(180deg); }
/* ‏والقائمة بقدر أطول اسم فيها لا بقدر زرّها: أسماء المنتجات طويلة
   («اشتراك يوتيوب بريميوم + شهر ميوزك بحسابك») وكانت تنكسر ستة
   أسطر في عمود ضيق. وهي تطفو فوق الصفحة فلا تزاحم شيئا باتساعها. */
.cx-product-menu {
  position: absolute; z-index: 40; inset-block-start: calc(100% + 7px);
  /* ‏والفلتر يسار التبويبات في الشريط الواسع، وقد يلاصق حافّة اللوح اليسرى (١١٨٠):
     فتُرسى القائمة على حافّته اليسرى وتنمو يمينا فوق التبويبات — لا يسارا خارج النافذة */
  inset-inline-start: auto; inset-inline-end: 0;
  width: max-content; min-width: 100%; max-width: min(460px, 100vw - 32px);
  max-height: min(440px, 60vh); overflow-y: auto; scrollbar-gutter: stable; padding: 6px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-2); box-shadow: var(--shadow-lg);
  animation: cx-product-open .2s ease-out both;
}
.cx-product-option {
  --cx-i: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 43px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary);
  font: inherit; font-size: 14.5px; font-weight: 750; text-align: start; cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
  animation: cx-product-item .23s ease-out both;
  animation-delay: calc(var(--cx-i) * 18ms);
}
.cx-product-option:hover, .cx-product-option:focus-visible {
  background: var(--surface-3); border-color: var(--border-default); transform: translateX(-2px);
}
.cx-product-option.is-selected { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.cx-product-option-label { min-width: 0; line-height: 1.5; }
/* ‏وكانت تحت ١٣٦٠ تُحبس في عرض زرّها فتنكسر أسماءُ المنتجات ستة أسطر. وحين
   ينزل الفلتر سطرا وحده (لوحٌ لا يسعه مع التبويبات) يجلس في أوّله عند اليمين،
   فتُرسى القائمة على حافّته اليمنى وتنمو يسارا داخل اللوح */
@container cx-page (width < 860px) {
  .cx-product-menu { inset-inline-start: 0; inset-inline-end: auto; }
}
.cx-product-option-meta { flex: none; color: var(--text-secondary); }
.cx-product-option-meta b {
  padding: 2px 7px; border-radius: 999px; background: var(--surface-inset);
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.cx-product-option-meta svg { width: 16px; height: 16px; color: var(--accent); opacity: 0; }
.cx-product-option.is-selected .cx-product-option-meta svg { opacity: 1; }
.cx-product-group {
  padding: 11px 11px 5px; color: var(--text-secondary);
  font-size: 12px; font-weight: 800; border-top: 1px solid var(--border-subtle); margin-top: 5px;
}
@keyframes cx-product-open { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cx-product-item { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ── مفتاح الدعوات التلقائية ───────────────────────────────────
 * ‏يجلس مع رابط الصفحة في سطر واحد: كلاهما إعداد للشاشة لا صف فيها.
 * والنص بجوار المفتاح لا فوقه — من قرأ «إرسال الدعوات تلقائيا» وحده
 * لا يعرف أهو مشغل أم لا حتى ينظر إلى المفتاح، فيقربان. */
.cx-auto {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 42px; padding: 0 11px 0 9px; cursor: pointer;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-secondary);
  font-size: 13px; font-weight: 800; white-space: nowrap;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.cx-auto:hover { border-color: var(--accent); }
.cx-auto .switch { flex: none; height: 24px; }
.cx-auto .slider { border-color: var(--border-strong); }
/* ‏والقرص كلّه يخضرّ حين يعمل: الحال يقرأ من بعيد بلا تدقيق في مفتاح */
.cx-auto:has(input:checked) {
  border-color: color-mix(in srgb, var(--success) 48%, var(--border-default));
  background: var(--success-soft); color: var(--success-text);
}
.cx-auto:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-auto:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.cx-auto input:disabled + .slider { cursor: not-allowed; }

/* ── سطر الرابط العام ─────────────────────────────────────────
 * ‏الموظف يبعثه للعميل. وكتابته بيده تعني أن يتذكره وأن يكتب النطاق
 * صحيحا — ومن أخطأ حرفا أرسل عميله إلى لا شيء. */
/* ‏وبقامة إخوته في الشريط: كلُّهم اثنان وأربعون */
.cx-link-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-secondary); cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .12s ease;
}
.cx-link-btn svg { width: 17px; height: 17px; }
.cx-link-btn:hover {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
.cx-link-btn:active { transform: scale(.94); }
.cx-link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .cx-link-btn { width: 44px; height: 44px; } }
/* ‏ونصّ الرابط يُكشف حين يسقط النسخ: يُقرأ ويُظلَّل باليد. وهو خارج
   الزرّ — المتصفح لا يبدأ تظليلا داخل زرّ. */
.cx-public-link.cx-link-bare {
  position: static; width: auto; height: auto; margin: 0;
  padding: 0 9px; clip-path: none; overflow: visible; white-space: nowrap;
  display: inline-flex; align-items: center; height: 36px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-primary);
  direction: ltr; unicode-bidi: isolate;
  font-size: 12.5px; font-weight: 700; user-select: all;
}


/* ── الجدول ────────────────────────────────────────────────── */
.cx-table td { vertical-align: middle; }
.cx-table .ltr { direction: ltr; unicode-bidi: isolate; }

/* ‏والمعرف بخط ثابت العرض وغليظ: هو ما يقوله العميل في المحادثة وما
   يبحث عنه الموظف بعينه في عمود من أربعين صفا */
.cx-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 800; letter-spacing: .02em;
  color: var(--text-primary); white-space: nowrap;
}

.cx-phone { white-space: nowrap; }
.cx-phone .ltr { font-variant-numeric: tabular-nums; }


/* ‏والدعوة اليدوية بلون مختلف عن كل شكوى: ليست خطأ يصلح بل عمل ينتظر */
/* ‏ولونُها لونُ تبويبها «دعوات يدوية» (بنفسجي): الأخضرُ لونُ اللوحة و«حُلّت» معا */
.badge.cx-kind-q {
  background: color-mix(in srgb, var(--tab-3) 13%, var(--surface-2));
  color: var(--tab-3);
  border-color: color-mix(in srgb, var(--tab-3) 34%, transparent);
}


.cx-col-eye, .cx-col-act { width: 1%; white-space: nowrap; }

.cx-src, .cx-flag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-secondary);
  font-size: 11.5px;
}
.cx-src i, .cx-flag i, .cx-src svg, .cx-flag svg { width: 12px; height: 12px; }

/* ‏و«ما اتبلغش» تحذير لا زينة: العميل الذي حلت شكواه ولم يعلم يكتب
   من جديد، فتصير شكوى ثانية عن مشكلة انتهت */
/* ‏وأرضُه `--warning-soft` المصمتة في الفاتح: مزيجُ الستة عشر في المئة أغمقُ منها
   فكان الكهرماني السابع عليه ٤٫٢:١ */
.cx-flag.warn {
  background: var(--warning-soft);
  color: var(--warning-text); font-weight: 600;
}

/* ── أزرار الأيقونة: واتساب، وعين، وصاعقة ───────────────────── */
.cx-ibtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  /* ‏واثنان وثلاثون بكسلا في سطح مكتب: الشاشة تقرأ بالفأر، وحد اللمس
     يطبق في الضيقة أدناه */
  min-width: 32px; min-height: 32px; padding: 0 8px;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-primary);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; vertical-align: middle;
  transition: background .15s ease, border-color .15s ease,
              color .15s ease, transform .12s ease;
}
.cx-ibtn:hover { border-color: var(--accent); }
.cx-ibtn:active { transform: scale(.97); }
.cx-ibtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-ibtn i, .cx-ibtn svg { width: 15px; height: 15px; flex: none; }

/* ══════════════════════════════════════════════════════════════
 *  وزر الواتساب: يعرف من طرف العين
 * ══════════════════════════════════════════════════════════════
 *
 * ‏وأخضر واتساب نفسه (#128C7E) يعطي مع الأبيض **٤٫١٤:١** — تحت حد
 * «واكاج» بقليل. وهو زر يضغط في كل صف، فيقرؤه من عينه ضعيفة ومن
 * يعمل تحت ضوء نافذة.
 *
 * ‏فيغمق درجة: يبقى أخضر واتساب في العين، ويصير ٥٫٦:١.
 */
.cx-wa { background: #0E7469; border-color: #0E7469; color: #fff; padding: 0; width: 32px; }
.cx-wa:hover { background: #0A5C53; border-color: #0A5C53; }

.cx-eye { padding: 0; width: 32px; color: var(--text-secondary); }
.cx-eye:hover { color: var(--accent); }

/* ‏وزر المحادثة: يفتح كلام العميل عندنا، لا واتساب على جواله. فلونه
   لون اللوحة لا أخضر واتساب — والعين تفرق بينهما بنظرة */
.cx-chat { padding: 0; width: 32px; color: var(--accent); }
.cx-chat:hover { background: var(--accent-soft); border-color: var(--accent); }
/* ‏ولا قاعدة لمعطل: من لا محادثة له لا يرسم له زر أصلا — تكتب شرطة */
/* ‏وخافتةٌ لا غائبة: بشفافيّة أربعين في المئة كانت ٢٫٦:١ في الفاتح */
.cx-none { color: var(--text-muted); opacity: .62; font-size: 16px; line-height: 1; }

.cx-act {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
}
.cx-act:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* ‏وللإصبع أربعة وأربعون حيث كان: آيباد أفقيٌّ ألفٌ وأربعة وعشرون ولا يدخل مدى ضيّقا */
@media (max-width: 760px), (pointer: coarse) {
  .cx-ibtn { min-width: 44px; min-height: 44px; }
  .cx-wa, .cx-eye, .cx-chat { width: 44px; }
}

/* ── الأزرار النصية (رابط الصفحة، وحفظ الملاحظة) ────────────── */
.cx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 7px 12px;
  border: 1px solid var(--border-default); border-radius: 9px;
  background: var(--surface-2); color: var(--text-primary);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease,
              color .15s ease, transform .12s ease;
}
.cx-btn:hover { border-color: var(--accent); }
.cx-btn:active { transform: scale(.98); }
.cx-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-btn i, .cx-btn svg { width: 15px; height: 15px; }
.cx-btn.ghost { background: transparent; color: var(--text-secondary); font-weight: var(--fw-normal); }
.cx-btn.ok {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  color: var(--success-text);
}
.cx-btn.ok:hover { background: color-mix(in srgb, var(--success) 22%, transparent); }
@media (max-width: 760px), (pointer: coarse) {
  .cx-btn { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════
 *  قائمة الإجراء السريع
 * ══════════════════════════════════════════════════════════════
 *
 * ‏تعلق في `body` لا في الخلية: `.table-wrap` تمرر أفقيا، وكل ما يخرج
 * من حدها يقص — فقائمة داخل الجدول كانت تظهر مقصوصة عند آخر صف.
 * وفوق الجدول والشريط العلوي معا.
 */
.cx-menu {
  position: absolute; z-index: 240;
  min-width: 210px; padding: 6px;
  /* ‏وبنودُ اللمس أربعة وأربعون: ثمانيةٌ منها أطولُ من شاشةٍ قصيرة، فتُمرَّر داخلها ولا تقع تحت حافّتها */
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
}
/* ‏الأيقونة ثم اسم الإجراء في أوّل السطر، والحالُ التي يؤول إليها في آخره: كان
   `space-between` يرمي الاسم في وسط السطر بين طرفين. والأيقونة بلون أثرها —
   ألوانُ أزرار الدرج نفسها (`--cx-action` أدناه): أخضر يحلّ، وأحمر يرفض */
.cx-menu-item {
  --cx-action: var(--accent); --cx-action-soft: var(--accent-soft);
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; min-height: 36px; padding: 7px 10px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary);
  font: inherit; font-size: 13px; font-weight: 600; text-align: start;
  cursor: pointer;
}
.cx-menu-item svg { width: 16px; height: 16px; flex: none; color: var(--cx-action); }
.cx-menu-item > span { flex: 1 1 auto; min-width: 0; }
.cx-menu-item:hover { background: var(--cx-action-soft); }
.cx-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cx-menu-item small {
  flex: none; margin-inline-start: auto;
  font-size: 11.5px; font-weight: 600; color: var(--text-secondary); opacity: .72;
  padding-inline-start: 7px; border-inline-start: 1px solid var(--border-default);
}

/* ══════════════════════════════════════════════════════════════
 *  اللوح
 * ══════════════════════════════════════════════════════════════ */
.cx-dhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.cx-dsec { padding: 12px 0; border-top: 1px solid var(--border-default); }
.cx-dsec h4 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  color: var(--text-secondary); letter-spacing: .01em;
}
.cx-dsec dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.cx-dsec dt { font-size: 12.5px; color: var(--text-secondary); }
.cx-dsec dd { margin: 0; font-size: 13.5px; color: var(--text-primary); min-width: 0; overflow-wrap: break-word; }
.cx-dsec .ltr { direction: ltr; unicode-bidi: isolate; }
.cx-muted { color: var(--text-secondary); }

.cx-dhint { margin: 0 0 8px; font-size: 12px; color: var(--text-secondary); }

#cxNoteText {
  width: 100%; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-primary);
  font: inherit; font-size: 13.5px; line-height: 1.7; resize: vertical;
}
#cxNoteText:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ‏ورقم الطلب: أطابق أم لا. وهو ما يفرق شكوى عن عبث */
.cx-order {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.cx-order i, .cx-order svg { width: 13px; height: 13px; }
.cx-order.ok {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success-text);
}
.cx-order.unknown { background: var(--surface-2); color: var(--text-secondary); }
.cx-order-note { margin-inline-start: 8px; font-size: 12px; color: var(--text-secondary); }

.cx-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cx-timeline li { font-size: 13px; color: var(--text-primary); }
.cx-timeline time {
  display: inline-block; margin-inline-end: 8px; padding: 1px 7px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-secondary);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
/* ‏والرسالة التي خرجت تقتبس كما خرجت: من سأل «قلنا له إيه؟» يقرؤها */
.cx-quote {
  margin: 6px 0 0; padding: 8px 12px;
  border-inline-start: 3px solid var(--accent); border-radius: 0;
  border-start-end-radius: 6px; border-end-end-radius: 6px;
  background: var(--surface-2); color: var(--text-secondary);
  font-size: 12.5px; line-height: 1.7; white-space: pre-wrap;
}

.cx-shot {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border-default); border-radius: 8px;
  background: var(--surface-2); color: var(--text-primary);
  font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.cx-shot:hover { border-color: var(--accent); color: var(--accent); }
.cx-shot i, .cx-shot svg { width: 14px; height: 14px; }

/* ‏وذيل اللوح يحمل الإجراءات نفسها: من فتح العين ليقرأ لا يرجع إلى
   الصف ليضغط الصاعقة */
.cx-dfoot { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.cx-fbtn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  min-height: 40px; padding: 5px 10px;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-primary);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.cx-fbtn:hover { border-color: var(--accent); }
.cx-fbtn small { font-size: 10.5px; font-weight: var(--fw-normal); color: var(--text-secondary); }

/* ══════════════════════════════════════════════════════════════
 *  عارض الصورة
 * ══════════════════════════════════════════════════════════════ */
.cx-view {
  position: fixed; inset: 0; z-index: 220;
  display: grid; place-items: center;
  padding: 40px 24px;
  background: rgba(4, 7, 10, .85);
  backdrop-filter: blur(10px);
}
.cx-view img {
  max-width: 100%; max-height: 100%;
  border-radius: 10px; box-shadow: var(--shadow-lg);
  cursor: default;
}
.cx-view-x {
  position: absolute; top: 16px; inset-inline-end: 16px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff;
  transition: background .15s ease;
}
.cx-view-x:hover { background: rgba(255, 255, 255, .26); }
.cx-view-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cx-view-x i, .cx-view-x svg { width: 19px; height: 19px; }

/* ══════════════════════════════════════════════════════════════
 *  الجدول: أعمدة وصفوف — لا كروت
 * ══════════════════════════════════════════════════════════════
 *
 * ‏كان يرث `.orders-table` فيرص في الخلية سطرين وثلاثة ويرتفع الصف
 * إلى مئة بكسل. والمالك: «اعمل جدول عبارة عن أعمدة وصفوف». فصف واحد
 * أربعة وأربعون بكسلا، وخط بين الأعمدة وخط بين الصفوف، ورأس يلتصق،
 * وكل خلية سطر واحد يقص بنقاط — والكلام الطويل خلف العين لا هنا.
 */
.cx-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; table-layout: auto;
}
.cx-table th, .cx-table td {
  padding: 0 10px; height: 44px;
  border-bottom: 1px solid var(--border-default);
  border-inline-end: 1px solid var(--border-default);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle; text-align: start;
}
.cx-table th:last-child, .cx-table td:last-child { border-inline-end: 0; }
.cx-table thead th {
  position: sticky; top: 0; z-index: 2;
  height: 40px; font-size: 12px; font-weight: 700;
  color: var(--text-secondary); background: var(--surface-2);
  border-bottom: 1px solid var(--border-default);
}
.cx-table tbody tr:hover td { background: var(--surface-3); }
.cx-table tbody tr:last-child td { border-bottom: 0; }

/* ‏وأعراض الأعمدة بالبكسل من الشفرة (`CX_COL_FLOOR` و`cxColWidths`) على رؤوسها؛
   وما هنا خطُّ العمود ولونه لا عرضه */
.cx-c-ref   { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 800; }
.cx-c-when  { color: var(--text-secondary); font-size: 12px; }

.cx-table .cx-phone .ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.cx-table .cx-wa, .cx-table .cx-phone .cx-chat { margin-inline-start: 6px; vertical-align: middle; }
.cx-table .badge { white-space: nowrap; }
.cx-table .cx-order { padding: 1px 6px; }

/* ══════════════════════════════════════════════════════════════
 *  والعين: مشكلة العميل أولا، بكلامه هو
 * ══════════════════════════════════════════════════════════════ */
.cx-dsec-issue { padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-2); }
.cx-sum { font-size: 13px; color: var(--text-secondary); margin: 0 0 6px; }
.cx-said {
  margin: 0 0 8px; padding: 10px 12px;
  border-inline-start: 3px solid var(--accent); border-radius: 6px;
  background: var(--bg-card); color: var(--text-primary);
  font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: break-word;
}
.cx-said:last-child { margin-bottom: 0; }
.cx-dsec-issue .cx-shot { margin-top: 10px; }
.cx-dsec-hidden { display: none; }
.cx-dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin: 0; }
.cx-dl dt { color: var(--text-secondary); font-size: 12.5px; }
.cx-dl dd { margin: 0; font-size: 13.5px; }

/* ══════════════════════════════════════════════════════════════
 *  الشريط: شيء واحد على ارتفاع واحد
 * ══════════════════════════════════════════════════════════════
 *
 * ‏التبويبات وأعدادها وفلتر المنتج الموحد في سطر العمل نفسه.
 */
/* ‏والصفحة حاويةٌ تُقاس (`cx-page`): الشريط يُرتَّب بعرض لوحه لا بعرض النافذة —
   طيُّ الشريط الجانبي يغيّر اللوح ولا يغيّر النافذة */
#page-complaints { container: cx-page / inline-size; }

/* ‏سطران ثابتان لا سطرٌ يلتف بحسب ما فيه: الفلاتر (التبويبات وفلتر المنتج) في
   الأوّل، والأفعال (الدفعة والسجل والمفتاح والرابط) في الثاني.

   ‏كان الشريط سطرا يلتف حيث ضاق: قبل أن تصل أعدادُ التبويبات يسع التبويبات
   والفلتر وزرّين، فإذا وصلت اتّسعت التبويبات فنزل الزرّان سطرا ونزل الجدول
   كلُّه معهما — إزاحةٌ قيست ٠٫٤٧ على ١٤٤٠. فالكسرُ بين السطرين مكتوب
   (`::after`) لا متروكٌ لعرض الأعداد.

   ‏والهامش الرأسي على العناصر لا فجوةَ صفوف: الكاسرُ سطرٌ بلا ارتفاع، وفجوةُ
   الصفوف تقع قبله وبعده فتصير ضعفين */
.cx-bar {
  display: flex; align-items: center; column-gap: 10px; row-gap: 0; flex-wrap: wrap;
  margin: -5px 0 7px;
}
.cx-bar > :not(.sr-only) { margin-block: 5px; }
.cx-bar::before, .cx-bar::after { content: ''; flex: 0 0 100%; height: 0; }
.cx-bar::before { order: 1; display: none; }
/* ‏وأساسُ الفلتر في سطر التبويبات مئةٌ وعشرون لا مئةٌ وستّة وسبعون، ويكبر بما بقي:
   التبويبات بخطّ الاحتياط قبل أن يصل خطّ اللوحة أعرضُ بثلاثين (٧١٢ لا ٦٧٩)،
   فكان مجموعهما على ١١٨٠ يساوي اللوح بالبكسل — وأيُّ زيادةٍ تُنزل الفلتر سطرا */
.cx-bar > .cx-product-filter { order: 2; flex: 1 1 120px; min-width: 120px; }
.cx-bar::after { order: 3; }
.cx-bar > .cx-batch-start, .cx-bar > .cx-auto,
.cx-bar > .cx-link-btn, .cx-bar > .cx-public-link { order: 4; }
/* ‏وزرُّ السجل يولد مخفيّا ويظهر مع أوّل قراءة لحاله — فيُحجز مكانه من الأوّل
   ولا يدفع ما بعده حين يظهر. ومن يرى الصفحة يراه (صلاحيّةُ القراءة نفسها) */
.cx-bar > #cxSendLogBtn[hidden] { display: inline-flex !important; visibility: hidden; }

/* ‏ولوحٌ لا يسع التبويبات وأعدادَها والفلترَ في سطر (تحت ثمانمئة وستين): الفلتر
   سطرٌ وحده — بقاعدةٍ لا بعرض الأعداد، وإلا عاد النزولُ نفسه على ١٠٢٤ */
@container cx-page (width < 860px) {
  .cx-bar::before { display: block; }
}
/* ‏وعلى الضيّق كلٌّ يمتدّ في سطره: الدفعة والسجل سطر، والمفتاح والرابط سطر —
   وعرضُ المفتاح بقدر سطره إلا الرابط، فلا يتبدّل التفافهما بظهور رقم السجل */
@container cx-page (width <= 720px) {
  .cx-bar > .cx-product-filter { flex: 1 1 100%; min-width: 0; max-width: none; }
  .cx-bar > .cx-batch-start { flex: 1 1 auto; justify-content: center; }
  .cx-bar > .cx-auto { flex: 1 1 calc(100% - 54px); justify-content: center; }
}

/* ‏والتبويبات شريطٌ يتمرّر وحده على كل عرض لا يسعها — لا على التليفون وحده:
   كانت بين ٧٦١ و٩٠٠ لا تضيق ولا تلتف (`.seg-filters` مكتوبٌ فيها `flex-shrink: 0`)
   فتجرّ الصفحة كلَّها أفقيا، ويختفي «الكل» خارج النافذة */
.cx-bar > .cx-tabs {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cx-bar > .cx-tabs::-webkit-scrollbar { display: none; }
.cx-tabs { height: 40px; box-sizing: border-box; }
.cx-tabs .seg-btn { flex: none; min-height: 32px; padding: 0 12px; gap: 6px; white-space: nowrap; }
/* ‏وحافّةٌ تخفت حيث بقي ما لم يُرَ: التمرير بلا شريط لا يدلّ على نفسه. والخفوت
   يتبع موضع التمرير (`animation-timeline`): في أوّله تخفت النهاية وحدها، وفي
   آخره البداية وحدها، وحين يسع الشريطُ كلَّه لا خطّ زمنيّ فلا خفوت. واليمين بداية */
@property --cx-fade-s { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --cx-fade-e { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes cx-tabs-fade {
  0%   { --cx-fade-s: 0px;  --cx-fade-e: 28px; }
  6%   { --cx-fade-s: 28px; }
  94%  { --cx-fade-e: 28px; }
  100% { --cx-fade-s: 28px; --cx-fade-e: 0px; }
}
@supports (animation-timeline: scroll()) {
  .cx-bar > .cx-tabs {
    -webkit-mask-image: linear-gradient(to left, transparent, black var(--cx-fade-s), black calc(100% - var(--cx-fade-e)), transparent);
    mask-image: linear-gradient(to left, transparent, black var(--cx-fade-s), black calc(100% - var(--cx-fade-e)), transparent);
    animation: cx-tabs-fade linear both;
    animation-timeline: scroll(self inline);
  }
  .cx-bar > .cx-tabs:dir(ltr) {
    -webkit-mask-image: linear-gradient(to right, transparent, black var(--cx-fade-s), black calc(100% - var(--cx-fade-e)), transparent);
    mask-image: linear-gradient(to right, transparent, black var(--cx-fade-s), black calc(100% - var(--cx-fade-e)), transparent);
  }
}

/* ‏والعدد شارةٌ صغيرة داخل تبويبه بلونه، وعلى الفعّال معكوسة (أدناه) */
.cx-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ‏ولا يرسم شيء من العدادات القديمة: قارئ الشاشة وحده يسمعها */
.cx-stats.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════
 *  الخط كله أكبر وأثقل، ورأس الجدول في المنتصف وبلونه
 * ══════════════════════════════════════════════════════════════
 *
 * ‏المالك: «كبر الخط كله وخليه بولد»، و«أسماء الأعمدة في المنتصف وشريطها
 * بلون شيك». والموظف يقرأ هذا الجدول ساعات — خط ثقيل أوضح من خط
 * نحيف على شاشة بعيدة، ورأس ملون يفصل الأسماء عن البيانات بلا خط.
 */
.cx-table { font-size: 15px; font-weight: 700; }
/* ‏والحشو عشرةٌ لا اثنا عشر: عشرةُ أعمدة في لوح لابتوب ١١٨٠ (ثمانمئة وثمانون
   بعد الحدّ والتمرير) — وأربعون بكسلا من الحشو تساوي عمودا. والخطّ لا يصغر */
.cx-table th, .cx-table td { height: 48px; padding: 0 10px; }
/* ‏واسم العمود يلتفّ سطرين ولا يُقصّ: «نوع المشكلة» في عمودٍ ضيّق يُقرأ «نوع /
   المشكلة» لا «نوع الم…» — والرأس ستة وأربعون يسع سطرين */
.cx-table thead th {
  white-space: normal; text-overflow: clip; line-height: 1.15;
  height: 46px; text-align: center; font-size: 14px; font-weight: 800;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-inline-end-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.cx-table thead th:first-child { border-start-start-radius: var(--radius-md); }
.cx-table thead th:last-child  { border-start-end-radius: var(--radius-md); }
.cx-table td { font-weight: 700; color: var(--text-primary); }
.cx-table .cx-ref { font-size: 15px; font-weight: 900; }
.cx-table .cx-c-when { font-size: 13px; font-weight: 700; }
.cx-table .badge { font-size: 13px; font-weight: 800; padding: 4px 8px; }
.cx-table .cx-order { font-size: 14px; font-weight: 800; padding: 2px 6px; }
.cx-table .cx-muted { font-weight: 600; }
.cx-table .cx-act { font-size: 13.5px; font-weight: 800; }

/* ══════════════════════════════════════════════════════════════
 *  والعين: خط كبير واضح، ومشكلة العميل تبرز
 * ══════════════════════════════════════════════════════════════
 *
 * ‏«الخط واضح كبير بولد، تبرز مشكلة العميل اللي بعتها بشكل شيك وواضح
 * عشان الموظف يفهم». فالمشكلة في مربع بحافة اللون وخط ستة عشر ثقيل،
 * والعناوين ثقيلة، والقيم ثقيلة — لا سطر نحيف في الدرج كله.
 */
#cxDrawerBody { font-size: 15px; font-weight: 700; }
/* ‏وشارات سطر العنوان بلا هامش: هي في سطر لا فوق قسم */
.drawer-head-extra .cx-dhead { gap: 8px; margin: 0; flex-wrap: wrap; }
.drawer-head-extra .cx-dhead .badge { font-size: 13px; font-weight: 700; padding: 4px 11px; }
#cxDrawerBody .cx-dhead .badge { font-size: 13px; font-weight: 800; padding: 4px 11px; }
#cxDrawerBody .cx-dsec { margin-bottom: 18px; }
#cxDrawerBody .cx-dsec h4 {
  margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .02em;
  color: var(--text-secondary); text-transform: none;
}
.cx-dsec-issue {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
/* ‏ولا «مهم» على عنوان المشكلة: كانت تثبته على أربعة عشر ولونه، فلا
   يطاوع تدرج العناوين أدناه. واللون صار من شرطة الحافة. */
.cx-dsec-issue h4 { color: var(--accent); }
.cx-sum { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin: 0 0 8px; }
.cx-said {
  font-size: 16.5px; font-weight: 800; line-height: 1.9;
  padding: 12px 14px; border-inline-start-width: 4px;
}
.cx-mail { font-size: 15px; font-weight: 800; }
#cxDrawerBody .cx-order { font-size: 14px; font-weight: 800; }
#cxDrawerBody .cx-order-note { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
#cxDrawerBody .cx-timeline li { font-size: 14px; font-weight: 700; line-height: 1.8; }
#cxDrawerBody .cx-timeline time { font-weight: 800; color: var(--text-primary); }
#cxDrawerBody .cx-quote { font-size: 14px; font-weight: 700; }
#cxDrawerBody textarea { font-size: 15px; font-weight: 600; }
#cxDrawerBody .cx-dhint { font-size: 13px; font-weight: 600; }
/* ‏والعنوان الغليظ لدرج الشكوى وحده: `#drawerTitle` عنوانُ كلّ درج في اللوحة */
#drawerPanel:has(#cxDrawerBody) #drawerTitle { font-weight: 900; }
/* ‏وعلى التليفون: العنوان وزرّ الإغلاق سطر، والشارات سطرٌ تحته بعرضه — كانت
   تُعصر بينهما عمودا من ثلاث شارات فوق بعض، ويُعصر معها زرّ الإغلاق */
@media (max-width: 560px) {
  #drawerPanel:has(#cxDrawerBody) .drawer-header { flex-wrap: wrap; row-gap: 10px; }
  #drawerPanel:has(#cxDrawerBody) .drawer-head-extra { order: 3; flex: 1 1 100%; }
}

/* ‏والرأس بلون ثابت من الرموز لا بمزج: المزج لا يفهمه كل متصفح، ومن
   لم يفهمه رسم الرأس بلون الصفوف. وحجم الخلية يكتب بخصوصية أعلى من
   قاعدة اللوحة العامة على `td` — وإلا بقي اثني عشر بكسلا */
.table-wrap .cx-table thead th {
  background: var(--accent-soft); color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
.table-wrap .cx-table td { font-size: 15px; font-weight: 700; }
.table-wrap .cx-table th { font-size: 14px; font-weight: 800; }

/* ══════════════════════════════════════════════════════════════
 *  وكلام العميل يلتف داخل الدرج — لا يخرج منه
 * ══════════════════════════════════════════════════════════════
 *
 * ‏اللقطة أظهرته سطرا واحدا يعبر حافة الدرج ويقطع: الشبكة داخل الدرج
 * تعطي العنصر عرض محتواه لا عرض أبيه ما لم يقل له «صفر أدنى». فيقال —
 * له وللقسم وللدرج كله.
 */
#cxDrawerBody, #cxDrawerBody .cx-dsec, #cxDrawerBody .cx-dl, #cxDrawerBody .cx-dl dd {
  min-width: 0; max-width: 100%; box-sizing: border-box;
}
#cxDrawerBody { overflow-x: hidden; }
/* ‏وسطر لا يطول أكثر مما تتبعه العين: اللوح تسعمئة بكسل، والسطر فيه
   يبلغ مئة حرف — فترتد العين من آخره إلى أوله فتضل السطر. فيقصر إلى
   ما يقرأ، ويبقى في وسط صندوقه لا في حافته. */
#cxDrawerBody .cx-said { max-width: 72ch; }

#cxDrawerBody .cx-said, #cxDrawerBody .cx-sum, #cxDrawerBody .cx-quote {
  min-width: 0; max-width: 100%; box-sizing: border-box;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
/* ‏والإيميل ينزل سطرا كاملا قبل أن يُكسر، ولا يُكسر إلا إن لم يسعه سطرٌ وحده:
   `anywhere` كانت تكسره في نطاقه (`@gmail.c|om`) وبجانبه متّسع */
#cxDrawerBody .cx-mail, #cxDrawerBody .ltr { min-width: 0; overflow-wrap: break-word; word-break: normal; }
/* ‏وسطر الشيت فيه إيميلان بلا مسافة بينهما تكسر عندها — فيكسر في أي حرف */
#cxDrawerBody .cx-sheet { overflow-wrap: anywhere; word-break: break-word; font-weight: 600; }
/* ‏وإيميل الشيت مقابل إيميل العميل: اختلافهما يعلم بلون لا يُخطأ */
#cxDrawerBody .cx-mismatch {
  display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--danger-soft); color: var(--danger-text); font-weight: 800; font-size: 12.5px;
}
#cxDrawerBody .cx-match {
  display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--success-soft); color: var(--success-text); font-weight: 800; font-size: 12.5px;
}

/* ══════════════════════════════════════════════════════════════
 *  ولكل تبويب لونه — لون حاله
 * ══════════════════════════════════════════════════════════════
 *
 * ‏«عايزين ألوان مختلفة لكل واحد». واللون ليس زينة: هو لون الشارة التي
 * يحملها الصف نفسه — أصفر للجديدة، وأزرق لقيد المعالجة، وأخضر لما
 * حل، وبنفسجي للدعوات اليدوية — فالعين تربط التبويب بالصف بلا قراءة.
 *
 * ‏والخامل يحمل لونه في حرفه وشارته، والفعال يمتلئ به وحرفه أبيض.
 */
/* ‏واللون من رموز النصّ (`-text`) لا من رموز السطح: الكهرماني السادس على
   الأبيض ٣٫٢:١، والسابع ٥:١. والفعّال يمتلئ به وحرفُه `--text-on-accent` —
   أسود على الداكن وأبيض على الفاتح — لا أبيضُ صريح: الأبيض على الوردي
   الرابع في الداكن ٢٫٨:١.

   ‏و«دعوات يدوية» بنفسجي (`--tab-3`): كان `--violet-500` وهو اليوم أخضرُ
   اللوحة نفسه، فصار ثالثَ أخضر في الشريط مع «الكل» و«حُلّت».

   ‏والخامل حرفُه لونُه ممزوجا بقليلٍ من حبر الصفحة: الكهرماني السابع على
   أرضيّة التبويبات الفاتحة ٤٫٤:١، وبالمزج ٥٫٣:١ */
.cx-tabs .seg-btn {
  --cx-tab: var(--accent);
  --cx-tab-ink: var(--text-on-accent);
  color: color-mix(in srgb, var(--cx-tab) 86%, var(--text-strong)); font-weight: 800;
}
.cx-tabs .seg-btn[data-tone="new"]      { --cx-tab: var(--warning-text); }
.cx-tabs .seg-btn[data-tone="working"]  { --cx-tab: var(--info-text); }
.cx-tabs .seg-btn[data-tone="resolved"] { --cx-tab: var(--success-text); }
.cx-tabs .seg-btn[data-tone="queued"]   { --cx-tab: var(--tab-3); }
/* ‏و«تدخل يدوي» أحمرُ الانتباه: شكاوى لا تُرسَل لها دعوةٌ قبل أن يقرأها إنسان */
.cx-tabs .seg-btn[data-tone="manual"]   { --cx-tab: var(--danger-text); }
/* ‏و«طالب استرجاع»: عميل ممكن نخسره — يتكلّم قبل أي حاجة */
.cx-tabs .seg-btn[data-tone="refund"]   { --cx-tab: var(--danger); }
.cx-tabs .seg-btn .cx-n { background: var(--cx-tab); color: var(--cx-tab-ink); }
/* ‏و`!important` بمثلها: aurora.css تكتب `.seg-btn.active` بلون اللوحة `!important`
   فكانت كلُّ الألوان هنا ميتة والفعّالُ أخضرُ أبدا. والأخصُّ يغلب بين مهمّين */
.cx-tabs .seg-btn.active {
  background: var(--cx-tab) !important; color: var(--cx-tab-ink) !important;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--cx-tab) 35%, transparent) !important;
}
/* ‏والعدد على الفعّال معكوس: أرضُه حبرُ التبويب وحرفُه لونُه — كان أبيضَ شفّافا
   فوق لونٍ فاتح في الفاتح فيغيب */
.cx-tabs .seg-btn.active .cx-n { background: var(--cx-tab-ink); color: var(--cx-tab); }
.cx-tabs .seg-btn:hover:not(.active) { background: var(--surface-1); }
/* ‏والتركيز داخل الشريط المتمرّر: الحدّ الخارجي يقصّه التمرير، فيُرسم إلى الداخل بلون الحرف */
.cx-tabs .seg-btn:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

/* ‏وسطرُ «تدخل يدوي» تحت الشكوى بعرض الجدول: حكمُه أولا بلونه، ثمّ سببُه كاملا */
.cx-table tr.cx-review-line > td { padding: 0 12px 10px; border-top: 0; }
.cx-table tr.cx-row:has(+ tr.cx-review-line) > td { border-bottom: 0; }
.cx-review-box {
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: var(--radius-md);
  background: var(--surface-2); border-inline-start: 4px solid var(--border-strong);
  font-size: 13.5px; font-weight: 700; line-height: 1.7; color: var(--text-primary);
  white-space: normal; overflow-wrap: anywhere;
}
.cx-review-box svg { flex: none; width: 17px; height: 17px; margin-top: 3px; }
.cx-review-box > b {
  flex: none; padding: 1px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 900;
  background: var(--surface-3); color: var(--text-strong);
}
.cx-review-box > b.cx-review-tag { font-size: 13.5px; padding: 3px 12px; }
.cx-review-body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-review-text { color: var(--text-secondary); }
/* ‏ثلاثُ حقائق تُقرأ بالعين: حسابُ المدير القديم، وحالُه، والدعوةُ القديمة */
.cx-review-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
/* ‏والقيمة تنزل تحت اسمها حين لا يسعهما سطر، ولا تُكسر إلا إن لم يسعها سطرٌ وحدها:
   كان «family.manager.account0@g|mail.com» يُكسر في نطاقه على التليفون */
.cx-review-fact { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.cx-review-fact em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.cx-review-fact b { min-width: 0; font-size: 14px; font-weight: 900; color: var(--text-strong); overflow-wrap: break-word; unicode-bidi: isolate; }
.cx-review-hint { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.cx-review-line[data-tone="alive"] .cx-review-hint { color: var(--warning-text); }
/* ‏وخطواتُ «شغال» الثلاث بنودا مرقّمة — تُقرأ واحدةً واحدة لا جملةً طويلة */
.cx-review-steps {
  margin: 2px 0 0; padding-inline-start: 22px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--text-primary);
}
.cx-review-steps li::marker { color: var(--warning-text); font-weight: 900; }
.cx-review-line[data-tone="dead"] .cx-review-box { border-inline-start-color: var(--success); }
.cx-review-line[data-tone="dead"] .cx-review-box svg { color: var(--success); }
.cx-review-line[data-tone="dead"] .cx-review-box > b { background: var(--success-soft); color: var(--success-text); }
.cx-review-line[data-tone="alive"] .cx-review-box { border-inline-start-color: var(--warning); }
.cx-review-line[data-tone="alive"] .cx-review-box svg { color: var(--warning); }
.cx-review-line[data-tone="alive"] .cx-review-box > b { background: var(--warning-soft); color: var(--warning-text); }
.cx-review-line[data-tone="pending"] .cx-review-box { border-inline-start-color: var(--info); }
.cx-review-line[data-tone="pending"] .cx-review-box svg { color: var(--info); }
.cx-review-line[data-tone="pending"] .cx-review-box > b { background: var(--info-soft); color: var(--info-text); }
/* ‏ودعوتُها هي خرجت والعميلُ كتب بعدها: عملُها ردٌّ لا إرسال — لونُ الخبر لا التحذير */
.cx-review-line[data-tone="sent"] .cx-review-box { border-inline-start-color: var(--info); }
.cx-review-line[data-tone="sent"] .cx-review-box svg { color: var(--info); }
.cx-review-line[data-tone="sent"] .cx-review-box > b { background: var(--info-soft); color: var(--info-text); }
.cx-review-line[data-tone="sent"] .cx-review-steps li::marker { color: var(--info-text); }

/* ══════════════════════════════════════════════════════════════
 *  وعرض الأعمدة بقدر ما فيها — لا عمود واحد يبلع الباقي
 * ══════════════════════════════════════════════════════════════
 *
 * ‏كان الجدول يوزع ما زاد على «الاسم» وحده فيصير نصف الشاشة بياضا،
 * وتضيق الأعمدة الأخرى. فتثبت النسب: المعرف والوقت والأزرار ضيقة،
 * والاسم والواتساب والمشكلة بقدر ما يقرأ، ولا شيء يمتد.
 */
.table-wrap .cx-table { table-layout: fixed; width: 100%; }
.table-wrap .cx-table .cx-c-ref   { width: 7%; }
.table-wrap .cx-table .cx-c-name  { width: 15%; max-width: none; }
.table-wrap .cx-table .cx-c-phone { width: 18%; }
.table-wrap .cx-table .cx-c-order { width: 11%; }
.table-wrap .cx-table .cx-c-kind  { width: 16%; }
.table-wrap .cx-table .cx-c-state { width: 13%; }
.table-wrap .cx-table .cx-c-when  { width: 9%; }
.table-wrap .cx-table .cx-c-chat  { width: 5%; }
.table-wrap .cx-table .cx-c-eye   { width: 4.5%; }
.table-wrap .cx-table .cx-c-act   { width: 6.5%; }
/* ‏وجدولٌ لم تكتب له الشفرةُ أعراضَه (قبل أن تُركَّب، أو لوحٌ تقرؤه ضيّقا) يعود
   إلى محتواه ويمرّر أفقيا داخل غلافه — بحاله لا بعرض النافذة */
.table-wrap .cx-table:not(.cx-resizable) { table-layout: auto; width: max-content; min-width: 100%; }

/* ══════════════════════════════════════════════════════════════
 *  العين والإجراء: في المنتصف، وبلون، وبلا «…»
 * ══════════════════════════════════════════════════════════════
 *
 * ‏«إيه النقط اللي على شمال العين؟» — قص بـ«…»: الخلية تخفي ما زاد
 * وتكتب نقاطا، والعمود أضيق من زره على شاشة أصغر. فالعمودان لا يقصان
 * ولا يكتبان نقاطا، ولهما حد أدنى في الشفرة أعلى من زريهما.
 */
.table-wrap .cx-table .cx-c-chat,
.table-wrap .cx-table .cx-c-eye, .table-wrap .cx-table .cx-c-act {
  text-align: center; text-overflow: clip; overflow: visible; padding: 0 6px;
}
/* ‏والمحادثة والعين زرّان من اثنين وأربعين تحت اسمين من ثمانية وأربعين: الحشو
   أربعة يكفي أطولَهما («المحادثة») بلا نقاط */
.table-wrap .cx-table .cx-c-chat, .table-wrap .cx-table .cx-c-eye { padding: 0 4px; }
.table-wrap .cx-table thead .cx-c-chat,
.table-wrap .cx-table thead .cx-c-eye, .table-wrap .cx-table thead .cx-c-act { text-align: center; }

/* ‏وقرص ممتلئ كالعين لا زر بإطار: العين قرص أزرق («--info-soft») والصاعقة
   قرص أخضر ممتلئ، وكان الشات وحده زرا بإطار وأرضية السطح — فيقرأ من
   جنس آخر في صف واحد. فيصير قرصا بلون اللوحة: أخضرها لا أخضر واتساب،
   كما تقول ترويسته — فتفرق العين بين «محادثتنا» و«واتساب على جواله». */
.cx-table .cx-chat {
  width: 42px; height: 38px; padding: 0; border: 0; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; margin: 0;
}
.cx-table .cx-chat i, .cx-table .cx-chat svg { width: 20px; height: 20px; }
.cx-table .cx-chat:hover { background: var(--accent); color: var(--text-on-accent); }
.cx-table .cx-chat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-table .cx-eye {
  width: 42px; height: 38px; padding: 0; border: 0; border-radius: 10px;
  background: var(--info-soft); color: var(--info);
  display: inline-flex; margin: 0;
}
.cx-table .cx-eye i, .cx-table .cx-eye svg { width: 22px; height: 22px; }
.cx-table .cx-eye:hover { background: var(--info); color: var(--text-on-accent); }
.cx-table .cx-eye:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

.cx-table .cx-act {
  height: 38px; padding: 0 11px; border: 0; border-radius: 10px;
  background: var(--accent); color: var(--text-on-accent);
  font-size: 14px; font-weight: 800; display: inline-flex; margin: 0;
}
.cx-table .cx-act i, .cx-table .cx-act svg { width: 17px; height: 17px; }
.cx-table .cx-act:hover { filter: brightness(1.08); }
.cx-table .cx-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════
 *  مقابض السحب على حافتي كل عمود
 * ══════════════════════════════════════════════════════════════ */
/* ‏و`sticky` وحدها: تُنشئ كتلةَ الاحتواء التي تحتاجها المقابض المطلقة،
   وتُبقي أسماء الأعمدة فوق الصفوف. وكان بعدها سطرٌ يردّها إلى
   `relative` فيقتلها — على كل شاشة تُركَّب فيها المقابض، أي كل مكتب. */
.cx-table.cx-resizable thead th { position: sticky; top: 0; z-index: 2; }
.cx-rz {
  position: absolute; top: 0; bottom: 0; width: 8px; cursor: col-resize;
  user-select: none; z-index: 3;
}
.cx-rz-start { inset-inline-start: -4px; }
.cx-rz-end   { inset-inline-end: -4px; }
.cx-rz::after {
  content: ""; position: absolute; top: 20%; bottom: 20%; left: 3px; width: 2px;
  border-radius: 2px; background: transparent; transition: background .15s ease;
}
.cx-rz:hover::after, body.cx-resizing .cx-rz::after { background: var(--accent); }
body.cx-resizing { cursor: col-resize; user-select: none; }
body.cx-resizing * { cursor: col-resize !important; }
/* ‏والجدول بعرض أعمدته: الغلاف يمرر أفقيا حين تزيد على الشاشة */
.table-wrap .cx-table.cx-resizable { table-layout: fixed; }

/* ══════════════════════════════════════════════════════════════
   ونافذة الأربع والعشرين ساعة
   ══════════════════════════════════════════════════════════════

   ‏واتساب الرسمي لا يقبل ردا حرا على عميل مضت أربع وعشرون ساعة على آخر
   كلمة كتبها — ولا يمر بعدها إلا قالب معتمد من ميتا. وكان الموظف يضغط
   «تم الحل» فيخرج له خطأ، ولا في الصف ما ينبئ.

   ‏و«بقالب» ليست تحذيرا: النظام يرسل القالب وحده. فلونها بارد يقول
   «هكذا سيخرج» لا أحمر يقول «انتبه». و«٣ س» تحذير حقيقي: بعدها يضيق
   الكلام إلى متن مكتوب سلفا، فمن أراد أن يشرح شيئا يشرحه الآن. */
.cx-flag.cold {
  background: color-mix(in srgb, var(--info) 14%, transparent);
  color: var(--info-text); font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════
 *  ولوح الشكوى يقرأ في شاشة واحدة — عمودان لا عمود
 * ══════════════════════════════════════════════════════════════
 *
 * ‏المالك: «خلي صفحة تفاصيل الشكوي اعرض ومرتبة اكتر ومظمة اكتر».
 *
 * ‏وقيس على لقطة الفحص (شاشة ١٢٨٠): اللوح خمسمئة وعشرون بكسلا — أربعون
 * في المئة من الشاشة — وأقسامه الأربعة عمود واحد طويل. فمربع الملاحظة
 * يقع خلف شريط الإجراءات، و«الخط الزمني» لا يظهر أصلا.
 *
 * ‏فشبكة عمودين: المشكلة تعبر الصف كله — هي ما فتح الموظف العين ليراه —
 * وتحتها حقول العميل في عمود، والملاحظة والخط الزمني في الآخر.
 *
 * ‏وترتيب الشفرة لا يمس: الشبكة ترتب بالعين، والأقسام تبقى في الصفحة
 * بترتيبها (مشكلة، عميل، ملاحظة، خط زمني) كما يقرؤها الفحص وقارئ
 * الشاشة.
 */
#cxDrawerBody {
  padding-bottom: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 16px;
  align-items: start;
}
/* ‏والرأس والمخفية تعبر الصف: الافتراض يعم، والاستثناء يسمى */
#cxDrawerBody > * { grid-column: 1 / -1; min-width: 0; }

/* ══ والصفوف تسمى، وإلا نزل الخط الزمني صفا ثالثا ══
 *
 * ‏الشبكة تعطي كل قسم صفا من نفسها: العميل في العمود الأول والملاحظة
 * في الثاني — ثم الخط الزمني في صف **ثالث**، فيبدأ تحت أطولهما. فلما
 * كان العميل ثمانية حقول نزل الخط الزمني تحت الطية، وهو ما كان يقع
 * قبل التوسيع أصلا.
 *
 * ‏فتسمى الصفوف: العميل يمتد صفين في عموده، والملاحظة فوق الخط الزمني
 * في العمود الآخر. فيقرأ اللوح كله في شاشة واحدة.
 */
/* ‏والشارات خرجت إلى سطر العنوان، فارتفع كل شيء صفا */
#cxDrawerBody > #cxSecIssue { grid-row: 1; }
#cxDrawerBody > #cxSecCustomer { grid-column: 1; grid-row: 2; }
/* ‏والغلاف صف واحد: كان العميل يمتد صفين والملاحظة والخط الزمني كل
   واحد في صف. والمتمدد حين يطول عن مجموعهما يوزع الزيادة على الصفين
   بالسوية — فينفتح بينهما فراغ يكبر كلما كثرت حقول العميل. */
#cxDrawerBody > .cx-dside {
  grid-column: 2; grid-row: 2;
  display: grid; gap: 16px; align-content: start; min-width: 0;
}
/* ‏وحد الفاصل يفصل الأقسام رأسيا لا أفقيا: الفاصل العلوي في شبكة
   عمودين يرسم خطا في منتصف اللوح لا تحت القسم */
#cxDrawerBody .cx-dsec {
  border-top: 0;
  padding: 13px 15px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  margin-bottom: 0;
}
#cxDrawerBody .cx-dsec-hidden { display: none; }

/* ‏وعنوان القسم يقود ولا يزاحم: خافت صغير، وقبله شرطة باللون تقول
   أين يبدأ القسم */
#cxDrawerBody .cx-dsec > h4 {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 11px; font-size: 12.5px; font-weight: 700;
  color: var(--text-secondary); opacity: .82; letter-spacing: .02em;
}
#cxDrawerBody .cx-dsec > h4::before {
  content: ''; inline-size: 3px; block-size: 13px; border-radius: 2px;
  background: var(--border-strong); flex: none;
}
#cxDrawerBody .cx-dsec-issue > h4::before { background: var(--accent); }

/* ══════════════════════════════════════════════════════════════
 *  وكل حقل صندوقه: التسمية فوق قيمتها
 * ══════════════════════════════════════════════════════════════
 *
 * ‏كانت شبكة «١٥٠ بكسلا ثم الباقي»: التسمية في أقصى اليمين وقيمتها في
 * أقصى اليسار وبينهما ثلاثمئة بكسل خالية — واللقطة تريه في «الاسم …
 * خالد». وتسميات هذا اللوح جمل لا كلمات، فتلتف في عمودها سطرين.
 *
 * ‏فالتسمية فوق قيمتها في صندوق واحد، والصناديق تتسع من نفسها: ثلاثة
 * على العريض، وواحد على الهاتف. فلا التفاف ولا فراغ بين الاثنين.
 */
/* ‏ويسبق بالمعرف: `.cx-dsec dl` أعلاه خصوصيتها (٠،١،١) وتغلب `.cx-dl`
   (٠،١،٠) مهما تأخرت عنها في الملف — فكانت أعمدة الحقول تبقى
   `max-content 1fr` كما كتبت هناك، ويقرأ الفرق حقلا وحيدا في صف
   وفراغا بجانبه. */
#cxDrawerBody .cx-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 9px; margin: 0;
}
.cx-f {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; padding: 8px 11px;
  background: var(--surface-inset);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
}
.cx-f-wide { grid-column: 1 / -1; }
#cxDrawerBody .cx-f dt {
  font-size: 12px; font-weight: 600; line-height: 1.5;
  color: var(--text-secondary); opacity: .7;
}
#cxDrawerBody .cx-f dd {
  margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.6;
  min-width: 0; overflow-wrap: break-word;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
 *  وشريط الإجراءات سطر واحد لا سطرين
 * ══════════════════════════════════════════════════════════════
 *
 * ‏سبعة أزرار، كل زر اسمه فوق حاله — فيرتفع أربعين بكسلا ويلتف سطرين،
 * فيأكل مئة وعشرين بكسلا من اللوح دائما. واللقطة تري مربع الملاحظة
 * مقصوصا خلفه.
 *
 * ‏فالاسم وحاله في سطر واحد: الزر ثمانية وثلاثون، والشريط سبعون بدل
 * مئة وعشرين. ولا يعاد ترتيبها — الترتيب من الخادم، والفحص يقرؤه.
 *
 * ‏ولونها من حالها: الأخضر يحل، والأحمر يرفض، وما بينهما محايد. فمن
 * يضغط يرى أثر ضغطته قبل أن يضغط — والرسالة تخرج إلى عميل ولا ترجع.
 */
/* ‏أربع خانات عريضة في الصف الأول وثلاث في الثاني: اسم الإجراء كامل. */
.cx-dfoot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.cx-dactions {
  padding: 13px 15px 15px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.cx-dactions-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.cx-dactions h4 {
  display: flex; align-items: center; gap: 7px; margin: 0;
  color: var(--text-primary); font-size: 15px; font-weight: 800;
}
.cx-dactions h4 svg { width: 17px; height: 17px; color: var(--accent); }
.cx-template-launch, .cx-menu-template {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 7px 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-inset); color: var(--text-primary);
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.cx-template-launch:hover, .cx-menu-template:hover {
  border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px);
}
.cx-template-launch:focus-visible, .cx-menu-template:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.cx-template-launch svg, .cx-menu-template svg { width: 16px; height: 16px; }
.cx-menu-template { width: 100%; margin-top: 5px; }
#cxTemplateBody { max-height: min(65vh, 620px); overflow-y: auto; }
.cx-tpl-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; padding-inline-end: 3px; }
.cx-tpl {
  display: flex; flex-direction: column; gap: 9px; padding: 13px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-2);
}
.cx-tpl .ib-tpl-name { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 800; }
.cx-tpl .ib-tpl-lang { opacity: .75; }
.cx-tpl .ib-tpl-body { color: var(--text-primary); font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.cx-tpl .cx-tpl-in { max-width: none; width: 100%; }
.cx-tpl .cx-tpl-send { align-self: flex-start; font-weight: 800; }
.cx-dactions .cx-fbtn {
  --cx-action: var(--accent); --cx-action-soft: var(--accent-soft);
  border-color: color-mix(in srgb, var(--cx-action) 35%, var(--border-default));
  background: var(--cx-action-soft); color: var(--text-primary);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cx-action) 16%, transparent);
}
/* ‏ولونُ الأثر واحدٌ في الدرج وفي قائمة الإجراء السريع */
.cx-dactions .cx-fbtn[data-action="resolved"],
.cx-menu-item[data-action="resolved"] { --cx-action: var(--success); --cx-action-soft: var(--success-soft); }
.cx-dactions .cx-fbtn[data-action="refunded"],
.cx-dactions .cx-fbtn[data-action="working"],
.cx-menu-item[data-action="refunded"],
.cx-menu-item[data-action="working"] { --cx-action: var(--info); --cx-action-soft: var(--info-soft); }
.cx-dactions .cx-fbtn[data-action="need_email"],
.cx-dactions .cx-fbtn[data-action="need_order"],
.cx-menu-item[data-action="need_email"],
.cx-menu-item[data-action="need_order"] { --cx-action: var(--warning); --cx-action-soft: var(--warning-soft); }
.cx-dactions .cx-fbtn[data-action="rejected"],
.cx-menu-item[data-action="rejected"] { --cx-action: var(--danger); --cx-action-soft: var(--danger-soft); }
.cx-dactions .cx-fbtn:hover {
  border-color: var(--cx-action); background: var(--cx-action-soft);
  transform: translateY(-2px); box-shadow: 0 4px 12px color-mix(in srgb, var(--cx-action) 18%, transparent);
}
.cx-dactions .cx-fbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-fbtn {
  min-width: 0;
  flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 800;
  line-height: 1.4; white-space: normal; text-align: center;
  transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease, background .17s ease;
}
.cx-fbtn svg { width: 17px; height: 17px; flex: none; color: var(--cx-action, currentColor); }
/* ‏صفان بدل قص اسم الإجراء؛ كل زر يقرأ كاملا على الشاشة العريضة. */
.cx-fbtn > span { min-width: 0; overflow-wrap: anywhere; }
/* ‏الحال يظهر في التأكيد قبل الإرسال، واسم الإجراء لا يقص أبدا. */
.cx-fbtn small { display: none; }

/* ‏والإصبع تحتاج أربعا وأربعين: على الشاشة التي تلمس لا التي تنقر.
   وهو حدُّ إصبعٍ لا حدُّ شاشة — فكُتب هنا لا في `max-width`: آيباد أفقي
   ألفٌ وأربعة وعشرون وإصبع، ولا يدخل أي مدى ضيق. و`.cx-act` تحمل
   `height: 38px` صريحة، و`min-height` تغلبها. */
@media (pointer: coarse) {
  .cx-fbtn { min-height: 44px; }
  .cx-table .cx-act, .cx-table .cx-eye, .cx-table .cx-chat, .cx-table .cx-wa {
    min-height: 44px; min-width: 44px;
  }
  /* ‏وما بقي تحت الأربعة والأربعين حين قيس على ٨٢٠ و٣٩٠ لمسا */
  .cx-tabs { height: auto; }
  .cx-tabs .seg-btn { min-height: 44px; }
  .cx-product-filter, .cx-product-trigger { height: 44px; }
  .cx-product-option, .cx-menu-item, .cx-menu-template, .cx-template-launch,
  .cx-shot, .cx-btn { min-height: 44px; }
  #drawerPanel:has(#cxDrawerBody, #cxLogBody) .drawer-header .modal-close,
  .modal:has(#cxTemplateBody) .modal-close { width: 44px; height: 44px; }
  .cx-view-x { width: 44px; height: 44px; }
}

/* ══════════════════════════════════════════════════════════════
 *  وعلى الضيق: عمود واحد كما كان
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #cxDrawerBody { grid-template-columns: 1fr; gap: 12px; }
  /* ‏والصفوف تطلق: على عمود واحد يرتب كل شيء بترتيب الصفحة */
  #cxDrawerBody > #cxSecIssue,
  #cxDrawerBody > #cxSecCustomer,
  #cxDrawerBody > .cx-dside { grid-column: 1 / -1; grid-row: auto; }
  #cxDrawerBody > .cx-dside { gap: 12px; }
  #cxDrawerBody .cx-dl { grid-template-columns: 1fr; }
  .cx-dfoot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .cx-dactions-head { align-items: stretch; flex-direction: column; }
  .cx-template-launch { align-self: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
 * دفعة الدعوات اليدوية: عمود اختيار، وشريط لاصق، ولوحة بثلاث طبقات
 * ══════════════════════════════════════════════════════════════ */
.cx-batch-start {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 12px; flex: none;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-primary);
  font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.cx-batch-start svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
.cx-batch-start:hover { border-color: var(--accent); background: var(--surface-3); }
/* ‏والفعّال يمتلئ بلون اللوحة: من فتح وضع الاختيار يرى زرّه مضاء
   فلا يضغطه ثانية ظانّا أنه لم يفتح */
.cx-batch-start.is-active {
  border-color: transparent; background: var(--accent); color: var(--text-on-accent);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 34%, transparent);
}
.cx-batch-start.is-active svg { color: currentColor; }
.cx-batch-start:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── شريط الدفعة: قرص نحيف يلتصق بأسفل الشاشة ────────────────
 * ‏كان سطرا عريضا في أول الصفحة: العدّاد في ناحية والأزرار في الناحية
 * الأخرى، وبينهما بياض. ومن نزل خمسين صفا ليحدد الخامسة فقد الزر فوقه.
 * فصار قرصا بعرض ما فيه، يلتصق أسفل النافذة ما دامت القائمة تحته. */
.cx-batch-tray {
  position: sticky; inset-block-end: max(14px, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex; align-items: center; gap: 10px;
  width: fit-content; max-width: 100%; margin: 14px auto 0;
  padding: 5px; padding-inline-start: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border-default));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 90%, var(--accent));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  animation: cx-tray-in .2s ease-out both;
}
.cx-batch-tray[hidden] { display: none; }
@keyframes cx-tray-in { from { opacity: 0; transform: translateY(10px); } }
.cx-batch-meter {
  flex: none; display: inline-flex; align-items: baseline; gap: 1px; direction: ltr;
  color: var(--text-primary); font-size: 14px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.cx-batch-meter b { color: var(--accent); font-size: 17px; font-weight: 950; }
.cx-batch-slash { color: var(--text-secondary); opacity: .6; margin: 0 1px; }
.cx-batch-hint {
  flex: 0 1 auto; min-width: 0; color: var(--text-secondary);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cx-batch-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 4px;
  padding: 2px 8px; border: 1px solid var(--border-default); border-radius: 999px;
  background: transparent; color: var(--text-primary);
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.cx-batch-chip span { color: var(--text-secondary); font-weight: 900; }
.cx-batch-chip:hover { border-color: var(--danger, #d33); }
.cx-batch-chip:hover span { color: var(--danger, #d33); }
.cx-batch-go {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--text-on-accent);
  font: inherit; font-size: 13px; font-weight: 850; cursor: pointer;
  transition: filter .16s ease, opacity .16s ease;
}
.cx-batch-go svg { width: 15px; height: 15px; }
.cx-batch-go:hover:not(:disabled) { filter: brightness(1.08); }
.cx-batch-go:disabled { opacity: .45; cursor: not-allowed; }
.cx-batch-go:focus-visible, .cx-batch-x:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.cx-batch-x {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-default); background: var(--surface-1);
  color: var(--text-secondary); cursor: pointer; transition: all .16s ease;
}
.cx-batch-x svg { width: 15px; height: 15px; }
.cx-batch-x:hover {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft); color: var(--danger-text);
}

/* ── عمود الاختيار: عمود، لا ضيف في خلية الرقم ───────────────
 * ‏كان المربع يحقن داخل خلية `#` فيأكل من عرضها، فتقص «Z1449» إلى
 * «Z1…» ويزحف الجدول. فصار عموده، ومساحته كلها مقبض للإصبع. */
/* ‏وعرضُه حدٌّ أدنى لا اقتراح: المعرّف يلتصق على بُعد `--cx-pick-w` منه، فعمودٌ
   أضيق منه (كان يُقاس عشرين على ٨٢٠) يفتح بينهما شقّا تمرّ فيه الصفوف */
#complaintsList { --cx-pick-w: 42px; }
@media (pointer: coarse) { #complaintsList { --cx-pick-w: 44px; } }
.cx-table th.cx-c-pick, .cx-table td.cx-c-pick {
  width: var(--cx-pick-w); min-width: var(--cx-pick-w);
  padding: 0; text-align: center; overflow: visible;
}
/* ‏والجدول الثابت يأخذ عرض العمود من رأسه، والشفرة تكتب عليه اثنين وأربعين بيدها
   (`CX_PICK_W`): فعلى اللمس يُفرض أربعة وأربعون فوقها، وإلا بقي بينه وبين المعرّف
   اللاصق شقٌّ من بكسلين. ومتى قرأت الشفرةُ الإصبع كتبت مثله */
.cx-table th.cx-c-pick { width: var(--cx-pick-w) !important; }
.cx-table:not(.is-picking) .cx-c-pick { display: none; }
/* ‏و«التاريخ» يتنحّى لعمود الاختيار: عمودٌ يذهب وعمودٌ يجيء، فلا
   يتّسع الجدول عن لوحه. ومن يختار دفعةً يختارها بمدّتها ورقمها لا
   بعمرها. وعمرُها يعود بإغلاق الوضع، ويبقى في الدرج معه — ولا يُقال
   إنه في وسم الخلية: `display: none` يُسقطها من الشجرة فلا وسمَ لها. */
.cx-table.is-picking .cx-c-when { display: none; }
/* ‏ويتنحّى كذلك حين يضيق اللوح عن الأعمدة العشرة بحدودها (`is-narrow` من الشفرة،
   حين يقلّ الغلاف عن مجموع `CX_COL_FLOOR`): على ١١٨٠ كان الجدول يمرّر أفقيا
   لأجل عمرٍ مكتوبٍ في الدرج — والإجراء خلفه */
.cx-table.is-narrow .cx-c-when { display: none; }
/* ‏ووضعُ الاختيار على لوحٍ لا يسع التسعة مع مربّعه (`is-tight`): «المحادثة» تتنحّى كذلك */
.cx-table.is-tight .cx-c-chat { display: none; }
.cx-pick {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 34px; margin: 0; cursor: pointer;
}
.cx-pick input { position: absolute; opacity: 0; pointer-events: none; }
.cx-pick span {
  width: 19px; height: 19px; display: grid; place-items: center;
  border: 2px solid var(--border-strong); border-radius: 5px; background: var(--surface-inset);
  transition: border-color .14s ease, background .14s ease;
}
.cx-pick:hover span { border-color: var(--accent); }
.cx-pick input:checked + span { border-color: var(--accent); background: var(--accent); }
/* ‏والصح شكل لا اتجاه: `border-inline-start` تصير اليمين في صفحة
   عربية فينقلب الصح سهما. فيكتب بحدود فيزيائية. */
.cx-pick input:checked + span::after {
  content: ''; width: 8px; height: 4px; border-left: 2px solid var(--text-on-accent);
  border-bottom: 2px solid var(--text-on-accent); transform: rotate(-45deg) translateY(-1px);
}
.cx-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ‏والصف المحدد يعرف بلونه لا بمربعه وحده */
#complaintsList .cx-table tbody tr.cx-row.is-picked td,
#complaintsList .cx-table tbody tr.cx-row.is-picked:hover td {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface-1));
}

/* ── والعمود اللاصق يتبع وضع الاختيار لا ترتيب الخلايا ───────
 * ‏`.table-wrap td:first-child` تلصق أول خلية. فلما دخل عمود المربع
 * صار هو الأول، وبقي «#» يجري مع التمرير. فيلصق المعرف صراحة، ويزاح
 * بعرض المربع حين يظهر — فيلصق العمودان معا. */
/* ══════════════════════════════════════════════════════════════
 *  وضعُ الجدول: القائمةُ حاويةٌ تُقاس، والجدولُ فوق السبعمئة والعشرين منها
 * ══════════════════════════════════════════════════════════════
 *
 * ‏كانت الأنماط تقلب الجدول كروتا بعرض النافذة (٧٠٠) والشفرةُ بعرض الغلاف
 * (٧٢٠): على ٨٢٠ لمسا الغلافُ ٥٣٨ — فالشفرة تقول «كروت» ولا تكتب أعراضا،
 * والأنماط تقول «جدول» فيُرسم بمحتواه ١٣٤٠ ويمرّر. فالحكم واحد، بعرض القائمة
 * نفسها (`cx-list`). ومن بدّل الرقم هنا فليبدّله في `cxMountResizers`.
 */
#complaintsList { container: cx-list / inline-size; }

/* ‏وارتفاعُ الغلاف بقدر ما تحت الشريط العلوي: كان الغلاف يمرّر أفقيا فصار هو
   مرجعَ الرأس اللاصق، وهو لا يمرّر رأسيا — فكان الرأس يمضي مع الصفحة ولا يلتصق.
   فالغلاف منطقةُ تمرير محدودة، والرأس يلتصق بأعلاها.

   ‏والحدُّ يحسم الشريطَ العلوي وحاشيةَ الصفحة السفلى وهامشا: فإذا مُرّرت الصفحة
   إلى آخرها جلس أعلى الغلاف تحت الشريط لا خلفه. وشريطُ الدفعة إن ظهر يحسم معه.
   ولا `overscroll-behavior-y: contain`: الغلاف أطول مما يظهر منه أوّلَ الفتح،
   ومن بلغ آخرَه بالعجلة يمضي إلى الصفحة فيرى صفوفه الأخيرة — والمنعُ يحبسها
   تحت حافّة الشاشة. وأفقيّا يُمنع: سحبةُ لوحة اللمس في آخره كانت ترجع الصفحة */
/* ‏والحدُّ صار ما فوق الجدول كلَّه (الشريطُ ٦١، وسطرا الأدوات ١٣٠، وحاشيةُ الصفحة ٣٢): كان يحسم الشريطَ
   ‏وحده، فيقع آخرُ الجدول وشريطُ تمريره الأفقي تحت حافّة الشاشة أوّلَ الفتح، وتمرّر العجلةُ الجدولَ ثم الصفحة،
   ‏ويبقى بين الشريط ورأس الجدول شقٌّ من أزرار الأدوات. فالجدولُ يسع الشاشةَ من أوّل فتحة والصفحةُ لا تتحرّك */
#page-complaints { --cx-bar-extra: 0px; --cx-wrap-off: calc(223px + var(--cx-bar-extra)); --cx-tray-off: 0px; }
#page-complaints:has(> .cx-batch-tray:not([hidden])) { --cx-tray-off: 72px; }
@media (max-width: 768px) { #page-complaints { --cx-wrap-off: 156px; } }

@container cx-list (width > 885px) {
  #complaintsList .table-wrap {
    max-height: calc(100vh - var(--cx-wrap-off) - var(--cx-tray-off));
    max-height: calc(100dvh - var(--cx-wrap-off) - var(--cx-tray-off));
    overflow: auto; overscroll-behavior-x: contain; scrollbar-gutter: stable;
    /* ‏والتركيزُ والتمريرُ إلى خليّةٍ لا يقفان تحت عمودٍ لاصق: كان Tab يبلغ زرّا تغطّيه «إجراء» أو «#» */
    scroll-padding-left: 96px; scroll-padding-right: 90px;
    /* ‏والجدول بطاقةٌ بسطحها وحدّها في الثيمين — كان صفوفا عائمة على خلفية الصفحة */
    background: var(--surface-2);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
  }

  /* ‏والمعرّف يلتصق يمينا والإجراء يسارا، والصفوف تمرّ بينهما: كان عمود الإجراء
     على ١١٨٠ خارج الغلاف كلَّه — لا يُرى زرٌّ هو سببُ الصفّ.

     ‏وبالجهة الصريحة لا بالمنطقيّة: الصفحة عربية، و`inset-inline-start` يُقرأ من
     اتجاه الخليّة نفسها — خليّةٌ كُتب عليها `dir="ltr"` مرّة قلبته يسارا فلم يلتصق */
  #complaintsList .cx-table .cx-c-ref { position: sticky; right: 0; left: auto; }
  #complaintsList .cx-table.is-picking .cx-c-ref { right: var(--cx-pick-w); }
  #complaintsList .cx-table .cx-c-act {
    position: sticky; left: 0; right: auto;
    border-inline-start: 1px solid var(--border-default);
  }
  /* ‏والفاصلُ قبل الإجراء له لا لجاره: حدُّ العين يمضي معها تحت العمود اللاصق */
  #complaintsList .cx-table .cx-c-eye { border-inline-end: 0; }
  /* ‏وأرضُ اللاصق مصمتة، والرأسُ فوق الصفوف، وخليّةُ الرأس اللاصقة فوق جاراتها
     من الرأس — وإلا مرّت أسماءُ الأعمدة فوقها حين يمرّر الجدول */
  #complaintsList .cx-table tbody :is(.cx-c-ref, .cx-c-act) { z-index: var(--z-base); background: var(--surface-2); }
  #complaintsList .cx-table tbody tr:hover :is(.cx-c-ref, .cx-c-act) { background: var(--surface-3); }
  #complaintsList .cx-table thead :is(.cx-c-pick, .cx-c-ref, .cx-c-act) { z-index: 3; }
  /* ‏وظلٌّ على حافّة المعرّف حين يمرّ شيءٌ تحته (`is-scrolled` من app.js) */
  #complaintsList .table-wrap.is-scrolled .cx-c-ref { box-shadow: -8px 0 8px -8px var(--surface-overlay); }

  /* ‏وسطرُ «تدخل يدوي» يبقى أمام العين إن مرّر الجدول أفقيا: يلتصق بأوّل الغلاف
     وعرضُه عرضُ القائمة لا عرضُ الجدول */
  #complaintsList .cx-table tr.cx-review-line > td { overflow: visible; }
  /* ‏وخليّتُه أوّلُ خليّةٍ في صفّها فتأخذ ظلَّ العمود اللاصق من الورقة العامة: ثمانيةُ بكسلات خارج
     ‏الجدول، فكان «تدخل يدوي» وحده يمرّر أفقيّا ويُظهر شريطا لبكسلين */
  #complaintsList .cx-table tr.cx-review-line > td::after { display: none; }
  #complaintsList .cx-table tr.cx-review-line .cx-review-box {
    /* ‏و`100cqi` عرضُ القائمة لا داخلُ الغلاف: حدّاه وشريطُه اثنا عشر — فكان يمرّر «تدخل يدوي» بكسلين */
    position: sticky; right: 12px; max-width: calc(100cqi - 52px); box-sizing: border-box;
  }
}

/* ‏ومحتوى الخلايا يُقصّ من آخره ولا يأخذ ما بعده */

/* ‏الحال: الشارة وعلاماتها تلتفّ داخل خليّتها سطرين بارتفاع الصفّ نفسه — كانت
   «بقالب» و«٣ س» تُقصّ بنقاط، وهي ما يقرأ الموظف قبل أن يرد */
.cx-table td.cx-c-state { white-space: normal; text-overflow: clip; line-height: 1.15; }
.cx-table .cx-state .badge { vertical-align: middle; }
.cx-table .cx-flag {
  vertical-align: middle; white-space: nowrap;
  padding: 1px 6px; gap: 3px; font-size: 12px; line-height: 1.35;
}
.cx-table .cx-flag i, .cx-table .cx-flag svg { width: 12px; height: 12px; flex: none; }

/* ‏ونوعُ المشكلة يُقصّ داخل شارته بنقاطها — لا تُقصّ الشارة نفسها عند حدّ الخليّة */
.cx-table .cx-kind {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.cx-table .cx-kind::before { display: inline-block; vertical-align: middle; margin-inline-end: 5px; margin-block-start: -2px; }
/* ‏وحين يضيق الجدول (is-narrow: لابتوب ١١٨٠) كان كلُّ نوعٍ يُقصّ إلى كلمته الأولى («مشكلة…»، «الاشترا…»)
   ‏وهو عمودُ الفرز بالعين. فيلتفّ سطرين داخل شارته كما تلتفّ الحالُ بجانبه، والصفُّ يسعهما */
.cx-table.is-narrow td.cx-c-kind { white-space: normal; }
.cx-table.is-narrow .cx-kind { white-space: normal; text-overflow: clip; line-height: 1.2; border-radius: 10px; padding-block: 2px; }
/* ‏ورقمُ الطلب لاتينيّ في خليّة عربية: ما زاد يخرج من يسارها — وهو أوّلُ الرقم،
   فكان «80-4744867» يُقرأ «0-4744867». فالقصُّ داخل الرقم نفسه باتجاهه، من آخره */
.cx-table .cx-order { max-width: 100%; vertical-align: middle; }
.cx-table .cx-order svg { flex: none; }
.cx-table .cx-order > span[dir="ltr"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ‏والاسمُ اللاتينيّ يُقصّ من آخره كذلك: الفقرةُ تأخذ اتجاهها من أوّل حرف فيها */
/* ‏ويبقى على اليمين كإخوته حين يسعه عمودُه: `start` مع `plaintext` تُقرأ من اتجاه
   فقرته فكانت تلقي الاسم اللاتيني يسارا. و`match-parent` تقرؤها من اتجاه الصفّ */
.cx-table td.cx-c-name { unicode-bidi: plaintext; text-align: right; text-align: match-parent; }

/* ‏والواتساب: الرقمُ يضيق ولا يضيق زرُّه — كان الزرُّ أوّلَ ما يُقصّ فيصير «…» */
.cx-table td.cx-c-phone { text-overflow: clip; }
.cx-table .cx-phone .ltr {
  display: inline-block; max-width: calc(100% - 38px); overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
@media (max-width: 760px), (pointer: coarse) {
  .cx-table .cx-phone .ltr { max-width: calc(100% - 50px); }
}

/* ══════════════════════════════════════════════════════════════
 *  اللوحة: رأس ثابت، وجسم يتمرر، وذيل ثابت
 * ══════════════════════════════════════════════════════════════
 *
 * ‏كانت صفحة واحدة طويلة تتمرر بكاملها، فيغيب عنوانها ويغيب معه زر
 * «افتح صفحة جوجل» — وهو أول ما يضغطه الموظف. فصارت ثلاث طبقات:
 * رأس لا يتحرك، وصفوف تتمرر، وذيل فيه الزران الدائمان.
 *
 * ‏والقياسات ضاقت: كان السطر الواحد يقارب مئة وخمسين بكسلا لأربع
 * معلومات، فخمس شكاوى تملأ الشاشة وتفيض. */
.modal:has(.cx-invite-batch) {
  max-width: 1180px; width: min(96%, 1180px);
  max-height: min(92vh, 960px); padding: 0; overflow: hidden; display: flex;
}
.cx-invite-batch { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.cx-ib-head {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 15px 22px; border-bottom: 1px solid var(--border-default);
  background: var(--surface-2);
}
.cx-ib-title { flex: 1; min-width: 0; }
.cx-ib-title h3 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.2px; }
.cx-ib-title p { margin: 4px 0 0; color: var(--text-secondary); font-size: 14px; font-weight: 700; }
.cx-ib-progress {
  flex: none; display: inline-flex; align-items: baseline; gap: 2px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface-inset); color: var(--text-secondary);
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cx-ib-progress b { color: var(--text-primary); font-size: 17px; font-weight: 950; }
/* ‏والكسر «1/5» وحدة واحدة تعزل: عزل الرقمين كلا على حدة يبقي
   ترتيبهما لاتجاه الصفحة، فيقرأ «5/1» — وهو عكس ما يقال. */
.cx-ib-frac { direction: ltr; unicode-bidi: isolate; }
.cx-ib-progress.is-done { background: var(--success-soft); color: var(--success-text); }
.cx-ib-progress.is-done b { color: var(--success-text); }
.cx-invite-batch .modal-close { flex: none; width: 38px; height: 38px; font-size: 20px; }
.cx-batch-loading { min-height: 150px; display: grid; place-items: center; color: var(--text-secondary); font-weight: 750; }

.cx-ib-tools {
  display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap;
  padding: 12px 22px; border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-2));
}
.cx-ib-tools label {
  flex: none; margin: 0; color: var(--text-primary); font-size: 15px; font-weight: 850;
}
.cx-ib-tools .form-input {
  flex: 1 1 260px; min-width: 0; height: 44px; min-height: 44px;
  padding: 0 12px; font-size: 15.5px; font-weight: 800;
}
.cx-ib-tools small {
  flex: 1 1 100%; color: var(--text-secondary); font-size: 13.5px; font-weight: 750;
  overflow-wrap: anywhere;
}
.cx-ib-tools small:empty { display: none; }

/* ── ‏بطاقاتُ الحسابات: المقاعدُ تُرى ولا تُقرأ (cxSeatPicker) ──
   ‏الرقمُ كبيرٌ أوّلَ البطاقة، والخاناتُ الخمسُ شكلُه، واللونُ حكمُه أمام الدفعة: أخضرُ يسعها
   ‏كلَّها وبرتقاليٌّ لا يسعها. وما عُدّ من سجلّاتنا لا من جوجل حدودُه متقطّعة. والقائمةُ تتمرّر
   ‏داخلها فلا تدفع الصفوفَ تحتها — الأدواتُ جزءٌ من الرأس الثابت */
.cx-seat-head { flex: 1 1 100%; color: var(--text-primary); font-size: 15px; font-weight: 850; }
.cx-seat-head small { color: var(--text-secondary); font-size: 13.5px; font-weight: 750; }
.cx-seat-list { flex: 1 1 100%; display: grid; gap: 6px; }
/* وسطر المخفيين سطر واحد يتفتح بالضغط، على كل شاشة: كان سطرين من الأسماء تحت القائمة في الرأس الثابت */
.cx-ib-tools .cx-ib-hidden {
  cursor: pointer; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden;
}
.cx-ib-tools .cx-ib-hidden.is-open { display: block; }
.cx-seat-card {
  position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px; min-height: 52px; padding: 7px 12px; margin: 0;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-1); cursor: pointer;
}
.cx-seat-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cx-seat-card:hover { border-color: var(--border-strong); }
.cx-seat-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.cx-seat-card.is-on {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.cx-seat-num {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; min-width: 68px;
  padding: 5px 10px; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums;
}
.cx-seat-num b { font-size: 22px; font-weight: 950; line-height: 1; }
.cx-seat-num small { font-size: 12.5px; font-weight: 800; }
.cx-seat-card.is-fits .cx-seat-num { background: var(--success-soft); color: var(--success-text); }
.cx-seat-card.is-short .cx-seat-num { background: var(--warning-soft); color: var(--warning-text); }
.cx-seat-card.is-est .cx-seat-num { outline: 1.5px dashed currentColor; outline-offset: -1.5px; }
.cx-seat-dots { display: inline-flex; gap: 4px; }
.cx-seat-dot {
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--surface-inset); border: 1px solid var(--border-default);
}
.cx-seat-card.is-fits .cx-seat-dot.is-free { background: var(--success); border-color: var(--success); }
.cx-seat-card.is-short .cx-seat-dot.is-free { background: var(--warning); border-color: var(--warning); }
.cx-seat-card.is-est .cx-seat-dot.is-free { border-width: 1.5px; border-style: dashed; }
.cx-seat-card.is-est.is-fits .cx-seat-dot.is-free { background: color-mix(in srgb, var(--success) 30%, transparent); }
.cx-seat-card.is-est.is-short .cx-seat-dot.is-free { background: color-mix(in srgb, var(--warning) 30%, transparent); }
.cx-seat-who { display: grid; gap: 1px; min-width: 0; }
.cx-seat-who bdi {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
  color: var(--text-primary); font-size: 15px; font-weight: 850;
}
.cx-seat-who small { color: var(--text-secondary); font-size: 12.5px; font-weight: 750; }
.cx-seat-verdict {
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; font-size: 12.5px; font-weight: 850;
}
.cx-seat-card.is-fits .cx-seat-verdict { background: var(--success-soft); color: var(--success-text); }
.cx-seat-card.is-short .cx-seat-verdict { background: var(--warning-soft); color: var(--warning-text); }
.cx-seat-empty { flex: 1 1 100%; margin: 0; color: var(--text-secondary); font-weight: 750; }

/* ── خطوتا اللوح: الحساب ثم الدعوات (goCxBatchStep) ──
   الرأس سطر واحد: العنوان، وزرا الخطوتين، والتقدم، والإغلاق — كان عنوانا وسطرا تحته */
.cx-ib-head { padding: 10px 18px; flex-wrap: wrap; row-gap: 8px; }
.cx-ib-title h3 { font-size: 18px; }
.cx-ib-steps {
  flex: none; display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 999px; background: var(--surface-inset);
}
.cx-ib-step {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 16px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 14.5px; font-weight: 850; cursor: pointer; white-space: nowrap;
}
.cx-ib-step b {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-1); color: var(--text-primary); font-size: 13px; font-weight: 900;
}
.cx-ib-step small { font-size: 12.5px; font-weight: 800; opacity: .85; }
.cx-ib-step:hover:not(:disabled):not(.is-on) { color: var(--text-primary); background: var(--surface-1); }
.cx-ib-step.is-on { background: var(--accent); color: var(--text-on-accent); }
.cx-ib-step.is-on b { background: color-mix(in srgb, var(--text-on-accent) 22%, transparent); color: var(--text-on-accent); }
.cx-ib-step:disabled { opacity: .45; cursor: not-allowed; }
.cx-ib-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ووسط الرأس كان فاضيا: فيه الآن ما يُختار ولماذا (خطوة الحساب)، أو الحساب المختار نفسه (خطوة الدعوات) */
.cx-ib-head .cx-ib-title { flex: none; }
.cx-ib-hint {
  flex: 1 1 260px; min-width: 0; margin: 0; color: var(--text-primary); font-size: 15px; font-weight: 850;
}
.cx-ib-hint small { color: var(--text-secondary); font-size: 13.5px; font-weight: 750; }
.cx-ib-hint b { color: var(--accent); font-weight: 950; }
.cx-ib-head .cx-seat-card.cx-seat-bar {
  flex: 1 1 420px; min-height: 46px; padding: 3px 8px; gap: 10px;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}
.cx-ib-head .cx-seat-bar .cx-seat-verdict { display: none; }
.cx-ib-head .cx-seat-bar .cx-seat-num { min-width: 60px; padding: 3px 8px; }
.cx-ib-head .cx-seat-bar .cx-seat-num b { font-size: 19px; }
.cx-ib-head .cx-seat-bar .cx-seat-who bdi { font-size: 14.5px; }
/* والكلمة القصيرة للتليفون وحده — على الشاشة الواسعة الكلام كاملا */
.cx-btn-short, .cx-foot-short { display: none; }

/* الخطوة الأولى: البطاقات على اللوح كله، وسطر المخفيين كاملا تحتها */
.cx-ib-accounts { display: flex; flex-direction: column; gap: 10px; }
.cx-ib-accounts .cx-seat-head { margin: 0; }
.cx-ib-accounts .cx-ib-hidden { color: var(--text-secondary); font-size: 13.5px; font-weight: 750; overflow-wrap: anywhere; }
.cx-ib-next { gap: 8px; }
.cx-ib-next svg { width: 18px; height: 18px; }

/* الخطوة الثانية: الحساب المختار شريطا رفيعا، و«غيّر الحساب» يرجع للأولى */
.cx-seat-card.cx-seat-bar {
  flex: 1 1 100%; cursor: default; min-height: 50px; padding: 5px 10px;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
}
.cx-seat-bar:hover { border-color: var(--border-default); }
.cx-seat-change {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--border-default); border-radius: 999px; background: var(--surface-1);
  color: var(--accent); font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; white-space: nowrap;
}
.cx-seat-change svg { width: 16px; height: 16px; }
.cx-seat-change:hover { border-color: var(--accent); background: var(--accent-soft); }
.cx-seat-change:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* والصف أقصر بالفأرة: خمس شكاوى تُرى معا على شاشة المالك (١٥٣٥×٧٢٠ بتكبير ١٢٥٪) — كان الصف
   نحو مئة وعشرين فلا يُرى إلا ثلاثة. واللمس يبقى أربعة وأربعين كما هو (pointer: coarse) */
@media (pointer: fine) {
  .is-step-invites .cx-ib-body { padding-block: 10px 12px; }
  .is-step-invites .cx-invite-rows { gap: 8px; }
  .is-step-invites .cx-invite-row { padding: 7px 12px; gap: 12px; }
  .is-step-invites .cx-swap-btn { height: 29px; font-size: 13.5px; }
  .is-step-invites .cx-invite-swap { gap: 4px; }
  .is-step-invites .cx-invite-identity { padding: 4px 10px; }
  .is-step-invites .cx-ii-f small { font-size: 12px; }
  .is-step-invites .cx-ii-f b { font-size: 16px; line-height: 1.2; }
  .is-step-invites .cx-ii-f.is-ref b { font-size: 17px; }
  .is-step-invites .cx-invite-email { row-gap: 4px; }
  .is-step-invites .cx-invite-email .form-input { height: 40px; min-height: 40px; }
  .is-step-invites .cx-invite-email .cx-invite-row-warning { flex: 1 1 100%; align-self: auto; padding: 3px 9px; font-size: 13px; }
  .is-step-invites .cx-invite-buttons .btn { min-height: 40px; }
  .is-step-invites .cx-invite-buttons .cx-copy-email { width: 40px; height: 40px; min-height: 40px; }
  .is-step-invites .cx-ib-foot { padding-block: 10px; }
}
@media (max-width: 640px) {
  /* ‏والتليفون بلا شارة الحكم: اللونُ يقوله. والإيميلُ سطرُه كاملا لا مقصوصا — حسابان يبدآن بالحروف
     ‏نفسِها كانا يُقرآن واحدا (قيس على ٣٩٠: «parbatigurung453…») — والخاناتُ تحته، والرقمُ بطولهما */
  .cx-seat-card { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 5px; }
  .cx-seat-num { grid-row: 1 / 3; align-self: center; }
  .cx-seat-who { grid-column: 2; grid-row: 1; }
  .cx-seat-who bdi { white-space: normal; overflow-wrap: anywhere; font-size: 14.5px; }
  .cx-seat-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cx-seat-dots { grid-column: 2; grid-row: 2; justify-self: start; }
  .cx-seat-verdict { display: none; }
  .cx-seat-card.cx-seat-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cx-seat-bar .cx-seat-change { grid-column: 3; grid-row: 1 / 3; align-self: center; padding: 7px 10px; }
  .cx-seat-change span { display: none; }
  .cx-ib-steps { order: 3; flex: 1 1 100%; }
  .cx-ib-step { flex: 1; justify-content: center; }
}

.cx-ib-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 22px 18px; }
.cx-ib-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none;
  padding: 13px 22px; border-top: 1px solid var(--border-default); background: var(--surface-2);
}
.cx-ib-foot .btn { min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 850; }
/* ‏وزرُّ الإرسال التلقائي أوّلُ الذيل وأبرزُه: هو الفعل الأكبر في اللوح */
.cx-ib-foot .cx-auto-send {
  min-height: 46px; padding: 0 22px; gap: 8px; font-size: 16px; font-weight: 900;
  background: var(--accent); color: var(--text-on-accent); border: 0;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.cx-ib-foot .cx-auto-send:hover:not(:disabled) { filter: brightness(1.07); }
.cx-ib-foot .cx-auto-send:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.cx-auto-hint {
  display: inline-flex; align-items: center; gap: 7px; margin-inline-end: auto; min-width: 0; max-width: 100%;
  color: var(--text-primary); font-size: 14px; font-weight: 750; line-height: 1.5;
}
.cx-auto-hint svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
.cx-auto-banner {
  display: flex; align-items: center; gap: 14px; margin: 14px 22px 0; padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-default));
  border-radius: var(--radius-md); background: var(--accent-soft);
}
.cx-auto-banner b { display: block; font-size: 16px; font-weight: 900; color: var(--text-primary); }
.cx-auto-banner small { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.cx-auto-spin {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent); animation: cx-spin .8s linear infinite;
}
@keyframes cx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cx-auto-spin { animation-duration: 2.4s; } }
/* ‏بين أدوات اللوح وصفوفه، فيأخذ حاشية الصفوف لا يلتصق بحافّة اللوح */
.cx-invite-alert.cx-seat-alert { margin: 14px 22px 0; }
.cx-ib-foot .btn svg { width: 18px; height: 18px; }

.cx-invite-alert, .cx-invite-row-warning {
  display: flex; align-items: center; gap: 7px; color: var(--warning-text);
  background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
  border-radius: var(--radius-sm); font-weight: 780;
}
.cx-invite-alert { margin-bottom: 10px; padding: 11px 14px; font-size: 14.5px; line-height: 1.55; }
.cx-invite-alert svg { width: 19px; height: 19px; flex: none; }
.cx-invite-row-warning {
  align-self: flex-end; width: fit-content; max-width: 100%;
  padding: 5px 10px; font-size: 13.5px; line-height: 1.4;
}
.cx-invite-row-warning.is-clear { display: none; }
.cx-invite-row-warning svg { width: 16px; height: 16px; flex: none; }

.cx-invite-rows { display: flex; flex-direction: column; gap: 12px; }
.cx-invite-row {
  min-width: 0; max-width: 100%;
  /* ‏والهوية بقدر حقولها الثلاثة لا بنصيب من الصف: المالك رآها
     «عريضة أوي»، وهي ثلاثة أرقام قصيرة لا تحتاج ربع الشاشة */
  display: grid; grid-template-columns: 94px 274px minmax(0, 1fr) 244px;
  gap: 14px; align-items: center; padding: 13px 15px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-2);
  animation: cx-invite-row-in 170ms ease-out both;
}
.cx-invite-row:hover { border-color: color-mix(in srgb, var(--accent) 36%, var(--border-default)); }
.cx-invite-row.is-done {
  border-color: color-mix(in srgb, var(--success) 38%, var(--border-default));
  background: color-mix(in srgb, var(--success-soft) 26%, var(--surface-2));
}
/* ‏والهوية ثلاثة حقول مسمّاة: الاسم فوق صغيرا، والقيمة تحته —
   فيقرأ الموظف «شكوى Z1452» و«طلب 1227» ولا يخمّن أيهما أيّ. */
.cx-invite-identity {
  /* ‏وتلتفّ ولا تقتسم أعمدة: كانت ثلاثة أعمدة (max-content max-content minmax(0,auto))
     ‏في مسربٍ عرضُه ٢٧٤ ثابتة، فطلبٌ طويل («2491090-4802101») يأكل نصيب المدّة —
     ‏فتخرج «3 شهور» و«غير معروفة» من حدّ الهوية فوق خانة الإيميل. فالمدّة تنزل سطرا
     ‏ثانيا تحتها، والحقولُ بمقاساتها كما هي */
  min-width: 0; display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 4px; row-gap: 2px;
  padding: 8px 12px; border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface-inset));
}
.cx-ii-f {
  flex: 0 0 auto;
  min-width: 0; display: flex; flex-direction: column; gap: 1px;
  padding-inline-end: 12px;
}
.cx-ii-f + .cx-ii-f {
  padding-inline-start: 12px;
  border-inline-start: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-default));
}
.cx-ii-f:last-child { padding-inline-end: 0; }
.cx-ii-f small {
  color: var(--text-secondary); font-size: 12.5px; font-weight: 800;
  line-height: 1.25; letter-spacing: .2px;
}
/* ‏والقيمة تلتفّ ولا تُقصّ: «غير معروفة» هي سببُ تعطيل الصفّ، و«80-4744867»
   رقمٌ يُطابَق حرفا حرفا — والنقاطُ كانت تأكل آخرهما. والشكوى وحدها سطرٌ لا ينكسر */
.cx-ii-f b {
  color: var(--text-primary); font-size: 17px; line-height: 1.3; font-weight: 900;
  white-space: normal; overflow-wrap: anywhere;
}
.cx-ii-f.is-ref b { color: var(--accent); font-size: 19px; letter-spacing: .2px; white-space: nowrap; }
/* ‏ورقمُ الطلب سطرٌ واحد: كان ينكسر بعد الشرطة «80-» فوق «4744867» فيُقرأ رقمين. وما يلتفّ هو الناقصُ وحده */
.cx-ii-f:not(.is-miss) b { white-space: nowrap; }
.cx-ii-f.is-long b { font-size: 14px; letter-spacing: -.1px; }
/* ‏والناقص يقرأ ناقصا: الشرطة وحدها تقرأ قيمة */
.cx-ii-f.is-miss b { color: color-mix(in srgb, var(--warning-text) 86%, var(--text-strong)); font-weight: 800; }

/* ── تبديل صفٍّ في الدفعة ─────────────────────────────────────
 * ‏زرّان صغيران في ترويسة الصف — حيث يُقرأ «أيُّ شكوى هذه»: أحدهما
 * يرفعها ويأتي بالأحدث في ضغطة، والآخر يفتح قائمةَ الجاهزين ليختار
 * الموظف بيده. ولا يُعرضان على صفٍّ خرجت دعوتُه. */
.cx-invite-swap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; align-self: center; min-width: 0;
}
/* ‏بكلامٍ لا برموزٍ وحدها: «↻» و«☰» لم يُفهما — «وضّح الأزرار» */
.cx-swap-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; height: 34px; padding: 0 8px;
  border: 1px solid var(--border-default); border-radius: var(--radius-xs);
  background: var(--surface-1); color: var(--text-primary); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 850; white-space: nowrap;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.cx-swap-btn svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.cx-swap-btn:hover:not(:disabled) {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
.cx-swap-btn:disabled { opacity: .45; cursor: not-allowed; }
.cx-swap-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .cx-swap-btn { height: 44px; } }

/* ‏والقائمة تدخل الصفَّ بدل أن تطفو عليه: كانت بـ`inset: 0` فتُحبس في
   ارتفاعه — ثمانين بكسلا — وتأخذها الترويسةُ والذيل، فتنضغط القائمةُ
   بينهما إلى صفر وتُفتح ولا يُرى فيها مرشّح. فيُخفى ما في الصف ويتّسع لها،
   ويبقى في موضعه فلا تُفقد العينُ موضعَ ما تبدّله. */
.cx-invite-row.is-picking-swap { display: block; padding: 0; }
.cx-invite-row.is-picking-swap > :not(.cx-swap-panel) { display: none; }
.cx-swap-panel {
  display: flex; flex-direction: column;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  animation: cx-invite-row-in 150ms ease-out both;
}
.cx-swap-panel > header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-default);
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface-2));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.cx-swap-panel > header b { display: block; font-size: 17px; font-weight: 900; color: var(--text-primary); }
.cx-swap-panel > header small { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 700; color: var(--text-secondary); }
.cx-swap-x {
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--surface-inset); color: var(--text-secondary);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.cx-swap-x:hover { background: var(--danger-soft); color: var(--danger-text); }
.cx-swap-list { max-height: 380px; overflow-y: auto; padding: 10px; }
.cx-swap-pick {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 58px; padding: 9px 14px; margin-bottom: 6px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary);
  font: inherit; font-size: 14.5px; font-weight: 750; text-align: start; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.cx-swap-pick:hover, .cx-swap-pick:focus-visible {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.cx-swap-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cx-swap-pick b { flex: none; color: var(--accent); font-size: 17px; font-weight: 950; letter-spacing: .2px; }
.cx-swap-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cx-swap-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-secondary); font-size: 13.5px; font-weight: 750;
}
.cx-swap-mail {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: left; color: var(--text-primary); font-size: 15.5px; font-weight: 850;
}
.cx-swap-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cx-swap-order { color: var(--text-primary); font-size: 14px; font-weight: 850; }
.cx-swap-age { color: var(--text-secondary); font-size: 12.5px; font-weight: 700; }
/* ‏وفعلُ الضغطة مكتوبٌ على الصف: «خدها» — لا يُخمَّن */
.cx-swap-take {
  flex: none; padding: 6px 14px; border-radius: 999px;
  background: var(--accent); color: var(--text-on-accent); font-size: 13.5px; font-weight: 900;
  opacity: .85; transition: opacity .14s ease;
}
.cx-swap-pick:hover .cx-swap-take, .cx-swap-pick:focus-visible .cx-swap-take { opacity: 1; }
.cx-swap-none { margin: 12px; color: var(--text-secondary); font-size: 14.5px; font-weight: 700; }
.cx-swap-panel > footer {
  padding: 8px 12px; border-top: 1px solid var(--border-default);
}
/* ‏والإلغاء بلون الحذف: يُنقص الدفعة، فلا يُضغط سهوا كأنه بديل */
.cx-swap-panel > footer .btn {
  width: 100%; min-height: 44px; font-size: 14.5px; font-weight: 850;
  color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 35%, var(--border-default));
}
.cx-swap-panel > footer .btn:hover { background: var(--danger-soft); }
@media (pointer: coarse) {
  .cx-swap-pick { min-height: 44px; }
  .cx-swap-panel > footer .btn { min-height: 44px; }
  .cx-swap-x { width: 44px; height: 44px; }
}

.cx-invite-email {
  min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cx-invite-email .form-input {
  flex: 1 1 180px; min-width: 0; width: auto;
  height: 44px; min-height: 44px; padding: 0 12px;
  text-align: left; font-size: 16px; font-weight: 800; background: var(--surface-inset);
}
.cx-invite-email .form-input:focus { background: var(--surface-1); }
.cx-invite-email .form-input[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--warning) 65%, var(--border-strong));
}
/* ‏وعرضُه ثابت: نصوصُه ثلاثةٌ مختلفةُ الطول، فكان الحقلُ يتقلّص
   ويتمدد تحت الإصبع مع أول حرف. فيُحجز له أوسعُها. */
.cx-invite-source {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 122px; padding: 5px 11px;
  border-radius: 999px; color: var(--success-text); background: var(--success-soft);
  font-size: 13px; font-weight: 800; white-space: nowrap;
}
.cx-invite-source.is-manual { color: var(--text-secondary); background: var(--surface-inset); }
/* ‏وملاحظة اختلاف الشيت تنفرد بسطرها: هي تحذير يقرأ، لا وسم يلمح */
.cx-invite-diff {
  flex: 1 0 100%; margin: 0; color: var(--warning-text); font-size: 13px; font-weight: 750;
}
.cx-invite-diff.is-clear { display: none; }

/* ‏والزر بقدر كلمته لا بقدر عموده: كان «أكّد: أرسلتها في جوجل» يمتد
   ثلاثمئة بكسل لنصّ يسع مئةً وثمانين، والتحذير يمتد معه وهو كلمتان.
   والمالك: «مش لازم تكون عريضة أوي كدا». فكلٌّ يأخذ قدره ويصطفّان
   عند الحافّة التي يليها الحقل الذي يعملان عليه. */
.cx-invite-action {
  min-width: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 6px;
}
/* ‏ولا ينكسر الصفّ سطرين في عمودٍ عرضُه مئتان: النسخُ ستة وثلاثون
   والفجوة ستة والتأكيدُ مئةٌ وستة وخمسون — تسعُ. فإذا صار النسخُ أربعة
   وأربعين على شاشةٍ تُلمس بلغت مئتين وستّة، فيتقلّص التأكيدُ ولا يلتف. */
.cx-invite-buttons { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.cx-invite-buttons .btn {
  flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 0 15px; font-size: 14.5px;
  line-height: 1.3; font-weight: 850; white-space: nowrap; overflow: hidden;
}
/* ‏والقصُّ على النصّ لا على الحاوية: `text-overflow` لا تعمل على
   حاوية `flex` — فيُلفّ النصُّ في `span` تقصّ هي بنقاط */
.cx-invite-buttons .btn .cx-btn-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-invite-buttons .btn svg { width: 18px; height: 18px; }
.cx-invite-buttons .cx-copy-email {
  flex: none; width: 44px; height: 44px; min-height: 44px;
  padding: 0; gap: 0; display: inline-grid; place-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-secondary);
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .12s ease;
}
.cx-invite-buttons .cx-copy-email svg { width: 20px; height: 20px; }
.cx-invite-buttons .cx-copy-email:hover:not(:disabled) {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
.cx-invite-buttons .cx-copy-email:active:not(:disabled) { transform: scale(.94); }
.cx-invite-buttons .cx-copy-email:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.cx-invite-action .btn-warning { min-height: 44px; padding: 0 14px; font-size: 14.5px; font-weight: 850; }
/* ‏والمعطل يقرأ معطلا: لا قاعدة في اللوحة كلها تخفت زرا معطلا —
   فيرى الموظف خمسة أزرار خضراء زاهية «أكّد: أرسلتها في جوجل» ويضغطها
   واحدا واحدا ولا يحدث شيء، والسبب مكتوب فوق ولم ينظر إليه. */
.cx-invite-batch .btn:disabled,
.cx-invite-batch .btn[disabled] {
  opacity: .4; filter: grayscale(.4); cursor: not-allowed;
}
.cx-invite-batch .btn:disabled:hover { filter: grayscale(.4); transform: none; }
.cx-invite-email .form-input:disabled { opacity: .68; cursor: not-allowed; }

.cx-invite-done { display: flex; align-items: center; gap: 8px; width: 100%; }
.cx-invite-done > svg { width: 23px; height: 23px; color: var(--success); flex: none; }
.cx-invite-done div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cx-invite-done b { color: var(--text-primary); font-size: 15px; }
/* ‏والبريدُ الذي خرجت إليه الدعوة يُقرأ كاملا: كان يُقصّ بنقاط، وهو ما يُطابَق */
.cx-invite-done small {
  color: var(--text-secondary); font-size: 13px;
  overflow-wrap: break-word;
}
/* ‏وسببُ حبس الرسالة عن دعوةٍ قُيّدت على مانع: بلون التحذير، يُقرأ قبل «بلّغ العميل فقط» */
.cx-invite-done small.cx-invite-conflict { color: var(--warning-text); font-weight: 750; }
.cx-invite-wa {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content;
  color: var(--success-text); background: var(--success-soft); border-radius: var(--radius-xs);
  padding: 5px 10px; font-size: 13.5px; font-weight: 800;
}
.cx-invite-wa svg { width: 16px; height: 16px; flex: none; }

@keyframes cx-invite-row-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ‏والإصبع تحتاج اثنتين وأربعين حيث تنقر الفأرة أربعا وثلاثين */
/* ‏وأربعة وأربعون لكلّ ما يُضغط بإصبع — لا اثنان وأربعون ولا ستة
   وثلاثون. والحدُّ واحد، فلا يكون لبعض الأزرار دون بعض. */
@media (pointer: coarse) {
  .cx-ib-tools .form-input, .cx-ib-foot .btn,
  .cx-invite-email .form-input, .cx-invite-buttons .btn,
  .cx-invite-action .btn-warning { min-height: 44px; height: auto; }
  .cx-invite-buttons .cx-copy-email { width: 44px; height: 44px; }
  .cx-batch-go { min-height: 44px; }
  .cx-batch-x { width: 44px; height: 44px; }
  /* ‏ومفتاح الدعوات: قاعدةُ اللوحة ترفع `.switch` إلى أربعة وأربعين،
     وقاعدتُنا هنا أخصُّ منها فكانت تردّه إلى أربعة وعشرين */
  .cx-auto { height: 44px; }
  .cx-auto .switch { height: 44px; }
  .cx-batch-start { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-invite-row, .cx-batch-tray { animation: none; transition: none; }
}


/* ‏والأعمدة الأربعة تصمد ما بقي للإيميل مئتان وأربعون: التبديل ٩٤ والهوية ٢٧٤ والإجراء ٢٤٤
   ‏ثابتة، فالذي يضيق حقلُ الإيميل وحده — وهو العنوانُ الذي تخرج إليه الدعوةُ المدفوعة. فيُحكم
   ‏بعرض قائمة الصفوف لا بعرض الشاشة: كان على ٧٦٨–٩٠٠ (الآيباد قائما) شقّا من ٢٤ بكسلا يُقرأ «cu» */
.cx-invite-rows { container: cx-ib / inline-size; }
@container cx-ib (width < 920px) {
  .cx-invite-row { grid-template-columns: 94px 274px minmax(0, 1fr); }
  /* ‏والإجراء تحت الهوية والإيميل لا تحت عمود التبديل */
  .cx-invite-action { grid-column: 2 / -1; }
  /* ‏وعلى سطر بعرض الصف يصطف الزران عند حافته لا في وسط بياضه */
  .cx-invite-action { align-items: flex-start; }
}

/* ── ودون ستمئة وأربعين: اللوحة صفحة كاملة لا نافذة ─────────── */
@media (max-width: 640px) {
  .modal:has(.cx-invite-batch) {
    width: 100%; max-width: none; height: 100dvh; max-height: 100dvh;
    border: 0; border-radius: 0; animation: cx-sheet-in .22s ease-out both;
  }
  .cx-ib-head, .cx-ib-tools, .cx-ib-foot { padding-inline: 14px; }
  .cx-invite-alert.cx-seat-alert, .cx-auto-banner { margin-inline: 14px; }
  .cx-ib-head { gap: 9px; }
  .cx-ib-title p { display: none; }
  .cx-ib-body { padding: 12px 14px 16px; }
  /* ‏و«N حساب مخفي» سطران: الأدواتُ رأسٌ ثابت، وتسعةُ مخفيّين بأسمائهم كانت ترفعه من ٩٩ إلى
     ٢٦٣ بكسلا على ٣٩٠، فتضيق الصفوفُ تحته من ٥٤٥ إلى ٣٨١. والضغطةُ تفتحه كلَّه (cxHiddenNote) */
  .cx-ib-hidden { cursor: pointer; }
  .cx-ib-hidden:not(.is-open) {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  }
  .cx-invite-row { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
  /* ‏وعلى التليفون الزرّان صفٌّ أفقيٌّ أعلى الكارت لا عمود */
  .cx-invite-swap { flex-direction: row; justify-content: flex-end; }
  .cx-invite-swap:empty { display: none; }
  /* ‏و`nowrap` على زر عريض يفرض عرضه على الشاشة كلها — فيلتف هنا.
     والتأكيد وحده يمتد: على الإصبع لا على الفأرة */
  /* ‏والإيميلُ سطرٌ كامل تحت وسمه: كان يقتسم السطرَ مع «اللي طلبه العميل»
     فيُقصّ آخرُه — وهو ما يُنسخ ويُراجَع حرفا حرفا */
  .cx-invite-email .form-input { flex: 1 1 100%; }
  .cx-invite-source { min-width: 0; }
  .cx-invite-buttons { flex-wrap: nowrap; }
  .cx-invite-buttons .btn { white-space: normal; }
  .cx-invite-buttons .cx-confirm-invite { flex: 1 1 auto; justify-content: center; }
  .cx-invite-action { grid-column: auto; }
  .cx-ib-foot .btn { flex: 1 1 0; justify-content: center; }
  /* ‏وثلاثةُ أزرار لا تسعها ٣٩٠ بكسلا إلا ملفوفةً سطرين: فالإرسال التلقائي
     — الفعلُ الأكبر — صفٌّ وحده، وتنويهُه صفٌّ تحته، والزرّان الباقيان صفٌّ */
  .cx-ib-foot { flex-wrap: wrap; }
  .cx-ib-foot .cx-auto-send, .cx-ib-foot .cx-auto-hint { flex: 1 1 100%; margin-inline-end: 0; }
}
@keyframes cx-sheet-in { from { opacity: 0; transform: translateY(16px); } }

/* ── والتليفون: الخمس شكاوى في شاشة واحدة ──
   الصف سطران لا ستة (كان ٢٤١ نقطة فلا يُرى إلا واحد): فوق رقم الشكوى والطلب والمدة وزرا التبديل،
   وتحت الإيميل و«أكّد». والرأس زرا الخطوتين مكان العنوان، والذيل صف واحد */
@media (max-width: 640px) {
  .cx-invite-batch .cx-ib-title, .cx-invite-batch .cx-ib-progress { display: none; }
  .cx-invite-batch .cx-ib-head { gap: 8px; padding-block: 8px; }
  .cx-invite-batch .cx-ib-steps { order: 0; flex: 1 1 auto; }
  .cx-invite-batch .cx-ib-step { flex: 1; justify-content: center; padding: 0 8px; font-size: 14px; }
  .cx-ib-hint, .cx-ib-head .cx-seat-card.cx-seat-bar { order: 5; flex: 1 1 100%; }
  .cx-ib-hint { font-size: 14px; }
  .cx-ib-head .cx-seat-card.cx-seat-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cx-ib-head .cx-seat-bar .cx-seat-dots { display: none; }
  .cx-ib-head .cx-seat-bar .cx-seat-num { grid-row: auto; }
  .cx-ib-head .cx-seat-bar .cx-seat-who { grid-row: auto; }
  .cx-ib-head .cx-seat-bar .cx-seat-change { grid-column: auto; grid-row: auto; padding: 0 10px; }
  .cx-seat-change span { display: none; }

  .is-step-invites .cx-invite-rows { gap: 8px; }
  .is-step-invites .cx-invite-row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id swap" "mail act";
    gap: 8px; padding: 9px 10px;
  }
  .is-step-invites .cx-invite-identity { grid-area: id; padding: 3px 8px; }
  .is-step-invites .cx-ii-f { padding-inline-end: 7px; }
  .is-step-invites .cx-ii-f + .cx-ii-f { padding-inline-start: 7px; }
  .is-step-invites .cx-ii-f small { font-size: 11px; }
  .is-step-invites .cx-ii-f b { font-size: 14px; }
  .is-step-invites .cx-ii-f.is-ref b { font-size: 15px; }
  .is-step-invites .cx-invite-swap { grid-area: swap; flex-direction: row; gap: 6px; }
  .is-step-invites .cx-swap-btn { width: auto; padding: 0 10px; }
  .is-step-invites .cx-invite-email { grid-area: mail; }
  .is-step-invites .cx-invite-source { display: none; }
  .is-step-invites .cx-invite-action { grid-area: act; }
  .is-step-invites .cx-invite-buttons .cx-btn-text { display: none; }
  .is-step-invites .cx-invite-buttons .cx-btn-short { display: inline; }
  .is-step-invites .cx-invite-buttons .cx-confirm-invite { flex: none; padding: 0 10px; gap: 5px; }

  .is-step-invites .cx-ib-foot { gap: 8px; padding-block: 8px; }
  .is-step-invites .cx-ib-foot .cx-auto-hint { order: -1; flex: 1 1 100%; font-size: 13px; }
  /* وتنويه «هيبعت كام» سطر واحد: كان سطرين يدفعان الصف الخامس خارج الشاشة، وكل صف يقول سببه بنفسه */
  .is-step-invites .cx-ib-foot .cx-auto-hint > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .is-step-invites .cx-ib-foot .cx-auto-send { flex: 1 1 auto; }
  .is-step-invites .cx-ib-foot .btn:not(.cx-auto-send) { flex: none; }
  .is-step-invites .cx-foot-text { display: none; }
  .is-step-invites .cx-foot-short { display: inline; }
  .is-step-invites #cxInviteCopyManager { width: 44px; padding: 0; }
  /* وإيميل العميل كاملا لا مقصوصا: هو ما تخرج إليه الدعوة المدفوعة. خطه أصغر ليسعه السطر */
  .is-step-invites .cx-invite-email .form-input { font-size: 14px; padding: 0 6px; }
  .is-step-invites .cx-invite-email .cx-invite-row-warning { max-width: 100%; min-width: 0; padding: 2px 7px; font-size: 12px; }
  .is-step-invites .cx-invite-row-warning span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* وإيميل الحساب في الشريط يأخذ السطر: مصدر العدد يقوله الإطار (المتقطع تقدير) */
  .cx-ib-head .cx-seat-bar .cx-seat-who small { display: none; }
  .cx-ib-head .cx-seat-bar .cx-seat-who bdi { font-size: 14px; }
}
/* والتليفون الصغير (٣٦٠): زرا التبديل أيقونتان باسميهما في التلميح، وجوجل أيقونة — وإلا انكسر الصف سطرا ثالثا */
@media (max-width: 380px) {
  .is-step-invites .cx-swap-btn { width: 44px; padding: 0; }
  .is-step-invites .cx-swap-btn span { display: none; }
  .is-step-invites .cx-open-google { width: 44px; padding: 0; }
  .is-step-invites .cx-foot-short { display: none; }
}
/* وعلى كل تليفون: حشو الجسم والفجوة بين الصفوف أقل — والتليفون القصير (٧٦٠ فأقل) صفه وشريطه أضيق */
@media (max-width: 640px) {
  .is-step-invites .cx-ib-body { padding: 8px 12px 10px; }
  .is-step-invites .cx-invite-rows { gap: 6px; }
}
@media (max-width: 640px) and (max-height: 760px) {
  .is-step-invites .cx-ib-head { padding-block: 6px; row-gap: 6px; }
  .cx-ib-head .cx-seat-card.cx-seat-bar { min-height: 40px; padding: 2px 6px; }
  .cx-ib-head .cx-seat-bar .cx-seat-num { min-width: 52px; padding: 2px 6px; }
  .cx-ib-head .cx-seat-bar .cx-seat-num b { font-size: 17px; }
  .is-step-invites .cx-invite-row { padding: 6px 8px; gap: 6px; }
  .is-step-invites .cx-invite-identity { padding: 2px 6px; }
  .is-step-invites .cx-ii-f small { font-size: 10.5px; }
  .is-step-invites .cx-ii-f b { font-size: 13.5px; }
}
/* والشاشة القصيرة بالفأرة (لابتوب ١٣ بوصة ٦٠٠ نقطة طولا): الصف أقصر قليلا لتسع الخمسة */
@media (pointer: fine) and (max-height: 640px) {
  .is-step-invites .cx-ib-head { padding-block: 6px; }
  .is-step-invites .cx-ib-body { padding-block: 8px 10px; }
  .is-step-invites .cx-invite-rows { gap: 6px; }
  .is-step-invites .cx-invite-row { padding: 4px 10px; }
  .is-step-invites .cx-swap-btn { height: 27px; }
  .is-step-invites .cx-invite-identity { padding: 2px 8px; }
  .is-step-invites .cx-invite-email .form-input { height: 36px; min-height: 36px; }
  .is-step-invites .cx-invite-buttons .btn { min-height: 36px; }
  .is-step-invites .cx-invite-buttons .cx-copy-email { width: 36px; height: 36px; min-height: 36px; }
  .is-step-invites .cx-ib-foot { padding-block: 8px; }
}

/* ── وشريط الدفعة على الضيق: بعرض الشاشة لا قرصا في وسطها ──── */
@media (max-width: 700px) {
  .cx-batch-tray {
    width: auto; margin-inline: 0; border-radius: var(--radius-lg);
    padding: 6px; padding-inline-start: 12px;
  }
  .cx-batch-hint:not(.is-warn) { display: none; }
  /* ‏وسببُ المنع يفضل ظاهر على الجوال («اختار المنتج الأول…»): مفيش مؤشّر يطلّع التلميح باللمس */
  .cx-batch-tray:has(.cx-batch-hint.is-warn) { flex-wrap: wrap; }
  .cx-batch-hint.is-warn { flex: 1 1 100%; order: -1; font-size: 12px; }
  .cx-batch-go { flex: 1 1 auto; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════
 *  ودون السبعمئة: الصف كارت — لا جدول يُجَرّ يمينا وشمالا
 * ══════════════════════════════════════════════════════════════
 *
 * ‏عشرة أعمدة لا تسع شاشة تليفون. وكان الغلاف يمررها أفقيا، فيقرأ
 * الموظف اسما ثم يجر ليرى حاله ثم يجر ليضغط إجراءه — ثلاث حركات
 * لصف واحد.
 *
 * ‏والتحويل بالأنماط وحدها: الصفوف نفسها لا تكتب مرتين في الشفرة،
 * فلا مصدران للحقيقة ولا رسم ثان يكلف. الصف يصير شبكة، وكل خلية
 * تأخذ موضعها من `grid-template-areas`.
 *
 * ‏والفجوة بين الأعمدة صفر بقصد: بها وحدها يصير خط الفاصل فوق
 * صف الأزرار خطا واحدا متصلا لا ثلاث قطع. والتباعد يأتي من حشو
 * الخلايا. */
@container cx-list (width <= 885px) {
  #complaintsList .table-wrap { overflow: visible; }
  /* ‏والعرض الذي كتبته الشفرة بالبكسل يلغى — القائمة ضاقت بعد الفتح */
  #complaintsList .cx-table {
    display: block; width: 100% !important; min-width: 0 !important; max-width: 100%;
    table-layout: auto !important; font-size: 14px;
  }
  #complaintsList .cx-table thead { display: none; }
  /* ‏`minmax(0, 1fr)` لا `auto`: عمود تلقائي يقيس أعرض صف فيه، وفي الصف كلام
     لا ينكسر — فيخرج الكارت عن الشاشة ويجرها معه */
  #complaintsList .cx-table tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }

  #complaintsList .cx-table tr.cx-row {
    min-width: 0; max-width: 100%;
    display: grid; align-items: center; column-gap: 0; row-gap: 6px;
    /* ‏والوسطُ لا ينزل تحت زرّ العين: طلبٌ طويل وحالٌ طويل كانا يعصرانه حتى يُقصّ الزرُّ (المراجعة الشرسة، 5/10) */
    grid-template-columns: auto minmax(52px, 1fr) minmax(0, auto);
    grid-template-areas:
      'ref   name  state'
      'phone phone order'
      'kind  kind  when'
      'chat  eye   act';
    padding: 10px 12px;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-2);
  }
  /* ‏ووضع الاختيار يفتح عمودا رابعا: المربع عمود جانبي بمحاذاة الكارت */
  #complaintsList .cx-table.is-picking tr.cx-row {
    grid-template-columns: auto auto minmax(52px, 1fr) minmax(0, auto);
    grid-template-areas:
      'pick ref   name  state'
      'pick phone phone order'
      'pick kind  kind  when'
      'chat chat  eye   act';
  }
  #complaintsList .cx-table tr.cx-row td {
    display: flex; align-items: center; min-width: 0; width: auto;
    height: auto; padding: 0; border: 0; background: transparent;
    white-space: nowrap; overflow: hidden;
  }
  #complaintsList .cx-table tr.cx-row td.cx-c-when,
  #complaintsList .cx-table tr.cx-row td.cx-c-eye { overflow: visible; }
  /* ‏والمربع المخفي كان يظهر شبحا في آخر كل كارت: لا موضع له في شبكةٍ لا اختيار فيها */
  #complaintsList .cx-table:not(.is-picking) tr.cx-row td.cx-c-pick { display: none; }

  /* ‏ولا لصق في الكارت: ورقةُ اللوحة العامة تلصق أوّلَ خليّة (المربع) لتمريرٍ أفقي لم يعد */
  #complaintsList .table-wrap th:first-child,
  #complaintsList .table-wrap td:first-child {
    position: static; inset-inline-start: auto; background: transparent;
  }
  #complaintsList .table-wrap td:first-child::after,
  #complaintsList .table-wrap th:first-child::after { display: none; }

  #complaintsList .cx-table tr.cx-row td.cx-c-pick {
    grid-area: pick; width: auto; min-width: 0; padding: 0; padding-inline-end: 12px;
  }
  /* ‏والمعرّف في أوّل الكارت عند اليمين: الخليّة عربية والرقمُ معزولٌ داخلها
     (`<bdi dir="ltr">`)، فبدايةُ صفّها حافّةُ الكارت اليمنى حيث تبدأ العين */
  #complaintsList .cx-table tr.cx-row td.cx-c-ref {
    grid-area: ref; justify-content: flex-start; padding-inline-end: 9px;
    font-size: 13.5px; font-weight: 900; color: var(--text-secondary);
  }
  #complaintsList .cx-table tr.cx-row td.cx-c-name {
    grid-area: name; display: block; font-size: 15.5px; font-weight: 900;
    text-overflow: ellipsis;
  }
  #complaintsList .cx-table tr.cx-row td.cx-c-state {
    grid-area: state; justify-content: flex-end; flex-wrap: wrap; gap: 4px;
    padding-inline-start: 8px; overflow: visible;
  }
  /* ‏والواتساب: الرقم يضيق بنقاطه وزرُّه لا يضيق — كان الزرّ يُقصّ على ٣٦٠ وفي وضع الاختيار */
  #complaintsList .cx-table tr.cx-row td.cx-c-phone { grid-area: phone; gap: 6px; font-size: 13.5px; }
  #complaintsList .cx-table tr.cx-row .cx-phone .ltr {
    flex: 0 1 auto; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis;
  }
  #complaintsList .cx-table tr.cx-row .cx-phone .cx-wa { flex: none; margin: 0; }
  #complaintsList .cx-table tr.cx-row td.cx-c-order {
    grid-area: order; justify-content: flex-end; padding-inline-start: 8px;
  }
  #complaintsList .cx-table tr.cx-row td.cx-c-kind { grid-area: kind; }
  #complaintsList .cx-table tr.cx-row td.cx-c-when {
    grid-area: when; justify-content: flex-end; padding-inline-start: 8px;
    font-size: 12.5px; color: var(--text-secondary);
  }

  /* ‏وصفُّ الأزرار آخرَ الكارت يفصله خطٌّ واحد متصل — وبه وحده صار
     `column-gap: 0` أعلاه: فجوةٌ بين الأعمدة تقطع الخطّ ثلاثا */
  #complaintsList .cx-table tr.cx-row td.cx-c-chat,
  #complaintsList .cx-table tr.cx-row td.cx-c-eye,
  #complaintsList .cx-table tr.cx-row td.cx-c-act {
    margin-top: 3px; padding-top: 9px;
    border-top: 1px solid var(--border-default); text-align: start;
  }
  #complaintsList .cx-table tr.cx-row td.cx-c-chat { grid-area: chat; }
  #complaintsList .cx-table tr.cx-row td.cx-c-eye  { grid-area: eye; padding-inline-start: 8px; }
  #complaintsList .cx-table tr.cx-row td.cx-c-act  { grid-area: act; justify-content: flex-end; }
  #complaintsList .cx-table tr.cx-row .cx-act { min-height: 44px; padding: 0 14px; }
  /* ‏ومن لا محادثة له لا شرطةَ في كارته: في الجدول تقول «لا محادثة» تحت اسم
     عمودها، وفي الكارت لا عمود — فتُقرأ شرطةً ضالّة. فتُطوى خانتُها، والعينُ تأخذ
     مكانها أوّلَ السطر ويبقى الخطّ فوقهما متّصلا */
  #complaintsList .cx-table tr.cx-row td.cx-c-chat:has(> .cx-none) { display: none; }
  #complaintsList .cx-table tr.cx-row:has(> td.cx-c-chat > .cx-none) > td.cx-c-eye {
    grid-column-start: chat-start; padding-inline-start: 0;
  }

  /* ‏والكارت المحدد يلون كله، لا خلاياه */
  #complaintsList .cx-table tbody tr.cx-row.is-picked td,
  #complaintsList .cx-table tbody tr.cx-row.is-picked:hover td,
  #complaintsList .cx-table tbody tr:hover td { background: transparent; }
  #complaintsList .cx-table tbody tr.cx-row.is-picked {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  }
  #complaintsList .cx-table tbody tr.cx-row:last-child td { border-bottom: 0; }

  /* ‏وسطرُ «تدخل يدوي» ذيلُ كارته لا كارتٌ بعده: كان يطفو بعد فجوةٍ فيُقرأ عن
     الشكوى التالية. فيلتصق به — بحدّه وسطحه، وزاويتاه السفليّتان له */
  #complaintsList .cx-table tbody tr.cx-row:has(+ tr.cx-review-line) {
    border-bottom-color: transparent;
    border-end-start-radius: 0; border-end-end-radius: 0;
  }
  #complaintsList .cx-table tbody tr.cx-review-line {
    display: block; min-width: 0; margin-top: -9px; padding: 0 12px 12px;
    border: 1px solid var(--border-default); border-top: 0;
    border-end-start-radius: var(--radius-md); border-end-end-radius: var(--radius-md);
    background: var(--surface-2);
  }
  #complaintsList .cx-table tbody tr.cx-row.is-picked + tr.cx-review-line { border-color: var(--accent); }
  /* ‏وارتفاعُ خليّته بقدر ما فيها: `height: 48px` لخلايا الجدول تصير في كتلةٍ ارتفاعا ثابتا فتُقصّ */
  #complaintsList .cx-table tr.cx-review-line > td { display: block; height: auto; padding: 0; border: 0; overflow: visible; }
}

/* ‏وتحت الأربعمئة والأربعين من القائمة: الاسم سطرٌ وحده، والواتساب سطرٌ وحده
   بزرّه، والتاريخ يصعد إلى جانب المعرّف */
@container cx-list (width <= 440px) {
  #complaintsList .cx-table tr.cx-row {
    grid-template-areas:
      'ref   when  state'
      'name  name  name'
      'phone phone phone'
      'kind  kind  order'
      'chat  eye   act';
  }
  #complaintsList .cx-table.is-picking tr.cx-row {
    grid-template-areas:
      'pick ref   when  state'
      'pick name  name  name'
      'pick phone phone phone'
      'pick kind  kind  order'
      'chat chat  eye   act';
  }
  #complaintsList .cx-table tr.cx-row td.cx-c-ref { padding-inline-end: 0; }
  #complaintsList .cx-table tr.cx-row td.cx-c-when { justify-content: flex-start; padding-inline-start: 10px; font-size: 12px; }
}
/* ══════════════════════════════════════════════════════════════
 *  وشريط الإجراءات يقرأ شريطا
 * ══════════════════════════════════════════════════════════════
 *
 * ‏فاصله `--border-subtle` (#1C232C) على سطح اللوح (#12161D): نسبة
 * تباين نحو ١٫١٥:١ — لا تراها عين. فتقرأ سبعة أزرار ملتصقة بآخر سطر من
 * الكلام كأنها واقعة فوقه، وهو ما قرأه المالك «متداخلة».
 *
 * ‏فالفاصل يغلظ ويقوى، وأرضية الشريط تغمق عن سطح اللوح — فيفصل في
 * الداكن والفاتح معا، ويعرف أنه شريط قرار لا بقية كلام.
 */
@media (prefers-reduced-motion: reduce) {
  .cx-product-menu, .cx-product-option { animation: none; }
  .cx-product-trigger, .cx-product-chevron, .cx-product-option, .cx-fbtn,
  .cx-template-launch, .cx-menu-template, .cx-batch-start,
  .cx-link-btn, .cx-auto,
  /* ‏وبصنفين لا بصنف: حركةُ زرّ النسخ مكتوبةٌ بـ`.cx-invite-buttons
     .cx-copy-email` — فقاعدةٌ بصنف واحد هنا تولد ميتة */
  .cx-invite-buttons .cx-copy-email { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
 *  سجلُّ الإرسال التلقائي — زرُّه في الشريط، ولوحُه في الدرج
 * ══════════════════════════════════════════════════════════════
 * ‏«لو قفلت عايز أرجع وأشوف وصل لفين في كل إيميل، ولو في رفض إيه السبب»
 * ‏(المالك، 2026-09-23). والرقمُ على الزرّ: ما يجري الآن (أزرق) أو ما انتهى
 * ‏ولم يُفتح (أحمر يلفت). والخطُّ بحجم لوح الدفعة — «عايز الخط واضح». */
.cx-log-btn { position: relative; }
.cx-log-btn.is-running svg { animation: cx-spin 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .cx-log-btn.is-running svg { animation: none; } }
.cx-log-badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--danger); color: var(--text-on-accent);
  font-size: 12.5px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.cx-log-badge[data-tone="info"] { background: var(--accent-solid); }

.cx-log-body { font-size: 15px; }
.cx-log { display: flex; flex-direction: column; gap: 14px; }
.cx-log-empty {
  display: grid; place-items: center; gap: 8px; padding: 48px 12px;
  color: var(--text-secondary); font-size: 15px; font-weight: 700; text-align: center;
}
.cx-log-empty svg { width: 34px; height: 34px; color: var(--accent); }
.cx-log-job {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-2); overflow: hidden;
  border-inline-start: 4px solid var(--accent);
}
.cx-log-job[data-tone="bad"] { border-inline-start-color: var(--danger); }
.cx-log-job[data-tone="warn"] { border-inline-start-color: var(--warning); }
.cx-log-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-3);
}
.cx-log-who { min-width: 0; }
.cx-log-who b { display: block; font-size: 16px; font-weight: 900; color: var(--text-strong); overflow-wrap: anywhere; }
.cx-log-who small { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.cx-log-state {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 900;
  background: var(--accent-soft); color: var(--accent);
}
.cx-log-state[data-tone="ok"] { background: var(--success-soft); color: var(--success-text); }
.cx-log-state[data-tone="bad"] { background: var(--danger-soft); color: var(--danger-text); }
.cx-log-state[data-tone="warn"] { background: var(--warning-soft); color: var(--warning-text); }
.cx-log-state .cx-auto-spin { width: 14px; height: 14px; border-width: 2px; }
/* ‏شريطُ السجل: الكنسُ التلقائيُّ مكتوب، و«امسح السجل» بجانبه */
.cx-log-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.cx-log-bar small {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 750; color: var(--text-secondary);
}
.cx-log-bar small svg { width: 16px; height: 16px; }
.cx-log-actions { flex: none; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cx-log-actions .btn { min-height: 34px; padding: 5px 12px; font-size: 13.5px; font-weight: 900; }
.cx-log-actions .btn svg { width: 16px; height: 16px; }
.cx-log-verify .cx-auto-spin { width: 14px; height: 14px; border-width: 2px; }
.cx-log-del { width: 34px; padding: 0 !important; justify-content: center; color: var(--text-secondary); }
.cx-log-del:hover, .cx-log-clear:hover { color: var(--danger-text); background: var(--danger-soft); }
.cx-log-clear { min-height: 34px; padding: 5px 12px; font-size: 13.5px; font-weight: 900; }
.cx-log-clear svg { width: 16px; height: 16px; }
.cx-log-error {
  margin: 0; padding: 10px 16px; font-size: 14px; font-weight: 750;
  color: var(--danger-text); background: var(--danger-soft);
}
.cx-log-rows { list-style: none; margin: 0; padding: 4px 0; }
.cx-log-row { padding: 10px 16px; }
.cx-log-row + .cx-log-row { border-top: 1px solid var(--border-subtle); }
.cx-log-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-log-line svg { flex: none; width: 19px; height: 19px; }
.cx-log-row[data-tone="ok"] .cx-log-line svg { color: var(--success); }
.cx-log-row[data-tone="bad"] .cx-log-line svg { color: var(--danger); }
.cx-log-row[data-tone="warn"] .cx-log-line svg { color: var(--warning); }
.cx-log-row[data-tone="info"] .cx-log-line svg { color: var(--accent); }
.cx-log-line b { flex: none; font-size: 15px; font-weight: 900; color: var(--accent); }
/* ‏والبريدُ يلي رقمَ شكواه، والحالُ في طرف السطر: كان البريدُ يمتدّ فيُدفع إلى الطرف
   الآخر بعيدا عن رقمه، فيُقرأ السطرُ شيئين */
.cx-log-mail {
  flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; text-align: start;
  font-size: 15px; font-weight: 800; color: var(--text-primary); unicode-bidi: isolate;
}
.cx-log-st { flex: none; margin-inline-start: auto; font-size: 13.5px; font-weight: 900; color: var(--text-secondary); }
.cx-log-row[data-tone="bad"] .cx-log-st { color: var(--danger-text); }
.cx-log-row[data-tone="ok"] .cx-log-st { color: var(--success-text); }
.cx-log-row[data-tone="warn"] .cx-log-st { color: var(--warning-text); }
.cx-log-why, .cx-log-wa {
  margin: 6px 0 0; margin-inline-start: 29px; font-size: 14px; font-weight: 700; line-height: 1.6;
  color: var(--text-secondary); overflow-wrap: anywhere;
}
.cx-log-row[data-tone="bad"] .cx-log-why { color: var(--danger-text); }
.cx-log-row[data-tone="warn"] .cx-log-why { color: var(--warning-text); }
.cx-log-wa[data-ok="0"] { color: var(--warning-text); }
@media (max-width: 520px) {
  .cx-log-line { flex-wrap: wrap; }
  /* ‏وبريدُ الحساب سطرٌ كامل وحالُه تحته: كان يقتسم السطرَ مع شارة الحال فينكسر في وسطه */
  .cx-log-head { flex-wrap: wrap; }
  .cx-log-who { flex: 1 1 100%; }
  .cx-log-actions { flex: 1 1 100%; justify-content: flex-start; }
  .cx-log-mail { flex-basis: 100%; order: 3; }
  .cx-log-why, .cx-log-wa { margin-inline-start: 0; }
}

/* ‏وفي الجرس: نبرتا الإرسال التلقائي — خرجت كلها (أخضر)، ويجري الآن (بلون المنصّة) */
.notice-row[data-tone="ok"] svg { color: var(--success); }
.notice-row[data-tone="info"] svg { color: var(--accent); }

/* ─────────────── «اتحققت — جاهزة للإرسال» ───────────────
 *
 * ‏في آخر مربّع الحكم: بعد الحقائق والخطوات، فمن قرأها وصل إليه. والنصُّ أوّلَ السطر
 * ‏يبقى الحكمَ نفسَه (فحصُ الواجهة يقرأ الوسمَ أوّلا).
 */
.cx-review-ready {
  flex: none;
  align-self: flex-start;
  margin-inline-start: auto;
  white-space: nowrap;
  font-weight: 700;
}
/* ‏والمرورُ يقوّي الإطار لا الخلفية: خلفيةٌ أغمق تُنزل تباينَ النصّ في الفاتح تحت ٤٫٥ */
.cx-review-ready:hover:not([disabled]) { border-color: var(--success); }
.cx-review-ready:focus-visible { outline: 2px solid var(--success); outline-offset: 2px; }
.cx-review-ready[disabled] { opacity: .7; cursor: progress; }
/* ‏وأيقونتُه بلون نصّه — لا بلون الحكم الذي يلوّن أيقونةَ السطر */
.cx-review-line .cx-review-box .cx-review-ready svg { width: 15px; height: 15px; margin-top: 0; color: inherit; }
/* ‏وبعد الضغط: السطرُ نفسُه يقول «جاهزة» حتى يُعاد الجدول */
.cx-review-line[data-tone="ready"] .cx-review-box { border-inline-start-color: var(--success); }
.cx-review-line[data-tone="ready"] .cx-review-box svg { color: var(--success); }
.cx-review-line[data-tone="ready"] .cx-review-box > b { background: var(--success-soft); color: var(--success-text); }
/* ‏و«تقوله إيه للعميل»: جوابُ جوجل وما يُقال بلفظه وزرُّه — ثابتٌ تحت حقائق السطر، لونُه حالُه */
.cx-say {
  display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 10px 12px;
  border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-1);
  border-inline-start: 4px solid var(--border-strong);
}
.cx-say > b { font-size: 14.5px; font-weight: 900; color: var(--text-strong); }
.cx-say p { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.7; color: var(--text-primary); }
.cx-say[data-tone="info"] { border-inline-start-color: var(--info); }
.cx-say[data-tone="info"] > b { color: var(--info-text); }
.cx-say[data-tone="warn"] { border-inline-start-color: var(--warning); }
.cx-say[data-tone="warn"] > b { color: var(--warning-text); }
.cx-say[data-tone="muted"] > b { color: var(--text-secondary); }
.cx-say-msg {
  margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 13.5px; font-weight: 700; line-height: 1.8; color: var(--text-strong);
  user-select: all; overflow-wrap: anywhere;
}
.cx-say-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-say-acts .btn { white-space: nowrap; font-weight: 800; }
.cx-review-line .cx-review-box .cx-say svg { width: 15px; height: 15px; margin-top: 0; color: inherit; }

/* ‏و«اقرا العيلة» في آخر المربّع — ومعه «جاهزة للإرسال» عمودا واحدا لا يزاحم الحقائق */
.cx-review-acts {
  flex: none; align-self: flex-start; margin-inline-start: auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
}
.cx-review-acts .cx-review-ready { margin-inline-start: 0; }
.cx-review-box > .cx-family-read { flex: none; align-self: flex-start; margin-inline-start: auto; }
.cx-family-read { white-space: nowrap; font-weight: 800; }
.cx-family-read[disabled] { opacity: .75; cursor: progress; }
.cx-review-line .cx-review-box .cx-family-read svg { width: 15px; height: 15px; margin-top: 0; color: inherit; }

/* ‏و«اتأكد من العائلة» على سطر «ممكن تكون خرجت» نفسِه — مكانُ «جاهزة للإرسال» في آخر المربّع */
.cx-review-box .cx-verify-pending {
  flex: none; align-self: flex-start; margin-inline-start: auto; white-space: nowrap; font-weight: 800;
}
.cx-verify-pending[disabled] { opacity: .75; cursor: progress; }
.cx-review-line .cx-review-box .cx-verify-pending svg,
.cx-invite-row-warning .cx-verify-pending svg { width: 15px; height: 15px; margin-top: 0; color: inherit; }
/* ‏وفي صفّ الدفعة: داخل سطر التحذير نفسِه، لا يُقصّ ولا يُكسر */
.cx-invite-row-warning .cx-verify-pending {
  flex: none; margin-inline-start: auto; min-height: 30px; padding: 2px 10px; font-size: 12.5px; white-space: nowrap;
}
.cx-review-go { flex: none; align-self: center; margin-inline-start: auto; white-space: nowrap; }
.cx-review-line .cx-review-box .cx-review-go svg { width: 15px; height: 15px; margin-top: 0; color: inherit; }
.cx-cleared-list small { color: var(--text-secondary); }

.cx-cleared-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cx-cleared-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); }
.cx-cleared-list i, .cx-cleared-list svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--success); }

/* ‏والجدولُ لا يعيد حركةَ دخوله مع كلّ رسم: `riseIn` على `.table-wrap` (aurora.css) كانت تُعاد مع كلّ
 * ‏تحديثٍ حيّ وكلّ إجراءٍ وكلّ تبويب — فيومض الجدولُ كلُّه وينزل أربعةَ بكسلات. ودخولُ الصفحة يكفيه تلاشيها */
#complaintsList .table-wrap { animation: none; }

/* ‏صفحةُ الشكاوى حين تُغادَر تُطوى ولا تُخفى (app.js ‏navigateToPage): يُحفظ ترتيبُ جدولها فتعود في لحظة.
 * ‏و`content-visibility: hidden` يحجبها عن العين والتركيز وقارئ الشاشة كما يحجبها `display:none` */
.page.page-parked { content-visibility: hidden; }

/* ‏وأهدافُ الإصبع التي تُكتب قواعدُها الأصلية بعد كتلة اللمس الأولى: بمثل خصوصيّتها
   تغلبها المتأخّرة — فتُكتب هنا في آخر الملف */
@media (pointer: coarse) {
  .cx-table .cx-pick { min-height: 44px; min-width: 44px; }
  .modal .cx-invite-batch .modal-close { width: 44px; height: 44px; }
  .cx-log-actions .btn, .cx-log-clear { min-height: 44px; }
  .cx-log-del { width: 44px; }
}

/* ‏ومفتاحُ الدعوات لمن لا يقرؤه، وإجراءاتُ الدرج لمن لا يكتب: `hidden` يغلب `display` المكتوبَ لهما */
.cx-auto[hidden], .cx-dactions[hidden] { display: none; }

/* ‏وجدولُ التبويب السابق خامدٌ حتى يصل جديدُه: كان حيّا تحت اسمٍ آخر فتُفتح منه شكوى ليست منه */
#complaintsList.cx-switching { opacity: .5; pointer-events: none; transition: opacity .12s ease-out .08s; }
@media (prefers-reduced-motion: reduce) { #complaintsList.cx-switching { transition: none; } }

/* شكاوي تانية لنفس الطلب — تحت رقم الشكوى، صغيرة وخافتة، وتلميحها يسمّيها كلها */
.cx-mates {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  color: var(--warning-text, var(--text-muted)); direction: ltr; unicode-bidi: isolate;
}

/* ══════════════════════════════════════════════════════════════
   ملخّص الشكوى في رأس العين (`cxBriefHtml`) — المشكلة والمطلوب والطلب
   ══════════════════════════════════════════════════════════════ */
.cx-brief {
  margin: 0 0 12px; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--bg-card);
  border: 1px solid var(--border-default);
}
.cx-brief-head { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--text-primary); line-height: 1.6; }
.cx-brief-need { margin: 0 0 10px; font-size: 14.5px; color: var(--text-primary); line-height: 1.7; }
.cx-brief-need b { color: var(--accent); }
.cx-brief-facts { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; margin: 0; }
.cx-brief-facts dt { color: var(--text-secondary); font-size: 12.5px; padding-top: 2px; }
.cx-brief-facts dd { margin: 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.cx-brief-miss { color: var(--warning-text); font-weight: 700; }
.cx-said-title { margin: 4px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.cx-sysnotes { margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); }
.cx-sysnotes summary { cursor: pointer; font-weight: 700; }
.cx-sysnotes ul { margin: 6px 0 0; padding-inline-start: 18px; line-height: 1.7; }
@media (max-width: 560px) {
  .cx-brief-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .cx-brief-facts dd { margin-bottom: 6px; }
}

/* ── المراجعة الشرسة (5/10) ── */
/* ‏رقمُ طلبٍ طويل (تجار «2491090-4802101») بخطٍّ أصغر قليلا — يُقرأ كلُّه في عموده */
.cx-order.is-long > span { font-size: 12px; letter-spacing: -.2px; }
.cx-batch-start[hidden] { display: none !important; }
#complaintsProductCount[hidden] { display: none; }
/* ‏وتحت الجدول: ما وراء السقف يُقال */
.cx-cap-note {
  display: flex; align-items: center; gap: 8px; margin: 10px 4px 0; padding: 10px 12px;
  border-radius: var(--radius-md); background: var(--info-soft); color: var(--info-text); font-size: 13px; font-weight: 700;
}
.cx-cap-note svg { width: 16px; height: 16px; flex: none; }
/* ‏واللوحُ الضيّق: «إجراء» أيقونتُه وحدها — والاسمُ يأخذ ما وفّره (complaints.js: CX_COL_FLOOR_NARROW) */
.cx-table.is-narrow .cx-act-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-table.is-narrow .cx-act { padding-inline: 8px; }
/* ‏ورقمُ طلبٍ طويل: لونُه يقول حالَه (الأخضرُ «موجود عندنا» والرماديُّ «مش لاقيينه») — فلا علامةَ تأكل مكانَ رقمه في الجدول،
   ‏والحالُ مكتوبٌ عند الوقوف عليه وفي الدرج */
.cx-table .cx-order.is-long svg { display: none; }

/* ══════════════════════════════════════════════════════════════
 *  شريطُ الدفعة بألوانه الأولى نفسِها — أوضحُ ظهورا وبس
 * ══════════════════════════════════════════════════════════════
 * ‏«رجّعوه زي ما كان في الأول خالص… وحسّن الظهور بس، رجّع نفس الألوان الأولى خالص» (المالك، 7/10) — بعد تجربتين
 * ‏(داكنٌ ثمّ أخضرُ مصمت) لم تعجباه. فالخلفيّةُ والأزرارُ كما كانت، ويزيد الظهورُ وحده: إطارٌ أخضرُ أوضح، وحلقةٌ خضراءُ
 * ‏خفيفةٌ وظلٌّ أعمقُ يفصلانه عن الصفوف تحته، وعدّادٌ أكبر، وتلميحٌ بلون النصّ، و«ابعت دعوة» المقفولُ أقلُّ بهتانا */
.cx-batch-tray {
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--accent) 78%, var(--border-default));
  box-shadow: 0 14px 34px rgba(11, 14, 19, .2), 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
}
:root:not([data-theme="light"]) .cx-batch-tray {
  box-shadow: 0 16px 38px rgba(0, 0, 0, .55), 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .cx-batch-tray {
    box-shadow: 0 14px 34px rgba(11, 14, 19, .2), 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
  }
}
.cx-batch-tray .cx-batch-meter b { font-size: 19px; }
.cx-batch-tray .cx-batch-hint { color: var(--text-primary); font-size: 12.5px; }
.cx-batch-tray .cx-batch-go:disabled { opacity: .62; }