/* ══════════════════════════════════════════════════════════════
   مخزون الإيميلات
   ══════════════════════════════════════════════════════════════ */

.ei-page { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ei-page > *, .ei-register > *, #eiTableHost { min-width: 0; }
.ei-page :is(button, input, select, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ei-page .btn { min-height: 34px; padding-block: 5px; font-size: 13px; }

/* ‏شريط الفحص: سطرٌ واحدٌ داخل ترويسة السجلّ، لا لوحةٌ فوقه.
   ‏كان لوحةً بحدودٍ وخلفيّةٍ وقاعٍ فيه العدّادات و«عن الفحص» — ثلاثةُ أسطرٍ
   ‏تدفع الجدولَ إلى أسفل الشاشة. والحالُ تُقال بلونِ الأيقونة، لا بإطار. */
.ei-check-panel { min-width: 0; }
.ei-check-main {
  display: grid; grid-template-columns: 26px minmax(180px, 1fr) auto;
  align-items: center; gap: 6px 10px;
}
.ei-check-symbol { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 6px; color: var(--accent); background: var(--accent-soft); }
.ei-check-symbol svg { width: 17px; height: 17px; }
.ei-check-panel:is([data-state="human"], [data-state="paused"]) .ei-check-symbol { color: var(--warning-text); background: var(--warning-soft); }
.ei-check-panel:is([data-state="error"], [data-state="stopping"]) .ei-check-symbol { color: var(--danger-text); background: var(--danger-soft); }
.ei-check-panel[data-state="stopped"] .ei-check-symbol { color: var(--text-muted); background: var(--surface-3); }
.ei-check-panel[data-state="done"] .ei-check-symbol { color: var(--success-text); background: var(--success-soft); }
.ei-check-copy { display: flex; align-items: center; flex-wrap: nowrap; gap: 2px 12px; min-width: 0; }
.ei-check-heading { color: var(--text-strong); font-size: 13px; line-height: 1.5; }
.ei-check-heading b { font-weight: 600; }
.ei-check-detail { flex-basis: 100%; font-size: 12px; color: var(--text-muted); margin: 6px 0 0; line-height: 1.5; max-width: 70ch; }
.ei-current-account { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--text-muted); min-width: 0; }
/* ‏والبريدُ الطويلُ يُقصّ ولا يدفع الشريطَ: اسمُه كاملا في `title` */
.ei-current-account bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
.ei-current-account > span { font-size: 11px; color: var(--accent); background: var(--accent-soft); padding: 1px 7px; border-radius: 4px; }
.ei-check-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; }
.ei-check-actions .btn { white-space: nowrap; }
/* ‏العدّاد رقمٌ وكلمة، والعنوانُ الكاملُ في `title` */
.ei-run-metrics { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.ei-run-metric { display: flex; align-items: baseline; gap: 4px; cursor: help; }
.ei-run-metric dt { font-size: 11px; color: var(--text-muted); }
.ei-run-metric dd { margin: 0; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-strong); line-height: 1.4; }
.ei-run-metric[data-tone="green"] dd { color: var(--success-text); }
.ei-run-metric[data-tone="red"] dd { color: var(--danger-text); }
.ei-run-metric[data-tone="yellow"] dd { color: var(--warning-text); }
.ei-check-error svg { width: 14px; height: 14px; flex: none; margin-top: 4px; }
.ei-check-error { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 6px 10px; border-radius: 4px; background: var(--danger-soft); color: var(--danger-text); font-size: 12px; overflow-wrap: anywhere; }

/* سجل واحد يجمع البحث والفلاتر والنتائج، بلا بطاقات إحصاء مكررة. */
.ei-register { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: 10px; }
/* ‏الاسمُ وحالُ الفحصِ وأفعالُه في صفٍّ واحد */
/* ‏وارتفاعُها محجوزٌ: حالُ الفحص تتبدّل مع كلّ نبضةٍ — يظهر البريدُ الجاري
   ‏ثمّ يغيب، وتظهر العدّاداتُ ثمّ تغيب — وكان الجدولُ كلُّه يتحرّك تحتها. */
.ei-register-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 18px;
  padding: 8px 14px; min-height: 52px; border-bottom: 1px solid var(--border-subtle);
}
.ei-register-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: none; }
.ei-register-head h3 { font-size: 16px; font-weight: 600; color: var(--text-strong); margin: 0; }
#eiCheckControls { min-width: 0; }
#eiResultCount { font-size: 12px; color: var(--text-muted); }
#eiResultCount b { font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ‏معنى الرموز: أيقونةٌ في شريط التصفية تُفتَح عند الحاجة، لا سطرٌ دائم */
.ei-legend { font-size: 12px; color: var(--text-muted); flex: none; position: relative; }
.ei-legend summary {
  cursor: pointer; display: grid; place-items: center; list-style: none;
  width: 32px; height: 36px; border-radius: 6px; color: var(--text-muted);
}
.ei-legend summary:hover { background: var(--surface-3); color: var(--text-secondary); }
.ei-legend summary::marker, .ei-legend summary::-webkit-details-marker { display: none; }
.ei-legend svg { width: 16px; height: 16px; flex: none; }
.ei-legend > div {
  position: absolute; z-index: 5; inset-inline-end: 0; top: calc(100% + 4px); width: max-content; max-width: min(340px, 80vw);
  display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px;
  background: var(--surface-2); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg, 0 10px 28px rgba(0,0,0,.28));
}
.ei-legend > div > span { display: inline-flex; align-items: center; gap: 5px; }
.ei-legend small { flex-basis: 100%; font-size: 12px; }

/* ‏نذيرُ المنافذ: لا يظهر إلّا حين يوشك الرصيدُ أن ينفد */
.ei-ports-warn {
  display: flex; align-items: center; gap: 7px; margin: 8px 0 0; padding: 6px 10px;
  border-radius: 4px; font-size: 12px; background: var(--warning-soft); color: var(--warning-text);
}
.ei-ports-warn[data-level="low"] { background: var(--danger-soft); color: var(--danger-text); }
.ei-ports-warn svg { width: 15px; height: 15px; flex: none; }
.ei-ports-warn b { font-feature-settings: "tnum" 1; }

/* ── رصيد المنافذ في نافذة الاستيراد ── */
.ei-ports-box { margin: 0 0 12px; font-size: var(--fs-xs); }
.ei-ports-box.is-unknown { display: flex; align-items: center; gap: 7px; color: var(--text-muted); }
.ei-ports-box.is-unknown svg { width: 15px; height: 15px; flex: none; }
.ei-ports-sum { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.ei-ports-box:not(:has(.ei-ports-detail)) .ei-ports-sum { border-radius: var(--radius-sm); }
.ei-ports-sum svg { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
.ei-ports-sum b { color: var(--text-strong); font-feature-settings: "tnum" 1; }
.ei-ports-box[data-level="warn"] .ei-ports-sum b { color: var(--warning-text); }
.ei-ports-box[data-level="low"] .ei-ports-sum b { color: var(--danger-text); }

/* ── تفصيل المنافذ (مطوي) ── */
.ei-ports-detail {
  border: 1px solid var(--border-subtle); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--surface-2); font-size: var(--fs-xs);
}
.ei-ports-detail summary {
  cursor: pointer; padding: 8px 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px; list-style: none;
  user-select: none;
}
.ei-ports-detail summary::marker, .ei-ports-detail summary::-webkit-details-marker { display: none; }
.ei-ports-detail summary svg { width: 14px; height: 14px; flex: none; }
.ei-ports-grid {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px;
  background: var(--border-subtle); border-top: 1px solid var(--border-subtle);
}
.ei-ports-grid li {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  padding: 7px 12px; background: var(--surface-1); min-width: 0;
}
.ei-ports-grid li span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ei-ports-grid li b { color: var(--text-strong); flex: none; font-feature-settings: "tnum" 1; }

/* ── شريط الأدوات ── */
.ei-toolbar {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 14px;
}
/* ‏والخاناتُ بقدر ما يُكتَب فيها، لا بثلثِ الشريط لكلِّ واحدة.
   ‏كانت تتقاسم العرضَ كلَّه فتصير كلُّ واحدةٍ ثلاثَمئةِ بكسلٍ لكلمتين. */
.ei-filter { display: block; position: relative; min-width: 0; flex: 0 1 190px; font-size: 12px; color: var(--text-muted); }
.ei-filter-search { flex: 1 1 260px; max-width: 360px; }
.ei-filter-batch { flex: 0 1 240px; }
.ei-filter-status { flex: 0 1 200px; }
.ei-pick, .ei-search { width: 100%; min-width: 0; max-width: none; min-height: 36px; height: 36px; font-size: 13px; padding-block: 5px; background-color: var(--surface-1); border-radius: 6px; }
.ei-search-wrap { position: relative; display: block; }
.ei-search-wrap > svg { position: absolute; right: 10px; top: 10px; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.ei-search { padding-right: 38px; text-align: right; }
.ei-search:not(:placeholder-shown) { text-align: left; }
/* ‏وزرُّ الإلغاء مكتوبٌ باسمه: أيقونةٌ وحدَها كانت مربّعا فارغا قبل أن
   ‏تُحمَّل الأيقونات، فلا يعرف المالكُ أنّ له بابا يرفع به التصفية. */
.ei-clear {
  flex: none; padding-inline: 10px; white-space: nowrap; font-weight: 600;
  color: var(--danger-text); background: transparent;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}
.ei-clear:hover { background: var(--danger-soft); }
.ei-clear svg { width: 15px; height: 15px; }

/* ── الجدول ── */
.ei-table {
  border-top: 1px solid var(--border-subtle); border-radius: 0 0 10px 10px;
  background: var(--surface-1); overflow-x: auto;
  /* ‏بدون `position` كان `sr-only` (المطلق) في كلّ رايةٍ يخرج من الصندوق
     ويجرّ الصفحةَ أفقيّا على الهاتف؛ والصندوقُ يصير مرجعَ التثبيت للعمود اللاصق */
  position: relative;
}
/* ‏قراءةٌ جاريةٌ: الجدولُ يبهت قليلا فيُعرَف أنّ التصفيةَ اشتغلت */
.ei-table.is-loading { opacity: .7; pointer-events: none; transition: opacity .12s; }
/* ══════════════════════════════════════════════════════════════
   ‏وعشرةُ أعمدةٍ لا تدخل شاشةً عرضُها ١٢٢٠ — فيُثبَّت طرفاها
   ══════════════════════════════════════════════════════════════
   ‏شكا المالك (2/10): «إيه المنظر ده... أنا إزاي أشتغل كده». وقيس: الجدولُ
   ‏١٥١٠ والمساحةُ عنده ١٢٢٠، فيُقطع ٢٩٠ — وعلى شاشةٍ أضيق ٤٨٢.

   ‏وجُرّب حذفُ الأعمدة الخاوية فرُدّ: هي خاناتُ كتابةٍ تنتظر يدَه، وما يُكتب
   ‏فيها يمضي مع الحساب إلى جدول المدراء. وجُرّب تضييقُها كلِّها فانهار عمودُ
   ‏البريد إلى صفر وصار الصفُّ ٣٨٣ بكسلا: المجموعُ لا ينضغط، `table-layout:
   fixed` ‏يعطي الباقيَ لآخر عمودٍ بلا عرضٍ معلن.

   ‏فالتمريرُ يبقى — وهو تصميمُ الجدول منذ كُتب — ولا يعود يُفقِد شيئا:
   ‏طرفاه مثبّتان، البريدُ في أوّله والأزرارُ في آخره. فمهما مرّرتَ الوسطَ
   ‏تبقى تعرف **أيُّ حسابٍ** هذا و**ماذا تفعل به**. */
.ei-table table { width: 100%; min-width: 1316px; table-layout: fixed; border-collapse: collapse; }
.ei-table:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ei-table th {
  background: var(--surface-3);
  padding: 9px 12px; font-size: 12px; font-weight: var(--fw-semibold);
  color: var(--text-secondary); text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--border-hairline, var(--border-subtle));
}
@media (min-width: 701px) {
  /* ══════════════════════════════════════════════════════════
     ‏السجلُّ يملأ ما بقي من الشاشة
     ══════════════════════════════════════════════════════════
     ‏كان سقفُ الجدول `min(68vh, 780px)` — رقما لا علاقةَ له بالشاشة التي
     ‏أمامه. فعلى شاشةٍ طويلةٍ يقف الجدولُ عند ثلثَي الارتفاع ويبقى تحته
     ‏شريطٌ فارغٌ عريض: «استغل الفراغ اللي تحت ده» (المالك، 29/9).

     ‏والارتفاعُ يُقاس ولا يُخمَّن: `--ei-chrome` يكتبها `eiFitChrome` من
     ‏ارتفاع الشريط العلويّ الحقيقيّ وفراغِه وحشوةِ الصفحة السفليّة،
     ‏و١١٧px قيمةٌ احتياطيّةٌ إن لم يعمل القياس.

     ‏و`min-height: 0` في كلّ حلقةٍ ليست زينة: بدونها لا ينكمش عنصرُ
     ‏المرن تحت ارتفاع محتواه، فتمرُّ الصفحةُ كلُّها بدل الصندوق — ويفلت
     ‏رأسُ الجدول اللاصقُ وعمودُ الأفعال معه. */
  /* ‏و`vh` لا `dvh`: هذه القاعدةُ للشاشات الواسعة وحدَها، ولا أشرطةَ متحرّكةً
     ‏فيها — و`dvh` يُعاد حسابُه مع كلِّ تغيّرٍ في أشرطة المتصفّح، فيُعاد تخطيطُ
     ‏السجلِّ كلِّه بلا داعٍ ويومض ما تحته. */
  .ei-page { height: calc(100vh - var(--ei-chrome, 117px)); min-height: 420px; }
  .ei-register { display: flex; flex-direction: column; min-height: 0; }
  .ei-page > .ei-register { flex: 1 1 auto; }
  #eiTableHost { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  /* مئتا صف لا يدفعون عناوين الأعمدة خارج الشاشة: السجل نفسه هو الذي يمر. */
  .ei-table:not(.ei-empty) { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
  /* ‏والفاضي لا يُمطُّ على الشاشة كلِّها — رسالتُه بقدرها */
  .ei-table.ei-empty { flex: 0 0 auto; }
  .ei-table thead th { position: sticky; top: 0; z-index: 3; }
  .ei-table thead th.ei-c-act { z-index: 4; }
}
/* ══════════════════════════════════════════════════════════════
   ‏وما في العمود في منتصفه
   ══════════════════════════════════════════════════════════════
   ‏«بيانات هذه الأعمدة تكون في منتصف العمود، ويكون أطراف العمود على
   ‏قدّهم بالظبط» (المالك، 2/10). وكان كلُّ شيءٍ ملتصقا بأوّل عمودِه
   ‏والعمودُ أوسعُ منه بكثير — فيبعد المحتوى عن عنوانه وعن جاره،
   ‏وتصير الصفحةُ قوائمَ متباعدةً لا جدولا.

   ‏وعمودُ الحساب وحدَه يبدأ من أوّله: هو اسمُ الصفّ، وطولُ البريد يختلف
   ‏من صفٍّ إلى صفّ — فلو تمركز لتعرّج أوّلُ الأسماء ولم تُقرأ عمودا. */
.ei-table th.ei-c-mail, .ei-table td.ei-c-mail { text-align: start; }
/* ‏وحبرُ الجدول كحبر المنصة: كانت الخلايا على أربعمئة — دونَ العاديّ
   ‏في هذه الواجهة (ستمئة) — فتبدو رفيعة بجانب شاراتها وخاناتها.
   ‏«عايز الخط يكون بولت يكون واضح» (المالك، 2/10). */
.ei-table td {
  padding: 9px 12px; font-size: 13px; color: var(--text-secondary); text-align: center;
  font-weight: var(--fw-normal);
  border-bottom: 1px solid var(--border-hairline, var(--border-subtle)); vertical-align: middle;
}
.ei-table tbody tr:last-child td { border-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   ‏وجدولٌ يُقرأ جدولا: صفوفٌ وأعمدةٌ لها خطوط
   ══════════════════════════════════════════════════════════════
   ‏«خلّي الشكل العام جدول عبارة عن صفوف وأعمدة بدل العك ده» (المالك، 2/10).
   ‏ولم يكن في الجدول إلّا خطوطٌ أفقيّة، فالأعمدةُ تُحزَر من محاذاة ما فيها —
   ‏وحين تختلف أطوالُ ما في الخلايا تضيع الحدود وتصير الصفحةُ قوائمَ متجاورة.

   ‏والفاصلُ هو فاصلُ «معاينة الاستيراد» في هذه الصفحة نفسِها
   (`.ei-preview-sheet`) ‏— لا شكلٌ جديد: جدولان في صفحةٍ واحدةٍ يُرسمان سواء.
   ‏وارتفاعُ الصفِّ واحدٌ كذلك، فالعينُ تمشي على سطرٍ مستقيم. */
.ei-table th + th, .ei-table td + td {
  border-inline-start: 1px solid var(--border-hairline, var(--border-subtle));
}
.ei-table tbody td { height: 46px; }
/* ‏والعمودان المثبّتان يرسمان حدَّهما بأنفسهما: خلفيّتُهما تمرّ فوق حدِّ الجار */
.ei-table td.ei-c-act, .ei-table th.ei-c-act { border-inline-start: 1px solid var(--border-hairline, var(--border-subtle)); }
.ei-table td.ei-c-mail, .ei-table th.ei-c-mail { border-inline-end: 1px solid var(--border-hairline, var(--border-subtle)); }
.ei-table tbody tr { transition: background .1s; }
.ei-table tbody tr:hover td { background: var(--bg-card-hover, color-mix(in srgb, var(--surface-3) 60%, transparent)); }
.ei-table tr.is-selected td { background: var(--accent-soft); }
.ei-table tr.is-checking td:first-child { box-shadow: inset -3px 0 var(--accent); }
.ei-table tr.is-selected td.ei-c-act { background: var(--accent-soft); }
.ei-mobile-label { display: none; }

.ei-c-cb { width: 44px; text-align: center; }
/* ‏والمربّعُ يُحاط بمساحةِ لمسٍ كبيرة: كان ١٥ px يصعب إصابته على الهاتف */
.ei-cb-hit { display: inline-grid; place-items: center; min-width: 28px; min-height: 30px; cursor: pointer; }
.ei-cb { cursor: pointer; accent-color: var(--accent); width: 16px; height: 16px; }
@media (pointer: coarse) { .ei-cb { width: 20px; height: 20px; } }
/* ‏وأطولُ بريدٍ في المخزون ٣٤ حرفا (قيس 2/10): دونَ هذا ينكسر العنوانُ
   ‏سطرين فيرتفع الصفُّ ويقلّ ما يُرى من الحسابات في الشاشة */
/* ‏وأطولُ بريدٍ في المخزون ٣٤ حرفا (قيس 2/10): دونَ هذا ينكسر العنوانُ
   ‏سطرين فيرتفع الصفُّ ويقلّ ما يُرى من الحسابات في الشاشة.
   ‏ويُثبَّت كما يثبت عمودُ الأزرار: هو اسمُ الصفّ، فلا يُمرَّر بعيدا عنه */
/* ‏وأطولُ بريدٍ في المخزون أربعةٌ وثلاثون حرفا — يأخذ مئتينِ وخمسةً
   ‏وأربعين بالحبر الغليظ، ومعها الحشو مئتان وتسعون. ودونَ ذلك تُبتر
   ‏آخرُ الحروف بنقاط، واسمُ الحساب هو اسمُ الصفّ لا يُقصّ. */
.ei-c-mail { width: 270px; }
/* ‏والتثبيتُ حيث يتّسع له المكان وحده: على شاشةٍ ٣٢٠ عرضُ المرئيِّ ٣٠٠، فعمودُ
   ‏الحساب ٢٤٠ وعمودُ الأزرار ٣٠٨ مثبّتين معا لا يُبقيان مكانا لزرِّ الترقية —
   ‏قاسه `inventory-design-ui` فسقط. فدون ٩٠٠ يبقى الطرفُ الواحد مثبّتا. */
@media (min-width: 900px) {
  .ei-c-mail {
    position: sticky; inset-inline-start: 0; z-index: 2; background: var(--surface-1);
    box-shadow: 8px 0 8px -8px rgba(0,0,0,.28);
  }
  .ei-table th.ei-c-mail { background: var(--surface-3); }
  .ei-table tbody tr:hover td.ei-c-mail { background: var(--bg-card-hover, var(--surface-1)); }
  .ei-table tr.is-selected td.ei-c-mail { background: var(--accent-soft); }
  .ei-table tr.ei-alarm td.ei-c-mail { background: color-mix(in srgb, var(--danger-soft) 92%, var(--surface-1)); }
}
/* ‏والعنوانُ سطرٌ واحدٌ يُقَصّ بنقاط: كسرُه سطرين يرفع الصفَّ ويقلّ المرئيّ */
.ei-mail-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* ‏وعمودُ «بيانات الحساب» انتقل إلى قائمة «⋯» (2/10)، فعاد عرضُه — ١٦٠ بكسلا
   ‏— إلى الجدول. و`.ei-flags` باقيةٌ: تُستعمل في مواضعَ أخرى من الصفحة */
/* ‏والعمودُ يسع أطولَ حالٍ كاملةً: «تحقّق مش مقدور عليه» تحتاج ١٥٠px، وكان
   ‏العمودُ ١٢٨ — فتخرج الشارةُ من حدّها وتركب على عمود البيانات جنبها. */
/* ‏وأوسعُ حالٍ «تحقّق مش مقدور عليه» شارتُها ١٥٣ بكسلا مقيسة، وحشوُ
   ‏الخليّة ٢٤: فدونَ ١٧٨ تخرج الشارةُ من عمودها على جارَيها. */
.ei-c-status { width: 178px; white-space: nowrap; }
/* ‏والمقاسُ مقيس: أوسعُ ما في العمود + حشوُ الخليّة (قيس 2/10 بالصفحة
   ‏نفسها وCSSها): الفيزا ٩٢، والتاريخ ٦٥، و«مقفول» ٦٤، والملاحظة ٨٧،
   ‏وآخرُ فحصٍ ١١٠. وكانت أوسعَ من ذلك بـ١٥٠ بكسلا مجموعُها فراغ. */
.ei-c-visa { width: 120px; }
/* ‏وهذه الثلاثةُ محتواها قصير: تاريخٌ «01/10/2026»، و«مقفول»، و«شغال» —
   ‏فعرضُها بقدره، والخانةُ تبقى مفتوحةً للكتابة كما هي */
/* ‏والتاريخ يُكتب كاملا «15/12/2026»: بعد تغليظ الحبر صار يحتاج
   ‏مئةً وستّا، وكان العمودُ تسعين واثنين — فيُقَصّ «...0/2026». */
.ei-c-activated { width: 106px; }
.ei-c-payment { width: 92px; }
.ei-c-account { width: 112px; }
/* ‏خاناتُ التجهيز صارت `mgr-cell` كخانات المدراء (انظر `eiActivationCells`)،
   ‏فلم يبقَ لـ`ei-act-cell` مستعمل. وما يخصُّ هذا الجدولَ وحدَه يبقى: مقاسُ
   ‏أيقونة الفيزا، و«مشكلة تفعيل» تُقرأ خطرا من بعيد. */
.ei-c-visa button svg { width: 15px; height: 15px; flex: none; }
.ei-table .mgr-cell.is-problem { color: var(--danger-text); background: var(--danger-soft); }
.ei-table .mgr-cell:disabled { cursor: default; }
.ei-table .mgr-cell:disabled:hover { background: transparent; }
.ei-act-mail { display: block; font-size: 13px; font-weight: var(--fw-normal); color: var(--text-muted); margin-top: 5px; overflow-wrap: anywhere; }
/* ══════════════════════════════════════════════════════════════
   ‏ونافذةُ الفيزا تُفرَد: عمودٌ للبطاقة وعمودٌ لما يُفعل بها
   ══════════════════════════════════════════════════════════════
   ‏أمرُ المالك (2/10): «عايز شكل النافذة بتاعتها يكون شيك جدا أحسن من كده،
   ‏يكون عريض شوية وشيك في كل جهة في المنصة».

   ‏وسقفُ النافذة في اللوحة ٥٥٠ بكسلا، فكانت البطاقةُ وأزرارُها وسجلُّها
   ‏عمودا واحدا طويلا: تمريرٌ لرؤية الزرّ الذي جاء من أجله. فتُفرَد من ٧٦٠
   ‏فما فوق — والسقفُ يرتفع لنافذتَي الفيزا في المنصّة معا (المخزون والمدراء)،
   ‏فلا تكون واحدةٌ أوسعَ من أختها وهما الشيء نفسُه.

   ‏ودون ذلك تبقى عمودا كما كانت: على الهاتف العرضُ لا يُفرَد. */
.ei-activation-panel { max-width: 100%; }

@media (min-width: 820px) {
  .modal:has(.ei-activation-panel[data-kind="visa"]),
  .modal:has(.mgr-vp) { max-width: 760px; }

  .ei-activation-panel[data-kind="visa"] {
    display: grid; align-items: start;
    grid-template-columns: 340px minmax(0, 1fr);
    column-gap: var(--sp-6); row-gap: 2px;
  }
  /* ‏الترويسةُ والسجلُّ وما يُسأل فيه يمتدّون، والجانبان بينهما */
  .ei-activation-panel[data-kind="visa"] > .modal-header,
  .ei-activation-panel[data-kind="visa"] > .ei-act-log,
  .ei-activation-panel[data-kind="visa"] > .ei-act-error,
  .ei-activation-panel[data-kind="visa"] > .ei-return-form,
  .ei-activation-panel[data-kind="visa"] > .ei-replace-choices { grid-column: 1 / -1; }
  /* ‏والبطاقةُ تملأ عمودَها ولا تتوسّط فراغا */
  .ei-activation-panel[data-kind="visa"] .ei-visa-card { max-width: 100%; margin: 4px 0 10px; }
  .ei-activation-panel[data-kind="visa"] .ei-visa-reveal { justify-content: flex-start; margin-bottom: 0; }
  .ei-activation-panel[data-kind="visa"] .ei-act-buttons { margin: 10px 0 0; }
  .ei-activation-panel[data-kind="visa"] .ei-act-hint { margin: 0 0 6px; }
}
/* ‏والجانبان علبتان صريحتان — عمودٌ واحدٌ على الضيّق، واثنان على الواسع */
.ei-visa-side, .ei-visa-main { min-width: 0; }
.ei-visa-main { display: flex; flex-direction: column; gap: 6px; }
.ei-act-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 18px 0; }
.ei-act-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ei-act-hint { color: var(--text-muted); font-size: 12px; line-height: 1.8; margin: 12px 0; }
.ei-act-error { color: var(--danger-text); font-size: 13px; line-height: 1.7; }
.ei-act-error:empty { display: none; }
.ei-visa-card { max-width: 390px; margin: 8px auto 16px; }
.ei-visa-reveal { display: flex; justify-content: center; margin-bottom: 16px; }
.ei-act-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.ei-act-log { border-top: 1px solid var(--border-subtle); padding-top: 14px; margin-top: 20px; }
.ei-act-log h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 14px; }
.ei-act-log h4 svg { width: 16px; height: 16px; }
.ei-act-log ol { margin: 0; padding: 0; list-style: none; max-height: 210px; overflow: auto; }
.ei-act-event { display: flex; flex-wrap: wrap; gap: 6px 12px; border-bottom: 1px solid var(--border-subtle); padding: 10px 0; font-size: 12px; }
.ei-act-event small { color: var(--text-muted); }
.ei-act-event p { width: 100%; margin: 0; color: var(--text-muted); }
.ei-return-form, .ei-replace-choices { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border-default); border-radius: 8px; color: var(--text-secondary); }
.ei-return-confirm { display: flex; gap: 8px; align-items: center; }
@media (max-width: 700px) {
  .ei-table table { min-width: 1338px; }
  .ei-act-form { grid-template-columns: 1fr; gap: 12px; }
  .ei-act-buttons .btn { flex: 1 1 140px; }
}
.ei-c-date { width: 136px; white-space: nowrap; color: var(--text-muted); }
/* الفحصُ اليدوي والترقية ثابتان على الحافة في الكمبيوتر؛ وعلى الهاتف يصل إليهما تمرير الجدول. */
.ei-c-act {
  /* ‏٢٥٨ بعد أن خرج سببُ التعطيل من تحت الزرّين (2/10): زرّان وثلاثُ نقاطٍ
     ‏بفجواتهما، بلا سطرٍ ثانٍ يفرض عرضا ولا ارتفاعا */
  text-align: center; width: 258px; white-space: nowrap;
  position: sticky; inset-inline-end: 0; z-index: 2; background: var(--surface-1);
}
.ei-table th.ei-c-act { background: var(--surface-3); }
.ei-table tbody tr:hover td.ei-c-act { background: var(--bg-card-hover, var(--surface-1)); }
.ei-table tr.ei-alarm td.ei-c-act { background: color-mix(in srgb, var(--danger-soft) 92%, var(--surface-1)); }
/* ‏ظلٌّ خفيفٌ يظهر فقط حين يكون وراءه محتوى مُمرَّر */
.ei-table { --act-shadow: -8px 0 8px -8px rgba(0,0,0,.28); }
.ei-c-act { box-shadow: var(--act-shadow); }
/* ‏وزرّا الصفّ وثلاثُ النقاط ٢٨٤ بكسلا مقيسة: دونَ ٣٠٨ يُقَصُّ آخرُها على
   ‏الكمبيوتر. وتحت ٩٠٠ يبقى ٢٥٨ — هناك العمودُ غيرُ مثبّتٍ ويبلغه التمرير.
   ‏وموضعُه بعد تعريف العمود عمدا: لو سبقه لغلبه الأوّلُ بترتيب الملفّ. */
@media (min-width: 900px) {
  .ei-c-act { width: 312px; }
  .ei-table table { min-width: 1370px; }
}
.ei-scroll-hint { display: none; align-items: center; gap: 6px; font-size: 12px; padding: 7px 12px; color: var(--text-muted); }
.ei-scroll-hint svg { width: 14px; height: 14px; }
.ei-dim { color: var(--text-placeholder); }

/* ‏والملاحظةُ صارت سطرا في قائمة «⋯»: لا التصاقَ ولا عرضَ جدولٍ تلاحقه */
.ei-note {
  display: block; font-size: var(--fs-xs); line-height: var(--lh-base);
  overflow-wrap: anywhere;
}
.ei-note[data-t="err"] { color: var(--danger-text); }
.ei-note[data-t="dim"] { color: var(--text-muted); }


/* ‏والصفُّ الذي داخلُه حسابٌ غيرُ حسابه يُصبَغ كلُّه: كلُّ حكمٍ فيه مشكوك */
.ei-table tr.ei-alarm td { background: color-mix(in srgb, var(--danger-soft) 55%, transparent); }

.ei-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ei-mail-addr { color: var(--text-strong); overflow-wrap: anywhere; font-weight: var(--fw-semibold); }
.ei-mail-ok { width: 15px; height: 15px; color: var(--success); flex: none; }
.ei-mail-bad {
  display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 3px 8px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.ei-mail-bad svg { width: 14px; height: 14px; flex: none; }
.ei-mail-bad b { font-weight: var(--fw-semibold); }
.ei-tag {
  padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--fs-xs);
  background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ── الرايات ── */
.ei-flags { display: flex; gap: 5px; }
.ei-flag {
  width: 26px; height: 26px; border-radius: var(--radius-xs);
  display: grid; place-items: center; flex: none;
  border: 1px solid var(--border-subtle); background: var(--surface-2);
  color: var(--text-placeholder);
}
.ei-flag svg { width: 14px; height: 14px; }
.ei-flag.is-on {
  color: var(--success-text); background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}
/* ‏غيابُ سرِّ التحقّق تنبيهٌ خفيّ: الحسابُ يقف عند أوّل سؤالٍ من جوجل */
.ei-flag.is-warn {
  color: var(--warning-text); background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

/* ── الحالة الموحّدة ── */
.ei-status {
  display: inline-block; padding: 4px 12px; border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
  border: 1px solid transparent; cursor: default;
}
button.ei-status { cursor: pointer; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
button.ei-status:hover { filter: brightness(1.08); }

.ei-status[data-tone="green"] { background: var(--success-soft); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.ei-status[data-tone="yellow"] { background: var(--warning-soft); color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.ei-status[data-tone="orange"] { background: color-mix(in srgb, var(--warning) 18%, var(--surface-2)); color: color-mix(in srgb, var(--warning-text) 85%, var(--danger-text)); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.ei-status[data-tone="red"] { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.ei-status[data-tone="blue"] { background: color-mix(in srgb, var(--info, var(--accent)) 14%, var(--surface-2)); color: var(--info-text, var(--accent)); border-color: color-mix(in srgb, var(--info, var(--accent)) 30%, transparent); }
.ei-status[data-tone="accent"] { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ei-status[data-tone="gray"] { background: var(--surface-3); color: var(--text-muted); border-color: var(--border-subtle); }

/* ── قائمة تغيير الحالة ── */
.ei-status-menu {
  position: fixed; z-index: calc(var(--z-topbar, 100) + 2);
  min-width: 196px; padding: 6px;
  border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg, 0 10px 28px rgba(0,0,0,.28));
  display: flex; flex-direction: column; gap: 2px;
}
.ei-status-menu [role="menuitem"] {
  display: flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 6px 10px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-align: start; cursor: pointer; white-space: nowrap;
}
.ei-status-menu [role="menuitem"]:hover { background: var(--surface-3); }
@media (pointer: coarse) { .ei-status-menu [role="menuitem"] { min-height: 44px; } }
.ei-status-group {
  padding: 6px 10px 3px; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--text-muted); text-transform: none;
}
.ei-status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.ei-status-dot[data-tone="green"] { background: var(--success); }
.ei-status-dot[data-tone="yellow"] { background: var(--warning); }
.ei-status-dot[data-tone="orange"] { background: color-mix(in srgb, var(--warning) 70%, var(--danger)); }
.ei-status-dot[data-tone="red"] { background: var(--danger); }
.ei-status-dot[data-tone="blue"] { background: var(--info, var(--accent)); }
.ei-status-dot[data-tone="accent"] { background: var(--accent); }
.ei-status-dot[data-tone="gray"] { background: var(--text-placeholder); }
.ei-status-menu [data-cur] { background: var(--surface-3); font-weight: var(--fw-bold); }

.ei-status-menu, .ei-more-menu {
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
  overscroll-behavior: contain;
}
.ei-status-menu > *, .ei-more-menu > * { flex-shrink: 0; }
.ei-status-menu [role="menuitem"]:focus-visible,
.ei-more-menu [role="menuitem"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--surface-3);
}

/* ── زرّ الإجراء والقائمة المنسدلة ── */
.ei-acts { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ei-page .ei-act-btn { width: 30px; min-height: 32px; padding: 4px; flex: none; color: var(--text-muted); background: transparent; }
.ei-act-btn svg { width: 18px; height: 18px; }
/* ══════════════════════════════════════════════════════════════
   ‏وزنُ الأزرار: واحدٌ مصمتٌ في الصفحة كلِّها
   ══════════════════════════════════════════════════════════════
   ‏كان «ترقية لمدير» أخضرَ مصمتا في كلِّ صفّ — مئتا نداءٍ بالقوّة نفسِها،
   ‏فلا يبقى في الشاشة ما يسبق غيرَه. فأفعالُ الصفِّ تُلوَّن ولا تُملأ،
   ‏والمصمتُ يُحفَظ لفعل الصفحة: «فحص تلقائي». */
.ei-page .ei-check-go {
  background: var(--accent-solid); color: var(--text-on-accent); border: 1px solid transparent; font-weight: 600;
}
.ei-page .ei-check-go:not(:disabled):hover { background: var(--accent-solid-hover); }
.ei-page .ei-check-halt {
  background: transparent; color: var(--danger-text); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
}
.ei-page .ei-check-halt:not(:disabled):hover { background: var(--danger-soft); }
.ei-page .ei-import-btn, .ei-page .ei-report-btn { border: 1px solid var(--border-default); color: var(--text-secondary); background: transparent; }
.ei-page .ei-import-btn:not(:disabled):hover, .ei-page .ei-report-btn:not(:disabled):hover { background: var(--surface-3); }

/* ── تقرير الدفعة للتاجر ──
   أداة عمل هادئة: قائمة اختيار عاديّة، ومعاينة، وزرّان بحجم أزرار اللوحة.
   وسقف الارتفاع واحدٌ للإطار وما فيه: كان الجسم يُعطى ٩٠٪ من الشاشة داخل
   إطار سقفه ٨٥٪، فيسقط الذيل بزرّيه خارج الإطار على الشاشات الأقصر. */
.modal:has(.ei-report-panel) {
  max-width: min(860px, 95vw); max-height: calc(100vh - 32px); padding: 0; overflow: hidden;
}
.ei-report-panel {
  display: flex; flex-direction: column; height: min(620px, calc(100vh - 40px));
  background: var(--bg-secondary, var(--surface-1)); color: var(--text-strong);
}

.ei-report-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none;
  padding: 14px 20px; border-bottom: 1px solid var(--border-subtle);
}
.ei-report-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-strong); }
.ei-report-head .modal-close { width: 30px; height: 30px; }

.ei-report-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }

/* ── العمود الجانبي ── */
.ei-report-side {
  display: grid; align-content: start; gap: 18px; min-height: 0; overflow-y: auto;
  padding: 16px 20px; border-inline-end: 1px solid var(--border-subtle);
}
.ei-seg-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.ei-seg-field legend, .ei-side-label {
  display: block; padding: 0; margin-bottom: 8px;
  font-size: 14px; font-weight: 700; color: var(--text-strong);
}
.ei-report-batch { width: 100%; min-height: 40px; height: 40px; font-size: 14px; padding-block: 6px; color: var(--text-strong); }
.ei-report-batch-meta { display: block; margin-top: 6px; font-size: 13px; color: var(--text-secondary); min-height: 1em; }

/* خيارات عاديّة: زرّ اختيار واسمه، والعدد في آخر السطر */
.ei-choices { display: grid; border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; }
.ei-choice {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px; cursor: pointer;
  font-size: 15px; color: var(--text-strong);
}
.ei-choice + .ei-choice { border-top: 1px solid var(--border-subtle); }
.ei-choice:hover { background: var(--surface-2); }
.ei-choice:has(input:checked) { background: var(--surface-2); font-weight: 600; }
.ei-choice input { margin: 0; flex: none; width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.ei-choice-label { flex: 1; min-width: 0; }
.ei-choice:has(input:disabled) { color: var(--text-placeholder); cursor: not-allowed; }
.ei-choice:has(input:disabled) input { cursor: not-allowed; }
.ei-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.ei-seg-count { flex: none; font-size: 15px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ei-report-unchecked { margin: 8px 2px 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
/* اللغة ثلاثة خيارات قصيرة في صفّ واحد: توفّر سطرين في العمود الجانبي */
.ei-choices-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ei-choices-row .ei-choice { justify-content: center; gap: 7px; padding: 8px 6px; font-size: 14px; }
.ei-choices-row .ei-choice-label { flex: none; }
.ei-choices-row .ei-choice + .ei-choice { border-top: 0; border-inline-start: 1px solid var(--border-subtle); }

/* ── المعاينة: ورقة صغيرة تمرّ وحدها، ورأسها ثابت ── */
.ei-preview { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 16px 20px; }
.ei-preview-head { margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.ei-preview-sheet {
  flex: 1; min-height: 0; overflow: auto;
  border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-1);
}
.ei-preview-sheet table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
/* والحجم على الخانة نفسها: قاعدة td العامة تضع حجمها وحشوتها، فلا ترث من الجدول */
.ei-preview-sheet th {
  position: sticky; top: 0; z-index: 1;
  padding: 9px 14px; text-align: start; font-size: 14px; line-height: 1.45; font-weight: 700;
  color: var(--text-strong); background: var(--surface-3); border-bottom: 1px solid var(--border-subtle);
}
.ei-preview-sheet td {
  padding: 8px 14px; font-size: 14px; line-height: 1.45; color: var(--text-strong);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ei-preview-sheet th + th, .ei-preview-sheet td + td { border-inline-start: 1px solid var(--border-subtle); }
.ei-preview-sheet th:first-child { width: 56%; }
.ei-preview-sheet td.ei-pv-mail { text-align: start; }
.ei-preview-sheet tr:hover td { background: inherit; }
.ei-preview-sheet tr.ei-pv-more td { text-align: center; color: var(--text-secondary); }
.ei-preview-sheet tr.ei-pv-total td { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--border-default); }
.ei-preview-sheet tr.ei-pv-sub td { color: var(--text-secondary); }
.ei-preview-sheet tr:last-child td { border-bottom: 0; }
.ei-preview-empty { margin: 0; padding: 36px 16px; text-align: center; font-size: 15px; color: var(--text-secondary); }

/* ── الذيل: زرّان بحجم أزرار اللوحة، ثابتان داخل الإطار ── */
.ei-report-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none;
  padding: 12px 20px; border-top: 1px solid var(--border-subtle);
}
/* والزرّ المعطّل يبدو معطّلا: قاعدة الصفحة لا تصل إلى هذه النافذة */
.ei-report-panel .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ضيّقة: كتلة واحدة تمرّ كلّها، والذيل ثابت تحتها */
@media (max-width: 760px) {
  .ei-report-panel { height: auto; max-height: calc(100vh - 40px); }
  .ei-report-body { display: block; overflow-y: auto; }
  .ei-report-side { overflow: visible; min-height: auto; border-inline-end: 0; border-bottom: 1px solid var(--border-subtle); }
  .ei-preview { min-height: auto; }
  .ei-preview-sheet { max-height: 280px; flex: none; }
}
@media (max-width: 480px) {
  .ei-report-head, .ei-report-side, .ei-preview, .ei-report-foot { padding-inline: 14px; }
  .ei-report-foot .btn-primary { flex: 1; justify-content: center; }
}

.ei-manual { display: grid; gap: 3px; min-width: 104px; }
.ei-page .ei-manual-btn {
  min-height: 32px; padding: 4px 10px; border-radius: 6px; white-space: nowrap;
  font-weight: var(--fw-normal); color: var(--text-secondary); background: transparent;
  border: 1px solid var(--border-default);
}
.ei-page .ei-manual-btn:not(:disabled):hover {
  background: var(--surface-3); color: var(--text-strong); border-color: var(--border-strong, var(--border-default));
}
.ei-page .ei-manual-btn:disabled {
  opacity: 1; color: var(--text-placeholder); background: transparent; border-color: var(--border-subtle);
}
.ei-manual-btn svg { width: 15px; height: 15px; }
/* ══════════════════════════════════════════════════════════════
   ‏وسببُ التعطيل سطرٌ واحدٌ لا يَركب جارَه
   ══════════════════════════════════════════════════════════════
   ‏الخليّةُ `white-space: nowrap` (لأجل الأزرار)، والسببان جملتان عربيّتان
   ‏طويلتان في صندوقين بعرض ١٠٨ و١٢٦ بكسلا — فكلٌّ منهما يخرج من صندوقه
   ‏ويركب الآخر. قيس في لقطة المالك (2/10): «مفيش بيانات دخول محفوكظل تجهيز
   ‏التفعيل» — كلمتان متداخلتان لا تُقرآن.

   ‏ولا يُترك ليلتفّ: ثلاثةُ أسطرٍ في كلِّ صفٍّ من مئةٍ وأربعة ترفع الصفَّ إلى
   ‏نحو المئة بكسل، وشكواه أصلا أنّ الشاشة لا تسع إلّا سبعةَ حسابات. فيُقَصّ
   ‏بنقاطٍ: أوّلُه يقول المعنى («مفيش بيانات دخول…»)، وتمامُه في «…» الصفّ.

   ‏والقصُّ وحدَه لا يكفي: نصٌّ `nowrap` يُسهم بعرضه كاملا في عرض أبيه مهما
   `overflow: hidden` ‏عليه — فالصندوقُ يتّسع للجملة ثمّ يقصُّها، ويبقى
   ‏واسعا يركب جارَه. قيس: صندوقٌ عرضُه ١٠٨ وعمودُه الداخليُّ ١١٠٫٤٥.

   ‏فيُنزَع النصُّ من حساب العرض أصلا: `width: 0` يجعل إسهامَه صفرا، و
   `min-width: 100%` ‏يعيده ليملأ أباه بعد أن استقرّ عرضُ الأب على أزراره. */
.ei-manual, .ei-promotion { grid-template-columns: minmax(0, 1fr); }
.ei-manual-reason, .ei-promote-reason {
  display: block; width: 0; min-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ei-manual-reason { font-size: 11px; color: var(--text-muted); line-height: 1.4; text-align: center; }
.ei-promotion { display: grid; gap: 3px; min-width: 120px; }
/* ‏الترقيةُ فعلُ الصفِّ الأهمّ، فتُلوَّن ولا تُملأ: المصمتُ لفعل الصفحة وحدَه */
.ei-page .ei-promote-btn {
  min-height: 32px; padding: 4px 10px; border-radius: 6px; white-space: nowrap; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.ei-page .ei-promote-btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
}
.ei-page .ei-promote-btn:disabled { opacity: 1; color: var(--text-placeholder); background: transparent; border: 1px solid var(--border-subtle); }
.ei-promote-btn svg { width: 15px; height: 15px; }
.ei-promote-reason { font-size: 11px; color: var(--text-muted); line-height: 1.4; text-align: center; }

.ei-more-menu {
  position: fixed; z-index: calc(var(--z-topbar, 100) + 1);
  min-width: 196px; padding: 6px;
  border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg, 0 10px 28px rgba(0,0,0,.28));
  display: flex; flex-direction: column; gap: 2px;
}
.ei-more-menu [role="menuitem"] {
  display: flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 6px 10px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-align: start; cursor: pointer; white-space: nowrap;
}
.ei-more-menu [role="menuitem"] svg { width: 16px; height: 16px; flex: none; color: var(--text-secondary); }
.ei-more-menu [role="menuitem"]:hover { background: var(--surface-3); }
.ei-more-menu [role="menuitem"][disabled] { opacity: .4; cursor: not-allowed; }
.ei-more-menu [role="menuitem"][disabled]:hover { background: transparent; }
.ei-more-menu [data-main] { color: var(--accent); font-weight: var(--fw-bold); }
.ei-more-menu [data-main] svg { color: currentColor; }
.ei-more-menu [data-danger] { color: var(--danger-text); }
.ei-more-menu [data-danger] svg { color: currentColor; }
.ei-more-menu [data-danger]:hover { background: var(--danger-soft); }
.ei-more-sep { height: 1px; margin: 4px 6px; background: var(--border-subtle); }

/* ══════════════════════════════════════════════════════════════
   ‏وحقائقُ الحساب في رأس القائمة — تُقرأ ولا تُحزَر
   ══════════════════════════════════════════════════════════════
   ‏كانت خمسَ أيقوناتٍ في عمودٍ بالجدول، معناها خلف التحويم — وعلى الهاتف لا
   ‏تحويم أصلا. نُقلت إلى هنا بأمر المالك (2/10)، ومعها لفظُها. وهي خبرٌ لا
   ‏فعل: لا تُضغط، ولا تأخذ لونَ عناصر القائمة. */
.ei-more-facts {
  display: flex; flex-direction: column; gap: 3px;
  padding: 4px 10px 6px; max-width: 280px;
}
.ei-fact {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--text-muted);
}
.ei-fact svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.ei-fact[data-on="1"] { color: var(--text-secondary); }
.ei-fact[data-on="1"] svg { color: var(--success); }
.ei-fact[data-on="0"] svg { color: var(--text-placeholder); }
/* ‏وما ينقص ويضرّ يُقرأ خطرا: «مفيش سرّ تحقّق» يوقف الحساب لو جوجل سأل */
.ei-fact[data-warn="1"] { color: var(--danger-text); }
.ei-fact[data-warn="1"] svg { color: var(--danger); }
/* ‏وسببُ العطل في القائمة: كتلةٌ تُقرأ، حمراءُ إن كانت عطلا */
.ei-more-notes {
  display: grid; gap: 4px; padding: var(--sp-2) var(--sp-3);
  max-width: 320px;
}
.ei-more-notes .ei-note[data-t="err"] { color: var(--danger-text); }
@media (pointer: coarse) { .ei-more-menu [role="menuitem"] { min-height: 44px; } }

/* ── شريط التحديد الجماعي ── */
.ei-sel-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 16px 8px; padding: 6px 10px; border-radius: 6px;
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, var(--surface-2)));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: var(--fs-sm); color: var(--accent);
}
.ei-sel-bar .ei-sel-count { font-feature-settings: "tnum" 1; }
.ei-sel-bar .btn-danger { white-space: nowrap; }

.ei-badge-done {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: var(--success-soft); color: var(--success-text);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}
.ei-badge-done svg { width: 13px; height: 13px; flex: none; }

.ei-empty { padding: 36px 20px; text-align: center; color: var(--text-muted); display: grid; justify-items: center; gap: 8px; font-size: var(--fs-sm); }
/* ‏هيكلُ الانتظار يأخذ عرضَ الصفوف التي سيحلّ محلَّها، لا وسطَ الصندوق */
.ei-table.is-waiting { padding: 14px 16px; gap: 12px; justify-items: stretch; }
.ei-table.is-waiting .skeleton { width: 100%; height: 18px; border-radius: var(--radius-xs); }
.ei-empty svg { width: 28px; height: 28px; opacity: .5; }
.ei-empty h3 { color: var(--text-strong); font-size: 18px; font-weight: 600; }
.ei-empty p { max-width: 52ch; font-size: var(--fs-xs); }
.ei-empty .btn { margin-top: 8px; }
.ei-empty .btn svg { width: 16px; height: 16px; opacity: 1; }

/* ══════════════════════════════════════════════════════════
   لوحُ الكشف ولوحُ التعديل
   ‏والخانةُ المكشوفةُ تُكتَب `textContent`؛ هذا الملفُّ يرسمها وحدَها
   ‏ولا يعرف ما فيها.
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
 *  ‏والنافذةُ تتّسع لما فيها
 * ══════════════════════════════════════════════════════════════
 *
 * ‏كلُّ نوافذ اللوحة مقفولةٌ على ٥٥٠ بكسل. وهذه تعرض أسرارا طويلةً —
 * ‏سرُّ المصادقة ستّةٌ وعشرون حرفا، وبريدُ الاسترجاع وكلمةُ المرور — في
 * ‏عمودٍ ضيّقٍ بين عمودِ اسمٍ وثلاثةِ أزرار، فتنكسر القيمةُ إلى برجٍ من
 * ‏سطرٍ في كلِّ سطر ولا تُقرأ. شكا المالك (29/9) وأرفق صورتَها.
 */
.modal:has(.ei-secret-panel) { max-width: min(940px, 95vw); }
.modal:has(.ei-edit) { max-width: min(900px, 95vw); }

.ei-secret-panel { padding: 2px; }
.ei-secret-panel .modal-header h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; color: var(--text-strong); }
.ei-secret-panel .modal-header h3 svg { width: 18px; height: 18px; flex: none; }
.ei-secret-panel .modal-header h3 span { font-size: var(--fs-sm); color: var(--text-muted); overflow-wrap: anywhere; }

.ei-secret-warn {
  display: flex; align-items: flex-start; gap: 7px; margin: 12px 0;
  color: var(--warning-text); font-size: var(--fs-xs); line-height: var(--lh-base);
}
.ei-secret-warn svg { width: 15px; height: 15px; margin-top: 2px; flex: none; }

.ei-secret-list { display: flex; flex-direction: column; border-block: 1px solid var(--border-subtle); }
.ei-secret-row {
  display: grid; grid-template-columns: minmax(140px, 190px) minmax(240px, 1fr) auto;
  gap: 14px; align-items: center; padding: 12px 2px;
}
.ei-secret-row + .ei-secret-row { border-top: 1px solid var(--border-subtle); }
.ei-secret-label { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: var(--fs-xs); }
.ei-secret-label svg { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
.ei-secret-label em { font-style: normal; color: var(--text-placeholder); font-size: var(--fs-xs); }

.ei-secret-out {
  display: flex; align-items: center;
  min-height: 38px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px dashed var(--border-default); background: var(--surface-inset);
  color: var(--text-placeholder); font-size: var(--fs-xs);
  /* ‏والسرُّ يُقرأ حرفا حرفا: صفرٌ ليس حرفَ O، وواحدٌ ليس lam */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
/* ‏والأكوادُ الاحتياطيّة أسطرٌ: تبقى أسطرا، فلا يضمّها الصفُّ في واحد */
.ei-secret-out.is-multi { display: block; white-space: pre-wrap; line-height: 1.7; }
.ei-secret-out.is-shown {
  border-style: solid; border-color: color-mix(in srgb, var(--accent) 40%, var(--border-default));
  color: var(--text-strong); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
}
.ei-secret-btns { display: flex; gap: 4px; justify-content: flex-end; }

.ei-import-or {
  display: flex; align-items: center; gap: 10px; color: var(--text-placeholder);
  font-size: var(--fs-xs); margin: 4px 0;
}
.ei-import-or::before, .ei-import-or::after {
  content: ""; flex: 1; height: 1px; background: var(--border-subtle);
}
.ei-file {
  width: 100%; font-size: var(--fs-xs); color: var(--text-secondary);
}
.ei-file::file-selector-button {
  padding: 6px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-secondary); font-size: var(--fs-xs);
  cursor: pointer; margin-inline-end: 10px;
}
/* سطر حال الملف: يبقى ظاهرا، وأخضر إن قُرئ وأحمر إن فشل */
.ei-file-status {
  margin: 8px 0 0; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.5; color: var(--text-secondary); background: var(--surface-2);
}
.ei-file-status[data-tone="ok"] { color: var(--success-text); background: var(--success-soft); }
.ei-file-status[data-tone="error"] { color: var(--danger-text); background: var(--danger-soft); }

/* ‏وخانةٌ أعرضُ تُقرأ: بريدٌ كاملٌ أو سرُّ مصادقةٍ لا ينكسر في خانةٍ ضيّقة */
.ei-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ei-edit-grid + .ei-edit-grid { margin-top: 4px; }

.ei-imp-done { margin-top: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-subtle); }
.ei-imp-sum { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--text-strong); }
.ei-imp-sum b { font-feature-settings: "tnum" 1; }
.ei-imp-ai { font-size: var(--fs-xs); color: var(--accent); font-weight: var(--fw-normal); }
.ei-cols { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.ei-col-tag {
  padding: 3px 8px; border-radius: var(--radius-full); font-size: var(--fs-xs);
  background: var(--surface-3); color: var(--text-secondary); border: 1px solid var(--border-subtle);
}
.ei-col-tag[data-n="email"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.ei-col-tag[data-n="password"] { color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.ei-imp-rej { margin: 6px 0 0; color: var(--warning-text); font-size: var(--fs-xs); display: flex; align-items: center; gap: 5px; }
.ei-imp-rej svg { width: 14px; height: 14px; flex: none; }
.ei-imp-hint { margin: 6px 0 0; color: var(--text-muted); font-size: var(--fs-xs); }
.ei-field { display: grid; gap: 5px; font-size: var(--fs-xs); color: var(--text-muted); }
.ei-field.is-wide { grid-column: 1 / -1; }
.ei-field textarea.form-input { resize: vertical; min-height: 72px; }

/* ‏على اللابتوب مساحة العمل أضيق بسبب الشريط الجانبي: الاسم يأخذ سطره
   ‏القصير، وحالة الفحص والأفعال تبقى في سطر ثانٍ منضبط بدل تكسّرٍ عشوائي. */
@media (min-width: 701px) and (max-width: 1350px) {
  .ei-register-head { grid-template-columns: 1fr; }
  .ei-check-actions { flex-wrap: wrap; }
}

/* ── الشاشات الضيّقة ── */
@media (max-width: 700px) {
  .ei-register-head { grid-template-columns: 1fr; padding: 10px; gap: 6px 10px; }
  .ei-register-name { gap: 2px 8px; }
  .ei-register-head h3 { font-size: 16px; }
  .ei-check-main { grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
  .ei-check-symbol { width: 22px; height: 24px; }
  .ei-check-copy { flex-wrap: wrap; }
  .ei-check-actions { grid-column: 1 / -1; width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .ei-run-metrics { gap: 4px 12px; }
  .ei-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; gap: 6px; }
  .ei-filter-search { grid-column: 1 / -1; }
  .ei-pick, .ei-search { font-size: 12px; padding-inline-start: 8px; }
  .ei-search { padding-right: 30px; }
  .ei-clear { justify-self: start; }
  /* ‏وعلى الهاتف تُفتح لوحةُ الرموز بعرض الشريط: كانت تُقاس من حافّة
     ‏أيقونتها فتمتدّ خارج الشاشة حين تقع الأيقونةُ في آخر السطر. */
  .ei-toolbar { position: relative; }
  .ei-legend { justify-self: start; position: static; }
  .ei-legend > div { inset-inline: 10px; width: auto; max-width: none; }
  .ei-sel-bar { margin-inline: 10px; font-size: 12px; }
  /* ‏عمودُ الأفعال نفسه لازم يدخل عرض 320px كاملا عند نهاية التمرير؛
     ‏308px مع حافتي السجل كان يترك زر الترقية مقصوصا بعد آخر سحبة. */
  .ei-c-act { position: static; box-shadow: none; width: 280px; }
  .ei-manual { min-width: 98px; }
  .ei-promotion { min-width: 116px; }
  .ei-secret-row { grid-template-columns: 1fr; }
  .ei-secret-btns { justify-content: flex-start; }
}

/* الجدول يظل جدولاً؛ التمرير داخل حدوده، لا تحويل الصفوف إلى بطاقات. */
@media (max-width: 1280px) { .ei-scroll-hint { display: flex; } }
@media (pointer: coarse) {
  .ei-page .btn, .ei-page .ei-promote-btn, .ei-page .ei-act-btn, .ei-pick, .ei-search { min-height: 40px; }
  .ei-cb-hit { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ei-page *, .ei-status-menu, .ei-more-menu { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   ‏إضافاتُ الواجهة المعادة: سببُ التعطيل، «اعرض أكتر»، فشلُ الترقية،
   ‏معاينةُ الاستيراد، سهمُ القوائم، والأزرارُ المعطَّلة
   ══════════════════════════════════════════════════════════ */

/* ‏سببُ تعطيلِ بندٍ في القائمة يُكتَب تحته: على الهاتف لا تحويم فلا يُرى `title` */
.ei-more-menu [role="menuitem"] { flex-direction: column; align-items: stretch; gap: 3px; }
.ei-more-line { display: flex; align-items: center; gap: 10px; }
.ei-more-why { color: var(--text-muted); font-size: 11px; font-weight: var(--fw-regular, 400); padding-inline-start: 26px; white-space: normal; }
.ei-more-menu [data-danger] .ei-more-line svg { color: currentColor; }

/* ‏سهمٌ على القوائم المنسدلة فتُعرَف أنّها قوائمُ لا خاناتُ كتابة (RTL: يسار) */
.ei-pick, .ei-secret-panel select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 10px center; padding-inline-end: 32px;
}

/* ‏«اعرض أكتر» تحت الجدول */
.ei-more-rows {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px; border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-xs); color: var(--text-muted);
}

/* ‏شريطُ التحديد: زرُّ ترقيةٍ معطَّلٌ يُرى معطَّلا */
.ei-sel-bar .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ‏فشلُ الترقية الجماعيّة — يُسمّي مَن فشل ولمَ */
.ei-bulk-fail { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger-text); font-size: var(--fs-xs); }
.ei-bulk-fail ul { margin: 6px 0 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 3px; }
.ei-bulk-fail li span { color: var(--text-strong); }

/* ‏معاينةُ الاستيراد قبل الحفظ */
.ei-col-tag small { margin-inline-start: 5px; opacity: .7; font-feature-settings: "tnum" 1; }
.ei-imp-sample { margin: 8px 0; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.ei-imp-sample table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.ei-imp-sample th, .ei-imp-sample td { padding: 5px 8px; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--border-hairline, var(--border-subtle)); }
.ei-imp-sample th { color: var(--text-muted); font-weight: var(--fw-semibold); }
.ei-imp-sample td { color: var(--text-secondary); }
.ei-imp-sample td small { color: var(--text-muted); margin-inline-start: 4px; }
.ei-imp-sample tr.is-rej td { color: var(--warning-text); }
.ei-imp-sample .ei-yes { color: var(--success-text); font-style: normal; }
.ei-imp-sample .ei-no { color: var(--text-placeholder); font-style: normal; }

/* ‏أزرارُ الصفحة والنوافذ المعطَّلة — لا قاعدةَ `:disabled` في اللوحة كلِّها */
.ei-page .btn:disabled, .ei-secret-panel .btn:disabled { cursor: not-allowed; }
.ei-page .btn:disabled:not(.ei-promote-btn), .ei-secret-panel .btn:disabled { opacity: .5; }
.ei-page .btn-primary:disabled:hover, .ei-secret-panel .btn-primary:disabled:hover { filter: none; }
/* ‏وزرُّ الإغلاق في نوافذ الأسرار لا يُضغَط حين يطول عنوانُ البريد */
.ei-secret-panel .modal-close { flex: none; }